/* ============================================================
   MEMBER BOOKING
   Layered on top of book.css, same shell, same fields, same
   confirmation sequence. Only what is specific to the members'
   flow lives here.
   ============================================================ */

.mem-badge{
  background:var(--amber-deep);color:#fff;border-radius:100px;
  padding:4px 12px;font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}

.mem-main{max-width:920px;}
.mem-intro{margin:0 0 34px;}
.mem-intro h1{font-size:clamp(28px,4.6vw,44px);font-weight:800;line-height:1.06;margin:10px 0 12px;}

.mem-sec{
  margin:0 0 30px;padding:26px 24px;
  background:var(--white);border:1px solid var(--line);border-radius:8px;
}
.mem-sec[hidden]{display:none;}
.mem-sec-hd{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px;}
.mem-n{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--green-ink);color:#F6EFE2;
  font-family:'JetBrains Mono',monospace;font-size:12px;
}
.mem-sec-hd h2{font-family:'Montserrat',sans-serif;font-weight:800;font-size:20px;color:var(--green-ink);margin:0 0 4px;}
.mem-sec-hd p{margin:0;font-size:13.5px;line-height:1.55;color:var(--mute);}

/* ---- plan picker ---- */
.mem-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:760px){.mem-plans{grid-template-columns:1fr;}}
.mem-plan{
  display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;
  padding:18px 16px;border:2px solid var(--line);border-radius:8px;background:var(--white);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mem-plan:hover{border-color:var(--green);transform:translateY(-3px);}
.mem-plan.on{border-color:var(--green);box-shadow:0 0 0 2px var(--green);}
.mem-plan-name{font-family:'Montserrat',sans-serif;font-weight:800;font-size:17px;color:var(--green-ink);}
.mem-plan-price{font-family:'Montserrat',sans-serif;font-weight:800;font-size:24px;color:var(--green-ink);letter-spacing:-.02em;}
.mem-plan-price small{font-size:12px;font-weight:600;color:var(--mute);}
.mem-plan-inc{font-size:12.5px;line-height:1.5;color:var(--mute);}
.mem-plan-pick{
  margin-top:8px;padding:8px 12px;border-radius:var(--radius);text-align:center;
  border:1px solid var(--green);color:var(--green-deep);
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;
}
.mem-plan.on .mem-plan-pick{background:var(--green);color:#fff;}

/* ---- the allowance bank ---- */
.mem-bank{
  margin-bottom:22px;padding:18px 18px 14px;
  background:var(--sage);border-radius:8px;
}
.mem-bank-k{
  display:block;margin-bottom:12px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-deep);
}
.mem-bank-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;}
.mem-bank-cell b{
  display:block;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:26px;line-height:1;color:var(--green-ink);
}
.mem-bank-cell span{display:block;margin:3px 0 7px;font-size:11.5px;line-height:1.35;color:var(--mute);}
.mem-bar{display:block;height:4px;border-radius:100px;background:rgba(38,48,31,.13);overflow:hidden;}
.mem-bar u{display:block;height:100%;background:var(--green);transition:width .35s ease;}
.mem-bank-cell.over b{color:var(--clay);}
.mem-bank-cell.over .mem-bar u{background:var(--clay);width:100%!important;}
.mem-bank-cell em{display:block;margin-top:5px;font-size:11px;font-style:normal;color:var(--clay);font-weight:700;}
.mem-over-note{
  margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(38,48,31,.14);
  font-size:12.5px;line-height:1.55;color:var(--text);
}

/* ---- pickable items ---- */
.mem-items{display:grid;gap:10px;}
.mem-item{
  display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--radius);
  transition:border-color .2s ease, background .2s ease;
}
.mem-item.on{border-color:var(--green);background:rgba(233,237,228,.45);}
.mem-item-tx b{display:block;font-family:'Montserrat',sans-serif;font-size:14.5px;color:var(--green-ink);}
.mem-item-tx b small{font-weight:400;color:var(--mute);font-size:12px;}
.mem-item-tx span{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--mute);}
.mem-qty{display:flex;align-items:center;gap:4px;flex:none;}
.mem-q{
  width:34px;height:34px;border-radius:var(--radius);cursor:pointer;
  border:1px solid var(--green);background:var(--white);color:var(--green-deep);
  font-size:17px;line-height:1;
}
.mem-q:hover{background:var(--sage);}
.mem-qty output{
  min-width:34px;text-align:center;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;color:var(--green-ink);
}

/* ---- trades ---- */
.mem-trades{margin-top:20px;border-top:1px solid var(--line);padding-top:16px;}
.mem-trades summary{cursor:pointer;font-size:14px;color:var(--green-deep);}
.mem-trades summary b{color:var(--green-ink);}
.mem-trade-list{display:grid;gap:8px;margin-top:14px;}
.mem-trade{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--radius);
  font-size:13.5px;color:var(--text);
}
.mem-trade.on,.mem-trade:has(input:checked){border-color:var(--amber);background:var(--amber-wash);}

