/* GlobalTicks Admin — design tokens */
:root {
    --brand: #4f46e5;
    --brand-dark: #4338ca;
    --brand-light: #eef2ff;
    --accent: #0d9488;
    --accent-light: #ccfbf1;
    --amber: #b45309;
    --amber-light: #fef3c7;
    --danger: #dc2626;
    --danger-light: #fee2e2;
    --success: #15803d;
    --success-light: #dcfce7;
    --ink: #0f172a;
    --muted: #64748b;
    --muted-2: #94a3b8;
    --page: #f1f5f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --line: #e2e8f0;
    --sidebar: #0b1220;
    --sidebar-2: #16213a;
    --sidebar-text: #9aa7c2;
    --sidebar-text-active: #ffffff;
    --radius-sm: 7px;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow: 0 8px 20px -10px rgba(15, 23, 42, .18);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font: 13.5px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbars — slim, floating, rounded thumb on any background */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--muted-2) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: var(--muted-2);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
::-webkit-scrollbar-corner { background: transparent; }

.sidebar, .nav {
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.sidebar::-webkit-scrollbar-thumb, .nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .25);
}
.sidebar::-webkit-scrollbar-thumb:hover, .nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .4);
}

/* Layout */
.layout { display: grid; grid-template-columns: 226px 1fr; min-height: 100vh; }

