/* ============================================
   YAVU - Styles Frontend (Hand-Drawn Design)
   ============================================ */

/* Formulaire Trouveur - Style "Hand-Drawn" */
#yavu-finder-form-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px 20px;
    background: transparent;
}

#yavu-finder-form-container h2 {
    margin-top: 0;
    color: #333;
    text-align: center;
}

#yavu-finder-form-container p {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

/* Layout du formulaire - Row avec gap */
.yavu-search-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

#yavu-finder-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

/* --- 1. LE CONTENEUR VISUEL (Input Group) --- */
.yavu-input-group {
    /* Style visuel du bloc (Bordure, Forme, Ombre) */
    display: flex;
    align-items: center;
    flex-grow: 1;
    height: 60px;
    background-color: #ffffff;

    /* Style YAVU : Bordures noires irrégulières */
    border: 3px solid #000000;
    border-radius: 15px 255px 20px 25px / 255px 15px 25px 20px;

    /* Ombre */
    box-shadow: 6px 6px 0px rgba(0,0,0,0.1);

    padding-left: 20px;
    padding-right: 20px;
    transition: all 0.3s ease;
    cursor: text; /* Pour indiquer qu'on peut écrire */
}

/* Effet Focus : C'est le conteneur qui réagit quand on clique dans l'input */
.yavu-input-group:focus-within {
    border-color: #6dbf91; /* Devient vert */
    transform: scale(1.01);
}

/* --- 2. LE PRÉFIXE ("LUN-") --- */
.yavu-prefix {
    /* Héritage de la police du texte du site */
    font-family: var(--e-global-typography-text-font-family, sans-serif);
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    white-space: nowrap;
    margin-right: 2px;
    user-select: none;
    pointer-events: none;
}

/* --- 3. L'INPUT RÉEL (Transparent & Isolé) --- */
#yavu-finder-form-container .yavu-input-field,
#yavu-finder-form-container #postcode,
#yavu-finder-form-container #lunettes_code {
    flex-grow: 1; /* Prend tout l'espace restant */
    width: 100%;
    height: 100%;
    border: 0 !important;       /* PAS de bordure */
    background: transparent !important; /* PAS de fond */
    outline: none !important;      /* PAS de contour */
    box-shadow: none !important;   /* PAS d'ombre interne */
    padding: 0;
    margin: 0;

    /* Héritage de la police du texte du site */
    font-family: var(--e-global-typography-text-font-family, sans-serif);
    font-weight: 700;
    font-size: 16px;
    color: #4a4a4a;
    text-transform: uppercase;

    /* Hack pour empêcher le style par défaut sur iOS */
    -webkit-appearance: none;
    appearance: none;
}

/* Input sans préfixe (Point Relais) - padding ajusté */
.yavu-input-full {
    padding-left: 0;
}

/* Reset des styles par défaut des inputs */
.yavu-input-field:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Placeholder styling */
.yavu-input-field::placeholder {
    color: #aaa;
    opacity: 1;
}

/* Exemple du code postal de l'étape 2 (75001), en gris clair comme les
   exemples de l'identifiant de l'étape 1. */
#yavu-finder-form-container #postcode::placeholder {
    color: #c4c4c4;
    opacity: 1;
}

/* --- 4. LE BOUTON (Style Isolé & Synchronisé avec le Thème) --- */
#yavu-finder-form-container .yavu-btn,
#yavu-finder-form-container #submit-btn {
    /* Dimensions & Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 250px; /* Conserver la largeur min du design form */
    padding: 15px 30px !important;
    height: auto !important;
    min-height: 60px;

    /* Typographie */
    font-family: var(--e-global-typography-primary-font-family, sans-serif);
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1 !important;
    
    /* Style YAVU (Copie exacte du Thème) */
    background-color: #6dbf91 !important; /* var(--yavu-green) */
    color: #ffffff !important; /* var(--yavu-white) */
    border: 5px solid #000000 !important; /* var(--yavu-black) */
    
    /* Forme "Patate" */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
    transform: rotate(-1deg);
    
    /* Ombres & Transitions */
    box-shadow: 6px 6px 0px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease-in-out !important;
    
    cursor: pointer;
    position: relative;
    margin: 0; /* Reset */
}

/* Hover : Survol du bouton */
#yavu-finder-form-container .yavu-btn:hover,
#yavu-finder-form-container #submit-btn:hover {
    /* Changement de forme */
    border-radius: 20px 225px 15px 255px / 255px 15px 225px 15px !important;
    
    /* Mouvement */
    transform: rotate(1deg) scale(1.05) !important;
    
    /* Inversion couleurs (Style Thème) */
    background-color: #ffffff !important;
    color: #6dbf91 !important;
    border-color: #6dbf91 !important;
    
    /* Ombre renforcée */
    box-shadow: 8px 8px 0px rgba(0,0,0,0.3) !important;
}

