/* ═══════════════════════════════════════════════════════════════════════
   luxury.css  —  Beyond Borders shared design system
   Used by: login, register-subscriber, register-agency, dashboard,
            search-results, hotel-details, booking, profile, and all
            agency / subscriber / hotel portals.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Google Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;500;700;900&display=swap');

/* ─── Design Tokens ─────────────────────────────────────────────────── */
:root {
  /* Palette */
  --ink:        #1a1208;
  --ink-2:      #2a1b08;
  --ivory:      #fdfbf6;
  --ivory-2:    #f8f3e8;
  --parchment:  #ece5d8;
  --line:       rgba(153,116,31,0.18);

  /* Gold scale */
  --gold:       #9e7a1e;
  --gold-lt:    #c8a541;
  --gold-bright:#d4af37;
  --gold-dk:    #7a5c0f;

  /* Typography */
  --serif: 'Playfair Display', 'Georgia', serif;
  --sans:  'Lato', 'Open Sans', 'Segoe UI', sans-serif;

  /* Radii */
  --radius:    8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(26,18,8,0.08);
  --shadow-md: 0 6px 24px rgba(26,18,8,0.12);
  --shadow-lg: 0 16px 48px rgba(26,18,8,0.16);
  --shadow-gold: 0 8px 28px rgba(158,122,30,0.30);

  /* Transitions */
  --ease: cubic-bezier(0.4,0,0.2,1);
}

/* ─── Base Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* ─── Typography helpers ─────────────────────────────────────────────── */
.serif { font-family: var(--serif); }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 600;
}

/* ─── Form — lx-field system ─────────────────────────────────────────── */
.lx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lx-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #5c4c35;
}

.lx-input,
.lx-select,
.lx-textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--parchment);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

.lx-textarea {
  height: auto;
  min-height: 100px;
  padding: 12px 14px;
  resize: vertical;
}

.lx-input:focus,
.lx-select:focus,
.lx-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(158,122,30,0.12);
}

.lx-input::placeholder,
.lx-textarea::placeholder {
  color: #b5a899;
}

/* Input with left icon */
.lx-input-wrap {
  position: relative;
}
.lx-input-wrap .lx-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #b5a899;
  font-size: 14px;
  pointer-events: none;
  transition: color 0.2s;
}
.lx-input-wrap:focus-within .lx-icon { color: var(--gold); }
.lx-input.has-icon { padding-left: 40px; }

/* Select arrow */
.lx-select-wrap {
  position: relative;
}
.lx-select-wrap::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #b5a899;
  pointer-events: none;
}

/* ─── Spinner ─────────────────────────────────────────────────────────── */
.lx-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(158,122,30,0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: lx-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes lx-spin { to { transform: rotate(360deg); } }

/* ─── Alerts ─────────────────────────────────────────────────────────── */
.lx-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.5;
}
.lx-alert i { margin-top: 1px; flex-shrink: 0; }
.lx-alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.lx-alert-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.lx-alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.lx-alert-info    { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              transform 0.15s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* Gold / primary */
.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-lt) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold-lt) 0%, var(--gold-bright) 100%);
  box-shadow: 0 10px 32px rgba(158,122,30,0.40);
}
.btn-gold:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Outline / secondary */
.btn-outline {
  background: transparent;
  color: var(--gold);
  border-color: rgba(158,122,30,0.45);
}
.btn-outline:hover {
  background: rgba(158,122,30,0.06);
  border-color: var(--gold);
}

/* Dark / ink */
.btn-ink {
  background: var(--ink);
  color: var(--ivory);
  border-color: transparent;
}
.btn-ink:hover {
  background: var(--ink-2);
}

/* Ghost on dark background */
.btn-ghost-white {
  background: transparent;
  color: rgba(253,251,246,0.85);
  border-color: rgba(253,251,246,0.35);
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(253,251,246,0.65);
}

/* ─── Card ────────────────────────────────────────────────────────────── */
.lx-card {
  background: #fff;
  border: 1px solid var(--parchment);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s var(--ease);
}
.lx-card:hover { box-shadow: var(--shadow-md); }

/* ─── Badge / pill ────────────────────────────────────────────────────── */
.lx-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.lx-badge-gold    { background: rgba(158,122,30,0.12); color: var(--gold-dk); }
.lx-badge-green   { background: #d1fae5; color: #065f46; }
.lx-badge-red     { background: #fee2e2; color: #991b1b; }
.lx-badge-yellow  { background: #fef3c7; color: #92400e; }
.lx-badge-blue    { background: #eff6ff; color: #1e40af; }
.lx-badge-muted   { background: var(--parchment); color: #5c4c35; }

/* ─── Section kicker ──────────────────────────────────────────────────── */
.lx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.lx-kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
  display: block;
}

/* ─── Divider ─────────────────────────────────────────────────────────── */
.lx-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 24px 0;
}

/* ─── Table utility ───────────────────────────────────────────────────── */
.lx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.lx-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #7a6040;
  padding: 10px 14px;
  border-bottom: 1px solid var(--parchment);
  background: var(--ivory-2);
}
.lx-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--parchment);
  color: var(--ink);
  vertical-align: middle;
}
.lx-table tr:last-child td { border-bottom: none; }
.lx-table tr:hover td { background: rgba(158,122,30,0.03); }

/* ─── Scrollbar styling ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ivory-2); }
::-webkit-scrollbar-thumb {
  background: rgba(158,122,30,0.3);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(158,122,30,0.55); }