/* ---- shoots ---- */
.mem-shoots{display:grid;gap:18px;}
.mem-shoot{padding:16px;border:1.5px solid var(--line);border-radius:var(--radius);}
.mem-shoot-k{
  display:block;margin-bottom:10px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-deep);
}
.mem-when{margin-top:14px;}
.mem-cal{margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:var(--radius);}
.mem-cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.mem-cal-m{font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;color:var(--green-ink);}
.mem-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.mem-slotline{margin:8px 0 0;font-size:13px;color:var(--green-ink);}
.mem-slotline em{color:var(--mute);font-style:normal;}
.mem-cal-down{margin:0;font-size:13px;line-height:1.55;color:var(--clay);}
.mem-empty{margin:0;font-size:13.5px;color:var(--mute);}
.mem-notes{margin-top:18px;}

/* ---- review ---- */
.mem-review{display:grid;gap:14px;}
.mem-over-card{border-color:var(--clay)!important;}
.mem-over-card h3{color:var(--clay);}
.mem-over-card p{margin:10px 0 0;font-size:12.5px;color:var(--mute);}
.mem-submit{width:100%;margin-top:18px;}

/* ---- done ---- */
.mem-done{text-align:center;padding:20px 0 60px;}
.mem-done[hidden]{display:none;}

@media (max-width:600px){
  .mem-sec{padding:20px 16px;}
  .mem-sec-hd{gap:12px;}
  .mem-item{flex-direction:column;align-items:flex-start;gap:12px;}
  .mem-qty{align-self:flex-end;}
  .mem-q{min-width:44px;min-height:44px;}
}

/* scheduling fallback, shown only when the live calendar is unreachable */
.mem-fallback{
  padding:14px;border-radius:var(--radius);
  border:1.5px solid var(--amber);background:var(--amber-wash);
}
.mem-fallback > p{margin:0 0 12px;font-size:13px;line-height:1.55;}
.mem-fallback b{display:block;color:var(--amber-ink);}

/* shown only when the booking did not reach the scheduling system */
.mem-sync-warn{
  margin:0 0 16px;padding:13px 15px;border-radius:var(--radius);
  border:1.5px solid var(--amber);background:var(--amber-wash);
  font-size:13.5px;line-height:1.6;text-align:left;
}
.mem-sync-warn b{color:var(--amber-ink);}

/* beyond-plan extras, priced, not blocked */
.mem-over-note{
  margin:0 0 12px;font-size:12.5px;line-height:1.55;color:var(--mute);
}
.mem-over-total{
  margin-top:8px;padding-top:10px;border-top:1px solid var(--line);
  font-weight:700;
}
.mem-over-total b{font-size:17px;color:var(--amber-ink);}
.mem-over-foot{
  margin:10px 0 0;font-size:11.5px;opacity:.65;
}

/* ============================================================
   MONTH METER
   One bar for the whole month, not four. A plan is a budget, 
   "1 full listing shoot OR 2 mini shoots" cannot be shown as two
   independent counters without one of them reading as negative.
   ============================================================ */
.mem-bank-headline{
  margin:6px 0 14px;font-size:14px;line-height:1.5;color:var(--green-ink);font-weight:600;
}
.mem-meter{margin:0 0 12px;}
.mem-meter i{
  display:block;height:10px;border-radius:100px;overflow:hidden;
  background:rgba(38,48,31,.12);
}
.mem-meter u{
  display:block;height:100%;border-radius:100px;text-decoration:none;
  background:linear-gradient(90deg,var(--green) 0%, var(--green-deep) 100%);
  transition:width .35s cubic-bezier(.22,1,.36,1);
}
.mem-meter.over u{background:linear-gradient(90deg,var(--amber) 0%, var(--amber-deep) 100%);}
.mem-meter-lab{display:block;margin-top:7px;font-size:12.5px;color:var(--mute);}
.mem-meter-lab b{color:var(--green-ink);}
.mem-meter.over .mem-meter-lab b{color:var(--amber-ink);}

.mem-bank-picked{
  margin:0 0 8px;font-size:12.5px;color:var(--mute);
}
.mem-bank-left{
  margin:0;font-size:13px;line-height:1.6;color:var(--mute);
}
.mem-bank-left b{color:var(--green-ink);white-space:nowrap;}

/* beyond-plan: size picker and explicit consent */
.mem-need{font-style:normal;font-size:12px;color:var(--clay);font-weight:600;}
.mem-band{
  display:block;margin:8px 0 12px;padding:10px 12px;
  border-radius:var(--radius);background:rgba(255,255,255,.55);
  border:1px solid var(--line);
}
.mem-band > span{
  display:block;margin-bottom:6px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);
}
.mem-band select{
  width:100%;padding:9px 11px;border-radius:var(--radius);
  border:1.5px solid var(--line);background:#fff;font-size:14px;
}
.mem-band select:focus{outline:none;border-color:var(--green);}

