/* =====================================================================
   Rownez Resort — design tokens
   The single source of truth for colour, type, spacing and elevation.
   Every other stylesheet reads from these variables; nothing hard-codes
   a hex value. Light and dark are the same tokens with different values,
   so switching themes never needs a second stylesheet.
   ===================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------ */
  --rz-navy:        #082A4D;
  --rz-navy-600:    #0C3763;
  --rz-navy-400:    #1A4E82;
  --rz-navy-900:    #051B33;
  --rz-gold:        #D4AF37;
  --rz-gold-bright: #E6C558;
  --rz-gold-deep:   #A8862A;
  --rz-white:       #FFFFFF;
  --rz-dark:        #0B1622;
  --rz-dark-raised: #132132;
  --rz-canvas:      #F8F9FA;

  /* ---- Semantic surfaces (light theme) ---------------------------- */
  --rz-bg:              var(--rz-canvas);
  --rz-bg-subtle:       #EEF1F5;
  --rz-surface:         var(--rz-white);
  --rz-surface-raised:  var(--rz-white);
  --rz-surface-sunken:  #F2F4F7;
  --rz-border:          rgba(8, 42, 77, 0.12);
  --rz-border-strong:   rgba(8, 42, 77, 0.24);
  --rz-overlay:         rgba(8, 42, 77, 0.55);

  /* ---- Text ------------------------------------------------------- */
  --rz-text:            #0E1F33;
  --rz-text-muted:      #5A6B7D;
  --rz-text-subtle:     #8494A4;
  --rz-text-inverse:    var(--rz-white);
  --rz-text-on-gold:    var(--rz-navy-900);

  /* ---- Interactive ------------------------------------------------ */
  --rz-primary:         var(--rz-navy);
  --rz-primary-hover:   var(--rz-navy-600);
  --rz-primary-soft:    rgba(8, 42, 77, 0.08);
  --rz-accent:          var(--rz-gold);
  --rz-accent-hover:    var(--rz-gold-deep);
  --rz-accent-soft:     rgba(212, 175, 55, 0.14);
  --rz-focus-ring:      0 0 0 3px rgba(212, 175, 55, 0.45);

  /* ---- Status ----------------------------------------------------- */
  --rz-success:  #1B7F5A;
  --rz-warning:  #B57A12;
  --rz-danger:   #B3261E;
  --rz-info:     #1A6C9C;
  --rz-success-soft: rgba(27, 127, 90, 0.12);
  --rz-warning-soft: rgba(181, 122, 18, 0.14);
  --rz-danger-soft:  rgba(179, 38, 30, 0.12);
  --rz-info-soft:    rgba(26, 108, 156, 0.12);

  /* ---- Glass ------------------------------------------------------ */
  --rz-glass-bg:      rgba(255, 255, 255, 0.72);
  --rz-glass-border:  rgba(255, 255, 255, 0.55);
  --rz-glass-blur:    18px;
  --rz-glass-shadow:  0 8px 32px rgba(8, 42, 77, 0.12);

  /* ---- Typography -------------------------------------------------
     Cormorant Garamond carries the luxury register in headings; Inter
     keeps long interface text legible at small sizes on a phone.       */
  --rz-font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --rz-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rz-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --rz-text-2xs:  0.6875rem;   /* 11px — table meta */
  --rz-text-xs:   0.75rem;     /* 12px — labels     */
  --rz-text-sm:   0.875rem;    /* 14px — body small */
  --rz-text-base: 1rem;        /* 16px — body       */
  --rz-text-lg:   1.125rem;
  --rz-text-xl:   1.375rem;
  --rz-text-2xl:  1.75rem;
  --rz-text-3xl:  2.25rem;
  --rz-text-4xl:  3rem;
  --rz-text-5xl:  4rem;

  --rz-weight-light:    300;
  --rz-weight-regular:  400;
  --rz-weight-medium:   500;
  --rz-weight-semibold: 600;
  --rz-weight-bold:     700;

  --rz-leading-tight: 1.15;
  --rz-leading-snug:  1.35;
  --rz-leading-body:  1.65;

  /* Wide letter-spacing on small caps is the thread that runs through
     the whole brand — eyebrows, buttons, nav, section labels.          */
  --rz-tracking-wide:  0.08em;
  --rz-tracking-wider: 0.16em;

  /* ---- Spacing (4px base) ----------------------------------------- */
  --rz-space-1:  0.25rem;
  --rz-space-2:  0.5rem;
  --rz-space-3:  0.75rem;
  --rz-space-4:  1rem;
  --rz-space-5:  1.5rem;
  --rz-space-6:  2rem;
  --rz-space-7:  3rem;
  --rz-space-8:  4rem;
  --rz-space-9:  6rem;
  --rz-space-10: 8rem;

  /* ---- Radius ----------------------------------------------------- */
  --rz-radius-sm:   6px;
  --rz-radius-md:   12px;
  --rz-radius-lg:   18px;
  --rz-radius-xl:   26px;
  --rz-radius-pill: 999px;

  /* ---- Elevation -------------------------------------------------- */
  --rz-shadow-xs: 0 1px 2px rgba(8, 42, 77, 0.06);
  --rz-shadow-sm: 0 2px 8px rgba(8, 42, 77, 0.08);
  --rz-shadow-md: 0 6px 20px rgba(8, 42, 77, 0.10);
  --rz-shadow-lg: 0 14px 40px rgba(8, 42, 77, 0.14);
  --rz-shadow-xl: 0 28px 70px rgba(8, 42, 77, 0.20);

  /* ---- Motion ----------------------------------------------------- */
  --rz-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --rz-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --rz-duration-fast: 140ms;
  --rz-duration:      240ms;
  --rz-duration-slow: 420ms;

  /* ---- Layout ----------------------------------------------------- */
  --rz-container:      1280px;
  --rz-container-wide: 1520px;
  --rz-header-height:  76px;
  --rz-bottomnav-height: 64px;
  --rz-sidebar-width:  268px;
  --rz-sidebar-collapsed: 76px;

  /* ---- Z-index scale ---------------------------------------------- */
  --rz-z-dropdown: 1000;
  --rz-z-sticky:   1020;
  --rz-z-header:   1030;
  --rz-z-backdrop: 1040;
  --rz-z-drawer:   1045;
  --rz-z-modal:    1050;
  --rz-z-toast:    1080;
  --rz-z-float:    1090;

  color-scheme: light;
}

