/* Romanta Onboarding Styles (aligned with _OnboardingLayout variables) */

.section-container {
      width: 100%;
      max-width: 860px;
      margin: 120px auto 80px;
      padding: 24px 20px;
}

.section-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    color: var(--ink-strong);
}

.section-subtitle {
    font-size: 14px;
    color: var(--ink-muted);
    margin-bottom: 16px;
}

/* Card-like step container */
.step form {
      background: linear-gradient(180deg, color-mix(in srgb, var(--surface), var(--accent) 6%), var(--surface));
      border: 1px solid var(--border-soft);
      border-radius: 16px;
      padding: 24px 28px 24px; /* Updated padding */
      box-shadow: 0 18px 40px rgba(0,0,0,0.30);
      color: var(--ink-soft);
}

/* Field styling */
.form-group {
    margin-bottom: 28px;
}
    /* Increased margin */
    .form-group label {
        display: block;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--ink-strong);
    }

.form-control,
.step input[type="text"],
.step input[type="date"],
.step input[type="number"],
.step select,
.step textarea {
      width: 100%;
      padding: 10px 12px;
      font-size: 14px;
      color: var(--ink-strong);
      background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
      border: 1px solid var(--border-soft);
      border-radius: 12px;
      outline: none;
      transition: box-shadow .2s ease, border-color .2s ease;
}

.step input[type="number"] {
    max-width: 180px;
}

.step input:focus, .step select:focus, .step textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 70%);
}

/* Inline options (legacy) */
.step label > input[type="radio"],
.step label > input[type="checkbox"] {
    margin-right: 8px;
}

/* Control bar */
.form-actions {
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 14px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      border: 1px solid var(--border-soft);
}

    .form-actions .back-btn {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 10px 16px;
          font-weight: 600;
          border-radius: 999px;
          background: transparent;
          color: color-mix(in srgb, var(--ink-strong), transparent 20%);
          border: 1px solid var(--border-soft);
          transition: all .2s ease;
    }

        .form-actions .back-btn:hover {
            color: var(--ink-strong);
            border-color: var(--border-strong);
        }

        .form-actions .back-btn:disabled {
            opacity: .5;
            cursor: not-allowed;
        }

    .form-actions .action-btn.primary {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 12px 22px;
          border-radius: 999px;
          font-weight: 700;
          border: none;
          color: #2a120c; /* Dark ink for contrast on warm gradient */
         
        /* Brand warm gradient CTA */
          background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
          box-shadow: 0 14px 30px color-mix(in srgb, var(--accent), transparent 55%);
          transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
    }

        .form-actions .action-btn.primary:hover {
            transform: translateY(-1px);
            filter: brightness(1.05);
            box-shadow: 0 18px 38px color-mix(in srgb, var(--accent), transparent 45%);
        }

/* Progress dots inside control bar */
.progress-dots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .progress-dots .dot {
          --size: 8px;
          width: var(--size);
          height: var(--size);
          border-radius: 999px;
          background: color-mix(in srgb, var(--ink-soft), transparent 80%);
          box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-soft), transparent 65%);
    }

        .progress-dots .dot.active {
            background: var(--accent);
        }

        .progress-dots .dot.completed {
            background: var(--primary);
        }

@media (max-width: 640px) {
      .section-container {
        margin: 100px auto 60px;
        padding: 16px 14px;
    }

      .form-actions {
        gap: 12px;
        padding: 10px 12px;
    }

          .form-actions .action-btn.primary {
            padding: 10px 18px;
            font-size: 15px;
        }
}


/* ==========================================================================
    NEW STYLES MERGED FROM PARTIAL VIEWS
==========================================================================
*/

/* --- Common Form Enhancements --- */
.form-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-light, #fff);
    margin-bottom: 4px;
    display: block;
}

