/* ============================================================
   Eco-Schools GGA Portal — Custom Stylesheet
   Primary Blue  : #006CB7
   Primary Green : #56B146
   Font          : Poppins (Google Fonts)
   ============================================================ */

/* ---- CSS Custom Properties ---------------------------------- */
:root {
    --eco-blue       : #006CB7;
    --eco-blue-dk    : #00539A;
    --eco-blue-lt    : #E8F3FB;
    --eco-green      : #56B146;
    --eco-green-dk   : #3E9432;
    --eco-green-lt   : #EDF7EB;
    --eco-orange     : #F5A623;
    --eco-text       : #1E3A4C;
    --eco-muted      : #6C8093;
    --eco-border     : #D6E4EE;
    --eco-bg         : #F5F8FB;

    /* Override Bootstrap 5 primary */
    --bs-primary     : var(--eco-blue);
    --bs-primary-rgb : 0, 108, 183;

    /* Body font */
    --bs-body-font-family : 'Poppins', system-ui, sans-serif;
    --bs-body-color       : var(--eco-text);
    --bs-body-bg          : var(--eco-bg);
    --bs-border-color     : var(--eco-border);
}

/* ---- Base Reset --------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family      : 'Poppins', system-ui, sans-serif;
    font-size        : 0.9375rem;   /* 15px */
    line-height      : 1.65;
    color            : var(--eco-text);
    background-color : var(--eco-bg);
    display          : flex;
    flex-direction   : column;
    min-height       : 100vh;
}

/* ============================================================
   TOP HEADER
   ============================================================ */
.site-header {
    background      : linear-gradient(
                        135deg,
                        var(--eco-blue)    0%,
                        #005499           50%,
                        #1a7b3b           100%
                      );
    color           : #fff;
    padding         : 0.6rem 0;
    box-shadow      : 0 2px 10px rgba(0,0,0,.20);
    position        : relative;
    z-index         : 100;
}

/* Subtle leaf-pattern overlay */
.site-header::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='none' stroke='rgba(255,255,255,.04)' stroke-width='1'/%3E%3C/svg%3E") repeat;
    pointer-events: none;
}

/* Logo */
.logo-link { display: inline-block; line-height: 0; }

.header-logo {
    height        : 72px;
    width         : auto;
    max-width     : 120px;
    object-fit    : contain;
    filter        : drop-shadow(0 1px 3px rgba(0,0,0,.25));
    transition    : opacity .2s;
}

.header-logo:hover { opacity: .88; }

.logo-fallback {
    width           : 72px;
    height          : 72px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border          : 2px dashed rgba(255,255,255,.35);
    border-radius   : 10px;
    font-size       : 2rem;
    color           : rgba(255,255,255,.7);
}

/* Programme Title */
.site-title {
    font-size     : 1.1rem;
    font-weight   : 700;
    color         : #fff;
    text-shadow   : 0 1px 3px rgba(0,0,0,.3);
    line-height   : 1.25;
    letter-spacing: .01em;
}

.site-tagline {
    font-size   : .72rem;
    font-weight : 300;
    color       : rgba(255,255,255,.82);
    letter-spacing: .04em;
}

/* Language switcher button */
.btn-lang-switch {
    display         : inline-flex;
    align-items     : center;
    gap             : .3rem;
    padding         : .22rem .8rem;
    border          : 1.5px solid rgba(255,255,255,.55);
    border-radius   : 20px;
    color           : #fff;
    font-size       : .78rem;
    font-weight     : 500;
    text-decoration : none;
    transition      : background .2s, border-color .2s;
    white-space     : nowrap;
}

