/* ═══════════════════════════════════════════════════════════════  
   SUNRISE PREMIUM QUOTE FORM V5 - ENTERPRISE EDITION  
   Ultra-luxury B2B packaging quote form with advanced animations  
   ═══════════════════════════════════════════════════════════════ */  

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600;700&family=Bebas+Neue&display=swap');  

/* ═══════════════════════════════════════════════════════════════  
   RESET & BASE  
   ═══════════════════════════════════════════════════════════════ */  
* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  

:root {  
    --primary: #FF6B35;  
    --primary-dark: #E85A2A;  
    --primary-light: #FF8A52;  
    --secondary: #2D3748;  
    --accent: #FFB385;  
    --success: #10B981;  
    --background: #0F1419;  
    --surface: #1A1F2E;  
    --text-primary: #1C2127;  
    --text-secondary: #718096;  
    --border: #E2E8F0;  
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);  
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);  
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);  
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.16);  
    --gradient-primary: linear-gradient(135deg, #FF6B35 0%, #FF8A52 50%, #FFB385 100%);  
    --gradient-dark: linear-gradient(135deg, #1A1F2E 0%, #2D3748 100%);  
    --gradient-light: linear-gradient(180deg, #FFFFFF 0%, #FFF9F6 100%);  
}  

html {  
    scroll-behavior: smooth;  
}  

body {  
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;  
    -webkit-font-smoothing: antialiased;  
    -moz-osx-font-smoothing: grayscale;  
    overflow-x: hidden;  
}  

/* ═══════════════════════════════════════════════════════════════  
   ANIMATED BACKGROUND  
   ═══════════════════════════════════════════════════════════════ */  
.sunrise-premium-wrapper {  
    position: relative;  
    min-height: 100vh;  
    background: linear-gradient(135deg,   
        #0F1419 0%,   
        #1A1F2E 25%,   
        #2D3748 50%,  
        #1A1F2E 75%,  
        #0F1419 100%  
    );  
    background-size: 400% 400%;  
    animation: gradientShift 20s ease infinite;  
    padding: 60px 20px;  
    overflow: hidden;  
}  

@keyframes gradientShift {  
    0%, 100% { background-position: 0% 50%; }  
    50% { background-position: 100% 50%; }  
}  

/* Floating Shapes */  
.bg-animation {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    pointer-events: none;  
    z-index: 0;  
}  

.floating-shape {  
    position: absolute;  
    border-radius: 50%;  
    opacity: 0.03;  
    animation: float 20s infinite ease-in-out;  
}  

.shape-1 {  
    width: 400px;  
    height: 400px;  
    background: var(--gradient-primary);  
    top: -200px;  
    left: -200px;  
    animation-delay: 0s;  
}  

.shape-2 {  
    width: 300px;  
    height: 300px;  
    background: var(--gradient-primary);  
    bottom: -150px;  
    right: -150px;  
    animation-delay: 7s;  
}  

.shape-3 {  
    width: 250px;  
    height: 250px;  
    background: var(--gradient-primary);  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    animation-delay: 14s;  
}  

@keyframes float {  
    0%, 100% {  
        transform: translate(0, 0) rotate(0deg) scale(1);  
    }  
    33% {  
        transform: translate(30px, -30px) rotate(120deg) scale(1.1);  
    }  
    66% {  
        transform: translate(-20px, 20px) rotate(240deg) scale(0.9);  
    }  
}  

/* Gradient Orbs */  
.gradient-orb {  
    position: absolute;  
    border-radius: 50%;  
    filter: blur(80px);  
    opacity: 0.15;  
    animation: pulse 8s infinite ease-in-out;  
}  

.orb-1 {  
    width: 500px;  
    height: 500px;  
    background: radial-gradient(circle, #FF6B35 0%, transparent 70%);  
    top: 10%;  
    right: 10%;  
    animation-delay: 0s;  
}  

.orb-2 {  
    width: 400px;  
    height: 400px;  
    background: radial-gradient(circle, #FFB385 0%, transparent 70%);  
    bottom: 15%;  
    left: 15%;  
    animation-delay: 4s;  
}  

@keyframes pulse {  
    0%, 100% {  
        transform: scale(1);  
        opacity: 0.15;  
    }  
    50% {  
        transform: scale(1.2);  
        opacity: 0.25;  
    }  
}  

/* ═══════════════════════════════════════════════════════════════  
   MAIN CONTAINER  
   ═══════════════════════════════════════════════════════════════ */  
.sunrise-container {  
    position: relative;  
    z-index: 10;  
    max-width: 1400px;  
    margin: 0 auto;  
    display: grid;  
    grid-template-columns: 1fr 320px;  
    gap: 40px;  
    animation: containerFadeIn 1s ease-out;  
}  

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

/* ═══════════════════════════════════════════════════════════════  
   PREMIUM HEADER  
   ═══════════════════════════════════════════════════════════════ */  
.premium-header {  
    background: var(--gradient-light);  
    backdrop-filter: blur(20px) saturate(180%);  
    -webkit-backdrop-filter: blur(20px) saturate(180%);  
    border: 1px solid rgba(255, 255, 255, 0.18);  
    border-radius: 32px 32px 0 0;  
    padding: 60px 50px;  
    box-shadow: var(--shadow-xl);  
    position: relative;  
    overflow: hidden;  
    grid-column: 1 / -1;  
}  

.premium-header::before {  
    content: '';  
    position: absolute;  
    top: 0;  
    left: 0;  
    right: 0;  
    height: 6px;  
    background: var(--gradient-primary);  
}  

.premium-header::after {  
    content: '';  
    position: absolute;  
    top: 0;  
    right: 0;  
    width: 400px;  
    height: 400px;  
    background: radial-gradient(circle, rgba(255,107,53,0.08) 0%, transparent 70%);  
    border-radius: 50%;  
    transform: translate(30%, -30%);  
    pointer-events: none;  
}  

/* Logo Section */  
.logo-section {  
    margin-bottom: 40px;  
}  

.logo-wrapper {  
    display: flex;  
    align-items: center;  
    gap: 20px;  
}  

.logo-icon {  
    width: 80px;  
    height: 80px;  
    background: var(--gradient-primary);  
    border-radius: 20px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 40px;  
    color: white;  
    box-shadow: 0 15px 40px rgba(255,107,53,0.3);  
    animation: logoFloat 3s ease-in-out infinite;  
}  

@keyframes logoFloat {  
    0%, 100% { transform: translateY(0); }  
    50% { transform: translateY(-10px); }  
}  

.logo-text h1 {  
    font-family: 'Bebas Neue', sans-serif;  
    font-size: 48px;  
    letter-spacing: 4px;  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
    margin-bottom: 4px;  
}  

.logo-text span {  
    font-size: 14px;  
    font-weight: 500;  
    color: var(--text-secondary);  
    text-transform: uppercase;  
    letter-spacing: 2px;  
}  

/* Header Content */  
.header-content {  
    text-align: center;  
    margin-bottom: 50px;  
}  

.main-title {  
    font-family: 'Playfair Display', serif;  
    font-weight: 900;  
    line-height: 1.1;  
    margin-bottom: 20px;  
}  

.title-line-1 {  
    display: block;  
    font-size: clamp(2.5rem, 5vw, 4rem);  
    color: var(--text-primary);  
    animation: slideInLeft 0.8s ease-out 0.2s both;  
}  

.title-line-2 {  
    display: block;  
    font-size: clamp(3rem, 6vw, 5rem);  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
    animation: slideInRight 0.8s ease-out 0.4s both;  
}  

@keyframes slideInLeft {  
    from {  
        opacity: 0;  
        transform: translateX(-50px);  
    }  
    to {  
        opacity: 1;  
        transform: translateX(0);  
    }  
}  

@keyframes slideInRight {  
    from {  
        opacity: 0;  
        transform: translateX(50px);  
    }  
    to {  
        opacity: 1;  
        transform: translateX(0);  
    }  
}  

.header-subtitle {  
    font-size: 18px;  
    font-weight: 500;  
    color: var(--text-secondary);  
    animation: fadeInUp 0.8s ease-out 0.6s both;  
}  

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

/* Trust Badges */  
.trust-badges {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  
    gap: 24px;  
}  

.badge-item {  
    display: flex;  
    align-items: center;  
    gap: 16px;  
    padding: 20px;  
    background: rgba(255, 255, 255, 0.6);  
    backdrop-filter: blur(10px);  
    border: 1px solid rgba(255, 107, 53, 0.1);  
    border-radius: 16px;  
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);  
    animation: fadeInUp 0.8s ease-out both;  
}  

.badge-item:nth-child(1) { animation-delay: 0.8s; }  
.badge-item:nth-child(2) { animation-delay: 1s; }  
.badge-item:nth-child(3) { animation-delay: 1.2s; }  

.badge-item:hover {  
    transform: translateY(-5px);  
    background: rgba(255, 255, 255, 0.9);  
    border-color: var(--primary);  
    box-shadow: var(--shadow-lg);  
}  

.badge-icon {  
    width: 56px;  
    height: 56px;  
    background: linear-gradient(135deg, #FFF5F0 0%, #FFE8DB 100%);  
    border-radius: 12px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 28px;  
    color: var(--primary);  
    flex-shrink: 0;  
    transition: transform 0.3s ease;  
}  

.badge-item:hover .badge-icon {  
    transform: scale(1.1) rotate(5deg);  
}  

.badge-text strong {  
    display: block;  
    font-size: 20px;  
    font-weight: 700;  
    color: var(--text-primary);  
    margin-bottom: 4px;  
}  

.badge-text span {  
    font-size: 13px;  
    color: var(--text-secondary);  
    font-weight: 500;  
}  

/* ═══════════════════════════════════════════════════════════════  
   PROGRESS BAR  
   ═══════════════════════════════════════════════════════════════ */  
.form-progress {  
    background: var(--gradient-light);  
    backdrop-filter: blur(20px);  
    border-left: 1px solid rgba(255, 255, 255, 0.18);  
    border-right: 1px solid rgba(255, 255, 255, 0.18);  
    padding: 40px 50px;  
    grid-column: 1 / -1;  
}  

.progress-bar {  
    height: 8px;  
    background: rgba(226, 232, 240, 0.5);  
    border-radius: 10px;  
    margin-bottom: 32px;  
    overflow: hidden;  
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);  
}  

.progress-fill {  
    height: 100%;  
    background: var(--gradient-primary);  
    border-radius: 10px;  
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);  
    box-shadow: 0 0 20px rgba(255,107,53,0.4);  
    position: relative;  
}  

.progress-fill::after {  
    content: '';  
    position: absolute;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);  
    animation: shimmer 2s infinite;  
}  

@keyframes shimmer {  
    0% { transform: translateX(-100%); }  
    100% { transform: translateX(100%); }  
}  

.progress-steps {  
    display: grid;  
    grid-template-columns: repeat(4, 1fr);  
    gap: 16px;  
}  

.step {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    gap: 12px;  
    cursor: pointer;  
    transition: all 0.3s ease;  
}  

.step-number {  
    width: 56px;  
    height: 56px;  
    border-radius: 50%;  
    background: rgba(226, 232, 240, 0.5);  
    color: var(--text-secondary);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 20px;  
    font-weight: 700;  
    border: 3px solid transparent;  
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);  
}  

