/* =====================================================
   NADEVO ELITE COACHING FORM
   Luxury Premium Design System
   Dark Mode | Glassmorphism | Premium Animations
   Azure Radiance Color Palette - WCAG AA/AAA Compliant

   ENTERPRISE-GRADE RESPONSIVE DESIGN SYSTEM
   Tested across: All iPhones, Samsung Galaxy devices,
   All laptop sizes (13"-17"), and tablets
   ===================================================== */

/* =====================================================
   CSS CUSTOM PROPERTIES - NADEVO DESIGN TOKENS
   ===================================================== */
:root {
    /* ================================================
       AZURE RADIANCE COLOR PALETTE
       WCAG 2.1 AA/AAA Compliant Contrast Ratios
       ================================================ */

    /* Azure Radiance Scale */
    --azure-50: #eff5ff;
    --azure-100: #dbe8fe;
    --azure-200: #bfd7fe;
    --azure-300: #93bbfd;
    --azure-400: #609afa;
    --azure-500: #3b82f6;
    --azure-600: #2570eb;
    --azure-700: #1d64d8;
    --azure-800: #1e55af;
    --azure-900: #1e478a;
    --azure-950: #172e54;

    /* Primary Brand Colors - Azure Radiance */
    --primary-blue: #3b82f6;
    --primary-blue-rgb: 59, 130, 246;
    --primary-blue-light: #609afa;
    --primary-blue-light-rgb: 96, 154, 250;
    --primary-blue-dark: #1d64d8;
    --primary-blue-dark-rgb: 29, 100, 216;
    --primary-accent: #93bbfd;

    /* Legacy variable mapping for compatibility */
    --primary-green: #3b82f6;
    --primary-green-rgb: 59, 130, 246;
    --primary-purple: #1d64d8;
    --primary-purple-rgb: 29, 100, 216;

    /* Gradient Definitions - Azure Radiance */
    --gradient-primary: linear-gradient(135deg, #609afa 0%, #1d64d8 100%);
    --gradient-primary-reverse: linear-gradient(135deg, #1d64d8 0%, #609afa 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(29, 100, 216, 0.1) 100%);
    --gradient-glow: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(29, 100, 216, 0.3) 100%);

    /* Dark Mode Backgrounds - Deep Azure */
    --bg-primary: #0f172a;
    --dark-bg: #0f172a;
    --darker-bg: #0a0f1a;
    --section-bg: #131c31;
    --card-bg: rgba(23, 46, 84, 0.6);
    --card-bg-solid: #172e54;
    --card-bg-hover: rgba(30, 55, 100, 0.7);

    /* Input Backgrounds */
    --input-bg: rgba(59, 130, 246, 0.08);
    --input-bg-hover: rgba(59, 130, 246, 0.12);
    --input-bg-focus: rgba(59, 130, 246, 0.15);

    /* Text Colors - WCAG AAA Compliant */
    --text-light: #ffffff;
    --text-muted: #bfd7fe;
    --text-dimmed: #93bbfd;
    --text-hint: rgba(191, 215, 254, 0.6);

    /* Status Colors */
    --success-green: #10B981;
    --success-green-rgb: 16, 185, 129;
    --error-red: #EF4444;
    --error-red-rgb: 239, 68, 68;
    --warning-amber: #F59E0B;

    /* Border Colors - Azure Accent */
    --border-subtle: rgba(59, 130, 246, 0.1);
    --border-light: rgba(59, 130, 246, 0.2);
    --border-medium: rgba(59, 130, 246, 0.3);
    --border-accent: rgba(59, 130, 246, 0.4);
    --border-accent-hover: rgba(96, 154, 250, 0.6);

    /* Shadow System - Azure Tinted */
    --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.2);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.25);
    --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.3);
    --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.4);
    --shadow-2xl: 0 25px 60px rgba(15, 23, 42, 0.5);

    /* Glow Effects - Azure Radiance */
    --glow-blue: 0 0 30px rgba(59, 130, 246, 0.4);
    --glow-blue-strong: 0 0 50px rgba(59, 130, 246, 0.6);
    --glow-blue-light: 0 0 30px rgba(96, 154, 250, 0.4);
    --glow-gradient: 0 0 40px rgba(59, 130, 246, 0.3), 0 0 80px rgba(29, 100, 216, 0.2);
    --card-glow: 0 0 60px rgba(59, 130, 246, 0.15), 0 0 100px rgba(29, 100, 216, 0.1);

    /* Legacy glow mapping */
    --glow-green: 0 0 30px rgba(59, 130, 246, 0.4);
    --glow-green-strong: 0 0 50px rgba(59, 130, 246, 0.6);
    --glow-purple: 0 0 30px rgba(29, 100, 216, 0.4);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 50%;

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-accent: 'Inter', sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3rem;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Layout */
    --container-max: 1600px;
    --brand-panel-width: 42%;
    --form-panel-width: 58%;
    --header-height: 80px;

    /* Spacing System */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 30px;
    --space-4xl: 40px;
    --space-5xl: 50px;

}

/* =====================================================
   RESET & BASE STYLES
   ===================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    /* Dynamic viewport height for mobile browsers */
    height: 100%;
    height: -webkit-fill-available;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-light);
    background: transparent;
    /* Modern viewport units with fallbacks */
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow-x: hidden;
    /* Safe area insets for notched devices */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Prevent overscroll bounce on iOS */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* =====================================================
   HIDDEN SCROLLBAR - Functional but Invisible
   ===================================================== */
/* Hide scrollbar for Chrome, Safari, Edge, Opera */
*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Hide scrollbar for IE, Edge Legacy */
* {
    -ms-overflow-style: none;
}

/* Hide scrollbar for Firefox */
* {
    scrollbar-width: none;
}

/* Ensure scroll functionality remains */
html,
body,
.form-panel,
.wizard-container,
.form-content,
textarea {
    -webkit-overflow-scrolling: touch;
}

/* =====================================================
   LUXURY BACKGROUND SYSTEM
   ===================================================== */
.luxury-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    background: var(--darker-bg);
    overflow: hidden;
    pointer-events: none;
}

/* Animated Gradient Orbs */
.bg-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}

.orb-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(var(--primary-blue-rgb), 0.35) 0%, transparent 70%);
    top: -250px;
    right: -150px;
    animation: float-orb-1 20s ease-in-out infinite;
}

.orb-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(var(--primary-blue-dark-rgb), 0.3) 0%, transparent 70%);
    bottom: -200px;
    left: -150px;
    animation: float-orb-2 25s ease-in-out infinite;
}

.orb-3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(var(--primary-blue-light-rgb), 0.2) 0%, transparent 70%);
    top: 40%;
    left: 25%;
    animation: float-orb-3 22s ease-in-out infinite;
}

