/* css/passport-app.css - V3 - Mobile-First Responsive Layout */

/* --- Ayekoo Hub Color & Font Variables --- */
:root {
    --color-green: #137057;
    --color-orange: #F99D18;
    --color-parchment: #FEF6EF;
    --color-text-dark: #333333;
    --color-text-medium: #555555;
    --color-text-light: #777777;
    --color-white: #ffffff;
    --color-bg-light: #f7f9fc; /* Light neutral background */
    --color-input-bg: #f7f9fc; /* Input background */
    --color-border-light: #e2e8f0; /* Softer border */
    --color-border-focus: var(--color-green);
    --color-error-light: #fff5f5;
    --color-error-dark: #e53e3e;
    --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.08);
    --font-primary: 'Open Sans', sans-serif;
    --font-headings: 'Ubuntu', sans-serif;
    --breakpoint-desktop: 900px; /* Define the breakpoint */
}

/* --- Base Styles --- */
body.page-template-template-signup-react {
    background-color: var(--color-bg-light);
    font-family: var(--font-primary);
}

.ayekoo-signup-page-react #passport-app-root {
    padding-top: 20px; /* Reduced top padding for mobile */
    padding-bottom: 40px;
}

/* --- Main Layout Container --- */
.passport-container-react {
    display: flex;
    /* --- MOBILE FIRST: Stack by default --- */
    flex-direction: column;
    max-width: 1350px;
    margin: 0 auto;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    margin-left: 20px; /* Add margin for mobile */
    margin-right: 20px;
}

/* --- Column Styling (Mobile Defaults) --- */
.passport-form-column {
    /* Takes full width by default */
    padding: 30px 20px;
    order: 2; /* Form below preview on mobile */
    border-top: 1px solid var(--color-border-light); /* Separator on mobile */
}

.passport-guide-column {
    /* Takes full width by default */
    padding: 30px 20px;
    background-color: var(--color-parchment);
    order: 1; /* Preview above form on mobile */
}

.passport-form-wrapper,
.passport-guide-content {
    width: 100%;
    max-width: 480px; /* Still control max content width */
    margin-left: auto; /* Center content within columns */
    margin-right: auto;
}

/* --- Form Header --- */
.passport-form-header { margin-bottom: 30px; text-align: left; }
.passport-form-header h1 { font-family: var(--font-headings); font-size: 1.8rem; color: var(--color-green); margin-bottom: 8px; font-weight: 700; line-height: 1.2; }
.passport-form-header p { font-size: 1rem; color: var(--color-text-medium); line-height: 1.6; }

/* --- Progress Bar --- */
/* (Styles remain the same as previous version) */
.progress-bar-wrapper { display: flex; align-items: center; gap: 15px; margin-bottom: 40px; }
.progress-bar-container { flex-grow: 1; background-color: #eaf0f6; border-radius: 5px; height: 8px; overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(to right, #4ade80, var(--color-green)); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.progress-bar-label { font-size: 0.85rem; color: var(--color-text-light); font-weight: 600; flex-shrink: 0; }

/* --- Form Steps & Fields --- */
/* (Styles remain the same as previous version) */
.form-step { animation: fadeIn 0.4s ease-out; margin-bottom: 20px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.form-step-legend { font-size: 1.3rem; color: var(--color-text-dark); margin-bottom: 8px; font-weight: 700; font-family: var(--font-headings); display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border-light); width: 100%; }
.form-step-legend .step-icon { color: var(--color-green); flex-shrink: 0; }
.form-step-description { font-size: 0.95rem; color: var(--color-text-medium); margin-bottom: 30px; margin-top: 10px; }
.form-field-group { margin-bottom: 22px; }
.form-step label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; color: var(--color-text-dark); }
.form-step input[type="text"], .form-step input[type="email"], .form-step select, .form-step textarea { width: 100%; padding: 14px 16px; font-size: 1rem; border: 1px solid var(--color-border-light); border-radius: 8px; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; background-color: var(--color-input-bg); color: var(--color-text-dark); }
.select-wrapper { position: relative; }
.select-wrapper .select-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-text-light); }
.form-step select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 40px; }
.form-step textarea { min-height: 120px; resize: vertical; }
.form-step input:focus, .form-step select:focus, .form-step textarea:focus { outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(19, 112, 87, 0.15); background-color: var(--color-white); }