.sidebar {
    background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
    color: var(--sidebar-text);
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand { display: flex; align-items: center; gap: 9px; margin: 3px 6px 18px; }
.brand .mark {
    width: 29px; height: 29px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 14px;
    box-shadow: 0 3px 9px rgba(79, 70, 229, .4);
}
.brand .text { line-height: 1.25; }
.brand strong { display: block; font-size: 14.5px; font-weight: 800; color: #fff; letter-spacing: .01em; }
.brand small { display: block; color: #6b7ba0; font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.brand-logo { display: block; height: 20px; width: auto; filter: brightness(0) invert(1); margin-bottom: 2px; }

.nav { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.nav-label { font-size: 9.5px; letter-spacing: .1em; color: #5f6f93; margin: 0; text-transform: uppercase; font-weight: 700; }
.nav a {
    display: flex; align-items: center; gap: 9px;
    color: var(--sidebar-text); padding: 7px 10px; border-radius: 7px;
    text-decoration: none; margin: 1px 0; font-weight: 600; font-size: 12.5px;
    transition: background .15s ease, color .15s ease;
}
.nav a svg { flex-shrink: 0; opacity: .8; transition: opacity .15s ease; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav a:hover svg { opacity: 1; }
.nav a.active { background: var(--brand); color: #fff; box-shadow: 0 4px 12px -3px rgba(79, 70, 229, .5); }
.nav a.active svg { opacity: 1; }
.nav .nav-footer { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); }

/* Collapsible nav sections (accordion) */
.nav-section-header {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; padding: 0; margin: 13px 0 5px; cursor: pointer; color: #5f6f93;
}
.nav-section-header:hover { color: #8b9bc4; }
.nav-section-header svg { transition: transform .15s ease; opacity: .8; flex-shrink: 0; }
.nav-section-header[aria-expanded="false"] svg { transform: rotate(-90deg); }
.nav-section-body[hidden] { display: none; }

/* Whole-sidebar rail (icon-only) mode */
.sidebar-toggle {
    background: rgba(255, 255, 255, .06); border: 0; border-radius: 7px; padding: 6px;
    color: var(--sidebar-text); cursor: pointer; margin-left: auto; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease;
}
.sidebar-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.layout.rail, html.gt-rail-preload .layout { grid-template-columns: 64px 1fr; }
.layout.rail .brand, html.gt-rail-preload .brand { justify-content: center; }
.layout.rail .brand .text, html.gt-rail-preload .brand .text,
.layout.rail .nav-section-header .nav-label, html.gt-rail-preload .nav-section-header .nav-label,
.layout.rail .nav-section-header svg, html.gt-rail-preload .nav-section-header svg,
.layout.rail .nav-text, html.gt-rail-preload .nav-text { display: none; }
.layout.rail .sidebar-toggle, html.gt-rail-preload .sidebar-toggle { margin-left: 0; }
.layout.rail .nav a, html.gt-rail-preload .nav a,
.layout.rail .nav-footer a, html.gt-rail-preload .nav-footer a { justify-content: center; }
.layout.rail .nav-section-body[hidden], html.gt-rail-preload .nav-section-body[hidden] { display: block; }

.main { padding: 20px 24px 30px; max-width: 1680px; width: 100%; }
.topbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 19.5px; margin: 0; letter-spacing: -.01em; }
.topbar .subtitle { color: var(--muted); font-size: 12px; margin-top: 2px; }
.user { display: flex; align-items: center; gap: 9px; color: var(--muted); text-decoration: none; border-radius: 10px; padding: 4px 8px 4px 4px; transition: background .15s; }
.user:hover { background: var(--surface-2, rgba(0, 0, 0, .035)); }
.user .avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--brand-light); color: var(--brand-dark);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.user .who strong { display: block; color: var(--ink); font-size: 12.5px; }
.user .who span { font-size: 11px; text-transform: capitalize; }

/* Surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow-sm); }

.icon-badge { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Dashboard stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stats-5 { grid-template-columns: repeat(5, 1fr); }
.stat { display: flex; align-items: center; gap: 11px; }
.stat .icon-badge { width: 36px; height: 36px; border-radius: 9px; }
.stat span { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat strong { display: block; font-size: 20px; margin-top: 1px; letter-spacing: -.01em; }

.quick-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.quick-link {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius);
    border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: var(--surface-2);
    transition: border-color .15s ease, transform .15s ease;
}
.quick-link:hover { border-color: var(--brand); transform: translateY(-1px); }
.quick-link .icon-badge { width: 32px; height: 32px; border-radius: 8px; }
.quick-link strong { display: block; font-size: 12.5px; }
.quick-link span { color: var(--muted); font-size: 11px; }

/* Toolbar / filters */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; gap: 10px; flex-wrap: wrap; }
.toolbar h2 { margin: 0; font-size: 15px; }
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.search-box { position: relative; display: flex; align-items: center; }
.search-box svg { position: absolute; left: 10px; color: var(--muted-2); pointer-events: none; }
.search-box input,
.filters select,
.filters input[type="date"] {
    border: 1px solid #d3dae7; border-radius: 7px; padding: 7px 10px; font: inherit; font-size: 12.5px;
    background: #fff; color: var(--ink); height: 34px; transition: border-color .15s ease, box-shadow .15s ease;
}
.search-box input { padding-left: 30px; min-width: 210px; }
.filters select { min-width: 140px; cursor: pointer; }
.filters input[type="date"] { min-width: 140px; }
.search-box input:focus, .filters select:focus, .filters input[type="date"]:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light);
}

/* Buttons */
.btn {
    background: var(--brand); border: 0; color: #fff; padding: 7px 12px; border-radius: 7px;
    text-decoration: none; cursor: pointer; font-weight: 650; font-size: 12.5px;
    display: inline-flex; align-items: center; gap: 6px; transition: background .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--brand-dark); }
.btn.secondary { background: var(--brand-light); color: var(--brand-dark); }
.btn.secondary:hover { background: #e0e4ff; }
.btn.danger { background: var(--danger-light); color: var(--danger); }
.btn.danger:hover { background: #fecdd3; }
.btn.ghost { background: transparent; color: var(--muted); padding: 6px 8px; }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.small { padding: 5px 9px; font-size: 11.5px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.row-actions { display: flex; gap: 6px; }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
th:first-child { border-top-left-radius: var(--radius-sm); }
th:last-child { border-top-right-radius: var(--radius-sm); }
td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
.cell-primary { font-weight: 650; }
.cell-muted { color: var(--muted); font-size: 12px; }
.cell-checkbox { width: 32px; }

/* Bulk selection + pagination */
.bulk-bar { padding: 8px 2px; margin-bottom: 8px; }
.bulk-bar-info { font-size: 12px; color: var(--muted); font-weight: 650; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 13px; }
.pagination-summary { font-size: 12px; color: var(--muted); }
.pagination-links { display: flex; align-items: center; gap: 8px; }
.pagination-page { font-size: 12px; color: var(--muted); }
.pagination-links a.disabled { pointer-events: none; opacity: .4; }
.pagination-page-size { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pagination-page-size select { padding: 3px 6px; font-size: 12px; }

/* Ajax-paginated order/booking list tables — see the .js-paginated-list click handler in app.js. Reuses the gt-spin keyframes already defined for .js-supplier-import-panel's loading state. */
.js-paginated-list { position: relative; min-height: 60px; transition: opacity .15s ease; }
.js-paginated-list.is-loading { opacity: .45; pointer-events: none; }
.js-paginated-list.is-loading::after {
    content: '';
    position: absolute;
    top: 40px; left: 50%;
    width: 24px; height: 24px;
    margin-left: -12px;
    border: 3px solid var(--line);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: gt-spin .7s linear infinite;
    z-index: 5;
}

.avatar-circle {
    width: 28px; height: 28px; border-radius: 50%; background: var(--brand-light); color: var(--brand-dark);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11.5px; flex-shrink: 0;
}
.name-cell { display: flex; align-items: center; gap: 9px; }
.name-cell .meta { line-height: 1.3; }
.name-cell .meta small { display: block; color: var(--muted); font-size: 11.5px; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 3px 9px; font-size: 11px; font-weight: 700; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.active, .badge.success { background: var(--success-light); color: var(--success); }
.badge.draft, .badge.pending, .badge.paused, .badge.inactive { background: var(--amber-light); color: var(--amber); }
.badge.blocked, .badge.rejected, .badge.disabled, .badge.suspended { background: var(--danger-light); color: var(--danger); }
.badge.archived { background: var(--surface-2); color: var(--muted); }

/* Forms */
.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field.full { grid-column: 1 / -1; }
.field > label { display: block; font-weight: 650; margin-bottom: 4px; font-size: 12.5px; white-space: normal; overflow-wrap: break-word; }
.field .hint { display: block; color: var(--muted-2); font-size: 11px; margin-top: 3px; }
.field input, .field select, .field textarea {
    width: 100%; border: 1px solid #d3dae7; border-radius: 7px; padding: 7px 9px; font: inherit; background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field input[type="checkbox"] { width: auto; border: none; padding: 0; background: none; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light);
}
.field textarea { min-height: 70px; resize: vertical; }
.field.invalid input, .field.invalid select, .field.invalid textarea {
    border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-light);
}
.field-error { display: block; color: var(--danger); font-size: 11px; margin-top: 4px; font-weight: 600; }
.field.checkbox-field { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.field.checkbox-field input { width: auto; }
.actions { display: flex; gap: 8px; }
.grid-form + .actions { margin-top: 16px; }

/* Repeatable FAQ editor (activity-form.php) — one bordered card per Q&A. */
.js-faq-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.faq-row { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: 14px; padding-right: 44px; }
.faq-row-remove {
    position: absolute; top: 10px; right: 10px; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); cursor: pointer;
}
.faq-row-remove:hover { color: var(--danger); border-color: var(--danger-light); background: var(--danger-light); }

/* Repeatable combo component editor (combo-form.php) — one numbered card per
   activity, auto-numbered via a CSS counter so add/remove never needs JS to
   relabel the remaining cards. */
.js-combo-item-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; counter-reset: combo-item; }
.combo-item-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; counter-increment: combo-item; }
.combo-item-card-header {
    display: flex; align-items: center; gap: 9px; padding: 10px 44px 10px 14px;
    background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.combo-item-card-index {
    width: 22px; height: 22px; border-radius: 50%; background: var(--brand-light); color: var(--brand-dark);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0;
}
.combo-item-card-index::before { content: counter(combo-item); }
.combo-item-card-title { font-weight: 700; font-size: 12.5px; color: var(--ink); }
.combo-item-card-title::before { content: "Component " counter(combo-item); }
.combo-item-card-body { padding: 14px; }

/* Role permissions matrix — grouped collapsible categories (role-form.php) */
.perm-category { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.perm-category:last-child { margin-bottom: 0; }
.perm-category-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); }
.perm-category-toggle {
    display: flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; cursor: pointer;
    font-weight: 700; font-size: 12.5px; color: var(--ink); flex: 1; text-align: left;
}
.perm-category-toggle svg { transition: transform .15s ease; opacity: .7; flex-shrink: 0; }
.perm-category-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.perm-count {
    flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--muted);
    background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px;
}
.perm-select-all {
    display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--muted);
    cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.perm-select-all input { width: auto; }
.perm-category-body[hidden] { display: none; }
.perm-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.perm-table tr:last-child td { border-bottom: 0; }
.perm-table td.cell-primary { width: 1%; white-space: nowrap; font-size: 12.5px; padding-right: 20px; }
.perm-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.perm-chip {
    display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px;
    border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--muted);
    cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; user-select: none;
}
.perm-chip input { width: auto; margin: 0; }
.perm-chip:hover { border-color: var(--brand); color: var(--ink); }
.perm-chip:has(input:checked) { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }
#permission-matrix.is-disabled { opacity: .4; pointer-events: none; }

/* Form sections — each one reads as its own card */
.record-form { display: flex; flex-direction: column; gap: 14px; max-width: 920px; }
.record-form.form-wide { max-width: 1180px; }
.form-columns { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; }
.form-columns .form-main, .form-columns .form-sidebar { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.form-section {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.form-section-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; font-weight: 700; color: var(--ink);
    margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.form-section-title .icon-badge { width: 26px; height: 26px; border-radius: 7px; background: var(--brand-light); color: var(--brand-dark); flex-shrink: 0; }
.form-section-title .step { color: var(--muted-2); font-weight: 600; font-size: 11.5px; text-transform: none; letter-spacing: 0; margin-left: auto; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab-btn {
    display: flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 10px 4px; margin-bottom: -1px;
    border-bottom: 2px solid transparent;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.tab-btn .tab-count { background: var(--surface-2); color: var(--muted); border-radius: 99px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.tab-btn.is-active .tab-count { background: var(--brand-light); color: var(--brand-dark); }

/* Vertical side-tab layout (Reports page) — same .js-tab-btn/.js-tab-panel JS as the
   horizontal .tabs component above, just arranged as a left-hand rail instead of a top bar. */
.report-tabs { display: flex; gap: 20px; align-items: flex-start; }
.report-tabs-nav { display: flex; flex-direction: column; gap: 3px; width: 190px; flex-shrink: 0; position: sticky; top: 16px; }
.report-tab-btn {
    display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); text-align: left;
    padding: 10px 12px; border-radius: 8px;
}
.report-tab-btn:hover { background: var(--surface-2); color: var(--ink); }
.report-tab-btn.is-active { background: var(--brand-light); color: var(--brand-dark); }
.report-tab-btn .tab-count { margin-left: auto; }
.report-tabs-content { flex: 1; min-width: 0; }
@media (max-width: 720px) {
    .report-tabs { flex-direction: column; }
    .report-tabs-nav { flex-direction: row; width: 100%; overflow-x: auto; position: static; }
}

.combo-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); color: var(--muted); font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; margin-top: 4px; text-decoration: none; }
.combo-chip:hover { background: var(--brand-light); color: var(--brand-dark); }

/* Order/booking detail line item — deliberately NOT named .activity-card:
   that class already exists below (agency catalog browse grid) with
   unrelated display:flex/overflow:hidden rules that silently clobbered
   this component's grid layout when both shared the name. */
.order-line-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.order-line-card + .order-line-card { margin-top: 14px; }
.order-line-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.order-line-title { font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.order-line-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.order-line-field { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; }
.order-line-field .k { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); margin-bottom: 4px; font-weight: 700; }
.order-line-field .v { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.order-line-supplier { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; color: var(--muted); }
.order-line-supplier > span:first-child { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.order-line-supplier .icon-badge { width: 22px; height: 22px; border-radius: 6px; background: var(--brand-light); color: var(--brand-dark); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.supplier-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.supplier-status.placed { background: var(--success-light); color: var(--success); }
.supplier-status.pending { background: var(--amber-light); color: var(--amber); }
.supplier-status.failed { background: var(--danger-light); color: var(--danger); }
.supplier-status.na { background: var(--surface-2); color: var(--muted); }
/* Real loading feedback for a panel swapped in via ajax (e.g. the supplier
   import browse/search/preview panel) — the external supplier API call it's
   waiting on can take a couple of seconds, so a bare unresponsive-looking
   page during that wait reads as broken rather than busy.
   The spinner is `position: fixed` (viewport-centered), not absolute
   relative to the panel — a plain absolute spinner centers on the panel's
   own box, which for a long catalog table can sit well below the visible
   scroll position (or, before the very first search, the panel is only a
   couple lines tall so its "center" is barely below the search bar) —
   either way "centered on the panel" doesn't mean "visible on screen". */
.js-supplier-import-panel { position: relative; min-height: 90px; transition: opacity .15s ease; }
.js-supplier-import-panel.is-loading { opacity: .45; pointer-events: none; }
.js-supplier-import-panel.is-loading::after {
    content: '';
    position: fixed;
    top: 50%; left: 50%;
    width: 28px; height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid var(--line);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: gt-spin .7s linear infinite;
    z-index: 20;
}
@keyframes gt-spin { to { transform: rotate(360deg); } }

/* Inline spinner swapped into a button's own label while its click handler
   awaits a request — e.g. "Import as new activity", which calls out to the
   external supplier API and otherwise just sits there `disabled` with no
   other visible sign anything is happening. */
.btn-spinner {
    display: inline-block; width: 13px; height: 13px; margin-right: 2px;
    border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
    border-radius: 50%; vertical-align: -2px;
    animation: gt-spin .7s linear infinite;
}
.btn.secondary .btn-spinner, .btn.ghost .btn-spinner { border-color: rgba(79, 70, 229, .25); border-top-color: var(--brand); }

/* Quill rich text editor. The toolbar Quill generates is a preceding
   SIBLING of the container element passed to `new Quill()` — not a
   descendant — and that same container element is both `.quill-container`
   (our class) and `.ql-container.ql-snow` (Quill's own), never two nested
   elements. Selectors below match that real structure; a prior version
   assumed toolbar/container nesting that doesn't exist, so none of them
   ever matched — leaving Quill's own `.ql-container`/`.ql-editor` at their
   library default `height: 100%`, which (in a CSS Grid row) resolved to a
   fixed height instead of growing with content, so a second editor's real
   content silently overflowed past its own field box and visually covered
   whatever came after it on the page. */
.quill-container { background: #fff; overflow: hidden; }
.ql-toolbar.ql-snow { border: 1px solid #d3dae7 !important; border-bottom: 0 !important; }
.quill-container.ql-container.ql-snow { height: auto; min-height: 140px; border: 1px solid #d3dae7 !important; font: inherit; font-size: 13px; }
.quill-container .ql-editor { height: auto; min-height: 140px; }
/* Hidden by default so the raw textarea never flashes before Quill mounts; the
   fallback class re-reveals it if the Quill script failed to load. */
.js-quill { display: none; }
.js-quill.js-quill-fallback { display: block; }
/* Visually separates a field from a Quill editor immediately above it —
   without this, the plain textarea reads as part of the same box. */
.field-divider { margin-top: 45px; padding-top: 16px; border-top: 1px dashed var(--line); }

.hours-table input[type="time"] { width: auto; }
.hours-table input[type="time"]:disabled { opacity: .4; }

/* Image upload + gallery */
.image-upload { display: flex; flex-direction: column; gap: 8px; }
.image-preview {
    width: 100%; max-width: 220px; aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden;
    background: var(--surface-2); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
}
.image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-preview.empty { color: var(--muted-2); }
.image-upload .btn { align-self: flex-start; cursor: pointer; }
.gallery-upload { display: flex; flex-direction: column; gap: 8px; }
.gallery-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-item, .gallery-add {
    position: relative; width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden;
    border: 1px solid var(--line); flex-shrink: 0;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-remove {
    position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; border: 0;
    background: rgba(15, 23, 42, .65); color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
}
.gallery-add {
    display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted-2);
    cursor: pointer; border-style: dashed;
}
.gallery-add:hover { color: var(--brand); border-color: var(--brand); }

/* Select2 overrides to match app inputs */
.select2-container--default .select2-selection--single {
    border: 1px solid #d3dae7; border-radius: 7px; height: 34px; display: flex; align-items: center; padding: 0 6px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.3; padding-left: 4px; font-size: 12.5px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light);
}
.select2-dropdown { border-color: #d3dae7; border-radius: 7px; overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--brand); }

/* SweetAlert2 overrides to match app design tokens */
.swal2-popup { font-family: inherit; border-radius: var(--radius-lg); font-size: 14px; }
.swal2-title { font-size: 18px; }
.swal2-html-container { font-size: 13.5px; color: var(--muted); }
.swal2-confirm.swal2-styled { border-radius: 7px !important; font-weight: 650; padding: 9px 16px !important; box-shadow: none !important; }
.swal2-cancel.swal2-styled { border-radius: 7px !important; font-weight: 650; padding: 9px 16px !important; box-shadow: none !important; }
.swal2-toast { border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; }
.swal2-toast .swal2-title { font-size: 13px; font-weight: 650; }
.swal2-timer-progress-bar { background: rgba(255, 255, 255, .55) !important; }

/* Supplier pricing offer row form */
.offer-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: end; }

/* Empty state */
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty svg { opacity: .35; margin-bottom: 10px; }
.empty p { margin: 0; font-size: 12.5px; }

/* Modal dialog — reuses .form-section/.grid-form/.field, just hosted in a panel */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .5);
    display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000;
}
.modal-backdrop[hidden] { display: none; }
.modal-panel {
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
    max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.modal-header h3 { margin: 0; font-size: 14px; }
.modal-close { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--muted); border-radius: 6px; }
.modal-close:hover { background: var(--surface-2); color: var(--ink); }
.modal-panel .form-section { box-shadow: none; border: 0; padding: 16px 18px 4px; }
.modal-footer { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }

/* Activity Preview — customer-facing variant + time-slot picker (read-only mock) */
.preview-desc { color: var(--muted); font-size: 13px; margin: 4px 0 0; max-width: 62ch; }
.section-label {
    display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted-2); margin: 20px 0 10px;
}
.preview-columns { display: grid; grid-template-columns: 1fr 460px; gap: 24px; align-items: start; margin-top: 6px; }
.preview-variants { display: flex; flex-direction: column; gap: 8px; }
.preview-variant-option {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 12px 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.preview-variant-option:hover { border-color: var(--muted-2); }
.preview-variant-option[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-light); }
.preview-variant-radio {
    width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted-2); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.preview-variant-option[aria-pressed="true"] .preview-variant-radio { border-color: var(--brand); }
.preview-variant-radio::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); transform: scale(0);
    transition: transform .12s ease;
}
.preview-variant-option[aria-pressed="true"] .preview-variant-radio::after { transform: scale(1); }
.preview-variant-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.preview-variant-text .pv-name { font-weight: 600; font-size: 13.5px; }
.preview-variant-text .pv-desc { color: var(--muted); font-size: 12px; }
.preview-variant-price { font-weight: 700; color: var(--brand-dark); font-size: 14px; white-space: nowrap; }
.preview-slot-group[hidden] { display: none; }
.preview-date-label { font-size: 12px; color: var(--muted-2); margin: 12px 0 6px; }
.preview-date-label:first-child { margin-top: 0; }
.preview-slot-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.preview-slot-pill {
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
    cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 76px;
    transition: border-color .15s ease, background .15s ease;
}
.preview-slot-pill:hover { border-color: var(--muted-2); }
.preview-slot-pill[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-light); }
.preview-slot-pill .ps-time { font-weight: 700; font-size: 13px; }
.preview-slot-pill .ps-cap { font-size: 10.5px; color: var(--muted-2); }
.preview-slot-pill[aria-pressed="true"] .ps-cap { color: var(--brand-dark); }
.empty-slots { color: var(--muted-2); font-size: 12.5px; padding: 6px 0 2px; }
.preview-summary {
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px; position: sticky; top: 20px;
}
.preview-summary h4 { margin: 0 0 12px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); }
/* Label/value row — originally the activity-preview summary widget, now a
   general-purpose pattern reused by the agency portal and agency-manage. */
.summary-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid var(--line); }
/* Default: .k absorbs the wrapping (a long activity name in a price-summary
   line), .v is a short, never-wrapping value (a price, a status). Plain
   proportional flex-shrink (both sides shrinking by the same ratio) isn't
   enough here — a short .k label would still get squeezed well below its
   natural width by the algorithm even though it never needs to, starving
   .v of the room it needs. Pinning .k to flex:0 0 auto in the reverse case
   below is what actually fixes that, not just letting it wrap. */
.summary-row .k { color: var(--muted); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.summary-row .v { font-weight: 600; text-align: right; flex: 0 0 auto; white-space: nowrap; }
/* A reference string (Stripe session id, ~60 chars) is too long to share a
   row with its label at all — even with all the width flex-shrink can give
   it, a ~300px sidebar column only fits ~20 chars per line, forcing 3+
   cramped lines. Stacking the label above and letting the value use the
   row's FULL width instead of half of it roughly doubles chars-per-line. */
.summary-row.stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.summary-row.stack .k, .summary-row.stack .v { flex: none; }
.summary-row.stack .v { text-align: left; white-space: normal; }
.mono-ref { font-family: monospace; font-size: 11px; word-break: break-all; overflow-wrap: anywhere; }
.summary-row.total { border-bottom: 0; padding-top: 12px; }
.summary-row.total .v { font-size: 17px; color: var(--brand-dark); }
.preview-note { font-size: 11px; color: var(--muted-2); text-align: center; margin: 8px 0 0; }
.payment-method-toggle { display: flex; gap: 10px; padding-top: 6px; flex-wrap: wrap; }
.payment-method-option {
    position: relative; flex: 1; min-width: 140px; text-align: center; white-space: nowrap;
    padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-weight: 600; font-size: 12.5px; cursor: pointer; background: var(--surface);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.payment-method-option:hover { border-color: var(--muted-2); }
.payment-method-option.is-active { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }
.payment-method-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* Date-first booking widget (agency activity page) — same 1.Date/2.Option/3.Time
   calendar pattern as the B2C storefront's PDP booking card, restyled onto this
   portal's own indigo tokens rather than the storefront's navy palette. */
.pdp-booking-section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.pdp-booking-section:first-child { padding-top: 0; }
.pdp-booking-section-title { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; margin: 0 0 12px; }

.pdp-date-field {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--surface);
    cursor: pointer; text-align: left; font: inherit; color: var(--ink);
}
.pdp-date-field:hover { border-color: var(--brand); }
.pdp-date-field.is-open { border-color: var(--brand); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pdp-date-field .df-main { font-weight: 700; font-size: 13.5px; }
.pdp-date-field .df-sub { color: var(--muted); font-size: 11.5px; }
.pdp-date-field .df-chevron { color: var(--muted); transition: transform .15s ease; flex-shrink: 0; }
.pdp-date-field.is-open .df-chevron { transform: rotate(180deg); }

.pdp-cal { border: 1.5px solid var(--brand); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 12px 14px 14px; }
.pdp-cal[hidden] { display: none; }
.pdp-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pdp-cal-month { font-weight: 700; font-size: 13.5px; }
.pdp-cal-arrow {
    width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.pdp-cal-arrow:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.pdp-cal-arrow:disabled { opacity: .3; cursor: not-allowed; }
.pdp-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; color: var(--muted-2); font-size: 9.5px; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.pdp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pdp-cal-day {
    aspect-ratio: 1; border-radius: 7px; border: 1.5px solid transparent; background: none; cursor: default;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--line); font-size: 9px; padding: 2px;
}
.pdp-cal-day .cd-num { font-weight: 700; font-size: 11px; }
.pdp-cal-day.has-slots { color: var(--ink); border-color: var(--line); cursor: pointer; background: var(--surface); }
.pdp-cal-day.has-slots .cd-price { font-size: 8px; font-weight: 700; color: var(--brand); }
.pdp-cal-day.has-slots:hover { border-color: var(--brand); }
.pdp-cal-day.is-selected { background: var(--brand); border-color: var(--brand); }
.pdp-cal-day.is-selected .cd-num, .pdp-cal-day.is-selected .cd-price { color: #fff; }

.pdp-variants { display: flex; flex-direction: column; gap: 8px; }
.pdp-variants:empty::before { content: "Select a date above"; color: var(--muted-2); font-size: 13px; }
.pdp-variant-row {
    display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    padding: 10px 12px; cursor: pointer; background: var(--surface); text-align: left; width: 100%;
}
.pdp-variant-row:hover { border-color: var(--muted-2); }
.pdp-variant-row[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-light); }
.pdp-variant-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; position: relative; }
.pdp-variant-row[aria-pressed="true"] .pdp-variant-radio { border-color: var(--brand); }
.pdp-variant-radio::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--brand); transform: scale(0); transition: transform .12s ease; }
.pdp-variant-row[aria-pressed="true"] .pdp-variant-radio::after { transform: scale(1); }
.pdp-variant-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pdp-variant-text .pv-name { font-weight: 700; font-size: 13.5px; }
.pdp-variant-text .pv-desc { color: var(--muted); font-size: 11.5px; }
.pdp-variant-price { font-weight: 800; color: var(--brand-dark); font-size: 13.5px; white-space: nowrap; }

