/**
 * Samir Technologies — Step 4: Cinematic 3D Welcome Gate & Project Builder CSS
 * Lightweight CSS 3D Transforms & Responsive Design System Integration
 */

/* ============================================================================
   1. 3D CINEMATIC WELCOME GATE
   ============================================================================ */

.welcome-gate-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #050508;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 40;
    transition: opacity 800ms ease, max-height 1000ms ease;
}

/* Background Atmosphere */
.gate-ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    max-width: 95vw;
    max-height: 95vw;
    background: radial-gradient(circle, rgba(197, 155, 39, 0.18) 0%, rgba(197, 155, 39, 0.05) 45%, rgba(5, 5, 8, 0) 70%);
    pointer-events: none;
    z-index: 1;
    animation: gateGlowPulse 6s ease-in-out infinite alternate;
}

@keyframes gateGlowPulse {
    0% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* 3D Perspective Stage */
.gate-stage-3d {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 720px;
    max-height: 85vh;
    margin: 0 auto;
    perspective: 1400px;
    perspective-origin: 50% 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Left & Right Gate Panels */
.gate-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(145deg, #161722 0%, #0d0e15 40%, #07070a 100%);
    border: 2px solid rgba(197, 155, 39, 0.4);
    box-shadow: 
        inset 0 0 50px rgba(197, 155, 39, 0.08),
        inset 0 0 100px rgba(0, 0, 0, 0.8),
        0 20px 50px rgba(0, 0, 0, 0.9);
    transform-style: preserve-3d;
    transition: transform var(--gate-duration, 1200ms) cubic-bezier(0.2, 0.8, 0.2, 1), 
                box-shadow var(--gate-duration, 1200ms) ease,
                opacity var(--gate-duration, 1200ms) ease;
    will-change: transform, opacity;
    overflow: hidden;
}

/* Left Gate Panel */
.gate-panel-left {
    left: 0;
    transform-origin: left center;
    border-right: 2px solid rgba(255, 217, 118, 0.75);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

/* Right Gate Panel */
.gate-panel-right {
    right: 0;
    transform-origin: right center;
    border-left: 2px solid rgba(255, 217, 118, 0.75);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Panel Filigree / Decorative Patterns */
.gate-panel-pattern {
    position: absolute;
    inset: 15px;
    border: 1px solid rgba(197, 155, 39, 0.22);
    border-radius: 12px;
    pointer-events: none;
    background: 
        radial-gradient(circle at 50% 30%, rgba(197, 155, 39, 0.04) 0%, transparent 60%),
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(197, 155, 39, 0.015) 35px, rgba(197, 155, 39, 0.015) 70px);
}

.gate-panel-pattern::after {
    content: '';
    position: absolute;
    inset: 15px;
    border: 1px dashed rgba(197, 155, 39, 0.15);
    border-radius: 8px;
}

/* Metallic Edge Hinges */
.gate-hinge {
    position: absolute;
    width: 14px;
    height: 60px;
    background: linear-gradient(180deg, #ffd976 0%, #c59b27 50%, #8a6710 100%);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(197, 155, 39, 0.5);
    z-index: 5;
}

.gate-panel-left .gate-hinge-top { top: 60px; left: -7px; }
.gate-panel-left .gate-hinge-bottom { bottom: 60px; left: -7px; }
.gate-panel-right .gate-hinge-top { top: 60px; right: -7px; }
.gate-panel-right .gate-hinge-bottom { bottom: 60px; right: -7px; }

/* Metallic Corner Accents */
.gate-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: #ffd976;
    border-style: solid;
    pointer-events: none;
}
.gate-corner-tl { top: 25px; left: 25px; border-width: 2px 0 0 2px; }
.gate-corner-tr { top: 25px; right: 25px; border-width: 2px 2px 0 0; }
.gate-corner-bl { bottom: 25px; left: 25px; border-width: 0 0 2px 2px; }
.gate-corner-br { bottom: 25px; right: 25px; border-width: 0 2px 2px 0; }

/* Central Gate Portal & Content (Floating between panels) */
.gate-portal-content {
    position: relative;
    z-index: 10;
    max-width: 680px;
    padding: 3rem 2.5rem;
    text-align: center;
    background: radial-gradient(circle at center, rgba(16, 17, 24, 0.94) 0%, rgba(9, 10, 15, 0.97) 100%);
    border: 2px solid rgba(197, 155, 39, 0.5);
    border-radius: 24px;
    box-shadow: 
        0 0 60px rgba(197, 155, 39, 0.25),
        0 30px 80px rgba(0, 0, 0, 0.9),
        inset 0 0 40px rgba(197, 155, 39, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: opacity var(--gate-duration, 1200ms) cubic-bezier(0.2, 0.8, 0.2, 1),
                transform var(--gate-duration, 1200ms) cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Brand Crest inside Gate */
.gate-brand-crest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 155, 39, 0.25) 0%, rgba(20, 21, 30, 0.8) 70%);
    border: 2px solid var(--color-gold-400);
    box-shadow: 0 0 30px rgba(197, 155, 39, 0.4);
    margin-bottom: 1.5rem;
}

.gate-brand-crest img {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 0 10px rgba(255, 217, 118, 0.6));
}

.gate-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.gate-subtitle {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--color-gold-400);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

/* Primary ENTER PROJECT BUILDER Trigger Button */
.btn-gate-enter {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    background: linear-gradient(135deg, #ffd976 0%, #c59b27 50%, #8a6710 100%);
    color: #070709;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1.15rem 2.75rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    box-shadow: 
        0 0 30px rgba(197, 155, 39, 0.5),
        0 10px 25px rgba(0, 0, 0, 0.6);
    transition: all 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}

.btn-gate-enter::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    transition: left 750ms ease;
}

.btn-gate-enter:hover::before {
    left: 150%;
}

.btn-gate-enter:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 0 45px rgba(197, 155, 39, 0.8),
        0 15px 35px rgba(0, 0, 0, 0.7);
    color: #000000;
}

.btn-gate-enter:focus-visible {
    outline: 3px solid #ffd976;
    outline-offset: 4px;
}

.gate-secondary-text {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Gate Open Animation State */
.welcome-gate-section.gate-opened .gate-panel-left {
    transform: rotateY(-112deg);
    box-shadow: none;
    opacity: 0.15;
}

.welcome-gate-section.gate-opened .gate-panel-right {
    transform: rotateY(112deg);
    box-shadow: none;
    opacity: 0.15;
}

.welcome-gate-section.gate-opened .gate-portal-content {
    opacity: 0;
    transform: scale(0.9) translateZ(-100px);
    pointer-events: none;
}

.welcome-gate-section.gate-collapsed {
    max-height: 0;
    min-height: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
    visibility: hidden;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
    .gate-ambient-glow {
        animation: none;
    }
    .welcome-gate-section.gate-opened .gate-panel-left,
    .welcome-gate-section.gate-opened .gate-panel-right {
        transform: none;
        opacity: 0;
        transition: opacity 400ms ease;
    }
    .welcome-gate-section.gate-opened .gate-portal-content {
        transform: none;
        opacity: 0;
        transition: opacity 300ms ease;
    }
}

/* Progressive Enhancement Fallback when JS is disabled */
noscript .welcome-gate-section {
    min-height: auto;
    padding: 4rem 1rem;
}
noscript .gate-stage-3d {
    height: auto;
    max-height: none;
}
noscript .gate-panel {
    display: none;
}


/* ============================================================================
   2. COMPACT 8-STAGE PROGRESS INDICATOR
   ============================================================================ */

.builder-progress-sticky {
    position: sticky;
    top: 72px; /* right below site-header */
    z-index: 30;
    background: rgba(10, 11, 16, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(197, 155, 39, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    padding: 0.75rem 0;
    transition: all 300ms ease;
}

.progress-stepper-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Track Line Connecting Nodes */
.progress-stepper-track {
    position: absolute;
    top: 50%;
    left: 40px;
    right: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
    z-index: 1;
}

.progress-stepper-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #ffd976 0%, #c59b27 100%);
    box-shadow: 0 0 10px rgba(197, 155, 39, 0.6);
    transition: width 400ms ease;
}

/* Individual Stage Node */
.progress-step-node {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: none;
    padding: 0;
    cursor: default;
    color: var(--color-text-muted);
    text-decoration: none;
}

.progress-step-bubble {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    background: #12131d;
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-muted);
    transition: all 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.progress-step-label {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    transition: color 300ms ease;
}

/* Active Step */
.progress-step-node.is-active .progress-step-bubble {
    background: #000000;
    border-color: var(--color-gold-400);
    color: var(--color-gold-400);
    box-shadow: 0 0 16px rgba(197, 155, 39, 0.6), inset 0 0 8px rgba(197, 155, 39, 0.4);
    transform: scale(1.15);
}

.progress-step-node.is-active .progress-step-label {
    color: #ffffff;
    font-weight: 700;
}

/* Completed Step */
.progress-step-node.is-completed {
    cursor: pointer;
}

.progress-step-node.is-completed .progress-step-bubble {
    background: linear-gradient(135deg, #ffd976 0%, #c59b27 100%);
    border-color: #ffd976;
    color: #070709;
    box-shadow: 0 0 10px rgba(197, 155, 39, 0.4);
}

.progress-step-node.is-completed .progress-step-label {
    color: var(--color-gold-400);
}

/* Compact Mobile Stepper View */
.progress-mobile-summary {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0.5rem;
}

.progress-mobile-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-gold-400);
}

.progress-mobile-track {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin: 0 1rem;
    overflow: hidden;
}

.progress-mobile-bar {
    height: 100%;
    background: linear-gradient(90deg, #ffd976, #c59b27);
    border-radius: 2px;
    transition: width 300ms ease;
}


/* ============================================================================
   3. PROJECT TYPE SELECTION SECTION
   ============================================================================ */

.project-selection-section {
    position: relative;
    padding: 4.5rem 0 6rem 0;
    background: #08090d;
    min-height: 80vh;
}

.builder-header-block {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3.5rem auto;
}

.builder-title {
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.builder-subtitle {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* 3 Large Interactive Cards Grid */
.project-type-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3.5rem;
}

.project-type-card {
    position: relative;
    background: linear-gradient(165deg, #13141f 0%, #0d0e15 60%, #08080c 100%);
    border: 2px solid rgba(197, 155, 39, 0.22);
    border-radius: 20px;
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    outline: none;
}

.project-type-card:hover {
    transform: translateY(-6px);
    border-color: rgba(197, 155, 39, 0.55);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(197, 155, 39, 0.15);
}

.project-type-card:focus-visible {
    outline: 3px solid var(--color-gold-400);
    outline-offset: 4px;
}

/* Selected Card Highlight */
.project-type-card.is-selected {
    border-color: var(--color-gold-500);
    background: linear-gradient(165deg, #181a26 0%, #10121a 60%, #0a0b10 100%);
    box-shadow: 
        0 0 40px rgba(197, 155, 39, 0.3),
        0 20px 50px rgba(0, 0, 0, 0.8),
        inset 0 0 25px rgba(197, 155, 39, 0.12);
    transform: translateY(-4px);
}

/* Checkmark indicator badge */
.card-select-badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 300ms ease;
    font-size: 0.85rem;
}

.project-type-card.is-selected .card-select-badge {
    background: linear-gradient(135deg, #ffd976 0%, #c59b27 100%);
    border-color: #ffd976;
    color: #070709;
    box-shadow: 0 0 15px rgba(197, 155, 39, 0.6);
}

/* Card Mockup Graphic */
.card-visual-wrapper {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    position: relative;
}

.card-visual-wrapper img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 350ms ease;
}

.project-type-card:hover .card-visual-wrapper img {
    transform: scale(1.04);
}

/* Card Badge */
.card-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gold-400);
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.3);
    padding: 0.3rem 0.85rem;
    border-radius: 9999px;
    margin-bottom: 0.85rem;
}

.card-main-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.65rem;
}

.card-main-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-bottom: 1.5rem;
    min-height: 3rem;
}