@keyframes float-orb-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(40px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 40px) scale(0.95); }
    75% { transform: translate(30px, 20px) scale(1.02); }
}

@keyframes float-orb-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-30px, 40px) scale(1.03); }
    50% { transform: translate(40px, -20px) scale(0.97); }
    75% { transform: translate(-20px, -30px) scale(1.01); }
}

@keyframes float-orb-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(50px, 30px) scale(1.04); }
    66% { transform: translate(-30px, -40px) scale(0.96); }
}

/* Background Pattern */
.bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.6;
    pointer-events: none;
}

/* Particle Canvas */
.particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
}

/* =====================================================
   MAIN LAYOUT - SPLIT SCREEN (50/50)
   Enterprise-grade responsive grid system
   ===================================================== */
.app-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Modern viewport units with multiple fallbacks */
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    background: transparent;
}

/* =====================================================
   LEFT SIDE - FULL IMAGE PANEL (Card Style)
   ===================================================== */
.image-panel {
    position: relative;
    z-index: 5;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    overflow: hidden;
}

.image-panel::before {
    content: '';
    position: absolute;
    inset: var(--space-3xl);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.hero-image {
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 60px);
    object-fit: cover;
    object-position: top center;
    border-radius: var(--radius-2xl);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    /* Prevent image drag on touch devices */
    -webkit-user-drag: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Coach Identity (Top Right - Premium Style) */
.coach-identity {
    position: absolute;
    top: calc(var(--space-3xl) + var(--space-xl));
    right: calc(var(--space-3xl) + var(--space-xl));
    text-align: left;
    z-index: 10;
}

.identity-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin: 0 0 var(--space-xs) 0;
    line-height: 1.1;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.identity-name .title-accent {
    color: white;
    -webkit-text-fill-color: white;
}

.verified-badge {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.identity-title {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.4;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

.image-overlay {
    position: absolute;
    inset: var(--space-3xl);
    border-radius: var(--radius-2xl);
    border: 3px solid;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.05) 35%, transparent 50%, rgba(0, 0, 0, 0.05) 65%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.85) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-3xl);
    overflow: hidden;
}

.overlay-content {
    color: white;
    text-align: left;
}

/* Coach Info */
.coach-name {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-sm);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.coach-name .title-accent {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coach-title {
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: var(--space-xl);
    white-space: nowrap;
}

/* Feature Badges */
.feature-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.feature-badge {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    transition: var(--transition-base);
}

.feature-badge:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    color: white;
    font-size: 12px;
}

.badge-text {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

/* =====================================================
   RIGHT SIDE - FORM PANEL
   ===================================================== */
.form-panel {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    /* Safe area insets for notched devices */
    padding-top: max(var(--space-3xl), env(safe-area-inset-top));
    padding-bottom: max(var(--space-3xl), env(safe-area-inset-bottom));
    /* Smooth momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    /* GPU acceleration */
    will-change: scroll-position;
}

.form-container {
    width: 100%;
    max-width: 580px;
    /* Ensure form doesn't overflow on small screens */
    min-width: 0;
    /* Ensure form is above background elements */
    position: relative;
    z-index: 5;
}

/* Decorative Divider */
.brand-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

.divider-diamond {
    color: var(--primary-green);
    font-size: 12px;
    opacity: 0.8;
    animation: diamond-pulse 2s ease-in-out infinite;
}

@keyframes diamond-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* =====================================================
   STEP INDICATORS
   ===================================================== */
.step-indicators {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-xl);
    padding: 0 10px;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    cursor: default;
}

.step-circle {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: var(--transition-bounce);
}

.step-icon,
.step-number,
.step-check {
    position: absolute;
    transition: var(--transition-base);
}

.step-icon {
    font-size: 16px;
    color: var(--text-dimmed);
    opacity: 1;
}

.step-number {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dimmed);
    opacity: 0;
}

.step-check {
    font-size: 18px;
    color: white;
    opacity: 0;
    transform: scale(0);
}

.step-label {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dimmed);
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: var(--transition-base);
}

/* Step Connector */
.step-connector {
    position: absolute;
    top: 26px;
    left: calc(50% + 26px);
    width: calc(100% - 52px);
    height: 2px;
    background: var(--border-light);
    z-index: 1;
}

.connector-fill {
    height: 100%;
    width: 0;
    background: var(--gradient-primary);
    transition: width 0.5s ease;
}

.step-indicator:last-child .step-connector {
    display: none;
}

/* Active State */
.step-indicator.active .step-circle {
    background: rgba(var(--primary-green-rgb), 0.15);
    border-color: var(--primary-green);
    box-shadow: var(--glow-green);
    transform: scale(1.1);
}

.step-indicator.active .step-icon {
    color: var(--primary-green);
}

.step-indicator.active .step-label {
    color: var(--primary-green);
}

/* Completed State */
.step-indicator.completed .step-circle {
    background: var(--gradient-primary);
    border-color: transparent;
}

.step-indicator.completed .step-icon {
    opacity: 0;
}

.step-indicator.completed .step-check {
    opacity: 1;
    transform: scale(1);
}

.step-indicator.completed .step-label {
    color: var(--text-muted);
}

.step-indicator.completed .connector-fill {
    width: 100%;
}

/* =====================================================
   WIZARD FORM
   ===================================================== */
.wizard-form {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 30px;
    padding-right: 10px;
}

.form-step {
    display: none;
    animation: stepSlideIn 0.5s ease-out;
}

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

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


/* Form Content */
.form-content {
    display: flex;
    flex-direction: column;
}

/* =====================================================
   FORM ELEMENTS
   ===================================================== */
.form-group {
    position: relative;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.form-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-row .form-group {
    margin-bottom: 0;
}

/* Form Labels */
.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: var(--space-sm);
}

.form-label .required {
    color: var(--primary-green);
    font-weight: 600;
}

/* Input Wrapper */
.input-wrapper,
.select-wrapper,
.textarea-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--text-dimmed);
    font-size: 16px;
    transition: var(--transition-base);
    z-index: 2;
    pointer-events: none;
}

.textarea-wrapper .input-icon {
    top: 18px;
    transform: none;
}

/* Base Input Styles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 16px 20px 16px 48px;
    background: #1e55af;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-light);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    transition: var(--transition-base);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}

/* Webkit browsers (Chrome, Safari, Edge) */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}

/* Firefox */
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}

/* Internet Explorer */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Hover State */
input:hover,
select:hover,
textarea:hover {
    background: var(--input-bg-hover);
}

/* Focus State */
input:focus,
select:focus,
textarea:focus {
    background: var(--input-bg-focus);
    box-shadow: 0 0 0 4px rgba(var(--primary-green-rgb), 0.1);
}

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

