.elementor-5156 .elementor-element.elementor-element-2bbb0e9{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5156 .elementor-element.elementor-element-1d0f572{padding:0px 0px 0px 0px;}body.elementor-page-5156:not(.elementor-motion-effects-element-type-background), body.elementor-page-5156 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#f8fafc;}/* Start custom CSS *//* ============================================================
   GradeFlow — Final Grade Calculator Page — COMPLETE CSS
   Merged: Original widget styles + New Elementor data-id redesign
   ============================================================ */

/* === 1. CSS VARIABLES === */
:root {
  --gf-navy:    #0F172A;
  --gf-blue:    #2563EB;
  --gf-blue-dk: #1D4ED8;
  --gf-purple:  #7C3AED;
  --gf-green:   #10B981;
  --gf-bg:      #F0F4F8;
  --gf-line:    #E2E8F0;
  --gf-card:    #ffffff;
  --gf-muted:   #64748B;
  --gf-ink:     #334155;
  --gf-blue-s:  #EFF6FF;
  --gf-green-s: #ECFDF5;
  --gf-purple-s:#F5F3FF;
  --gf-radius:  16px;
  --gf-shadow:  0 2px 8px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.06);
}

/* === 2. PAGE BACKGROUND === */
body.page-id-4864,
.elementor-page-4864 .elementor-section-wrap,
.elementor-page-4864 > .elementor {
  background: var(--gf-bg) !important;
}

/* === 3. HERO SECTION BY DATA-ID === */
.elementor-element[data-id="hpbvz0t"] {
  background: var(--gf-bg) !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* "Exam planning" tag */
.elementor-element[data-id="u8hb42f"] .elementor-heading-title {
  display: inline-block !important;
  background: var(--gf-blue-s) !important;
  color: var(--gf-blue) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
}

/* Main H1 */
.elementor-element[data-id="rz0nsej"] .elementor-heading-title {
  font-size: 38px !important;
  font-weight: 900 !important;
  color: var(--gf-navy) !important;
  line-height: 1.15 !important;
}

/* Hero description */
.elementor-element[data-id="ccb4bal"] .elementor-text-editor p {
  font-size: 16px !important;
  color: var(--gf-muted) !important;
  line-height: 1.65 !important;
}

/* CTA button primary */
.elementor-element[data-id="0esv2x1"] a,
.elementor-element[data-id="0esv2x1"] .elementor-button {
  background: var(--gf-blue) !important;
  color: #fff !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(37,99,235,0.3) !important;
}
.elementor-element[data-id="0esv2x1"] a:hover {
  background: var(--gf-blue-dk) !important;
}

/* CTA button ghost */
.elementor-element[data-id="8nezvde"] a,
.elementor-element[data-id="8nezvde"] .elementor-button {
  background: #fff !important;
  color: var(--gf-navy) !important;
  border: 1.5px solid var(--gf-line) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* Page Intent card container */
.elementor-element[data-id="oveo5kp"] {
  background: #fff !important;
  border-radius: var(--gf-radius) !important;
  border: 1px solid var(--gf-line) !important;
  box-shadow: var(--gf-shadow) !important;
  padding: 20px !important;
}

/* Page Intent heading */
.elementor-element[data-id="h8mvjsj"] .elementor-heading-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--gf-navy) !important;
}

/* Intent number badges */
.elementor-element[data-id="tkfk58k"] .elementor-heading-title,
.elementor-element[data-id="rhrcs9t"] .elementor-heading-title,
.elementor-element[data-id="ll5ixaq"] .elementor-heading-title,
.elementor-element[data-id="m1n3tg8"] .elementor-heading-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--gf-blue-s) !important;
  color: var(--gf-blue) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}

