/* ============================================================
   Couleurs du thème RestaurantDR — www.restaurantdr.be
   Même palette que les emails transactionnels (class-rr-email.php)
   ============================================================ */
:root {
    --rr-primary: #AF8E49;
    --rr-primary-dark: #8f7239;
    --rr-primary-light: #f5efe2;
    --rr-text-on-primary: #FFFFFF;

    --rr-ink: #2b2620;
    --rr-ink-soft: #6b5f4e;
    --rr-line: #e7e0d0;
    --rr-success-bg: #e9f2e6;
    --rr-success-ink: #3d6b32;
    --rr-pending-bg: #faf1de;
    --rr-pending-ink: #8f7239;
    --rr-neutral-bg: #efece5;
    --rr-neutral-ink: #8a8071;
}

/* ============================================================
   Restaurant Reservations — Public Widget
   Compatible Nicepage (isolation complète)
   ============================================================ */

/* ── Reset d'isolation contre Nicepage ───────────────────────
   Nicepage écrase beaucoup de styles natifs. On force les nôtres
   uniquement à l'intérieur du widget, sans toucher au reste du site.
   ──────────────────────────────────────────────────────────── */
.rr-booking,
.rr-booking * {
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
}

/* Neutralise les resets Nicepage sur les éléments de formulaire */
.rr-booking input,
.rr-booking select,
.rr-booking textarea,
.rr-booking button {
    font-family: inherit !important;
    line-height: normal !important;
    border-radius: 4px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    /* Nicepage force parfois margin/padding à 0 */
    margin: 0 !important;
}

/* Nicepage ajoute parfois un outline coloré au focus */
.rr-booking input:focus,
.rr-booking select:focus,
.rr-booking textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--rr-primary) !important;
}

