/* ---------------------------------------------------------------------
   Bayehon booking widget — styles
   All rules scoped under .bb-* so they cannot leak into the host page.
   Uses CSS custom properties so the host can override colors via
   inline `style="--bb-accent: #..."` on the mount node.
   --------------------------------------------------------------------- */

.bb-widget {
    --bb-accent:        #2c5e88;
    --bb-accent-soft:   #d8e6f0;
    --bb-text:          #1a1a1a;
    --bb-muted:         #6a6a6a;
    --bb-border:        #d8d8d8;
    --bb-booked:        #f4c4c4;
    --bb-buffer:        #fbe5b4;
    --bb-blackout:      #999;
    --bb-past:          #f3f3f3;
    --bb-error:         #a50e0e;
    --bb-success:       #137333;

    font: 14px/1.5 system-ui, -apple-system, sans-serif;
    color: var(--bb-text);
    max-width: 720px;
    margin: 0 auto;
}

.bb-widget *,
.bb-widget *::before,
.bb-widget *::after { box-sizing: border-box; }

/* --- Promo banner (best active promotion of the moment) ----- */
.bb-promo-banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .9rem;
    margin: 0 0 .85rem;
    background: linear-gradient(95deg, #fff5e1, #fff9ee);
    border: 1px solid #f0d49a;
    border-left: 4px solid #d99000;
    border-radius: 6px;
    font-size: .92rem;
    line-height: 1.4;
    color: #5a4400;
}
.bb-promo-hidden { display: none; }
.bb-promo-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}
.bb-promo-text {
    flex: 1;
}

/* --- Address autocomplete (Photon) ---------------------------- */
.bb-address-search {
    position: relative;
}
.bb-address-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--bb-border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    z-index: 5;
    max-height: 240px;
    overflow-y: auto;
}
.bb-address-suggestion {
    padding: .5rem .75rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: .9rem;
}
.bb-address-suggestion:last-child { border-bottom: none; }
.bb-address-suggestion:hover {
    background: var(--bb-accent-soft);
}

/* --- Terms acceptance link styling --------------------------- */
.bb-terms-link {
    color: var(--bb-accent);
    text-decoration: underline;
    font-weight: 500;
}

/* --- "Bon à savoir" info block --------------------------------- */
.bb-facts {
    margin: 1.25rem 0 0;
    padding: .9rem 1.1rem;
    background: #f6f8fa;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    font-size: .88rem;
    line-height: 1.5;
}
.bb-facts-title {
    margin: 0 0 .5rem;
    font-size: .95rem;
    color: var(--bb-accent);
}
.bb-facts-list {
    margin: 0;
    padding: 0 0 0 1.1rem;
    color: var(--bb-text);
}
.bb-facts-list li {
    margin-bottom: .2rem;
}
.bb-facts-list li:last-child {
    margin-bottom: 0;
}
.bb-facts-terms {
    display: inline-block;
    margin-top: .55rem;
    color: var(--bb-accent);
    text-decoration: none;
    font-weight: 500;
}
.bb-facts-terms:hover {
    text-decoration: underline;
}

.bb-widget button {
    font: inherit;
    color: inherit;
    background: none;
    border: 1px solid var(--bb-border);
    border-radius: 4px;
    padding: .35rem .75rem;
    cursor: pointer;
}
.bb-widget button:hover:not(:disabled) { background: var(--bb-accent-soft); }
.bb-widget button:disabled { opacity: .5; cursor: not-allowed; }
.bb-widget button.bb-primary {
    background: var(--bb-accent);
    color: white;
    border-color: var(--bb-accent);
    padding: .6rem 1.2rem;
    font-weight: 600;
}
.bb-widget button.bb-primary:hover:not(:disabled) { filter: brightness(1.1); }

/* --- Header (nav between months) --------------------------------- */
.bb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: .5rem;
}
.bb-title {
    font-weight: 600;
    font-size: 1.1rem;
    flex: 1;
    text-align: center;
}

/* --- Two-month grid --------------------------------------------- */
.bb-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
@media (max-width: 600px) {
    .bb-months { grid-template-columns: 1fr; gap: 1.5rem; }
}

.bb-month-name {
    font-weight: 600;
    margin-bottom: .5rem;
    text-align: center;
}

.bb-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.bb-dow {
    text-align: center;
    font-size: .75rem;
    color: var(--bb-muted);
    padding-bottom: .25rem;
}

