/**
 * Shared styling for buyer/cabinet-facing pages that live outside the main
 * SPA (payment/success.php, cabinet/login.php, cabinet/orders.php,
 * cabinet/access.php) — same design tokens as css/style.css (cream/dark/gold,
 * Playfair Display + Inter) so these feel like part of the same site, without
 * pulling in the main site's cursor/nav/GSAP machinery those standalone
 * pages don't load.
 */

:root {
  --cream:        #FAF7F4;
  --cream-card:   #FFFFFF;
  --border:       #E0D4C8;
  --gold:         #C9A96E;
  --gold-light:   #DEC99A;
  --dark:         #1A1A1A;
  --dark-2:       #2D2D2D;
  --gray:         #8A8A8A;
  --red:          #C0392B;
  --sage:         #7A9E7E;
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.cab-body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--dark);
  line-height: 1.6;
}

.cab-wrap { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.cab-wrap--wide { max-width: 960px; }
.cab-wrap--narrow { max-width: 420px; }

.cab-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; }
.cab-brand { font-family: var(--font-serif); font-weight: 700; letter-spacing: .06em; color: var(--gold); font-size: 1.05rem; text-decoration: none; }
.cab-logout { font-size: .8rem; color: var(--gray); text-decoration: none; }
.cab-logout:hover { color: var(--dark); }

h1.cab-h1 { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 700; margin-bottom: .6rem; line-height: 1.2; }
.cab-line { width: 56px; height: 2px; background: var(--gold); margin: 0 0 1.75rem; }
.cab-sub { color: var(--gray); font-size: .92rem; margin-bottom: 2rem; }

.cab-card {
  background: var(--cream-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
}

/* Buttons — same pill/uppercase language as the main site's .btn, minus
   cursor:none (these pages don't run the custom-cursor script). */
.cab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.9rem; border-radius: 100px;
  font-family: var(--font-sans);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, opacity .25s ease;
  white-space: nowrap;
}
.cab-btn--dark { background: var(--dark); color: #fff; border-color: var(--dark); }
.cab-btn--dark:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26,26,26,.22); }
.cab-btn--outline { background: transparent; color: var(--dark); border-color: var(--dark); }
.cab-btn--outline:hover { background: var(--dark); color: #fff; transform: translateY(-2px); }
.cab-btn--gold { background: var(--gold); color: var(--dark); border-color: var(--gold); }
.cab-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(201,169,110,.32); }
.cab-btn--disabled { background: var(--border); color: var(--gray); pointer-events: none; }
.cab-btn--block { width: 100%; }
.cab-btn:disabled { opacity: .55; cursor: default; transform: none !important; box-shadow: none !important; }

/* Form fields */
.cab-field { margin-bottom: 1rem; text-align: left; }
.cab-field label { display: block; font-size: .78rem; color: var(--gray); margin-bottom: .35rem; }
.cab-field label span { color: #B3ABA1; font-size: .72rem; }
.cab-input {
  width: 100%; padding: .8rem 1rem; font-size: .92rem; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: 10px; outline: none;
  background: #fff; color: var(--dark);
}
.cab-input:focus { border-color: var(--gold); }
.cab-err { color: var(--red); font-size: .82rem; margin-top: .6rem; display: none; }
.cab-hint { font-size: .78rem; color: var(--gray); margin-top: 1.25rem; line-height: 1.6; }

/* Small status badges */
.cab-badge { display: inline-block; padding: .3em .85em; border-radius: 100px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cab-badge--gold { background: rgba(201,169,110,.16); color: #8A6C36; }
.cab-badge--sage { background: rgba(122,158,126,.16); color: #4A6B4D; }
.cab-badge--red  { background: rgba(192,57,43,.12); color: var(--red); }
.cab-badge--gray { background: rgba(138,138,138,.14); color: var(--gray); }

@media (max-width: 640px) {
  .cab-wrap { padding: 2rem 1.1rem 4rem; }
  h1.cab-h1 { font-size: 1.55rem; }
}