@import url('booking-site-fonts.css?v=1');
#app-settings-pane-booking-site { container-type:inline-size; }
#app-settings-layout:has(#app-settings-pane-booking-site:not(.hidden)) { display:block; max-width:none; }
#app-settings-layout:has(#app-settings-pane-booking-site:not(.hidden)) > .app-settings-nav { display:none; }
#app-settings-pane-wrap:has(#app-settings-pane-booking-site:not(.hidden)) { max-width:none; width:100%; }
.settings-mode #content-app-settings:has(#app-settings-pane-booking-site:not(.hidden)) > .dashboard { max-width:none !important; }
.agent-booking-site-diff { padding:var(--space-200) var(--space-300); margin-top:var(--space-100); border-left:3px solid var(--bbr-accent); background:var(--bbr-bg-sunken); font-size:var(--text-sm); }
#bsite-controls { border:0; padding:0; margin:0; min-width:0; container-type:inline-size; }
#bsite-controls > legend { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#content-app-settings:has(#app-settings-pane-booking-site:not(.hidden)) > .dashboard > .section-header { display:none; }
.bsite-layout { display:grid; grid-template-columns:minmax(340px,.9fr) minmax(400px,1.1fr); gap:var(--space-600); align-items:start; }
.bsite-layout > * { min-width:0; }
.bsite-live-preview { position:sticky; top:var(--space-400); min-width:0; }
.bsite-preview-card { margin-bottom:0; }
.bsite-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-200); margin-bottom:var(--space-200); }
.bsite-preview-heading h2 { margin:0; }
.bsite-preview-placeholder { padding:var(--space-500); }
.bsite-preview-expanded .bsite-layout { display:block; }
.bsite-preview-expanded #bsite-controls { display:none; }
.bsite-preview-expanded .bsite-live-preview { position:static; }
.bsite-card { padding:var(--space-500); margin-bottom:var(--space-400); min-width:0; }
.bsite-card h2 { margin:0 0 var(--space-200); font-size:var(--text-lg); font-weight:600; color:var(--bbr-fg-heading); }
.bsite-card p { margin:0 0 var(--space-400); }
.bsite-field { display:flex; flex-direction:column; gap:var(--space-200); margin-bottom:var(--space-400); font-size:var(--text-sm); color:var(--bbr-fg-secondary); }
.bsite-field input:not([type=checkbox]),.bsite-field select,.bsite-field textarea { width:100%; min-width:0; padding:var(--space-300); color:var(--bbr-fg-primary); background:var(--bbr-bg-surface); border:1px solid var(--bbr-bd-default); border-radius:var(--radius-md); font:inherit; }
.bsite-field input[type=color] { min-height:44px; padding:var(--space-100); }
.bsite-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-300); }
.bsite-check { display:flex; align-items:center; gap:var(--space-200); margin-bottom:var(--space-300); font-size:var(--text-sm); }
.bsite-meta,.bsite-status { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-300); margin-bottom:var(--space-400); }
.bsite-status { padding:var(--space-300) var(--space-400); border-radius:var(--radius-md); background:var(--bbr-bg-sunken); color:var(--bbr-fg-secondary); }
.bsite-tools { display:flex; flex-wrap:wrap; gap:var(--space-200); margin-bottom:var(--space-400); }
.bsite-preview { overflow:hidden; border:1px solid var(--bbr-bd-default); border-radius:var(--radius-lg); background:var(--bbr-bg-sunken); }
.bsite-preview iframe { display:block; border:0; transform-origin:top left; }
.bsite-preview iframe[hidden] { display:none; }
.bsite-preview-placeholder[hidden] { display:none; }
.bsite-code { width:100%; min-height:150px; resize:vertical; font-family:ui-monospace,Menlo,Consolas,monospace; padding:var(--space-300); color:var(--bbr-fg-primary); background:var(--bbr-bg-surface); border:1px solid var(--bbr-bd-default); border-radius:var(--radius-md); overflow-wrap:anywhere; }
.bsite-install { padding-left:var(--space-500); font-size:var(--text-sm); line-height:1.6; }
.bsite-install li { margin-bottom:var(--space-200); }
.bsite-note { font-size:var(--text-sm); color:var(--bbr-fg-muted); }
.bsite-templates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-400); margin-bottom:var(--space-400); }
.bsite-template.btn { display:flex; flex-direction:column; align-items:stretch; height:auto; padding:var(--space-300); white-space:normal; text-align:left; gap:var(--space-200); }
#app-settings-pane-booking-site .bsite-template.btn { border-radius:var(--radius-lg) !important; min-width:0; }
#app-settings-pane-booking-site .bsite-template.btn[aria-pressed=true] { border-color:var(--bbr-accent) !important; }
.bsite-template[aria-pressed=true] { border-color:var(--bbr-accent); box-shadow:var(--shadow-focus); }
.bsite-template-sample { display:flex; flex-direction:column; gap:var(--space-200); padding:var(--space-400); min-height:140px; border-radius:var(--radius-md); background:var(--template-bg); color:var(--template-ink); }
.bsite-template-title { font-family:var(--template-heading,var(--bbr-font-sans)); font-size:var(--text-lg); font-weight:700; line-height:1.3; }
.bsite-template-line { font-size:var(--text-xs); border-bottom:1px solid currentColor; padding-bottom:var(--space-200); }
.bsite-template-cta { background:var(--template-accent); color:var(--template-button-ink,var(--bbr-bg-surface)); padding:var(--space-200) var(--space-300); border-radius:var(--radius-sm); font-size:var(--text-xs); align-self:flex-start; }
.bsite-template-name { font-size:var(--text-base); font-weight:600; }
.bsite-template-desc { font-size:var(--text-sm); color:var(--bbr-fg-muted); line-height:1.4; }
#bsite-controls > [role=tabpanel][hidden] { display:none!important; }
#bsite-activate { margin-bottom:var(--space-400); }
.bsite-stages { padding-bottom:var(--space-200); }
.bsite-stages .btn { min-height:36px; }
#bsite-brand-apply { margin-bottom:var(--space-400); }
.bsite-checks { display:grid; gap:var(--space-200); padding:var(--space-300); margin:0 0 var(--space-400); background:var(--bbr-bg-sunken); border-radius:var(--radius-md); list-style:none; }
.bsite-checks li,.bsite-check-result { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-200); font-size:var(--text-sm); }
.bsite-check-result strong,.bsite-checks li strong { font-weight:600; }
.bsite-check-result.is-ok strong { color:var(--bbr-green-fg); }
.bsite-check-result.is-warn strong { color:var(--bbr-amber-fg); }
.bsite-checks .bsite-note { margin:var(--space-200) 0 0; }
#bsite-verify-frame { display:block; width:100%; height:620px; border:1px solid var(--bbr-bd-default); border-radius:var(--radius-md); }
#bsite-verify-frame[hidden] { display:none; }
.bsite-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-300); margin-bottom:var(--space-400); }
.bsite-metrics > div { display:flex; flex-direction:column; padding:var(--space-300); gap:var(--space-200); border:1px solid var(--bbr-bd-default); border-radius:var(--radius-md); min-width:0; }
.bsite-metrics span { font-size:var(--text-sm); color:var(--bbr-fg-muted); }
.bsite-metrics strong { font-size:var(--text-xl); font-weight:700; font-variant-numeric:tabular-nums; }
.bsite-table-wrap { overflow-x:auto; }
.bsite-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.bsite-table caption { text-align:left; color:var(--bbr-fg-heading); font-weight:600; padding-bottom:var(--space-300); }
.bsite-table th,.bsite-table td { padding:var(--space-300); text-align:left; border-bottom:1px solid var(--bbr-bd-default); }
.bsite-table td { font-variant-numeric:tabular-nums; }
.bsite-commerce { margin-top:var(--space-500); }
.bsite-commerce-heading { display:flex; flex-wrap:wrap; gap:var(--space-300); justify-content:space-between; align-items:center; margin-bottom:var(--space-400); }
.bsite-commerce-heading h2 { margin:0; font-size:var(--text-lg); font-weight:600; }
.bsite-commerce-list { display:grid; gap:var(--space-400); }
.bsite-commerce-item { padding:var(--space-400); border:1px solid var(--bbr-bd-default); border-radius:var(--radius-md); }
.bsite-commerce-item h3 { font-size:var(--text-base); font-weight:600; color:var(--bbr-fg-heading); margin:0 0 var(--space-300); }
.bsite-feature-list { display:flex; flex-wrap:wrap; gap:var(--space-200) var(--space-400); margin-bottom:var(--space-400); }
.bsite-feature-list .bsite-check { margin:0; }
.bsite-child-band { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; align-items:start; gap:var(--space-200); }
.bsite-child-band .btn { margin-top:var(--space-500); }
.bsite-commerce-empty { padding:var(--space-300); color:var(--bbr-fg-muted); font-size:var(--text-sm); }
.bsite-sr-only { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#bcom-panel[hidden] { display:none; }
#bcom-controls { border:0; padding:0; margin:0; min-width:0; }
#bcom-add-band { margin-top:var(--space-200); }
.bsite-translation { padding:var(--space-300) 0; border-top:1px solid var(--bbr-bd-default); }
.bsite-translation summary { cursor:pointer; font-size:var(--text-base); font-weight:600; padding:var(--space-200) 0; color:var(--bbr-fg-primary); }
.bsite-translation[open] summary { margin-bottom:var(--space-300); }
@container(min-width:900px) { .bsite-templates { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@container (max-width:480px) { .bsite-grid,.bsite-templates { grid-template-columns:minmax(0,1fr); } }
@container (max-width:760px) { .bsite-layout { grid-template-columns:minmax(0,1fr); } .bsite-live-preview { order:-1; position:static; } .bsite-preview { max-height:280px; } .bsite-preview-card > .bsite-note { display:none; } }
@media(max-width:480px) { .bsite-grid,.bsite-templates { grid-template-columns:1fr; } .bsite-card { padding:var(--space-400); } .bsite-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .bsite-child-band { grid-template-columns:repeat(2,minmax(0,1fr)); } .bsite-child-band .btn { margin-top:0; } .bsite-stages .btn { min-height:44px; } }