﻿/* Solid rounded controls matching the WhatsApp action, with semantic colours. */
:root {
    --bks-control-radius: 0.75rem;
    --bks-control-font: 0.875rem;
}
/* Contact profiles are plain links, with the platform icons left unframed. */
.contact-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0;
    color: #e5e7eb;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}
.contact-social-link:hover > span:nth-child(2) {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.contact-social-link:focus-visible {
    outline: 2px solid #d4a017;
    outline-offset: 4px;
}
/* Currency menus use compact list rows; only the trigger is an action button. */
.bks-currency-picker { position: relative; flex-shrink: 0; width: max-content; }
.bks-currency-trigger.bks-button {
    display: flex;
    min-width: 5.5rem;
    min-height: 2.5rem;
    justify-content: space-between;
    gap: 0.625rem !important;
    list-style: none;
    user-select: none;
}
.bks-currency-trigger::-webkit-details-marker { display: none; }
.bks-currency-trigger::marker { content: ''; }
.bks-currency-trigger > svg { flex-shrink: 0; transition: transform 150ms ease; }
.bks-currency-picker[open] > summary > svg { transform: rotate(180deg); }
.bks-currency-picker[open] { z-index: 45; }
.bks-currency-panel {
    position: absolute; top: calc(100% + 0.5rem); right: 0;
    width: min(17rem, calc(100vw - 3rem));
    padding: 0.375rem;
    border: 1px solid #285141; border-radius: 0.75rem;
    background: #0e150e; color: #f4f4f5;
    box-shadow: 0 12px 32px #0009;
    text-align: left; font-family: Inter, sans-serif;
}
.bks-currency-picker-left .bks-currency-panel { right: auto; left: 0; }
.bks-currency-picker-up .bks-currency-panel { top: auto; bottom: calc(100% + 0.5rem); }
.bks-currency-heading {
    margin: 0 0 0.25rem; padding: 0.5rem 0.625rem;
    border-bottom: 1px solid #244033;
    color: #a1b4a9; font-size: 0.6875rem; font-weight: 600;
    line-height: 1.5; letter-spacing: 0.05em; text-transform: uppercase;
}
.bks-currency-options {
    list-style: none; padding: 0; margin: 0;
    max-height: min(19rem, 45dvh); overflow-y: auto;
    overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #426451 #0e150e;
}
.bks-currency-option {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 14px;
    align-items: center; gap: 0.625rem; width: 100%; min-height: 2.5rem;
    padding: 0.5rem 0.625rem; border: 0; border-radius: 0.375rem;
    background: transparent; color: #e4e4e7; font: 500 0.8125rem/1.4 Inter, sans-serif;
    text-align: left; text-decoration: none; cursor: pointer;
}
.bks-currency-option:hover, .bks-currency-option:focus-visible { background: #1b3024; color: #fff; }
.bks-currency-option:focus-visible { outline: 2px solid #34d399; outline-offset: -2px; }
.bks-currency-option[aria-current="true"] { background: #064e3b; color: #fff; }
.bks-currency-code { font-family: ui-monospace, monospace; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.bks-currency-option > .bks-currency-code { color: #a1b4a9; font-size: 0.6875rem; }
.bks-currency-check { visibility: hidden; color: #34d399; }
.bks-currency-option[aria-current="true"] > .bks-currency-check { visibility: visible; }
.group-rate-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.625rem 1rem; }
.group-rate-actions { display: flex; align-items: center; gap: 0.75rem; }
.group-rate-actions .bks-button { height: 2.75rem; min-height: 2.75rem; }
.group-rate-description { grid-column: 1 / -1; margin: 0; }
@media (max-width: 639px) {
    .bks-currency-option, .bks-currency-trigger.bks-button { min-height: 2.75rem; }
    .group-rate-header { grid-template-columns: minmax(0, 1fr); }
    .group-rate-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; }
}
.bks-button,
.bks-badge {
    --bks-surface: #047857;
    --bks-foreground: #ffffff;
    --bks-outline: #047857;
    --bks-hover: #065f46;
    --bks-ring: #34d399;
}
:where(.bks-button, .bks-badge) { display: inline-flex; }
.bks-button {
    align-items: center;
    justify-content: center;
    gap: 0.375rem !important;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem !important;
    border: 1px solid var(--bks-outline) !important;
    border-radius: var(--bks-control-radius) !important;
    background: var(--bks-surface) !important;
    color: var(--bks-foreground) !important;
    font-family: inherit !important;
    font-size: var(--bks-control-font) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-align: center;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease !important;
}
.bks-button:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--bks-hover) !important;
    border-color: var(--bks-ring) !important;
}
.bks-button:focus-visible {
    outline: 2px solid var(--bks-ring) !important;
    outline-offset: 3px;
}
.bks-button:disabled,
.bks-button[aria-disabled="true"] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}
.bks-button > svg,
.bks-button > span:not(.bks-badge) {
    color: inherit !important;
}
.bks-button-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem !important;
    flex-shrink: 0;
}
.bks-button.touch-target { min-height: 2.75rem; }
.bks-badge {
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: auto;
    min-height: 1.625rem;
    padding: 0.25rem 0.625rem !important;
    border: 1px solid var(--bks-outline) !important;
    border-radius: var(--bks-control-radius) !important;
    background: var(--bks-surface) !important;
    color: var(--bks-foreground) !important;
    font-family: inherit !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: none !important;
}
.bks-badge > svg,
.bks-badge > span { color: inherit !important; }
.bks-field-label {
    font-family: inherit !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.025em !important;
}
/* Secondary actions keep the same silhouette and typography. */
.bks-button:is([class*="bg-dark-"], [class*="bg-zinc-"], [class*="bg-gray-"], [class*="bg-[#121A12]"], [class*="bg-[#1A231A]"]):is([class*="text-gray-"], [class*="text-zinc-"], [class*="text-white"]),
.bks-badge:is([class*="bg-gray-"], [class*="bg-zinc-"], [class*="bg-slate-"], [class*="text-gray-"], [class*="text-zinc-"], [class*="text-slate-"]) {
    --bks-surface: #27272a;
    --bks-foreground: #ffffff;
    --bks-outline: #3f3f46;
    --bks-hover: #3f3f46;
    --bks-ring: #a1a1aa;
}
.bks-badge:is([class*="bg-emerald-"], [class*="bg-green-"], [class*="text-emerald-"], [class*="text-green-"]) {
    --bks-surface: #047857; --bks-foreground: #ffffff; --bks-outline: #047857;
}
.bks-button:is([class*="bg-sky-"], [class*="bg-blue-"], [class*="text-sky-"], [class*="text-blue-"]),
.bks-badge:is([class*="bg-sky-"], [class*="bg-blue-"], [class*="bg-cyan-"], [class*="text-sky-"], [class*="text-blue-"]) {
    --bks-surface: #0369a1;
    --bks-foreground: #ffffff;
    --bks-outline: #0369a1;
    --bks-hover: #075985;
    --bks-ring: #38bdf8;
}
.bks-button:is([class*="bg-violet-"], [class*="bg-purple-"], [class*="bg-indigo-"]),
.bks-badge:is([class*="bg-violet-"], [class*="bg-purple-"], [class*="bg-indigo-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-indigo-"]) {
    --bks-surface: #6d28d9;
    --bks-foreground: #ffffff;
    --bks-outline: #6d28d9;
    --bks-hover: #5b21b6;
    --bks-ring: #a78bfa;
}
.bks-button:is([class*="bg-red-"], [class*="bg-rose-"], [class*="text-red-"], [class*="text-rose-"]),
.bks-badge:is([class*="bg-red-"], [class*="bg-rose-"], [class*="text-red-"], [class*="text-rose-"]) {
    --bks-surface: #b91c1c;
    --bks-foreground: #ffffff;
    --bks-outline: #b91c1c;
    --bks-hover: #991b1b;
    --bks-ring: #f87171;
}
/* Gold booking actions retain the reference colour. */
.bks-button:is([class*="bg-gold"], [class*="text-gold"], [class*="bg-[#D4A017]"], [class*="bg-[#d4a017]"], [class*="bg-amber-"], [class*="bg-yellow-"]),
.bks-badge:is([class*="bg-amber-"], [class*="bg-yellow-"], [class*="bg-gold"], [class*="text-gold"], [class*="text-amber-"], [class*="text-yellow-"]) {
    --bks-surface: #d4a017;
    --bks-foreground: #111827;
    --bks-outline: #d4a017;
    --bks-hover: #b8890e;
    --bks-ring: #fbbf24;
}
/* White identity-provider controls must override neutral utility matching. */
.bks-button:is([class~="bg-white"], [class~="bks-button-google"])[class] {
    --bks-surface: #ffffff;
    --bks-foreground: #1f2937;
    --bks-outline: #d4d4d8;
    --bks-hover: #f4f4f5;
    --bks-ring: #a1a1aa;
}
/* Explicit states keep every page consistent, regardless of older utility classes. */
.bks-badge[data-ui-status]:is([data-ui-status="confirmed"], [data-ui-status="deposit_verified"], [data-ui-status="deposit_paid"], [data-ui-status="fully_paid"], [data-ui-status="paid"], [data-ui-status="approved"], [data-ui-status="verified"], [data-ui-status="published"], [data-ui-status="active"]) {
    --bks-surface: #047857; --bks-foreground: #ffffff; --bks-outline: #047857;
}
.bks-badge[data-ui-status]:is([data-ui-status="pending"], [data-ui-status="unpaid"], [data-ui-status="awaiting_deposit"], [data-ui-status="partially_paid"], [data-ui-status="draft"]) {
    --bks-surface: #d4a017; --bks-foreground: #111827; --bks-outline: #d4a017;
}
.bks-badge[data-ui-status]:is([data-ui-status="payment_proof_uploaded"], [data-ui-status="pending_verification"], [data-ui-status="payment_verification_pending"], [data-ui-status="proof_uploaded"]) {
    --bks-surface: #0369a1; --bks-foreground: #ffffff; --bks-outline: #0369a1;
}
.bks-badge[data-ui-status="completed"] {
    --bks-surface: #6d28d9; --bks-foreground: #ffffff; --bks-outline: #6d28d9;
}
.bks-badge[data-ui-status]:is([data-ui-status="cancelled"], [data-ui-status="rejected"], [data-ui-status="failed"]) {
    --bks-surface: #b91c1c; --bks-foreground: #ffffff; --bks-outline: #b91c1c;
}
/* Editor controls retain their compact dimensions and selected formatting state. */
:is(.bks-tool-btn, .bubble-btn, .inspector-btn):hover,
:is(.bks-tool-btn, .bubble-btn, .inspector-btn).active,
.inspector-btn:is(.active-gold, .active-emerald, .active-sky) {
    background: #047857 !important;
    color: #ffffff !important;
    border-color: #047857 !important;
}
:is(.bks-tool-btn, .bubble-btn, .inspector-btn).active svg {
    stroke: currentColor !important;
}
:is(.bks-tool-btn, .bubble-btn, .inspector-btn):focus-visible {
    outline: 2px solid #34d399;
    outline-offset: 2px;
}
@media (pointer: coarse) {
    .bks-button { min-height: 2.75rem; }
    .bks-button-icon { min-width: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .bks-button { transition: none !important; }
}

/* Tourist portal: keep navigation still while long booking histories scroll. */
.tourist-dashboard-shell { min-height: 100dvh; }
.tourist-dashboard-main-wrap { min-height: 0; }
.tourist-dashboard-main { overscroll-behavior: contain; }
.dashboard-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.875rem;
    border: 1px solid #27272a;
    border-radius: 0.875rem;
    background: #111114;
}
.filter-search { min-width: 0; }
.filter-search label,
.filter-grid label {
    display: grid;
    gap: 0.375rem;
    color: #a1a1aa;
    font-size: 0.6875rem;
    font-weight: 600;
}
.filter-search input,
.filter-grid input,
.filter-grid select {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid #3f3f46;
    border-radius: 0.625rem;
    background: #09090b;
    color: #f4f4f5;
    font: inherit;
    font-size: 0.8125rem;
}
.filter-search input:focus,
.filter-grid input:focus,
.filter-grid select:focus { outline: 2px solid #047857; outline-offset: 1px; }
.filter-options { grid-column: 1 / -1; }
.filter-options summary,
.bank-details-disclosure > summary {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #e4e4e7;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.filter-options summary::-webkit-details-marker,
.bank-details-disclosure > summary::-webkit-details-marker { display: none; }
.filter-options summary::after,
.bank-details-disclosure > summary::after {
    content: '+';
    margin-left: auto;
    color: #d4a017;
    font-size: 1.125rem;
}
.filter-options[open] summary::after,
.bank-details-disclosure[open] > summary::after { content: '−'; }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; padding: 0.25rem 0 0.75rem; }
.filter-actions { display: flex; align-items: center; gap: 0.875rem; }
.filter-actions .bks-button { min-width: 5.5rem; }
.dashboard-text-link { color: #d4a017; font-size: 0.8125rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dashboard-results { margin: -0.25rem 0 0; color: #a1a1aa; font-size: 0.75rem; }
.dashboard-pagination { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; color: #d4d4d8; font-size: 0.8125rem; }
.dashboard-pagination .bks-button { min-width: 6rem; }
.bank-details-disclosure { padding: 0 1rem; }
.bank-details-disclosure > summary { min-height: 3.25rem; }
.tourist-list-card { min-width: 0; }
.admin-filter-control {
    width: 100%; min-width: 0; min-height: 2.75rem; padding: 0.65rem 0.75rem;
    border: 1px solid #27272a; border-radius: 0.75rem; background: #09090b;
    color: #f4f4f5; font-size: 0.8125rem;
}
.admin-filter-control:focus { outline: 2px solid rgb(212 160 23 / 55%); outline-offset: 1px; }
.admin-filter-label { display: grid; gap: 0.35rem; color: #a1a1aa; font-size: 0.7rem; font-weight: 600; }
.admin-list-search { display:flex; align-items:end; gap:0.5rem; }
.admin-list-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.875rem; padding:1rem 0; }
.admin-list-display,.admin-selection-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.75rem; }
.admin-selection-bar { padding:0.875rem; border:1px solid #27272a; border-radius:0.75rem; background:#111114; }
.admin-selection-bar[hidden] { display:none; }
.admin-report-panel { scroll-margin-top:5rem; }
.finance-summary > div { min-width:0; padding:0.875rem; }
.finance-summary p { overflow-wrap:anywhere; }
@media(max-width:639px) { .finance-summary .text-xl { font-size:1rem; line-height:1.5rem; } }
[data-admin-record-id] { width:1.125rem; height:1.125rem; flex-shrink:0; accent-color:#047857; cursor:pointer; }
.admin-list-card { min-width:0; overflow-wrap:anywhere; }
.admin-list-card .bks-badge { white-space:normal; text-align:center; }
@media(max-width:639px) {
    .admin-list-search { display:grid; grid-template-columns:1fr auto; }
    .admin-list-search > label { grid-column:1/-1; }
    .admin-list-pagination { align-items:start; flex-direction:column; }
    .admin-list-filters .bks-button { min-height:44px; }
}

/* Shared mobile drawer treatment across public, tourist, and admin navigation. */
.bks-mobile-drawer-overlay {
    background: rgb(0 0 0 / 78%) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.bks-mobile-drawer {
    box-sizing: border-box;
    width: min(20rem, 88vw) !important;
    max-width: 88vw !important;
    background: #09090b !important;
    color: #f4f4f5;
    border-color: #1e1e24 !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
.bks-mobile-drawer > div:first-child:not(.bks-mobile-drawer-content) {
    background: #09090b;
}
.bks-mobile-nav-item,
.bks-mobile-drawer-content > a,
nav.bks-mobile-drawer-content > a {
    min-height: 2.875rem;
    border: 1px solid #1e1e24 !important;
    border-radius: 0.75rem !important;
    background: #111114 !important;
    color: #f4f4f5 !important;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.bks-mobile-nav-item:hover,
.bks-mobile-drawer-content > a:hover,
nav.bks-mobile-drawer-content > a:hover {
    border-color: rgb(212 160 23 / 65%) !important;
    background: #151518 !important;
    color: #d4a017 !important;
}
.bks-mobile-nav-item[class~="border-gold"],
.bks-mobile-drawer-content > a[class*="border-l-2"],
nav.bks-mobile-drawer-content > a[class*="border-l-2"] {
    border: 1px solid #d4a017 !important;
    background: #111114 !important;
    color: #d4a017 !important;
}
.bks-mobile-drawer-content > a[class*="border-l-2"],
nav.bks-mobile-drawer-content > a[class*="border-l-2"] {
    border-left-width: 1px !important;
}
.bks-mobile-nav-item svg,
.bks-mobile-drawer-content > a svg,
nav.bks-mobile-drawer-content > a svg {
    color: #d4a017;
}
.bks-mobile-drawer > div:first-child nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem 0.125rem 0.75rem;
}
.bks-mobile-drawer > div:first-child nav > a {
    margin-bottom: 0.375rem;
    padding: 0.625rem 0.75rem;
}
.bks-mobile-drawer > div:last-child {
    border-color: #1e1e24 !important;
    background: #09090b !important;
}
.bks-mobile-drawer button[aria-label^="Close"] {
    min-width: 2.5rem;
    min-height: 2.5rem;
    border: 1px solid #27272a;
    border-radius: 0.75rem;
    background: #111114;
    color: #f4f4f5;
}

/* Website drawer controls keep their own colours during pointer interaction. */
.bks-website-drawer .bks-mobile-nav-item {
    justify-content: space-between;
    text-align: left;
    --bks-surface: #111114;
    --bks-outline: #1e1e24;
    --bks-ring: #d4a017;
}
.bks-website-drawer .bks-button:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--bks-surface) !important;
    border-color: var(--bks-outline) !important;
}
.bks-website-drawer :is(a, button) {
    -webkit-tap-highlight-color: transparent;
    transition-property: color, border-color !important;
}
.bks-website-drawer :is(a, button):focus-visible {
    outline: 2px solid #d4a017 !important;
    outline-offset: 3px;
}

/* Keep dashboard website navigation aligned above its pinned actions. */
.tourist-dashboard-shell .bks-website-drawer {
    height: 100vh;
    height: 100dvh;
}
.tourist-dashboard-shell .bks-website-drawer .bks-mobile-nav-item {
    padding-block: 0.375rem !important;
}
.tourist-dashboard-shell .bks-website-drawer .bks-mobile-nav-item > div:first-child {
    flex: 1;
    min-width: 0;
}
.tourist-dashboard-shell .bks-website-drawer .bks-mobile-drawer-content {
    flex: 1 1 0%;
    padding-bottom: 1rem;
    scroll-padding-block: 1rem;
}
.tourist-dashboard-shell .bks-website-drawer > div:last-child {
    box-shadow: none;
}
.tourist-dashboard-shell .bks-website-drawer > div:last-child > .bks-button > svg {
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .tourist-dashboard-shell { height: 100dvh; overflow: hidden; }
    .tourist-dashboard-main-wrap { height: 100dvh; min-height: 0; overflow: hidden; }
    .tourist-dashboard-main { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 767px) {
    .dashboard-filters { grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; padding: 0.75rem; }
    .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
    .filter-actions { gap: 0.625rem; }
    .dashboard-pagination { padding: 0.25rem 0; }
    .tourist-list-card { scroll-margin-top: 4.5rem; }
    .bank-details-disclosure { padding: 0 0.875rem; }
    .tourist-dashboard-main .p-5,
    .tourist-dashboard-main .p-6 { padding: 1rem !important; }
    .tourist-dashboard-main .p-12 { padding: 1.5rem !important; }
    .tourist-dashboard-main .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
    .tourist-dashboard-main .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.875rem !important; }
}
@media (max-width: 360px) {
    .dashboard-filters { grid-template-columns: minmax(0, 1fr); }
    .filter-actions { justify-content: space-between; }
}