.input-wrapper:focus-within .input-icon,
.select-wrapper:focus-within .input-icon,
.textarea-wrapper:focus-within .input-icon {
    color: var(--primary-green);
}

/* Textarea Specific */
textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
    padding-top: 16px;
}

/* Select Specific */
select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 50px;
    background-image: none;
}

/* Select Option Styling for Dark Mode */
select option {
    background: #1e1e28;
    color: #ffffff;
    padding: 12px 16px;
}

select option:hover,
select option:focus,
select option:checked {
    background: rgba(59, 130, 246, 0.2);
    color: #ffffff;
}

/* Placeholder/default option styling */
select option[value=""] {
    color: rgba(255, 255, 255, 0.4);
}

.select-arrow {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--text-dimmed);
    font-size: 12px;
    pointer-events: none;
    transition: var(--transition-base);
}

.select-wrapper:focus-within .select-arrow {
    color: var(--primary-green);
    transform: translateY(-50%) rotate(180deg);
}

/* Error States */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    background: #af1e1e54;
}

.form-group.has-error .input-icon {
    color: var(--error-red);
}

/* Error Message */
.error-message {
    display: block;
    min-height: 20px;
    margin-top: 6px;
    font-size: var(--text-xs);
    color: var(--error-red);
    font-weight: 500;
    opacity: 0;
    transform: translateY(-5px);
    transition: var(--transition-fast);
}

.form-group.has-error .error-message {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   CHECKBOX STYLES
   ===================================================== */

/* Checkbox Label */
.checkbox-label {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    background: var(--input-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
    margin-bottom: 0;
}

.checkbox-label:hover {
    background: var(--input-bg-hover);
    border-color: var(--border-medium);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Hide default inputs */
.checkbox-label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom Checkbox */
.checkbox-custom {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--border-medium);
    border-radius: 6px;
    margin-right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
    background: transparent;
}

.checkbox-custom i {
    font-size: 12px;
    color: white;
    opacity: 0;
    transform: scale(0);
    transition: var(--transition-bounce);
}

/* Checkbox Text */
.checkbox-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 400;
}

/* Selected State */
.checkbox-label:has(input:checked) {
    background: rgba(var(--primary-green-rgb), 0.1);
    border-color: rgba(var(--primary-green-rgb), 0.5);
    box-shadow: 0 0 20px rgba(var(--primary-green-rgb), 0.15);
}

.checkbox-label:has(input:checked) .checkbox-custom {
    background: var(--gradient-primary);
    border-color: transparent;
}

.checkbox-label:has(input:checked) .checkbox-custom i {
    opacity: 1;
    transform: scale(1);
}

.checkbox-label:has(input:checked) .checkbox-text {
    color: var(--text-light);
}

/* Confirmation Checkboxes */
.confirmation-checkbox {
    padding: 18px 20px;
    background: rgba(var(--primary-green-rgb), 0.05);
    border: 1px solid rgba(var(--primary-green-rgb), 0.2);
}

.confirmation-checkbox:hover {
    background: rgba(var(--primary-green-rgb), 0.1);
    border-color: rgba(var(--primary-green-rgb), 0.3);
}

.confirmation-text {
    font-size: var(--text-sm);
    line-height: 1.5;
}

.confirmation-text strong {
    color: var(--text-light);
}

/* =====================================================
   RADIO GROUP STYLES
   ===================================================== */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.radio-label {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    background: var(--input-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
}

.radio-label:hover {
    background: var(--input-bg-hover);
    border-color: var(--border-medium);
}

.radio-label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-custom {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-full);
    margin-right: 14px;
    position: relative;
    transition: var(--transition-base);
    background: transparent;
}

.radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: var(--radius-full);
    transform: translate(-50%, -50%) scale(0);
    transition: var(--transition-bounce);
}

.radio-text {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.radio-label:has(input:checked) {
    background: rgba(var(--primary-green-rgb), 0.1);
    border-color: rgba(var(--primary-green-rgb), 0.5);
}

.radio-label:has(input:checked) .radio-custom {
    background: var(--gradient-primary);
    border-color: transparent;
}

.radio-label:has(input:checked) .radio-custom::after {
    transform: translate(-50%, -50%) scale(1);
}

.radio-label:has(input:checked) .radio-text {
    color: var(--text-light);
}

/* =====================================================
   NAVIGATION BUTTONS
   ===================================================== */
.wizard-nav {
    display: flex;
    gap: var(--space-xl);
    justify-content: space-between;
    margin-top: var(--space-xl);
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition-bounce);
    text-decoration: none;
}

/* Primary Button */
.btn-primary {
    flex: 1;
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 10px 30px rgba(var(--primary-green-rgb), 0.3);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 40px rgba(var(--primary-green-rgb), 0.4);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(-1px) scale(1);
}

/* Secondary Button */
.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid var(--border-light);
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    border-color: var(--border-medium);
    transform: translateY(-2px);
}

/* Disabled State */
.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

/* Button Icon */
.btn-icon {
    font-size: 14px;
    transition: var(--transition-base);
}

.btn-primary:hover .btn-icon {
    transform: translateX(3px);
}

.btn-secondary:hover .btn-icon {
    transform: translateX(-3px);
}

/* Button Shine Effect */
.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn:hover .btn-shine {
    left: 100%;
}

/* Button Loader */
.btn-loader {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-ring {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Button Bubbles */
.btn .bubble {
    position: absolute;
    bottom: -10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    pointer-events: none;
}

.btn .bubble-1 {
    width: 12px;
    height: 12px;
    left: 15%;
    animation: bubble-rise 2.5s ease-in infinite 0s;
}

.btn .bubble-2 {
    width: 8px;
    height: 8px;
    left: 45%;
    animation: bubble-rise 3s ease-in infinite 0.5s;
}

.btn .bubble-3 {
    width: 10px;
    height: 10px;
    left: 75%;
    animation: bubble-rise 2.8s ease-in infinite 0.3s;
}

@keyframes bubble-rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-60px) scale(0.3);
        opacity: 0;
    }
}

/* =====================================================
   SUCCESS SCREEN
   ===================================================== */
.success-screen {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.success-screen.hidden {
    display: none;
}

/* Confetti Container */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.success-content {
    position: relative;
    z-index: 2;
}

/* Success Icon */
.success-icon-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
}

.success-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--radius-full);
    border: 2px solid var(--primary-green);
    opacity: 0;
    animation: success-ring-expand 1.5s ease-out forwards;
}

.ring-1 {
    width: 100px;
    height: 100px;
    animation-delay: 0s;
}

.ring-2 {
    width: 130px;
    height: 130px;
    animation-delay: 0.2s;
}