.bb-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
}
.bb-day.bb-empty       { cursor: default; }
.bb-day.bb-free:hover  { background: var(--bb-accent-soft); }
.bb-day.bb-booked      { background: var(--bb-booked); cursor: not-allowed; text-decoration: line-through; }
/* Partial-day "buffer" cells: half the cell coloured with the booked tint
   on a 45° diagonal. Visually conveys "partially blocked / transition" —
   no extra legend entry needed. */
.bb-day.bb-buffer-before {
    background: linear-gradient(45deg, transparent 50%, var(--bb-booked) 50%);
    cursor: not-allowed;
}
.bb-day.bb-buffer-after {
    background: linear-gradient(45deg, var(--bb-booked) 50%, transparent 50%);
    cursor: not-allowed;
}
.bb-day.bb-blackout    { background: var(--bb-blackout); color: white; cursor: not-allowed; }
.bb-day.bb-past        { background: var(--bb-past); color: var(--bb-muted); cursor: not-allowed; }
.bb-day.bb-in-range    { background: var(--bb-accent-soft); }
.bb-day.bb-selected    { background: var(--bb-accent); color: white; font-weight: 600; }

/* --- Legend ----------------------------------------------------- */
.bb-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    font-size: .85rem;
    color: var(--bb-muted);
}
.bb-legend-item { display: flex; align-items: center; gap: .35rem; }
.bb-period-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: -0.5rem 0 1rem;
    font-size: .8rem;
    color: var(--bb-muted);
}
.bb-period-legend .bb-legend-item { display: inline-flex; }
.bb-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.1);
}
/* Per-status swatch colors (mirrors .bb-day.bb-* rules) */
.bb-legend-swatch.bb-free     { background: white; }
.bb-legend-swatch.bb-booked   { background: var(--bb-booked); }
.bb-legend-swatch.bb-buffer   { background: var(--bb-buffer); }
.bb-legend-swatch.bb-blackout { background: var(--bb-blackout); }
.bb-legend-swatch.bb-selected { background: var(--bb-accent); }

/* --- Selection summary + quote ---------------------------------- */
.bb-summary {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    background: #fafafa;
}
.bb-summary.bb-error { border-color: var(--bb-error); background: #fdf3f3; }

.bb-row { display: flex; justify-content: space-between; padding: .25rem 0; }
.bb-row.bb-total { font-weight: 600; border-top: 1px solid var(--bb-border); margin-top: .5rem; padding-top: .5rem; }
.bb-row.bb-discount { color: var(--bb-success); }

.bb-msg-error   { color: var(--bb-error); font-weight: 600; }
.bb-msg-info    { color: var(--bb-muted); font-style: italic; }

/* --- Booking form ---------------------------------------------- */
.bb-form { display: grid; gap: .75rem; margin-top: 1rem; }

/* --- 24h approval intro box ----------------------------------- */
.bb-approval-intro {
    background: var(--bb-accent-soft);
    border-left: 4px solid var(--bb-accent);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: .5rem;
}
.bb-approval-intro-title {
    margin: 0 0 .5rem;
    font-size: 1rem;
    color: var(--bb-accent);
}
.bb-approval-intro-body {
    white-space: pre-line;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--bb-text);
}
.bb-approval-notice {
    margin-top: .25rem;
    font-size: .85rem;
}
.bb-form-row { display: grid; gap: .25rem; }
.bb-form-row label { font-size: .85rem; font-weight: 500; }
.bb-form-row input,
.bb-form-row select {
    font: inherit;
    padding: .5rem;
    border: 1px solid var(--bb-border);
    border-radius: 4px;
}
.bb-form-row input:focus,
.bb-form-row select:focus {
    outline: 2px solid var(--bb-accent);
    outline-offset: -1px;
    border-color: var(--bb-accent);
}
.bb-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    /* Keep each cell at its natural height ; without this the row's
       shortest cell (e.g. "Téléphone") would stretch to match the
       tallest one (e.g. "Nombre de personnes" with its help text)
       and its label would float misaligned with the neighbour's. */
    align-items: start;
}
@media (max-width: 500px) {
    .bb-form-grid { grid-template-columns: 1fr; }
}

.bb-consent {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    padding: .75rem;
    background: #fff8e1;
    border-radius: 4px;
    font-size: .9rem;
}
.bb-consent input { margin-top: .15rem; }

.bb-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

/* Honeypot — invisible to humans, visible to most bots */
.bb-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}