/* =====================================================================
   Dark theme — same token names, different values.
   ===================================================================== */
[data-theme='dark'] {
  --rz-bg:             var(--rz-dark);
  --rz-bg-subtle:      #0F1B29;
  --rz-surface:        var(--rz-dark-raised);
  --rz-surface-raised: #182A3F;
  --rz-surface-sunken: #0A1420;
  --rz-border:         rgba(255, 255, 255, 0.10);
  --rz-border-strong:  rgba(255, 255, 255, 0.20);
  --rz-overlay:        rgba(0, 0, 0, 0.66);

  --rz-text:         #E8EDF3;
  --rz-text-muted:   #9BAABB;
  --rz-text-subtle:  #6F8095;
  --rz-text-inverse: var(--rz-navy-900);

  --rz-primary:       #3E7CBA;
  --rz-primary-hover: #4E8DCB;
  --rz-primary-soft:  rgba(62, 124, 186, 0.16);
  --rz-accent:        var(--rz-gold-bright);
  --rz-accent-hover:  var(--rz-gold);
  --rz-accent-soft:   rgba(230, 197, 88, 0.16);
  --rz-focus-ring:    0 0 0 3px rgba(230, 197, 88, 0.5);

  --rz-success: #4CB68C;
  --rz-warning: #E0A83C;
  --rz-danger:  #E5695F;
  --rz-info:    #5AA9D6;
  --rz-success-soft: rgba(76, 182, 140, 0.16);
  --rz-warning-soft: rgba(224, 168, 60, 0.16);
  --rz-danger-soft:  rgba(229, 105, 95, 0.16);
  --rz-info-soft:    rgba(90, 169, 214, 0.16);

  --rz-glass-bg:     rgba(19, 33, 50, 0.72);
  --rz-glass-border: rgba(255, 255, 255, 0.12);
  --rz-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);

  --rz-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --rz-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.36);
  --rz-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.44);
  --rz-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.52);
  --rz-shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.60);

  color-scheme: dark;
}

/* Bootstrap reads its own variables; point them at ours so components
   inherit the brand without overriding every component class. */
:root,
[data-theme='dark'] {
  --bs-primary:        var(--rz-primary);
  --bs-primary-rgb:    8, 42, 77;
  --bs-body-bg:        var(--rz-bg);
  --bs-body-color:     var(--rz-text);
  --bs-border-color:   var(--rz-border);
  --bs-border-radius:  var(--rz-radius-md);
  --bs-font-sans-serif: var(--rz-font-body);
  --bs-link-color:     var(--rz-primary);
  --bs-link-hover-color: var(--rz-accent-hover);
}

/* =====================================================================
   Reusable primitives
   ===================================================================== */

/* The base link reset. This one rule is why the whole public site was
   rendering every link — nav, footer, in-page content, everything — as
   plain Bootstrap-default blue-underline text: it only ever existed in
   app.css (the admin/auth shell), which PublicLayout.php never loads.
   tokens.css is the one stylesheet both shells share, so it belongs
   here, not duplicated per-shell. */
a { color: var(--rz-primary); text-decoration: none; }
a:hover { color: var(--rz-accent-hover); }