.ring-3 {
    width: 160px;
    height: 160px;
    animation-delay: 0.4s;
}

@keyframes success-ring-expand {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

.success-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glow-green-strong);
    animation: success-icon-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.success-icon i {
    font-size: 36px;
    color: white;
}

@keyframes success-icon-pop {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Success Title */
.success-title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    margin-bottom: 15px;
}

.success-message {
    font-size: var(--text-lg);
    color: var(--text-muted);
    margin-bottom: 10px;
}

.success-submessage {
    font-size: var(--text-base);
    color: var(--text-dimmed);
    margin-bottom: 30px;
}

.success-submessage strong {
    color: var(--primary-green);
}

/* Success Divider */
.success-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

/* Next Steps */
.next-steps {
    margin-bottom: 30px;
}

.next-steps-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 20px;
}

.steps-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.next-step-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: left;
    transition: var(--transition-base);
}

.next-step-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-light);
    transform: translateX(5px);
}

.next-step-item .step-icon-wrapper {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-subtle);
    border-radius: var(--radius-md);
    color: var(--primary-green);
    font-size: 18px;
}

.next-step-item .step-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.next-step-item .step-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-light);
}

.next-step-item .step-desc {
    font-size: var(--text-xs);
    color: var(--text-dimmed);
}

/* Success CTA */
.success-cta {
    margin-bottom: 25px;
}

/* Social Proof */
.success-social-proof {
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
}

.success-social-proof p {
    font-size: var(--text-sm);
    color: var(--text-dimmed);
}

.success-social-proof strong {
    color: var(--primary-green);
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */
.hidden {
    display: none !important;
}

/* =====================================================
   ENTERPRISE-GRADE RESPONSIVE DESIGN SYSTEM

   DEVICE BREAKPOINTS HIERARCHY:
   - 1440px+: Large Desktops (iMac, large external monitors)
   - 1280px-1440px: Standard Desktops & Laptops (MacBook Pro 15/16")
   - 1024px-1280px: Small Laptops (MacBook Air 13", Surface Laptop)
   - 768px-1024px: Tablets Landscape (iPad, Samsung Tab S)
   - 600px-768px: Tablets Portrait & Large Phones Landscape
   - 480px-600px: Large Phones (iPhone Pro Max, Samsung Ultra)
   - 390px-480px: Standard Phones (iPhone 12/13/14/15, Galaxy S21+)
   - 375px-390px: Compact Phones (iPhone 12/13 Mini)
   - 320px-375px: Small Phones (iPhone SE, Galaxy A series)
   ===================================================== */

/* Extra Large Desktops (1440px+) */
@media (min-width: 1440px) {
    .form-container {
        max-width: 620px;
    }

    .form-panel {
        padding: var(--space-4xl);
    }
}

/* Large Laptops (1280px - 1440px) */
@media (max-width: 1440px) {
    .form-container {
        max-width: 580px;
    }
}

/* Standard Laptops (1024px - 1280px) */
@media (max-width: 1280px) {
    .form-panel {
        padding: var(--space-2xl);
    }

    .form-container {
        max-width: 540px;
    }

    .step-circle {
        width: 48px;
        height: 48px;
    }

    .step-connector {
        top: 24px;
        left: calc(50% + 24px);
        width: calc(100% - 48px);
    }
}

/* Small Laptops & Tablets Landscape (768px - 1024px) */
@media (max-width: 1024px) {
    /* Switch to stacked layout */
    .app-container {
        grid-template-columns: 1fr;
        grid-template-rows: 35vh 1fr;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .image-panel {
        height: 35vh;
        height: 35dvh;
        padding: 0;
    }

    .image-panel::before {
        display: none;
    }

    .hero-image {
        max-height: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .image-overlay {
        inset: 0;
        border-radius: 0;
        padding: var(--space-xl);
        padding-bottom: var(--space-2xl);
    }

    .coach-name {
        font-size: var(--text-2xl);
    }

    .coach-title {
        font-size: var(--text-sm);
        margin-bottom: 0;
    }

    .feature-badges {
        display: none;
    }

    .coach-identity {
        display: none;
    }

    .form-panel {
        height: auto;
        min-height: 65vh;
        min-height: 65dvh;
        padding: var(--space-2xl);
        align-items: flex-start;
        padding-top: var(--space-3xl);
    }

    .form-container {
        max-width: 560px;
        margin: 0 auto;
    }

    /* Particle canvas covers full screen */
    .particle-canvas {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }

    .step-indicators {
        padding: 0;
    }

    .step-circle {
        width: 46px;
        height: 46px;
    }

    .step-connector {
        top: 23px;
        left: calc(50% + 23px);
        width: calc(100% - 46px);
    }

    .step-label {
        font-size: 10px;
    }
}

/* Tablets Portrait & Large Phones Landscape (600px - 768px) */
@media (max-width: 768px) {
    .app-container {
        grid-template-rows: 28vh 1fr;
    }

    .image-panel {
        height: 28vh;
        height: 28dvh;
    }

    .coach-name {
        font-size: var(--text-xl);
    }

    .coach-title {
        font-size: var(--text-xs);
    }

    .form-panel {
        padding: var(--space-xl);
        min-height: 72vh;
        min-height: 72dvh;
        padding-top: var(--space-2xl);
        padding-bottom: max(var(--space-2xl), env(safe-area-inset-bottom));
    }

    .form-container {
        max-width: 100%;
    }

    /* Particle canvas covers full screen */
    .particle-canvas {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }

    .step-indicators {
        margin-bottom: var(--space-lg);
    }

    .step-circle {
        width: 42px;
        height: 42px;
    }

    .step-icon {
        font-size: 14px;
    }

    .step-connector {
        top: 21px;
        left: calc(50% + 21px);
        width: calc(100% - 42px);
    }

    .step-label {
        font-size: 9px;
        margin-top: var(--space-sm);
    }

    /* Keep 2-column for form rows on larger tablets */
    .form-row {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    /* 3-column rows become 2-column */
    .form-row-3 {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .form-group {
        margin-bottom: var(--space-sm);
    }

    .wizard-nav {
        gap: var(--space-lg);
        margin-top: var(--space-xl);
    }

    .btn {
        padding: 15px 28px;
        /* Apple HIG: Minimum 44px touch target */
        min-height: 50px;
    }

    .success-title {
        font-size: var(--text-2xl);
    }

    .radio-group {
        gap: 10px;
    }

    .radio-label,
    .checkbox-label {
        padding: 14px 16px;
        /* Apple HIG: Minimum 44px touch target */
        min-height: 48px;
    }
}

/* Large Phones (480px - 600px) - iPhone Pro Max, Samsung Ultra */
@media (max-width: 600px) {
    .app-container {
        grid-template-rows: 26vh 1fr;
    }

    .image-panel {
        height: 26vh;
        height: 26dvh;
    }

    .image-overlay {
        padding: var(--space-lg);
    }

    /* Mobile: Hide overlay-content, show coach-identity instead */
    .overlay-content {
        display: none;
    }

    .coach-identity {
        display: block !important;
        position: absolute;
        top: auto;
        bottom: var(--space-md);
        left: var(--space-md);
        right: auto;
        text-align: left;
    }

    .form-panel {
        padding: var(--space-lg);
        min-height: 74vh;
        min-height: 74dvh;
    }

    .particle-canvas {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }

    /* Mobile: Make form-content a grid to control all items */
    .form-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--space-md);
    }

    /* Flatten row containers so children become direct grid items */
    .form-row,
    .form-row-3 {
        display: contents;
    }

    /* First Name - left column, order 1 */
    #firstName-group {
        grid-column: 1;
        order: 1;
    }

    /* Last Name - right column, order 2 */
    #lastName-group {
        grid-column: 2;
        order: 2;
    }

    /* Age - left column, order 3 */
    #age-group {
        grid-column: 1;
        order: 3;
    }

    /* City - right column next to Age, order 4 */
    #city-group {
        grid-column: 2;
        order: 4;
    }

    /* Email - full width, order 5 */
    .form-group:has(#email) {
        grid-column: 1 / -1;
        order: 5;
    }

    /* WhatsApp - full width, order 6 */
    .form-group:has(#whatsapp) {
        grid-column: 1 / -1;
        order: 6;
    }

    /* Current Status - full width, order 7 */
    .form-group:has(#currentStatus) {
        grid-column: 1 / -1;
        order: 7;
    }

    /* Coding Experience - full width, order 8 */
    .form-group:has(#experience) {
        grid-column: 1 / -1;
        order: 8;
    }

    /* Step 2 & 3: All form groups full width */
    .form-step[data-step="2"] .form-group,
    .form-step[data-step="3"] .form-group {
        grid-column: 1 / -1;
    }

    .wizard-nav {
        flex-direction: column-reverse;
        gap: 12px;
        margin-top: var(--space-lg);
    }

    .btn {
        width: 100%;
        padding: 16px 24px;
        min-height: 52px;
    }

    .step-circle {
        width: 40px;
        height: 40px;
    }

    .step-connector {
        top: 20px;
        left: calc(50% + 20px);
        width: calc(100% - 40px);
    }

    .step-label {
        font-size: 8px;
    }
}