/* === 4. GAP KILLERS === */
/* Kill the min-height:100vh on the predictor tool wrapper — causes ~400px dead space */
.elementor-element[data-id="e7a5a5d"] .sc-tool-wrap-global,
.elementor-element[data-id="612efdb"] .sc-tool-wrap-global,
.sc-tool-wrap-global {
  min-height: auto !important;
  min-height: 0 !important;
}
/* Also kill on sc-calc-container */
.elementor-element[data-id="e7a5a5d"] .sc-calc-container,
.elementor-element[data-id="612efdb"] .sc-calc-container {
  min-height: auto !important;
  padding-bottom: 24px !important;
}
/* Kill extra padding on predictor section */
.elementor-element[data-id="612efdb"],
.elementor-element[data-id="612efdb"] > .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
/* Hide the predictor result section when not calculated (kills 400px blank) */
.elementor-element[data-id="e7a5a5d"] .sc-result-hidden,
#scp-result-wrap.sc-result-hidden {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}
/* Grade calculator section spacing */
.elementor-element[data-id="wx31uph"] {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  margin-top: 0 !important;
}
/* Content section spacing */
.elementor-element[data-id="vxblv5d"] {
  padding-top: 8px !important;
  padding-bottom: 28px !important;
}
/* CTA parent spacing */
.elementor-element[data-id="pgqh679"] {
  padding-top: 8px !important;
  padding-bottom: 40px !important;
}