.rz-glass {
  background: var(--rz-glass-bg);
  border: 1px solid var(--rz-glass-border);
  backdrop-filter: blur(var(--rz-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--rz-glass-blur)) saturate(140%);
  box-shadow: var(--rz-glass-shadow);
  border-radius: var(--rz-radius-lg);
}

/* An eyebrow labels a section and states what kind of thing follows.
   Used only where that label carries information, never as decoration. */
.rz-eyebrow {
  font-family: var(--rz-font-body);
  font-size: var(--rz-text-xs);
  font-weight: var(--rz-weight-semibold);
  letter-spacing: var(--rz-tracking-wider);
  text-transform: uppercase;
  color: var(--rz-accent);
}

.rz-display {
  font-family: var(--rz-font-display);
  font-weight: var(--rz-weight-light);
  line-height: var(--rz-leading-tight);
  letter-spacing: -0.01em;
  color: var(--rz-text);
}

.rz-card {
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
  box-shadow: var(--rz-shadow-sm);
  transition: box-shadow var(--rz-duration) var(--rz-ease),
              transform var(--rz-duration) var(--rz-ease);
}

.rz-card:hover {
  box-shadow: var(--rz-shadow-md);
  transform: translateY(-2px);
}

/* ---- Core components ------------------------------------------------
   Buttons, form fields, chips, alerts — moved here from app.css
   (2026-08-08). These were written as shared atoms but had only ever
   been wired into the admin/auth shell's stylesheet, so every button,
   input, chip and alert on the public site was rendering with zero
   custom styling (bare browser defaults) since long before this
   session. tokens.css is the one file both shells load, so this is
   where anything genuinely shared belongs — see the anchor reset above
   for the same fix, same reasoning. */

.rz-icon-btn {
  position: relative;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-md);
  background: var(--rz-surface);
  color: var(--rz-text-muted);
  font-size: 1.05rem;
  transition: all var(--rz-duration-fast) var(--rz-ease);
}
.rz-icon-btn:hover { color: var(--rz-accent); border-color: var(--rz-accent); }

.rz-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--rz-radius-pill);
  font-size: var(--rz-text-2xs);
  font-weight: var(--rz-weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.rz-chip--success { background: var(--rz-success-soft); color: var(--rz-success); }
.rz-chip--warning { background: var(--rz-warning-soft); color: var(--rz-warning); }
.rz-chip--danger  { background: var(--rz-danger-soft);  color: var(--rz-danger); }
.rz-chip--info    { background: var(--rz-info-soft);    color: var(--rz-info); }
.rz-chip--primary { background: var(--rz-primary-soft); color: var(--rz-primary); }
.rz-chip--secondary { background: var(--rz-surface-sunken); color: var(--rz-text-muted); }

.rz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rz-space-2);
  padding: 0.7rem var(--rz-space-5);
  border: 1px solid transparent;
  border-radius: var(--rz-radius-pill);
  font-size: var(--rz-text-xs);
  font-weight: var(--rz-weight-semibold);
  letter-spacing: var(--rz-tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--rz-duration-fast) var(--rz-ease);
}
.rz-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.rz-btn--primary { background: var(--rz-primary); color: var(--rz-white); }
.rz-btn--primary:hover:not(:disabled) { background: var(--rz-primary-hover); color: var(--rz-white); }
.rz-btn--gold { background: var(--rz-accent); color: var(--rz-text-on-gold); }
.rz-btn--gold:hover:not(:disabled) { background: var(--rz-accent-hover); color: var(--rz-text-on-gold); }
.rz-btn--ghost { background: transparent; border-color: var(--rz-border-strong); color: var(--rz-text); }
.rz-btn--ghost:hover:not(:disabled) { border-color: var(--rz-accent); color: var(--rz-accent); }
.rz-btn--block { width: 100%; }

.rz-field { margin-bottom: var(--rz-space-4); }
.rz-label {
  display: block;
  margin-bottom: var(--rz-space-2);
  font-size: var(--rz-text-xs);
  font-weight: var(--rz-weight-semibold);
  letter-spacing: var(--rz-tracking-wide);
  text-transform: uppercase;
  color: var(--rz-text-muted);
}
.rz-input {
  width: 100%;
  padding: 0.75rem var(--rz-space-4);
  border: 1px solid var(--rz-border-strong);
  border-radius: var(--rz-radius-md);
  background: var(--rz-surface);
  color: var(--rz-text);
  font-family: var(--rz-font-body);
  font-size: var(--rz-text-sm);
  /* Explicit, so text, date and select fields side by side come out the
     same height whatever line-height their surroundings inherit. */
  line-height: 1.5;
  transition: border-color var(--rz-duration-fast) var(--rz-ease);
}
.rz-input:focus { border-color: var(--rz-accent); }
.rz-input.is-invalid { border-color: var(--rz-danger); }
.rz-input::placeholder { color: var(--rz-text-subtle); }