.pdp-slot-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pdp-slot-pills:empty::before { content: "Select an option above"; color: var(--muted-2); font-size: 13px; }
.pdp-slot-pill {
    border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 12px; background: var(--surface); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; min-width: 68px;
}
.pdp-slot-pill:hover { border-color: var(--muted-2); }
.pdp-slot-pill[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-light); }
.pdp-slot-pill .ps-time { font-weight: 700; font-size: 13px; }
.pdp-slot-pill .ps-cap { font-size: 10px; color: var(--muted-2); }

/* Combo booking: one time-pill group per component activity — agency
   counterpart of store.css's .pdp-combo-time-group. */
.pdp-combo-time-group { margin-bottom: 14px; }
.pdp-combo-time-group:last-child { margin-bottom: 0; }
.pdp-combo-time-label { font-weight: 700; font-size: 12px; margin-bottom: 6px; }

/* Order timeline — WooCommerce-style event log on the agency order-detail page */
.order-timeline { display: flex; flex-direction: column; }
.timeline-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.timeline-item:last-child { border-bottom: 0; padding-bottom: 0; }
.timeline-item:first-child { padding-top: 0; }
.timeline-dot {
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; background: var(--surface-2); color: var(--muted-2);
}
.timeline-dot.success { background: var(--success-light); color: var(--success); }
.timeline-dot.danger { background: var(--danger-light); color: var(--danger); }
.timeline-dot.warn { background: var(--amber-light); color: var(--amber); }
.timeline-body { flex: 1; min-width: 0; padding-top: 3px; }
.timeline-message { font-size: 12.5px; font-weight: 600; }
.timeline-meta { font-size: 11px; color: var(--muted-2); margin-top: 2px; }
@media (max-width: 720px) {
    .preview-columns { grid-template-columns: 1fr; }
    .preview-summary { position: static; }
}