.step span {  
    font-size: 14px;  
    font-weight: 600;  
    color: var(--text-secondary);  
    transition: color 0.3s ease;  
}  

.step.active .step-number {  
    background: var(--gradient-primary);  
    color: white;  
    border-color: white;  
    box-shadow: 0 8px 24px rgba(255,107,53,0.3);  
    transform: scale(1.1);  
}  

.step.active span {  
    color: var(--primary);  
}  

.step.completed .step-number {  
    background: var(--success);  
    color: white;  
}  

.step.completed .step-number::after {  
    content: '✓';  
}  

/* ═══════════════════════════════════════════════════════════════  
   FORM STYLING  
   ═══════════════════════════════════════════════════════════════ */  
.premium-quote-form {  
    background: var(--gradient-light);  
    backdrop-filter: blur(20px);  
    border-left: 1px solid rgba(255, 255, 255, 0.18);  
    border-right: 1px solid rgba(255, 255, 255, 0.18);  
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);  
    border-radius: 0 0 32px 32px;  
    padding: 50px;  
    box-shadow: var(--shadow-xl);  
    grid-column: 1;  
}  

/* Form Steps */  
.form-step {  
    display: none;  
    animation: stepFadeIn 0.5s ease-out;  
}  

.form-step.active {  
    display: block;  
}  

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

