/* Shared variables do not restyle other customer page bodies. */
body.tm-customer-shell {
  --tm-primary: #ebadb8;
  --tm-ink: #29252a;
  --tm-muted: #625e65;
  --tm-border: #e5e1e2;
  --tm-soft: #faf8f7;
  --tm-deep: #82505d;
}
/* Shared customer navbar/footer on every index.php route. Page-content styles remain Home/Booking only. */
body.tm-customer {
  --tm-primary: #ebadb8;
  --tm-ink: #29252a;
  --tm-muted: #625e65;
  --tm-border: #e5e1e2;
  --tm-soft: #faf8f7;
  --tm-deep: #82505d;
  background: #fff;
  color: var(--tm-ink);
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color-scheme: light;
}
body.tm-customer *,
body.tm-customer *::before,
body.tm-customer *::after {
  box-sizing: border-box;
}
body.tm-customer
  :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #82505d;
  outline-offset: 3px;
}
body.tm-customer :is(button, a) {
  -webkit-tap-highlight-color: transparent;
}
body.tm-customer-shell > .navbar {
  box-shadow: none !important;
  padding: 16px 0 !important;
}
body.tm-customer-shell > .navbar > .container-fluid {
  max-width: 1248px;
  margin: auto;
  padding: 0 32px !important;
  gap: 24px;
}
body.tm-customer-shell > .navbar .navbar-brand {
  gap: 10px;
  margin-right: 32px;
  font-size: 18px;
  letter-spacing: 0.04em;
}
body.tm-customer-shell > .navbar .navbar-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
body.tm-customer-shell > .navbar :is(.text-white, .nav-link) {
}
body.tm-customer-shell > .navbar .nav-link {
  font-size: 14px;
  white-space: nowrap;
  padding: 10px 12px !important;
}
body.tm-customer-shell > .navbar .nav-link:hover {
  color: var(--tm-deep) !important;
}
body.tm-customer-shell > .navbar .nav-link > img:not(.rounded-circle) {
  display: none;
}
body.tm-customer-shell > .navbar #search-form {
  display: none !important;
}
body.tm-customer-shell > .navbar .navbar-nav {
  margin-left: auto !important;
  gap: 4px;
}
body.tm-customer-shell > .navbar .navbar-collapse > .d-flex {
  gap: 8px;
  margin-left: 16px;
}
body.tm-customer-shell > .navbar :is(#bookNowBtn, #login-btn) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tm-border) !important;
  border-radius: 6px !important;
  padding: 10px 18px !important;
  font-size: 14px;
  color: var(--tm-ink) !important;
  background: white;
}
body.tm-customer-shell > .navbar #bookNowBtn {
  background: var(--tm-primary);
  border-color: var(--tm-primary) !important;
}
body.tm-customer-shell > .navbar #bookNowBtn i {
  display: none;
}
body.tm-customer-shell > .navbar .navbar-toggler {
  width: 44px;
  height: 44px;
  border: 1px solid var(--tm-border);
  border-radius: 6px;
}
body.tm-customer-shell > .navbar .navbar-toggler-icon {
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='%2329252a' stroke-width='1.6'/%3E%3C/svg%3E");
}
body.tm-customer-shell > footer {
  background: #28262a !important;
  padding: 48px 0 24px !important;
  font-size: 14px;
  line-height: 1.8;
}
body.tm-customer-shell > footer > .container {
  max-width: 1184px;
  padding: 0 24px;
}
body.tm-customer-shell > footer .text-warning {
  color: var(--tm-primary) !important;
  font-size: 16px;
}
body.tm-customer-shell > footer .text-light {
  color: #e2dce0 !important;
}
body.tm-customer-shell > footer .border-light {
  border-color: #504a50 !important;
}
body.tm-customer-shell > footer .ratio {
  height: 190px;
  overflow: hidden;
  border-radius: 6px !important;
  border-color: #504a50 !important;
}
body.tm-customer-shell > footer iframe {
  width: 100%;
  height: 190px;
}
body.tm-customer-shell > footer .col-md-4 > .mt-3 a[href="#"] {
  display: none;
}
body.tm-customer-shell > footer .list-unstyled a {
  display: inline-block;
  padding: 3px 0;
  min-height: 32px;
}
body.tm-customer :is(.tm-btn-primary, .tm-btn-secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid var(--tm-primary);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
body.tm-customer .tm-btn-primary {
  background: var(--tm-primary);
  color: #35242a;
}
body.tm-customer .tm-btn-primary:hover {
  background: #e19aa8;
  border-color: #e19aa8;
  color: #35242a;
  text-decoration: none;
}
body.tm-customer .tm-btn-secondary {
  background: #fff;
  color: var(--tm-ink);
  border-color: #c9c2c6;
}
body.tm-customer .tm-btn-secondary:hover {
  background: var(--tm-soft);
  border-color: var(--tm-deep);
  color: var(--tm-ink);
  text-decoration: none;
}
body.tm-customer .tm-eyebrow {
  margin: 0 0 16px !important;
  color: var(--tm-deep) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.tm-customer #uni_modal .modal-content {
  border-radius: 10px !important;
  border: 1px solid var(--tm-border);
}
body.tm-customer #uni_modal .modal-header {
  padding: 20px 24px;
  background: #fff;
  border-bottom: 1px solid var(--tm-border);
}
body.tm-customer #uni_modal .modal-title {
  font-size: 18px;
  font-weight: 600;
}
body.tm-customer #uni_modal .modal-body {
  padding: 24px;
}
body.tm-customer #uni_modal .modal-dialog {
  margin: 24px auto;
}
/* Keep side gutters on phones only. Above 576px the dialog must keep its
   Bootstrap max-width (500px for modal-md) so shared modals such as Login
   are not stretched to the full viewport width. */