/* --- Error Styling --- */
/* (Styles remain the same as previous version) */
.form-step input.input-error, .form-step select.input-error, .form-step textarea.input-error { border-color: var(--color-error-dark); background-color: var(--color-error-light); }
.field-error-message { color: var(--color-error-dark); font-size: 0.8rem; margin-top: 6px; }
.form-error-message { color: var(--color-error-dark); margin-top: 20px; margin-bottom: -15px; text-align: center; font-weight: 600; font-size: 0.9rem; padding: 12px; background-color: var(--color-error-light); border: 1px solid #fecaca; border-radius: 6px; }

/* --- Form Navigation --- */
/* (Mobile Defaults) */
.form-nav { display: flex; flex-direction: column; /* Stack buttons by default */ gap: 15px; align-items: stretch; /* Make buttons full width */ margin-top: 35px; padding-top: 25px; border-top: 1px solid var(--color-border-light); }
.nav-button { padding: 12px 24px; font-size: 0.95rem; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; font-weight: 600; border: none; line-height: 1.4; text-align: center; /* Center text */ }
.nav-button.back-step { background-color: transparent; color: var(--color-text-light); order: 2; /* Put back button below next button */ }
.nav-button.back-step:hover:not(:disabled) { color: var(--color-text-dark); background-color: #f1f5f9; }
.nav-button.next-step { order: 1; /* Put next button on top */ }

/* --- Theme Button Styles --- */
/* (Styles remain the same as previous version) */
.button.button-orange { background-color: var(--color-orange); color: #111; font-weight: 700; padding: 14px 28px; border: none; border-radius: 8px; box-shadow: 0 4px 10px rgba(249, 157, 24, 0.2); transition: all 0.3s ease; }
.button.button-orange:hover:not(:disabled) { background-color: #e08c10; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(249, 157, 24, 0.3); }
.button.button-orange:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 5px rgba(249, 157, 24, 0.2); }
.button.button-green { background-color: var(--color-green); color: var(--color-white); font-weight: 700; padding: 14px 28px; border: none; border-radius: 8px; box-shadow: 0 4px 10px rgba(19, 112, 87, 0.2); transition: all 0.3s ease; text-decoration: none; display: inline-block; }
.button.button-green:hover:not(:disabled) { background-color: #0f5a45; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(19, 112, 87, 0.3); }
.nav-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- Success Step --- */
/* (Styles remain the same as previous version) */
.success-step-content { text-align: center; padding: 60px 20px; animation: fadeIn 0.5s ease-out; }
.success-step-content h2 { color: var(--color-green); font-size: 1.8rem; margin-bottom: 10px; font-family: var(--font-headings); }
.success-step-content p { color: var(--color-text-medium); margin-bottom: 30px; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.success-step-content .button { margin-top: 10px; }

/* --- Mock Passport Styling --- */
/* (Styles remain the same as previous version) */
.mock-passport { background: var(--color-white); color: var(--color-text-dark); border-radius: 12px; box-shadow: var(--shadow-soft); border: 1px solid var(--color-border-light); position: relative; width: 100%; max-width: 450px; height: auto; padding: 15px 20px; display: flex; flex-direction: column; box-sizing: border-box; margin-bottom: 40px; }
.passport-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border-light); padding-bottom: 8px; margin-bottom: 15px; flex-shrink: 0; }
.passport-header-text { color: var(--color-text-medium); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; line-height: 1.2; }
.passport-logo { width: 45px; height: auto; }
.passport-logo img { display: block; width: 100%; height: auto; border-radius: 4px; }
.passport-body { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.passport-photo { width: 60px; height: 60px; background: #f0f3f7; border: 1px solid var(--color-border-light); border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.passport-info h4 { font-size: 1.1rem; margin: 0 0 2px 0; color: var(--color-text-dark); font-weight: 700; line-height: 1.3; font-family: var(--font-headings); }
.passport-info p { font-size: 0.8rem; margin: 0; color: var(--color-text-medium); }
.passport-stamps-visas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex-shrink: 0; margin-top: auto; padding-top: 15px; border-top: 1px dashed var(--color-border-light); }
.passport-stamps-visas h5 { font-size: 0.65rem; margin-bottom: 8px; color: var(--color-text-medium); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.stamps-grid, .visas-grid { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; }
.stamp { width: 28px; height: 28px; border-radius: 50%; background: var(--color-parchment); border: 1px solid #e0d9d1; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--color-orange); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.visa { border-radius: 4px; width: auto; padding: 0 8px; height: 26px; line-height: 26px; font-size: 0.75rem; background: var(--color-green); color: var(--color-white); font-weight: 700; box-shadow: 0 2px 4px rgba(0,0,0,0.05); text-transform: uppercase; letter-spacing: 0.5px; }
.visa-placeholder { font-size: 0.75rem; color: var(--color-text-light); font-style: italic;}

/* --- Benefits List Styling --- */
/* (Styles remain the same as previous version) */
.passport-benefits h3 { font-size: 1.3rem; color: var(--color-text-dark); margin-bottom: 20px; font-weight: 700; font-family: var(--font-headings);}
.benefits-list { list-style: none; padding: 0; margin: 0; }
.benefits-list li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; }
.benefits-list .benefit-icon { width: 36px; height: 36px; color: var(--color-green); flex-shrink: 0; background: var(--color-white); border: 1px solid var(--color-border-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); }
.benefit-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.benefits-list h4 { margin: 0 0 4px 0; font-size: 1rem; font-weight: 600; color: var(--color-text-dark); }
.benefits-list p { margin: 0; font-size: 0.85rem; color: var(--color-text-medium); line-height: 1.5; }

/* --- Footer Link --- */
/* (Mobile Defaults) */
.form-footer { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--color-border-light); font-size: 0.9rem; color: var(--color-text-light); }
.form-footer a { color: var(--color-green); font-weight: 600; text-decoration: none; }
.form-footer a:hover { text-decoration: underline; }

/* ============================================= */
/* --- DESKTOP STYLES (Overrides Mobile) --- */
/* ============================================= */
@media (min-width: 900px) { /* Use min-width for desktop overrides */

    .ayekoo-signup-page-react #passport-app-root {
        padding-top: 60px;
        padding-bottom: 80px;
    }

    .passport-container-react {
        /* --- DESKTOP: Side-by-side --- */
        flex-direction: row;
        margin-left: auto; /* Re-center container */
        margin-right: auto;
    }

    /* --- Column Styling (Desktop Overrides) --- */
    .passport-form-column {
        flex: 0 0 50%; /* Fixed 60% width, don't grow/shrink */
        padding: 50px 60px;
        order: 1; /* Form on left */
        border-top: none; /* Remove mobile separator */
        border-right: 1px solid var(--color-border-light); /* Add desktop separator */
    }

    .passport-guide-column {
        flex: 0 0 40%; /* Fixed 40% width, don't grow/shrink */
        padding: 50px 60px;
        order: 2; /* Guide on right */
    }

    /* --- Form Header (Desktop) --- */
     .passport-form-header h1 { font-size: 2.2rem; }
     .passport-form-header p { font-size: 1.05rem; }

     /* --- Form Steps (Desktop) --- */
     .form-step-legend { font-size: 1.5rem; }
     .form-step-description { font-size: 0.95rem; }

    /* --- Form Navigation (Desktop) --- */
    .form-nav {
        flex-direction: row; /* Side-by-side buttons */
        justify-content: space-between;
        align-items: center;
        gap: 0; /* Remove mobile gap */
    }
    .nav-button.back-step {
        order: 1; /* Back button first */
        width: auto; /* Auto width */
    }
    .nav-button.next-step {
        order: 2; /* Next button second */
        width: auto; /* Auto width */
    }

     /* --- Footer Link (Desktop) --- */
     /* (No change needed, default styles are fine) */
} /* End @media (min-width: 900px) */