.step-header {  
    text-align: center;  
    margin-bottom: 48px;  
}  

.step-icon {  
    width: 100px;  
    height: 100px;  
    background: var(--gradient-primary);  
    border-radius: 24px;  
    display: inline-flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 48px;  
    color: white;  
    margin-bottom: 24px;  
    box-shadow: 0 20px 50px rgba(255,107,53,0.3);  
    animation: iconPulse 2s ease-in-out infinite;  
}  

@keyframes iconPulse {  
    0%, 100% {  
        transform: scale(1);  
        box-shadow: 0 20px 50px rgba(255,107,53,0.3);  
    }  
    50% {  
        transform: scale(1.05);  
        box-shadow: 0 25px 60px rgba(255,107,53,0.4);  
    }  
}  

.step-header h3 {  
    font-family: 'Playfair Display', serif;  
    font-size: 32px;  
    font-weight: 700;  
    color: var(--text-primary);  
    margin-bottom: 12px;  
}  

.step-header p {  
    font-size: 16px;  
    color: var(--text-secondary);  
    font-weight: 500;  
}  

/* Form Grid */  
.form-grid.premium {  
    display: grid;  
    grid-template-columns: repeat(2, 1fr);  
    gap: 32px;  
    margin-bottom: 32px;  
}  

