/* ============================================================
   X-SHOOTER MEMBERS — shared stylesheet for /members/*
   Matches the index.php wild-west theme.
   ============================================================ */

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

:root{
  --font-display:'Anton','Arial Narrow',sans-serif;
  --font-body:'Roboto Slab', serif;

  /* Identical to index.php */
  --sand:#f3e0b6;
  --parchment:#e7cd97;
  --tan:#cfa07a;
  --saddle:#a36f3f;
  --leather:#8a5d35;
  --wood:#6b4a2c;
  --wood-deep:#523823;
  --gold:#f0a52e;
  --gold-soft:#ffd98d;
  --red:#c0432e;
  --cream:#fff3d6;
  --ink:#3a2410;
  --safe:#46b34a;
  --safe-deep:#2f7d33;
  --shadow:0 16px 36px rgba(40,24,10,.4);
  --radius:16px;
}

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  color:var(--cream);
  background:linear-gradient(#7a5331,#523823 60%, #4a3320);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.6;
  display:flex;
  flex-direction:column;
}

a{ color:var(--gold-soft); text-decoration:none; }
a:hover{ color:var(--gold); text-decoration:underline; }
img{ max-width:100%; display:block; }

/* ── HEADER (woodgrain bar) ── */
.site-header{
  background:
    linear-gradient(90deg, rgba(74,49,28,.96), rgba(110,72,40,.96)),
    repeating-linear-gradient(90deg,#5a3d24 0 22px,#6b4a2c 22px 44px);
  border-bottom:3px solid var(--wood-deep);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.site-header__inner{
  max-width:1100px;
  margin:0 auto;
  padding:0.7em 1em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
}
.site-header__logo{
  display:flex; align-items:center;
  text-decoration:none;
}
.site-header__logo:hover{ text-decoration:none; }
.site-header__logo img{
  height:54px; width:auto;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));
  transition:transform .2s;
}
.site-header__logo:hover img{ transform:rotate(-2deg) scale(1.03); }

.site-header__nav{
  display:flex; gap:0.3em; align-items:center;
  flex-wrap:wrap;
}
.nav-link{
  color:var(--cream);
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size:0.95em;
  padding:0.5em 0.9em;
  border-radius:8px;
  text-decoration:none;
  transition:background .15s, color .15s;
}
.nav-link:hover{
  background:rgba(255,243,214,.12);
  color:var(--gold-soft);
  text-decoration:none;
}

/* ── MAIN ── */
.site-main{
  flex:1;
  max-width:720px;
  width:100%;
  margin:0 auto;
  padding:2em 1em 3em;
}

/* ── TITLES ── */
.page-title{
  font-family:var(--font-display);
  font-size:clamp(1.9em, 6vw, 2.8em);
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--cream);
  text-shadow:
    0 3px 0 var(--wood-deep),
    0 5px 0 rgba(0,0,0,.3),
    0 8px 14px rgba(0,0,0,.45);
  margin-bottom:0.3em;
  text-align:center;
  line-height:1.05;
}
.page-subtitle{
  text-align:center;
  color:var(--gold-soft);
  margin-bottom:1.8em;
  font-size:1.05em;
}

/* ── CARD ── */
.card{
  background:
    linear-gradient(180deg, rgba(80,52,28,.95), rgba(60,38,20,.95)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 6px, rgba(0,0,0,.04) 6px 12px);
  border:3px solid var(--leather);
  border-radius:var(--radius);
  padding:1.8em;
  box-shadow:var(--shadow), inset 0 1px rgba(255,243,214,.1);
}
.card + .card{ margin-top:1.2em; }

/* ── FORMS ── */
.form-group{ margin-bottom:1.2em; }
.form-label{
  display:block;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--gold-soft);
  font-size:0.95em;
  margin-bottom:0.4em;
}
.form-label small{
  font-family:var(--font-body);
  text-transform:none;
  letter-spacing:0;
  font-weight:normal;
  opacity:0.7;
  font-size:0.85em;
}
.form-input{
  width:100%;
  padding:0.85em 0.9em;
  font-family:var(--font-body);
  font-size:1.05em;
  color:var(--ink);
  background:var(--cream);
  border:2px solid var(--leather);
  border-radius:8px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.form-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(240,165,46,.25);
}
.form-hint{
  font-size:0.85em;
  color:var(--parchment);
  margin-top:0.3em;
  opacity:0.85;
}

