/* ================================================================
   ReSeat – shared.css
   Base variables and all shared components
   ================================================================ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --red:#E8000F; --red-dark:#B8000C; --red-light:rgba(232,0,15,.08);
  --white:#FFFFFF; --off-white:#FFF5F5;
  --ink:#0A0A0A; --muted:#555555;
  --border:rgba(232,0,15,.15); --border-g:#e8e8e8;
  --radius:6px; --shadow:0 2px 16px rgba(0,0,0,.08);
}
body{ font-family:'Inter',system-ui,sans-serif; background:var(--white); color:var(--ink); line-height:1.5; }
.page{ max-width:900px; margin:0 auto; padding:0 24px; }

/* ── NAV ─────────────────────────────────────────────────────── */
nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:2px solid var(--red); position:relative; }
.nav-logo{ display:flex; align-items:center; gap:10px; }
.logo-placeholder{ width:40px; height:40px; background:var(--red); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.nav-brand{ font-size:20px; font-weight:800; letter-spacing:-0.5px; color:var(--ink); }
.nav-brand em{ font-style:normal; color:var(--red); }
.nav-links{ display:flex; gap:24px; align-items:center; }
.nav-links a{ font-size:14px; color:#444; text-decoration:none; font-weight:600; white-space:nowrap; }
.nav-links a:hover{ color:var(--red); }
.nav-active{ color:var(--red)!important; }
.nav-cta{ background:var(--red)!important; color:var(--white)!important; padding:9px 20px; border-radius:var(--radius); font-size:13px; font-weight:700!important; }
.nav-profile-link{ display:flex; align-items:center; gap:7px; }
.rs-ham{ display:none; flex-direction:column; gap:5px; border:none; background:none; cursor:pointer; padding:4px; }
.rs-ham span{ display:block; width:22px; height:2px; background:var(--ink); transition:.2s; }
.rs-ham.ham-x span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.rs-ham.ham-x span:nth-child(2){ opacity:0; }
.rs-ham.ham-x span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── AVATAR ──────────────────────────────────────────────────── */
.rs-av{ border-radius:50%; background:var(--red); color:#fff; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── FOOTER ──────────────────────────────────────────────────── */
footer{ border-top:2px solid var(--red); padding:28px 0;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-logo{ display:flex; align-items:center; gap:8px; }
.footer-badge{ width:28px; height:28px; background:var(--red); border-radius:5px; display:flex; align-items:center; justify-content:center; }
.footer-name{ font-size:15px; font-weight:800; color:var(--ink); }
.footer-name em{ font-style:normal; color:var(--red); }
.footer-copy{ font-size:12px; color:#555; font-weight:500; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-primary{ background:var(--red); color:var(--white); padding:12px 24px; border-radius:var(--radius); font-size:15px; font-weight:700; text-decoration:none; border:none; cursor:pointer; display:inline-block; transition:background .15s; font-family:inherit; }
.btn-primary:hover{ background:var(--red-dark); }
.btn-secondary{ background:transparent; color:var(--ink); padding:11px 22px; border-radius:var(--radius); font-size:15px; font-weight:700; text-decoration:none; border:2px solid var(--ink); cursor:pointer; display:inline-block; transition:background .15s; font-family:inherit; }
.btn-secondary:hover{ background:var(--off-white); }
.btn-ghost{ background:transparent; color:var(--red); padding:8px 14px; border-radius:var(--radius); font-size:13px; font-weight:700; text-decoration:none; border:1.5px solid var(--red); cursor:pointer; display:inline-block; transition:all .15s; font-family:inherit; }
.btn-ghost:hover{ background:var(--red); color:#fff; }
.btn-danger{ background:transparent; color:#cc0000; padding:8px 14px; border-radius:var(--radius); font-size:13px; font-weight:700; border:1.5px solid #cc0000; cursor:pointer; display:inline-block; transition:all .15s; font-family:inherit; }
.btn-danger:hover{ background:#cc0000; color:#fff; }
.btn-sm{ padding:7px 14px!important; font-size:13px!important; }

/* ── FORMS ───────────────────────────────────────────────────── */
.form-group{ margin-bottom:20px; }
.form-label{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.form-input,.form-select,.form-textarea{
  width:100%; padding:11px 14px; border:1.5px solid var(--border-g); border-radius:var(--radius);
  font-size:14px; font-family:inherit; color:var(--ink); background:var(--white); outline:none;
  transition:border-color .15s; appearance:none;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{ border-color:var(--red); }
.form-input.err,.form-select.err,.form-textarea.err{ border-color:var(--red)!important; }
.form-error{ font-size:12px; color:var(--red); margin-top:5px; font-weight:600; display:none; }
.form-error.show{ display:block; }
.form-hint{ font-size:12px; color:var(--muted); margin-top:4px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-textarea{ resize:vertical; min-height:90px; }

/* ── CARDS ───────────────────────────────────────────────────── */
.card{ border:1.5px solid var(--border); border-radius:10px; padding:24px; background:var(--white); transition:box-shadow .15s; }
.card:hover{ box-shadow:var(--shadow); }

/* ── BADGES ──────────────────────────────────────────────────── */
.badge{ display:inline-flex; align-items:center; gap:3px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.badge-green{ background:#e6f9ef; color:#117a45; }
.badge-red{ background:var(--red-light); color:var(--red); }
.badge-grey{ background:#f0f0f0; color:#666; }
.badge-blue{ background:#e8f4fd; color:#1a6fa5; }
.badge-yellow{ background:#fff8e1; color:#b8860b; }
.badge-verified{ background:#e8f4fd; color:#1a6fa5; }
.badge-pro{ background:#fff4e0; color:#a3660a; }
.badge-featured{ background:#fdeee0; color:#c05a00; }

/* ── NAV UNREAD PILL ─────────────────────────────────────────── */
.nav-unread{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; background:var(--red); color:#fff; border-radius:20px; font-size:10px; font-weight:800; margin-left:4px; }

/* ── AD BANNER ───────────────────────────────────────────────── */
.rs-ad-banner{ display:flex; align-items:center; gap:16px; border:1.5px dashed var(--border); background:var(--off-white); border-radius:10px; padding:16px 20px; margin:24px 0; position:relative; }
.rs-ad-tag{ position:absolute; top:-9px; left:16px; background:#fff; border:1.5px solid var(--border); border-radius:20px; padding:1px 9px; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.rs-ad-emoji{ font-size:26px; flex-shrink:0; }
.rs-ad-copy{ flex:1; min-width:0; }
.rs-ad-headline{ font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.rs-ad-body{ font-size:12px; color:var(--muted); font-weight:500; margin-top:2px; line-height:1.4; }
@media(max-width:560px){ .rs-ad-banner{ flex-wrap:wrap; } }

/* ── PAYMENT MODAL ───────────────────────────────────────────── */
.rs-pay-modal{ max-width:420px; }

/* ── CHAT ────────────────────────────────────────────────────── */
.chat-layout{ display:grid; grid-template-columns:300px 1fr; gap:0; border:1.5px solid var(--border); border-radius:12px; overflow:hidden; height:min(640px,75vh); }
.chat-list{ border-right:1.5px solid var(--border); overflow-y:auto; background:var(--off-white); }
.chat-list-item{ display:flex; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border-g); cursor:pointer; text-decoration:none; color:inherit; align-items:flex-start; }
.chat-list-item:hover{ background:#fff; }
.chat-list-item.active{ background:#fff; border-left:3px solid var(--red); }
.chat-li-name{ font-size:13px; font-weight:800; color:var(--ink); }
.chat-li-event{ font-size:12px; color:var(--muted); font-weight:600; margin-top:1px; }
.chat-li-preview{ font-size:12px; color:var(--muted); font-weight:500; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-li-dot{ width:9px; height:9px; border-radius:50%; background:var(--red); flex-shrink:0; margin-top:4px; }
.chat-thread{ display:flex; flex-direction:column; height:100%; }
.chat-thread-header{ padding:14px 20px; border-bottom:1.5px solid var(--border); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chat-thread-title{ font-size:14px; font-weight:800; }
.chat-thread-sub{ font-size:12px; color:var(--muted); font-weight:600; }
.chat-messages{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px; }
.chat-bubble{ max-width:72%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.45; font-weight:500; }
.chat-bubble-them{ background:#f0f0f0; color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-bubble-me{ background:var(--red); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.chat-bubble-time{ font-size:10px; opacity:.65; margin-top:4px; display:block; }
.chat-bubble-file{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.15); border-radius:8px; padding:8px 10px; margin-top:6px; font-size:12px; }
.chat-bubble-them .chat-bubble-file{ background:rgba(0,0,0,.06); }
.chat-input-row{ display:flex; gap:10px; padding:14px 20px; border-top:1.5px solid var(--border); align-items:center; }
.chat-input-row input[type=text]{ flex:1; padding:11px 14px; border:1.5px solid var(--border-g); border-radius:20px; font-size:14px; font-family:inherit; outline:none; }
.chat-input-row input[type=text]:focus{ border-color:var(--red); }
.chat-send-btn{ background:var(--red); color:#fff; border:none; width:40px; height:40px; border-radius:50%; font-size:16px; cursor:pointer; flex-shrink:0; }
.chat-attach-btn{ background:none; border:1.5px solid var(--border-g); width:40px; height:40px; border-radius:50%; font-size:16px; cursor:pointer; flex-shrink:0; }
.chat-empty{ flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; color:var(--muted); font-size:14px; padding:40px; text-align:center; }
.chat-listing-card{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1.5px solid var(--border); background:var(--off-white); font-size:13px; }
.chat-listing-card strong{ font-size:14px; }
@media(max-width:640px){
  .chat-layout{ grid-template-columns:1fr; height:auto; }
  .chat-list{ max-height:220px; border-right:none; border-bottom:1.5px solid var(--border); }
  .chat-thread{ height:520px; }
}

/* ── SECTION LABEL ───────────────────────────────────────────── */
.section-label{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:10px; }

/* ── TABS ────────────────────────────────────────────────────── */
.tabs{ display:flex; border-bottom:2px solid var(--border); margin-bottom:28px; }
.tab-btn{ padding:12px 22px; font-size:14px; font-weight:700; border:none; background:none; cursor:pointer; color:var(--muted); position:relative; transition:color .15s; font-family:inherit; }
.tab-btn.active{ color:var(--red); }
.tab-btn.active::after{ content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; background:var(--red); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ── TABLE ───────────────────────────────────────────────────── */
.rs-table{ width:100%; border-collapse:collapse; }
.rs-table th{ text-align:left; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:10px 16px; border-bottom:1.5px solid var(--border-g); white-space:nowrap; }
.rs-table td{ padding:13px 16px; border-bottom:1px solid var(--border-g); font-size:14px; vertical-align:middle; }
.rs-table tr:last-child td{ border-bottom:none; }
.rs-table tbody tr:hover td{ background:var(--off-white); }
.rs-table-wrap{ border:1.5px solid var(--border); border-radius:10px; overflow:hidden; overflow-x:auto; }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state{ text-align:center; padding:64px 24px; }
.empty-icon{ font-size:48px; margin-bottom:16px; }
.empty-state h3{ font-size:20px; font-weight:800; margin-bottom:8px; }
.empty-state p{ font-size:14px; color:var(--muted); margin-bottom:24px; }

/* ── TOAST ───────────────────────────────────────────────────── */
.rs-toast{ position:fixed; bottom:24px; right:24px; z-index:9999; padding:14px 20px; border-radius:8px; font-size:14px; font-weight:600; box-shadow:0 4px 20px rgba(0,0,0,.15); transform:translateY(12px); opacity:0; transition:all .25s; max-width:320px; }
.rs-toast-in{ transform:translateY(0); opacity:1; }
.rs-toast-ok{ background:#0a0a0a; color:#fff; }
.rs-toast-err{ background:var(--red); color:#fff; }

/* ── MODAL ───────────────────────────────────────────────────── */
.rs-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:1000; padding:24px; }
.rs-overlay.hidden{ display:none; }
.rs-modal{ background:#fff; border-radius:14px; padding:44px 40px; max-width:460px; width:100%; text-align:center; }

/* ── PAGE HEADER ─────────────────────────────────────────────── */
.pg-header{ padding:44px 0 36px; border-bottom:1.5px solid var(--border); margin-bottom:40px; }
.pg-header h1{ font-size:clamp(28px,5vw,46px); font-weight:900; letter-spacing:-.03em; line-height:1.05; color:var(--ink); margin-top:8px; }
.pg-header p{ font-size:16px; color:var(--muted); margin-top:10px; font-weight:500; }

/* ── STAT CARDS ──────────────────────────────────────────────── */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:36px; }
.stat-card{ border:1.5px solid var(--border); border-radius:10px; padding:20px; }
.stat-num2{ font-size:32px; font-weight:900; letter-spacing:-.03em; color:var(--red); line-height:1; }
.stat-lbl{ font-size:12px; color:var(--muted); margin-top:4px; font-weight:600; }

/* ── SEARCH BOX ──────────────────────────────────────────────── */
.search-wrap{ position:relative; margin-bottom:20px; }
.search-wrap input{ width:100%; padding:13px 44px 13px 16px; border:1.5px solid var(--border-g); border-radius:var(--radius); font-size:15px; font-family:inherit; outline:none; transition:border-color .15s; }
.search-wrap input:focus{ border-color:var(--red); }
.search-icon{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:16px; pointer-events:none; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:640px){
  .nav-links{ display:none; flex-direction:column; position:absolute; top:68px; left:-24px; right:-24px; background:#fff; padding:20px 24px; border-bottom:2px solid var(--red); z-index:200; gap:16px; box-shadow:0 8px 24px rgba(0,0,0,.12); }
  .nav-links.nav-open{ display:flex; }
  .rs-ham{ display:flex; }
  .form-row{ grid-template-columns:1fr; }
  .stat-row{ grid-template-columns:1fr 1fr; }
  .rs-modal{ padding:32px 24px; }
}
@media(max-width:400px){
  .stat-row{ grid-template-columns:1fr; }
}