/* Floating Label Inputs */  
.input-group.floating {  
    position: relative;  
    margin-bottom: 0;  
}  

.input-group.floating.full-width {  
    grid-column: 1 / -1;  
}  

.input-group.floating input,  
.input-group.floating select,  
.input-group.floating textarea {  
    width: 100%;  
    padding: 20px 20px 20px 56px;  
    border: 2px solid var(--border);  
    border-radius: 16px;  
    font-size: 16px;  
    font-weight: 500;  
    color: var(--text-primary);  
    background: white;  
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  
}  

.input-group.floating input:focus,  
.input-group.floating select:focus,  
.input-group.floating textarea:focus {  
    outline: none;  
    border-color: var(--primary);  
    box-shadow: 0 0 0 4px rgba(255,107,53,0.1);  
    transform: translateY(-2px);  
}  

.input-group.floating label {  
    position: absolute;  
    left: 56px;  
    top: 50%;  
    transform: translateY(-50%);  
    font-size: 16px;  
    font-weight: 500;  
    color: var(--text-secondary);  
    pointer-events: none;  
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  
    background: white;  
    padding: 0 8px;  
}  

.input-group.floating input:focus + label,  
.input-group.floating input:not(:placeholder-shown) + label,  
.input-group.floating select:focus + label,  
.input-group.floating select:valid + label,  
.input-group.floating textarea:focus + label,  
.input-group.floating textarea:not(:placeholder-shown) + label {  
    top: 0;  
    font-size: 13px;  
    color: var(--primary);  
    font-weight: 600;  
}  

.input-group.floating .input-icon {  
    position: absolute;  
    left: 20px;  
    top: 50%;  
    transform: translateY(-50%);  
    font-size: 20px;  
    color: var(--text-secondary);  
    transition: color 0.3s ease;  
}  

.input-group.floating input:focus ~ .input-icon,  
.input-group.floating select:focus ~ .input-icon,  
.input-group.floating textarea:focus ~ .input-icon {  
    color: var(--primary);  
}  

.input-group.floating textarea {  
    min-height: 140px;  
    resize: vertical;  
    padding-top: 24px;  
}  

.required {  
    color: var(--primary);  
    font-weight: 700;  
}  

/* Select Styling */  
.input-group.floating select {  
    appearance: none;  
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");  
    background-repeat: no-repeat;  
    background-position: right 20px center;  
    padding-right: 48px;  
}  

.input-group.floating select:focus {  
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23FF6B35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");  
}  

/* ═══════════════════════════════════════════════════════════════  
   PRODUCT CARDS  
   ═══════════════════════════════════════════════════════════════ */  
.product-selection,  
.design-status-section {  
    margin-bottom: 40px;  
}  

.selection-label {  
    display: block;  
    font-size: 16px;  
    font-weight: 700;  
    color: var(--text-primary);  
    margin-bottom: 20px;  
}  

.product-cards,  
.status-cards {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));  
    gap: 20px;  
}  

