/* ==============================
VTU CGPA Calculator CSS Start
================================= */
:root {
  --vtu-calc-accent: #4361ee;
  --vtu-calc-accent-deep: #3a56d4;
  --vtu-calc-accent-light: #e6f0ff;
  --vtu-calc-text: #2b2d42;
  --vtu-calc-bg: #f8f9fa;
  --vtu-calc-white: #ffffff;
  --vtu-calc-border: #e0e3e7;
  --vtu-calc-danger: #e74c3c;
  --vtu-calc-danger-deep: #bd3324;
  --vtu-calc-success: #2ecc71;
  --vtu-calc-success-deep: #27ae60;
  --vtu-calc-radius: 3px;
  --vtu-calc-spacing: 1.5rem;
  --vtu-calc-gap: 0.65rem;
  --vtu-calc-width: 900px;
}

*{
  box-sizing: border-box;
}

/* ===== Inputs section style ===== */
.vtu-calc-mode-section,
.vtu-calc-div-display {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--vtu-calc-gap);
}
.vtu-calc-div-display{
  align-items: center !important;
  margin-bottom: var(--vtu-calc-spacing);
}
.vtu-calc-inner-mode-section {
  width: 100%;
}
.vtu-calc-input-section {
  display: flex;
  flex-direction: column;
  gap: var(--vtu-calc-gap);
}
/* ===== section title, summary, label ===== */
.vtu-calc-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--vtu-calc-text);
  margin: 0;
}
.vtu-calc-summary {
  margin-bottom: 1rem;
}
.vtu-calc-label {
  font-weight: 600;
  color: var(--vtu-calc-text);
  display: block;
  margin-bottom: 0.5rem;
}
.vtu-calc-text-small {
  font-size: 0.875rem !important;
  color: #666 !important;
  margin-top: var(--vtu-calc-gap);
  display: block;
}
/* ===== general card ===== */
.vtu-calc-card {
  background-color: var(--vtu-calc-bg);
  border: 1px solid var(--vtu-calc-border);
  border-radius: var(--vtu-calc-radius);
  padding: 0.65rem;
}
.vtu-calc-main-btn {
  margin-top: 1rem;
}
/* ===== remove button ===== */
.vtu-calc-button-danger {
  border: none;
  background-color: var(--vtu-calc-danger) !important;
  color: var(--vtu-calc-white) !important;
  padding-inline: var(--vtu-calc-spacing);
  height: 45px !important;
  border-radius: var(--vtu-calc-radius) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform 0.2s;
}
.vtu-calc-button-danger:hover {
  transform: translateY(-2px);
}
/* ===== Row Styles ===== */
.vtu-calc-row {
  display: grid;
  grid-template-columns: 4fr 4fr auto;
  gap: var(--vtu-calc-gap);
}
/* ===== result section ===== */
.vtu-calc-result-section {
  border-top: 2px solid var(--vtu-calc-accent-light) !important;
  padding-top: 1.5rem;
  margin-top: 2rem;
}
.vtu-calc-result-summary {
  margin-bottom: 1.5rem;
  line-height: 1.8;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: var(--vtu-calc-gap);
}
.vtu-calc-result-summary strong {
  color: var(--vtu-calc-accent-deep);
  font-weight: 700;
  background-color: var(--vtu-calc-accent-light);
  padding: 1rem 1.5rem;
  border-radius: var(--vtu-calc-radius);
  width: fit-content;
}
.vtu-calc-result-summary strong span {
  color: var(--vtu-calc-text);
	margin-left: 5px;
}
/* ===== table section ===== */
.vtu-calc-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.vtu-calc-table th,
.vtu-calc-table td {
  border: 1px solid var(--vtu-calc-border);
  padding: 0.75rem;
  text-align: left;
}

.vtu-calc-table th {
  background-color: var(--vtu-calc-accent-light) !important;
  color: var(--vtu-calc-accent-deep) !important;
  font-weight: 600;
}
/* ===== utility classes ===== */
.vtu-calc-hidden {
  display: none;
}
.vtu-calc-block {
  display: block;
}
.vtu-calc-overflow-x-auto {
  overflow-x: auto;
}
.vtu-calc-text-center {
  text-align: center;
}
/* ===== actions buttons ===== */
.vtu-calc-actions {
  display: flex;
  justify-content: start;
  gap: var(--vtu-calc-gap);
  margin-top: 1rem;
}
/* ===== responsive design ===== */
@media (max-width: 670px) {
  .vtu-calc-result-summary {
    flex-direction: column;
  }
  .vtu-calc-result-summary strong {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .vtu-calc-mode-section {
    flex-direction: column;
  }
}
@media (max-width: 560px) {
  .vtu-calc-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .vtu-calc-actions .st-general-btn {
    width: 100% !important;
  }
}
@media (max-width: 450px) {
  .vtu-calc-div-display {
    flex-direction: column;
  }
  .vtu-calc-row {
    grid-template-columns: 1fr !important;
  }
  .vtu-calc-main-btn {
    width: 100% !important;
  }
}
/* ==============================
VTU CGPA Calculator CSS End
================================= */