:root {
    --primary-blue: #004191; /* Main Brand Color */
    --hover-blue: #003377;
    --light-bg-blue: #EFF6FC; /* Keypad and Input BG hints */
    --text-dark: #2A3B4C;
    --text-grey: #666;
    --white: #ffffff;
    --border-grey: #ccc;
    --promo-bg-top: #2C6CB1;
    --promo-bg-bottom: #4EA3D6; /* Estimate for gradient */
    --assurance-card-bg: #154675;
}

* {
    box-sizing: border-box;
    font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--white);
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px; /* More padding */
    background-color: var(--white);
    /* Constrain width to match mobile view on desktop - overridden in desktop.css */
    width: 100%;
    max-width: 480px; 
    margin: 0 auto;
}

.logo {
    height: 55px; /* Bigger logo */
    width: auto;
}

.header-icons {
    display: flex;
    gap: 25px;
    font-size: 1.4rem; /* Bigger icons */
    color: var(--text-dark);
}

/* Main Container */
main {
    flex: 1;
    width: 100%;
    max-width: 480px; /* Mobile constraint */
    margin: 0 auto;
    /* overflow: hidden;  Removed */
    position: relative;
    display: flex; /* Back to flex column */
    flex-direction: column;
}

/* Removed Slider styles */
/*
#slider-container { ... }
.slide { ... }
*/

/* Titles */
.connexion-title {
    color: #17375E; /* Darker blue */
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    margin: 20px 0 30px 0;
}

/* Form Elements */
.login-form {
    padding: 0 20px;
    /* flex: 1; Removed to allow it to grow with content */
    margin-bottom: 20px;
}

.hidden {
    display: none !important;
}

.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    position: relative;
    transition: margin-bottom 0.3s;
}

/* ... existing input styles ... */


.input-group label {
    font-weight: 700;
    color: #17375E;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.input-wrapper {
    position: relative;
    background-color: #F8F8F8; /* Lighter background */
    border: 1px solid #000; /* Solid black/dark border as seen in screenshot */
    border-radius: 8px;
    padding: 1px;
    height: 50px;
}

.input-wrapper:focus-within {
    border: 2px solid #000000; /* Solid Black border */
    padding: 0; /* Remove buffer, keeping inner space constant */
    background-color: #ffffff; /* White background */
}

.input-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 17px; /* Matches input padding-left (15px) + small adjustment for border */
    font-size: 1.2rem;
    pointer-events: none;
    z-index: 1;
    color: transparent;
    overflow: hidden;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.6em; /* Match input */
    line-height: 50px;
    white-space: nowrap;
    
    /* Default Hidden logic (Turn 14) */
    opacity: 0;
    transition: opacity 0.2s;
}

/* Show mask when input wrapper has focus (Input clicked) OR when it is permanently masked (Step 2) */
.input-wrapper:focus-within .input-mask,
.input-mask.is-masked {
    opacity: 1;
}

.input-mask.is-masked {
    letter-spacing: 0;
    color: var(--text-dark);
}

.input-mask .slot {
    /* Use defaults (display: inline) so letter-spacing applies correctly between slots */
    position: relative;
    /* color inherited as transparent */
}

/* When a digit is typed, the phantom '0' matches the input '0' width/spacing perfectly */
.input-mask .slot.digit {
    /* Just space reservation, no decoration */
}

/* The empty slots show the dash */
.input-mask .slot.dash {
    /* Phantom '0' is invisible, dash is drawn over it */
}

.input-mask .slot.dash::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px; /* Lower to match baseline look of "556" */
    height: 1.5px; /* Slightly thinner */
    background-color: #555; /* Distinct dark grey */
    width: 14px; /* Wider to resemble underscore */
}

.input-group input {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
    padding: 0 50px 0 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.6em; /* Using em to scale with font */
    color: #003B79;
    caret-color: #003B79;
    font-weight: 500;
    outline: none;
    background-color: transparent;
    position: relative;
    z-index: 2;
}

.input-group input:focus {
    background-color: transparent;
}

.input-group input::placeholder {
    color: transparent;
}