/* État désactivé */
#yavu-finder-form-container .yavu-btn:disabled,
#yavu-finder-form-container #submit-btn:disabled {
    background-color: #ccc !important;
    border-color: #999 !important;
    color: #666 !important;
    cursor: not-allowed;
    transform: rotate(0deg) !important;
    box-shadow: none !important;
}

.error-message {
    padding: 12px;
    background: #ffebee;
    color: #c62828;
    border-left: 4px solid #c62828;
    margin-top: 15px;
    animation: slideIn 0.3s;
}

.success-message {
    padding: 12px;
    background: #e8f5e9;
    color: #2e7d32;
    border-left: 4px solid #4CAF50;
    margin-top: 15px;
    animation: slideIn 0.3s;
}

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

/* My Account Tables */
.yavu-lunettes-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.yavu-lunettes-table th {
    background: #f5f5f5;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #ddd;
}

.yavu-lunettes-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.status-actif {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.status-perdue {
    background: #fff3e0;
    color: #ef6c00;
}

.status-badge.status-retournee {
    background: #e3f2fd;
    color: #1565c0;
}

/* Point Relais Selector */
.yavu-relay-selector {
    margin-top: 20px;
}

.yavu-relay-selector h3 {
    margin-bottom: 15px;
    color: #333;
}

.yavu-relay-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.yavu-relay-item {
    padding: 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
}

.yavu-relay-item:hover {
    background: #f5f5f5;
}

.yavu-relay-item.selected {
    background: #e8f5e9;
    border-left: 4px solid #4CAF50;
}

/* Buttons */
.yavu-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #4CAF50;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.yavu-btn:hover {
    background: #45a049;
}

.yavu-btn-secondary {
    background: #2196F3;
}

.yavu-btn-secondary:hover {
    background: #1976D2;
}

.yavu-btn-danger {
    background: #f44336;
}

.yavu-btn-danger:hover {
    background: #d32f2f;
}

/* Loading Container (Text + Spinner) */
.yavu-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    height: auto;
    border: none;
    animation: none;
    padding: 20px;
    color: #555;
    font-weight: 500;
}

/* The actual spinner icon */
.yavu-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(109, 191, 145, 0.2); /* Fond clair du spinner (vert clair) */
    border-radius: 50%;
    border-top-color: #6dbf91; /* Couleur principale (vert YAVU) */
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

/* Spinner version blanche (pour boutons ou fonds foncés) */
.yavu-btn .yavu-spinner,
.yavu-spinner.is-white {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    width: 18px;
    height: 18px; /* Un peu plus petit dans les boutons */
}

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

/* --- 5. RESPONSIVE (Mobile : Transformation en Loupe) --- */
@media (max-width: 768px) {
    /* Formulaire Trouveur - Mode Mobile */
    #yavu-finder-form-container {
        padding: 10px 0;
        margin: 20px 10px;
    }

    .yavu-search-form,
    #yavu-finder-form {
        display: flex;
        gap: 8px;
    }

    /* Input Group prend moins de place */
    .yavu-input-group {
        width: auto;
        flex: 1;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Taille de police réduite sur mobile */
    .yavu-prefix {
        font-size: 13px;
    }

    .yavu-input-field {
        font-size: 13px;
    }

    /* Bouton devient plus compact */
    .yavu-btn,
    #submit-btn {
        width: 20%;
        min-width: auto;
        padding: 0;
    }

    /* On cache le texte */
    .yavu-btn-text {
        display: none;
    }

    /* On affiche l'icône Loupe SVG */
    .yavu-btn::after,
    #submit-btn::after {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z' fill-rule='evenodd'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    /* Tableaux */
    .yavu-lunettes-table {
        font-size: 14px;
    }

    .yavu-lunettes-table th,
    .yavu-lunettes-table td {
        padding: 8px;
    }

    .status-badge {
        font-size: 10px;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    #yavu-finder-form-container {
        padding: 15px;
        margin: 15px 5px;
    }

    .form-group input[type="text"] {
        font-size: 16px; /* Évite le zoom automatique sur iOS */
    }

    #submit-btn {
        padding: 12px;
        font-size: 14px;
    }
}

/* ============================================
   NOUVEAU FORMULAIRE TROUVEUR - 3 ÉTAPES
   ============================================ */

/* Étape 1 - Layout 50/50 */
.yavu-form-step1-layout {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    max-width: 600px;
    margin: 0 auto;
}

.yavu-step1-input {
    flex: 1;
}

.yavu-step1-btn {
    flex: 1;
    white-space: nowrap;
}

