/**
 * HAB Frontend — Styles CSS
 * Compatible avec le thème Houzez (Bootstrap 3/4)
 * Devise : XOF (FCFA) — Contexte : Côte d'Ivoire
 */

/* ── Section principale ─────────────────────────────────────────────────── */
.hab-booking-section {
    margin: 3.5rem 0 1rem 0 !important;
    padding: 2rem !important;
    background: #f8fcf9 !important; /* Very subtle green tint to match the site's brand */
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #0BA460 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.05) !important;
    font-family: inherit;
    clear: both;
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.hab-booking-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.hab-booking-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.hab-booking-title {
    margin: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 600;
    color: #1a202c;
    flex: 1;
}

.hab-booking-price {
    background: #2d7dd2;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    padding: .3rem .9rem;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: .02em;
}

/* ── Zones CTA ───────────────────────────────────────────────────────────── */
.hab-booking-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hab-cta-message {
    margin: 0;
    flex: 1;
    color: #4a5568;
    font-size: .95rem;
    line-height: 1.5;
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.hab-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem;
    padding: .65rem 1.6rem !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all .2s ease !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
.hab-btn:hover { transform: translateY(-1px); text-decoration: none !important; box-shadow: 0 4px 6px rgba(0,0,0,0.15) !important;}
.hab-btn:active { transform: translateY(0); }

.hab-btn-primary {
    background: #2d7dd2 !important;
    color: #fff !important;
}
.hab-btn-primary:hover { background: #1e6ab8 !important; color: #fff !important; }

.hab-btn-secondary {
    background: #fff !important;
    color: #0BA460 !important;
    border: 2px solid #0BA460 !important;
}
.hab-btn-secondary:hover { background: #0BA460 !important; color: #fff !important; }

.hab-btn-success {
    background: #0BA460 !important; /* Green matching Paystack brand in site */
    color: #fff !important;
    font-size: 1rem !important;
    padding: .8rem 2rem !important;
    border-radius: 8px !important;
}
.hab-btn-success:hover { background: #098850 !important; color: #fff !important; }

/* ── Pendng sync ─────────────────────────────────────────────────────────── */
.hab-pending-sync .hab-cta-message {
    font-style: italic;
    color: #718096;
}

/* ── Modal Amelia ────────────────────────────────────────────────────────── */
.hab-amelia-modal .modal-dialog { max-width: 860px; }
.hab-amelia-modal .modal-header {
    background: linear-gradient(135deg, #2d7dd2 0%, #1a5fa8 100%);
    color: #fff;
    border-radius: 8px 8px 0 0;
    padding: 1rem 1.5rem;
}
.hab-amelia-modal .modal-title { color: #fff; font-size: 1.1rem; }
.hab-amelia-modal .modal-header .close { color: #fff; opacity: .8; font-size: 1.4rem; }
.hab-amelia-modal .modal-header .close:hover { opacity: 1; }
.hab-amelia-modal .modal-body {
    padding: 1.5rem;
    min-height: 400px;
}
.hab-amelia-modal .modal-content {
    border: none;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
}

/* ── Amelia step booking overrides (compatibilité thème Houzez) ─────────── */
.hab-amelia-body .amelia-app-booking,
.hab-amelia-body .amelia-app-step-booking {
    width: 100% !important;
    max-width: 100% !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .hab-booking-header { flex-direction: column; align-items: flex-start; }
    .hab-booking-cta    { flex-direction: column; align-items: stretch; }
    .hab-btn            { justify-content: center; }
    .hab-amelia-modal .modal-dialog { margin: .5rem; }
}

/* ── Champ "Autre localité" — Formulaire d'enquête (inquiry-form) ────────── */
/*
 * CORRECTION WRAP_QUARTIER (wrap_quartier.md)
 * Le .inquiry-other-locality-wrap est maintenant placé APRÈS
 * .elementor-field.elementor-select-wrapper (hors du .dropdown.bootstrap-select).
 * Ces règles garantissent l'affichage correct dans le col-33 parent.
 */

/* Masqué par défaut — affiché uniquement quand la classe .visible est ajoutée */
.elementor-field-group .inquiry-other-locality-wrap {
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 0;
    box-sizing: border-box;
    /* Transition douce pour l'apparition */
    animation: hab-slide-down 0.25s ease;
}

.elementor-field-group .inquiry-other-locality-wrap.visible {
    display: block;
}

/* Label descriptif au-dessus du champ texte */
.elementor-field-group .inquiry-other-locality-wrap .inquiry-other-locality-label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    font-style: italic;
}

/* Champ texte pleine largeur */
.elementor-field-group .inquiry-other-locality-wrap .elementor-field,
.elementor-field-group .inquiry-other-locality-wrap input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

/* Animation d'entrée */
@keyframes hab-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Isolation : ne pas altérer le wrap de la Commune (logique Houzez native intacte) */
/* .elementor-field-group-bf1d035 .inquiry-other-locality-wrap { } */