.product-card,  
.status-card {  
    position: relative;  
    cursor: pointer;  
}  

.product-card input,  
.status-card input {  
    position: absolute;  
    opacity: 0;  
    pointer-events: none;  
}  

.card-content,  
.status-content {  
    padding: 32px 20px;  
    background: white;  
    border: 3px solid var(--border);  
    border-radius: 20px;  
    text-align: center;  
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);  
}  

.card-content:hover,  
.status-content:hover {  
    transform: translateY(-5px);  
    border-color: var(--accent);  
    box-shadow: var(--shadow-lg);  
}  

.product-card input:checked ~ .card-content,  
.status-card input:checked ~ .status-content {  
    border-color: var(--primary);  
    background: linear-gradient(135deg, #FFF5F0 0%, #FFE8DB 100%);  
    box-shadow: 0 8px 32px rgba(255,107,53,0.2);  
}  

.card-icon,  
.status-content i {  
    font-size: 48px;  
    color: var(--primary);  
    margin-bottom: 16px;  
    display: block;  
    transition: transform 0.3s ease;  
}  

.product-card:hover .card-icon,  
.status-card:hover i {  
    transform: scale(1.1);  
}  

.card-content h4,  
.status-content h4 {  
    font-size: 18px;  
    font-weight: 700;  
    color: var(--text-primary);  
    margin-bottom: 8px;  
}  

.card-content p,  
.status-content p {  
    font-size: 14px;  
    color: var(--text-secondary);  
}  

/* ═══════════════════════════════════════════════════════════════  
   SPECIFICATIONS & OPTIONS  
   ═══════════════════════════════════════════════════════════════ */  
.specifications-section,  
.additional-options {  
    margin-top: 40px;  
}  

.section-subtitle {  
    font-size: 20px;  
    font-weight: 700;  
    color: var(--text-primary);  
    margin-bottom: 24px;  
    padding-left: 16px;  
    border-left: 4px solid var(--primary);  
}  

.options-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));  
    gap: 16px;  
}  

.option-card {  
    position: relative;  
    cursor: pointer;  
}  

.option-card input {  
    position: absolute;  
    opacity: 0;  
    pointer-events: none;  
}  

.option-content {  
    padding: 20px;  
    background: white;  
    border: 2px solid var(--border);  
    border-radius: 16px;  
    text-align: center;  
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    gap: 12px;  
}  

.option-content i {  
    font-size: 32px;  
    color: var(--primary);  
}  

.option-content span {  
    font-size: 14px;  
    font-weight: 600;  
    color: var(--text-primary);  
}  

.option-card:hover .option-content {  
    transform: translateY(-3px);  
    border-color: var(--accent);  
    box-shadow: var(--shadow-md);  
}  

.option-card input:checked ~ .option-content {  
    border-color: var(--primary);  
    background: linear-gradient(135deg, #FFF5F0 0%, #FFE8DB 100%);  
    box-shadow: 0 4px 16px rgba(255,107,53,0.15);  
}  

/* ═══════════════════════════════════════════════════════════════  
   FILE UPLOAD PREMIUM  
   ═══════════════════════════════════════════════════════════════ */  
.premium-upload-section {  
    margin: 40px 0;  
}  

.upload-area {  
    position: relative;  
}  

.upload-area input[type="file"] {  
    position: absolute;  
    opacity: 0;  
    width: 100%;  
    height: 100%;  
    cursor: pointer;  
    z-index: 10;  
}  

.upload-label {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    padding: 60px 40px;  
    background: white;  
    border: 3px dashed var(--border);  
    border-radius: 24px;  
    cursor: pointer;  
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);  
    text-align: center;  
}  

.upload-label:hover {  
    border-color: var(--primary);  
    background: #FFF9F6;  
    transform: translateY(-3px);  
    box-shadow: var(--shadow-lg);  
}  

.upload-icon {  
    font-size: 64px;  
    color: var(--primary);  
    margin-bottom: 24px;  
    animation: uploadFloat 3s ease-in-out infinite;  
}  

@keyframes uploadFloat {  
    0%, 100% { transform: translateY(0); }  
    50% { transform: translateY(-10px); }  
}  

.upload-label h4 {  
    font-size: 20px;  
    font-weight: 700;  
    color: var(--text-primary);  
    margin-bottom: 8px;  
}  

