/* ─────────────────────────────────────────────────────────────
   Goratify site UI — professional components for every public page.
   Loaded by all public pages. Colours come only from the admin theme
   (--primary, --primary-d, --primary-l, --primary-bdr, --primary-rgb).
   ───────────────────────────────────────────────────────────── */

/* Stop sideways shifting on phones: long text or wide tables can't widen the page */
html{ overflow-x: hidden; }
@supports (overflow: clip){ html{ overflow-x: clip; } }
img, video, iframe{ max-width: 100%; height: auto; }
body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .sec-title, .page-banner h1{ text-wrap: balance; overflow-wrap: anywhere; }
p{ text-wrap: pretty; }

:focus-visible{ outline: 3px solid color-mix(in srgb, var(--primary, #0051BA) 55%, transparent) !important; outline-offset: 2px; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 14px; font-weight: 700; font-size: 15px; line-height: 1.2;
  border: 1.5px solid transparent; cursor: pointer; font-family: inherit; text-decoration: none; white-space: normal; text-align: center;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(.99); }
.btn:disabled, .btn[aria-disabled="true"]{ opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary, .btn-submit{
  background: linear-gradient(135deg, var(--primary, #0051BA), var(--primary-d, #003D8F)) !important;
  color: #fff !important; border-color: transparent !important;
  box-shadow: 0 12px 24px -14px var(--primary, #0051BA);
}
.btn-primary:hover, .btn-submit:hover{ box-shadow: 0 16px 30px -14px var(--primary, #0051BA); filter: brightness(1.04); }
.btn-ghost{ background: var(--card, #fff); color: var(--txt, #0A0E27); border-color: var(--bdr, #D4DCE8); }
.btn-ghost:hover{ border-color: var(--primary, #0051BA); color: var(--primary, #0051BA); }
.btn-sm{ min-height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 11px; }
.btn-lg{ min-height: 54px; padding: 0 28px; font-size: 16px; border-radius: 16px; }
.btn-block, .btn-submit{ width: 100%; }

/* ── Cards ──────────────────────────────────────────────────── */
.card{
  background: var(--card, #fff); border: 1px solid var(--bdr, #e5e7eb); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(10,14,39,.04), 0 12px 28px -22px rgba(10,14,39,.25);
}
a.card{ display: block; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.card:hover{ transform: translateY(-3px); border-color: var(--primary-bdr, #B8D9F7); box-shadow: 0 2px 4px rgba(10,14,39,.05), 0 22px 40px -24px rgba(var(--primary-rgb, 0,81,186), .4); }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group{ margin-bottom: 18px; }
.form-label{ display: block; font-size: 13px; font-weight: 700; color: var(--txt2, #536478); margin-bottom: 8px; letter-spacing: .1px; }
.form-control, input.form-control, select.form-control, textarea.form-control{
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid var(--bdr, #D4DCE8); background: var(--bg2, #fff); color: var(--txt, #0A0E27);
  font-size: 16px; font-family: inherit; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea.form-control{ min-height: 110px; line-height: 1.6; resize: vertical; }
.form-control:focus{ border-color: var(--primary, #0051BA); box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 0,81,186), .14); }
.form-control::placeholder{ color: var(--txt3, #94A3B8); }
.input-wrap{ position: relative; }
.input-wrap .form-control{ padding-left: 44px; }
.input-icon{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--txt3, #94A3B8); pointer-events: none; display: flex; }
.input-wrap .form-control:focus ~ .input-icon, .input-wrap:focus-within .input-icon{ color: var(--primary, #0051BA); }

/* ── Page banners (inner pages) ─────────────────────────────── */
.page-banner{
  background:
    radial-gradient(700px 300px at 85% -10%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, var(--primary-d, #003D8F) 0%, var(--primary, #0051BA) 100%);
  color: #fff; padding: clamp(36px, 6vw, 60px) 0 clamp(32px, 5vw, 48px);
}
.page-banner h1{ color: #fff; font-size: clamp(26px, 4vw, 40px); font-weight: 900; letter-spacing: -.8px; line-height: 1.12; margin: 0 0 10px; }
.page-banner p, .page-banner-inner p{ color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.65; max-width: 680px; }
.page-banner-badge{
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 12px; font-weight: 700; margin-bottom: 14px;
}
.page-banner-badge-dot{ width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.page-content{ padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); }

/* ── Section labels ─────────────────────────────────────────── */
.sec-badge{
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: var(--primary-l, #E6F2FF); color: var(--primary, #0051BA); border: 1px solid var(--primary-bdr, #B8D9F7); letter-spacing: .3px;
}
.sec-badge-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--primary, #0051BA); }
.sec-title{ font-size: clamp(24px, 3.2vw, 34px); font-weight: 900; letter-spacing: -.7px; line-height: 1.15; color: var(--txt, #0A0E27); }

/* ── Legal / long-form pages ────────────────────────────────── */
.legal-section{ padding: 26px 0; border-bottom: 1px solid var(--bdr, #e5e7eb); }
.legal-section:last-child{ border-bottom: 0; }
.legal-section p, .legal-section li{ font-size: 15.5px; line-height: 1.8; color: var(--txt2, #536478); }
.toc-link{ display: block; padding: 9px 12px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--txt2, #536478); transition: background .15s ease, color .15s ease; }
.toc-link:hover{ background: var(--primary-l, #E6F2FF); color: var(--primary, #0051BA); }

/* ── Alerts and error text ──────────────────────────────────── */
.alert{ border-radius: 14px; padding: 13px 16px; font-size: 14px; line-height: 1.6; border: 1px solid; }
.alert-danger, .error{ color: #b42318; }
.alert-danger{ background: #fef2f2; border-color: #fecaca; }
.alert-success{ background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-warning{ background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* ── Tables: scroll inside their own box, never the page ─────── */
table{ max-width: 100%; }
.table-wrap, .table-responsive{ overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }

/* ── Mobile: comfortable tap targets and spacing ─────────────── */
@media (max-width: 720px){
  .btn{ min-height: 48px; }
  .card{ border-radius: 18px; }
  .page-banner{ padding: 34px 0 30px; }
  .page-content{ padding: 24px 0 44px; }
  .legal-section{ padding: 20px 0; }
  .form-control{ font-size: 16px; }
}

@media (prefers-reduced-motion: reduce){
  .btn, a.card, .form-control{ transition: none !important; }
  .btn:hover, a.card:hover{ transform: none !important; }
}

/* ── Centred page banners on every screen size ───────────────
   Banner content (badge, title, description) is centred so it lines
   up with the cards and filters below it. Fixes the off-centre look
   on the events, venues, lounges and restaurants pages on phones. */
.page-banner{ text-align: center; }
.page-banner-inner{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.page-banner-inner > *{ max-width: 100%; }
.page-banner-badge{ margin-left: auto; margin-right: auto; }
.page-banner h1{ width: 100%; margin-left: auto; margin-right: auto; }
.page-banner p, .page-banner-inner p{ margin-left: auto; margin-right: auto; }