/* Features List */
.card-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.card-features-list li {
    font-size: 0.9rem;
    color: #d1d5db;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.card-features-list li i {
    color: var(--color-gold-400);
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Pricing and Delivery Estimate */
.card-price-box {
    background: rgba(7, 8, 12, 0.6);
    border: 1px solid rgba(197, 155, 39, 0.15);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-price-amount {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-gold-400);
}

.card-delivery-time {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Card CTA Select Button */
.btn-card-choose {
    width: 100%;
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 10px;
    border: 1px solid rgba(197, 155, 39, 0.4);
    background: transparent;
    color: var(--color-gold-400);
    cursor: pointer;
    transition: all 250ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.project-type-card.is-selected .btn-card-choose {
    background: linear-gradient(135deg, #ffd976 0%, #c59b27 100%);
    border-color: #ffd976;
    color: #070709;
    box-shadow: 0 0 20px rgba(197, 155, 39, 0.5);
}

.project-type-card:hover .btn-card-choose {
    border-color: var(--color-gold-400);
    color: #ffffff;
}

.project-type-card.is-selected:hover .btn-card-choose {
    color: #000000;
}

/* Floating Action / Continue Bar */
.builder-action-bar {
    position: sticky;
    bottom: 1.5rem;
    z-index: 25;
    max-width: 900px;
    margin: 0 auto;
    background: rgba(14, 15, 22, 0.95);
    border: 2px solid rgba(197, 155, 39, 0.45);
    border-radius: 20px;
    padding: 1.1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-shadow: 
        0 20px 45px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(197, 155, 39, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.builder-action-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.builder-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(197, 155, 39, 0.15);
    border: 1px solid rgba(197, 155, 39, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-400);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.builder-action-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.builder-action-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
}

.btn-builder-continue {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #ffd976 0%, #c59b27 50%, #8a6710 100%);
    color: #070709;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.95rem 2.25rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 25px rgba(197, 155, 39, 0.5);
    transition: all 300ms ease;
    flex-shrink: 0;
}

.btn-builder-continue:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(197, 155, 39, 0.8);
    color: #000000;
}

.btn-builder-continue:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}


/* ============================================================================
   4. STEP 5 PLACEHOLDER SECTION (Revealed on Continue)
   ============================================================================ */

.step5-placeholder-section {
    display: none;
    margin-top: 4rem;
    padding: 3.5rem 2.5rem;
    background: linear-gradient(165deg, #12131d 0%, #0a0b10 100%);
    border: 2px dashed rgba(197, 155, 39, 0.35);
    border-radius: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: fadeInSlideUp 600ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.step5-placeholder-section.is-active {
    display: block;
}


/* ============================================================================
   5. RESPONSIVE BREAKPOINTS
   ============================================================================ */

@media (max-width: 1024px) {
    .project-type-cards-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .gate-title {
        font-size: 2rem;
    }
    
    .gate-portal-content {
        padding: 2.25rem 1.75rem;
        margin: 0 1rem;
    }
    
    .btn-gate-enter {
        font-size: 1rem;
        padding: 1rem 2rem;
    }
}

@media (max-width: 768px) {
    .progress-stepper-track,
    .progress-step-label {
        display: none;
    }
    
    .progress-stepper-container {
        display: none;
    }
    
    .progress-mobile-summary {
        display: flex;
    }
    
    .gate-stage-3d {
        height: 600px;
    }
    
    .gate-title {
        font-size: 1.65rem;
    }
    
    .gate-subtitle {
        font-size: 0.95rem;
    }
    
    .builder-title {
        font-size: 1.85rem;
    }
    
    .builder-action-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 1.25rem;
        bottom: 1rem;
    }
    
    .builder-action-summary {
        justify-content: center;
    }
    
    .btn-builder-continue {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   6. STEP 5 — PROJECT REQUIREMENTS WIZARD STYLES
   ============================================================================ */

.requirements-wizard-section {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
    padding: 3rem 0 7rem 0;
    position: relative;
    background: radial-gradient(circle at 50% 0%, rgba(197, 155, 39, 0.05) 0%, transparent 60%);
}

.requirements-wizard-section.is-revealed {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.req-header-block {
    text-align: center;
    margin-bottom: 3.5rem;
}

/* Scope Banner */
.req-scope-banner {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2rem;
    background: rgba(18, 19, 28, 0.85);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: 9999px;
    padding: 0.65rem 1.5rem 0.65rem 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

.req-scope-banner:hover {
    border-color: rgba(197, 155, 39, 0.6);
    box-shadow: 0 10px 30px rgba(197, 155, 39, 0.15);
}

.req-scope-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(197, 155, 39, 0.25) 0%, rgba(197, 155, 39, 0.05) 100%);
    border: 1px solid rgba(197, 155, 39, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-400);
    font-size: 1.15rem;
}

.req-scope-meta {
    text-align: left;
}

.req-scope-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.req-scope-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}

.req-scope-price {
    font-weight: 700;
    color: var(--color-gold-400);
    font-size: 1rem;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-scope-change {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    transition: color var(--transition-fast) ease, background var(--transition-fast) ease;
}

.btn-scope-change:hover {
    color: var(--color-gold-400);
    background: rgba(197, 155, 39, 0.1);
}

/* Validation Alert Banner */
.req-alert-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    color: #fca5a5;
    animation: pulseAlert 2s ease infinite alternate;
}

@keyframes pulseAlert {
    0% { border-color: rgba(239, 68, 68, 0.3); }
    100% { border-color: rgba(239, 68, 68, 0.7); }
}

.req-alert-text {
    font-size: 0.95rem;
    font-weight: 500;
}

/* Question Section Container */
.req-card-section {
    background: rgba(15, 16, 24, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 2.25rem 2.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transition: border-color var(--transition-normal) ease, box-shadow var(--transition-normal) ease;
}

.req-card-section:focus-within,
.req-card-section:hover {
    border-color: rgba(197, 155, 39, 0.3);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 20px rgba(197, 155, 39, 0.05);
}

.req-card-section.is-invalid {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.15);
}

.req-question-header {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.req-question-number {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-gold-400);
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.3);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.req-question-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.35rem 0;
    line-height: 1.3;
}

.req-question-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Category Search Bar */
.req-search-wrapper {
    position: relative;
    max-width: 600px;
    margin-bottom: 2rem;
}

.req-search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 1rem;
    pointer-events: none;
}

.req-search-input {
    width: 100%;
    background: rgba(10, 11, 16, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 0.85rem 2.85rem 0.85rem 3rem;
    color: #ffffff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all var(--transition-fast) ease;
}

.req-search-input:focus {
    outline: none;
    border-color: var(--color-gold-400);
    box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.15);
    background: rgba(14, 15, 22, 0.95);
}

.req-search-clear {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.req-search-clear:hover {
    color: #ffffff;
}

/* Categories Grid */
.req-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.req-category-card {
    position: relative;
    background: rgba(12, 13, 19, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    user-select: none;
    display: flex;
    flex-direction: column;
}

.req-category-card:hover {
    border-color: rgba(197, 155, 39, 0.4);
    background: rgba(18, 20, 30, 0.85);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.req-category-card:focus-visible {
    outline: 2px solid var(--color-gold-400);
    outline-offset: 2px;
}

.req-category-card.is-selected {
    border-color: var(--color-gold-400);
    background: linear-gradient(145deg, rgba(22, 24, 35, 0.95) 0%, rgba(18, 19, 28, 0.95) 100%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(197, 155, 39, 0.15);
}

.req-card-check {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 0.75rem;
    transition: all var(--transition-fast) ease;
}

.req-category-card.is-selected .req-card-check,
.req-option-card.is-selected .req-card-check {
    background: var(--color-gold-400);
    border-color: var(--color-gold-400);
    color: #000000;
    box-shadow: 0 0 10px rgba(197, 155, 39, 0.5);
}

.req-cat-icon {
    font-size: 1.75rem;
    color: var(--color-gold-400);
    margin-bottom: 1rem;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(197, 155, 39, 0.08);
    border: 1px solid rgba(197, 155, 39, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast) ease;
}

.req-category-card.is-selected .req-cat-icon {
    background: rgba(197, 155, 39, 0.18);
    border-color: rgba(197, 155, 39, 0.6);
    box-shadow: 0 0 15px rgba(197, 155, 39, 0.25);
}

.req-cat-badge {
    position: absolute;
    top: 1rem;
    right: 3.25rem;
    background: rgba(197, 155, 39, 0.15);
    color: var(--color-gold-400);
    border: 1px solid rgba(197, 155, 39, 0.35);
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.req-cat-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    line-height: 1.35;
}

.req-cat-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Conditional Field Box */
.req-conditional-box {
    background: rgba(197, 155, 39, 0.05);
    border: 1px solid rgba(197, 155, 39, 0.3);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-top: 1.5rem;
    animation: fadeInSlide 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.req-conditional-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
}

.req-field-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-white);
    margin-bottom: 0.5rem;
}

.req-text-input {
    width: 100%;
    background: rgba(10, 11, 16, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.15rem;
    color: #ffffff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all var(--transition-fast) ease;
}

.req-text-input:focus {
    outline: none;
    border-color: var(--color-gold-400);
    box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.15);
    background: rgba(15, 16, 24, 0.98);
}

/* Options Grid for Single-Choice (Purpose, Status, Budget, Timeline) */
.req-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.req-options-3col {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.req-option-card {
    position: relative;
    background: rgba(12, 13, 19, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.25rem;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    user-select: none;
    display: flex;
    flex-direction: column;
}

.req-option-card:hover {
    border-color: rgba(197, 155, 39, 0.4);
    background: rgba(18, 20, 30, 0.85);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.req-option-card:focus-visible {
    outline: 2px solid var(--color-gold-400);
    outline-offset: 2px;
}

.req-option-card.is-selected {
    border-color: var(--color-gold-400);
    background: linear-gradient(145deg, rgba(22, 24, 35, 0.95) 0%, rgba(18, 19, 28, 0.95) 100%);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(197, 155, 39, 0.12);
}

.req-option-icon {
    font-size: 1.45rem;
    color: var(--color-gold-400);
    margin-bottom: 0.85rem;
}

.req-option-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.35rem 0;
    line-height: 1.35;
}

.req-option-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.45;
}

.req-budget-card .req-option-label {
    font-size: 1.2rem;
    font-weight: 800;
}

/* Optional Field Wrap */
.req-optional-field-wrap {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Chips Grid for Target Audience (Multi-Select) */
.req-chips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.15rem;
    margin-bottom: 1.5rem;
}

.req-chip-card {
    position: relative;
    background: rgba(12, 13, 19, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.15rem;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    user-select: none;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.req-chip-card:hover {
    border-color: rgba(197, 155, 39, 0.4);
    background: rgba(18, 20, 30, 0.85);
    transform: translateY(-2px);
}

.req-chip-card:focus-visible {
    outline: 2px solid var(--color-gold-400);
    outline-offset: 2px;
}

.req-chip-card.is-selected {
    border-color: var(--color-gold-400);
    background: linear-gradient(145deg, rgba(22, 24, 35, 0.95) 0%, rgba(18, 19, 28, 0.95) 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(197, 155, 39, 0.12);
}

.req-chip-icon {
    font-size: 1.35rem;
    color: var(--color-gold-400);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.req-chip-content {
    flex: 1;
}

.req-chip-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.req-chip-sub {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.req-chip-check {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 0.7rem;
    transition: all var(--transition-fast) ease;
}

.req-chip-card.is-selected .req-chip-check {
    background: var(--color-gold-400);
    border-color: var(--color-gold-400);
    color: #000000;
    box-shadow: 0 0 8px rgba(197, 155, 39, 0.5);
}

/* Helper Tips & Disclaimers */
.req-tip-box,
.req-disclaimer-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: rgba(197, 155, 39, 0.06);
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

.req-tip-box i,
.req-disclaimer-notice i {
    font-size: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* Textarea & Character Counter */
.req-textarea-wrapper {
    position: relative;
}

.req-textarea {
    width: 100%;
    background: rgba(10, 11, 16, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    color: #ffffff;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    transition: all var(--transition-fast) ease;
    line-height: 1.6;
}

.req-textarea:focus {
    outline: none;
    border-color: var(--color-gold-400);
    box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.15);
    background: rgba(14, 15, 22, 0.98);
}

.req-char-counter {
    text-align: right;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.4rem;
}

/* Step 5 Bottom Action & Summary Bar */
.req-bottom-action-bar {
    position: sticky;
    bottom: 2rem;
    background: rgba(14, 15, 22, 0.92);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: var(--radius-xl);
    padding: 1rem 1.75rem;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 30px rgba(197, 155, 39, 0.15);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    z-index: 30;
    transition: all var(--transition-normal) ease;
    margin-top: 2rem;
}

.req-summary-chips {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.req-summary-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #ffffff;
}

.req-actions-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.btn-builder-back {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
    border-radius: 9999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--transition-fast) ease;
}

.btn-builder-back:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-gold-400);
}

/* Step 6 Section Transition Placeholder */
.step6-transition-section {
    padding: 4rem 1rem;
    text-align: center;
    animation: fadeInSlide 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.step6-card-inner {
    max-width: 780px;
    margin: 0 auto;
    background: rgba(14, 15, 22, 0.85);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: var(--radius-2xl);
    padding: 3.5rem 2.5rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(197, 155, 39, 0.15);
}

/* Responsive adjustments for Step 5 */
@media (max-width: 900px) {
    .req-bottom-action-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
        bottom: 1rem;
    }

    .req-summary-chips {
        justify-content: center;
    }

    .req-actions-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-builder-back,
    .btn-builder-continue {
        width: 100%;
        justify-content: center;
    }

    .req-card-section {
        padding: 1.75rem 1.25rem;
    }
}

/* ============================================================================
   7. STEP 6 — UI DESIGN GALLERY & CUSTOM DESIGN UPLOAD STYLES
   ============================================================================ */

.design-gallery-section {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
    padding: 3rem 0 7rem 0;
    position: relative;
    background: radial-gradient(circle at 50% 0%, rgba(197, 155, 39, 0.05) 0%, transparent 60%);
}

.design-gallery-section.is-revealed {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.design-header-block {
    text-align: center;
    margin-bottom: 3.5rem;
}

/* Category Sub-header & Filter */
.gallery-category-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.gallery-section-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.35rem 0;
}

.gallery-section-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 0;
}

.theme-search-box {
    position: relative;
    width: 320px;
    max-width: 100%;
}

.theme-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.theme-search-input {
    width: 100%;
    background: rgba(10, 11, 16, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1.25rem 0.75rem 2.6rem;
    color: #ffffff;
    font-size: 0.9rem;
    font-family: inherit;
    transition: all var(--transition-fast) ease;
}

.theme-search-input:focus {
    outline: none;
    border-color: var(--color-gold-400);
    box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.15);
    background: rgba(14, 15, 22, 0.95);
}

/* UI Themes Grid (20 Designs) */
.ui-themes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

.theme-gallery-card {
    position: relative;
    background: rgba(13, 14, 21, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-normal) ease;
    user-select: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.theme-gallery-card:hover {
    border-color: rgba(197, 155, 39, 0.45);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(197, 155, 39, 0.08);
}

.theme-gallery-card:focus-visible {
    outline: 2px solid var(--color-gold-400);
    outline-offset: 3px;
}

.theme-gallery-card.is-selected {
    border-color: var(--color-gold-400);
    background: linear-gradient(155deg, rgba(22, 24, 35, 0.95) 0%, rgba(15, 16, 24, 0.95) 100%);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(197, 155, 39, 0.2);
}

/* Selection Badge */
.theme-select-badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 0.8rem;
    z-index: 5;
    transition: all var(--transition-fast) ease;
    backdrop-filter: blur(6px);
}

.theme-gallery-card.is-selected .theme-select-badge {
    background: var(--color-gold-400);
    border-color: var(--color-gold-400);
    color: #000000;
    box-shadow: 0 0 12px rgba(197, 155, 39, 0.6);
}

/* Preview Image Area */
.theme-preview-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    background: #08080c;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.theme-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal) ease;
}

.theme-gallery-card:hover .theme-preview-img {
    transform: scale(1.04);
}

.btn-theme-quick-preview {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: rgba(10, 11, 16, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all var(--transition-fast) ease;
    opacity: 0.85;
}

.btn-theme-quick-preview:hover {
    background: var(--color-gold-400);
    border-color: var(--color-gold-400);
    color: #000000;
    opacity: 1;
}

/* Card Body */
.theme-card-body {
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.theme-card-meta {
    flex: 1;
    margin-bottom: 1rem;
}

.theme-badge-pill {
    display: inline-block;
    background: rgba(197, 155, 39, 0.15);
    color: var(--color-gold-400);
    border: 1px solid rgba(197, 155, 39, 0.35);
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

.theme-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.45rem 0;
    line-height: 1.3;
}

.theme-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Color Palette Preview */
.theme-palette-preview {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.palette-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    display: inline-block;
}

/* Card Footer */
.theme-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-price-info {
    display: flex;
    flex-direction: column;
}

.theme-price-tag {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
}

.theme-price-note {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.theme-timeline-info {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.theme-timeline-info i {
    color: var(--color-gold-400);
}

/* Motion Experience Section */
.design-motion-section {
    background: rgba(15, 16, 24, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 2.25rem 2.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.motion-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.motion-card {
    position: relative;
    background: rgba(12, 13, 19, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.35rem;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    user-select: none;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.motion-card:hover {
    border-color: rgba(197, 155, 39, 0.4);
    background: rgba(18, 20, 30, 0.85);
    transform: translateY(-2px);
}

.motion-card:focus-visible {
    outline: 2px solid var(--color-gold-400);
    outline-offset: 2px;
}

.motion-card.is-selected {
    border-color: var(--color-gold-400);
    background: linear-gradient(145deg, rgba(22, 24, 35, 0.95) 0%, rgba(18, 19, 28, 0.95) 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(197, 155, 39, 0.12);
}

.motion-icon {
    font-size: 1.45rem;
    color: var(--color-gold-400);
    flex-shrink: 0;
    margin-top: 0.2rem;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(197, 155, 39, 0.08);
    border: 1px solid rgba(197, 155, 39, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.motion-body {
    flex: 1;
}

.motion-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.motion-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.motion-badge {
    background: rgba(197, 155, 39, 0.15);
    color: var(--color-gold-400);
    border: 1px solid rgba(197, 155, 39, 0.3);
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
}

.motion-desc {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.motion-pricing-line {
    font-size: 0.82rem;
    font-weight: 600;
}

.motion-days {
    color: var(--color-text-muted);
    font-weight: 400;
}

.motion-check-box {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 0.7rem;
    transition: all var(--transition-fast) ease;
}

.motion-card.is-selected .motion-check-box {
    background: var(--color-gold-400);
    border-color: var(--color-gold-400);
    color: #000000;
    box-shadow: 0 0 8px rgba(197, 155, 39, 0.5);
}

/* Custom Upload Section */
.custom-upload-section {
    background: rgba(15, 16, 24, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 2.25rem 2.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.design-drop-zone {
    border: 2px dashed rgba(197, 155, 39, 0.4);
    border-radius: var(--radius-xl);
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: rgba(10, 11, 16, 0.6);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    margin-bottom: 1.5rem;
}

.design-drop-zone:hover,
.design-drop-zone.is-dragover {
    border-color: var(--color-gold-400);
    background: rgba(197, 155, 39, 0.06);
    box-shadow: 0 0 25px rgba(197, 155, 39, 0.15);
}

.drop-zone-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.drop-zone-text {
    font-size: 1.05rem;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

.drop-browse-link {
    color: var(--color-gold-400);
    text-decoration: underline;
    font-weight: 600;
}

.drop-zone-hints {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.drop-file-input {
    display: none;
}

/* Upload Progress */
.upload-progress-wrap {
    position: relative;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.upload-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-gold-400), #ffd976);
    border-radius: 9999px;
    transition: width 200ms ease;
}

.upload-progress-text {
    position: absolute;
    top: 14px;
    left: 0;
    font-size: 0.75rem;
    color: var(--color-gold-400);
    font-weight: 600;
}

/* Upload Messages */
.upload-message-banner {
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.upload-message-banner.is-success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.upload-message-banner.is-error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

/* Uploaded Files Container */
.uploaded-files-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.uploaded-file-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: rgba(12, 13, 19, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    transition: border-color var(--transition-fast) ease;
}

.uploaded-file-item:hover {
    border-color: rgba(197, 155, 39, 0.3);
}

.uploaded-file-icon {
    font-size: 1.35rem;
    flex-shrink: 0;
}

.uploaded-file-meta {
    flex: 1;
    overflow: hidden;
}

.uploaded-file-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uploaded-file-size {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.btn-remove-upload {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    transition: all var(--transition-fast) ease;
}

.btn-remove-upload:hover {
    background: rgba(239, 68, 68, 0.15);
}

.design-references-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

/* Step 6 Bottom Action Bar */
.design-bottom-action-bar {
    position: sticky;
    bottom: 2rem;
    background: rgba(14, 15, 22, 0.92);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: var(--radius-xl);
    padding: 1rem 1.75rem;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 30px rgba(197, 155, 39, 0.15);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    z-index: 30;
    transition: all var(--transition-normal) ease;
    margin-top: 2rem;
}

.design-summary-chips {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Theme Preview Modal */
.theme-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: fadeInModal 250ms ease;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.theme-modal-content {
    position: relative;
    background: #0d0e15;
    border: 1px solid rgba(197, 155, 39, 0.4);
    border-radius: var(--radius-2xl);
    max-width: 820px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(197, 155, 39, 0.2);
}

.theme-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-fast) ease;
}

.theme-modal-close:hover {
    background: var(--color-gold-400);
    color: #000000;
}

.theme-modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.theme-modal-visual {
    background: #06070a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-modal-visual img {
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    border-radius: var(--radius-lg);
}

.theme-modal-details {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.theme-modal-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
}

.theme-modal-desc {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

.theme-modal-palette {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.palette-swatch-box {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.palette-swatch-box .palette-swatch {
    width: 22px;
    height: 22px;
}

.swatch-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.theme-modal-specs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.specs-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.specs-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
}

.theme-modal-actions .btn-builder-continue {
    width: 100%;
    justify-content: center;
}

/* Step 7 Transition Placeholder */
.step7-transition-section {
    padding: 4rem 1rem;
    text-align: center;
    animation: fadeInSlide 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.step7-card-inner {
    max-width: 780px;
    margin: 0 auto;
    background: rgba(14, 15, 22, 0.85);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: var(--radius-2xl);
    padding: 3.5rem 2.5rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(197, 155, 39, 0.15);
}

/* Responsive queries */
@media (max-width: 900px) {
    .gallery-category-header {
        flex-direction: column;
        align-items: stretch;
    }

    .theme-search-box {
        width: 100%;
    }

    .design-references-grid {
        grid-template-columns: 1fr;
    }

    .design-bottom-action-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
        bottom: 1rem;
    }

    .design-summary-chips {
        justify-content: center;
    }

    .theme-modal-body {
        grid-template-columns: 1fr;
    }

    .theme-modal-visual {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 1rem;
    }

    .theme-modal-details {
        padding: 1.5rem;
    }
}

/* =============================================================================
   STEP 7: INDIVIDUAL SCREEN SELECTION CATALOGUE STYLES
   Samir Technologies Signature Luxury Black & Gold Design System
   ============================================================================= */

.step7-screens-gallery {
    padding: 3.5rem 0 6rem 0;
    position: relative;
    border-top: 1px solid rgba(197, 155, 39, 0.15);
}

/* Section Header */
.screens-hero-header {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 2.5rem auto;
}

.screens-badge-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.screens-hero-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.screens-hero-subtitle {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.screens-notice-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(197, 155, 39, 0.07);
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: var(--radius-lg);
    padding: 1rem 1.4rem;
    text-align: left;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #e5e7eb;
}

.screens-notice-banner i {
    font-size: 1.25rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* Filter Panel & Search */
.screens-filter-panel {
    background: rgba(14, 15, 23, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 2.25rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.screens-filter-top-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.screens-search-wrap {
    flex: 1 1 320px;
    position: relative;
    display: flex;
    align-items: center;
}

.screens-search-icon {
    position: absolute;
    left: 1.15rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.95rem;
    pointer-events: none;
}

.screens-search-input {
    width: 100%;
    background: rgba(8, 9, 13, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    padding: 0.75rem 2.8rem 0.75rem 2.8rem;
    color: #ffffff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all var(--transition-fast) ease;
}

.screens-search-input:focus {
    outline: none;
    border-color: var(--color-gold-400);
    box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.15);
    background: rgba(12, 13, 20, 0.98);
}

.screens-search-clear {
    position: absolute;
    right: 1.15rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.screens-search-clear:hover {
    color: #ffffff;
}

.screens-control-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.screens-control-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.screens-select-input {
    background: rgba(8, 9, 13, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 0.65rem 1rem;
    color: #ffffff;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
}

.screens-select-input:focus {
    outline: none;
    border-color: var(--color-gold-400);
    box-shadow: 0 0 0 2px rgba(197, 155, 39, 0.15);
}

/* Category Tabs / Chips */
.screens-category-tabs {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(197, 155, 39, 0.3) transparent;
}

.screens-category-tabs::-webkit-scrollbar {
    height: 4px;
}

.screens-category-tabs::-webkit-scrollbar-thumb {
    background: rgba(197, 155, 39, 0.3);
    border-radius: 4px;
}

.category-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
    padding: 0.6rem 1.15rem;
    color: #cbd5e1;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast) ease;
    user-select: none;
}

.category-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(197, 155, 39, 0.3);
}

.category-tab-btn.is-active {
    background: linear-gradient(135deg, rgba(197, 155, 39, 0.22) 0%, rgba(197, 155, 39, 0.08) 100%);
    border-color: var(--color-gold-400);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(197, 155, 39, 0.18);
}

.category-count-badge {
    background: rgba(0, 0, 0, 0.4);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-gold-400);
}

.category-tab-btn.is-active .category-count-badge {
    background: var(--color-gold-400);
    color: #000000;
}

/* Status Bar */
.screens-filter-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.screens-quick-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.screens-link-action {
    background: transparent;
    border: none;
    color: var(--color-gold-400);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color var(--transition-fast) ease;
}

.screens-link-action:hover {
    color: #ffffff;
    text-decoration: underline;
}

.sep-dot {
    color: rgba(255, 255, 255, 0.2);
}

/* Gallery Grid */
.screens-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.5rem;
    margin-bottom: 4rem;
}

/* Screen Card */
.screen-card {
    position: relative;
    background: rgba(13, 14, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    user-select: none;
    backdrop-filter: blur(8px);
}

.screen-card:hover {
    border-color: rgba(197, 155, 39, 0.45);
    background: rgba(18, 20, 28, 0.95);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(197, 155, 39, 0.12);
}

.screen-card:focus-visible {
    outline: 2px solid var(--color-gold-400);
    outline-offset: 3px;
}

.screen-card.is-selected {
    border-color: var(--color-gold-400);
    background: linear-gradient(160deg, rgba(22, 23, 33, 0.96) 0%, rgba(16, 17, 24, 0.96) 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65), 0 0 30px rgba(197, 155, 39, 0.2);
}

.screen-card.is-mandatory {
    border-left: 3px solid var(--color-gold-400);
}

/* Card Header */
.screen-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 0.5rem 1rem;
    position: relative;
    z-index: 2;
}

.screen-select-indicator {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: transparent;
    transition: all var(--transition-fast) ease;
    background: rgba(0, 0, 0, 0.4);
}

.screen-card:hover .screen-select-indicator {
    border-color: rgba(197, 155, 39, 0.6);
}

.screen-card.is-selected .screen-select-indicator {
    background: var(--color-gold-400);
    border-color: var(--color-gold-400);
    color: #000000;
    box-shadow: 0 0 10px rgba(197, 155, 39, 0.4);
}

.screen-card-meta-badges {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.screen-badge-pill {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full);
}

.badge-mandatory {
    background: rgba(197, 155, 39, 0.18);
    border: 1px solid var(--color-gold-400);
    color: var(--color-gold-400);
}

.badge-included {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
}

.badge-feature {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

/* Card Thumbnail */
.screen-card-thumbnail-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    background: #08080c;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.screen-card-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
}

.screen-card:hover .screen-card-thumbnail {
    transform: scale(1.04);
}

.btn-screen-quick-preview {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: rgba(8, 9, 13, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    padding: 0.4rem 0.85rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0;
    transform: translateY(6px);
    transition: all var(--transition-fast) ease;
    backdrop-filter: blur(8px);
}

.screen-card:hover .btn-screen-quick-preview {
    opacity: 1;
    transform: translateY(0);
}

.btn-screen-quick-preview:hover {
    background: var(--color-gold-400);
    color: #000000;
    border-color: var(--color-gold-400);
}

/* Card Body */
.screen-card-body {
    padding: 1.15rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.screen-card-category-tag {
    font-size: 0.75rem;
    color: var(--color-gold-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.screen-card-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    line-height: 1.35;
}

.screen-card-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin: 0 0 0.9rem 0;
    flex: 1;
}

.screen-platform-pills {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.platform-chip {
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Card Footer */
.screen-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.15rem;
    background: rgba(8, 9, 13, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.screen-price-box, .screen-timeline-box {
    display: flex;
    flex-direction: column;
}

.price-label, .timeline-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}

.price-val {
    font-size: 0.95rem;
    font-weight: 800;
}

.timeline-val {
    font-size: 0.82rem;
    font-weight: 700;
    color: #cbd5e1;
}

.text-green {
    color: #34d399;
}

.screen-select-cta {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-gold-400);
}

.screen-card.is-selected .screen-select-cta {
    color: #34d399;
}

/* Empty State */
.screens-empty-state {
    text-align: center;
    padding: 4rem 1.5rem;
    background: rgba(14, 15, 22, 0.6);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xl);
    margin-bottom: 3rem;
}

.empty-icon-box {
    font-size: 3rem;
    color: rgba(197, 155, 39, 0.6);
    margin-bottom: 1.25rem;
}

.screens-empty-state h3 {
    font-size: 1.4rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.screens-empty-state p {
    color: var(--color-text-muted);
    max-width: 460px;
    margin: 0 auto 1.5rem auto;
}

/* Sticky Bottom Summary Bar */
.screens-summary-bar {
    position: sticky;
    bottom: 1.5rem;
    z-index: 40;
    background: rgba(12, 13, 19, 0.92);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: var(--radius-2xl);
    padding: 1.15rem 1.75rem;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(197, 155, 39, 0.15);
    margin-top: 2rem;
    animation: fadeInSlide 300ms ease;
}

.screens-summary-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.screens-metrics-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.metric-block {
    display: flex;
    flex-direction: column;
}

.metric-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.metric-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.metric-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
}

.screens-actions-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Screen Preview Modal Customizations */
.screen-modal-large {
    max-width: 780px;
}

.screen-modal-visual {
    background: #090a0f;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.screen-modal-visual img {
    max-width: 100%;
    max-height: 320px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

.screen-modal-details {
    padding: 2rem;
}

.screen-modal-dep-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(197, 155, 39, 0.08);
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #e5e7eb;
    margin-bottom: 1.25rem;
}

/* Step 8 Transition Placeholder */
.step8-transition-section {
    padding: 4rem 1rem;
    text-align: center;
    animation: fadeInSlide 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.step8-card-inner {
    max-width: 780px;
    margin: 0 auto;
    background: rgba(14, 15, 22, 0.9);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: var(--radius-2xl);
    padding: 3.5rem 2.5rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(197, 155, 39, 0.15);
}

/* Mobile Responsive */
@media (max-width: 840px) {
    .screens-filter-top-row {
        flex-direction: column;
        align-items: stretch;
    }

    .screens-control-group {
        justify-content: space-between;
    }

    .screens-select-input {
        width: 60%;
    }

    .screens-summary-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .screens-metrics-wrap {
        justify-content: space-between;
    }

    .metric-divider {
        display: none;
    }

    .screens-actions-wrap {
        flex-direction: column;
    }

    .screens-actions-wrap button {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================================
   STEP 8: PROJECT CATEGORIES, PLATFORMS & USER ROLES CONFIGURATION STYLES
   Samir Technologies Signature Luxury Black & Gold Design System
   ============================================================================= */

.step8-configuration-wizard {
    padding: 3.5rem 0 6rem 0;
    position: relative;
    border-top: 1px solid rgba(197, 155, 39, 0.15);
}

.config-hero-header {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 3rem auto;
}

.config-recommendation-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(197, 155, 39, 0.15) 0%, rgba(197, 155, 39, 0.05) 100%);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.6rem;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #fef08a;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    animation: fadeInSlide 300ms ease;
    margin-top: 1.5rem;
}

.config-recommendation-banner i {
    font-size: 1.35rem;
    flex-shrink: 0;
}

/* Section Block Structure */
.config-section-block {
    background: rgba(13, 14, 21, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    padding: 2.5rem;
    margin-bottom: 3rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
    position: relative;
}

.config-block-header {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.config-block-num {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-gold-400) 0%, var(--color-gold-600) 100%);
    color: #000000;
    font-size: 1.25rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(197, 155, 39, 0.35);
}

.config-block-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.35rem 0;
    letter-spacing: -0.01em;
}

.config-block-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.55;
}

.config-search-row {
    margin-bottom: 1.75rem;
}

/* Category Selection Cards Grid */
.categories-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.category-select-card {
    position: relative;
    background: rgba(10, 11, 17, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 1.35rem;
    cursor: pointer;
    transition: all var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    user-select: none;
}

.category-select-card:hover {
    border-color: rgba(197, 155, 39, 0.45);
    background: rgba(18, 20, 29, 0.95);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(197, 155, 39, 0.12);
}

.category-select-card:focus-visible {
    outline: 2px solid var(--color-gold-400);
    outline-offset: 2px;
}

.category-select-card.is-selected {
    border-color: var(--color-gold-400);
    background: linear-gradient(145deg, rgba(24, 26, 38, 0.95) 0%, rgba(16, 17, 26, 0.95) 100%);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(197, 155, 39, 0.2);
}

.category-card-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: transparent;
    transition: all var(--transition-fast) ease;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.category-select-card.is-selected .category-card-check {
    background: var(--color-gold-400);
    border-color: var(--color-gold-400);
    color: #000000;
}

.category-card-icon {
    font-size: 1.6rem;
    color: var(--color-gold-400);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.category-card-content {
    flex: 1;
}

.category-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.category-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.category-badge-chip {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(197, 155, 39, 0.15);
    border: 1px solid rgba(197, 155, 39, 0.35);
    color: var(--color-gold-400);
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-full);
}

.category-card-desc {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin: 0 0 0.65rem 0;
}

.category-subs-count {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Subcategories Expansion Panel */
.subcategories-panel {
    background: rgba(8, 9, 14, 0.95);
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    animation: fadeInSlide 300ms ease;
    box-shadow: inset 0 2px 15px rgba(0, 0, 0, 0.6);
}

.subcategories-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.subcategories-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.subcategories-title-wrap i {
    font-size: 1.4rem;
}

.subcategories-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.2rem 0;
}

.subcategories-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

.subcategories-chips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.9rem;
}

.subcat-chip {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transition: all var(--transition-fast) ease;
    user-select: none;
}

.subcat-chip:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(197, 155, 39, 0.35);
}

.subcat-chip.is-selected {
    background: linear-gradient(135deg, rgba(197, 155, 39, 0.18) 0%, rgba(197, 155, 39, 0.06) 100%);
    border-color: var(--color-gold-400);
    box-shadow: 0 0 15px rgba(197, 155, 39, 0.15);
}

.subcat-chip-check {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: transparent;
    flex-shrink: 0;
    margin-top: 0.15rem;
    transition: all var(--transition-fast) ease;
}

.subcat-chip.is-selected .subcat-chip-check {
    background: var(--color-gold-400);
    border-color: var(--color-gold-400);
    color: #000000;
}

.subcat-chip-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.subcat-chip-desc {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* Custom Field Textarea & Input */
.custom-idea-field-box, .custom-platform-box, .custom-role-box {
    margin-top: 1.75rem;
    background: rgba(12, 13, 20, 0.9);
    border: 1px solid rgba(197, 155, 39, 0.3);
    border-radius: var(--radius-lg);
    padding: 1.35rem;
    animation: fadeInSlide 300ms ease;
}

.config-field-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.config-textarea, .config-text-input {
    width: 100%;
    background: rgba(7, 8, 12, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.15rem;
    color: #ffffff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all var(--transition-fast) ease;
}

.config-textarea:focus, .config-text-input:focus {
    outline: none;
    border-color: var(--color-gold-400);
    box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.15);
}

/* Platforms Selection Grid */
.platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.platform-card {
    position: relative;
    background: rgba(10, 11, 17, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    user-select: none;
}

.platform-card:hover:not(.is-incompatible) {
    border-color: rgba(197, 155, 39, 0.45);
    background: rgba(18, 20, 29, 0.95);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(197, 155, 39, 0.12);
}

.platform-card:focus-visible {
    outline: 2px solid var(--color-gold-400);
    outline-offset: 2px;
}

.platform-card.is-selected {
    border-color: var(--color-gold-400);
    background: linear-gradient(145deg, rgba(24, 26, 38, 0.95) 0%, rgba(16, 17, 26, 0.95) 100%);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(197, 155, 39, 0.2);
}

.platform-card.is-incompatible {
    opacity: 0.45;
    cursor: not-allowed;
    background: rgba(8, 9, 13, 0.6);
    filter: grayscale(0.6);
}

.platform-check-box {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: transparent;
    flex-shrink: 0;
    margin-top: 0.25rem;
    transition: all var(--transition-fast) ease;
}

.platform-card.is-selected .platform-check-box {
    background: var(--color-gold-400);
    border-color: var(--color-gold-400);
    color: #000000;
}

.platform-icon-wrap {
    font-size: 1.85rem;
    color: var(--color-gold-400);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.platform-body {
    flex: 1;
}

.platform-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.platform-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.platform-pill-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-full);
}

.badge-green {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
}

.badge-gold {
    background: rgba(197, 155, 39, 0.18);
    border: 1px solid rgba(197, 155, 39, 0.35);
    color: var(--color-gold-400);
}

.platform-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

.platform-incompat-notice {
    margin-top: 0.65rem;
    font-size: 0.78rem;
    color: #f87171;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Roles & Panels Cards Grid */
.roles-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.role-card {
    position: relative;
    background: rgba(10, 11, 17, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    user-select: none;
}

.role-card:hover {
    border-color: rgba(197, 155, 39, 0.45);
    background: rgba(18, 20, 29, 0.95);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(197, 155, 39, 0.12);
}

.role-card:focus-visible {
    outline: 2px solid var(--color-gold-400);
    outline-offset: 2px;
}

.role-card.is-selected {
    border-color: var(--color-gold-400);
    background: linear-gradient(155deg, rgba(22, 24, 35, 0.96) 0%, rgba(15, 16, 24, 0.96) 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(197, 155, 39, 0.2);
}

.role-card.is-mandatory {
    border-left: 3px solid var(--color-gold-400);
}

.role-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.role-select-indicator {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: transparent;
    transition: all var(--transition-fast) ease;
}

.role-card.is-selected .role-select-indicator {
    background: var(--color-gold-400);
    border-color: var(--color-gold-400);
    color: #000000;
}

.role-badge-pill {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-full);
}

.role-card-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
}

.role-icon-box {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.25);
    color: var(--color-gold-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.role-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.15rem 0;
}

.role-tagline {
    font-size: 0.78rem;
    color: var(--color-gold-400);
    font-weight: 600;
}

.role-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.role-features-box {
    background: rgba(6, 7, 11, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    margin-bottom: 1.25rem;
    flex: 1;
}

.role-features-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.role-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.role-features-list li {
    font-size: 0.8rem;
    color: #cbd5e1;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    line-height: 1.35;
}

.role-features-list li i {
    font-size: 0.75rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.role-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.role-pricing-info {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.role-price {
    font-size: 0.95rem;
    font-weight: 800;
}

.role-timeline {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.btn-role-quick-preview {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    padding: 0.35rem 0.75rem;
    color: #cbd5e1;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all var(--transition-fast) ease;
}

.btn-role-quick-preview:hover {
    background: var(--color-gold-400);
    color: #000000;
    border-color: var(--color-gold-400);
}

/* Sticky Bottom Summary Bar */
.config-summary-bar {
    position: sticky;
    bottom: 1.5rem;
    z-index: 40;
    background: rgba(12, 13, 19, 0.92);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: var(--radius-2xl);
    padding: 1.15rem 1.75rem;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(197, 155, 39, 0.15);
    margin-top: 2rem;
    animation: fadeInSlide 300ms ease;
}

.config-summary-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.config-metrics-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.config-actions-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Step 9 Transition Placeholder */
.step9-transition-section {
    padding: 4rem 1rem;
    text-align: center;
    animation: fadeInSlide 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mobile Responsive */
@media (max-width: 860px) {
    .config-section-block {
        padding: 1.5rem;
    }

    .config-summary-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .config-metrics-wrap {
        justify-content: space-between;
    }

    .config-actions-wrap {
        flex-direction: column;
    }

    .config-actions-wrap button {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   STEP 9 — FEATURES & FUNCTIONAL MODULES WIZARD
   Luxury Black & Gold Aesthetics
   ========================================================================== */
.step9-features-wizard {
    padding-top: 2rem;
    padding-bottom: 6rem;
    display: none;
}

.step9-header-card {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98));
    border: 1px solid var(--color-border-gold);
    border-radius: 16px;
    padding: 2.25rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(197, 155, 39, 0.2);
}

.step9-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.step9-main-heading {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 40%, var(--color-gold-300) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step9-main-subtitle {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 800px;
    margin-bottom: 1.75rem;
}

/* Compact Configuration Context Bar */
.config-context-summary-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(197, 155, 39, 0.2);
    border-radius: 10px;
    font-size: 0.9rem;
}

.context-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.context-label {
    color: var(--color-text-muted);
}

.context-val {
    color: #ffffff;
    font-weight: 600;
}

.context-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.15);
}

.context-action {
    margin-left: auto;
}

.btn-context-edit {
    background: transparent;
    border: none;
    color: var(--color-gold-400);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.btn-context-edit:hover {
    color: var(--color-gold-300);
    text-decoration: underline;
}

/* Recommendations Banner */
.step9-recommendations-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(135deg, rgba(197, 155, 39, 0.12), rgba(15, 15, 15, 0.95));
    border: 1px solid rgba(197, 155, 39, 0.4);
    border-radius: 14px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(197, 155, 39, 0.1);
}

.rec-banner-icon {
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rec-banner-content {
    flex: 1;
}

.rec-banner-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.rec-banner-desc {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.rec-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rec-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(197, 155, 39, 0.3);
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.78rem;
    color: #e5e5e5;
}

.btn-apply-recommendations {
    background: linear-gradient(135deg, var(--color-gold-500), var(--color-gold-600));
    color: #0b0b0b;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-apply-recommendations:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(197, 155, 39, 0.4);
}

/* Search and Quick Filters Panel */
.features-filter-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.feature-search-input {
    width: 100%;
    background: rgba(18, 18, 18, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.95rem 1.25rem 0.95rem 2.85rem;
    color: #ffffff;
    font-size: 0.98rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feature-search-input:focus {
    border-color: var(--color-gold-400);
    box-shadow: 0 0 15px rgba(197, 155, 39, 0.2);
    outline: none;
}

.search-icon {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 1rem;
    pointer-events: none;
}

.btn-clear-search {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1rem;
}

.btn-clear-search:hover {
    color: #ffffff;
}

.quick-filter-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.quick-filter-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #b0b0b0;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.2s ease;
}

.quick-filter-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.quick-filter-btn.active {
    background: rgba(197, 155, 39, 0.15);
    border-color: var(--color-gold-400);
    color: var(--color-gold-300);
}

/* Module Category Nav Tabs */
.module-category-nav {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    margin-bottom: 2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold-500) transparent;
}

.module-category-nav::-webkit-scrollbar {
    height: 5px;
}

.module-category-nav::-webkit-scrollbar-thumb {
    background: var(--color-gold-500);
    border-radius: 9999px;
}

.module-tab-btn {
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #9e9e9e;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.module-tab-btn:hover {
    color: #ffffff;
    border-color: rgba(197, 155, 39, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.module-tab-btn.active {
    background: linear-gradient(135deg, rgba(197, 155, 39, 0.2), rgba(20, 20, 20, 0.95));
    border-color: var(--color-gold-400);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(197, 155, 39, 0.15);
}

.module-count-badge {
    background: rgba(0, 0, 0, 0.5);
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    color: var(--color-gold-300);
}

/* Feature Module Section */
.feature-module-section {
    margin-bottom: 3rem;
}

.feature-module-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(197, 155, 39, 0.2);
}

.module-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.module-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-400);
    font-size: 1.2rem;
}

.module-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.module-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

.module-selection-badge {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-gold-300);
    background: rgba(197, 155, 39, 0.1);
    border: 1px solid rgba(197, 155, 39, 0.25);
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
}

/* Features Cards Grid */
.features-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* Feature Card */
.feature-card {
    background: linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(12, 12, 12, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
}

.feature-card:hover {
    border-color: rgba(197, 155, 39, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(197, 155, 39, 0.1);
}

.feature-card.is-selected {
    border-color: var(--color-gold-400);
    background: linear-gradient(135deg, rgba(25, 23, 18, 0.98), rgba(15, 14, 12, 0.99));
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(197, 155, 39, 0.18);
}

.feature-card.is-included {
    border-color: rgba(56, 161, 105, 0.4);
}

.feature-card.is-included.is-selected {
    border-color: rgba(56, 161, 105, 0.7);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 161, 105, 0.15);
}

.feature-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.feature-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.feature-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.feature-badge.badge-green {
    background: rgba(46, 133, 64, 0.2);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.feature-badge.badge-gold-glow {
    background: rgba(197, 155, 39, 0.18);
    color: var(--color-gold-300);
    border: 1px solid var(--color-gold-400);
}

.feature-badge.badge-blue {
    background: rgba(30, 64, 175, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.feature-badge.badge-muted {
    background: rgba(255, 255, 255, 0.05);
    color: #a3a3a3;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Custom Gold Checkbox */
.feature-checkbox-control {
    flex-shrink: 0;
}

.custom-gold-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    color: transparent;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.feature-card.is-selected .custom-gold-checkbox {
    background: var(--color-gold-500);
    border-color: var(--color-gold-400);
    color: #0b0b0b;
}

.feature-card.is-included.is-selected .custom-gold-checkbox {
    background: #22c55e;
    border-color: #16a34a;
    color: #ffffff;
}

.feature-card-body {
    flex: 1;
    margin-bottom: 1.25rem;
}

.feature-icon-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.feature-icon-square {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-400);
    font-size: 1rem;
    flex-shrink: 0;
}

.feature-card.is-selected .feature-icon-square {
    background: rgba(197, 155, 39, 0.15);
    border-color: rgba(197, 155, 39, 0.4);
}

.feature-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

.feature-description {
    font-size: 0.85rem;
    color: #a3a3a3;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

/* Third-Party Callout Box */
.feature-provider-callout {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
}

.provider-callout-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: #93c5fd;
    margin-bottom: 0.25rem;
}

.provider-callout-text {
    color: #cbd5e1;
    line-height: 1.45;
    margin: 0 0 0.35rem 0;
}

.provider-charge-note {
    font-size: 0.74rem;
    color: #facc15;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Footer & Pricing */
.feature-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.feature-pricing-block {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.feature-price-tag {
    font-size: 0.95rem;
    font-weight: 700;
}

.feature-price-tag.price-included {
    color: #4ade80;
}

.feature-price-tag.price-quote {
    color: var(--color-gold-400);
}

.feature-price-tag.price-amount {
    color: var(--color-gold-300);
}

.feature-days-tag {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.btn-feature-details {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.btn-feature-details:hover {
    color: var(--color-gold-300);
    transform: scale(1.15);
}

/* Custom Feature Request Panel */
.custom-feature-request-panel {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(12, 12, 12, 0.98));
    border: 1px dashed rgba(197, 155, 39, 0.4);
    border-radius: 14px;
    padding: 1.75rem;
    margin-bottom: 2.5rem;
}

.custom-feat-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.custom-feat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.custom-feat-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.custom-feat-subtitle {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    margin: 0;
}

.custom-feat-textarea {
    width: 100%;
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.85rem 1.1rem;
    color: #ffffff;
    font-size: 0.92rem;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.custom-feat-textarea:focus {
    border-color: var(--color-gold-400);
    outline: none;
    box-shadow: 0 0 15px rgba(197, 155, 39, 0.15);
}

.custom-feat-hint {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

/* Sticky Summary & Navigation Bar */
.step9-summary-action-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 90;
    background: rgba(12, 12, 12, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-border-gold);
    border-radius: 16px;
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(197, 155, 39, 0.15);
}

.summary-meta-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-count-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-badge-gold {
    background: var(--color-gold-500);
    color: #0b0b0b;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
}

.summary-features-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}

.summary-breakdown-sub {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.summary-delivery-line {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-dot-sep {
    color: rgba(255, 255, 255, 0.3);
}

.summary-price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.summary-price-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.summary-price-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-gold-300);
    line-height: 1.2;
}

.summary-price-sub {
    font-size: 0.75rem;
    color: var(--color-gold-400);
}

.summary-nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Step 10 Transition Section */
.step10-transition-section {
    padding: 4rem 1rem;
    text-align: center;
    animation: fadeInSlide 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .step9-summary-action-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
    }

    .summary-price-col {
        align-items: flex-start;
    }

    .summary-nav-actions {
        width: 100%;
        justify-content: space-between;
    }

    .step9-recommendations-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-apply-recommendations {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   STEP 10 — TECHNOLOGY STACK SELECTION WIZARD
   Luxury Black & Gold Aesthetics
   ========================================================================== */
.step10-tech-wizard {
    padding-top: 2rem;
    padding-bottom: 6rem;
    display: none;
}

.step10-header-card {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98));
    border: 1px solid var(--color-border-gold);
    border-radius: 16px;
    padding: 2.25rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(197, 155, 39, 0.2);
}

.step10-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.step10-main-heading {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 40%, var(--color-gold-300) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step10-main-subtitle {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 800px;
    margin-bottom: 1.75rem;
}

/* Two Primary Mode Selector Cards */
.tech-mode-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.tech-mode-card {
    background: linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(12, 12, 12, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
}

.tech-mode-card:hover {
    border-color: rgba(197, 155, 39, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(197, 155, 39, 0.15);
}

.tech-mode-card.is-active {
    border-color: var(--color-gold-400);
    background: linear-gradient(135deg, rgba(26, 22, 15, 0.98), rgba(14, 12, 9, 0.99));
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(197, 155, 39, 0.25);
}

.mode-card-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: flex-start;
    margin-bottom: 1.25rem;
}

.mode-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-400);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.tech-mode-card.is-active .mode-icon-box {
    background: linear-gradient(135deg, var(--color-gold-500), var(--color-gold-600));
    color: #0b0b0b;
    border-color: var(--color-gold-400);
    box-shadow: 0 4px 15px rgba(197, 155, 39, 0.3);
}

.mode-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.6rem;
}

.mode-desc {
    font-size: 0.88rem;
    color: #b0b0b0;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex: 1;
}

.mode-card-footer {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mode-status-text {
    font-size: 0.84rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #e5e5e5;
}

/* Recommended Stack Panel */
.recommended-stack-panel {
    background: linear-gradient(135deg, rgba(16, 16, 16, 0.98), rgba(10, 10, 10, 0.99));
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: 16px;
    padding: 2.25rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7);
}

.rec-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.rec-panel-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-top: 0.5rem;
}

.btn-customize-recommendation {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(197, 155, 39, 0.4);
    color: var(--color-gold-300);
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-customize-recommendation:hover {
    background: rgba(197, 155, 39, 0.15);
    color: #ffffff;
    border-color: var(--color-gold-400);
}

.rec-tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.rec-tier-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rec-tier-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-gold-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.85rem;
}

.rec-tier-icon-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
}

.rec-tier-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-400);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.rec-tier-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.2rem 0;
}

.rec-tier-lang {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.rec-tier-desc {
    font-size: 0.84rem;
    color: #a3a3a3;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex: 1;
}

.rec-tier-pricing {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.rec-rationale-box {
    background: rgba(197, 155, 39, 0.08);
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: 12px;
    padding: 1.35rem 1.75rem;
    margin-bottom: 1.5rem;
}

.rationale-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.rationale-text {
    font-size: 0.9rem;
    color: #d1d5db;
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
}

.tradeoffs-subbox {
    font-size: 0.85rem;
    color: #e5e5e5;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-top: 0.65rem;
    border-top: 1px dashed rgba(197, 155, 39, 0.3);
    line-height: 1.5;
}

.rec-languages-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
}

.lang-strip-label {
    color: var(--color-text-muted);
    font-weight: 600;
}

.lang-pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lang-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(197, 155, 39, 0.3);
    color: #ffffff;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
}

.lang-strip-note {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-style: italic;
    width: 100%;
    margin-top: 0.25rem;
}

/* Custom Stack Panel */
.custom-stack-panel {
    margin-bottom: 2.5rem;
}

.custom-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(197, 155, 39, 0.2);
}

.custom-panel-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.custom-panel-subtitle {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    margin: 0;
}

.custom-search-wrap {
    position: relative;
    width: 340px;
    max-width: 100%;
}

.tech-search-input {
    width: 100%;
    background: rgba(18, 18, 18, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.75rem 1rem 0.75rem 2.6rem;
    color: #ffffff;
    font-size: 0.88rem;
    transition: border-color 0.2s ease;
}

.tech-search-input:focus {
    border-color: var(--color-gold-400);
    outline: none;
    box-shadow: 0 0 15px rgba(197, 155, 39, 0.15);
}

.tech-incompatibility-alert {
    background: rgba(153, 27, 27, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.alert-icon {
    font-size: 1.5rem;
    color: #ef4444;
}

.alert-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fca5a5;
    margin-bottom: 0.25rem;
}

.alert-desc {
    font-size: 0.85rem;
    color: #e5e5e5;
    margin: 0;
    line-height: 1.5;
}

/* Tier Sections */
.tech-category-section {
    margin-bottom: 2.75rem;
}

.tier-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.tier-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tier-number-badge {
    background: var(--color-gold-500);
    color: #0b0b0b;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    letter-spacing: 0.04em;
}

.tier-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.tier-instruction {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.tech-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.25rem;
}

.tech-option-card {
    background: linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(12, 12, 12, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
}

.tech-option-card:hover {
    border-color: rgba(197, 155, 39, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(197, 155, 39, 0.1);
}

.tech-option-card.is-selected {
    border-color: var(--color-gold-400);
    background: linear-gradient(135deg, rgba(25, 22, 16, 0.98), rgba(14, 12, 10, 0.99));
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(197, 155, 39, 0.2);
}

.tech-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

.tech-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-400);
    font-size: 1.25rem;
}

.tech-option-card.is-selected .tech-icon-box {
    background: rgba(197, 155, 39, 0.15);
    border-color: rgba(197, 155, 39, 0.4);
}

.tech-radio-indicator {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.radio-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: transparent;
    transition: background 0.2s ease;
}

.tech-option-card.is-selected .tech-radio-indicator {
    border-color: var(--color-gold-400);
}

.tech-option-card.is-selected .radio-dot {
    background: var(--color-gold-400);
}

.tech-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
}

.tech-lang-tag {
    font-size: 0.78rem;
    color: var(--color-gold-300);
    margin-bottom: 0.65rem;
    display: block;
}

.tech-desc {
    font-size: 0.84rem;
    color: #a3a3a3;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex: 1;
}

.tech-card-footer {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Custom Technical Specification Box */
.custom-tech-request-panel {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(12, 12, 12, 0.98));
    border: 1px dashed rgba(197, 155, 39, 0.4);
    border-radius: 14px;
    padding: 1.75rem;
    margin-bottom: 2.5rem;
}

.custom-tech-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.custom-tech-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.custom-tech-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.custom-tech-subtitle {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    margin: 0;
}

.custom-tech-textarea {
    width: 100%;
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.85rem 1.1rem;
    color: #ffffff;
    font-size: 0.92rem;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.custom-tech-textarea:focus {
    border-color: var(--color-gold-400);
    outline: none;
    box-shadow: 0 0 15px rgba(197, 155, 39, 0.15);
}

/* Sticky Summary Bar */
.step10-summary-action-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 90;
    background: rgba(12, 12, 12, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-border-gold);
    border-radius: 16px;
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(197, 155, 39, 0.15);
}

.summary-stack-preview-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.25rem;
}

.summary-tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.summary-tech-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(197, 155, 39, 0.3);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
}

.summary-languages-line {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Step 11 Transition Section */
.step11-transition-section {
    padding: 4rem 1rem;
    text-align: center;
    animation: fadeInSlide 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 960px) {
    .step10-summary-action-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
    }

    .summary-nav-actions {
        width: 100%;
        justify-content: space-between;
    }

    .rec-panel-header {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-customize-recommendation {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================================
   STEP 11: CUSTOMIZATION, APIS & THIRD-PARTY INTEGRATIONS STYLES
   Samir Technologies Signature Luxury Black & Gold Design System
   ============================================================================= */

.step11-integrations-wizard {
    padding: 3.5rem 0 6rem 0;
    position: relative;
    border-top: 1px solid rgba(197, 155, 39, 0.15);
    background: radial-gradient(circle at 50% 0%, rgba(197, 155, 39, 0.04) 0%, rgba(10, 10, 10, 0) 70%);
}

.step11-header-card {
    background: #141414;
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.step11-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.step11-main-heading {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #ffffff 60%, #c59b27 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step11-main-subtitle {
    color: #a3a3a3;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 860px;
    margin-bottom: 1.75rem;
}

/* Controls Bar: Tabs, Search & Preset Actions */
.step11-controls-bar {
    background: #141414;
    border: 1px solid rgba(197, 155, 39, 0.2);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.int-category-tabs {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(197, 155, 39, 0.3) transparent;
}

.int-tab-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cccccc;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.6rem 1.15rem;
    border-radius: 9999px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.25s ease;
}

.int-tab-btn:hover {
    background: rgba(197, 155, 39, 0.1);
    border-color: rgba(197, 155, 39, 0.35);
    color: #ffffff;
}

.int-tab-btn.is-active {
    background: linear-gradient(135deg, #c59b27 0%, #9a781b 100%);
    border-color: #e5b93b;
    color: #000000;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(197, 155, 39, 0.3);
}

.int-tab-btn.tab-custom-request {
    border-color: rgba(197, 155, 39, 0.4);
    background: rgba(197, 155, 39, 0.08);
}

.int-search-action-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.int-search-box {
    position: relative;
    flex: 1;
    min-width: 280px;
}

.int-search-input {
    width: 100%;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.75rem 1rem 0.75rem 2.6rem;
    color: #ffffff;
    font-size: 0.92rem;
    outline: none;
    transition: all 0.25s ease;
}

.int-search-input:focus {
    border-color: #c59b27;
    box-shadow: 0 0 15px rgba(197, 155, 39, 0.25);
}

.btn-apply-recommended-preset {
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid #c59b27;
    color: #e5b93b;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.75rem 1.4rem;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-apply-recommended-preset:hover {
    background: linear-gradient(135deg, #c59b27 0%, #9a781b 100%);
    color: #000000;
    box-shadow: 0 4px 15px rgba(197, 155, 39, 0.35);
    transform: translateY(-1px);
}

/* Multi-Gateway Alert Notice */
.int-multi-gateway-notice {
    background: rgba(197, 155, 39, 0.08);
    border: 1px solid rgba(197, 155, 39, 0.4);
    border-radius: 12px;
    padding: 1.15rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    animation: fadeInSlide 300ms ease;
}

.int-multi-gateway-notice .notice-icon {
    font-size: 1.5rem;
    color: #c59b27;
    margin-top: 0.15rem;
}

.int-multi-gateway-notice .notice-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.int-multi-gateway-notice .notice-desc {
    font-size: 0.9rem;
    color: #d1d5db;
    line-height: 1.5;
    margin: 0;
}

/* Category Blocks & Grid */
.int-category-block {
    margin-bottom: 3rem;
}

.int-category-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cat-header-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.cat-header-icon {
    width: 44px;
    height: 44px;
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #c59b27;
}

.cat-header-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.cat-header-desc {
    font-size: 0.9rem;
    color: #888888;
    margin: 0;
}

.cat-count-badge {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a3a3a3;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
}

/* Integration Cards Grid */
.int-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.int-card {
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.int-card:hover {
    border-color: rgba(197, 155, 39, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.int-card.is-selected {
    border-color: #c59b27;
    background: linear-gradient(180deg, rgba(197, 155, 39, 0.07) 0%, #141414 100%);
    box-shadow: 0 10px 30px rgba(197, 155, 39, 0.15);
}

.int-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.int-icon-brand {
    width: 48px;
    height: 48px;
    background: #0d0d0d;
    border: 1px solid rgba(197, 155, 39, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    color: #c59b27;
    transition: all 0.25s ease;
}

.int-card.is-selected .int-icon-brand {
    background: rgba(197, 155, 39, 0.18);
    border-color: #c59b27;
    color: #e5b93b;
}

.int-check-indicator {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.int-check-indicator .check-mark {
    font-size: 0.75rem;
    color: #000000;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.2s ease;
}

.int-card.is-selected .int-check-indicator {
    background: #c59b27;
    border-color: #c59b27;
}

.int-card.is-selected .int-check-indicator .check-mark {
    opacity: 1;
    transform: scale(1);
}

.int-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.45rem;
    gap: 0.5rem;
}

.int-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
}

.badge-recommended-pill {
    background: rgba(197, 155, 39, 0.15);
    border: 1px solid rgba(197, 155, 39, 0.4);
    color: #e5b93b;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 9999px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.int-country-tag {
    font-size: 0.82rem;
    color: #888888;
    margin-bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.int-card-desc {
    font-size: 0.88rem;
    color: #a3a3a3;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex-grow: 1;
}

/* Disclosures box */
.int-disclosures-box {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 1.1rem;
    font-size: 0.78rem;
    color: #9ca3af;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.disclosure-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.disclosure-line i {
    font-size: 0.8rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.int-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.int-docs-link {
    color: #a3a3a3;
    font-size: 0.82rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s ease;
}

.int-docs-link:hover {
    color: #e5b93b;
    text-decoration: underline;
}

/* Custom Integration Request Panel */
.custom-integration-section {
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.custom-int-card {
    background: #141414;
    border: 1px solid rgba(197, 155, 39, 0.3);
    border-radius: 16px;
    padding: 2.25rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.custom-int-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.custom-int-icon-wrap {
    width: 54px;
    height: 54px;
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid #c59b27;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.custom-int-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.35rem;
}

.custom-int-subtitle {
    font-size: 0.95rem;
    color: #a3a3a3;
    line-height: 1.5;
    margin: 0;
}

.custom-int-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.form-group-item.full-width {
    grid-column: span 2;
}

.form-item-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: #d1d5db;
    margin-bottom: 0.5rem;
}

.form-item-input,
.form-item-textarea {
    width: 100%;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #ffffff;
    font-size: 0.92rem;
    outline: none;
    transition: all 0.25s ease;
}

.form-item-input:focus,
.form-item-textarea:focus {
    border-color: #c59b27;
    box-shadow: 0 0 15px rgba(197, 155, 39, 0.2);
}

.account-status-radios {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.account-status-radios .radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: #a3a3a3;
    cursor: pointer;
}

.custom-int-security-notice {
    background: rgba(197, 155, 39, 0.08);
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: 8px;
    padding: 0.9rem 1.25rem;
    font-size: 0.84rem;
    color: #d1d5db;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    line-height: 1.5;
}

/* Sticky Summary Action Bar */
.step11-summary-action-bar {
    position: sticky;
    bottom: 1.5rem;
    z-index: 100;
    background: rgba(20, 20, 20, 0.96);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: 16px;
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
    margin-top: 3rem;
    animation: fadeInSlide 400ms ease;
}

.summary-integrations-preview-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}

.summary-int-pills {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    max-height: 48px;
    overflow-y: auto;
}

.summary-int-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(197, 155, 39, 0.3);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.summary-disclosures-line {
    font-size: 0.82rem;
    color: #a3a3a3;
}

/* Step 12 Transition Section */
.step12-transition-section {
    padding: 4rem 1rem;
    text-align: center;
    animation: fadeInSlide 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 960px) {
    .step11-summary-action-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
    }

    .custom-int-form-grid {
        grid-template-columns: 1fr;
    }

    .form-group-item.full-width {
        grid-column: span 1;
    }
}

/* =============================================================================
   STEP 12: CLOUD HOSTING & DOMAIN SELECTION STYLES
   Samir Technologies Signature Luxury Black & Gold Design System
   ============================================================================= */

.step12-hosting-wizard {
    padding: 3.5rem 0 6rem 0;
    position: relative;
    border-top: 1px solid rgba(197, 155, 39, 0.15);
    background: radial-gradient(circle at 50% 0%, rgba(197, 155, 39, 0.05) 0%, rgba(10, 10, 10, 0) 70%);
}

.step12-header-card {
    background: #141414;
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.step12-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.step12-main-heading {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #ffffff 60%, #c59b27 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step12-main-subtitle {
    color: #a3a3a3;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 860px;
    margin-bottom: 1.75rem;
}

/* Option A vs Option B Main Choice Cards */
.host-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.host-choice-card {
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2.25rem;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.host-choice-card:hover {
    border-color: rgba(197, 155, 39, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.host-choice-card.is-active {
    border-color: #c59b27;
    background: linear-gradient(180deg, rgba(197, 155, 39, 0.08) 0%, #141414 100%);
    box-shadow: 0 15px 40px rgba(197, 155, 39, 0.18);
}

.choice-card-badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.choice-icon-box {
    width: 60px;
    height: 60px;
    background: #0d0d0d;
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #c59b27;
    margin-bottom: 1.5rem;
}

.host-choice-card.is-active .choice-icon-box {
    background: rgba(197, 155, 39, 0.18);
    border-color: #c59b27;
    color: #e5b93b;
}

.choice-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.65rem;
}

.choice-desc {
    font-size: 0.92rem;
    color: #a3a3a3;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.choice-card-footer {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.choice-status-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: #d1d5db;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Without Server Notice Box */
.without-server-notice {
    background: rgba(197, 155, 39, 0.06);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: 14px;
    padding: 2rem;
    margin-bottom: 2.5rem;
    animation: fadeInSlide 300ms ease;
}

.without-server-notice .notice-inner {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.without-server-notice .notice-big-icon {
    font-size: 2.2rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.without-server-notice .notice-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.without-server-notice .notice-paragraph {
    font-size: 0.95rem;
    color: #d1d5db;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.without-server-notice .notice-note {
    font-size: 0.85rem;
    color: #9ca3af;
    line-height: 1.5;
    margin: 0;
}

/* Hosting Recommendation Banner */
.hosting-rec-banner {
    background: rgba(197, 155, 39, 0.09);
    border: 1px solid rgba(197, 155, 39, 0.3);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.94rem;
    color: #e5b93b;
    line-height: 1.5;
}

.hosting-rec-banner .rec-banner-icon {
    font-size: 1.4rem;
}

.hosting-section-title-wrap {
    margin-bottom: 1.5rem;
}

.hosting-section-title-wrap .section-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

.hosting-section-title-wrap .section-subtitle {
    font-size: 0.88rem;
    color: #888888;
    margin: 0;
}

/* 4-Tier Hosting Plans Grid */
.hosting-plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.hosting-plan-card {
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.75rem 1.4rem;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.hosting-plan-card:hover {
    border-color: rgba(197, 155, 39, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.hosting-plan-card.is-selected {
    border-color: #c59b27;
    background: linear-gradient(180deg, rgba(197, 155, 39, 0.08) 0%, #141414 100%);
    box-shadow: 0 12px 35px rgba(197, 155, 39, 0.16);
}

.plan-rec-ribbon {
    position: absolute;
    top: -12px;
    right: 16px;
    background: linear-gradient(135deg, #c59b27 0%, #9a781b 100%);
    color: #000000;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.plan-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.plan-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.plan-tier-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: #c59b27;
    letter-spacing: 0.05em;
}

.plan-radio-circle {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.radio-inner-dot {
    width: 10px;
    height: 10px;
    background: #000000;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.hosting-plan-card.is-selected .plan-radio-circle {
    background: #c59b27;
    border-color: #c59b27;
}

.hosting-plan-card.is-selected .radio-inner-dot {
    opacity: 1;
    transform: scale(1);
}

.plan-price-block {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.35rem;
}

.plan-price-block .price-currency {
    font-size: 1.25rem;
    font-weight: 700;
    color: #c59b27;
}

.plan-price-block .price-amount {
    font-size: 2.1rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.plan-price-block .price-period {
    font-size: 0.85rem;
    color: #888888;
}

.plan-price-disclaimer {
    font-size: 0.74rem;
    color: #888888;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.plan-desc {
    font-size: 0.86rem;
    color: #a3a3a3;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.plan-specs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.82rem;
    color: #d1d5db;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1rem;
}

.plan-specs-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.4;
}

.plan-specs-list li i {
    font-size: 0.85rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

/* Hosting Duration & Discounts Card */
.hosting-duration-card {
    background: #141414;
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: 14px;
    padding: 1.75rem 2rem;
    margin-bottom: 3rem;
}

.duration-header {
    margin-bottom: 1.25rem;
}

.duration-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.duration-title-wrap i {
    font-size: 1.35rem;
}

.duration-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.duration-subtitle {
    font-size: 0.88rem;
    color: #888888;
    margin: 0;
}

.duration-pills-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.duration-pill {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.15rem 1rem;
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.duration-pill:hover {
    border-color: rgba(197, 155, 39, 0.4);
}

.duration-pill.is-selected {
    border-color: #c59b27;
    background: rgba(197, 155, 39, 0.12);
    box-shadow: 0 4px 15px rgba(197, 155, 39, 0.15);
}

.pill-popular-badge {
    position: absolute;
    top: -10px;
    background: #c59b27;
    color: #000000;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    text-transform: uppercase;
}

.pill-months-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}

.pill-discount-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: #22c55e;
}

.pill-standard-tag {
    font-size: 0.8rem;
    color: #888888;
}

/* Domain Registration Section */
.domain-registration-section {
    background: #141414;
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: 16px;
    padding: 2.25rem;
    margin-bottom: 3rem;
}

.domain-section-header {
    margin-bottom: 1.5rem;
}

.domain-title-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.domain-icon-box {
    width: 48px;
    height: 48px;
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

/* Domain Strategy Tabs */
.domain-choice-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.domain-tab-pill {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    padding: 0.7rem 1.35rem;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    color: #d1d5db;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.25s ease;
}

.domain-tab-pill input[type="radio"] {
    display: none;
}

.domain-tab-pill:hover {
    border-color: rgba(197, 155, 39, 0.4);
    color: #ffffff;
}

.domain-tab-pill.is-active {
    background: linear-gradient(135deg, #c59b27 0%, #9a781b 100%);
    border-color: #e5b93b;
    color: #000000;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(197, 155, 39, 0.3);
}

/* Domain Extensions Grid */
.domain-extensions-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.domain-ext-card {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.domain-ext-card:hover {
    border-color: rgba(197, 155, 39, 0.4);
    transform: translateY(-2px);
}

.domain-ext-card.is-selected {
    border-color: #c59b27;
    background: rgba(197, 155, 39, 0.12);
    box-shadow: 0 4px 15px rgba(197, 155, 39, 0.15);
}

.ext-card-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.ext-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
}

.ext-badge-pop {
    background: #c59b27;
    color: #000000;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.ext-price-line {
    margin-bottom: 0.25rem;
}

.ext-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: #e5b93b;
}

.ext-period {
    font-size: 0.75rem;
    color: #888888;
}

.ext-renewal-line {
    font-size: 0.75rem;
    color: #888888;
    margin-bottom: 0.65rem;
}

.ext-conditions {
    font-size: 0.74rem;
    color: #9ca3af;
    line-height: 1.35;
    margin: 0;
}

/* Domain Search Box Card */
.domain-search-box-card {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.75rem;
}

.domain-input-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.domain-input-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.domain-input-wrap {
    flex: 1;
    min-width: 280px;
    position: relative;
    display: flex;
    align-items: center;
}

.domain-input-icon {
    position: absolute;
    left: 1rem;
    color: #c59b27;
    font-size: 1rem;
}

.domain-text-input {
    width: 100%;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0.85rem 5.5rem 0.85rem 2.75rem;
    color: #ffffff;
    font-size: 1.05rem;
    font-family: monospace;
    outline: none;
    transition: all 0.25s ease;
}

.domain-text-input:focus {
    border-color: #c59b27;
    box-shadow: 0 0 15px rgba(197, 155, 39, 0.25);
}

.domain-selected-ext-preview {
    position: absolute;
    right: 1rem;
    background: rgba(197, 155, 39, 0.15);
    border: 1px solid rgba(197, 155, 39, 0.35);
    color: #e5b93b;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    pointer-events: none;
}

.btn-check-availability {
    background: linear-gradient(135deg, #c59b27 0%, #9a781b 100%);
    border: none;
    color: #000000;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.85rem 1.75rem;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-check-availability:hover {
    box-shadow: 0 4px 15px rgba(197, 155, 39, 0.4);
    transform: translateY(-1px);
}

/* Domain Availability Feedback Box */
.domain-check-feedback {
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    animation: fadeInSlide 300ms ease;
}

.domain-check-feedback.is-api-notice {
    border-color: rgba(197, 155, 39, 0.4);
    background: rgba(197, 155, 39, 0.08);
}

.domain-check-feedback.is-invalid {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.feedback-icon {
    font-size: 1.2rem;
    color: #c59b27;
    margin-top: 0.1rem;
}

.domain-check-feedback.is-invalid .feedback-icon {
    color: #ef4444;
}

.feedback-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.feedback-desc {
    font-size: 0.86rem;
    color: #d1d5db;
    line-height: 1.45;
}

/* Duration Years Radios */
.domain-years-selector {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.years-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #d1d5db;
}

.years-radios {
    display: flex;
    gap: 1rem;
}

.year-radio-label {
    font-size: 0.88rem;
    color: #d1d5db;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.domain-disclaimer-note {
    font-size: 0.8rem;
    color: #888888;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1rem;
}

/* Already Own Panel */
.domain-own-box {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.75rem;
}

.domain-own-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.domain-own-header i {
    font-size: 1.35rem;
}

.own-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.own-desc {
    font-size: 0.88rem;
    color: #888888;
    margin: 0;
}

.own-input-wrap {
    margin-bottom: 1rem;
}

.own-help-text {
    font-size: 0.85rem;
    color: #9ca3af;
    line-height: 1.5;
    margin: 0;
}

/* Add Later Panel */
.domain-later-box {
    background: #0d0d0d;
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: 14px;
    padding: 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.domain-later-box .later-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.later-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.35rem;
}

.later-desc {
    font-size: 0.88rem;
    color: #a3a3a3;
    line-height: 1.5;
    margin: 0;
}

.later-desc code {
    background: rgba(197, 155, 39, 0.15);
    color: #e5b93b;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Step 12 Sticky Summary Bar */
.step12-summary-action-bar {
    position: sticky;
    bottom: 1.5rem;
    z-index: 100;
    background: rgba(20, 20, 20, 0.96);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: 16px;
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
    margin-top: 3rem;
    animation: fadeInSlide 400ms ease;
}

.summary-breakdown-col {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.summary-line-item {
    font-size: 0.86rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breakdown-label {
    color: #9ca3af;
    font-weight: 600;
}

.breakdown-price {
    color: #e5b93b;
    font-weight: 700;
    margin-left: 0.35rem;
}

.summary-renewal-line {
    font-size: 0.8rem;
}

.text-gold-light {
    color: #e5b93b;
    font-weight: 600;
}

.summary-total-col {
    text-align: right;
}

/* Step 13 Transition Section */
.step13-transition-section {
    padding: 4rem 1rem;
    text-align: center;
    animation: fadeInSlide 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1200px) {
    .hosting-plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .domain-extensions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 960px) {
    .host-choice-grid {
        grid-template-columns: 1fr;
    }

    .duration-pills-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .domain-extensions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .step12-summary-action-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
    }

    .summary-total-col {
        text-align: left;
    }
}

/* =============================================================================
   STEP 13: PROJECT SCOPE, DELIVERABLES, OWNERSHIP & TIMELINE STYLES
   Samir Technologies Signature Luxury Black & Gold Design System
   ============================================================================= */

.step13-scope-wizard {
    padding: 3.5rem 0 6rem 0;
    position: relative;
    border-top: 1px solid rgba(197, 155, 39, 0.2);
    background: radial-gradient(circle at 50% 0%, rgba(197, 155, 39, 0.05) 0%, transparent 60%);
}

.step13-header-card {
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98));
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: 18px;
    padding: 2.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.step13-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.step13-main-heading {
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.step13-main-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    max-width: 900px;
    margin-bottom: 2rem;
}

/* Highlights Ribbon */
.scope-highlights-ribbon {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(197, 155, 39, 0.18);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.ribbon-metric {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ribbon-metric i {
    font-size: 1.8rem;
}

.metric-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.2rem;
}

.metric-val {
    font-size: 1rem;
    color: #ffffff;
    font-weight: 700;
}

/* Manual Review Alert */
.scope-manual-review-alert {
    display: flex;
    gap: 1.25rem;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
}

.alert-icon-box {
    font-size: 2rem;
    color: #eab308;
    flex-shrink: 0;
}

.alert-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.alert-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.alert-reasons-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.alert-note {
    font-size: 0.82rem;
    color: #eab308;
    font-style: italic;
}

/* Scope Summary Accordion Groups */
.scope-summary-section {
    margin-bottom: 3.5rem;
}

.btn-expand-all-scope {
    background: transparent;
    border: 1px solid rgba(197, 155, 39, 0.4);
    color: #c59b27;
    padding: 0.6rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-expand-all-scope:hover {
    background: rgba(197, 155, 39, 0.12);
    border-color: #c59b27;
}

.scope-groups-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.scope-group-card {
    background: rgba(18, 18, 18, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.25s ease;
}

.scope-group-card.is-open {
    border-color: rgba(197, 155, 39, 0.35);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.75rem;
    cursor: pointer;
    background: rgba(25, 25, 25, 0.6);
    user-select: none;
}

.group-title-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.group-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(197, 155, 39, 0.15);
    border: 1px solid rgba(197, 155, 39, 0.3);
    color: #c59b27;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.group-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.group-meta-tag {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

.group-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-group-edit {
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.35);
    color: #c59b27;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-group-edit:hover {
    background: #c59b27;
    color: #000000;
}

.group-toggle-icon {
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.25s ease;
}

.scope-group-card.is-open .group-toggle-icon {
    transform: rotate(180deg);
}

.group-body {
    padding: 1.5rem 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: none;
}

.scope-group-card.is-open .group-body {
    display: block;
}

.group-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.scope-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.item-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}

.item-value {
    font-size: 1rem;
    color: #ffffff;
    font-weight: 600;
}

.group-subblock {
    margin-bottom: 1.25rem;
}

.group-subblock:last-child {
    margin-bottom: 0;
}

.subblock-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.scope-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.scope-pill {
    background: rgba(197, 155, 39, 0.1);
    border: 1px solid rgba(197, 155, 39, 0.25);
    color: #ffffff;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.scope-pill.tech-pill {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.scope-pill-muted {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Screens list in scope */
.screens-summary-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.screen-item-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
}

.screen-name {
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 500;
    flex-grow: 1;
}

.screen-badge {
    font-size: 0.72rem;
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* Features summary grid */
.features-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.feature-item-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    font-size: 0.88rem;
    color: #ffffff;
}

.custom-int-scope-box {
    margin-top: 1rem;
    background: rgba(197, 155, 39, 0.08);
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: 8px;
    padding: 1rem;
}

.custom-req-desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0.5rem 0 0 0;
}

/* Deliverables Catalogue */
.deliverables-catalogue-section {
    margin-bottom: 3.5rem;
}

.deliverables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.deliverable-card {
    background: linear-gradient(145deg, rgba(22, 22, 22, 0.9), rgba(12, 12, 12, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.deliverable-card:hover {
    border-color: rgba(197, 155, 39, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.del-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.del-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.3);
    color: #c59b27;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.del-status-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    letter-spacing: 0.05em;
}

.del-status-badge.status-included {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.del-status-badge.status-optional {
    background: rgba(234, 179, 8, 0.12);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.del-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.del-desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.del-footer {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.9rem;
}

.del-price-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #c59b27;
}

.del-terms-note {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ownership & Source Code Handover Card */
.ownership-handover-card {
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98));
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: 18px;
    padding: 2.5rem;
    margin-bottom: 3.5rem;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6);
}

.ownership-header-banner {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 2.5rem auto;
}

.ownership-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(197, 155, 39, 0.15);
    border: 1px solid rgba(197, 155, 39, 0.4);
    color: #c59b27;
    padding: 0.4rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

.ownership-statement-title {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin-bottom: 1rem;
}

.ownership-supporting-lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
}

.ownership-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.ownership-detail-box {
    display: flex;
    gap: 1.25rem;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.5rem;
}

.detail-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.detail-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.detail-text {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

/* Delivery Method Selector */
.delivery-method-selector-card {
    background: rgba(15, 15, 15, 0.7);
    border: 1px solid rgba(197, 155, 39, 0.25);
    border-radius: 14px;
    padding: 1.75rem;
}

.delivery-method-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

.delivery-method-sub {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.25rem;
}

.delivery-methods-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.delivery-method-card {
    display: block;
    cursor: pointer;
    background: rgba(25, 25, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.delivery-method-card input {
    display: none;
}

.delivery-method-card.is-selected {
    border-color: #c59b27;
    background: rgba(197, 155, 39, 0.08);
    box-shadow: 0 4px 15px rgba(197, 155, 39, 0.15);
}

.dm-card-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dm-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(197, 155, 39, 0.15);
    color: #c59b27;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.dm-text-wrap {
    flex-grow: 1;
}

.dm-title {
    font-size: 0.95rem;
    color: #ffffff;
    display: block;
    margin-bottom: 0.2rem;
}

.dm-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
    margin: 0;
}

.dm-radio-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.delivery-method-card.is-selected .dm-radio-indicator {
    border-color: #c59b27;
}

.delivery-method-card.is-selected .dm-radio-indicator .radio-inner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c59b27;
}

/* Timeline Milestones Section */
.project-timeline-section {
    margin-bottom: 3.5rem;
}

.timeline-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.timeline-total-badge {
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.total-badge-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.05em;
}

.total-badge-value {
    font-size: 1.15rem;
    color: #c59b27;
    font-weight: 800;
}

.timeline-milestones-track {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}

.milestone-node {
    display: flex;
    gap: 1.5rem;
    position: relative;
}

.milestone-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.marker-stage-num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #151515;
    border: 2px solid #c59b27;
    color: #c59b27;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.marker-line {
    width: 2px;
    background: rgba(197, 155, 39, 0.25);
    flex-grow: 1;
    margin: 4px 0;
}

.milestone-node:last-child .marker-line {
    display: none;
}

.milestone-card {
    background: rgba(18, 18, 18, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    flex-grow: 1;
    margin-bottom: 0.5rem;
}

.milestone-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.milestone-stage-tag {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #c59b27;
    font-weight: 700;
}

.milestone-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0.2rem 0 0 0;
}

.milestone-days-pill {
    font-size: 0.82rem;
    background: rgba(197, 155, 39, 0.1);
    border: 1px solid rgba(197, 155, 39, 0.25);
    color: #ffffff;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-weight: 600;
}

.milestone-desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.milestone-card-footer {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

.milestone-parallel-tag, .milestone-seq-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.timeline-disclaimer-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(10, 10, 10, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Maintenance Plans Section */
.maintenance-plans-section {
    margin-bottom: 3.5rem;
}

.maintenance-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.maintenance-card {
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.75rem;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.maintenance-card:hover {
    border-color: rgba(197, 155, 39, 0.4);
    transform: translateY(-3px);
}

.maintenance-card.is-selected {
    border-color: #c59b27;
    background: linear-gradient(145deg, rgba(28, 24, 15, 0.95), rgba(15, 12, 5, 0.98));
    box-shadow: 0 10px 30px rgba(197, 155, 39, 0.15);
}

.maint-badge-popular {
    position: absolute;
    top: -12px;
    right: 20px;
    background: linear-gradient(135deg, #c59b27, #e0b438);
    color: #000000;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
}

.maint-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.maint-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.maint-duration {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

.maint-radio-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.maintenance-card.is-selected .maint-radio-circle {
    border-color: #c59b27;
}

.maintenance-card.is-selected .maint-radio-circle .radio-inner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c59b27;
}

.maint-price-block {
    margin-bottom: 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.maint-currency {
    font-size: 1.2rem;
    color: #c59b27;
    font-weight: 700;
}

.maint-amount {
    font-size: 1.9rem;
    color: #ffffff;
    font-weight: 800;
}

.maint-amount-free {
    font-size: 1.5rem;
    color: #22c55e;
    font-weight: 800;
}

.maint-period {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.maint-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.maint-specs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1rem;
}

.maint-specs-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Customer Acknowledgements Card */
.customer-acknowledgements-card {
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98));
    border: 1px solid rgba(197, 155, 39, 0.3);
    border-radius: 18px;
    padding: 2.5rem;
    margin-bottom: 3.5rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.ack-header {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 2rem;
    align-items: flex-start;
}

.ack-icon {
    font-size: 2.4rem;
    flex-shrink: 0;
}

.ack-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

.ack-subtitle {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

.ack-checkboxes-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ack-checkbox-label {
    display: flex;
    gap: 1.25rem;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ack-checkbox-label:hover {
    border-color: rgba(197, 155, 39, 0.35);
    background: rgba(18, 18, 18, 0.8);
}

.ack-checkbox {
    width: 22px;
    height: 22px;
    accent-color: #c59b27;
    margin-top: 0.2rem;
    flex-shrink: 0;
    cursor: pointer;
}

.ack-text-wrap {
    flex-grow: 1;
}

.ack-text-title {
    font-size: 1rem;
    color: #ffffff;
    display: block;
    margin-bottom: 0.35rem;
}

.ack-text-desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin: 0;
}

.policy-link {
    color: #c59b27;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.policy-link:hover {
    color: #ffd700;
}

.ack-validation-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #fef08a;
}

/* Sticky Action Bar for Step 13 */
.step13-summary-action-bar {
    position: sticky;
    bottom: 1.5rem;
    z-index: 90;
    background: rgba(15, 15, 15, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: 16px;
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
}

.summary-status-col {
    text-align: center;
}

.summary-status-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.summary-status-badge {
    font-size: 1.15rem;
    font-weight: 800;
    color: #c59b27;
}

.summary-status-badge.is-complete {
    color: #22c55e;
}

.summary-status-note {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Step 14 Transition Section */
.step14-transition-section {
    padding: 4rem 1rem;
    text-align: center;
    animation: fadeInSlide 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Responsive Overrides */
@media (max-width: 1200px) {
    .scope-highlights-ribbon {
        grid-template-columns: repeat(2, 1fr);
    }

    .maintenance-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .ownership-details-grid {
        grid-template-columns: 1fr;
    }

    .delivery-methods-grid {
        grid-template-columns: 1fr;
    }

    .group-grid-2col {
        grid-template-columns: 1fr;
    }

    .step13-summary-action-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
    }
}

/* ==========================================================================
   STEP 14 — LIVE CART, DYNAMIC PRICING & REQUEST A QUOTE
   ========================================================================== */

.step14-cart-wizard {
    padding: 3.5rem 0 5rem 0;
    position: relative;
    background: radial-gradient(circle at 50% 0%, rgba(197, 155, 39, 0.05) 0%, transparent 60%);
}

/* Progress Bar */
.cart-progress-bar-wrap {
    display: flex;
    justify-content: center;
    margin: 1.75rem auto 2.5rem auto;
    max-width: 960px;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.cart-progress-steps {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(18, 19, 28, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    backdrop-filter: blur(12px);
}

.p-step {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.p-step.is-complete {
    color: #4ade80;
}

.p-step.is-active {
    color: var(--color-gold-400);
    text-shadow: 0 0 10px rgba(197, 155, 39, 0.5);
}

.p-step.is-future {
    color: #4b5563;
}

/* Quote Required Alert Banner */
.cart-quote-alert-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, rgba(20, 21, 31, 0.95) 100%);
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-radius: var(--radius-xl);
    padding: 1.5rem 2rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.cart-quote-alert-banner .alert-icon-box {
    font-size: 2.25rem;
    flex-shrink: 0;
}

.cart-quote-alert-banner .alert-content-box {
    flex: 1;
}

.cart-quote-alert-banner .alert-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fef08a;
    margin-bottom: 0.35rem;
}

.cart-quote-alert-banner .alert-desc {
    font-size: 0.95rem;
    color: #d1d5db;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.quote-reasons-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.quote-reason-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 9999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    color: #f3f4f6;
}

.btn-quote-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-quote-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.4);
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Loading Overlay */
.cart-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 11, 18, 0.75);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-loading-spinner {
    background: rgba(20, 21, 31, 0.95);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-xl);
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--color-gold-400);
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.cart-loading-spinner i {
    font-size: 2.5rem;
}

/* Cart Grid Layout */
.cart-layout-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 2.25rem;
    align-items: start;
    margin-bottom: 3.5rem;
}

/* Left Column */
.cart-items-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cart-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(17, 18, 27, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 1rem 1.4rem;
}

.cart-col-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.cart-col-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.cart-count-pill {
    background: rgba(197, 155, 39, 0.15);
    border: 1px solid rgba(197, 155, 39, 0.3);
    color: var(--color-gold-400);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.7rem;
    border-radius: 9999px;
}

.btn-cart-toggle-all {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-cart-toggle-all:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}

/* Cart Group Card */
.cart-groups-container {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.cart-group-card {
    background: linear-gradient(135deg, rgba(20, 22, 33, 0.85) 0%, rgba(14, 15, 24, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.cart-group-card:hover {
    border-color: rgba(197, 155, 39, 0.25);
}

.group-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.group-header-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.group-info-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.group-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(197, 155, 39, 0.1);
    border: 1px solid rgba(197, 155, 39, 0.3);
    color: var(--color-gold-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.group-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.group-name-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.group-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.pill-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    letter-spacing: 0.03em;
}

.pill-mandatory {
    background: rgba(234, 179, 8, 0.15);
    color: #fef08a;
    border: 1px solid rgba(234, 179, 8, 0.35);
}

.pill-optional {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.group-meta-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.group-actions-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-group-nav-edit {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-gold-400);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-group-nav-edit:hover {
    background: rgba(197, 155, 39, 0.15);
    border-color: var(--color-border-gold);
    color: #ffffff;
}

.chevron-indicator {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.cart-group-card.is-expanded .chevron-indicator {
    transform: rotate(180deg);
}

.cart-group-card:not(.is-expanded) .group-items-body {
    display: none;
}

/* Group Body & Line Items */
.group-items-body {
    padding: 0.5rem 0;
}

.line-items-table {
    display: flex;
    flex-direction: column;
}

.line-item-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.95rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}

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

.line-item-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.line-item-row.row-quote-req {
    background: rgba(234, 179, 8, 0.03);
}

.item-main-details {
    flex: 1;
}

.item-name-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.item-name-heading strong {
    font-size: 0.95rem;
    color: #f3f4f6;
    font-weight: 600;
}

.item-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.tag-included {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.tag-quote {
    background: rgba(234, 179, 8, 0.15);
    color: #fef08a;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.tag-optional {
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.tag-recurring {
    background: rgba(168, 85, 247, 0.15);
    color: #d8b4fe;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.item-short-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 0.4rem 0;
    line-height: 1.45;
}

.item-meta-row {
    display: flex;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: #9ca3af;
}

.item-qty-badge {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.item-price-col {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 110px;
    flex-shrink: 0;
}

.price-val {
    font-size: 1.05rem;
    font-weight: 700;
}

.price-val.text-free {
    color: #4ade80;
    font-size: 0.92rem;
}

.price-val.text-quote {
    color: #fef08a;
    font-size: 0.92rem;
    font-style: italic;
}

.period-subtext {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Empty State */
.cart-empty-state {
    text-align: center;
    padding: 3.5rem 2rem;
    background: rgba(17, 18, 27, 0.7);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xl);
}

.empty-icon {
    font-size: 3rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.btn-gold-empty {
    margin-top: 1.5rem;
    background: var(--color-gold-500);
    color: #0b0c10;
    font-weight: 700;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
}

/* Right Column: Pricing Summary Card */
.pricing-summary-card {
    position: sticky;
    top: 5.5rem;
    background: linear-gradient(135deg, rgba(20, 22, 33, 0.95) 0%, rgba(13, 14, 22, 0.98) 100%);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-2xl);
    padding: 1.75rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
}

.summary-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1.25rem;
}

.card-icon-pill {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(197, 155, 39, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.card-header-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.card-header-sub {
    font-size: 0.78rem;
    color: var(--color-gold-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Promo Code Box */
.promo-box-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.promo-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 0.5rem;
}

.promo-input-group {
    display: flex;
    gap: 0.5rem;
}

.form-control-promo {
    flex: 1;
    background: rgba(10, 11, 18, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    outline: none;
    transition: border-color 0.2s;
}

.form-control-promo:focus {
    border-color: var(--color-gold-400);
}

.btn-apply-promo {
    background: linear-gradient(135deg, var(--color-gold-500) 0%, var(--color-gold-600) 100%);
    color: #0b0c10;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0 1.25rem;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-apply-promo:hover {
    box-shadow: 0 4px 12px rgba(197, 155, 39, 0.35);
}

.btn-remove-promo {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    border-radius: var(--radius-md);
    padding: 0 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-remove-promo:hover {
    background: rgba(239, 68, 68, 0.3);
}

.promo-status-msg {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.4;
}

.promo-valid {
    color: #4ade80;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.promo-invalid {
    color: #f87171;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.promo-hint-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.hint-text {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.btn-quick-code {
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    color: var(--color-gold-400);
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-quick-code:hover {
    background: rgba(197, 155, 39, 0.15);
    border-color: var(--color-gold-400);
}

/* Breakdown List */
.breakdown-lines-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.breakdown-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.92rem;
}

.breakdown-line .line-label {
    color: #d1d5db;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.breakdown-line .line-sublabel {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.breakdown-line .line-value {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.98rem;
    text-align: right;
    white-space: nowrap;
}

.breakdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.35rem 0;
}

.subtotal-line .line-label strong {
    color: #ffffff;
}

.subtotal-line .line-value {
    font-size: 1.05rem;
    color: #f3f4f6;
}

.discount-line .line-label {
    color: #4ade80;
}

.discount-line .line-value {
    color: #4ade80;
}

.tax-line .line-label {
    color: #e5e7eb;
}

/* Total Initial Payable Hero Box */
.total-payable-card {
    background: linear-gradient(135deg, rgba(197, 155, 39, 0.15) 0%, rgba(20, 22, 33, 0.9) 100%);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-xl);
    padding: 1.35rem;
    margin: 0.75rem 0 1.25rem 0;
    text-align: center;
    box-shadow: inset 0 0 20px rgba(197, 155, 39, 0.08);
}

.payable-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.badge-total-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--color-gold-400);
    letter-spacing: 0.08em;
}

.badge-status-lock {
    font-size: 0.75rem;
    color: #9ca3af;
}

.payable-amount-hero {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff 0%, var(--color-gold-300) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0.25rem 0;
}

.payable-disclaimer {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    margin: 0.35rem 0 0 0;
    line-height: 1.4;
}

/* Recurring Renewals Box */
.recurring-renewal-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 0.95rem;
    margin-bottom: 1.25rem;
}

.renewal-box-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #e5e7eb;
    margin-bottom: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.renewal-items-grid {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.8rem;
}

.renewal-item {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-muted);
}

.renewal-item .r-val {
    color: #e5e7eb;
    font-weight: 600;
}

.renewal-notice-text {
    font-size: 0.72rem;
    color: #9ca3af;
    line-height: 1.35;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

/* Summary Bottom Actions */
.summary-bottom-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.btn-continue-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--color-gold-500) 0%, var(--color-gold-600) 100%);
    color: #0b0c10;
    font-size: 1.05rem;
    font-weight: 800;
    padding: 1.1rem;
    border-radius: var(--radius-xl);
    border: none;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 8px 24px rgba(197, 155, 39, 0.35);
    text-align: center;
    width: 100%;
}

.btn-continue-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(197, 155, 39, 0.5);
    background: linear-gradient(135deg, #fcd34d 0%, var(--color-gold-500) 100%);
}

.btn-quote-alt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.8rem;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.btn-quote-alt:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.security-trust-strip {
    display: flex;
    justify-content: space-around;
    font-size: 0.74rem;
    color: #9ca3af;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1rem;
}

/* Quote Modal */
.quote-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 9, 14, 0.85);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: fadeInSlide 300ms ease;
}

.quote-modal-box {
    background: linear-gradient(135deg, #181924 0%, #11121c 100%);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 640px;
    padding: 2.25rem;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.quote-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.quote-modal-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

.quote-modal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.modal-icon-badge {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(197, 155, 39, 0.15);
    color: var(--color-gold-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.quote-modal-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
}

.quote-modal-sub {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.45;
}

.quote-form-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.config-val-display {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(197, 155, 39, 0.2);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-gold-400);
}

.quote-scope-preview-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
}

.preview-box-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #e5e7eb;
    margin-bottom: 0.35rem;
}

.preview-box-text {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
}

.quote-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.btn-quote-cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.75rem 1.4rem;
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.btn-quote-submit {
    background: linear-gradient(135deg, var(--color-gold-500) 0%, var(--color-gold-600) 100%);
    color: #0b0c10;
    font-size: 0.95rem;
    font-weight: 800;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-quote-submit:hover {
    box-shadow: 0 6px 18px rgba(197, 155, 39, 0.4);
}

/* Quote Success State */
.quote-success-state {
    text-align: center;
    padding: 1.5rem 0.5rem;
}

.quote-success-state .success-icon-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
    font-size: 1.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem auto;
}

.quote-success-state .success-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.quote-ref-badge {
    display: inline-block;
    background: rgba(197, 155, 39, 0.15);
    border: 1px solid var(--color-border-gold);
    color: var(--color-gold-400);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
}

.quote-success-state .success-msg {
    font-size: 0.92rem;
    color: #d1d5db;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto 1.5rem auto;
}

.btn-quote-dismiss {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

/* Bottom Navigation Bar */
.cart-nav-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: rgba(17, 18, 27, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 1.25rem 2rem;
    margin-top: 2rem;
}

.cart-sticky-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cart-sticky-info .sticky-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.cart-sticky-info .sticky-price {
    font-size: 1.45rem;
    font-weight: 800;
}

/* Step 15 Transition Section */
.step15-transition-section {
    padding: 4rem 1rem;
    text-align: center;
    animation: fadeInSlide 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Responsive Rules for Step 14 */
@media (max-width: 1024px) {
    .cart-layout-grid {
        grid-template-columns: 1fr;
    }

    .pricing-summary-card {
        position: static;
    }

    .cart-quote-alert-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem;
    }

    .btn-quote-trigger {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .form-row-2col {
        grid-template-columns: 1fr;
    }

    .cart-nav-bottom-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
    }

    .cart-sticky-info {
        justify-content: space-between;
    }

    .line-item-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .item-price-col {
        text-align: left;
        align-items: flex-start;
    }
}

/* ==========================================================================
   STEP 15 — CUSTOMER DETAILS, SECURE PAYMENT & ORDER CONFIRMATION
   ========================================================================== */

.step15-checkout-wizard {
    padding: 3.5rem 0 5rem 0;
    position: relative;
    background: radial-gradient(circle at 50% 0%, rgba(197, 155, 39, 0.06) 0%, transparent 60%);
}

.checkout-layout-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 2.25rem;
    align-items: start;
    margin-bottom: 3.5rem;
}

.checkout-form-column {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.checkout-card {
    background: linear-gradient(135deg, rgba(20, 22, 33, 0.9) 0%, rgba(13, 14, 22, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    transition: border-color 0.25s;
}

.checkout-card:hover {
    border-color: rgba(197, 155, 39, 0.3);
}

.card-title-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

.card-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(197, 155, 39, 0.12);
    border: 1px solid rgba(197, 155, 39, 0.3);
    color: var(--color-gold-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.card-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0.2rem 0 0 0;
}

.btn-review-edit {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-gold-400);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-review-edit:hover {
    background: rgba(197, 155, 39, 0.15);
    border-color: var(--color-border-gold);
    color: #ffffff;
}

/* Customer Form Grid */
.customer-form-grid {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-row-4col {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 0.9fr 0.9fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.field-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: #e5e7eb;
}

.form-input, .form-select {
    width: 100%;
    background: rgba(10, 11, 18, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    color: #ffffff;
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
}

.form-input:focus, .form-select:focus {
    border-color: var(--color-gold-400);
    box-shadow: 0 0 10px rgba(197, 155, 39, 0.25);
}

.form-input.is-invalid {
    border-color: #f87171;
    background: rgba(239, 68, 68, 0.05);
}

.field-error {
    font-size: 0.78rem;
    color: #f87171;
    min-height: 1rem;
}

.checkbox-inline-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.checkbox-inline-row input[type="checkbox"] {
    accent-color: var(--color-gold-400);
    cursor: pointer;
}

/* Review Tiles Grid */
.checkout-review-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.review-tile {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tile-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.tile-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
}

/* Contractual Agreements Checklist */
.consents-checklist {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.consent-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    transition: background 0.15s;
}

.consent-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.consent-item.consent-optional {
    opacity: 0.9;
    border-style: dashed;
}

.consent-cb {
    width: 20px;
    height: 20px;
    margin-top: 0.2rem;
    accent-color: var(--color-gold-400);
    cursor: pointer;
    flex-shrink: 0;
}

.consent-label {
    font-size: 0.88rem;
    color: #e5e7eb;
    line-height: 1.45;
    cursor: pointer;
}

.consent-label a {
    color: var(--color-gold-400);
    text-decoration: underline;
}

.consent-subtext {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

.consent-validation-alert {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-lg);
    font-size: 0.88rem;
    font-weight: 600;
    margin-top: 1rem;
}

/* Right Column: Sticky Checkout Sidebar */
.checkout-sidebar-column {
    position: sticky;
    top: 5.5rem;
}

.checkout-payment-card {
    background: linear-gradient(135deg, rgba(20, 22, 33, 0.95) 0%, rgba(13, 14, 22, 0.98) 100%);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-2xl);
    padding: 1.85rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
}

.pay-card-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0.35rem 0 0.15rem 0;
}

.pay-card-sub {
    font-size: 0.78rem;
    color: var(--color-gold-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.pay-breakdown-lines {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin: 1.25rem 0;
}

.pay-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
}

.pay-line .val {
    font-weight: 700;
    color: #ffffff;
}

/* Pay Hero Box */
.pay-hero-box {
    background: linear-gradient(135deg, rgba(197, 155, 39, 0.15) 0%, rgba(20, 22, 33, 0.9) 100%);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-xl);
    padding: 1.35rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.hero-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--color-gold-400);
    letter-spacing: 0.08em;
}

.hero-amount {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff 0%, var(--color-gold-300) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0.25rem 0;
}

.hero-subtext {
    display: block;
    font-size: 0.74rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* Razorpay Button */
.btn-pay-razorpay {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--color-gold-500) 0%, var(--color-gold-600) 100%);
    color: #0b0c10;
    font-size: 1.05rem;
    font-weight: 800;
    padding: 1.15rem;
    border-radius: var(--radius-xl);
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(197, 155, 39, 0.4);
    transition: all 0.25s;
    margin-bottom: 1rem;
}

.btn-pay-razorpay:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(197, 155, 39, 0.55);
    background: linear-gradient(135deg, #fcd34d 0%, var(--color-gold-500) 100%);
}

.btn-pay-razorpay:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.razorpay-method-badges {
    display: flex;
    justify-content: space-around;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Unconfigured Gateway Notice */
.gateway-unconfigured-notice {
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.35);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

.gateway-unconfigured-notice .notice-icon {
    font-size: 1.75rem;
    color: #fef08a;
    margin-bottom: 0.5rem;
}

.gateway-unconfigured-notice h4 {
    font-size: 1rem;
    color: #fef08a;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.gateway-unconfigured-notice p {
    font-size: 0.82rem;
    color: #d1d5db;
    line-height: 1.45;
    margin-bottom: 0.5rem;
}

.btn-disabled-gateway {
    width: 100%;
    padding: 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #9ca3af;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: var(--radius-lg);
    cursor: not-allowed;
    margin-top: 0.5rem;
}

/* Support Card */
.checkout-support-card {
    background: rgba(37, 211, 102, 0.08);
    border: 1px solid rgba(37, 211, 102, 0.25);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1rem;
}

.support-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.4rem;
}

.support-header strong {
    font-size: 0.92rem;
    color: #ffffff;
}

.support-header .sub {
    display: block;
    font-size: 0.72rem;
    color: #4ade80;
}

.support-text {
    font-size: 0.8rem;
    color: #cbd5e1;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.btn-support-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #25d366;
    color: #0b0c10;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.65rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: opacity 0.2s;
}

.btn-support-wa:hover {
    opacity: 0.9;
}

.btn-back-to-cart {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-back-to-cart:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   ORDER CONFIRMATION VIEW (Revealed Dynamically on Same Page)
   ========================================================================== */

.order-confirmation-section {
    padding: 1.5rem 0 4rem 0;
    animation: fadeInSlide 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.confirmation-hero-card {
    background: linear-gradient(135deg, rgba(20, 22, 33, 0.98) 0%, rgba(11, 12, 19, 0.99) 100%);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-2xl);
    padding: 3.5rem 2.5rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    max-width: 920px;
    margin: 0 auto;
}

.conf-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    border: 2px solid rgba(34, 197, 94, 0.5);
    color: #4ade80;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    margin: 0 auto 1.5rem auto;
}

.conf-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(197, 155, 39, 0.15);
    border: 1px solid var(--color-border-gold);
    color: var(--color-gold-400);
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.4rem 1.25rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.conf-title {
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 0.65rem;
    letter-spacing: -0.02em;
}

.conf-sub {
    font-size: 1.05rem;
    color: #d1d5db;
    max-width: 680px;
    margin: 0 auto 2rem auto;
    line-height: 1.6;
}

.conf-ref-box {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(197, 155, 39, 0.3);
    border-radius: var(--radius-xl);
    padding: 1.25rem 2rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 2.5rem;
}

.ref-label {
    font-size: 0.75rem;
    color: var(--color-gold-400);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.ref-code {
    font-size: 1.85rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.05em;
}

.ref-tx {
    font-size: 0.8rem;
    color: #9ca3af;
}

.ref-tx code {
    color: #fcd34d;
}

.conf-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    text-align: left;
}

.conf-metric-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.conf-metric-item .m-label {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.conf-metric-item .m-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
}

.conf-metric-item .m-sub {
    font-size: 0.76rem;
    color: #9ca3af;
}

/* Roadmap Box */
.conf-roadmap-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    text-align: left;
    margin-bottom: 2.5rem;
}

.roadmap-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1.25rem;
}

.roadmap-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.r-step {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(197, 155, 39, 0.15);
    border: 1px solid var(--color-border-gold);
    color: var(--color-gold-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
}

.r-step strong {
    font-size: 0.88rem;
    color: #f3f4f6;
    line-height: 1.35;
}

.r-step p {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.45;
}

/* Actions Row */
.conf-actions-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.btn-conf-action {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.75rem;
    border-radius: var(--radius-xl);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.25s;
}

.btn-conf-invoice {
    background: linear-gradient(135deg, var(--color-gold-500) 0%, var(--color-gold-600) 100%);
    color: #0b0c10;
    box-shadow: 0 6px 20px rgba(197, 155, 39, 0.35);
}

.btn-conf-invoice:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(197, 155, 39, 0.5);
}

.btn-conf-track {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.btn-conf-track:hover {
    background: rgba(255, 255, 255, 0.15);
}

.btn-conf-wa {
    background: #25d366;
    color: #0b0c10;
}

.btn-conf-wa:hover {
    background: #20ba5a;
}

/* Responsive Overrides for Step 15 */
@media (max-width: 1024px) {
    .checkout-layout-grid {
        grid-template-columns: 1fr;
    }
    .checkout-sidebar-column {
        position: static;
    }
    .roadmap-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .conf-metrics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .form-row-2col, .form-row-4col {
        grid-template-columns: 1fr;
    }
    .checkout-review-summary-grid {
        grid-template-columns: 1fr;
    }
    .roadmap-steps-grid {
        grid-template-columns: 1fr;
    }
    .conf-actions-row {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-conf-action {
        justify-content: center;
    }
}