.btn-lang-switch:hover,
.btn-lang-switch:focus {
    background-color : rgba(255,255,255,.18);
    border-color     : #fff;
    color            : #fff;
    text-decoration  : none;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar-eco {
    background-color : var(--eco-blue);
    box-shadow       : 0 2px 6px rgba(0,0,0,.18);
    padding-top      : .35rem;
    padding-bottom   : .35rem;
}

.navbar-eco .navbar-toggler {
    border-color : rgba(255,255,255,.4);
}

.navbar-eco .navbar-toggler-icon {
    background-image : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-eco .nav-link {
    color       : rgba(255,255,255,.88);
    font-size   : .875rem;
    font-weight : 500;
    padding     : .45rem 1rem;
    border-radius: 5px;
    transition  : background .2s, color .2s;
    position    : relative;
}

.navbar-eco .nav-link:hover,
.navbar-eco .nav-link:focus {
    color            : #fff;
    background-color : rgba(255,255,255,.14);
}

.navbar-eco .nav-link.active {
    color            : #fff;
    background-color : rgba(255,255,255,.18);
    font-weight      : 600;
}

/* Green underline accent on active link */
.navbar-eco .nav-link.active::after {
    content          : '';
    position         : absolute;
    bottom           : 2px;
    left             : 1rem;
    right            : 1rem;
    height           : 2px;
    background       : var(--eco-green);
    border-radius    : 1px;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.site-main {
    flex          : 1 0 auto;
    padding-top   : 0;
    padding-bottom: 2rem;
}

/* ============================================================
   HERO SECTION (Home page)
   ============================================================ */
.hero-section {
    background      : linear-gradient(150deg, var(--eco-blue) 0%, #004f8a 45%, #1d8a3b 100%);
    color           : #fff;
    border-radius   : 16px;
    padding         : 3rem 2.5rem;
    margin-bottom   : 2rem;
    position        : relative;
    overflow        : hidden;
    box-shadow      : 0 6px 24px rgba(0,108,183,.25);
}

.hero-section::before {
    content      : '';
    position     : absolute;
    top          : -60px;
    right        : -60px;
    width        : 220px;
    height       : 220px;
    background   : rgba(255,255,255,.06);
    border-radius: 50%;
}

.hero-section::after {
    content      : '';
    position     : absolute;
    bottom       : -80px;
    left         : -40px;
    width        : 260px;
    height       : 260px;
    background   : rgba(255,255,255,.04);
    border-radius: 50%;
}

.hero-section .hero-content { position: relative; z-index: 1; }

.hero-section .lead {
    font-size   : .975rem;
    font-weight : 300;
    opacity     : .9;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
    border        : 1px solid var(--eco-border);
    border-radius : 14px;
    box-shadow    : 0 2px 10px rgba(0,0,0,.06);
    transition    : transform .22s ease, box-shadow .22s ease;
    background    : #fff;
}

.card:hover {
    transform  : translateY(-4px);
    box-shadow : 0 8px 24px rgba(0,0,0,.10);
}

.card-header {
    border-radius : 14px 14px 0 0 !important;
    font-weight   : 600;
    padding       : .85rem 1.25rem;
}

.card-header.bg-eco-blue {
    background-color : var(--eco-blue) !important;
    color            : #fff;
    border-bottom    : none;
}

.card-header.bg-eco-green {
    background-color : var(--eco-green) !important;
    color            : #fff;
    border-bottom    : none;
}

/* ---- Info Icon Boxes (on cards) ---- */
.info-icon-box {
    width           : 68px;
    height          : 68px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1.9rem;
    margin          : 0 auto .75rem;
    flex-shrink     : 0;
}

.info-icon-box.icon-blue  { background-color: var(--eco-blue-lt);  color: var(--eco-blue);  }
.info-icon-box.icon-green { background-color: var(--eco-green-lt); color: var(--eco-green); }
.info-icon-box.icon-orange{ background-color: #FFF3E0;             color: var(--eco-orange); }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.section-title {
    display     : inline-block;
    font-size   : 1.15rem;
    font-weight : 700;
    color       : var(--eco-blue);
    margin-bottom: 1.5rem;
    position    : relative;
    padding-bottom: .4rem;
}

.section-title::after {
    content      : '';
    position     : absolute;
    bottom       : 0;
    left         : 0;
    width        : 44px;
    height       : 3px;
    background   : var(--eco-green);
    border-radius: 2px;
}

/* ============================================================
   STEP CARDS (How It Works)
   ============================================================ */
.step-number {
    font-size   : 2.4rem;
    font-weight : 800;
    color       : rgba(0,108,183,.10);
    line-height : 1;
    margin-bottom: .25rem;
}

/* ============================================================
   BUTTONS — Eco custom variants
   ============================================================ */
.btn-eco-blue {
    background-color : var(--eco-blue);
    border-color     : var(--eco-blue);
    color            : #fff;
    font-weight      : 600;
}
.btn-eco-blue:hover,
.btn-eco-blue:focus {
    background-color : var(--eco-blue-dk);
    border-color     : var(--eco-blue-dk);
    color            : #fff;
    box-shadow       : 0 4px 12px rgba(0,108,183,.35);
}

.btn-eco-green {
    background-color : var(--eco-green);
    border-color     : var(--eco-green);
    color            : #fff;
    font-weight      : 600;
}
.btn-eco-green:hover,
.btn-eco-green:focus {
    background-color : var(--eco-green-dk);
    border-color     : var(--eco-green-dk);
    color            : #fff;
    box-shadow       : 0 4px 12px rgba(86,177,70,.35);
}

.btn-outline-eco-blue {
    border-color : var(--eco-blue);
    color        : var(--eco-blue);
    font-weight  : 600;
}
.btn-outline-eco-blue:hover,
.btn-outline-eco-blue:focus {
    background-color : var(--eco-blue);
    color            : #fff;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-control,
.form-select {
    border-color  : var(--eco-border);
    border-radius : 8px;
    font-size     : .9rem;
    padding       : .5rem .85rem;
    transition    : border-color .2s, box-shadow .2s;
}

.form-control:focus,
.form-select:focus {
    border-color : var(--eco-blue);
    box-shadow   : 0 0 0 .22rem rgba(0,108,183,.18);
    outline      : none;
}

.form-label {
    font-weight : 500;
    font-size   : .87rem;
    color       : var(--eco-text);
    margin-bottom: .3rem;
}

.form-label .required-star {
    color       : #dc3545;
    margin-left : .2rem;
}

.input-group-text {
    background-color : var(--eco-blue-lt);
    border-color     : var(--eco-border);
    color            : var(--eco-blue);
    font-size        : .9rem;
}

/* ---- Form section cards ---- */
.form-section {
    background    : #fff;
    border        : 1px solid var(--eco-border);
    border-radius : 12px;
    padding       : 1.5rem;
    margin-bottom : 1.5rem;
}

.form-section-title {
    font-size     : .95rem;
    font-weight   : 700;
    color         : var(--eco-blue);
    border-bottom : 2px solid var(--eco-green-lt);
    padding-bottom: .6rem;
    margin-bottom : 1.2rem;
    display       : flex;
    align-items   : center;
    gap           : .5rem;
}

/* ============================================================
   TABLES
   ============================================================ */
.table-eco {
    font-size    : .87rem;
    border-color : var(--eco-border);
}

.table-eco thead th {
    background-color : var(--eco-blue);
    color            : #fff;
    font-weight      : 600;
    border-color     : rgba(255,255,255,.15);
    white-space      : nowrap;
}

.table-eco tbody tr:hover {
    background-color : var(--eco-blue-lt);
}

/* ============================================================
   BADGES — Status
   ============================================================ */
.badge-pending   { background-color: #FFC107; color: #000; font-weight: 600; }
.badge-active    { background-color: var(--eco-green); color: #fff; font-weight: 600; }
.badge-suspended { background-color: #fd7e14; color: #fff; font-weight: 600; }
.badge-rejected  { background-color: #dc3545; color: #fff; font-weight: 600; }

/* ---- Registration Number ---- */
.reg-number-badge {
    display         : inline-flex;
    align-items     : center;
    gap             : .5rem;
    background      : linear-gradient(135deg, var(--eco-blue), var(--eco-green));
    color           : #fff;
    font-family     : 'Poppins', monospace;
    font-size       : 1.05rem;
    font-weight     : 700;
    letter-spacing  : .12em;
    padding         : .45rem 1.4rem;
    border-radius   : 30px;
    box-shadow      : 0 3px 10px rgba(0,108,183,.3);
}

/* ============================================================
   ALERTS (override Bootstrap for better Eco look)
   ============================================================ */
.alert {
    border        : none;
    border-left   : 4px solid;
    border-radius : 8px;
    font-size     : .9rem;
}

.alert-success { border-left-color: var(--eco-green); background-color: var(--eco-green-lt); color: #155724; }
.alert-danger  { border-left-color: #dc3545; background-color: #fff5f5; color: #721c24; }
.alert-warning { border-left-color: #ffc107; background-color: #fffbec; color: #664d03; }
.alert-info    { border-left-color: var(--eco-blue); background-color: var(--eco-blue-lt); color: #0c3547; }

/* ============================================================
   COMING SOON PAGE
   ============================================================ */
.coming-soon-icon {
    font-size       : 5rem;
    color           : var(--eco-blue);
    opacity         : .3;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    flex-shrink : 0;
    margin-top  : auto;
}

.footer-wave {
    height     : 18px;
    background : linear-gradient(180deg, transparent 0%, rgba(0,108,183,.08) 100%);
}

.footer-body {
    background-color : var(--eco-blue);
    padding          : 1.1rem 0;
    color            : rgba(255,255,255,.88);
}

.footer-copy,
.footer-powered,
.footer-version {
    font-size : .8rem;
}

.footer-version {
    color    : rgba(255,255,255,.5);
    font-size: .72rem;
}

.text-eco-green { color: var(--eco-green) !important; }
.text-eco-blue  { color: var(--eco-blue)  !important; }

/* ============================================================
   PAGINATION
   ============================================================ */
.page-link {
    color        : var(--eco-blue);
    border-color : var(--eco-border);
    font-size    : .87rem;
}

.page-link:hover {
    background-color : var(--eco-blue-lt);
    color            : var(--eco-blue-dk);
    border-color     : var(--eco-blue);
}

.page-item.active .page-link {
    background-color : var(--eco-blue);
    border-color     : var(--eco-blue);
    color            : #fff;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.bg-eco-blue  { background-color: var(--eco-blue)  !important; }
.bg-eco-green { background-color: var(--eco-green) !important; }
.bg-eco-light { background-color: var(--eco-blue-lt) !important; }

.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* Subtle box around a block */
.info-box {
    background    : var(--eco-blue-lt);
    border        : 1px solid rgba(0,108,183,.2);
    border-radius : 10px;
    padding       : 1rem 1.25rem;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 991.98px) {
    .navbar-eco .navbar-collapse { border-top: 1px solid rgba(255,255,255,.15); padding-top: .5rem; }
    .navbar-eco .nav-link { padding: .45rem .5rem; }
    .navbar-eco .nav-link.active::after { display: none; }
}

@media (max-width: 767.98px) {
    .site-title   { font-size: .88rem; }
    .site-tagline { font-size: .65rem; }
    .header-logo,
    .logo-fallback { height: 52px; width: 52px; }
    .hero-section  { padding: 1.75rem 1.25rem; }
    .hero-section h2 { font-size: 1.25rem; }
    .section-title { font-size: 1rem; }
    .step-number   { font-size: 1.8rem; }
}

@media (max-width: 575.98px) {
    .site-title { font-size: .78rem; }
    .btn-lang-switch { font-size: .7rem; padding: .15rem .6rem; }
}

/* ============================================================
   REGISTRATION WIZARD — added in Prompt 2
   ============================================================ */

/* ---- Programme Banner ---- */
.prog-banner {
    background      : linear-gradient(135deg, var(--eco-blue-lt) 0%, #e8f8e8 100%);
    border          : 1px solid var(--eco-border);
    border-left     : 4px solid var(--eco-green);
    border-radius   : 12px;
    padding         : 1rem 1.25rem;
}

.prog-title {
    font-size   : .92rem;
    font-weight : 700;
    color       : var(--eco-blue);
    line-height : 1.3;
}

.prog-meta {
    font-size   : .78rem;
    color       : var(--eco-muted);
}

.wizard-counter {
    display         : inline-flex;
    align-items     : center;
    background      : var(--eco-blue);
    color           : #fff;
    padding         : .3rem .9rem;
    border-radius   : 20px;
    font-size       : .8rem;
    font-weight     : 500;
}

/* ---- Step Indicator ---- */
.wizard-steps {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 0;
    flex-wrap       : nowrap;
    overflow-x      : auto;
    padding         : .5rem 0;
}

.wizard-step {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    gap             : .35rem;
    min-width       : 80px;
    position        : relative;
    z-index         : 1;
}

.wizard-step-icon {
    width           : 38px;
    height          : 38px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : .85rem;
    font-weight     : 700;
    border          : 2px solid var(--eco-border);
    background      : #fff;
    color           : var(--eco-muted);
    transition      : all .25s ease;
}

.wizard-step.active .wizard-step-icon {
    background      : var(--eco-blue);
    border-color    : var(--eco-blue);
    color           : #fff;
    box-shadow      : 0 0 0 4px rgba(0,108,183,.18);
}

.wizard-step.completed .wizard-step-icon {
    background      : var(--eco-green);
    border-color    : var(--eco-green);
    color           : #fff;
}

.wizard-step-label {
    font-size       : .72rem;
    font-weight     : 500;
    color           : var(--eco-muted);
    text-align      : center;
    line-height     : 1.2;
    max-width       : 90px;
}

.wizard-step.active .wizard-step-label   { color: var(--eco-blue); font-weight: 700; }
.wizard-step.completed .wizard-step-label{ color: var(--eco-green); }

.wizard-connector {
    flex            : 1;
    height          : 2px;
    background      : var(--eco-border);
    margin-top      : -18px; /* align with icon centre */
    min-width       : 20px;
    transition      : background .25s ease;
}

.wizard-connector.done { background: var(--eco-green); }

/* ---- Progress Bar ---- */
.wizard-progress {
    height          : 6px;
    border-radius   : 3px;
    background-color: var(--eco-blue-lt);
}

.wizard-progress .progress-bar {
    background      : linear-gradient(90deg, var(--eco-blue), var(--eco-green));
    border-radius   : 3px;
}

/* ---- Registration Form Card ---- */
.reg-form-card {
    background      : #fff;
    border          : 1px solid var(--eco-border);
    border-radius   : 16px;
    padding         : 2rem;
    box-shadow      : 0 4px 20px rgba(0,0,0,.07);
    max-width       : 860px;
    margin          : 0 auto;
}

/* ---- Checkbox / Radio Grid ---- */
.checkbox-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(240px, 1fr));
    gap                   : .25rem .75rem;
}

/*
 * Bootstrap 5 .form-check uses padding-left + float which causes
 * checkboxes to appear indented/misaligned inside grids and groups.
 * Override with flexbox so the input and label sit flush together.
 */
.checkbox-grid .form-check,
.radio-group .form-check {
    display       : flex;
    align-items   : center;
    gap           : .5rem;
    padding-left  : 0;
    min-height    : auto;
    margin-bottom : 0;
    padding-top   : .2rem;
    padding-bottom: .2rem;
}

.checkbox-grid .form-check-input,
.radio-group .form-check-input {
    float        : none;
    margin-left  : 0;
    margin-top   : 0;
    flex-shrink  : 0;
    position     : static;
    cursor       : pointer;
}

.checkbox-grid .form-check-label,
.radio-group .form-check-label {
    margin-bottom : 0;
    line-height   : 1.4;
    cursor        : pointer;
}

/* ---- Conditional Fields ---- */
.conditional-field {
    border-left     : 3px solid var(--eco-green);
    padding-left    : 1.25rem;
    margin-left     : .25rem;
    margin-bottom   : 1.5rem;
    border-radius   : 0 8px 8px 0;
    background      : var(--eco-green-lt);
    padding-top     : .75rem;
    padding-bottom  : .5rem;
    padding-right   : .75rem;
}

/* ---- Linear Scale ---- */
.linear-scale-wrap {
    display         : flex;
    align-items     : center;
    gap             : 1rem;
    flex-wrap       : wrap;
}

.scale-label-low,
.scale-label-high {
    font-size       : .8rem;
    color           : var(--eco-muted);
    white-space     : nowrap;
    min-width       : 80px;
}

.scale-label-high { text-align: right; }

.scale-buttons {
    display         : flex;
    gap             : .5rem;
    flex-wrap       : nowrap;
}

.scale-btn {
    position        : relative;
    cursor          : pointer;
}

.scale-btn input {
    position        : absolute;
    opacity         : 0;
    width           : 0;
    height          : 0;
}

.scale-btn span {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 46px;
    height          : 46px;
    border-radius   : 50%;
    border          : 2px solid var(--eco-border);
    font-size       : .95rem;
    font-weight     : 600;
    color           : var(--eco-muted);
    background      : #fff;
    transition      : all .18s ease;
    cursor          : pointer;
}

.scale-btn:hover span,
.scale-btn input:focus + span {
    border-color    : var(--eco-blue);
    color           : var(--eco-blue);
    background      : var(--eco-blue-lt);
}

.scale-btn.selected span {
    background      : var(--eco-blue);
    border-color    : var(--eco-blue);
    color           : #fff;
    box-shadow      : 0 3px 10px rgba(0,108,183,.35);
    transform       : scale(1.1);
}

/* ---- Wizard Navigation ---- */
.wizard-nav {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    border-top      : 1px solid var(--eco-border);
    padding-top     : 1.5rem;
    gap             : 1rem;
}

/* ---- Review (Step 4) ---- */
.review-section {
    border          : 1px solid var(--eco-border);
    border-radius   : 12px;
    overflow        : hidden;
}

.review-section-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    background      : var(--eco-blue-lt);
    padding         : .75rem 1.25rem;
    font-weight     : 700;
    color           : var(--eco-blue);
    font-size       : .9rem;
}

.review-section-body {
    padding         : .5rem 1.25rem;
}

.review-row {
    display         : flex;
    gap             : 1rem;
    padding         : .55rem 0;
    border-bottom   : 1px solid var(--eco-border);
    font-size       : .875rem;
    align-items     : flex-start;
}

.review-row:last-child { border-bottom: none; }

.review-label {
    flex            : 0 0 42%;
    color           : var(--eco-muted);
    font-weight     : 500;
    font-size       : .82rem;
    line-height     : 1.4;
}

.review-value       { color: var(--eco-text); }
.review-value-text  { line-height: 1.5; white-space: pre-wrap; }

/* Scale display in review */
.review-scale { display: inline-flex; gap: 4px; vertical-align: middle; margin-right: .4rem; }
.scale-dot {
    width           : 12px;
    height          : 12px;
    border-radius   : 50%;
    background      : var(--eco-border);
    display         : inline-block;
}
.scale-dot.filled { background: var(--eco-blue); }

/* ---- Declaration options (Q29, Q30) ---- */
.decl-option {
    border          : 2px solid var(--eco-border);
    border-radius   : 10px;
    padding         : .85rem 1.1rem;
    margin-bottom   : .5rem;
    transition      : border-color .2s, background .2s;
    cursor          : pointer;
}

.decl-option.selected,
.decl-option:has(.form-check-input:checked) {
    border-color    : var(--eco-green);
    background      : var(--eco-green-lt);
}

/* ---- Confirmation Page ---- */
.confirm-icon-wrap {
    width           : 96px;
    height          : 96px;
    border-radius   : 50%;
    background      : linear-gradient(135deg, var(--eco-blue-lt), var(--eco-green-lt));
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 3.2rem;
    color           : var(--eco-green);
    box-shadow      : 0 0 0 8px rgba(86,177,70,.12);
}

.confirm-msg-card {
    background      : var(--eco-blue-lt);
    border          : 1px solid rgba(0,108,183,.18);
    border-radius   : 14px;
    padding         : 1.75rem 2rem;
    max-width       : 640px;
    text-align      : left;
    font-size       : .92rem;
    line-height     : 1.7;
}

.confirm-details-row {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 1rem;
    justify-content : center;
}

.confirm-detail-item {
    display         : flex;
    align-items     : flex-start;
    gap             : .6rem;
    background      : #fff;
    border          : 1px solid var(--eco-border);
    border-radius   : 10px;
    padding         : .75rem 1rem;
    min-width       : 180px;
    font-size       : .85rem;
    text-align      : left;
}

.confirm-detail-item i { font-size: 1.4rem; margin-top: .1rem; flex-shrink: 0; }

/* ---- Responsive adjustments for wizard ---- */
@media (max-width: 767.98px) {
    .wizard-step-label   { font-size: .62rem; max-width: 64px; }
    .wizard-step-icon    { width: 30px; height: 30px; font-size: .75rem; }
    .wizard-connector    { margin-top: -14px; }
    .reg-form-card       { padding: 1.25rem; }
    .review-label        { flex: 0 0 40%; }
    .linear-scale-wrap   { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .scale-btn span      { width: 38px; height: 38px; font-size: .85rem; }
    .checkbox-grid       { grid-template-columns: 1fr; gap: .15rem 0; }
    .confirm-msg-card    { padding: 1.25rem; }
}

@media (max-width: 575.98px) {
    .wizard-step-label { display: none; }
    .wizard-counter    { font-size: .75rem; }
}