/* Nicepage peut forcer les liens en couleur sur les boutons */
.rr-booking button,
.rr-booking button:hover,
.rr-booking button:focus,
.rr-booking button:visited {
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Nicepage force parfois les images/svg dans les boutons */
.rr-booking button img,
.rr-booking button svg {
    display: none !important;
}

/* ── Conteneur principal ──────────────────────────────────── */
.rr-booking {
    max-width: 520px !important;
    margin: 0 auto !important;
    font-family: inherit;
    color: inherit;
    /* Crée un nouveau contexte de stacking (évite les z-index Nicepage) */
    position: relative;
    z-index: 1;
}

/* ── Barre de progression ─────────────────────────────────── */
.rr-booking .rr-progress-wrap { margin-bottom: 22px !important; }
.rr-booking .rr-progress { display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 8px !important; }
.rr-booking .rr-seg { flex: 1 !important; height: 3px !important; border-radius: 2px !important; background: var(--rr-neutral-bg) !important; overflow: hidden !important; }
.rr-booking .rr-seg i { display: block !important; height: 100% !important; width: 0% !important; background: var(--rr-primary) !important; transition: width .3s ease !important; }
.rr-booking .rr-seg.done i { width: 100% !important; }
.rr-booking .rr-seg.current i { width: 55% !important; }
.rr-booking .rr-steplabel { display: flex !important; justify-content: space-between !important; font-size: 11px !important; color: var(--rr-ink-soft) !important; letter-spacing: .02em !important; }
.rr-booking .rr-steplabel b { color: var(--rr-ink) !important; font-weight: 700 !important; }
.rr-booking .rr-context {
    display: none; align-items: center !important; gap: 8px !important; font-size: 12.5px !important; color: var(--rr-primary-dark) !important;
    background: var(--rr-primary-light) !important; border-radius: 100px !important; padding: 6px 12px !important; margin-top: 10px !important; width: fit-content !important;
}
.rr-booking .rr-context.show { display: flex !important; }
.rr-booking .rr-context .rr-ctx-sep { opacity: .5 !important; }

/* ── Steps ────────────────────────────────────────────────── */
.rr-step {
    animation: rrFadeIn .2s ease;
}
@keyframes rrFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rr-step-title {
    font-size: 1.1em !important;
    font-weight: 700 !important;
    margin: 0 0 20px !important;
    padding: 0 0 10px !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    /* Nicepage peut forcer une couleur de heading */
    color: inherit !important;
    background: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ── Champs ───────────────────────────────────────────────── */
.rr-field {
    margin-bottom: 16px !important;
}

.rr-field label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    margin-bottom: 5px !important;
    padding: 0 !important;
    color: inherit !important;
    opacity: .65;
    /* Nicepage stylise parfois les labels comme des titres */
    border: none !important;
    background: none !important;
    line-height: normal !important;
}

.rr-field input,
.rr-field select,
.rr-field textarea {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: inherit !important;
    background: #fff !important;
    transition: border-color .15s;
    /* Nicepage peut ajouter des ombres portées */
    box-shadow: none !important;
    /* Nicepage peut forcer une hauteur fixe */
    height: auto !important;
    min-height: unset !important;
}

.rr-field select {
    /* Chevron natif supprimé par -webkit-appearance, on le remet manuellement */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 32px !important;
    cursor: pointer;
}

.rr-field input:focus,
.rr-field select:focus,
.rr-field textarea:focus {
    border-color: var(--rr-primary) !important;
}

.rr-field textarea {
    min-height: 80px !important;
    resize: vertical;
}

/* ── Compteur de couverts ─────────────────────────────────── */
.rr-booking .rr-stepper { display: flex !important; align-items: center !important; gap: 14px !important; }
.rr-booking .rr-stepper-btn {
    width: 40px !important; height: 40px !important; border-radius: 6px !important; border: 1px solid #d0d0d0 !important;
    background: #fff !important; font-size: 18px !important; line-height: 1 !important; color: var(--rr-ink) !important;
    cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important;
    transition: border-color .15s, color .15s !important; padding: 0 !important;
}
.rr-booking .rr-stepper-btn:hover:not(:disabled) { border-color: var(--rr-primary) !important; color: var(--rr-primary-dark) !important; }
.rr-booking .rr-stepper-btn:disabled { opacity: .35 !important; cursor: not-allowed !important; }
.rr-booking .rr-stepper-count { font-size: 22px !important; font-weight: 700 !important; min-width: 64px !important; text-align: center !important; font-variant-numeric: tabular-nums !important; }
.rr-booking .rr-stepper-unit { display: block !important; font-size: 11px !important; font-weight: 600 !important; color: var(--rr-ink-soft) !important; text-transform: uppercase !important; letter-spacing: .05em !important; margin-top: 2px !important; }
.rr-booking .rr-more-link { display: none; font-size: 12.5px !important; color: var(--rr-primary-dark) !important; margin-top: 10px !important; text-decoration: underline !important; cursor: default !important; }
.rr-booking .rr-more-link.show { display: inline-block; }

/* ── Bouton principal ─────────────────────────────────────── */
.rr-primary-btn {
    display: block !important;
    width: 100% !important;
    padding: 13px 20px !important;
    background: var(--rr-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-top: 8px !important;
    transition: background .15s !important;
    font-family: inherit !important;
    letter-spacing: .2px !important;
    text-align: center !important;
    /* Nicepage peut ajouter une ombre ou un dégradé sur les boutons */
    box-shadow: none !important;
    background-image: none !important;
    text-shadow: none !important;
}
.rr-primary-btn:hover  { background: var(--rr-primary-dark) !important; color: #fff !important; }
.rr-primary-btn:focus  { background: var(--rr-primary-dark) !important; color: #fff !important; }
.rr-primary-btn:active { background: var(--rr-primary-dark) !important; }
.rr-primary-btn:disabled {
    background: #aaa !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* ── Bouton retour ────────────────────────────────────────── */
.rr-back {
    background: none !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: #666 !important;
    cursor: pointer !important;
    margin: 0 0 16px !important;
    font-family: inherit !important;
    text-decoration: underline !important;
    display: inline-block !important;
    box-shadow: none !important;
    width: auto !important;
}
.rr-back:hover { color: var(--rr-primary) !important; }

/* ── Cartes de service ────────────────────────────────────── */
.rr-services-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    /* Nicepage peut utiliser flex sur ses conteneurs et casser le layout */
    width: 100% !important;
}

.rr-service-option {
    border: 1px solid var(--rr-line) !important;
    border-radius: 8px !important;
    padding: 13px 15px !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    transition: border-color .15s, background .15s, box-shadow .15s;
    font-size: 14px !important;
    background: #fff !important;
    color: inherit !important;
    width: 100% !important;
    text-align: left !important;
    box-shadow: none !important;
    background-image: none !important;
    position: relative !important;
}
.rr-service-option:hover:not(.is-full) { border-color: var(--rr-primary) !important; box-shadow: 0 2px 10px -4px rgba(175,142,73,.35) !important; }
.rr-service-option.selected  { border-color: var(--rr-primary) !important; background: var(--rr-primary-light) !important; box-shadow: none !important; }
.rr-service-option.selected::before {
    content: "" !important; position: absolute !important; left: 0 !important; top: 10px !important; bottom: 10px !important;
    width: 3px !important; border-radius: 0 3px 3px 0 !important; background: var(--rr-primary) !important;
}
.rr-service-option.is-full   { opacity: .45; cursor: not-allowed !important; }

/* Service encore sélectionnable (routage vers la liste d'attente) : ne doit pas
   paraître désactivé, contrairement à un service réellement complet. */
.rr-service-option.is-full.is-waitlist { opacity: 1; cursor: pointer !important; }
.rr-service-option.is-full.is-waitlist:hover { border-color: #d9a441 !important; box-shadow: 0 2px 10px -4px rgba(217,164,65,.35) !important; }
.rr-service-option.is-full.is-waitlist.selected { border-color: #d9a441 !important; background: var(--rr-pending-bg) !important; }
.rr-service-option.is-full.is-waitlist.selected::before { background: #d9a441 !important; }

/* ── Coche de sélection ───────────────────────────────────── */
.rr-booking .rr-check {
    width: 20px !important; height: 20px !important; border-radius: 50% !important; border: 1.5px solid var(--rr-primary) !important;
    flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #fff !important;
}
.rr-booking .rr-check svg { width: 11px !important; height: 11px !important; opacity: 0 !important; transition: opacity .15s !important; }
.rr-service-option.selected .rr-check,
.rr-booking .rr-zone-option.selected .rr-check { background: var(--rr-primary) !important; }
.rr-service-option.selected .rr-check svg,
.rr-booking .rr-zone-option.selected .rr-check svg { opacity: 1 !important; }

.rr-service-option .rr-svc-name {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: inherit !important;
}
.rr-service-option .rr-svc-meta {
    font-size: 12px !important;
    color: #888 !important;
    margin-top: 2px !important;
}
.rr-service-option .rr-svc-badge {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    padding: 4px 10px !important;
    border-radius: 100px !important;
    white-space: nowrap !important;
    flex-shrink: 0;
    margin-left: 12px !important;
}
.rr-service-option .rr-svc-badge.open { background: var(--rr-success-bg) !important; color: var(--rr-success-ink) !important; }
.rr-service-option .rr-svc-badge.full { background: var(--rr-neutral-bg) !important; color: var(--rr-neutral-ink) !important; }
.rr-service-option .rr-svc-badge.waitlist { background: var(--rr-pending-bg) !important; color: var(--rr-pending-ink) !important; }

/* ── Panneau d'informations (récap, confirmation, liste d'attente) ──────────
   Même composant que le bloc d'infos des emails transactionnels.       ── */
.rr-booking .rr-panel {
    background: var(--rr-primary-light) !important;
    border-left: 3px solid var(--rr-primary) !important;
    border-radius: 4px !important;
    padding: 2px 16px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}
.rr-booking .rr-panel:empty { display: none !important; }
.rr-booking .rr-row {
    display: flex !important; justify-content: space-between !important; align-items: baseline !important; gap: 12px !important;
    padding: 11px 0 !important; border-bottom: 1px solid rgba(175,142,73,.25) !important; font-size: 13.5px !important;
}
.rr-booking .rr-row:last-child { border-bottom: none !important; }
.rr-booking .rr-row .rr-k { font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--rr-primary-dark) !important; }
.rr-booking .rr-row .rr-v { font-weight: 600 !important; color: var(--rr-ink) !important; text-align: right !important; font-variant-numeric: tabular-nums !important; }

/* ── Messages d'état ──────────────────────────────────────── */
.rr-msg {
    padding: 11px 14px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    margin-bottom: 16px !important;
    /* Pas de display:block ici — le JS gère show()/hide() */
    line-height: 1.5 !important;
}
/* Quand le message est visible (show() ajoute display:block via jQuery) */
.rr-msg:not([style*="display: none"]):not([style*="display:none"]) {
    display: block;
}
.rr-error   { background: #fdedec !important; border: 1px solid #f5b7b1 !important; color: #c0392b !important; }
.rr-success { background: #eafaf1 !important; border: 1px solid #a9dfbf !important; color: #1e8449 !important; }

/* ── Écrans de fin (confirmation / liste d'attente) ──────────
   Même vocabulaire visuel que les emails : pastille de statut
   + panneau d'infos, pour boucler site ↔ email.            ── */
.rr-booking .rr-confirm { text-align: center !important; }
.rr-booking .rr-confirm h3 { margin: 0 0 8px !important; }
.rr-booking .rr-confirm p { color: var(--rr-ink-soft) !important; font-size: 13.5px !important; line-height: 1.6 !important; margin: 0 0 18px !important; }
.rr-booking .rr-confirm .rr-panel { text-align: left !important; }
.rr-booking .rr-pill {
    display: inline-block !important; padding: 5px 14px !important; border-radius: 100px !important;
    font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important;
    margin-bottom: 14px !important;
}
.rr-booking .rr-pill:empty { display: none !important; }
.rr-booking .rr-pill.success { background: var(--rr-success-bg) !important; color: var(--rr-success-ink) !important; }
.rr-booking .rr-pill.pending { background: var(--rr-pending-bg) !important; color: var(--rr-pending-ink) !important; }
.rr-booking .rr-emailnote {
    font-size: 12px !important; color: var(--rr-ink-soft) !important; border-top: 1px solid var(--rr-line) !important;
    padding-top: 14px !important; margin: 4px 0 0 !important; text-align: center !important;
}
.rr-booking .rr-emailnote:empty { display: none !important; padding: 0 !important; border: none !important; }

/* ── Spinner de chargement ────────────────────────────────── */
.rr-spinner {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #ddd !important;
    border-top-color: var(--rr-primary) !important;
    border-radius: 50% !important;
    animation: rrSpin .6s linear infinite !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    flex-shrink: 0;
}
@keyframes rrSpin { to { transform: rotate(360deg); } }

.rr-loading {
    text-align: center !important;
    padding: 24px 0 !important;
    color: #888 !important;
    font-size: 14px !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 540px) {
    .rr-booking { max-width: 100% !important; }
    .rr-service-option { flex-wrap: wrap !important; gap: 6px !important; }
    .rr-service-option .rr-svc-badge { margin-left: 0 !important; }
    .rr-primary-btn { font-size: 14px !important; padding: 12px 16px !important; }
}

/* ── Zones — choix d'emplacement ──────────────────────────── */
.rr-booking .rr-zones-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    text-align: left !important;
}
.rr-booking .rr-zone-option {
    border: 1px solid var(--rr-line) !important;
    border-radius: 8px !important;
    padding: 13px 15px !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    background: #fff !important;
    color: inherit !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    transition: border-color .15s, box-shadow .15s;
    position: relative !important;
    /* Nicepage ne doit pas centrer ni modifier ces blocs */
    margin: 0 !important;
    float: none !important;
}
.rr-booking .rr-zone-option:hover:not(.is-full) {
    border-color: var(--rr-primary) !important;
    box-shadow: 0 2px 10px -4px rgba(175,142,73,.35) !important;
}
.rr-booking .rr-zone-option.selected {
    border-color: var(--rr-primary) !important;
    background: var(--rr-primary-light) !important;
}
.rr-booking .rr-zone-option.selected::before {
    content: "" !important; position: absolute !important; left: 0 !important; top: 10px !important; bottom: 10px !important;
    width: 3px !important; border-radius: 0 3px 3px 0 !important; background: var(--rr-primary) !important;
}
.rr-booking .rr-zone-option.is-full {
    opacity: .4 !important;
    cursor: not-allowed !important;
}
.rr-booking .rr-zone-name {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: inherit !important;
    /* Nicepage peut centrer les textes dans ses sections */
    text-align: left !important;
}
/* Badges dans les zones — réutilise les classes de service */
.rr-booking .rr-zone-option .rr-svc-badge {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    padding: 4px 10px !important;
    border-radius: 100px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-left: 12px !important;
    text-align: center !important;
}
.rr-booking .rr-zone-option .rr-svc-badge.open {
    background: var(--rr-success-bg) !important;
    color: var(--rr-success-ink) !important;
}
.rr-booking .rr-zone-option .rr-svc-badge.full {
    background: var(--rr-neutral-bg) !important;
    color: var(--rr-neutral-ink) !important;
}

/* ── Bandeau d'information (haut du widget) ─────────────────── */
.rr-booking .rr-info-banner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: #1c1c2e !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 16px 18px !important;
    margin-bottom: 20px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    text-align: left !important;
}
.rr-booking .rr-info-icon {
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    border: 1.5px solid #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-style: italic !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    margin-top: 1px !important;
}
.rr-booking .rr-info-text {
    color: #fff !important;
    text-align: left !important;
}
.rr-booking .rr-info-sep {
    opacity: .5 !important;
    margin: 0 2px !important;
}

/* ── Step 0 — Message d'accueil ───────────────────────────────── */
.rr-booking .rr-intro-message {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: inherit !important;
    margin-bottom: 24px !important;
    padding: 18px 20px !important;
    background: var(--rr-primary-light) !important;
    border: 1px solid var(--rr-primary) !important;
    border-radius: 6px !important;
}
.rr-booking .rr-intro-message p {
    margin: 0 0 12px !important;
}
.rr-booking .rr-intro-message p:last-child {
    margin-bottom: 0 !important;
}
.rr-booking .rr-intro-message strong,
.rr-booking .rr-intro-message b {
    font-weight: 700 !important;
    color: var(--rr-primary-dark) !important;
}
.rr-booking .rr-intro-message a {
    color: var(--rr-primary-dark) !important;
    text-decoration: underline !important;
}