.input-group.error .input-wrapper {
    border: 1px solid #D32F2F;
}

.error-text {
    color: #D32F2F;
    font-size: 0.8rem;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.error-text.hidden {
    display: none;
}

.clear-input {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    
    border: none;
    background: #EBF4FC; /* Light blue from image */
    color: var(--primary-blue);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex; /* Flex to center icon */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
}
.clear-input.hidden {
    display: none;
}

/* Toggle Switch */
.remember-me {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.label-text {
    font-size: 0.9rem;
    color: #777;
    flex: 1;
    margin-right: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #9E9E9E;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #0078D7; /* Typical bright blue for active toggles */
}

input:checked + .slider:before {
    transform: translateX(22px);
}

/* Buttons */
.btn-primary {
    width: 100%;
    background-color: var(--primary-blue);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 25px;
    transition: opacity 0.3s;
}

.btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.forgot-link {
    display: block;
    text-align: center;
    color: #666;
    font-size: 0.8rem;
    text-decoration: underline;
    margin-bottom: 30px;
}

/* Bottom Promo Section */
.bottom-promo {
    background: linear-gradient(180deg, #2E72B6 0%, #4FA4D7 100%);
    color: white;
    padding: 30px 20px 50px 20px;
    margin-top: auto; /* Push to bottom */
}

.promo-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.assurance-card {
    background-color: var(--assurance-card-bg);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}

.assurance-card h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.assurance-card p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 20px;
    opacity: 0.9;
}

.contract-link {
    color: white;
    text-decoration: underline;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 20px;
}

.btn-secondary {
    background: transparent;
    border: 1px solid white;
    color: white;
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Password Section specific styles */
#password-section {
    margin-top: 20px;
    animation: slideDown 0.4s ease-out;
}

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

.password-label {
    font-weight: 700;
    color: #003B79;
    font-size: 0.9rem;
    margin-bottom: 20px;
    text-align: left; /* Align left to match "Identifiant" label */
}

.action-buttons {
    margin-bottom: 25px;
}

/* Re-adjust input for read-only state if needed, though simpler is to just let it sit there */

/* PASSWORD STEP STYLES */

.password-display-wrapper { /* New wrapper */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    height: 50px; /* Force height so button triggers don't jump */
}

.password-dots {
    display: flex;
    justify-content: center;
    gap: 15px;
    /* margin-bottom: 30px; Remove this as wrapper handles it */
}

.clear-password-btn {
    width: 50px;
    height: 50px;
    background-color: #F8FBFF;
    border: none;
    border-radius: 8px; /* Slightly softer round */
    color: #4B6E96; /* Correct blueish grey from screenshot */
    font-size: 1.5rem;
    cursor: pointer;
    display: flex; /* Flex to center icon */
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.clear-password-btn.hidden {
    visibility: hidden; /* Use visibility so it takes up space if we want, or display none. Screenshot implies it might always be there or appear. User circled it specifically. Usually it appears when typing starts. */
    opacity: 0;
    pointer-events: none;
    /* transition: opacity 0.2s; */
}

/* Override hidden for smoother fade in if desired, but display none is safer for layout shifts usually. */
/* However, to keep layout stable, visibility hidden is better here since we have a fixed height wrapper */
.clear-password-btn {
    transition: opacity 0.2s;
}

.dot {
    width: 15px;
    height: 15px;
    border: 1.5px solid #003B79;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.2s;
}

.dot.active {
    background-color: #003768; /* Darker fill */
}

.keypad-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 30px;
}

.key {
    aspect-ratio: 1;
    background-color: #EEF6FC; /* Light blueish tint */
    border: none;
    border-radius: 5px;
    color: #003B79;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: background-color 0.2s;
}

.key:active {
    background-color: #DDEBF6;
}

/* Responsive Overrides (if handled on desktop) */
@media (min-width: 481px) {
    main {
        box-shadow: 0 0 20px rgba(0,0,0,0.1);
        min-height: auto;
        margin-top: 20px;
        margin-bottom: 20px;
        background: white;
    }
}