/* Dropdowns: each browser drew its own small arrow and left the select a
   different height from the text and date fields beside it. One drawn
   chevron in the brand gold, which reads on both themes, and room for it. */
select.rz-input:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 14px;
  cursor: pointer;
}
select.rz-input option { background-color: var(--rz-surface); color: var(--rz-text); }

/* Date/time fields on iPhone: an empty one has no placeholder text, so it
   collapsed to a sliver, and its built-in minimum width pushed two
   side-by-side fields past the screen edge. Height here = one line plus
   padding plus border, the same as a text field. */
input.rz-input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) {
  min-width: 0;
  min-height: calc(1.5em + 1.5rem + 2px);
  -webkit-appearance: none;
  appearance: none;
}
input.rz-input::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }

/* iPhone Safari zooms the whole page into any field whose text is under
   16px the moment it is tapped; at 16px it stays put. */
@media (max-width: 767.98px) {
  .rz-input { font-size: 16px; }
}
select.rz-input:disabled { cursor: not-allowed; opacity: 0.6; }
.rz-help { margin: var(--rz-space-2) 0 0; font-size: var(--rz-text-xs); color: var(--rz-text-muted); }
.rz-error { margin: var(--rz-space-2) 0 0; font-size: var(--rz-text-xs); color: var(--rz-danger); }

.rz-input-group { position: relative; }
.rz-input-group .rz-input { padding-right: 3rem; }
.rz-input-group__btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: none; background: none;
  color: var(--rz-text-subtle);
  border-radius: var(--rz-radius-sm);
}
.rz-input-group__btn:hover { color: var(--rz-accent); }

.rz-checkbox { display: flex; align-items: flex-start; gap: var(--rz-space-2); font-size: var(--rz-text-sm); }
.rz-checkbox input { margin-top: 3px; accent-color: var(--rz-accent); }

.rz-alert {
  display: flex; gap: var(--rz-space-3);
  padding: var(--rz-space-4);
  border-radius: var(--rz-radius-md);
  font-size: var(--rz-text-sm);
  margin-bottom: var(--rz-space-4);
}
.rz-alert i { flex: 0 0 auto; margin-top: 2px; }
.rz-alert--success { background: var(--rz-success-soft); color: var(--rz-success); }
.rz-alert--warning { background: var(--rz-warning-soft); color: var(--rz-warning); }
.rz-alert--danger  { background: var(--rz-danger-soft);  color: var(--rz-danger); }
.rz-alert--info    { background: var(--rz-info-soft);    color: var(--rz-info); }

.rz-empty {
  margin: 0;
  padding: var(--rz-space-6) var(--rz-space-5);
  text-align: center;
  color: var(--rz-text-muted);
  font-size: var(--rz-text-sm);
}
.rz-empty__action { display: block; margin-top: var(--rz-space-3); }

.rz-skeleton {
  height: 1em;
  border-radius: var(--rz-radius-sm);
  background: linear-gradient(90deg, var(--rz-surface-sunken) 25%, var(--rz-bg-subtle) 50%, var(--rz-surface-sunken) 75%);
  background-size: 200% 100%;
  animation: rz-shimmer 1.4s linear infinite;
}
@keyframes rz-shimmer { to { background-position: -200% 0; } }

.rz-panel__title { font-family: var(--rz-font-body); font-size: var(--rz-text-sm); font-weight: var(--rz-weight-semibold); margin: 0; }

.rz-stack > * + * { margin-top: var(--rz-space-4); }
.rz-muted { color: var(--rz-text-muted); }
.rz-numeric { font-variant-numeric: tabular-nums; }

/* The gold hairline under a heading is the one ornament the brand keeps. */
.rz-rule::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin-top: var(--rz-space-3);
  background: linear-gradient(90deg, var(--rz-accent), transparent);
}

/* Accessibility floor: focus is always visible, and motion is optional. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--rz-focus-ring);
  border-radius: var(--rz-radius-sm);
}

.rz-skip-link {
  position: absolute;
  left: -9999px;
  top: var(--rz-space-2);
  z-index: var(--rz-z-toast);
  padding: var(--rz-space-3) var(--rz-space-5);
  background: var(--rz-surface);
  color: var(--rz-text);
  border-radius: var(--rz-radius-md);
  box-shadow: var(--rz-shadow-md);
}

.rz-skip-link:focus {
  left: var(--rz-space-4);
}

.rz-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Reserve room for the mobile bottom navigation and the iOS home bar. */
@media (max-width: 991.98px) {
  body.rz-has-bottomnav {
    padding-bottom: calc(var(--rz-bottomnav-height) + env(safe-area-inset-bottom, 0px));
  }
}

@media print {
  .rz-no-print { display: none !important; }
  body { background: #fff; color: #000; }
}