/* ==========================================================================
   site-brand.css — brings the Bootstrap 4 pages (header.php, registration,
   calendars, account…) in line with the Booking v2 look (book-v2.css):
   slate charcoal, orange CTA, muted teal, Nunito.

   Load AFTER bootstrap.min.css and style.css. Visual only: nothing here
   changes layout mechanics, visibility, or behaviour.
   ========================================================================== */

:root {
  --gf-bg: #edf1f4; --gf-surface: #fff; --gf-soft: #f1eeea; --gf-ink: #262f3a; --gf-muted: #6b7682; --gf-line: #d8dee4;
  --gf-brand: #303841; --gf-brand-ink: #f3f5f7; --gf-brand-soft: #3c4b53;
  --gf-accent: #5f9598; --gf-accent-ink: #fff; --gf-accent-soft: #e4eeef;
  --gf-cta: #ff5721; --gf-cta-hover: #e84d1a; --gf-cta-ink: #fff;
  --gf-ok: #2f7d5a; --gf-ok-bg: #e1f1ea; --gf-warn: #8a5a00; --gf-warn-bg: #fff3d6; --gf-bad: #c0392b; --gf-bad-bg: #fbe3e1;
  --gf-shadow: 0 12px 32px rgba(38,47,58,.14); --gf-r: 14px; --gf-r-sm: 8px;
  --gf-font: "Nunito", "Segoe UI", system-ui, sans-serif;
}

