/* Nomuvo's shared finish. Discovery owns its hero; the room renderer owns its scene.
   This layer changes surfaces and controls without changing product layouts. */
:root {
  --glass-line: rgba(53, 80, 62, .15);
  --glass-paper: rgba(255, 255, 251, .94);
  --glass-shadow: 0 7px 24px rgba(26, 49, 35, .045), inset 0 1px 0 rgba(255, 255, 255, .92);
  --glass-green: #183d31;
  --glass-cream: #f2f5b2;
}

/* Familiar actions share one silhouette and keep their semantic colours. */
.btn {
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: -.012em;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
:where(.profile-layout, .booking-layout, .account-main, .auth-shell, .os-main, .modal, .restaurant-card, .seating-experience) .btn {
  border-radius: 999px;
}
.seating-actions .btn { border-radius: 999px; }
.qty-btn { border-radius: 50%; border-color: rgba(65, 91, 68, .25); background: rgba(255,255,249,.9); }
.qty-btn:hover:not(:disabled) { background: #eff4e1; border-color: #8ea476; }
.btn-primary {
  background: linear-gradient(150deg, #294e3f, #173b30);
  border-color: rgba(255, 255, 255, .1);
  color: #fffef4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 3px 8px rgba(23, 59, 48, .07);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(150deg, #365e4b, #214a3a);
  border-color: rgba(193, 219, 167, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), 0 4px 12px rgba(23, 59, 48, .12);
}
.btn-lime {
  background: linear-gradient(140deg, #f7fac7, #eaf0a4);
  color: #233929;
  border-color: rgba(183, 199, 114, .36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 3px 12px rgba(142, 158, 73, .09);
}
.btn-lime:hover:not(:disabled) { background: #f8fbcd; border-color: #b1c478; }
.btn-secondary {
  background: rgba(255, 255, 253, .78);
  border-color: rgba(62, 83, 64, .23);
  color: #244735;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
:where(.profile-layout, .booking-layout, .account-main, .auth-shell, .os-main, .modal, .restaurant-card) .btn-secondary:hover:not(:disabled) {
  background: #f4f7e7;
  border-color: #94a785;
  box-shadow: 0 3px 10px rgba(37, 65, 45, .05);
}
.btn-ghost:hover:not(:disabled) { background: rgba(89, 117, 74, .08); color: #1f4432; }
.btn-danger {
  background: #fff5f2;
  border-color: #eccbc4;
  color: #a63025;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.btn-danger:hover:not(:disabled) { background: #fbe7e1; border-color: #d89183; color: #89271e; }
.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
  box-shadow: none;
}
:is(.btn, .icon-button, .icon-action, .heart-button, .modal-close):focus-visible {
  outline: 2px solid #355c3c;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(221, 235, 162, .6);
}

/* Daylight surfaces are deliberately opaque enough for long-form text and data. */
:is(.surface-card, .panel, .booking-card, .booking-item, .restaurant-card, .public-menu-card, .restaurant-menu-card, .review-panel, .review-summary-card, .data-card, .kpi, .dash-card, .media-card, .toolbox, .property-panel, .os-filter-bar, .location-review-card) {
  background: var(--glass-paper);
  border-color: var(--glass-line);
  box-shadow: var(--glass-shadow);
}
:is(.profile-layout, .booking-layout, .account-main) .panel,
.booking-card, .booking-item, .restaurant-card,
.os-main :is(.panel, .review-panel, .media-card, .restaurant-menu-card),
.data-card, .review-summary-card {
  border-radius: 24px;
}
:is(.kpi, .dash-card, .os-filter-bar, .toolbox, .property-panel, .public-menu-card) { border-radius: 20px; }
.restaurant-card .card-content { background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(246,247,236,.62)); }
.restaurant-card .card-bottom { border-top-color: rgba(54, 78, 60, .1); }
.restaurant-card:hover { box-shadow: 0 14px 34px rgba(28, 57, 39, .09), inset 0 1px 0 #fff; }
.booking-box { border-top: 1px solid var(--glass-line); }
:is(.info-tile, .about-location, .demo-login, .property-note, .reservation-note, .reservation-identity, .reservation-detail-grid > div, .staff-section, .checkout-menu) {
  background: rgba(239, 242, 228, .64);
  border-color: rgba(73, 99, 67, .12);
  border-radius: 16px;
}
.feature-item { background: rgba(236, 241, 222, .76); border-color: rgba(86, 111, 67, .14); border-radius: 20px; }
.feature-icon, .dash-card-icon { background: #edf2c9; color: #35513a; }
.detail-total { background: linear-gradient(120deg, #294b38, #173b30); border-radius: 16px; }

/* Inputs retain their existing dimensions, including compact seating controls. */
:where(.profile-layout, .booking-layout, .account-main, .auth-shell, .os-main, .modal) .control {
  background: rgba(255, 255, 253, .82);
  border-color: rgba(65, 91, 68, .3);
  border-radius: 16px;
  box-shadow: inset 0 1px 2px rgba(41, 61, 42, .025);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
:where(.profile-layout, .booking-layout, .account-main, .auth-shell, .os-main, .modal) .control:hover:not(:disabled) { border-color: #8b9c7e; }
:where(.profile-layout, .booking-layout, .account-main, .auth-shell, .os-main, .modal) .control:focus {
  border-color: #6e8b58;
  background: #fffffb;
}
:where(.profile-layout, .booking-layout, .account-main, .auth-shell, .os-main, .modal) .control:disabled {
  background: #edf0e7;
  color: #73806b;
}
:where(.profile-layout, .booking-layout, .account-main, .auth-shell, .os-main, .modal) .control[aria-invalid="true"] {
  background: #fff8f5;
  border-color: #b44e3f;
}
.file-control::file-selector-button { border-radius: 999px; font-weight: 650; background: #284b39; }
:is(.date-option, .time-option, .media-tabs button, .avatar-change-btn) {
  border-radius: 999px;
  border-color: rgba(68, 92, 65, .24);
  background: rgba(255, 255, 251, .85);
  font-weight: 600;
}
.date-option { border-radius: 20px; }
:is(.date-option, .time-option, .media-tabs button).active {
  background: linear-gradient(145deg, #31503d, #204432);
  color: #fffff6;
  border-color: #31503d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
:is(.order-choice-card, .preference-card) {
  border-radius: 22px;
  background: rgba(251, 252, 244, .9);
  border-color: rgba(80, 105, 69, .22);
  box-shadow: inset 0 1px 0 #fff;
}
:is(.order-choice-card, .preference-card):hover,
.preference-card.selected {
  background: #f2f6e3;
  border-color: #8ca56d;
  box-shadow: 0 0 0 2px rgba(163, 186, 116, .12), inset 0 1px 0 #fff;
}
.progress-step:is(.active, .done) .progress-line { background: linear-gradient(90deg, #456940, #a3b96e); }
.account-nav button { border-radius: 999px; font-weight: 600; }
.account-nav button.active { background: #284b38; color: #fffef2; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.account-nav button:not(.active):hover { background: #eff3e4; color: #284b38; }

/* Photographic and dark surfaces carry the actual translucent treatment. */
.topbar { background: rgba(249, 248, 241, .9); border-bottom-color: rgba(80, 99, 72, .1); }
.restaurant-card .photo-badges .pill,
.restaurant-card .heart-button,
.profile-gallery .gallery-count,
.promo-nav {
  background: rgba(24, 48, 35, .58);
  border-color: rgba(255, 255, 236, .4);
  color: #fffef1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 12px rgba(7, 24, 13, .08);
}
.restaurant-card .heart-button.is-saved { background: rgba(255, 248, 240, .94); border-color: rgba(255,255,255,.72); color: #b23748; }
.restaurant-card .heart-button:hover { background: rgba(45, 70, 45, .82); }
.restaurant-card .heart-button.is-saved:hover { background: #fff8ef; color: #9b2638; }
.profile-actions .heart-button,
.icon-action,
.modal-close { background: rgba(255,255,250,.84); border-color: rgba(70, 95, 66, .22); }
.auth-shell { background: #f8f8ee; }
.auth-quote {
  padding: 28px;
  background: rgba(21, 43, 30, .67);
  border: 1px solid rgba(241, 249, 219, .28);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 244, .13);
}
.auth-quote p { color: #e5e9d9; }
.media-header-card,
.admin-os-banner { background: linear-gradient(135deg, #314d36, #163b30); border: 1px solid rgba(255,255,235,.12); box-shadow: inset 0 1px 0 rgba(255,255,245,.1); }
.media-header-card .btn-secondary,
.admin-os-banner .btn-secondary {
  background: rgba(237, 245, 207, .1);
  color: #f5f8e5;
  border-color: rgba(237, 245, 207, .38);
}
.media-header-card .btn-secondary:hover:not(:disabled),
.admin-os-banner .btn-secondary:hover:not(:disabled) { background: rgba(237, 245, 207, .2); color: #ffffed; border-color: rgba(237, 245, 207, .65); }
.workspace-page .sidebar { background: linear-gradient(160deg, #253b2f, #192f26 68%); border-right: 1px solid rgba(240, 247, 223, .08); }
.workspace-page .side-nav button { border: 1px solid transparent; }
.workspace-page .side-nav button.active { background: rgba(218, 237, 155, .13); border-color: rgba(218, 237, 155, .11); color: #e7efa9; box-shadow: inset 0 1px 0 rgba(255,255,239,.06); }
.workspace-page .side-nav button.active:hover { background: rgba(218, 237, 155, .19); color: #f0f5bd; }
.sidebar .side-public-site { background: rgba(233, 242, 213, .08); border: 1px solid rgba(235, 246, 216, .13); box-shadow: inset 0 1px 0 rgba(255,255,245,.06); }
.sidebar .side-logout { background: rgba(239, 245, 219, .025); border-color: rgba(240, 246, 221, .68); }
.data-table th { background: rgba(235, 239, 224, .59); }
.data-table tr:hover td { background: #f7f9ee; }
.data-table tr.row-invalid td, .data-table .row-invalid:hover td { background: #fff0ee; }
.data-card-head { border-bottom-color: var(--glass-line); }
:is(.staff-row, .category-row, .queue-item) { border-radius: 18px; background: rgba(255,255,250,.8); }
:is(.staff-row, .category-row).archived { background: #eff1e9; }
.file-drop, .upload-zone { background: rgba(247, 250, 234, .85); border-color: #a6b58b; border-radius: 24px; }

/* Floating UI has a stronger glass edge; nested form content stays readable. */
.modal-backdrop { background: rgba(12, 29, 20, .54); }
.modal,
.table-picker-modal,
.order-type-modal {
  background: rgba(255, 255, 249, .97);
  border: 1px solid rgba(255, 255, 240, .8);
  border-radius: 28px;
  box-shadow: 0 30px 100px rgba(8, 28, 17, .27), inset 0 1px 0 #fff;
}
.modal.modal-destructive { border: 2px solid #dea193; box-shadow: 0 30px 100px rgba(8, 28, 17, .27), 0 0 0 3px rgba(184, 77, 56, .1); }
.modal.modal-wide .modal-actions, .modal.modal-xl .modal-actions { background: rgba(253, 254, 246, .97); }
.toast { background: rgba(27, 56, 37, .95); color: #fffef1; border: 1px solid rgba(239, 249, 211, .25); border-radius: 20px; box-shadow: 0 14px 40px rgba(20, 46, 28, .18), inset 0 1px 0 rgba(255,255,242,.1); }
.footer-social-link { background: rgba(242, 248, 214, .035); border-color: rgba(242, 248, 214, .22); }
.footer-social-link:hover { background: rgba(242, 248, 214, .1); border-color: rgba(242, 248, 214, .44); }
.store-badge { border-radius: 16px; background: rgba(243, 249, 221, .05); border-color: rgba(243, 249, 221, .18); }

/* Enhance only surfaces that reveal useful content behind them. Base colours
   above are the complete fallback when backdrop filters are unavailable. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.restaurant-card .photo-badges .pill, .restaurant-card .heart-button, .profile-gallery .gallery-count, .promo-nav, .auth-quote, .toast) {
    -webkit-backdrop-filter: blur(16px) saturate(115%);
    backdrop-filter: blur(16px) saturate(115%);
  }
  .topbar { -webkit-backdrop-filter: blur(22px) saturate(110%); backdrop-filter: blur(22px) saturate(110%); }
  .modal-backdrop { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

@media (max-width: 660px) {
  :is(.profile-layout, .booking-layout, .account-main) .panel,
  .booking-card, .booking-item,
  .os-main :is(.panel, .review-panel, .media-card, .restaurant-menu-card),
  .data-card, .review-summary-card { border-radius: 20px; }
  .auth-quote { padding: 20px; border-radius: 22px; }
  .modal, .table-picker-modal, .order-type-modal { border-radius: 24px; }
}
@media (pointer: coarse) {
  :is(.btn-sm, .icon-action, .heart-button, .modal-close, .avatar-change-btn, .media-tabs button, .time-option) { min-height: 44px; }
  :is(.icon-action, .heart-button, .modal-close) { min-width: 44px; }
}
@media (hover: none) {
  .restaurant-card:hover { transform: none; box-shadow: var(--glass-shadow); }
}
@media (prefers-reduced-motion: reduce) {
  .btn,
  :where(.profile-layout, .booking-layout, .account-main, .auth-shell, .os-main, .modal) .control,
  .restaurant-card, .toast { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: #f9f8f1; }
  :is(.restaurant-card .photo-badges .pill, .restaurant-card .heart-button, .profile-gallery .gallery-count, .promo-nav, .auth-quote, .toast) {
    background: #284535;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .restaurant-card .heart-button.is-saved { background: #fff8ef; }
  .modal, .table-picker-modal, .order-type-modal { background: #fffff9; }
}