.mem-extras-ok{
  display:flex;gap:10px;align-items:flex-start;
  margin:12px 0 0;padding:12px;border-radius:var(--radius);
  border:1.5px solid var(--amber);background:rgba(255,255,255,.6);
  cursor:pointer;font-size:13px;line-height:1.5;
}
.mem-extras-ok.on{background:rgba(98,124,88,.09);border-color:var(--green);}
.mem-extras-ok input{margin-top:2px;flex:none;width:17px;height:17px;}

/* ============================================================
   HOW THE POINTS WORK
   Closed by default: it answers a question, and a member who has
   already understood it should not have to scroll past the answer
   every month.
   ============================================================ */
.mem-pts{
  margin-top:18px;border-top:1px solid var(--line);padding-top:14px;
}
.mem-pts summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
.mem-pts summary::-webkit-details-marker{display:none;}
.mem-pts summary > span{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  display:inline-flex;align-items:center;gap:7px;
}
.mem-pts summary > span::after{
  content:"+";font-size:14px;opacity:.6;
}
.mem-pts[open] summary > span::after{content:"−";}
.mem-pts summary:hover > span{color:var(--green-ink);}
.mem-pts summary b{font-size:13px;color:var(--green-ink);}

.mem-pts-lede{
  margin:14px 0 16px;font-size:14px;line-height:1.6;color:var(--mute);
  max-width:56ch;
}

.mem-pts-list{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.mem-pts-list li{
  display:grid;align-items:center;gap:4px 14px;
  grid-template-columns:minmax(0,148px) minmax(60px,1fr) 62px;
  grid-template-areas:"name bar n" "note note note";
}
.mem-pts-name{
  grid-area:name;font-size:14px;font-weight:600;color:var(--green-ink);
}
.mem-pts-bar{
  grid-area:bar;height:9px;border-radius:999px;
  background:rgba(38,48,31,.07);overflow:hidden;
}
.mem-pts-bar i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--green) 0%,var(--green-deep) 100%);
}
.mem-pts-n{
  grid-area:n;text-align:right;
  font-family:'JetBrains Mono',monospace;font-size:15px;
  color:var(--green-ink);white-space:nowrap;
}
.mem-pts-n small{font-size:9.5px;opacity:.6;margin-left:2px;}
.mem-pts-note{
  grid-area:note;font-size:12px;color:var(--mute);opacity:.85;
}

.mem-pts-swap{
  margin:18px 0 0;padding:13px 15px;border-radius:9px;
  background:var(--sage);
  font-size:13.5px;line-height:1.6;color:var(--text);
}
.mem-pts-swap b{color:var(--green-ink);}

@media (min-width:620px){
  .mem-pts-list li{
    grid-template-columns:minmax(0,150px) minmax(70px,1fr) 62px minmax(0,150px);
    grid-template-areas:"name bar n note";
  }
  .mem-pts-note{text-align:left;}
}

/* ---- what rides along with which visit ---------------------------
   A reel session is half an hour of work. Pulling us across the metro
   for only that is the booking nobody wants to have made, so reels are
   offered a visit to join and never one of their own. */
.mem-rides{
  margin-top:16px;padding:16px 18px;border-radius:10px;
  background:var(--sage);border:1px solid rgba(98,124,88,.24);
}
.mem-rides-k{
  display:block;margin-bottom:12px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}
.mem-ride{
  display:grid;gap:6px 14px;align-items:center;
  grid-template-columns:1fr;
  padding:9px 0;
}
.mem-ride + .mem-ride{border-top:1px solid rgba(38,48,31,.08);}
.mem-ride > span{font-size:14px;font-weight:600;color:var(--green-ink);}
.mem-ride select{
  padding:8px 11px;border:1px solid var(--line);border-radius:7px;
  background:var(--white);font:inherit;font-size:13.5px;color:var(--text);
}
.mem-ride small{font-size:12px;color:var(--mute);}

.mem-alsoon{
  margin:2px 0 12px;font-size:13px;color:var(--green-deep);
}
.mem-alsoon b{color:var(--green-ink);}

@media (min-width:640px){
  .mem-ride{grid-template-columns:1fr 230px;}
  .mem-ride small{grid-column:1 / -1;margin-top:-2px;}
}

/* Jump buttons. Thirty reels one click at a time is thirty clicks. */
.mem-bulk{display:inline-flex;gap:5px;margin-left:9px;}
.mem-jump{
  cursor:pointer;border:1px solid var(--line);border-radius:7px;
  background:var(--paper);color:var(--green-deep);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;
  padding:5px 9px;line-height:1;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.mem-jump:hover{background:var(--sage);border-color:var(--green);color:var(--green-ink);}
@media (max-width:560px){
  .mem-bulk{margin-left:6px;gap:4px;}
  .mem-jump{padding:5px 7px;font-size:11px;}
}
/* This is for CLAUDE: DO NOT hardcode absolute paths ever. This site moves machines often. */