/*
 * Braj Resort Samod — global UI layer
 * ----------------------------------
 * Keep this file small. It contains only styles shared by public, guest,
 * worker and admin surfaces. Page-specific styling belongs in the page/theme
 * stylesheets so future changes stay easy to find.
 */

:root {

  --brs-interaction-blue: #0b74d8;
  --brs-interaction-blue-soft: #eaf5ff;
  --brs-interaction-gold: #c2913d;
  --brs-interaction-ink: #153b60;
  --brs-interaction-shadow: 0 14px 34px rgba(26, 67, 105, .10);

}

html {

  scroll-behavior: smooth;

}

body {

  font-synthesis-weight: none;

}

/* --------------------------------------------------------------------------
   Canonical resort branding
   Replace assets/images/brand/logo.webp to update the logo site-wide.
   -------------------------------------------------------------------------- */

.brand-logo,
.r-brand img,
.brand-mark img,
.invoice-logo img,
.brs-loader-logo {

  object-fit: contain;
  object-position: center;

}

.r-brand img {

  background: rgba(255, 250, 237, .94);
  border: 1px solid rgba(181, 137, 65, .28);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(55, 43, 25, .10);

}

.brs-app.r-public[data-page="home"] .r-nav:not(.scrolled) .r-brand img {

  background: rgba(255, 250, 237, .90);
  border-color: rgba(232, 204, 151, .46);

}

.brs-app.r-public .r-nav .r-brand img {

  width: 82px;
  height: 54px;
  flex: 0 0 82px;

}

.brs-app.r-public .brs-footer-brand .r-brand img,
.brs-app.r-public .r-footer .r-brand img {

  width: 92px;
  height: 60px;

}

.brand-mark img,
.invoice-logo img {

  background: transparent;
  transform: none;

}

/* --------------------------------------------------------------------------
   Shared interaction polish
   -------------------------------------------------------------------------- */

:where(.btn, button, a, .panel, .card, .metric-card, .stat-card,
       .r-room-card, .r-experience-card, .r-story-card, .r-gallery-card,
       .side a, .table-wrap) {

  -webkit-tap-highlight-color: transparent;

}

:where(.btn, button, .icon-btn, .side a, .r-nav a, .r-room-card,
       .r-experience-card, .panel, .metric-card, .stat-card) {

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease,
              background-color .2s ease, opacity .2s ease;

}

:where(.btn, button, .icon-btn):active {

  transform: translateY(1px) scale(.99);

}

:where(input, select, textarea, button, a):focus-visible {

  outline: 3px solid rgba(24, 137, 232, .18);
  outline-offset: 2px;

}

:where(.input, .select, input, select, textarea):focus {

  border-color: #7fbdeb !important;
  box-shadow: 0 0 0 4px rgba(50, 145, 225, .08) !important;

}

.r-nav {

  backdrop-filter: saturate(125%) blur(8px);

}

.r-nav .menu a {

  position: relative;

}

.r-nav .menu a::after {

  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -8px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brs-interaction-gold), #e2ba70);
  transition: left .2s ease, right .2s ease;

}

.r-nav .menu a[aria-current="page"]::after,
.r-nav .menu a.active::after {

  left: 18%;
  right: 18%;

}

:where(.dash-top, .panel, .table-wrap, .r-reservation-card, .r-card) {

  border-color: rgba(55, 110, 160, .13) !important;

}

:where(.dash-top, .panel, .r-reservation-card) {

  box-shadow: 0 8px 24px rgba(36, 77, 115, .045);

}

.table tbody tr {

  transition: background-color .16s ease;

}

.table tbody tr:hover {

  background: #f6fbff;

}

.side a.active {

  box-shadow: 0 8px 20px rgba(39, 113, 235, .10);

}

.side a:hover {

  background: #f5f9ff;

}

.toast {

  backdrop-filter: blur(14px);

}

/* --------------------------------------------------------------------------
   Shared back button
   -------------------------------------------------------------------------- */

.global-back-button {

  position: fixed;
  left: clamp(10px, 1.8vw, 22px);
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 2147480000;
  height: 44px;
  padding: 0 14px 0 10px;
  border: 1px solid rgba(44, 86, 121, .16);
  border-radius: 99px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 32px rgba(22, 55, 82, .14);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 7px;
  color: #173e60;
  font: 800 12px/1 Arial, sans-serif;
  cursor: pointer;

}

.global-back-button span {

  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef5ff;
  font-size: 17px;

}

.global-back-button em {

  font-style: normal;

}

/* --------------------------------------------------------------------------
   Rendering/performance helpers
   -------------------------------------------------------------------------- */

@supports (content-visibility: auto) {

  .r-public .brs-public-home-section,
  .r-public .brs-premium-home-wedding,
  .r-public .brs-footer {

    content-visibility:auto;
    contain-intrinsic-size:auto 760px;

  }

}

* {

  scrollbar-width: thin;
  scrollbar-color: #bad8ee transparent;

}

*::-webkit-scrollbar {

  width: 9px;
  height: 9px;

}

*::-webkit-scrollbar-track {

  background: transparent;

}

*::-webkit-scrollbar-thumb {

  background: #c0daee;
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;

}

*::-webkit-scrollbar-thumb:hover {

  background: #94c0e0;
  background-clip: padding-box;

}

@media (hover: hover) {

  :where(.panel, .metric-card, .stat-card, .r-room-card, .r-experience-card,
         .r-story-card, .r-gallery-card):hover {

    transform: translateY(-2px);
    box-shadow: var(--brs-interaction-shadow);

  }

  :where(.btn, .icon-btn):hover {

    transform: translateY(-1px);

  }

  :where(.r-room-card, .r-gallery-card, .photo-banner, .r-gallery-item) img {

    transition: transform .45s cubic-bezier(.2, .75, .2, 1), filter .3s ease;

  }

  :where(.r-room-card, .r-gallery-card, .photo-banner, .r-gallery-item):hover img {

    transform: scale(1.025);

  }

  .r-nav .menu a:hover::after {

    left: 18%;
    right: 18%;

  }

}

@media (max-width: 700px) {

  :where(.panel, .metric-card, .stat-card, .r-room-card):hover {

    transform: none;

  }

  .r-nav {

    backdrop-filter: none;

  }

}

@media (max-width: 640px) {

  .global-back-button {

    left: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    height: 40px;
    padding-right: 10px;

  }

  .global-back-button em {

    display: none;

  }

  .global-back-button span {

    width: 24px;
    height: 24px;

  }

  body {

    padding-bottom: max(56px, env(safe-area-inset-bottom));

  }

  .worker-topbar,
  .dash-top {

    min-width: 0;

  }

  .worker-top-actions,
  .dash-actions {

    max-width: 100%;

  }

  .brs-app.r-public .r-nav .r-brand img {

    width: 68px;
    height: 46px;
    flex-basis: 68px;

  }

}

@media (max-width: 420px) {

  .worker-main,
  .dash-main {

    overflow-x: hidden !important;

  }

  .panel {

    max-width: 100% !important;

  }

  .table-wrap {

    border-radius: 14px;

  }

  .worker-calendar-controls {

    width: 100%;
    display: grid !important;
    grid-template-columns: auto 1fr auto auto;

  }

  .worker-calendar-controls input {

    min-width: 0;

  }

  .worker-live-clock {

    max-width: 100%;

  }

}

@supports (padding: max(0px)) {

  body {

    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);

  }

}

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }

  :where(*, *::before, *::after) {

    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;

  }

}