@media (max-width: 575.98px) {
  body.tm-customer #uni_modal .modal-dialog {
    max-width: calc(100% - 32px);
  }
}
body.tm-customer #uni_modal .modal-dialog.modal-lg {
  max-width: min(800px, calc(100% - 32px));
}
@media (max-width: 991px) {
  body.tm-customer-shell > .navbar > .container-fluid {
    padding: 0 20px !important;
  }
  body.tm-customer-shell > .navbar .navbar-collapse {
    border-top: 1px solid var(--tm-border);
    padding-top: 12px;
    margin-top: 12px;
    width: 100%;
  }
  body.tm-customer-shell > .navbar .navbar-nav {
    align-items: stretch;
    margin: 0 !important;
  }
  body.tm-customer-shell > .navbar .navbar-collapse > .d-flex {
    flex-wrap: wrap;
    margin: 12px 0 0;
    gap: 8px;
  }
  body.tm-customer-shell > .navbar .navbar-collapse .nav-link {
    padding: 12px !important;
  }
  body.tm-customer-shell > footer .col-md-4 {
    margin-bottom: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.tm-customer *,
  body.tm-customer *::before,
  body.tm-customer *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* The legacy shared stylesheet absolutely positions the toggler. Keep this shell in normal flow. */
body.tm-customer-shell > .navbar .navbar-toggler {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin-left: auto;
  flex: 0 0 44px;
}

/* Match the existing shared header brand label to this light shell. */
body.tm-customer-shell
  > .navbar
  :is(.tm-nav-brand, .tm-nav-brand-text, .tm-nav-username) {
}

/* Isolate the shell from route-level body typography (including legacy Oswald). */
body.tm-customer-shell > .navbar,
body.tm-customer-shell > footer {
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color-scheme: light;
}
body.tm-customer-shell > .navbar {
  font-size: 16px;
  line-height: 1.6;
  color: var(--tm-ink);
  border-radius: 0 !important;
}
body.tm-customer-shell > .navbar :is(a, button, input, span),
body.tm-customer-shell > footer :is(h4, h5, p, a, span) {
  font-family: inherit;
}
body.tm-customer-shell > .navbar .navbar-brand {
  font-weight: 700;
}
body.tm-customer-shell > footer {
  color: #fff;
}
body.tm-customer-shell > footer :is(h4, h5) {
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}
body.tm-customer-shell > footer :is(p, a) {
  font-size: 14px;
  line-height: 1.8;
}
body.tm-customer-shell > footer a.text-white {
  color: #fff !important;
}
body.tm-customer-shell > footer .small {
  font-size: 12px;
}
body.tm-customer-shell > .navbar *,
body.tm-customer-shell > footer * {
  box-sizing: border-box;
}
body.tm-customer-shell > .navbar :is(a, button, input):focus-visible,
body.tm-customer-shell > footer a:focus-visible {
  outline: 2px solid var(--tm-deep);
  outline-offset: 3px;
}
body.tm-customer-shell > footer a:focus-visible {
  outline-color: var(--tm-primary);
}
/* Prevent product-detail .row overrides from changing only this footer. */
body.tm-customer-shell > footer > .container > .row {
  display: flex !important;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  body.tm-customer-shell > footer > .container > .row {
    display: block !important;
  }
}

/* ==========================================================================
   Customer auth modals: Login, Register, Forgot Password (+ its sub-dialogs)
   One consistent radius; the outer modal shell, the inner card and the
   buttons/inputs all follow it so no square edges show at the sides.
   Scoped to the shared #uni_modal and the auth markup only (no navbar/footer).
   ========================================================================== */
:root {
  --tm-auth-radius: 20px;
  --tm-auth-control-radius: 12px;
}
/* When an auth form is loaded, the form card is the visible surface:
   drop the shell's extra padding/frame so the rounded card is the modal. */
#uni_modal .modal-content:has(.login-ui-modal, #registration) {
  border: 0 !important;
  border-radius: var(--tm-auth-radius) !important;
  background: transparent;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}
#uni_modal .modal-content:has(.login-ui-modal, #registration) > .modal-body {
  padding: 0 !important;
  border-radius: var(--tm-auth-radius);
  overflow: hidden;
}
#uni_modal .custom-login-container,
#uni_modal .account-recovery-container,
#uni_modal #registration {
  border-radius: var(--tm-auth-radius) !important;
  box-sizing: border-box;
  max-width: 100%;
}
#uni_modal .custom-login-container input:not([type="checkbox"]):not([type="radio"]),
#uni_modal .account-recovery-container input:not([type="checkbox"]):not([type="radio"]),
#uni_modal #registration input:not([type="checkbox"]):not([type="radio"]),
#uni_modal #registration select,
#uni_modal #registration textarea,
#uni_modal .account-recovery-container select {
  border-radius: var(--tm-auth-control-radius) !important;
  box-sizing: border-box;
  max-width: 100%;
}
#uni_modal .custom-login-container .btn,
#uni_modal .custom-login-container button.btn-primary,
#uni_modal .account-recovery-container .btn,
#uni_modal #registration .btn,
#uni_modal #registration button[type="submit"] {
  border-radius: var(--tm-auth-control-radius) !important;
}
/* Forgot-password follow-up dialogs rendered inside login.php */
#uni_modal .modal-box,
#uni_modal .login-ui-box {
  border-radius: var(--tm-auth-radius) !important;
  box-sizing: border-box;
}
#uni_modal .modal-box .modal-button,
#uni_modal .modal-box .modal-button1,
#uni_modal .modal-box .modal-select,
#uni_modal .modal-box input {
  border-radius: var(--tm-auth-control-radius);
}
@media (max-width: 575.98px) {
  :root {
    --tm-auth-radius: 16px;
    --tm-auth-control-radius: 10px;
  }
  #uni_modal .custom-login-container,
  #uni_modal .account-recovery-container,
  #uni_modal .modal-box {
    border-radius: var(--tm-auth-radius) !important;
  }
}