/* Unified "Get Started" page (2026-11-11). Scoped to .gs-page, same
   per-page CSS approach as ai-tutor-pricing.css -- lets this page's design
   iterate independently of the global dist/style.scss build. */
/* Site convention (same as .aitp-page/.inner-padding elsewhere): headings
   in Poppins, body copy in Roboto -- matches dist/style.css's own h1-h6/p
   rule. Top padding matches .inner-padding (200px) because .header-exam is
   position:fixed (site/login.php) and floats over the page instead of
   pushing it down -- every other public page compensates the same way. */
.gs-page{ font-family: "Roboto", sans-serif; padding: 200px 0 100px 0; }
.gs-page h1, .gs-page h2, .gs-page h3, .gs-page h4{ font-family: "Poppins", sans-serif; }
.gs-row{ margin: 0; display: flex; flex-wrap: wrap; gap: 24px; }
.gs-row > .gs-left, .gs-row > .gs-right{ flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); }
.gs-left{ background: #FBC63E; border-radius: 16px; padding: 30px; }
.gs-right{ background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.gs-h1{ font-size: 24px; font-weight: 700; color: #1f2937; margin-bottom: 6px; }
.gs-lead{ font-size: 15px; color: #4b5563; margin-bottom: 20px; }
.gs-left .gs-lead{ color: #4a3b00; }

.gs-tabs{ display: flex; gap: 10px; margin-bottom: 20px; }
.gs-tab{ flex: 1; display: block; text-align: center; text-decoration: none; background: #fff; border: none; border-radius: 10px; padding: 12px; font-weight: 600; color: #4a3b00; cursor: pointer; }
.gs-tab:hover{ text-decoration: none; color: #4a3b00; }
.gs-tab.active{ background: #1f2937; color: #fff; }
.gs-tab.active:hover{ color: #fff; }

/* Plan card redesign (2026-11-12, client reference mockup) -- a 3-column
   row: mascot icon | title+price+badges | checklist, not a stacked block.
   The small round badge is the selected-state indicator, pinned to the
   card's own top-right corner regardless of the 3 columns beside it. */
.gs-plan-card{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; background: #fff; border-radius: 16px; padding: 16px 20px; margin-bottom: 14px; cursor: pointer; position: relative; border: 2px solid #e5e7eb; transition: border-color .15s, box-shadow .15s, background .15s; }
.gs-plan-card:hover{ border-color: #93c5fd; }
.gs-plan-card input[type="radio"]{ position: absolute; opacity: 0; pointer-events: none; }
.gs-plan-check{ position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; background: #fff; }
.gs-plan-card:has(input:checked){ background: linear-gradient(135deg, #eaf3fc 0%, #ffffff 60%); border-color: #007aff; box-shadow: 0 6px 18px rgba(0,122,255,0.15); }
.gs-plan-card:has(input:checked) .gs-plan-check{ background: #007aff; border-color: #007aff; color: #fff; }
/* Mascot icon (2026-11-12, client-supplied PNGs, already transparent --
   trimmed/resized from the ~1300px source via a one-off GD script, see
   scratchpad) -- shown at full size with no circle/background clipping it,
   per client request ("no need of background, visible fully"). */
.gs-plan-icon{ flex: 0 0 auto; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.gs-plan-icon img{ width: 100%; height: 100%; object-fit: contain; }
/* Center column: title, price, badges -- stacked, left-aligned. */
.gs-plan-info{ flex: 1 1 200px; min-width: 160px; padding-right: 26px; }
.gs-plan-info h3{ font-size: 17px; font-weight: 700; margin: 0 0 3px 0; color: #1f2937; font-family: 'Poppins', sans-serif; }
.gs-plan-price{ display: block; font-size: 26px; font-weight: 800; color: #007aff; white-space: nowrap; }
.gs-plan-price-suffix{ font-size: 14px; font-weight: 600; color: #6b7280; margin-left: 2px; }
.gs-plan-badges{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gs-plan-save{ font-size: 13px; font-weight: 700; color: #be185d; background: #fce7f3; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.gs-plan-credits{ font-size: 13px; font-weight: 600; color: #007aff; background: #eaf3fc; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
/* Right column: checklist. */
.gs-plan-features{ flex: 0 0 auto; width: 210px; list-style: none; padding: 0; margin: 0; }
.gs-plan-features li{ font-size: 14px; color: #374151; margin-bottom: 10px; white-space: nowrap; }
.gs-plan-features li:last-child{ margin-bottom: 0; }
.gs-plan-features li i{ color: #22c55e; margin-right: 6px; }
@media (max-width: 480px){
    .gs-plan-features{ width: 100%; padding-left: 64px; }
}
/* Online Training card redesign (2026-11-12, client reference mockup;
   reworked 2026-11-13 -- description moved to its own full-width row below
   illustration/title/prices instead of squeezed into the narrow .gs-ot-info
   column, and the mascot illustration enlarged). */
.gs-ot-card{ display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 14px; padding: 14px 18px; margin-bottom: 10px; border: 2px solid #e5e7eb; }
.gs-ot-top{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.gs-ot-illustration{ flex: 0 0 auto; width: 150px; }
.gs-ot-illustration img{ width: 100%; height: auto; display: block; }
.gs-ot-info{ flex: 1 1 220px; min-width: 180px; }
.gs-ot-head{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.gs-ot-head h3{ font-size: 18px; font-weight: 800; color: #007aff; margin: 0; font-family: 'Poppins', sans-serif; }
.gs-ot-package-badge{ font-size: 12.5px; font-weight: 700; color: #be185d; background: #fce7f3; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.gs-ot-package-badge i{ margin-right: 3px; }
.gs-ot-promo{ font-size: 13px; font-weight: 700; color: #e11d48; margin: 3px 0 0 0; }
.gs-ot-desc{ width: 100%; margin: 0; padding-top: 8px; border-top: 1px solid #f1f1f1; }
.gs-ot-desc-text{ display: block; font-size: 14px; color: #6b7280; line-height: 1.5; }
.gs-ot-desc-text.gs-ot-desc-clamped{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gs-ot-more, .gs-ot-less{ display: inline-block; font-size: 13px; font-weight: 700; color: #0e68ca; background: #eaf3fc; border-radius: 999px; padding: 2px 10px; margin-top: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.gs-ot-prices{ flex: 0 0 auto; display: flex; gap: 10px; }
.gs-ot-price-pill{ display: block; position: relative; text-align: center; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 9px 16px; cursor: pointer; white-space: nowrap; transition: border-color .15s, box-shadow .15s, background .15s; }
.gs-ot-price-pill input[type="radio"]{ position: absolute; opacity: 0; pointer-events: none; }
/* Selected check icon (2026-11-13, client report -- the selected pill was
   too subtle a color shift to tell apart from the unselected one at a
   glance) -- hidden by default, shown only once :has(input:checked). */
.gs-ot-pill-check{ display: none; margin-right: 5px; }
.gs-ot-price-pill:has(input:checked) .gs-ot-pill-check{ display: inline; }
.gs-ot-pill-outline{ background: #fff; border: 2px solid #d1d5db; color: #1f2937; }
.gs-ot-pill-outline:has(input:checked){ border-color: #007aff; color: #007aff; box-shadow: 0 0 0 3px rgba(0,122,255,0.15); }
.gs-ot-pill-dark{ background: #0f1b2e; border: 2px solid #0f1b2e; color: #fff; }
.gs-ot-pill-dark:has(input:checked){ background: #007aff; border-color: #007aff; box-shadow: 0 0 0 3px rgba(0,122,255,0.25); }
/* Free Trial pill (2026-11-13) -- now an inline selectable option (reusing
   the real plan='free' row per duration) instead of a separate link out to
   the old site/pages/signup.php -- see final_submit's 'free' branch. Its
   own green so it doesn't get mistaken for just another paid tier. */
.gs-ot-pill-free{ background: #fff; border: 2px solid #16a34a; color: #16a34a; }
.gs-ot-pill-free:has(input:checked){ background: #16a34a; border-color: #16a34a; color: #fff; box-shadow: 0 0 0 3px rgba(22,163,74,0.25); }
@media (max-width: 480px){
    .gs-ot-top{ flex-direction: column; align-items: flex-start; }
    .gs-ot-prices{ width: 100%; }
    .gs-ot-price-pill{ flex: 1 1 0; }
}

/* Top-Up Credits -- same visual language as ai-tutor-pricing.css's own
   .aitp-credit-* section (same colours/badge/button treatment), scaled
   down to fit this sidebar column. Informational only here (no purchase
   link -- no student exists yet to top up pre-signup), so the "Per
   Student" button is a plain span, not an <a>. */
/* scroll-margin-top (2026-11-12, header "Top up" link now deep-links here
   with #gsTopupSection) -- same fixed-header offset reasoning as the page's
   own top padding (.gs-page, see its own comment) so a mid-page anchor jump
   doesn't land the section half-hidden under .header-exam. */
.gs-topup{ margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(74,59,0,0.15); scroll-margin-top: 110px; }
.gs-topup h4{ font-size: 18px; font-weight: 700; color: #0f1b2e; margin: 0 0 5px 0; font-family: 'Poppins', sans-serif; }
.gs-topup-lead{ font-size: 14px; color: #4a3b00; margin: 0 0 14px 0; line-height: 1.5; }
.gs-topup-hint{ font-size: 13px; color: #0e68ca; background: #eaf3fc; border-radius: 8px; padding: 8px 12px; margin: 14px 0 0 0; }
.gs-topup-row{ display: flex; flex-wrap: wrap; gap: 14px 10px; }
.gs-topup-card{ flex: 1 1 140px; position: relative; background: #fff; border: 2px solid #e5e9f0; border-radius: 14px; box-shadow: 0 10px 24px rgba(15,27,46,0.06); padding: 18px 15px 15px; display: flex; flex-direction: column; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.gs-topup-card input[type="radio"]{ position: absolute; opacity: 0; pointer-events: none; }
.gs-topup-check{ position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 9px; color: transparent; background: #fff; }
.gs-topup-featured{ border-color: #f9a8d4; background: #fff5f9; box-shadow: 0 14px 30px rgba(236,72,153,0.14); }
/* Selected state (2026-11-13) -- same :has(input:checked) pattern as
   .gs-plan-card, placed after .gs-topup-featured so a selected Featured
   card still gets the selected (blue) border instead of staying pink. */
.gs-topup-card:has(input:checked){ border-color: #007aff; background: linear-gradient(135deg, #eaf3fc 0%, #ffffff 60%); box-shadow: 0 6px 18px rgba(0,122,255,0.15); }
.gs-topup-card:has(input:checked) .gs-topup-check{ background: #007aff; border-color: #007aff; color: #fff; }
.gs-topup-badge{ position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #ec4899; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.gs-topup-head{ display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.gs-topup-icon{ flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.gs-topup-icon-blue{ background: #eaf3fc; color: #007aff; }
.gs-topup-icon-pink{ background: #fce7f3; color: #ec4899; }
.gs-topup-card h5{ font-size: 15px; font-weight: 800; color: #0f1b2e; margin: 0 0 3px 0; }
.gs-topup-card p{ font-size: 13px; color: #475569; line-height: 1.5; margin: 0; }
.gs-topup-price{ font-size: 21px; font-weight: 800; color: #0f1b2e; margin-bottom: 10px; text-align: center; }
.gs-topup-btn{ display: block; text-align: center; background: transparent; border: 1.5px solid #007aff; color: #007aff; font-weight: 700; font-size: 13.5px; border-radius: 10px; padding: 9px 12px; pointer-events: none; margin-top: auto; }
.gs-topup-btn-filled{ background: #ec4899; border-color: #ec4899; color: #fff; }
@media (max-width: 480px){
    .gs-topup-card{ flex: 1 1 100%; }
}

.gs-section{ margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #f1f1f1; }
.gs-section:last-child{ border-bottom: none; margin-bottom: 0; }
.gs-section-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.gs-section-head h2{ font-size: 18px; font-weight: 700; color: #1f2937; margin: 0; }
.gs-section-sub{ font-size: 14px; color: #6b7280; margin-bottom: 14px; }
.gs-badge{ background: #e8f5e9; color: #2e7d32; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.gs-readonly-name{ font-size: 16px; font-weight: 600; color: #1f2937; margin: 0; }
.gs-readonly-email{ font-size: 14px; color: #6b7280; margin: 0; }

.gs-form .form-group{ margin-bottom: 16px; }
.gs-form .form-group label{ font-size: 13px; font-weight: 600; color: #4b5563; margin-bottom: 6px; display: block; }
.gs-form .form-control{ width: 100%; height: auto; border-radius: 8px; border: 1px solid #d1d5db; padding: 11px 14px; font-size: 15px; box-shadow: none; transition: border-color .15s; }
.gs-form .form-control:focus{ border-color: #0e68ca; box-shadow: 0 0 0 3px rgba(14,104,202,0.12); outline: none; }
.gs-terms{ font-size: 13px; color: #6b7280; margin: 10px 0; }
.gs-already{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #eaf3fc; border: 1px solid #bfdbfe; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.gs-already span{ font-size: 14px; font-weight: 600; color: #0f1b2e; }
.gs-already .gs-btn-outline{ padding: 8px 20px; }
.gs-msg{ font-size: 14px; margin: 8px 0; }

.gs-btn{ background: #0e68ca; color: #fff; border: none; border-radius: 10px; padding: 12px 24px; font-weight: 600; cursor: pointer; }
.gs-btn-right{ display: block; margin-left: auto; }
.gs-btn:hover{ background: #004a7c; }
.gs-btn-outline{ background: #fff; border: 1px solid #0e68ca; color: #0e68ca; border-radius: 8px; padding: 10px 18px; font-weight: 600; cursor: pointer; }
.gs-btn-lg{ width: 100%; padding: 14px; font-size: 16px; }
.gs-link{ display: inline-block; margin-top: 10px; font-size: 13px; color: #0e68ca; cursor: pointer; text-decoration: underline; }
.gs-disabled{ pointer-events: none; opacity: 0.5; }
/* In-flight loading spinner (2026-11-13, client report, live demo -- clicking
   Continue/Verify gave no visible feedback while the request was in flight,
   so a slower connection just looked broken and invited repeat clicks). Hides
   the button's own label via color:transparent (its wrapper span keeps the
   button's width stable) and draws a centered spinner over it with ::after,
   same technique already used for the inline mini-spinners elsewhere on the
   site (no extra markup needed) -- also disabled/pointer-events:none so this
   doubles as the multiple-submit guard. */
.gs-btn.gs-loading{ color: transparent !important; position: relative; pointer-events: none; opacity: 0.85; }
.gs-btn.gs-loading .gs-btn-text{ visibility: hidden; }
.gs-btn.gs-loading::after{
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255,255,255,0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gsBtnSpin 0.6s linear infinite;
}
@keyframes gsBtnSpin{ to{ transform: rotate(360deg); } }

.gs-otp-input{ letter-spacing: 6px; font-size: 20px; text-align: center; max-width: 220px; }

/* Child-select rows (2026-11-12, client report: "background color" +
   "selection currently not working") -- the native radio dot alone gave no
   visible feedback on click, so this now matches the plan cards' own
   selected-state pattern: light-blue background + blue border + a round
   checkmark badge when :checked, instead of relying on the bare input. */
.gs-existing-students{ margin-bottom: 14px; }
.gs-student-pick{ position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f9fafb; border: 2px solid transparent; border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: #374151; transition: border-color .15s, background .15s; }
.gs-student-pick:hover{ border-color: #93c5fd; }
.gs-student-pick input[type="radio"]{ position: absolute; opacity: 0; pointer-events: none; }
.gs-student-pick:has(input:checked){ background: #eaf3fc; border-color: #007aff; color: #0f1b2e; font-weight: 700; }
.gs-student-check{ flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; background: #fff; }
.gs-student-pick:has(input:checked) .gs-student-check{ background: #007aff; border-color: #007aff; color: #fff; }
/* Already-subscribed badges (2026-11-12 client request) -- shown per child
   so a parent can tell at a glance which products that child already has,
   before picking one for a new purchase. */
.gs-student-badge{ display: inline-block; font-size: 11px; font-weight: 700; color: #475569; background: #e2e8f0; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.gs-student-pick:has(input:checked) .gs-student-badge{ background: #fff; color: #007aff; }
/* Warning shown in the order summary when the selected child already has
   the currently-selected product (JS toggles this, see get-started.js's
   updateAlreadySubscribedWarning) -- so the parent sees it before paying,
   not only after, on their own dashboard. */
.gs-already-subscribed{ display: flex; align-items: flex-start; gap: 8px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 13px; line-height: 1.5; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.gs-already-subscribed i{ margin-top: 2px; color: #ea580c; }
.gs-already-subscribed a{ color: #9a3412; font-weight: 700; text-decoration: underline; }

.gs-coupon-box{ display: flex; gap: 10px; margin-bottom: 10px; }
.gs-coupon-box input{ flex: 1; border-radius: 8px; border: 1px solid #e5e7eb; padding: 10px 12px; }

/* Order summary made more prominent (client request, 2026-11-12) -- blue
   accent border/background instead of plain grey, bigger title/total, so
   it reads as "here's what you're about to pay" rather than blending into
   the rest of the form. */
.gs-order-summary{ background: #eaf3fc; border: 2px solid #bfdbfe; border-radius: 12px; padding: 18px 20px; margin: 16px 0; }
.gs-order-summary h3{ font-size: 17px; font-weight: 800; color: #0f1b2e; margin: 0 0 12px 0; font-family: 'Poppins', sans-serif; }
.gs-order-row{ display: flex; justify-content: space-between; font-size: 14px; color: #475569; margin-bottom: 8px; }
.gs-order-total{ font-size: 20px; font-weight: 800; color: #007aff; border-top: 2px solid #bfdbfe; padding-top: 10px; margin-top: 10px; }
.gs-order-total span:first-child{ font-size: 15px; font-weight: 700; color: #0f1b2e; }

.gs-redirecting{ text-align: center; padding: 60px 0; }

@media (max-width: 767px){
    .gs-row > .gs-left, .gs-row > .gs-right{ flex: 0 0 100%; max-width: 100%; }
    .gs-page{ padding: 130px 0 60px 0; }
}