.form-text {
    font-size: 1rem;
    color: var(--ink-muted, #ccc);
    margin-bottom: 24px;
}

.form-grid-2col {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column */
    gap: 0 32px;
}
/* Media query for wider screens */
@@media (min-width: 768px) {
    .form-grid-2col {
        grid-template-columns: 1fr 1fr; /* 2 columns on desktop */
    }
}


/* --- Clickable Tiles (Pill Shape) --- */
.clickable-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.clickable-tile {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 99px; /* Pill shape */
    border: 1px solid var(--border-color, #555);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

    .clickable-tile input[type="checkbox"] {
        display: none;
    }

    .clickable-tile:hover {
        border-color: var(--accent-color, #e86a43);
        background-color: rgba(232, 106, 67, 0.1);
    }

    .clickable-tile:has(input[type="checkbox"]:checked) {
        background-color: var(--accent-color, #e86a43);
        border-color: var(--accent-color, #e86a43);
        color: #fff;
        box-shadow: 0 4px 10px rgba(232, 106, 67, 0.3);
    }

/* --- Clickable Tiles (Card Shape) --- */
.value-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.value-card {
    display: block;
    border: 1px solid var(--border-color, #555);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--bg-secondary, #333);
}

    .value-card:hover {
        border-color: var(--accent-color, #e86a43);
        transform: translateY(-2px);
    }

    .value-card input[type="checkbox"] {
        display: none;
    }

.value-card-content {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 4px;
}

    .value-card-content .bi {
        font-size: 1.5rem;
        color: var(--accent-color-light, #e86a43);
        margin-bottom: 8px;
    }

    .value-card-content strong {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--ink-light, #fff);
    }

    .value-card-content small {
        font-size: 0.9rem;
        color: var(--ink-muted, #ccc);
    }

.value-card:has(input[type="checkbox"]:checked) {
    border-color: var(--accent-color, #e86a43);
    background-color: rgba(232, 106, 67, 0.1);
    box-shadow: 0 0 15px rgba(232, 106, 67, 0.2);
}

    .value-card:has(input[type="checkbox"]:checked) .value-card-content strong {
        color: var(--accent-color-light, #e86a43);
    }


/* --- Toggle Buttons (Radio/Checkbox Replacements) --- */
.toggle-button-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

    .toggle-button-group.wide {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

.toggle-button {
    flex: 1; /* For legacy flex layouts */
}

    .toggle-button input[type="radio"],
    .toggle-button input[type="checkbox"] {
        display: none;
    }

    .toggle-button span {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 20px;
        border: 1px solid var(--border-color, #555);
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
        background-color: var(--bg-secondary, #333);
    }

        .toggle-button span .bi {
            font-size: 1.1rem;
            color: var(--accent-color-light, #e86a43);
            transition: all 0.2s ease;
        }
/* Special for Step 1 */
#relationshipIntentForm .toggle-button span {
    flex-direction: column;
    gap: 10px;
    padding: 24px 20px;
    font-weight: 600;
    border-radius: 12px;
}

    #relationshipIntentForm .toggle-button span .bi {
        font-size: 1.75rem;
    }

#relationshipIntentForm .toggle-button input[type="radio"]:checked + span {
    background-color: rgba(232, 106, 67, 0.1);
    border-color: var(--accent-color, #e86a43);
    color: var(--accent-color, #e86a43);
    box-shadow: 0 4px 15px rgba(232, 106, 67, 0.2);
}

    #relationshipIntentForm .toggle-button input[type="radio"]:checked + span .bi {
        color: var(--accent-color, #e86a43);
        transform: scale(1.1);
    }

#relationshipIntentForm .toggle-button:hover span {
    border-color: var(--accent-color, #e86a43);
    transform: translateY(-2px);
}
/* Standard checked state for other steps */
.toggle-button input[type="radio"]:checked + span,
.toggle-button input[type="checkbox"]:checked + span {
    background-color: var(--accent-color, #e86a43);
    border-color: var(--accent-color, #e86a43);
    color: #fff;
    box-shadow: 0 4px 10px rgba(232, 106, 67, 0.3);
}

    .toggle-button input[type="radio"]:checked + span .bi,
    .toggle-button input[type="checkbox"]:checked + span .bi {
        color: #fff;
    }

.toggle-button:hover span {
    border-color: var(--accent-color, #e86a43);
}
/* For Basic Info (Step 2) */
#basicInfoForm .toggle-button span {
    padding: 12px 10px;
    font-size: 0.9rem;
}


/* --- Sliders (Step 5) --- */
.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--ink-light, #fff);
}

.range-slider, .range-slider-single {
    position: relative;
    width: 100%;
    height: 30px; /* Taller for easier grabbing */
    display: flex;
    align-items: center;
}

.slider-track {
    position: absolute;
    width: 100%;
    height: 6px;
    background-color: var(--border-color, #555);
    border-radius: 3px;
}

.slider-range, .slider-range-single {
    position: absolute;
    height: 6px;
    background-color: var(--accent-color, #e86a43);
    border-radius: 3px;
    z-index: 1;
}

.slider-thumb {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border: 2px solid var(--accent-color, #e86a43);
    border-radius: 50%;
    cursor: grab;
    z-index: 2;
    transform: translateX(-12px); /* Center the thumb */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

    .slider-thumb:active {
        cursor: grabbing;
        transform: translateX(-12px) scale(1.1);
    }

    .slider-thumb:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(232, 106, 67, 0.5);
    }


/* --- Photo Upload (Step 3) --- */
.photo-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border: 2px dashed var(--border-color, #555);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--bg-secondary, #333);
}

    .photo-drop-zone:hover,
    .photo-drop-zone.drag-over {
        border-color: var(--accent-color, #e86a43);
        background-color: rgba(232, 106, 67, 0.05);
    }

    .photo-drop-zone .bi {
        font-size: 3rem;
        color: var(--accent-color, #e86a43);
        margin-bottom: 16px;
    }

    .photo-drop-zone div {
        font-size: 1.1rem;
        font-weight: 500;
        color: var(--ink-light, #fff);
    }

    .photo-drop-zone small {
        font-size: 0.9rem;
        color: var(--ink-muted, #ccc);
        margin-top: 8px;
    }

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.photo-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--bg-secondary, #333);
    border: 1px solid var(--border-color, #444);
}

    .photo-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .photo-thumb .primary-badge {
        display: none; /* Hidden by default, shown by JS */
        position: absolute;
        top: 8px;
        left: 8px;
        font-size: 1.2rem;
        color: var(--accent-color, #e86a43);
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    }

.photo-thumb-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.photo-thumb:hover .photo-thumb-overlay {
    opacity: 1;
}

.icon-btn {
    background-color: rgba(255, 255, 255, 0.9);
    color: #1a0f0c;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

    .icon-btn:hover {
        background-color: #fff;
        transform: scale(1.1);
    }

    .icon-btn.remove-btn:hover {
        background-color: #dc3545; /* Red for delete */
        color: #fff;
    }

    .icon-btn.make-primary-btn:hover {
        background-color: var(--accent-color, #e86a43);
        color: #fff;
    }


/* --- Bio & Interests (Step 4) --- */
.interest-category {
    margin-top: 24px;
}

    .interest-category h4 {
        margin-bottom: 12px;
        font-weight: 600;
        color: var(--ink-light, #eee);
    }

        .interest-category h4 .bi {
            margin-right: 8px;
            color: var(--accent-color-light, #e86a43);
        }
/* ==========================================================================
    NEW ONBOARDING LAYOUT (SIDEBAR) STYLES
==========================================================================
*/

.onboarding-layout-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 24px;
}

.onboarding-sidebar {
    /* On mobile, sidebar is just a card at the top */
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
}

.onboarding-content {
    /* Main content area */
}

/* Styles for the new vertical step list */
.sidebar-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink-strong);
}
.sidebar-subtitle {
    font-size: 0.9rem;
    color: var(--ink-muted);
    margin-bottom: 16px;
}

.onboarding-step-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.onboarding-step-list .progress-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-muted); /* Not-yet-visited steps are muted */
    cursor: pointer;
    user-select: none;
    transition: all 160ms ease;
    font-weight: 500;
}

.onboarding-step-list .progress-step .bi {
    font-size: 1.1rem;
    color: var(--ink-muted);
    transition: all 160ms ease;
}

.onboarding-step-list .progress-step:hover {
    background: var(--surface-strong);
    color: var(--ink-soft);
}
.onboarding-step-list .progress-step:hover .bi {
    color: var(--ink-soft);
}

.onboarding-step-list .progress-step.completed {
    color: var(--ink-soft); /* Completed steps are active */
}
.onboarding-step-list .progress-step.completed .bi {
    color: var(--primary); /* Icon is colored */
}

.onboarding-step-list .progress-step.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent), transparent 85%);
    color: var(--ink-strong);
    font-weight: 600;
}
.onboarding-step-list .progress-step.active .bi {
    color: var(--accent);
}

/* --- Desktop Layout (Sidebar) --- */
@@media (min-width: 992px) {
    .onboarding-layout-grid {
        grid-template-columns: 280px minmax(0, 1fr); /* 280px sidebar, 1fr content */
        gap: 24px;
    }

    .onboarding-sidebar {
        /* Make sidebar sticky */
        position: sticky;
        top: 80px; /* Adjust based on your header height */
        align-self: start;
        height: calc(100vh - 100px); /* Full height minus padding */
        overflow-y: auto;
    }

    /* Remove the old horizontal step list on desktop */
    .onboarding-content #progressSteps {
        display: none;
    }
}

/* ---
    Fix for Button Spacing
    We just need to hide the dots that are INSIDE the form-actions.
    The new sidebar replaces them.
--- */
.step form .form-actions .progress-dots {
    display: none;
}

/* Add a little margin between the back/continue buttons */
.form-actions .back-btn {
    margin-right: 16px;
}
/* ==========================================================================
    NEW STYLES FOR BASIC INFO (STEP 2) GRID
==========================================================================
*/

/* On mobile, stack everything */
.basic-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 24px; /* Only horizontal gap */
}

/* On desktop (and tablets), create the custom grid */
@@media (min-width: 768px) {
    .basic-info-grid {
        grid-template-columns: 1fr 1fr 1fr; /* 3-column base */
        grid-template-areas:
            "firstname   lastname    lastname"
            "gender      gender      gender"
            "dob         occupation  occupation"
            "country     city        zipcode"
            "education   education   education";
    }
    /* Assign elements to their named areas */
    .group-firstname {
        grid-area: firstname;
    }

    .group-lastname {
        grid-area: lastname;
    }

    .group-gender {
        grid-area: gender;
    }

    .group-dob {
        grid-area: dob;
    }

    .group-occupation {
        grid-area: occupation;
    }

    .group-country {
        grid-area: country;
    }

    .group-city {
        grid-area: city;
    }

    .group-zipcode {
        grid-area: zipcode;
    }

    .group-education {
        grid-area: education;
    }
    /* Make the 2-column rows use a 2-column grid */
    .basic-info-grid .group-dob,
    .basic-info-grid .group-occupation {
        grid-column: span 1 / span 1; /* Reset to 1 column span */
    }

    .basic-info-grid .group-firstname,
    .basic-info-grid .group-lastname {
        grid-column: span 1 / span 1; /* Reset */
    }

    .basic-info-grid {
        grid-template-columns: 1fr 1fr; /* Override to 2-column base */
        grid-template-areas:
            "firstname   lastname"
            "gender      gender"
            "dob         occupation"
            "country     city"
            "zipcode     zipcode" /* Zipcode was missing a good spot, let's put it with education */
            "education   education";
    }
    /* Re-map to the 2-column layout */
    .group-firstname {
        grid-area: firstname;
    }

    .group-lastname {
        grid-area: lastname;
    }

    .group-gender {
        grid-area: gender;
    }

    .group-dob {
        grid-area: dob;
    }

    .group-occupation {
        grid-area: occupation;
    }

    .group-country {
        grid-area: country;
    }

    .group-city {
        grid-area: city;
    }

    .group-zipcode {
        grid-area: zipcode;
    }

    .group-education {
        grid-area: education;
    }
    /* And for your 3-column row: */
    @@media (min-width: 992px) {
        .basic-info-grid {
            grid-template-columns: 1fr 1fr 1fr; /* 3-column base */
            grid-template-areas:
                "firstname   lastname    lastname"
                "gender      gender      gender"
                "dob         occupation  occupation"
                "country     city        zipcode"
                "education   education   education";
        }
        /* Re-map to the 3-column layout */
        .group-firstname {
            grid-area: firstname;
        }

        .group-lastname {
            grid-area: lastname;
        }

        .group-gender {
            grid-area: gender;
        }

        .group-dob {
            grid-area: dob;
        }

        .group-occupation {
            grid-area: occupation;
        }

        .group-country {
            grid-area: country;
        }

        .group-city {
            grid-area: city;
        }

        .group-zipcode {
            grid-area: zipcode;
        }

        .group-education {
            grid-area: education;
        }
    }
}
/*
==================================================================
  ONBOARDING WELCOME PAGE POLISH (Fixes)
==================================================================
*/

/* 1. Fix: Make feature list icons visible */
.feature-list.basic li i,
.feature-list.premium li i,
.path-card .feature-list li i {
    color: var(--ink-strong); /* Use a light color */
    opacity: 0.85;
}

/* 2. Fix: Make cards wider */
.path-grid {
    /* Increased the minimum width from 320px to 400px */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* 3. Fix: Style 'Basic includes' & 'Premium adds' like buttons */
.tier-label {
    font-size: 0.92rem;
    font-weight: 700;
    color: #2a120c; /* Dark text */
    background: rgba(255, 255, 255, 0.75); /* Light background */
    padding: 6px 10px;
    border-radius: 999px;
    display: inline-flex; /* Make it a button */
    align-items: center;
    gap: 8px;
    margin: 1rem 0 0.75rem; /* Added more space */
}

/* 4. Fix: Add spacing between 'Basic' and 'Premium' badges */
.tier-legend {
    gap: 1rem; /* Was 0.5rem */
}

/* 5. Fix: Remove green shadow from 'Start Dating Path' button */
.path-card .action-btn.primary {
    box-shadow: none; /* Remove the shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

    /* 6. (Bonus) Add a nice hover shadow to the same button */
    .path-card .action-btn.primary:hover {
        transform: translateY(-2px);
        filter: brightness(1.05);
        /* This adds back a shadow, but using your correct brand colors */
        box-shadow: 0 14px 30px color-mix(in srgb, var(--accent), transparent 55%);
    }
/*
==================================================================
  FIX: VISIBILITY FOR FEATURE LIST ICONS
==================================================================
*/

/* Forces the icons in the 'Basic' and 'Premium' lists to be white */
.path-card .feature-list.basic li i,
.path-card .feature-list.premium li i {
    color: #ffffff !important;
}

/* Optional: Make the text slightly brighter too if it's hard to read */
.path-card .feature-list li {
    color: var(--ink-strong);
    border-color: rgba(255, 255, 255, 0.15); /* Make the item border slightly more visible */
}
/*
==================================================================
  ONBOARDING WELCOME PAGE - WIDEN CARDS
==================================================================
*/

/*
  1. Target the section-container ONLY on the welcome page
  (the one containing the path-grid) and make it wider.
*/
.section-container:has(.path-grid) {
    max-width: 1100px; /* Increase from 860px to match the layout's max-width */
}

/*
  2. Update the grid to use the new space.
  This will result in two wider cards.
*/
.path-grid {
    /* We increase the minimum width to ensure they stay wide */
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}
/*
==================================================================
  ONBOARDING WELCOME PAGE - INCREASED BUTTON SPACING
==================================================================
*/

/* Increases the gap between the "Basic" and "Premium" tier badges */
.tier-legend {
    gap: 1.5rem; /* We'll try a larger gap (was 1rem) */
}
/*
==================================================================
  CENTER TIER BUTTONS
==================================================================
*/

/* Centers the tier badges (Basic, Premium, Concierge) inside their container */
.tier-legend {
    justify-content: center;
    width: 100%; /* Ensures the container takes full width to allow centering */
}
/*
==================================================================
  STEP 1 & BUTTON POLISH
==================================================================
*/

/* 1. Layout: push buttons to edges, dots to center */
.form-actions {
    justify-content: space-between !important; /* Ensures Left - Center - Right alignment */
    padding: 16px 20px; /* A bit more breathing room */
}

/* 2. Restore & Style Progress Dots */
.step form .form-actions .progress-dots {
    display: flex !important; /* Force them to show */
    gap: 6px;
}

.progress-dots .dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.2); /* Inactive dot color */
    border-radius: 50%;
    transition: all 0.3s ease;
}

    .progress-dots .dot.active {
        background-color: var(--accent); /* Active dot color (Orange) */
        transform: scale(1.2);
    }

/* 3. Fix: REMOVE GREEN SHADOW & Background from Primary Button */
.action-btn.primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important;
    color: #2a120c !important;
    border: none !important;
    /* Replace the green shadow with a brand-colored shadow */
    box-shadow: 0 10px 20px color-mix(in srgb, var(--accent), transparent 60%) !important;
}

    .action-btn.primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px color-mix(in srgb, var(--accent), transparent 50%) !important;
    }
/*
==================================================================
  FIX: CONTROL BAR ALIGNMENT & SPACING
==================================================================
*/

/* 1. Force the container to be a single row with items spread apart */
.form-actions {
    display: flex !important;
    flex-direction: row !important; /* Forces side-by-side */
    align-items: center !important; /* Centers vertically */
    justify-content: space-between !important; /* Pushes Back to left, Continue to right */
    flex-wrap: nowrap !important; /* PREVENTS the button from dropping down */
    width: 100%;
    padding: 16px 24px; /* Comfortable padding */
}

    /* 2. Ensure buttons don't try to take up 100% width */
    .form-actions button {
        width: auto !important;
        flex-shrink: 0; /* Prevents buttons from getting squished */
    }

/* 3. Fix the Dots: Increase spacing and center them */
.step form .form-actions .progress-dots {
    display: flex !important;
    gap: 12px !important; /* Spacing between individual dots */
    margin: 0 auto !important; /* Centers the dot group in the available space */
}
/* Wrapper for every step content */
.onboarding-card {
    background: rgba(32, 19, 15, 0.85); /* Semi-transparent dark background */
    backdrop-filter: blur(12px); /* Glass effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    max-width: 1000px; /* Prevents it from stretching too wide */
    margin: 30px auto; /* Centers it horizontally */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .onboarding-card {
        padding: 24px;
        margin: 10px auto;
        border-radius: 16px;
    }
}
/* --- FORCE CARD STYLING --- */
.onboarding-card {
    background: rgba(30, 15, 10, 0.85) !important; /* Dark brown glass */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
}

    /* Ensure text inside is readable */
    .onboarding-card .form-title {
        color: #fff !important;
        text-align: center;
    }

    .onboarding-card .form-text {
        color: #ddd !important;
        text-align: center;
        margin-bottom: 30px;
    }

/* Mobile Fix */
@media (max-width: 768px) {
    .onboarding-card {
        padding: 20px !important;
        width: 95% !important;
    }
}