/* Voucher — rendered on body.print-page, a bare page with no sidebar/topbar
   (see app/views/agency/layout/header.php's $printPage branch). */
body.print-page { background: var(--surface-2); }
.voucher { max-width: 640px; margin: 32px auto; padding: 0 16px; }
.voucher-actions { display: flex; justify-content: space-between; margin-bottom: 16px; }
.voucher-sheet {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 28px 32px;
}
.voucher-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.voucher-brand { display: flex; align-items: center; }
.voucher-brand img { display: block; height: 24px; width: auto; }
.voucher-ref { text-align: right; }
.voucher-ref .k { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.voucher-ref .v { font-size: 15px; font-weight: 700; font-family: ui-monospace, "SF Mono", Consolas, monospace; color: var(--ink); }
.voucher-note { margin: 14px 0 0; padding: 8px 12px; background: var(--amber-light); color: var(--amber); border-radius: var(--radius-sm); font-size: 12.5px; }
.voucher-body { display: flex; gap: 24px; margin-top: 16px; align-items: flex-start; }
.voucher-details { flex: 1; min-width: 0; }
.voucher-details h2 { margin: 0 0 8px; font-size: 17px; }
.voucher-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.voucher-qr img { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; background: #fff; }
.voucher-qr-caption { font-size: 10.5px; color: var(--muted); text-align: center; }
.voucher-footer { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted-2); }

@media print {
    body.print-page { background: #fff; }
    .no-print { display: none !important; }
    .voucher { margin: 0; max-width: none; padding: 0; }
    .voucher-sheet { border: none; box-shadow: none; border-radius: 0; padding: 0; }
}

@media (max-width: 560px) {
    .voucher-body { flex-direction: column; }
    .voucher-header { flex-direction: column; gap: 10px; }
    .voucher-ref { text-align: left; }
}

/* Agency activity detail — gallery, head, description/highlights/inclusions/
   FAQ content blocks, ported from the B2C storefront PDP (store.css) so
   agency staff see the same activity information while booking on a
   client's behalf. Reuses the storefront's pdp-* class vocabulary, restyled
   onto this portal's own indigo tokens instead of store.css's navy ones. */
.pdp-head { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.pdp-head .chip { display: inline-block; background: var(--brand-light); color: var(--brand-dark); font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; align-self: flex-start; text-transform: uppercase; letter-spacing: .03em; }
.pdp-head h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.pdp-head-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 12.5px; }
.pdp-head-meta span { display: inline-flex; align-items: center; gap: 5px; }

.pdp-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; height: 280px; border-radius: var(--radius-sm); overflow: hidden; margin: -15px -17px 16px; }
.pdp-gallery:has(.pdp-gallery-main:only-child) { grid-template-columns: 1fr; height: 240px; }
.pdp-gallery-main { border: 0; padding: 0; margin: 0; cursor: pointer; background: none; display: block; overflow: hidden; min-height: 0; min-width: 0; }
.pdp-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.pdp-gallery-main:hover img { transform: scale(1.04); }
.pdp-gallery-thumbs { display: grid; gap: 6px; min-height: 0; }
.pdp-gallery-thumb { position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; overflow: hidden; background: none; display: block; min-height: 0; min-width: 0; }
.pdp-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.pdp-gallery-thumb:hover img { transform: scale(1.06); }
.pdp-gallery-more { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); color: #fff; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; }

.pdp-lightbox { position: fixed; inset: 0; background: rgba(5, 10, 25, .94); z-index: 200; display: flex; align-items: center; justify-content: center; }
.pdp-lightbox[hidden] { display: none; }
.pdp-lightbox-img { max-width: 88vw; max-height: 84vh; object-fit: contain; border-radius: 8px; }
.pdp-lightbox-close, .pdp-lightbox-arrow { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pdp-lightbox-close:hover, .pdp-lightbox-arrow:hover { background: rgba(255, 255, 255, .24); }
.pdp-lightbox-close { top: 20px; right: 20px; width: 40px; height: 40px; }
.pdp-lightbox-arrow { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.pdp-lightbox-arrow.prev { left: 20px; }
.pdp-lightbox-arrow.next { right: 20px; }
.pdp-lightbox-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 600; }

.preview-main { min-width: 0; }
.pdp-desc-lead { font-size: 14px; font-weight: 650; margin: 0 0 8px; }
.pdp-desc { color: var(--muted); font-size: 13px; line-height: 1.7; margin-bottom: 8px; }

.pdp-info-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--surface); margin-top: 18px; }
.pdp-info-block h3 { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdp-bullet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pdp-bullet-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--ink); line-height: 1.5; }
.pdp-bullet-list.highlights li svg, .pdp-bullet-list.inclusions li svg { color: var(--success); flex-shrink: 0; margin-top: 2px; }
.pdp-bullet-list.exclusions li svg { color: var(--danger); flex-shrink: 0; margin-top: 2px; }
.pdp-inex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pdp-inex-title { display: flex; align-items: center; gap: 7px; }
.pdp-inex-title.included svg { color: var(--success); }
.pdp-inex-title.excluded svg { color: var(--danger); }