/* === 5. FINAL EXAM PREDICTOR CARD STYLE === */
.sc-calc-card {
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid var(--gf-line) !important;
  box-shadow: var(--gf-shadow) !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* === 6. GRADE CALCULATOR — Fix faded result card === */
.gc-result-card {
  background: linear-gradient(145deg, #0D0A2A 0%, #1B1248 35%, #2A1B6A 68%, #3C2580 100%) !important;
  opacity: 1 !important;
}
.gc-result-card, .gc-result-num, .gc-result-unit,
.gc-result-lbl, .gc-result-desc, .gc-result-badge {
  opacity: 1 !important;
}
.gc-result-num { color: #ffffff !important; }
.gc-result-unit { color: #A5B4FC !important; }

/* === 7. CONTENT SECTION HEADINGS === */
.elementor-element[data-id="jvqh5q7"] .elementor-heading-title,
.elementor-element[data-id="m0ii6tf"] .elementor-heading-title,
.elementor-element[data-id="0h0ti8s"] .elementor-heading-title,
.elementor-element[data-id="21ae805"] .elementor-heading-title {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: var(--gf-navy) !important;
}

/* === 8. HTML WIDGET CONTENT STYLES (original class-based) === */
/* These power the content inside the HTML widgets */

/* Generic shared buttons */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 18px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.btn-primary {
  background: var(--gf-blue) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(37,99,235,.25) !important;
}
.btn-ghost {
  background: #fff !important;
  color: var(--gf-navy) !important;
  border-color: var(--gf-line) !important;
  box-shadow: 0 1px 2px rgba(16,27,61,.05), 0 4px 14px rgba(16,27,61,.05) !important;
}

/* Formula used block */
.formula {
  background: #0b1430 !important;
  color: #cdd8f7 !important;
  border-radius: var(--gf-radius) !important;
  padding: 20px 22px !important;
  font-family: ui-monospace,monospace !important;
}
.formula .eq {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #fff !important;
}
.formula .leg {
  margin-top: 12px !important;
  font-size: 12.5px !important;
  color: #93a0c8 !important;
  line-height: 1.7 !important;
  font-family: 'Plus Jakarta Sans',sans-serif !important;
}

/* Example calculation table */
.example table, .faq-table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.example, .faq {
  background: #fff !important;
  border: 1px solid var(--gf-line) !important;
  border-radius: var(--gf-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--gf-shadow) !important;
}
th {
  background: var(--gf-bg) !important;
  color: var(--gf-muted) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  text-align: left !important;
  padding: 13px 18px !important;
}
td {
  border-top: 1px solid var(--gf-line) !important;
  padding: 13px 18px !important;
  font-size: 14px !important;
  color: var(--gf-ink) !important;
}
td b { color: var(--gf-navy) !important; }
.result-line {
  background: var(--gf-blue-s) !important;
  color: var(--gf-blue) !important;
  font-weight: 800 !important;
}

/* Related tools cards */
.related {
  display: grid !important;
  gap: 12px !important;
}
.rel {
  background: #fff !important;
  border: 1px solid var(--gf-line) !important;
  border-radius: 13px !important;
  padding: 14px 16px !important;
  box-shadow: var(--gf-shadow) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  transition: transform .2s, border-color .2s !important;
}
.rel:hover {
  transform: translateY(-2px) !important;
  border-color: #cdd6ef !important;
}
.rel h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gf-navy) !important;
  margin: 0 !important;
}
.rel p {
  font-size: 12.5px !important;
  color: var(--gf-muted) !important;
  margin: 3px 0 0 0 !important;
}
.rel span {
  color: var(--gf-blue) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* FAQ accordion */
details {
  border-bottom: 1px solid var(--gf-line) !important;
}
details:last-child { border-bottom: 0 !important; }
summary {
  cursor: pointer !important;
  padding: 16px 18px !important;
  font-weight: 800 !important;
  color: var(--gf-navy) !important;
  font-size: 14.5px !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
}
summary::-webkit-details-marker { display: none !important; }
.answer {
  padding: 0 18px 16px !important;
  color: var(--gf-muted) !important;
  font-size: 13.5px !important;
}

/* Content grid section */
.gf-content-section {
  display: flex !important;
  gap: 22px !important;
  margin-top: 24px !important;
  flex-wrap: wrap !important;
}
.block { margin-bottom: 20px !important; width: 100% !important; }
.block h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--gf-navy) !important;
  margin: 0 0 12px 0 !important;
}

/* === 9. CTA BANNER — indigo/purple gradient === */
/* Target both the class (.gf-cta) AND the data-id to ensure one wins */
.gf-cta,
.elementor-element-cdt1b0v,
.elementor-element[data-id="cdt1b0v"] {
  background: linear-gradient(135deg, #2563EB 0%, #4F46E5 50%, #7C3AED 100%) !important;
  background-color: #2563EB !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(37,99,235,0.3) !important;
}
.gf-cta h2,
.gf-cta .elementor-heading-title,
.elementor-element[data-id="cdt1b0v"] .elementor-heading-title {
  color: #fff !important;
  font-weight: 800 !important;
}
.gf-cta p,
.elementor-element[data-id="cdt1b0v"] p,
.elementor-element[data-id="cdt1b0v"] .elementor-text-editor {
  color: rgba(255,255,255,0.88) !important;
}
.btn-white,
.elementor-element[data-id="jb2y06m"] a,
.elementor-element[data-id="jb2y06m"] .elementor-button {
  background: #fff !important;
  color: var(--gf-blue) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
}
.elementor-element[data-id="jb2y06m"] a:hover {
  background: #F1F5F9 !important;
}

/* Hide script wrapper visually */
.gf-js-script-wrapper { display: none !important; }

/* === 10. MOBILE RESPONSIVE === */
@media (max-width: 768px) {
  .elementor-element[data-id="rz0nsej"] .elementor-heading-title {
    font-size: 26px !important;
  }
  .elementor-element[data-id="hpbvz0t"] {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  /* Calculator 2-col → 1-col */
  .gc-wrap { grid-template-columns: 1fr !important; }
  .gc-row  { grid-template-columns: 1fr !important; }
  /* Predictor card full width */
  .sc-calc-card { max-width: 100% !important; }
  /* Content section stacked */
  .gf-content-section { flex-direction: column !important; }
  .gf-aside { width: 100% !important; }
}
@media (max-width: 480px) {
  .elementor-element[data-id="rz0nsej"] .elementor-heading-title {
    font-size: 22px !important;
  }
  .gc-result-num { font-size: 54px !important; }
}/* End custom CSS */