/*
 * Product enrollment page styles.
 * Restyles the 6 product/enrollment views (teen_c_s, teen_default, adult_c_s,
 * adult_default, dps_road_test, adult_online_class) onto the same navy/green,
 * Sora + Hanken Grotesk visual language as the .sp-* service pages
 * (public/assets/css/service-pages.css, loaded alongside this file).
 *
 * The multi-step SmartWizard form's HTML/classes/IDs are left untouched
 * (SmartWizard's JS selects on them) — this file only reskins the existing
 * Bootstrap/SmartWizard classes it already renders. No behavior changes.
 */

.pp-page { font-family: 'Hanken Grotesk', sans-serif; color: #16242e; }

/* ---------- Header / price / notice / description ---------- */
.pp-header { padding: 48px 0 12px; }
.pp-price-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 18px 0; }
.pp-price-before {
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 20px;
    color: #9aa8ad; text-decoration: line-through;
}
.pp-save-badge {
    display: inline-flex; align-items: center;
    background: #e6f5ef; color: #1c9e79;
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px;
    padding: 6px 12px; border-radius: 20px;
}

.pp-notice {
    display: flex; gap: 10px; align-items: flex-start;
    background: #f4f6f5; border-radius: 10px; padding: 14px 16px;
    color: #56666e; font-size: 14px; line-height: 1.55; margin: 18px 0;
}
.pp-notice svg { flex: none; margin-top: 2px; color: #1c9e79; }

.pp-description { font-size: 16px; line-height: 1.7; color: #40515a; margin: 18px 0 8px; }

/* ---------- Class schedule cards ---------- */
.pp-schedule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 24px 0; }
.pp-schedule-card {
    background: #f4f6f5; border-radius: 14px; padding: 22px;
    display: flex; flex-direction: column; gap: 10px;
}
.pp-schedule-code {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; color: #16242e;
}
.pp-schedule-row { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: #56666e; }
.pp-schedule-row svg { flex: none; margin-top: 2px; color: #1c9e79; }
.pp-schedule-label {
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 11px;
    letter-spacing: .04em; text-transform: uppercase; color: #9aa8ad;
    display: block; margin-bottom: 1px;
}

/* ---------- DPS requirements ---------- */
.pp-requirements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 24px 0; }
.pp-requirements-card { background: #fff; border: 1px solid #e6eae9; border-radius: 14px; padding: 24px; }
.pp-requirements-card h3 {
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 17px; color: #16242e; margin: 0 0 12px;
}
.pp-requirements-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pp-requirements-card li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.5; color: #40515a; }
.pp-requirements-card li svg { flex: none; margin-top: 2px; color: #28c497; }
.pp-requirements-card p { margin: 0; }

/* ---------- Online-class card ---------- */
.pp-online-card {
    background: #fff; border: 1px solid #e6eae9; border-radius: 18px;
    padding: 40px; text-align: center; max-width: 560px; margin: 24px auto 0;
}
.pp-online-card .sp-icon-circle { margin: 0 auto 18px; }

/* ---------- SmartWizard step nav ---------- */
:root {
    --sw-toolbar-btn-background-color: #28c497;
    --sw-anchor-default-primary-color: #f4f6f5;
    --sw-anchor-default-secondary-color: #9aa8ad;
    --sw-anchor-active-primary-color: #28c497;
    --sw-anchor-active-secondary-color: #0c1a24;
    --sw-anchor-done-primary-color: #16242e;
    --sw-anchor-done-secondary-color: #ffffff;
    --sw-progress-color: #28c497;
    --sw-loader-color: #28c497;
}

#smartwizard { font-family: 'Hanken Grotesk', sans-serif; }
#smartwizard .nav .nav-link {
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px;
    border-radius: 20px;
}

/* ---------- Form cards (glass-effect wizard steps) ---------- */
#student-form .card,
.glass-effect.card {
    background: #ffffff;
    border: 1px solid #e6eae9;
    border-radius: 18px;
    box-shadow: 0 20px 45px -30px rgba(12, 26, 36, .35);
}
#student-form .glass-effect .card-body,
.glass-effect .card-body {
    color: #16242e;
    background: transparent;
}
#smartwizard .form-control,
#smartwizard .form-select {
    border-radius: 9px;
    border: 1.5px solid #e2e8e6;
    padding: 12px 14px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 15px;
}
#smartwizard .form-control:focus,
#smartwizard .form-select:focus {
    border-color: #28c497;
    box-shadow: 0 0 0 3px rgba(40, 196, 151, .15);
}
#smartwizard .form-check-input:checked {
    background-color: #28c497;
    border-color: #28c497;
}
#smartwizard label,
#smartwizard .form-label {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    color: #16242e;
}

/* ---------- Buttons ---------- */
.btn-primary {
    background-color: #28c497;
    border-color: #28c497;
    color: #0c1a24;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    border-radius: 9px;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #22b085;
    border-color: #22b085;
    color: #0c1a24;
}
#smartwizard .sw-btn-prev {
    background-color: #ffffff;
    border: 1.5px solid #16242e;
    color: #16242e;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    border-radius: 9px;
}
#smartwizard .sw-btn-prev:hover {
    background-color: #16242e;
    color: #fff;
}

/* ---------- Owl Carousel pairing cards ---------- */
.owl-carousel .item .card { border-radius: 14px; border: 1px solid #e6eae9; }