/* Identifiant du trouveur : champ des 3 lettres, tiret, champ des 5 chiffres.
   Le groupe n'a ni fond ni bordure ; chaque champ porte le cadre YAVU des
   champs du site et son propre contour de focus, parce que le contour est
   supprimé sur les autres champs du formulaire. Les règles passent par
   l'identifiant du conteneur pour l'emporter sur la remise à zéro du thème. */
#yavu-finder-form-container .yavu-id-cases {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    /* Un fieldset garde sinon la largeur de son contenu et déborde de l'écran. */
    min-width: 0;
    min-inline-size: 0;
    height: 60px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Légende lue par les lecteurs d'écran ; la consigne visible est le texte de la
   page. display: block, car le thème lui donne display: table, qui lui rendrait
   la largeur de son texte. */
#yavu-finder-form-container .yavu-id-cases-legende {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Largeurs proportionnelles au nombre de caractères (3 et 5), plafonnées pour
   que les champs restent groupés sur une grande largeur. width: 0 et
   min-width: 0 : la taille par défaut d'un champ texte (20 caractères) ferait
   déborder la rangée. Police de 20 px : sous 16 px, iOS zoome la page à la
   saisie. Sans transition, celle du thème retarderait l'apparition du contour
   de focus. */
#yavu-finder-form-container .yavu-id-champ {
    flex: 3 1 0;
    width: 0;
    min-width: 0;
    max-width: 120px;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 0 0 0.12em;
    background: #ffffff;
    border: 3px solid #000000;
    border-radius: 15px 255px 20px 25px / 255px 15px 25px 20px;
    box-shadow: 6px 6px 0px rgba(0,0,0,0.1);
    outline: none;
    text-align: center;
    font-family: var(--e-global-typography-text-font-family, sans-serif);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.12em;
    line-height: 1;
    color: #4a4a4a;
    text-transform: uppercase;
    transition: none;
    -webkit-appearance: none;
    appearance: none;
}

#yavu-finder-form-container .yavu-id-champ-chiffres {
    flex-grow: 5;
    max-width: 200px;
}

/* Exemple affiché tant que le champ est vide. */
#yavu-finder-form-container .yavu-id-champ::placeholder {
    color: #c4c4c4;
    opacity: 1;
}

#yavu-finder-form-container .yavu-id-champ:focus {
    border-color: #6dbf91;
}

/* Vert foncé : contraste de 7,9 sur blanc, quand le vert de la marque n'atteint pas 3. */
#yavu-finder-form-container .yavu-id-champ:focus-visible {
    outline: 3px solid #1b5e20;
    outline-offset: 1px;
    background-color: #e8f5e9;
}

#yavu-finder-form-container .yavu-id-cases-tiret {
    flex: 0 0 auto;
    padding: 0 2px;
    font-family: var(--e-global-typography-text-font-family, sans-serif);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: #000000;
    user-select: none;
}

#yavu-finder-form-container .yavu-id-noscript {
    color: #c62828;
    font-weight: 700;
    margin: 15px 0 0;
}

@media (max-width: 768px) {
    .yavu-form-step1-layout {
        flex-direction: column;
        width: 100%;
        align-items: center; /* Centrage vertical (qui devient horizontal en colonne) */
    }

    .yavu-step1-input {
        width: 100%;
        margin-bottom: 15px; /* Espacement avec le bouton */
    }

    .yavu-step1-btn {
        width: auto !important; /* Laisser le bouton prendre sa largeur naturelle */
        display: flex;
        justify-content: center;
    }
}

/* Étape 2 du trouveur sur téléphone : le champ du code postal au-dessus du
   bouton « Rechercher », les deux sur toute la largeur du formulaire, comme le
   groupe de l'identifiant de l'étape 1. Restreint à #step-2 : le formulaire de
   coupon et l'onglet « Mon point relais » gardent leur disposition. Les règles
   passent par l'identifiant du conteneur pour l'emporter sur celles du thème et
   sur la largeur automatique imposée au bouton plus haut. */
@media (max-width: 768px) {
    #yavu-finder-form-container #step-2 .yavu-search-form {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    #yavu-finder-form-container #step-2 .yavu-search-form .yavu-input-group {
        flex: 0 0 auto;
        width: 100%;
        box-sizing: border-box;
    }

    #yavu-finder-form-container #step-2 .yavu-search-form .yavu-btn {
        width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* Étapes */
.yavu-step {
    text-align: center;
    padding: 20px 0;
}

