/* Shared responsive layer. Loaded after page/theme CSS so mobile adaptations are intentional and centralized. */

/* Braj Resort Samod — responsive polish + premium loading experience */

:root {

  --responsive-safe-x: clamp(12px,3.2vw,30px);
  --responsive-touch: 44px;

}

html {

  max-width: 100%;
  overflow-x: hidden;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;

}

body {

  max-width: 100%;
  overflow-x: clip;

}

img,svg,video,canvas {

  max-width: 100%;

}

img {

  height: auto;

}

main,section,article,aside,header,footer,nav,form,.container,.panel,.card,.grid,.dash,.dash-main,.worker-main,.worker-shell>* {

  min-width: 0;

}

input,select,textarea,button {

  max-width: 100%;

}

.table-wrap {

  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;

}

/* V83 final simple loading screen — uses only the final Braj emblem. */

.brs-premium-loader {

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 40%,#fff9ed 0,#f8e7c9 50%,#eed2a5 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .26s ease,visibility .26s ease;
  pointer-events: auto;
  overflow: hidden;

}

.brs-premium-loader::before,.brs-premium-loader::after {

  content: "";
  position: absolute;
  pointer-events: none;
  filter: blur(1px);
  opacity: .16;
  background: radial-gradient(ellipse at center,rgba(111,74,23,.55),transparent 68%);
  width: 36vw;
  height: 58vh;
  transform: rotate(-22deg);

}

.brs-premium-loader::before {

  left: -12vw;
  top: -18vh;

}

.brs-premium-loader::after {

  right: -12vw;
  bottom: -20vh;
  transform: rotate(24deg);

}

.brs-premium-loader[hidden] {

  display: none !important;

}

.brs-premium-loader.is-leaving {

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

}

.brs-loader-simple {

  position: relative;
  z-index: 1;
  width: min(470px,86vw);
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;

}

.brs-loader-logo {

  width: min(330px,68vw);
  height: auto;
  display: block;
  margin-inline: auto;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 13px 20px rgba(103,62,14,.14));
  animation: brsFinalLogoFloat 2.2s ease-in-out infinite;

}

.brs-loader-row {

  width: min(420px,82vw);
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 12px;

}

.brs-loader-track {

  width: min(370px,74vw);
  height: 14px;
  border: 1px solid rgba(157,101,28,.42);
  border-radius: 999px;
  padding: 2px;
  background: rgba(255,255,255,.45);
  box-shadow: inset 0 1px 5px rgba(123,75,18,.08);

}

.brs-loader-fill {

  display: block;
  width: 10%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,#8f5b14,#c68a2f 46%,#f0c66f 78%,#ad6d18);
  box-shadow: 0 3px 10px rgba(169,109,27,.22);
  transition: width .18s ease;

}

.brs-loader-percent {

  min-width: 0;
  text-align: center;
  color: #8b5818;
  font: 700 18px/1 Georgia,serif;
  letter-spacing: .02em;

}

@keyframes brsFinalLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media (max-width:520px) {

  .brs-loader-simple {

    gap: 18px;

  }

  .brs-loader-logo {

    width: min(280px,72vw);

  }

  .brs-loader-row {

    width: min(320px,82vw);
    gap: 10px;

  }

  .brs-loader-track {

    width: min(290px,72vw);
    height: 12px;

  }

  .brs-loader-percent {

    font-size: 16px;

  }

}

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

  .brs-loader-logo {

    animation: none;

  }

  .brs-premium-loader {

    transition-duration: .12s;

  }

}

/* Public pages */

@media (max-width:1180px) {

  .r-public .container {

    width: min(100% - 28px,1180px) !important;

  }

  .r-public .r-brand span {

    font-size: clamp(13px,1.35vw,17px);

  }

  .r-public .r-brand small {

    font-size: 8px;
    letter-spacing: .10em;

  }

  .r-public .menu {

    gap: clamp(8px,1.1vw,18px) !important;

  }

  .r-public .menu a {

    font-size: 13px !important;
    white-space: nowrap;

  }

  .r-public .r-hero-caption {

    max-width: min(680px,74vw) !important;

  }

}

@media (max-width:900px) {

  .r-public .menu {

    display: none !important;

  }

  .r-public .menu-toggle {

    display: inline-grid !important;
    place-items: center;

  }

  .r-public .nav-inner {

    min-height: 72px !important;

  }

  .r-public .r-brand img {

    width: 64px !important;
    height: auto !important;

  }

  .r-public .r-hero-caption {

    left: var(--responsive-safe-x) !important;
    right: var(--responsive-safe-x) !important;
    max-width: 760px !important;
    width: auto !important;

  }

  .r-public .r-hero-caption h1 {

    font-size: clamp(34px,8vw,58px) !important;
    line-height: 1.02 !important;

  }

  .r-public .r-quick-book {

    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;

  }

  .r-public .r-booking-promise {

    grid-column: 1/-1;

  }

  .r-public .brs-public-photo-grid,.r-public .brs-premium-about-grid,.r-public .brs-premium-contact-grid,.r-public .brs-premium-wedding-grid {

    grid-template-columns: 1fr !important;

  }

  .r-public .brs-footer-grid {

    grid-template-columns: repeat(2,minmax(0,1fr)) !important;

  }

}