.upload-label p {  
    font-size: 14px;  
    color: var(--text-secondary);  
    margin-bottom: 24px;  
}  

.upload-button {  
    display: inline-flex;  
    align-items: center;  
    gap: 12px;  
    padding: 12px 32px;  
    background: var(--gradient-primary);  
    color: white;  
    border-radius: 12px;  
    font-weight: 600;  
    font-size: 15px;  
    box-shadow: 0 4px 16px rgba(255,107,53,0.3);  
    transition: all 0.3s ease;  
}  

.upload-button:hover {  
    transform: translateY(-2px);  
    box-shadow: 0 8px 24px rgba(255,107,53,0.4);  
}  

.file-preview {  
    margin-top: 24px;  
    display: flex;  
    flex-direction: column;  
    gap: 12px;  
}  

.file-item {  
    display: flex;  
    align-items: center;  
    gap: 16px;  
    padding: 16px 20px;  
    background: white;  
    border: 1px solid var(--border);  
    border-radius: 12px;  
    box-shadow: var(--shadow-sm);  
}  

.file-item i {  
    font-size: 24px;  
    color: var(--primary);  
}  

.file-item span {  
    flex: 1;  
    font-size: 14px;  
    font-weight: 600;  
    color: var(--text-primary);  
}  

.file-size {  
    font-size: 12px !important;  
    color: var(--text-secondary) !important;  
    font-weight: 400 !important;  
}  

/* ═══════════════════════════════════════════════════════════════  
   BRAND COLORS  
   ═══════════════════════════════════════════════════════════════ */  
.brand-colors-section {  
    margin: 40px 0;  
}  

.color-inputs {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  
    gap: 20px;  
}  

.color-input-group {  
    display: flex;  
    flex-direction: column;  
    gap: 12px;  
    padding: 20px;  
    background: white;  
    border: 2px solid var(--border);  
    border-radius: 16px;  
    transition: all 0.3s ease;  
}  

.color-input-group:hover {  
    border-color: var(--primary);  
    box-shadow: var(--shadow-md);  
}  

.color-input-group input[type="color"] {  
    width: 100%;  
    height: 60px;  
    border: none;  
    border-radius: 8px;  
    cursor: pointer;  
}  

.color-input-group input[type="text"] {  
    padding: 10px;  
    border: 1px solid var(--border);  
    border-radius: 8px;  
    text-align: center;  
    font-family: 'Courier New', monospace;  
    font-weight: 600;  
}  

.color-input-group span {  
    text-align: center;  
    font-size: 13px;  
    font-weight: 600;  
    color: var(--text-secondary);  
    text-transform: uppercase;  
    letter-spacing: 0.5px;  
}  

/* ═══════════════════════════════════════════════════════════════  
   CONFIRMATION SUMMARY  
   ═══════════════════════════════════════════════════════════════ */  
.confirmation-summary {  
    display: grid;  
    gap: 24px;  
    margin-bottom: 40px;  
}  

.summary-card {  
    display: flex;  
    gap: 20px;  
    padding: 28px;  
    background: white;  
    border: 2px solid var(--border);  
    border-radius: 20px;  
    box-shadow: var(--shadow-sm);  
    transition: all 0.3s ease;  
}  

.summary-card:hover {  
    border-color: var(--primary);  
    box-shadow: var(--shadow-md);  
    transform: translateY(-2px);  
}  