/* Combo booking page "What's included" — one card per component activity
   (agency counterpart of store.css's .pdp-combo-item). */
.pdp-combo-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pdp-combo-item {
    display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 12px; background: #fff;
}
.pdp-combo-item-index {
    width: 26px; height: 26px; border-radius: 50%; background: var(--brand-light); color: var(--brand-dark);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.pdp-combo-item-name { display: block; font-weight: 700; font-size: 12.5px; color: var(--ink); margin-bottom: 2px; }
.pdp-combo-item-variant { display: block; color: var(--muted); font-size: 11.5px; }

.pdp-faq-list { display: flex; flex-direction: column; gap: 8px; }
.pdp-faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.pdp-faq-item summary { list-style: none; cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 12.5px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); }
.pdp-faq-item summary::-webkit-details-marker { display: none; }
.pdp-faq-item summary:hover { background: var(--surface-2); }
.pdp-faq-chevron { display: flex; flex-shrink: 0; color: var(--muted); transition: transform .15s ease; }
.pdp-faq-item[open] .pdp-faq-chevron { transform: rotate(180deg); }
.pdp-faq-item[open] summary { border-bottom: 1px solid var(--line); }
.pdp-faq-answer { margin: 0; padding: 10px 14px 14px; color: var(--muted); font-size: 12px; line-height: 1.6; }