@media (max-width:620px) {

  :root {

    --responsive-safe-x: 14px;

  }

  .r-public .container {

    width: calc(100% - 24px) !important;

  }

  .r-public .nav-actions>.btn {

    display: none !important;

  }

  .r-public .r-brand small {

    display: none;

  }

  .r-public .r-hero {

    min-height: 78svh !important;

  }

  .r-public .r-hero-caption {

    bottom: 92px !important;

  }

  .r-public .r-hero-caption .cluster {

    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(100%,330px);

  }

  .r-public .r-hero-caption .btn {

    width: 100%;
    justify-content: center;

  }

  .r-public .r-hero-controls {

    right: 12px !important;
    bottom: 18px !important;
    top: auto !important;
    max-height: 54px !important;

  }

  .r-public .r-location {

    left: 12px !important;
    bottom: 20px !important;
    max-width: calc(100% - 150px);

  }

  .r-public .r-quick-book {

    grid-template-columns: 1fr !important;
    padding: 14px !important;

  }

  .r-public .r-quick-book>button {

    width: 100%;

  }

  .r-public .brs-public-home-section {

    padding-left: 0 !important;
    padding-right: 0 !important;

  }

  .r-public .brs-footer-grid {

    grid-template-columns: 1fr !important;

  }

  .r-public h1 {

    overflow-wrap: anywhere;

  }

  .r-public h2 {

    font-size: clamp(25px,8vw,38px) !important;

  }

}

/* Admin, guest and worker responsiveness */

@media (max-width:1100px) {

  body[data-page^="admin-"]:not([data-page="admin-login"]) .dash-top {

    gap: 12px !important;
    flex-wrap: wrap !important;

  }

  body[data-page^="admin-"]:not([data-page="admin-login"]) .dash-actions {

    flex-wrap: wrap !important;
    justify-content: flex-start !important;

  }

  .worker-main {

    padding-left: 18px !important;
    padding-right: 18px !important;

  }

  .worker-kpi-grid {

    grid-template-columns: repeat(3,minmax(0,1fr)) !important;

  }

  .worker-action-grid {

    grid-template-columns: repeat(2,minmax(0,1fr)) !important;

  }

}

@media (max-width:820px) {

  body[data-page^="admin-"]:not([data-page="admin-login"]) .dash-main {

    padding-left: 12px !important;
    padding-right: 12px !important;

  }

  body[data-page^="admin-"]:not([data-page="admin-login"]) .dash-title h1 {

    font-size: clamp(24px,7vw,34px) !important;

  }

  .worker-main {

    padding: 16px 12px 34px !important;

  }

  .worker-section-head {

    align-items: flex-start !important;
    gap: 12px !important;
    flex-wrap: wrap !important;

  }

  .worker-kpi-grid {

    grid-template-columns: repeat(2,minmax(0,1fr)) !important;

  }

  .worker-overview-split,.worker-payment-layout,.worker-calendar-layout,.worker-face-grid {

    grid-template-columns: 1fr !important;

  }

  .worker-action-grid {

    grid-template-columns: 1fr !important;

  }

  .modal {

    padding: 10px !important;

  }

  .modal-card {

    width: min(100%,680px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 18px !important;

  }

  .modal-body {

    padding: 16px !important;

  }

}

@media (max-width:520px) {

  .worker-kpi-grid {

    grid-template-columns: 1fr !important;

  }

  .worker-kpi {

    padding: 14px !important;

  }

  .worker-side {

    padding-left: 10px !important;
    padding-right: 10px !important;

  }

  .worker-nav {

    gap: 6px !important;

  }

  .worker-nav a,.worker-nav button {

    min-height: var(--responsive-touch) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 12px !important;

  }

  .worker-section-head h2 {

    font-size: 26px !important;

  }

  .worker-panel-action-toggle {

    grid-template-columns: 1fr 1fr !important;

  }

  .cluster {

    flex-wrap: wrap;

  }

  .btn {

    min-height: var(--responsive-touch);

  }

  .form-grid {

    grid-template-columns: 1fr !important;

  }

  .form-grid .wide {

    grid-column: auto !important;

  }

  .table {

    min-width: 680px;

  }

}

@media (pointer:coarse) {

  button,.btn,a.btn,input,select {

    min-height: var(--responsive-touch);

  }

}

/* V85: prevent tiny carousel/hero controls from inheriting coarse-pointer 44px button sizing. */
@media(pointer:coarse){
  .r-hero-dots button,.brs-hero-dots button,[class*="hero-dots"] button,[class*="slider-dots"] button{min-height:8px!important;height:8px!important;max-height:8px!important;padding-block:0!important}
}

/* V91 launch visual: honest indeterminate loading, brand-led and accessible. */
.brs-premium-loader{background:radial-gradient(circle at 50% 38%,#fffefa 0%,#f7ead3 63%,#ebdbbc 100%)}
.brs-loader-simple{gap:19px}.brs-loader-welcome{font:800 clamp(10px,1.5vw,13px)/1.5 system-ui,sans-serif;letter-spacing:.22em;color:#97713f;text-align:center}
.brs-loader-logo{max-width:280px;filter:drop-shadow(0 12px 22px rgba(116,78,31,.14))}
.brs-loader-row{gap:11px}.brs-loader-track{position:relative;overflow:hidden;height:7px;border:0;padding:0;background:#e7d5b8}
.brs-loader-fill{position:absolute;width:35%!important;height:100%;left:0;top:0;transition:none!important;animation:brsLoaderReal 1.6s ease-in-out infinite}
.brs-loader-percent{font:600 13px/1.5 system-ui,sans-serif;letter-spacing:.03em;color:#826942}
@keyframes brsLoaderReal{0%{transform:translateX(-110%)}50%{transform:translateX(130%)}100%{transform:translateX(320%)}}
@media(prefers-reduced-motion:reduce){.brs-loader-logo,.brs-loader-fill{animation:none!important}.brs-loader-fill{width:100%!important;opacity:.6}}