.yavu-step-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.yavu-step-description {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

.yavu-message {
    margin-top: 20px;
}

/* Bouton large */
.yavu-btn-large {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Résumé Étape 3 */
.yavu-summary {
    background: #f9f9f9;
    border: 3px solid #000;
    border-radius: 15px;
    padding: 25px;
    margin: 30px auto;
    max-width: 500px;
    text-align: left;
}

.yavu-summary-item {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.6;
}

.yavu-summary-item:last-child {
    margin-bottom: 0;
}

/* Liste de résultats Point Relais */
.yavu-results {
    margin-top: 30px;
}

.yavu-results-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.yavu-results-list {
    display: grid;
    gap: 15px;
    max-width: 700px;
    margin: 0 auto;
}

#yavu-finder-form-container .yavu-relay-card {
    background: #fff !important;
    border: 3px solid #000000 !important;
    border-radius: 15px 255px 20px 25px / 255px 15px 25px 20px !important;
    padding: 20px !important;
    text-align: left !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 6px 6px 0px rgba(0,0,0,0.1) !important;
}

#yavu-finder-form-container .yavu-relay-card:hover {
    border-color: #6dbf91 !important;
    transform: scale(1.02) !important;
    box-shadow: 8px 8px 0px rgba(109, 191, 145, 0.3) !important;
}

#yavu-finder-form-container .yavu-relay-card.selected {
    border-color: #6dbf91 !important;
    background: #f0fdf4 !important;
    box-shadow: 6px 6px 0px #6dbf91 !important;
}

.yavu-relay-card-name {
    font-weight: 700;
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.yavu-relay-card-address {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.yavu-relay-card-footer {
    text-align: right;
}

.yavu-select-relay-btn {
    background: #6dbf91 !important;
    color: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.yavu-select-relay-btn:hover {
    background: #5ea87f !important;
}

.yavu-relay-card.selected .yavu-select-relay-btn {
    background: #22c55e !important;
}

/* Bloc Succès + Marketing unifié (fond vert) */
.yavu-success-marketing-box {
    background: #e8f5e9;
    border: 3px solid #4CAF50;
    border-radius: 15px;
    padding: 40px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.yavu-download-section {
    margin-bottom: 0;
}

.yavu-coupon-section {
    margin-top: 0;
}

.yavu-success-title {
    font-size: 24px;
    font-weight: 700;
    color: #2e7d32;
    margin-bottom: 15px;
}

.yavu-success-text {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
}

.yavu-link {
    color: #6dbf91;
    text-decoration: underline;
    font-weight: 700;
}

.yavu-marketing-title {
    font-size: 22px;
    font-weight: 700;
    color: #2e7d32;
    margin-bottom: 15px;
}

.yavu-marketing-text {
    font-size: 16px;
    color: #1b5e20;
    line-height: 1.6;
    margin-bottom: 25px;
}

.yavu-coupon-form {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.yavu-btn-marketing {
    background-color: #4CAF50 !important;
}

.yavu-btn-marketing:hover {
    background-color: #388E3C !important;
}

.yavu-btn-marketing:disabled {
    background-color: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* Responsive Nouveau Formulaire */
@media (max-width: 768px) {
    .yavu-step-title {
        font-size: 22px;
    }

    .yavu-step-description {
        font-size: 14px;
    }

    .yavu-coupon-form {
        flex-direction: column;
        width: 100%;
    }

    .yavu-coupon-form .yavu-input-group,
    .yavu-coupon-form .yavu-btn {
        width: 100%;
    }

    .yavu-relay-card {
        padding: 15px;
    }

    .yavu-relay-card-name {
        font-size: 16px;
    }
}

/* Cartes "Mes Lunettes YAVU" sur téléphone : le tbody doit être en bloc,
   sinon le navigateur l'enveloppe dans une boîte de tableau anonyme dont la
   largeur se réduit au contenu et les cartes ne remplissent pas le cadre. */
@media (max-width: 768px) {
    .yavu-mes-lunettes .yavu-lunettes-table,
    .yavu-mes-lunettes .yavu-lunettes-table tbody,
    .yavu-mes-lunettes .yavu-lunettes-table tr,
    .yavu-mes-lunettes .yavu-lunettes-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .yavu-mes-lunettes .yavu-lunettes-table {
        white-space: normal;
        overflow-x: visible;
        padding: 12px;
    }

    .yavu-mes-lunettes .yavu-lunettes-table tr:last-child {
        margin-bottom: 0;
    }

    /* Groupe de l'identifiant sur téléphone : toute la largeur du formulaire et
       la hauteur du bouton (63 px), pour que le champ des chiffres reste
       nettement plus large que celui des lettres. */
    #yavu-finder-form-container .yavu-id-cases {
        flex: 0 0 auto;
        align-self: stretch;
        width: 100%;
        height: 63px;
        gap: 6px;
        margin-bottom: 15px;
    }

    /* La tache verte de la section de renvoi, pivotée de 15 degrés, dépasse à
       droite de l'écran une fois la section empilée et haute : la page devient
       plus large que le téléphone. Le thème impose sa rotation avec la priorité maximale. */
    body.page-id-45 #renvoyer.yavu-blob-3::before {
        transform: none !important;
    }
}