﻿/* ============================================
   Moovalto - FORM INPUTS COMPONENT
   Styles génériques pour les inputs de formulaire
   ============================================ */

/* Input de base */
.form-input {
    height: 56px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: var(--font-size-base);
    background: var(--color-background);
    box-sizing: border-box;
    outline: none;
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
    outline: none;
}


/* Input avec icône calendrier */
.form-input-with-icon {
    position: relative;
}

.form-input-with-icon .form-input {
    position: relative;
    z-index: 5;
    background: var(--color-background);
}

.calendar-icon,
.address-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    opacity: 0.6;
    pointer-events: none;
    z-index: 100;
}

/* Calendrier interactif */
.date-display-field {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--color-text-primary);
    padding-left: 16px; /* Même padding que les autres inputs */
}

.date-display-field #selected-date {
    margin-left: 28px; /* Espace pour l'icône calendrier (emoji 📅 largeur ~20px + espace) */
}

/* Padding pour les inputs d'adresse pour laisser la place à l'icône fixe */
.form-address-1,
.form-address-2 {
    padding-left: 44px !important; /* Espace pour l'icône (16px position + 20px emoji + 8px marge) */
}

/* Styles pour le dropdown Google Places */
.pac-container {
    border-radius: 8px;
    margin-top: 4px !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--color-border) !important;
    font-family: var(--font-family-primary) !important;
    border-top: none !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}

.pac-container::after {
    display: none !important; /* Supprime la fine barre du bas ajoutée par Google */
    content: none !important;
    background: none !important;
    height: 0 !important;
}

/* Hide Google branding line after pac-container (only target the powered-by logo) */
.pac-container .pac-logo::after {
    display: none !important;
}

.pac-item {
    padding: 8px 12px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    border: none !important;
    border-top: none !important;
}

.pac-item:hover {
    background: var(--color-surface);
}

.pac-icon {
    display: none !important; /* Cache l'icône par défaut de Google */
}

.pac-item-query {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

/* Force la suppression de toute bordure ou ligne sous le container */
.pac-container,
.pac-container * {
    border-bottom: none !important;
}