/* ── BUTTONS (matches index.php exactly) ── */
.btn{
  display:inline-block;
  border:3px solid #8a4a26;
  background:linear-gradient(#ef6440,#b8331f);
  color:#fff;
  padding:14px 26px;
  border-radius:10px;
  font-weight:800;
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:1px;
  text-decoration:none;
  cursor:crosshair;
  box-shadow:inset 0 2px rgba(255,255,255,.3), 0 6px 0 #6e2a17, 0 10px 18px rgba(0,0,0,.35);
  transition:transform .12s, filter .12s, box-shadow .12s;
  font-size:1em;
}
.btn:hover{ filter:brightness(1.08); text-decoration:none; color:#fff; }
.btn:active{ transform:translateY(5px); box-shadow:inset 0 2px rgba(255,255,255,.25),0 1px 0 #6e2a17,0 4px 8px rgba(0,0,0,.35); }
.btn--block{ width:100%; }
.btn--big{ padding:18px 36px; font-size:1.1em; }
.btn--safe{
  background:linear-gradient(#62d166,#2f7d33);
  border-color:#256b22;
  box-shadow:inset 0 2px rgba(255,255,255,.3), 0 6px 0 #1d5a1c, 0 10px 18px rgba(0,0,0,.35);
}
.btn--safe:active{ box-shadow:inset 0 2px rgba(255,255,255,.25),0 1px 0 #1d5a1c,0 4px 8px rgba(0,0,0,.35); }

/* ── ALERTS ── */
.alert{
  padding:0.9em 1.1em;
  border-radius:10px;
  margin-bottom:1.2em;
  border:2px solid;
  font-size:0.97em;
}
.alert--error{
  background:rgba(192,67,46,.18);
  border-color:var(--red);
  color:#ffe1da;
}
.alert--error ul{ list-style:none; padding:0; margin:0; }
.alert--error li{ padding:0.15em 0; }
.alert--error li::before{ content:"⚠ "; color:var(--red); font-weight:bold; }
.alert--success{
  background:rgba(70,179,74,.18);
  border-color:var(--safe);
  color:#dff4e1;
}
.alert--info{
  background:rgba(240,165,46,.15);
  border-color:var(--gold);
  color:var(--gold-soft);
}

/* ── STATUS BADGES ── */
.status{
  display:inline-block;
  padding:0.3em 0.85em;
  border-radius:999px;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-size:0.85em;
  font-weight:bold;
  border:2px solid;
}
.status--pending{ background:var(--gold); color:var(--ink); border-color:#b87a1f; }
.status--active{ background:var(--safe); color:#fff; border-color:var(--safe-deep); }
.status--cancelled{ background:#9a4a4a; color:#ffd6cd; border-color:#6a2828; }
.status--banned{ background:#3a1010; color:#ff8a76; border-color:var(--red); }

/* ── INFO ROWS ── */
.info-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:0.65em 0;
  border-bottom:1px dashed rgba(255,243,214,.15);
  gap:1em;
  flex-wrap:wrap;
}
.info-row:first-child{ padding-top:0; }
.info-row:last-child{ border-bottom:0; padding-bottom:0; }
.info-row__label{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--gold-soft);
  font-size:0.9em;
}
.info-row__value{ font-weight:600; text-align:right; word-break:break-word; }

/* ── CTA BANNER (account page) ── */
.cta{
  text-align:center;
  padding:1.5em 1em;
}
.cta__headline{
  font-family:var(--font-display);
  font-size:1.5em;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:0.4em;
  text-shadow:0 2px 0 var(--wood-deep);
}
.cta__sub{
  color:var(--parchment);
  margin-bottom:1.2em;
}

/* ── SUBSCRIBE PLANS ── */
.plans{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.4em;
  margin-top:1.4em;
}
.plan{
  border:3px solid var(--leather);
  border-radius:var(--radius);
  padding:1.6em 1.4em;
  background:
    linear-gradient(180deg, rgba(80,52,28,.95), rgba(60,38,20,.95)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 6px, rgba(0,0,0,.04) 6px 12px);
  display:flex; flex-direction:column;
  position:relative;
  box-shadow:var(--shadow);
}
.plan--featured{
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(240,165,46,.35), var(--shadow);
  margin-top:0.5em;
}
.plan--featured::before{
  content:"★ BEST DEAL ★";
  position:absolute;
  top:-14px; left:50%;
  transform:translateX(-50%);
  background:linear-gradient(var(--gold), #b87a1f);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:0.8em;
  padding:5px 14px;
  border-radius:6px;
  letter-spacing:0.1em;
  border:2px solid #6a4516;
  box-shadow:0 3px 6px rgba(0,0,0,.4);
  white-space:nowrap;
}
.plan__name{
  font-family:var(--font-display);
  font-size:1.6em;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--cream);
  margin-bottom:0.15em;
}
.plan__price{
  font-family:var(--font-display);
  font-size:2.8em;
  color:var(--gold);
  line-height:1;
  margin:0.35em 0 0.1em;
  text-shadow:0 3px 0 var(--wood-deep);
}
.plan__price small{
  font-size:0.36em;
  font-weight:400;
  color:var(--parchment);
  font-family:var(--font-body);
  text-transform:none;
  letter-spacing:0;
}
.plan__savings{
  color:#9ee5a2;
  font-weight:bold;
  font-size:0.95em;
  margin-bottom:0.6em;
}
.plan__desc{
  color:var(--parchment);
  font-size:0.95em;
  margin-bottom:1em;
}
.plan__paypal{
  margin-top:auto;
  padding-top:0.8em;
}

/* ── FOOTER ── */
.site-footer{
  background:rgba(0,0,0,.32);
  border-top:2px solid var(--wood-deep);
  text-align:center;
  padding:1.4em 1em;
  color:var(--parchment);
  font-size:0.9em;
}
.site-footer a{ color:var(--gold-soft); }

/* ── UTILITIES ── */
.text-center{ text-align:center; }
.mt-1{ margin-top:0.8em; }
.mt-2{ margin-top:1.5em; }
.mb-1{ margin-bottom:0.8em; }
.mb-2{ margin-bottom:1.5em; }
.muted{ opacity:0.85; }
.small{ font-size:0.9em; }

/* ── RESPONSIVE ── */
@media (max-width: 560px){
  .site-header__inner{ padding:0.55em 0.75em; }
  .site-header__logo img{ height:44px; }
  .nav-link{ padding:0.4em 0.7em; font-size:0.85em; letter-spacing:0.04em; }
  .site-main{ padding:1.4em 0.8em 2em; }
  .card{ padding:1.3em; }
  .plan{ padding:1.4em 1.2em; }
  .info-row__value{ text-align:left; }
}