/* ===== Kumquats Villa — shared design system ===== */
:root {
  /* Kumquats Villa brand palette */
  --sand: #EFEAE1;
  --ink: #2B2B2B;
  --olive: #3D6135;
  --olive-dark: #2E4A28;
  --walnut: #6B4423;
  --gold: #C99A54;
  --bg: #EFEAE1;
  /* semantic aliases (kept so existing rules keep working) */
  --green: #3D6135;
  --green-dark: #2E4A28;
  --green-soft: #E7EBE0;
  --line: #E2DBCD;
  --muted: #8A8578;
  --muted-2: #5C5849;
  --white: #fff;
  --radius: 18px;
  --shadow: 0 12px 30px rgba(43, 43, 43, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
body {
  font-family: 'Tajawal', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--olive); color: #fff; }
img { max-width: 100%; display: block; }

/* Latin wordmark — Playfair Display serif per brand identity */
.brand-en { font-family: 'Playfair Display', Georgia, serif; }
.eyebrow-en { font-family: 'Playfair Display', Georgia, serif; letter-spacing: 3px; text-transform: uppercase; }

@keyframes vFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: none; font-family: inherit; font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: 12px; transition: background .18s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); }
.btn-gold { background: var(--gold); color: #2B2410; }
.btn-gold:hover { filter: brightness(1.05); }
.btn-ghost { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { background: #faf8f3; }
.btn-wa { background: #25D366; color: #05320F; }
.btn-wa:hover { background: #1FBF5B; }
.btn-pill { border-radius: 999px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.eyebrow { font-size: 13px; font-weight: 600; color: var(--green); letter-spacing: 1px; margin-bottom: 6px; }
.h2 { font-size: 32px; font-weight: 700; margin: 0 0 28px; letter-spacing: -0.5px; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.badge-green { background: var(--green-soft); color: var(--green); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted-2); }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 15px; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; color: var(--ink); width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,90,76,.12);
}
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }

.pill-status { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.st-confirmed { background: #E1F0E7; color: #1c6b47; }
.st-pending   { background: #FBF0D9; color: #96701e; }
.st-blocked   { background: #EDE7E7; color: #7a5757; }
.st-invited   { background: #E8EEF5; color: #35618e; }
.st-submitted { background: #FBF0D9; color: #96701e; }
.st-published { background: #E1F0E7; color: #1c6b47; }
.st-hidden    { background: #EDEAEA; color: #6a6a6a; }

.toast {
  position: fixed; inset-inline: 0; bottom: 26px; margin: 0 auto; width: max-content; max-width: 90vw;
  background: var(--green-dark); color: #fff; padding: 13px 22px; border-radius: 12px;
  font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.2);
  opacity: 0; transform: translateY(12px); transition: .25s; pointer-events: none; z-index: 200;
}
.toast.show { opacity: 1; transform: none; }
.toast.err { background: #8c3a3a; }

@media (max-width: 780px) {
  .wrap { padding-inline: 18px; }
  .h2 { font-size: 26px; }
}