/* ---- Base ---- */
html, body { background: var(--gf-bg); }
body { font-family: var(--gf-font); color: var(--gf-ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--gf-font); color: var(--gf-ink); font-weight: 700; letter-spacing: -.01em; }
h1, .h1 { font-weight: 800; }
a { color: var(--gf-accent); }
a:hover { color: #4d7f82; }
.text-muted { color: var(--gf-muted) !important; }
.lead { color: var(--gf-muted); }
hr { border-top-color: var(--gf-line); }
.main-container { max-width: 1120px; }

/* ---- Buttons: pills, like .bk2 .btn ---- */
.btn { font-family: var(--gf-font); font-weight: 700; border-radius: 999px; padding: .55rem 1.15rem; line-height: 1.4; border-width: 1px; box-shadow: none; }
.btn-sm, .btn-group-sm > .btn { padding: .35rem .85rem; font-size: .85rem; }
.btn-lg, .btn-group-lg > .btn { padding: .75rem 1.5rem; font-size: 1.05rem; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(95,149,152,.35); }
.btn-primary { background: var(--gf-cta); border-color: var(--gf-cta); color: var(--gf-cta-ink); box-shadow: 0 6px 16px rgba(255,87,33,.3); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background: var(--gf-cta-hover); border-color: var(--gf-cta-hover); color: #fff; }
.btn-primary:disabled, .btn-primary.disabled { background: var(--gf-cta); border-color: var(--gf-cta); opacity: .45; box-shadow: none; }
.btn-secondary { background: var(--gf-brand); border-color: var(--gf-brand); color: var(--gf-brand-ink); }
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:not(:disabled):not(.disabled):active { background: var(--gf-brand-soft); border-color: var(--gf-brand-soft); color: #fff; }
.btn-success { background: var(--gf-accent); border-color: var(--gf-accent); color: #fff; }
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active { background: #4d7f82; border-color: #4d7f82; color: #fff; }
.btn-info { background: var(--gf-accent); border-color: var(--gf-accent); color: #fff; }
.btn-danger { background: var(--gf-bad); border-color: var(--gf-bad); }
.btn-warning { background: var(--gf-warn-bg); border-color: #f0d9a2; color: var(--gf-warn); }
.btn-light { background: var(--gf-surface); border-color: var(--gf-line); color: var(--gf-ink); }
.btn-dark { background: var(--gf-brand); border-color: var(--gf-brand); }
.btn-link { color: var(--gf-accent); font-weight: 600; }
.btn-outline-primary { color: var(--gf-cta); border-color: var(--gf-cta); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active { background: var(--gf-cta); border-color: var(--gf-cta); color: #fff; }
.btn-outline-secondary { color: var(--gf-ink); border-color: var(--gf-line); background: var(--gf-surface); }
.btn-outline-secondary:hover, .btn-outline-secondary:not(:disabled):not(.disabled):active { background: var(--gf-brand); border-color: var(--gf-brand); color: #fff; }
.btn-outline-success { color: var(--gf-accent); border-color: var(--gf-accent); }
.btn-outline-success:hover { background: var(--gf-accent); border-color: var(--gf-accent); color: #fff; }
.btn-outline-danger { color: var(--gf-bad); border-color: var(--gf-bad); }
.btn-outline-dark { color: var(--gf-brand); border-color: var(--gf-brand); }
.btn-outline-dark:hover { background: var(--gf-brand); color: #fff; }

/* ---- Forms ---- */
label, .col-form-label { font-weight: 600; color: var(--gf-muted); font-size: .9rem; }
.form-control, .custom-select { font-family: var(--gf-font); color: var(--gf-ink); background: var(--gf-surface); border: 1px solid var(--gf-line); border-radius: var(--gf-r-sm); padding: .55rem .75rem; height: auto; }
.form-control:focus, .custom-select:focus { border-color: var(--gf-accent); box-shadow: 0 0 0 3px rgba(95,149,152,.25); color: var(--gf-ink); }
.form-control::placeholder { color: #9aa4ae; }
.form-control[readonly], .form-control:disabled { background: var(--gf-soft); color: var(--gf-muted); }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--gf-bad); }
.form-control.is-valid, .was-validated .form-control:valid { border-color: var(--gf-ok); }
.form-text { color: var(--gf-muted); }
.input-group-text { background: var(--gf-soft); border-color: var(--gf-line); color: var(--gf-muted); border-radius: var(--gf-r-sm); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--gf-accent); border-color: var(--gf-accent); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--gf-accent); }

/* ---- Cards / panels ---- */
.card { border: 1px solid var(--gf-line); border-radius: var(--gf-r); box-shadow: 0 1px 2px rgba(38,47,58,.04); background: var(--gf-surface); }
.card-header { background: var(--gf-surface); border-bottom: 1px solid var(--gf-line); font-weight: 700; border-radius: var(--gf-r) var(--gf-r) 0 0 !important; }
.card-footer { background: var(--gf-soft); border-top: 1px solid var(--gf-line); border-radius: 0 0 var(--gf-r) var(--gf-r) !important; }
.card-title { font-weight: 700; }
.jumbotron { background: var(--gf-surface); border: 1px solid var(--gf-line); border-radius: var(--gf-r); }
.list-group-item { border-color: var(--gf-line); }
.list-group-item.active { background: var(--gf-brand); border-color: var(--gf-brand); }

/* ---- Alerts / badges ---- */
.alert { border: 0; border-radius: var(--gf-r-sm); font-weight: 500; }
.alert-success { background: var(--gf-ok-bg); color: var(--gf-ok); }
.alert-info { background: var(--gf-accent-soft); color: #3f6f72; }
.alert-warning { background: var(--gf-warn-bg); color: var(--gf-warn); }
.alert-danger { background: var(--gf-bad-bg); color: var(--gf-bad); }
.alert-secondary, .alert-light { background: var(--gf-soft); color: var(--gf-ink); }
.alert-primary { background: #ffe6dc; color: #9a3a14; }
.badge { font-weight: 700; border-radius: 999px; padding: .35em .7em; }
.badge-primary { background: var(--gf-cta); }
.badge-secondary { background: var(--gf-brand); }
.badge-success { background: var(--gf-ok); }
.badge-info { background: var(--gf-accent); }
.badge-warning { background: var(--gf-warn-bg); color: var(--gf-warn); }
.badge-danger { background: var(--gf-bad); }
.text-success { color: var(--gf-ok) !important; }
.text-danger { color: var(--gf-bad) !important; }
.text-primary { color: var(--gf-cta) !important; }
.text-info { color: var(--gf-accent) !important; }
.bg-dark { background-color: var(--gf-brand) !important; }
.bg-primary { background-color: var(--gf-cta) !important; }
.bg-success { background-color: var(--gf-ok) !important; }
.bg-info { background-color: var(--gf-accent) !important; }
.bg-light { background-color: var(--gf-soft) !important; }

/* ---- Tables ---- */
.table { color: var(--gf-ink); }
.table thead th { border-bottom: 2px solid var(--gf-line); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gf-muted); font-weight: 700; }
.table td, .table th { border-top-color: var(--gf-line); vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background: #f6f8fa; }
.table-hover tbody tr:hover { background: var(--gf-accent-soft); }
.thead-dark th { background: var(--gf-brand) !important; border-color: var(--gf-brand) !important; color: var(--gf-brand-ink) !important; }

/* ---- Modals ---- */
.modal-content { border: 0; border-radius: var(--gf-r); box-shadow: var(--gf-shadow); font-family: var(--gf-font); }
.modal-header { background: var(--gf-brand); color: var(--gf-brand-ink); border-bottom: 0; border-radius: var(--gf-r) var(--gf-r) 0 0; padding: 14px 20px; }
.modal-header .modal-title { color: var(--gf-brand-ink); font-weight: 700; }
.modal-header .close { color: var(--gf-brand-ink); opacity: .8; text-shadow: none; }
.modal-header .close:hover { opacity: 1; color: #fff; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--gf-line); background: var(--gf-soft); border-radius: 0 0 var(--gf-r) var(--gf-r); }

/* ---- Nav tabs / pagination / misc ---- */
.nav-tabs { border-bottom-color: var(--gf-line); }
.nav-tabs .nav-link { color: var(--gf-muted); font-weight: 600; border-radius: var(--gf-r-sm) var(--gf-r-sm) 0 0; }
.nav-tabs .nav-link.active { color: var(--gf-ink); border-color: var(--gf-line) var(--gf-line) #fff; }
.nav-pills .nav-link { border-radius: 999px; font-weight: 600; color: var(--gf-ink); }
.nav-pills .nav-link.active { background: var(--gf-brand); }
.page-link { color: var(--gf-accent); border-color: var(--gf-line); }
.page-item.active .page-link { background: var(--gf-brand); border-color: var(--gf-brand); }
.progress { border-radius: 999px; background: var(--gf-line); }
.progress-bar { background: var(--gf-accent); }
.dropdown-menu { border: 1px solid var(--gf-line); border-radius: 12px; box-shadow: var(--gf-shadow); }
.dropdown-item { font-weight: 500; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--gf-accent-soft); color: var(--gf-ink); }
.tooltip-inner { background: var(--gf-brand); border-radius: 8px; }
.close { color: var(--gf-ink); }

/* ==========================================================================
   Site nav — identical to .bknav in header-book.php, so every header matches.
   ========================================================================== */
.bknav { background: #303841; color: #f3f5f7; font-family: "Nunito", "Segoe UI", system-ui, sans-serif; border-bottom: 1px solid #3c4b53; position: relative; z-index: 1030; }
.bknav .in { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; }
.bknav .brand { display: flex; align-items: center; flex: none; }
.bknav .brand img { height: 44px; width: auto; display: block; }
.bknav .menus { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.bknav .links { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.bknav .links a, .bknav .links button { color: #f3f5f7; text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .92rem; background: transparent; border: 0; font: inherit; cursor: pointer; white-space: nowrap; line-height: 1.4; }
.bknav .links a:hover, .bknav .links button:hover { background: #3c4b53; color: #fff; }
.bknav .links a.on { background: #3c4b53; }
.bknav .links a.event { background: #ff5721; color: #fff; }
.bknav .links a.event:hover { background: #e84d1a; }
.bknav .right { margin-left: auto; flex: none; }
.bknav .dd { position: relative; }
.bknav .dd > button::after { content: " ▾"; font-size: .8em; opacity: .8; }
.bknav .dd .menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: #303841; border: 1px solid #46515c; border-radius: 12px; min-width: 220px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.35); z-index: 1040; }
.bknav .dd.right .menu { left: auto; right: 0; }
.bknav .dd.open .menu { display: block; }
.bknav .dd .menu a { display: block; border-radius: 8px; padding: 9px 12px; font-weight: 500; }
.bknav .dd .menu hr { border: 0; border-top: 1px solid #46515c; margin: 6px 4px; }
.bknav .burger { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 10px; border: 1px solid #46515c; background: transparent; color: #f3f5f7; font-size: 1.3rem; cursor: pointer; }
.bknav .chip { background: #5f9598; color: #fff; border-radius: 999px; padding: 4px 12px; font-size: .78rem; font-weight: 700; margin-right: 6px; }
@media (max-width: 1023px) {
  .bknav .burger { display: block; }
  .bknav .menus { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding-top: 8px; }
  .bknav .menus.open { display: flex; }
  .bknav .links { flex-direction: column; align-items: stretch; }
  .bknav .right { margin-left: 0; border-top: 1px solid #46515c; padding-top: 6px; margin-top: 4px; }
  .bknav .dd .menu { position: static; border: 0; box-shadow: none; padding: 0 0 0 16px; min-width: 0; }
  .bknav .links a, .bknav .links button { white-space: normal; }
  .bknav .dd > button { display: block; width: 100%; text-align: left; }
  .bknav .chip { display: inline-block; margin: 6px 14px; }
}
.bknav .in { flex-wrap: wrap; }
.bkbanner { background: #065f46; color: #ecfdf5; font-family: "Nunito", system-ui, sans-serif; font-size: 13px; padding: 8px 16px; text-align: center; }
.bkbanner .pill { display: inline-flex; align-items: center; gap: 6px; background: #064e3b; border-radius: 999px; padding: 4px 10px; margin: 2px 4px; font-weight: 700; }
.bkbanner .pill span { font-weight: 500; opacity: .9; }
.bkimp, .impersonation-info { background: #fff3d6 !important; color: #8a5a00; font-family: "Nunito", system-ui, sans-serif; font-size: .88rem; padding: 6px 16px !important; text-align: right; border-radius: var(--gf-r-sm); margin-bottom: 12px; }
.bkimp a, .impersonation-info a { color: #8a5a00; font-weight: 700; margin-left: 10px; }