/* Standard Phones (390px - 480px) - iPhone 12/13/14/15, Galaxy S21+ */
@media (max-width: 480px) {
    .app-container {
        grid-template-rows: 30vh 1fr;
        grid-template-rows: 30dvh 1fr;
    }

    .image-panel {
        height: 30vh;
        height: 30dvh;
    }

    .image-overlay {
        padding: var(--space-md) var(--space-lg);
    }

    .coach-name {
        font-size: var(--text-lg);
    }

    .coach-title {
        font-size: 11px;
        line-height: 1.4;
    }

    .form-panel {
        padding-top: 60px;
        padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
        min-height: 70vh;
        min-height: 70dvh;
    }

    .particle-canvas {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }

    .step-circle {
        width: 38px;
        height: 38px;
    }

    .step-icon {
        font-size: 13px;
    }

    .step-check {
        font-size: 14px;
    }

    .step-connector {
        top: 19px;
        left: calc(50% + 19px);
        width: calc(100% - 38px);
    }

    .step-label {
        display: block;
        font-size: 7px;
    }

    .step-indicators {
        margin-bottom: var(--space-lg);
    }

    /* Optimized input sizing for mobile */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select,
    textarea {
        padding: 14px 16px 14px 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
        min-height: 50px;
    }

    .input-icon {
        left: 14px;
        font-size: 15px;
    }

    .select-arrow {
        right: 14px;
    }

    .form-label {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .checkbox-label {
        padding: 14px 16px;
        min-height: 52px;
    }

    .checkbox-custom {
        width: 22px;
        height: 22px;
        min-width: 22px;
        margin-right: 12px;
    }

    .radio-label {
        padding: 14px 16px;
        min-height: 52px;
    }

    .radio-custom {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }

    .next-step-item {
        padding: 16px;
    }

    .next-step-item .step-icon-wrapper {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 18px;
    }

    .success-icon-wrapper {
        width: 90px;
        height: 90px;
    }

    .success-icon {
        width: 72px;
        height: 72px;
    }

    .success-icon i {
        font-size: 32px;
    }

    .ring-1 { width: 90px; height: 90px; }
    .ring-2 { width: 115px; height: 115px; }
    .ring-3 { width: 140px; height: 140px; }
}

/* Compact Phones (375px - 390px) - iPhone 12/13/14 Mini, iPhone SE 3 */
@media (max-width: 390px) {
    .app-container {
        grid-template-rows: 24vh 1fr;
    }

    .image-panel {
        height: 24vh;
        height: 24dvh;
    }

    .form-panel {
        padding: var(--space-md);
        padding-top: var(--space-lg);
        min-height: 76vh;
        min-height: 76dvh;
    }

    .particle-canvas {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }

    .coach-name {
        font-size: var(--text-base);
    }

    .coach-title {
        font-size: 10px;
    }

    .step-circle {
        width: 36px;
        height: 36px;
    }

    .step-icon {
        font-size: 12px;
    }

    .step-connector {
        top: 18px;
        left: calc(50% + 18px);
        width: calc(100% - 36px);
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select,
    textarea {
        padding: 12px 14px 12px 42px;
    }

    .input-icon {
        left: 12px;
        font-size: 14px;
    }

    .btn {
        padding: 14px 20px;
        font-size: 14px;
    }

    .wizard-nav {
        gap: 10px;
    }

    .success-title {
        font-size: 1.75rem;
    }

    .success-message {
        font-size: var(--text-base);
    }

    .next-steps-title {
        font-size: var(--text-base);
    }
}

/* Small Phones (320px - 375px) - iPhone SE 1/2, Galaxy A series small */
@media (max-width: 375px) {
    .app-container {
        grid-template-rows: 22vh 1fr;
    }

    .image-panel {
        height: 22vh;
        height: 22dvh;
    }

    .image-overlay {
        padding: var(--space-sm) var(--space-md);
    }

    .coach-name {
        font-size: 15px;
    }

    .coach-title {
        font-size: 9px;
    }

    .form-panel {
        padding: var(--space-sm) var(--space-md);
        padding-top: var(--space-md);
        padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
        min-height: 78vh;
        min-height: 78dvh;
    }

    .particle-canvas {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }

    .step-circle {
        width: 32px;
        height: 32px;
    }

    .step-icon {
        font-size: 11px;
    }

    .step-check {
        font-size: 12px;
    }

    .step-connector {
        top: 16px;
        left: calc(50% + 16px);
        width: calc(100% - 32px);
    }

    .form-label {
        font-size: 12px;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select,
    textarea {
        padding: 12px 12px 12px 38px;
        font-size: 16px; /* Prevents iOS zoom */
    }

    .input-icon {
        left: 10px;
        font-size: 13px;
    }

    .checkbox-label,
    .radio-label {
        padding: 12px 14px;
    }

    .checkbox-custom,
    .radio-custom {
        width: 20px;
        height: 20px;
        min-width: 20px;
        margin-right: 10px;
    }

    .btn {
        padding: 12px 18px;
        font-size: 13px;
        min-height: 48px;
    }

    .success-icon-wrapper {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }

    .success-icon {
        width: 64px;
        height: 64px;
    }

    .success-icon i {
        font-size: 28px;
    }

    .ring-1 { width: 80px; height: 80px; }
    .ring-2 { width: 100px; height: 100px; }
    .ring-3 { width: 120px; height: 120px; }

    .success-title {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .success-message {
        font-size: 14px;
    }

    .success-submessage {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .next-step-item {
        padding: 12px;
        gap: 12px;
    }

    .next-step-item .step-icon-wrapper {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 14px;
    }

    .next-step-item .step-title {
        font-size: 13px;
    }

    .next-step-item .step-desc {
        font-size: 11px;
    }
}

/* Ultra Small Screens (< 320px) - Legacy devices */
@media (max-width: 320px) {
    .app-container {
        grid-template-rows: 20vh 1fr;
    }

    .image-panel {
        height: 20vh;
    }

    .form-panel {
        padding: var(--space-sm);
        min-height: 80vh;
    }

    .step-circle {
        width: 28px;
        height: 28px;
    }

    .step-icon {
        font-size: 10px;
    }

    .step-connector {
        top: 14px;
        left: calc(50% + 14px);
        width: calc(100% - 28px);
    }

    .btn {
        padding: 10px 16px;
        font-size: 12px;
    }
}

/* =====================================================
   LANDSCAPE MODE HANDLING
   Critical for mobile devices in landscape orientation
   ===================================================== */

/* Landscape orientation for tablets */
@media (max-width: 1024px) and (orientation: landscape) and (min-height: 400px) {
    .app-container {
        grid-template-columns: 40% 60%;
        grid-template-rows: 1fr;
    }

    .image-panel {
        height: 100vh;
        height: 100dvh;
    }

    .form-panel {
        height: 100vh;
        height: 100dvh;
        min-height: auto;
        padding: var(--space-lg);
        overflow-y: auto;
    }

    .particle-canvas {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
}

/* Landscape orientation for phones */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .app-container {
        grid-template-columns: 35% 65%;
        grid-template-rows: 1fr;
    }

    .image-panel {
        height: 100vh;
        height: 100dvh;
    }

    .image-overlay {
        padding: var(--space-sm) var(--space-md);
    }

    .coach-name {
        font-size: var(--text-lg);
    }

    .coach-title {
        font-size: 10px;
    }

    .form-panel {
        height: 100vh;
        height: 100dvh;
        min-height: auto;
        padding: var(--space-md);
        align-items: flex-start;
    }

    .particle-canvas {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }

    .step-indicators {
        margin-bottom: var(--space-sm);
    }

    .step-circle {
        width: 32px;
        height: 32px;
    }

    .step-connector {
        top: 16px;
        left: calc(50% + 16px);
        width: calc(100% - 32px);
    }

    .step-label {
        display: block;
        font-size: 6px;
    }

    .wizard-form {
        margin-bottom: var(--space-md);
    }

    /* Keep side-by-side for form rows in landscape */
    .form-row {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .form-row-3 {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select,
    textarea {
        padding: 10px 14px 10px 40px;
        min-height: 44px;
    }

    textarea {
        min-height: 80px;
    }

    .wizard-nav {
        flex-direction: row;
        margin-top: var(--space-md);
    }

    .btn {
        padding: 10px 20px;
        min-height: 44px;
    }
}

/* Extreme landscape (very short height) */
@media (orientation: landscape) and (max-height: 400px) {
    .step-indicators {
        margin-bottom: var(--space-xs);
    }

    .step-circle {
        width: 28px;
        height: 28px;
    }

    .step-icon {
        font-size: 10px;
    }

    .wizard-form {
        margin-bottom: var(--space-sm);
    }

    .form-group {
        margin-bottom: 4px;
    }

    .form-label {
        font-size: 11px;
        margin-bottom: 4px;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select {
        padding: 8px 12px 8px 36px;
        min-height: 40px;
    }

    textarea {
        min-height: 60px;
    }

    .btn {
        padding: 8px 16px;
        min-height: 40px;
        font-size: 13px;
    }

    .success-icon-wrapper {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
    }

    .success-icon {
        width: 48px;
        height: 48px;
    }

    .success-title {
        font-size: 1.25rem;
    }
}

/* =====================================================
   HIGH DPI / RETINA DISPLAYS
   ===================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .bg-pattern {
        background-size: 30px 30px;
    }

    /* Sharper borders on retina */
    input,
    select,
    textarea,
    .checkbox-label,
    .radio-label,
    .btn {
        border-width: 0.5px;
    }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi) {
    /* Ultra high DPI devices (iPhone Pro, Samsung Ultra) */
    .bg-pattern {
        background-size: 20px 20px;
    }
}

/* =====================================================
   ANIMATION KEYFRAMES
   ===================================================== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

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

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); }
}

/* Confetti Pieces */
.confetti-piece {
    position: absolute;
    will-change: transform, opacity;
}

/* =====================================================
   iOS-SPECIFIC FIXES
   ===================================================== */

/* Fix for iOS Safari 100vh issue */
@supports (-webkit-touch-callout: none) {
    .app-container,
    .image-panel,
    .form-panel {
        height: -webkit-fill-available;
    }
}

/* Prevent iOS text size adjustment */
@supports (-webkit-overflow-scrolling: touch) {
    html {
        -webkit-text-size-adjust: 100%;
    }
}

/* =====================================================
   TOUCH OPTIMIZATION
   ===================================================== */

/* Optimize touch handling */
.btn,
.checkbox-label,
.radio-label,
.step-indicator {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Prevent text selection during touch */
.wizard-nav,
.step-indicators {
    -webkit-user-select: none;
    user-select: none;
}

/* =====================================================
   KEYBOARD NAVIGATION (FOCUS-VISIBLE)
   ===================================================== */


.btn:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    box-shadow: var(--glow-blue);
}

.checkbox-label:focus-within,
.radio-label:focus-within {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Hide focus ring for mouse/touch users */
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
    outline: none;
}

/* =====================================================
   DARK MODE SYSTEM PREFERENCE
   (Already dark by default, but ensure consistency)
   ===================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* =====================================================
   NOTCH & SAFE AREA HANDLING (iPhone X+)
   ===================================================== */

@supports (padding: max(0px)) {
    .form-panel {
        padding-left: max(var(--space-lg), env(safe-area-inset-left));
        padding-right: max(var(--space-lg), env(safe-area-inset-right));
    }

    .wizard-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* =====================================================
   PERFORMANCE OPTIMIZATIONS
   ===================================================== */

/* Hardware acceleration for animated elements */
.bg-gradient-orb,
.step-circle,
.btn,
.form-step {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce paint on scroll */
.form-panel {
    contain: layout style;
}

/* =====================================================
   CONTRAST MODE SUPPORT (High Contrast / Forced Colors)
   ===================================================== */

@media (forced-colors: active) {
    .btn-primary {
        background: ButtonFace;
        color: ButtonText;
        border: 2px solid ButtonText;
    }

    .step-circle {
        border: 2px solid ButtonText;
    }

    .step-indicator.completed .step-circle {
        background: Highlight;
    }

    input,
    select,
    textarea {
        border: 1px solid ButtonText;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .bg-gradient-orb,
    .brand-decoration {
        animation: none;
    }

    .badge-shine {
        animation: none;
    }

    .particle-canvas {
        display: none;
    }

    .confetti-container {
        display: none;
    }

    /* Disable parallax and floating effects */
    .luxury-background {
        animation: none;
    }

    /* Keep essential transitions but make them instant */
    .form-step {
        transition: none;
    }
}

/* =====================================================
   INTERNATIONALIZATION (i18n) SUPPORT
   Language Selector & RTL (Right-to-Left) Styles
   ===================================================== */

/* Screen Reader Only - Accessibility Helper */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Language Selector Container */
.language-selector-container {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    z-index: 100;
}

/* Language Selector Component */
.language-selector {
    position: relative;
    font-family: var(--font-body);
}

/* Trigger Button */
.language-selector__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    color: var(--text-light);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-base);
    outline: none;
}

.language-selector__trigger:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.language-selector__trigger:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.language-selector__current {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.language-selector__flag {
    display: flex;
    align-items: center;
    line-height: 1;
}

.language-selector__flag img {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.language-selector__code {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.language-selector__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-base);
    opacity: 0.7;
}

.language-selector__arrow svg {
    width: 12px;
    height: 12px;
}

/* Dropdown Menu */
.language-selector__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    padding: var(--space-sm);
    background: rgba(23, 46, 84, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transform-origin: top right;
    transition:
        opacity var(--transition-fast),
        visibility var(--transition-fast),
        transform var(--transition-fast);
    z-index: 1000;
}

.language-selector__dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Dropdown Options */
.language-selector__option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
    outline: none;
}

.language-selector__option:hover,
.language-selector__option.is-focused {
    background: rgba(59, 130, 246, 0.15);
    color: var(--text-light);
}

.language-selector__option.is-selected {
    background: rgba(59, 130, 246, 0.2);
    color: var(--text-light);
    font-weight: 500;
}

.language-selector__option:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: -2px;
}

.language-selector__name {
    flex: 1;
}

.language-selector__check {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
}

.language-selector__check svg {
    width: 14px;
    height: 14px;
}

/* =====================================================
   RTL (RIGHT-TO-LEFT) SUPPORT
   Complete mirroring for Arabic language
   ===================================================== */

/* RTL Root Styles */
[dir="rtl"] {
    direction: rtl;
}

/* RTL Font Family Override for Arabic */
[dir="rtl"] body,
[dir="rtl"] .form-label,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] .btn,
[dir="rtl"] .checkbox-text,
[dir="rtl"] .radio-text {
    font-family: 'Cairo', 'Tajawal', var(--font-body);
}

[dir="rtl"] .coach-name,
[dir="rtl"] .identity-name,
[dir="rtl"] .success-title,
[dir="rtl"] .next-steps-title {
    font-family: 'Cairo', 'Tajawal', var(--font-heading);
}

/* RTL Text Alignment */
[dir="rtl"] .overlay-content,
[dir="rtl"] .coach-identity {
    text-align: right;
}

[dir="rtl"] .form-label {
    text-align: right;
}

/* RTL Language Selector Position */
[dir="rtl"] .language-selector-container {
    right: auto;
    left: var(--space-lg);
}

[dir="rtl"] .language-selector__dropdown {
    right: auto;
    left: 0;
    transform-origin: top left;
}

[dir="rtl"] .language-selector__option {
    text-align: right;
    flex-direction: row-reverse;
}

/* RTL Step Indicators */
[dir="rtl"] .step-indicators {
    flex-direction: row;
}

[dir="rtl"] .step-connector {
    left: auto;
    right: calc(50% + 26px);
}

/* RTL connector adjustments for different screen sizes */
@media (max-width: 1280px) {
    [dir="rtl"] .step-connector {
        right: calc(50% + 24px);
    }
}

@media (max-width: 1024px) {
    [dir="rtl"] .step-connector {
        right: calc(50% + 23px);
    }
}

@media (max-width: 768px) {
    [dir="rtl"] .step-connector {
        right: calc(50% + 21px);
    }
}

@media (max-width: 600px) {
    [dir="rtl"] .step-connector {
        right: calc(50% + 20px);
    }
}

@media (max-width: 480px) {
    [dir="rtl"] .step-connector {
        right: calc(50% + 19px);
    }
}

@media (max-width: 390px) {
    [dir="rtl"] .step-connector {
        right: calc(50% + 18px);
    }
}

@media (max-width: 375px) {
    [dir="rtl"] .step-connector {
        right: calc(50% + 16px);
    }
}

/* RTL Input Fields */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] select,
[dir="rtl"] textarea {
    padding: 16px 48px 16px 20px;
    text-align: right;
}

[dir="rtl"] .input-icon {
    left: auto;
    right: 16px;
}

[dir="rtl"] .select-arrow {
    right: auto;
    left: 16px;
}

/* RTL Select */
[dir="rtl"] select {
    padding-right: 48px;
    padding-left: 50px;
}

/* RTL Checkbox & Radio */
[dir="rtl"] .checkbox-custom {
    margin-right: 0;
    margin-left: 14px;
    order: -1;
}

[dir="rtl"] .radio-custom {
    margin-right: 0;
    margin-left: 14px;
    order: -1;
}

[dir="rtl"] .checkbox-label,
[dir="rtl"] .radio-label {
    flex-direction: row;
    direction: rtl;
}

[dir="rtl"] .checkbox-text,
[dir="rtl"] .radio-text {
    text-align: right;
}

/* RTL Navigation Buttons */
[dir="rtl"] .wizard-nav {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn-icon {
    transform: scaleX(-1);
}

[dir="rtl"] .btn-primary:hover .btn-icon {
    transform: scaleX(-1) translateX(-3px);
}

[dir="rtl"] .btn-secondary:hover .btn-icon {
    transform: scaleX(-1) translateX(3px);
}

/* RTL Success Screen */
[dir="rtl"] .steps-list {
    direction: rtl;
}

[dir="rtl"] .next-step-item {
    flex-direction: row;
}

[dir="rtl"] .next-step-item:hover {
    transform: translateX(-5px);
}

[dir="rtl"] .next-step-item .step-icon-wrapper {
    margin-left: 0;
    margin-right: 0;
}

[dir="rtl"] .step-content {
    text-align: right;
    align-items: flex-start;
}

[dir="rtl"] .step-title,
[dir="rtl"] .step-desc {
    text-align: right;
    direction: rtl;
}

/* RTL Feature Badges */
[dir="rtl"] .feature-badges {
    flex-direction: row;
}

[dir="rtl"] .feature-badge {
    flex-direction: row-reverse;
}

/* RTL Coach Identity */
[dir="rtl"] .coach-identity {
    left: calc(var(--space-3xl) + var(--space-xl));
    text-align: right;
}

[dir="rtl"] .identity-name {
    flex-direction: row;
    justify-content: flex-start;
    direction: rtl;
    height: 4rem;
}

/* RTL Form Step Animation */
[dir="rtl"] .form-step {
    animation-name: stepSlideInRTL;
}

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

/* RTL Error Message */
[dir="rtl"] .error-message {
    text-align: right;
}

/* RTL Bubble Positions */
[dir="rtl"] .btn .bubble-1 {
    left: auto;
    right: 15%;
}

[dir="rtl"] .btn .bubble-2 {
    left: auto;
    right: 45%;
}

[dir="rtl"] .btn .bubble-3 {
    left: auto;
    right: 75%;
}

/* RTL Button Shine */
[dir="rtl"] .btn-shine {
    left: auto;
    right: -100%;
}

[dir="rtl"] .btn:hover .btn-shine {
    left: auto;
    right: 100%;
}

/* RTL Mobile Adjustments */
@media (max-width: 600px) {
    [dir="rtl"] .coach-identity {
        left: auto;
        right: var(--space-md);
        text-align: right;
    }

    [dir="rtl"] .wizard-nav {
        flex-direction: column-reverse;
    }

    [dir="rtl"] .language-selector-container {
        left: auto;
        right: 50%;
        transform: translateX(50%);
    }
}

@media (max-width: 480px) {
    [dir="rtl"] input[type="text"],
    [dir="rtl"] input[type="email"],
    [dir="rtl"] input[type="tel"],
    [dir="rtl"] input[type="url"],
    [dir="rtl"] input[type="number"],
    [dir="rtl"] select,
    [dir="rtl"] textarea {
        padding: 14px 44px 14px 16px;
    }

    [dir="rtl"] .input-icon {
        right: 14px;
    }

    [dir="rtl"] .select-arrow {
        left: 14px;
    }
}

@media (max-width: 390px) {
    [dir="rtl"] input[type="text"],
    [dir="rtl"] input[type="email"],
    [dir="rtl"] input[type="tel"],
    [dir="rtl"] input[type="url"],
    [dir="rtl"] input[type="number"],
    [dir="rtl"] select,
    [dir="rtl"] textarea {
        padding: 12px 42px 12px 14px;
    }

    [dir="rtl"] .input-icon {
        right: 12px;
    }
}

@media (max-width: 375px) {
    [dir="rtl"] input[type="text"],
    [dir="rtl"] input[type="email"],
    [dir="rtl"] input[type="tel"],
    [dir="rtl"] input[type="url"],
    [dir="rtl"] input[type="number"],
    [dir="rtl"] select,
    [dir="rtl"] textarea {
        padding: 12px 38px 12px 12px;
    }

    [dir="rtl"] .input-icon {
        right: 10px;
    }
}

/* RTL Landscape Mode */
@media (max-width: 1024px) and (orientation: landscape) {
    [dir="rtl"] .app-container {
        grid-template-columns: 60% 40%;
    }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    [dir="rtl"] .app-container {
        grid-template-columns: 65% 35%;
    }
}

/* Language Selector Mobile Responsive */
@media (max-width: 768px) {
    .language-selector-container {
        top: var(--space-md);
        right: 50%;
        transform: translateX(50%);
    }

    .language-selector__trigger {
        padding: 8px 12px;
        font-size: 13px;
    }

    .language-selector__flag img {
        width: 18px;
        height: 12px;
    }

    .language-selector__dropdown {
        min-width: 160px;
    }

    .language-selector__option {
        padding: 10px 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .language-selector-container {
        top: var(--space-sm);
        right: 50%;
        transform: translateX(50%);
    }

    .language-selector__trigger {
        padding: 8px 10px;
    }

    .language-selector__dropdown {
        min-width: 150px;
        right: 0;
    }
}

/* High Contrast Support for Language Selector */
@media (forced-colors: active) {
    .language-selector__trigger {
        border: 2px solid ButtonText;
    }

    .language-selector__dropdown {
        border: 2px solid ButtonText;
    }

    .language-selector__option.is-selected {
        background: Highlight;
        color: HighlightText;
    }
}

/* Print Styles */
@media print {
    /* Hide decorative elements */
    .luxury-background,
    .brand-panel,
    .wizard-nav,
    .step-indicators,
    .particle-canvas,
    .bg-gradient-orb,
    .bg-pattern,
    .image-panel,
    .confetti-container {
        display: none !important;
    }

    /* Reset layout for print */
    .app-container {
        display: block;
        min-height: auto;
    }

    .form-panel {
        padding: 20px;
        height: auto;
        min-height: auto;
        background: white;
        backdrop-filter: none;
    }

    .form-container {
        max-width: 100%;
    }

    /* Reset colors for print */
    body,
    .wizard-container,
    .form-step,
    .form-group,
    .form-label,
    input,
    select,
    textarea {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }

    /* Visible borders for form elements */
    input,
    select,
    textarea {
        border: 1px solid #333 !important;
    }

    /* Show all form steps for print */
    .form-step {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        page-break-inside: avoid;
    }

    /* Page break handling */
    .form-group {
        page-break-inside: avoid;
    }

    /* Hide icons in inputs */
    .input-icon,
    .select-arrow {
        display: none;
    }

    /* Adjust input padding without icons */
    input,
    select,
    textarea {
        padding-left: 12px !important;
    }
}