@media (max-width: 720px) {
    .pdp-inex-grid { grid-template-columns: 1fr; }
}

/* Agency catalog — browse activities grid */
.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 16px; }
.activity-card {
    display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 0; overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.activity-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand); }
.activity-card-image { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.activity-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.activity-card:hover .activity-card-image img { transform: scale(1.05); }
.activity-card-image.empty { display: flex; align-items: center; justify-content: center; color: var(--muted-2); }
.activity-card-chip {
    position: absolute; top: 10px; left: 10px; background: rgba(15, 23, 42, .72); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px;
}
.activity-card-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.activity-card-meta { color: var(--muted); font-size: 11.5px; display: flex; align-items: center; gap: 4px; }
.activity-card-body h3 { margin: 2px 0 0; font-size: 14.5px; line-height: 1.32; }
.activity-card-footer { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.activity-card-price { font-weight: 700; font-size: 15.5px; color: var(--brand-dark); }
.activity-card-price small { font-weight: 400; font-size: 10.5px; color: var(--muted); margin-left: 3px; text-transform: none; letter-spacing: 0; }

/* Notices / toasts */
.notice {
    padding: 10px 13px; border-radius: 8px; background: var(--success-light); color: var(--success);
    margin-bottom: 13px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12.5px;
    border: 1px solid rgba(21, 128, 61, .18);
}
.notice.error { background: var(--danger-light); color: var(--danger); border-color: rgba(220, 38, 38, .2); }
.notice.toast { position: fixed; top: 18px; right: 18px; z-index: 50; min-width: 240px; box-shadow: var(--shadow); animation: toast-in .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Auth pages */
.auth { max-width: 380px; margin: 10vh auto; padding: 0 16px; }
.auth .card { padding: 26px 24px; box-shadow: var(--shadow); }
.auth-logo { display: block; height: 34px; width: auto; margin-bottom: 16px; }
.auth h1 { margin: 0 0 4px; font-size: 19px; }
.muted { color: var(--muted); }

@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .main { padding: 16px; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .quick-links { grid-template-columns: 1fr; }
    .grid-form { grid-template-columns: 1fr; }
    .offer-grid { grid-template-columns: 1fr; }
    .form-columns { grid-template-columns: 1fr; }
    table { display: block; overflow: auto; }
}