/* _shared/css/booking.css: the booking dialog and the big "book" button (dexo#133).
   Colours come from the tokens, so each site's accent applies. */

.bk { margin: auto; border: 0; padding: var(--space-md); border-radius: 16px; width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--color-white); color: var(--color-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); }
.bk::backdrop { background: rgba(20, 20, 20, 0.5); }
.bk h2 { font-family: var(--font-sans); font-weight: 400; font-size: 1.5rem; margin: 0 2.5rem var(--space-sm) 0; outline: none; }
.bk h2[hidden] { display: none; }
.bk [hidden] { display: none; }
.bk-close { position: absolute; top: 0.9rem; right: 1rem; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: transparent; color: var(--color-ink-light); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.bk-close:hover { background: var(--color-surface-warm); }

.bk-pick { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-md); }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.bk-month { font-weight: 500; text-transform: capitalize; }
.bk-nav { width: 2.2rem; height: 2.2rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-white); color: var(--color-ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.bk-nav:disabled { opacity: 0.3; cursor: default; }
.bk-weekdays, .bk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-weekdays span { text-align: center; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-muted); padding-bottom: 4px; }
.bk-days button { aspect-ratio: 1; border: 0; border-radius: 8px; background: var(--color-accent-bg); color: var(--color-accent); font: inherit; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; }
.bk-days button:hover:not(:disabled) { background: var(--color-accent); color: var(--color-white); }
.bk-days button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-white); }
.bk-days button:disabled { background: transparent; color: var(--color-ink-muted); opacity: 0.45; cursor: default; font-weight: 400; }
.bk-days[aria-busy="true"] { opacity: 0.5; }

.bk-slots h3 { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500; margin: 0 0 0.15rem; }
.bk-tz { margin: 0 0 0.7rem; font-size: 0.8rem; color: var(--color-ink-muted); }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 8px; align-content: start; }
.bk-times button { padding: 0.6rem 0.4rem; border: 1px solid var(--color-accent); border-radius: 8px; background: var(--color-white); color: var(--color-accent); font: inherit; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; }
.bk-times button:hover { background: var(--color-accent); color: var(--color-white); }

.bk-form { display: flex; flex-direction: column; gap: 0.9rem; }
.bk-chosen { margin: 0; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--color-accent-bg); }
.bk-chosen strong { font-weight: 500; }
.bk-link { margin-left: 0.5rem; border: 0; background: none; color: var(--color-accent); font: inherit; font-size: 0.88rem; text-decoration: underline; cursor: pointer; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.bk-form label { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; font-weight: 500; color: var(--color-ink-light); }
.bk-form input, .bk-form textarea { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-white); color: var(--color-ink); font: inherit; }
.bk-form textarea { resize: vertical; }
.bk-form [aria-invalid="true"] { border-color: #b3261e; }
.bk-consent { margin: 0; font-size: 0.8rem; color: var(--color-ink-muted); }
.bk-consent a { color: inherit; }
.bk-submit { align-self: flex-start; padding: 0.8rem 1.8rem; border: 0; border-radius: 8px; background: var(--color-accent); color: var(--color-white); font: inherit; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.bk-submit:hover { background: var(--color-accent-light); }
.bk-submit:disabled { opacity: 0.6; cursor: wait; }
.bk-status { min-height: 1.4em; margin: 0.8rem 0 0; font-size: 0.9rem; color: #b3261e; }
.bk-status:empty { margin: 0; min-height: 0; }

.bk-done { padding: var(--space-md) 0; }
.bk-done p { margin: 0 0 0.7rem; color: var(--color-ink-light); }
.bk-done .bk-done-title { font-family: var(--font-sans); font-size: 1.5rem; color: var(--color-ink); outline: none; }
.bk-done [data-bk-done-when] { font-weight: 500; color: var(--color-ink); }

.bk button:focus-visible, .bk input:focus-visible, .bk textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (max-width: 640px) {
    .bk { padding: 1.1rem; }
    .bk-pick, .bk-row { grid-template-columns: 1fr; }
    .bk-days button { aspect-ratio: auto; min-height: 2.6rem; }
}

/* dexo.ch Bilan Numérique: the big button */
.hc-btn { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: var(--space-sm); padding: 1.05rem 2.2rem; border-radius: 12px; background: var(--color-accent); color: var(--color-white); font-size: 1.1rem; font-weight: 500; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); transition: background 0.2s, transform 0.15s, box-shadow 0.2s; }
.hc-btn:hover { background: var(--color-accent-light); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); }
.hc-btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.hc-btn svg { width: 1.3em; height: 1.3em; flex: none; }
@media (prefers-reduced-motion: reduce) { .bk *, .hc-btn { transition: none; } .hc-btn:hover { transform: none; } }