.summary-icon {  
    width: 64px;  
    height: 64px;  
    background: linear-gradient(135deg, #FFF5F0 0%, #FFE8DB 100%);  
    border-radius: 16px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 32px;  
    color: var(--primary);  
    flex-shrink: 0;  
}  

.summary-content {  
    flex: 1;  
}  

.summary-content h4 {  
    font-size: 18px;  
    font-weight: 700;  
    color: var(--text-primary);  
    margin-bottom: 12px;  
}  

.summary-details p {  
    font-size: 14px;  
    color: var(--text-secondary);  
    margin-bottom: 8px;  
    line-height: 1.6;  
}  

.summary-details strong {  
    color: var(--text-primary);  
    font-weight: 600;  
}  

/* ═══════════════════════════════════════════════════════════════  
   POLICY & PREFERENCES  
   ═══════════════════════════════════════════════════════════════ */  
.preferences-section {  
    margin: 40px 0;  
}  

.policy-agreement {  
    margin: 40px 0;  
    padding: 32px;  
    background: linear-gradient(135deg, #FFF9E6 0%, #FFECB3 100%);  
    border: 2px solid #FFD54F;  
    border-left: 6px solid #FFA000;  
    border-radius: 16px;  
}  

.premium-checkbox {  
    display: flex;  
    align-items: flex-start;  
    gap: 16px;  
    margin-bottom: 20px;  
    cursor: pointer;  
}  

.premium-checkbox:last-child {  
    margin-bottom: 0;  
}  

.premium-checkbox input[type="checkbox"] {  
    position: absolute;  
    opacity: 0;  
    pointer-events: none;  
}  

.checkbox-custom {  
    width: 24px;  
    height: 24px;  
    border: 2px solid #FFB300;  
    border-radius: 6px;  
    background: white;  
    flex-shrink: 0;  
    position: relative;  
    transition: all 0.3s ease;  
}  

.premium-checkbox input:checked ~ .checkbox-custom {  
    background: var(--primary);  
    border-color: var(--primary);  
}  

.premium-checkbox input:checked ~ .checkbox-custom::after {  
    content: '✓';  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    color: white;  
    font-weight: 800;  
    font-size: 16px;  
}  

.checkbox-text {  
    font-size: 15px;  
    line-height: 1.6;  
    color: #E65100;  
    font-weight: 500;  
}  

.checkbox-text a {  
    color: #D93F15;  
    font-weight: 700;  
    text-decoration: underline;  
    transition: color 0.2s ease;  
}  

.checkbox-text a:hover {  
    color: #922B19;  
}  

/* ═══════════════════════════════════════════════════════════════  
   NAVIGATION BUTTONS  
   ═══════════════════════════════════════════════════════════════ */  
.form-navigation {  
    display: flex;  
    justify-content: space-between;  
    gap: 20px;  
    margin-top: 48px;  
    padding-top: 32px;  
    border-top: 2px solid var(--border);  
}  

.btn-nav {  
    display: inline-flex;  
    align-items: center;  
    gap: 12px;  
    padding: 18px 32px;  
    border-radius: 16px;  
    font-size: 16px;  
    font-weight: 700;  
    cursor: pointer;  
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);  
    border: none;  
}  

.btn-prev {  
    background: white;  
    color: var(--text-primary);  
    border: 2px solid var(--border);  
}  

.btn-prev:hover:not(:disabled) {  
    background: #F7FAFC;  
    border-color: var(--primary);  
    transform: translateX(-5px);  
}  

.btn-prev:disabled {  
    opacity: 0.5;  
    cursor: not-allowed;  
}  

.btn-next {  
    background: var(--gradient-primary);  
    color: white;  
    border: none;  
    box-shadow: 0 8px 24px rgba(255,107,53,0.3);  
}  

.btn-next:hover {  
    transform: translateX(5px);  
    box-shadow: 0 12px 32px rgba(255,107,53,0.4);  
}  

.btn-submit {  
    background: var(--gradient-primary);  
    color: white;  
    border: none;  
    padding: 20px 40px;  
    border-radius: 16px;  
    font-size: 18px;  
    font-weight: 700;  
    cursor: pointer;  
    box-shadow: 0 12px 40px rgba(255,107,53,0.4);  
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);  
    display: inline-flex;  
    align-items: center;  
    gap: 16px;  
    margin-left: auto;  
}  

.btn-submit:hover {  
    transform: translateY(-4px);  
    box-shadow: 0 16px 48px rgba(255,107,53,0.5);  
}  

.btn-icon {  
    font-size: 24px;  
    animation: iconBounce 1s ease-in-out infinite;  
}  

@keyframes iconBounce {  
    0%, 100% { transform: translateX(0); }  
    50% { transform: translateX(5px); }  
}  

/* ═══════════════════════════════════════════════════════════════  
   PREMIUM SIDEBAR  
   ═══════════════════════════════════════════════════════════════ */  
.premium-sidebar {  
    grid-column: 2;  
    grid-row: 3 / span 2;  
    display: flex;  
    flex-direction: column;  
    gap: 24px;  
    position: sticky;  
    top: 20px;  
    height: fit-content;  
}  

.sidebar-car