/* ============================================================================
   STYLIQUE SHARED THEME
   Copied 1:1 from the main site's :root palette + base rules so every new
   page (memberships, member card, admin) matches the existing look exactly.
   ============================================================================ */
:root{
  --ink:#17301f;
  --deep:#173620;
  --deep-2:#0f2416;
  --gold:#b8935a;
  --gold-light:#d9b98a;
  --cream:#faf5ea;
  --cream-2:#f2ead9;
  --white:#ffffff;
  --line:#e4d7bd;
  --muted:#6b6156;
  --maroon:#7a2b2b;
  --radius:14px;

  /* Tier accents used only on the new membership pages */
  --silver:#9aa5ab;
  --silver-light:#e7ebed;
  --gold-tier:#c79a3e;
  --diamond:#3c8ea3;
  --diamond-light:#cdeef5;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:400;
  line-height:1.5;
}
h1,h2,h3,.brand-word{
  font-family:'Cormorant Garamond', serif;
  font-weight:700;
  color:var(--deep);
  letter-spacing:0.02em;
}
a{color:inherit;}
img{max-width:100%;display:block;}

/* ---------- Shared nav (matches index.html) ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--deep);
  border-bottom:2px solid var(--gold);
}
.nav-wrap{
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{display:flex; align-items:center; gap:12px; color:var(--cream);}
.logo-mark{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--gold);
  font-size:12px; letter-spacing:0.03em; text-align:center;
  flex-shrink:0;
}
.logo-text{font-family:'Cormorant Garamond', serif; line-height:1.05;}
.logo-text .top{font-size:20px; font-weight:700; color:var(--gold); letter-spacing:0.06em;}
.logo-text .sub{font-size:10px; color:var(--cream); letter-spacing:0.25em; text-transform:uppercase;}
nav.links{display:flex; gap:26px; font-size:14px;}
nav.links a{
  color:var(--cream); text-decoration:none; opacity:0.85; letter-spacing:0.02em;
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:opacity .2s, border-color .2s;
}
nav.links a:hover, nav.links a.active{opacity:1; border-color:var(--gold);}
.book-btn{
  background:var(--gold); color:var(--deep-2)!important; font-weight:600;
  padding:9px 18px; border-radius:100px; font-size:13.5px; text-decoration:none;
  border:none; white-space:nowrap; cursor:pointer;
}
@media (max-width:880px){ nav.links{display:none;} }

/* ---------- Page header banner (used on memberships/admin pages) ---------- */
.page-hero{
  background:radial-gradient(ellipse at top right, #1e4429 0%, var(--deep) 55%, var(--deep-2) 100%);
  color:var(--cream); text-align:center; padding:56px 24px 46px;
}
.page-hero .eyebrow{font-size:12.5px; letter-spacing:0.35em; text-transform:uppercase; color:var(--gold-light); margin-bottom:14px;}
.page-hero h1{font-size:clamp(30px,5vw,46px); margin:0 0 8px; color:var(--cream);}
.page-hero p{font-size:15px; color:var(--gold-light); margin:0; font-weight:300;}

section{max-width:1180px; margin:0 auto; padding:60px 24px;}

footer{
  background:var(--deep-2); color:var(--cream); text-align:center; padding:40px 24px 28px;
  border-top:3px solid var(--gold);
}
footer h2{color:var(--gold); font-size:24px; margin:0 0 6px;}
footer .fine{font-size:12px; color:#a9a297; margin-top:16px;}
footer a{color:var(--gold-light); text-decoration:none;}

.float-cta{
  position:fixed; bottom:18px; right:18px; z-index:60;
  background:#25D366; color:#fff; width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:24px;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

/* ============================================================================
   MEMBERSHIP PLAN CARDS (memberships.html)
   ============================================================================ */
.plan-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
}
@media (max-width:920px){ .plan-grid{grid-template-columns:1fr;} }

.plan-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.plan-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(23,54,32,0.12);}
.plan-card.featured{border-color:var(--gold); box-shadow:0 16px 34px rgba(184,147,90,0.18);}

.plan-head{
  padding:26px 24px 20px; text-align:center; color:var(--cream); position:relative;
}
.plan-head .tier-icon{font-size:30px; margin-bottom:8px; display:block;}
.plan-head .tier-name{font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:700; letter-spacing:0.02em;}
.plan-head .tier-price{font-family:'Cormorant Garamond',serif; font-size:38px; font-weight:700; margin-top:6px;}
.plan-head .tier-price small{font-size:14px; font-weight:400; opacity:0.8;}
.plan-head .tier-validity{font-size:12.5px; letter-spacing:0.05em; opacity:0.85; margin-top:4px; text-transform:uppercase;}

.plan-card.silver .plan-head{background:linear-gradient(160deg,#7d8a90,#5c666b);}
.plan-card.gold .plan-head{background:linear-gradient(160deg,var(--gold),#8f6a34);}
.plan-card.diamond .plan-head{background:linear-gradient(160deg,var(--diamond),#215a68);}

.plan-body{padding:22px 24px 8px; flex:1;}
.plan-body ul{list-style:none; margin:0; padding:0;}
.plan-body li{
  display:flex; align-items:flex-start; gap:10px; padding:9px 0;
  border-bottom:1px dashed var(--line); font-size:14.5px;
}
.plan-body li:last-child{border-bottom:none;}
.plan-body li .tick{color:var(--deep); font-weight:700; flex-shrink:0;}
.plan-card.gold .plan-body li .tick{color:var(--gold);}
.plan-card.diamond .plan-body li .tick{color:var(--diamond);}

.plan-foot{padding:20px 24px 26px;}
.buy-btn{
  display:block; width:100%; text-align:center; padding:13px 18px; border-radius:100px;
  border:none; cursor:pointer; font-family:'Jost',sans-serif; font-weight:600; font-size:14.5px;
  letter-spacing:0.02em; background:var(--deep); color:var(--cream); transition:opacity .2s;
}
.buy-btn:hover{opacity:0.9;}
.plan-card.gold .buy-btn{background:var(--gold); color:var(--deep-2);}
.plan-card.diamond .buy-btn{background:var(--diamond); color:var(--white);}

/* ============================================================================
   MODAL (purchase form)
   ============================================================================ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,36,22,0.55); z-index:200;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:var(--white); border-radius:var(--radius); max-width:460px; width:100%;
  max-height:90vh; overflow-y:auto; padding:28px 26px; position:relative;
  border-top:4px solid var(--gold);
}
.modal-box h3{margin:0 0 4px; font-size:22px;}
.modal-box .modal-sub{font-size:13px; color:var(--muted); margin-bottom:20px;}
.modal-close{
  position:absolute; top:14px; right:16px; background:none; border:none; font-size:20px;
  cursor:pointer; color:var(--muted); line-height:1;
}
.form-row{margin-bottom:14px;}
.form-row label{display:block; font-size:13px; font-weight:500; color:var(--deep); margin-bottom:6px;}
.form-row input, .form-row select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  font-family:'Jost',sans-serif; font-size:14px; background:var(--cream-2); color:var(--ink);
}
.form-row input:focus, .form-row select:focus{outline:2px solid var(--gold); outline-offset:1px;}
.form-hint{font-size:11.5px; color:var(--muted); margin-top:4px;}
.form-submit{
  width:100%; padding:13px; border:none; border-radius:100px; background:var(--gold);
  color:var(--deep-2); font-weight:600; font-size:14.5px; cursor:pointer; margin-top:6px;
}
.form-submit:disabled{opacity:0.6; cursor:wait;}
.form-error{color:#a33; font-size:13px; margin-top:10px; display:none;}
.form-error.show{display:block;}

/* ============================================================================
   DIGITAL MEMBERSHIP CARD (member.html)
   Same visual language across all tiers; accent color changes by plan.
   ============================================================================ */
.card-wrap{display:flex; justify-content:center; padding:40px 20px;}
.member-card{
  width:100%; max-width:420px; border-radius:20px; overflow:hidden;
  color:var(--cream); position:relative;
  box-shadow:0 24px 50px rgba(15,36,22,0.28);
  font-family:'Jost',sans-serif;
}
.member-card.silver{background:linear-gradient(135deg,#5c666b 0%, #3a4247 100%);}
.member-card.gold{background:linear-gradient(135deg,#8f6a34 0%, #4d3714 100%);}
.member-card.diamond{background:linear-gradient(135deg,#215a68 0%, #0f2b32 100%);}

.member-card:before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 90% -10%, rgba(255,255,255,0.18), transparent 55%);
  pointer-events:none;
}
.card-top{
  display:flex; justify-content:space-between; align-items:flex-start; padding:22px 24px 0;
  position:relative; z-index:1;
}
.card-brand .top{font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:700; color:var(--gold-light); letter-spacing:0.04em;}
.card-brand .sub{font-size:9.5px; letter-spacing:0.28em; text-transform:uppercase; opacity:0.85;}
.card-tier-badge{
  font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;
  border:1px solid rgba(255,255,255,0.5); border-radius:100px; padding:5px 12px;
}
.card-mid{padding:26px 24px 10px; position:relative; z-index:1;}
.card-name{font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:700; margin-bottom:2px;}
.card-id{font-size:12.5px; letter-spacing:0.1em; opacity:0.85;}
.card-details{
  display:flex; justify-content:space-between; align-items:flex-end; padding:18px 24px 24px;
  position:relative; z-index:1; gap:14px;
}
.card-meta .label{font-size:9.5px; text-transform:uppercase; letter-spacing:0.14em; opacity:0.7; margin-bottom:2px;}
.card-meta .value{font-size:14px; font-weight:600; margin-bottom:10px;}
.card-status{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:4px 10px; border-radius:100px; letter-spacing:0.04em;
}
.card-status.active{background:rgba(140,220,150,0.22); color:#bdf5c4;}
.card-status.expired{background:rgba(220,120,120,0.22); color:#f5c2c2;}
.card-status.deactivated{background:rgba(200,200,200,0.22); color:#e3e3e3;}
.card-qr{
  background:var(--white); border-radius:10px; padding:6px; width:84px; height:84px;
  flex-shrink:0;
}
.card-qr img, .card-qr canvas{width:100%; height:100%; display:block;}

.card-page-wrap{max-width:520px; margin:0 auto; padding:20px;}
.card-note{text-align:center; font-size:13px; color:var(--muted); margin-top:18px;}
.card-actions{display:flex; gap:12px; justify-content:center; margin-top:24px; flex-wrap:wrap;}
.card-actions button, .card-actions a{
  padding:10px 20px; border-radius:100px; border:1px solid var(--line); background:var(--white);
  font-size:13.5px; cursor:pointer; text-decoration:none; color:var(--ink);
}
.state-box{text-align:center; padding:80px 24px; color:var(--muted);}

/* ============================================================================
   ADMIN PANEL (admin.html)
   ============================================================================ */
.admin-shell{max-width:1100px; margin:0 auto; padding:40px 24px 80px;}
.admin-login{max-width:380px; margin:60px auto; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px;}
.admin-login h2{margin-top:0; font-size:22px;}
.search-bar{display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap;}
.search-bar input{
  flex:1; min-width:220px; padding:11px 14px; border:1px solid var(--line); border-radius:8px;
  font-family:'Jost',sans-serif; font-size:14px; background:var(--white);
}
.search-bar button{
  padding:11px 22px; border:none; border-radius:8px; background:var(--deep); color:var(--cream);
  font-weight:600; cursor:pointer;
}
.results-table{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.results-table th{background:var(--deep); color:var(--cream); text-align:left; padding:12px 14px; font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em;}
.results-table td{padding:12px 14px; border-bottom:1px solid var(--line); font-size:14px;}
.results-table tr:last-child td{border-bottom:none;}
.results-table tr:hover{background:var(--cream-2); cursor:pointer;}
.status-pill{font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:100px;}
.status-pill.Active{background:#dff5e1; color:#1f7a34;}
.status-pill.Expired{background:#fbe4e4; color:#a33;}
.status-pill.Deactivated{background:#eee; color:#777;}

.detail-panel{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; margin-top:24px;
}
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px;}
@media (max-width:600px){ .detail-grid{grid-template-columns:1fr;} }
.detail-grid .form-row{margin-bottom:0;}
.detail-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.detail-actions button{
  padding:10px 18px; border-radius:100px; border:none; cursor:pointer; font-weight:600; font-size:13.5px;
}
.btn-save{background:var(--gold); color:var(--deep-2);}
.btn-renew{background:var(--deep); color:var(--cream);}
.btn-deactivate{background:#a33; color:#fff;}
.btn-reactivate{background:#1f7a34; color:#fff;}
.admin-msg{margin-top:12px; font-size:13.5px;}
.admin-msg.ok{color:#1f7a34;}
.admin-msg.err{color:#a33;}