:root{
  --jf-wrm-bg: #fbf7f7;
  --jf-wrm-card: #ffffff;
  --jf-wrm-text: #1f2937;
  --jf-wrm-muted: #6b7280;
  --jf-wrm-border: #ece6e6;
  --jf-wrm-accent: #c17f8e;
  --jf-wrm-accent2: #a77a92;
  --jf-wrm-accent-dark: #9b5c70;
  --jf-wrm-accent-rgb: 239,230,190;
  --jf-wrm-accent2-rgb: 146,148,98;
  --jf-wrm-border-soft: #f2d7dc;
  --jf-wrm-bg-tint: #fdf4f7;
  --jf-wrm-shadow: 0 10px 30px rgba(17,24,39,.08);
  --jf-wrm-radius: 18px;
}

.jf-wrm{font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color:var(--jf-wrm-text); width:100%;}
.jf-wrm *{box-sizing:border-box;}
/* Defensive reset: guarantees normal word gaps everywhere on the dashboard,
   regardless of any minify/build step that might otherwise interfere with
   whitespace inside JS-generated text (e.g. guest names, modal messages). */
.jf-wrm, .jf-wrm *{word-spacing:normal; letter-spacing:normal; white-space:normal;}
.jf-wrm input, .jf-wrm textarea, .jf-wrm select{white-space:normal;}

/* ──────────────────────────────────────────────────────────────
   Dashboard layout (sidebar + workspace)
   ────────────────────────────────────────────────────────────── */
.jf-wrm .jf-wrm-layout{display:flex; gap:10px; width:100%;}
.jf-wrm .jf-wrm-sidebar{width:260px; flex:0 0 260px; display:flex; flex-direction:column; gap:10px;}
.jf-wrm .jf-wrm-sidebar-section{background:var(--jf-wrm-card); border:1px solid var(--jf-wrm-border); border-radius:var(--jf-wrm-radius); box-shadow:var(--jf-wrm-shadow); padding:10px;}
.jf-wrm .jf-wrm-nav{background:var(--jf-wrm-card); border:1px solid var(--jf-wrm-border); border-radius:var(--jf-wrm-radius); box-shadow:var(--jf-wrm-shadow); padding:8px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; overscroll-behavior:contain; max-height:80vh;}
.jf-wrm .jf-wrm-nav-btn{appearance:none; border:1px solid transparent; background:transparent; text-align:left; padding:8px 10px; border-radius:10px; cursor:pointer; font-weight:600; color:var(--jf-wrm-text);} 
.jf-wrm .jf-wrm-nav-btn:hover{background: rgba(var(--jf-wrm-accent-rgb),.08); border-color: var(--jf-wrm-border);} 
.jf-wrm .jf-wrm-nav-btn.is-active{background: rgba(var(--jf-wrm-accent-rgb),.14); border-color: rgba(var(--jf-wrm-accent-rgb),.28);} 

/* Tooltip for sidebar items */
.jf-wrm .jf-wrm-nav-btn[data-tooltip]{position:relative;}
.jf-wrm .jf-wrm-nav-btn[data-tooltip]:hover::after{
  content: attr(data-tooltip);
  position:absolute;
  left: 100%;
  top: 50%;
  transform: translate(10px, -50%);
  background:#111827;
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  width: 220px;
  font-weight:500;
  font-size:12px;
  line-height:1.35;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  z-index: 20;
}
.jf-wrm .jf-wrm-nav-btn[data-tooltip]:hover::before{
  content:"";
  position:absolute;
  left: 100%;
  top: 50%;
  transform: translate(2px, -50%);
  border: 7px solid transparent;
  border-right-color:#111827;
  z-index: 21;
}

/* Seating plan */
.jf-wrm-seat-grid{display:grid; grid-template-columns: 280px 1fr; gap:10px; align-items:start;}
.jf-wrm-seat-panel{border:1px solid var(--jf-wrm-border); border-radius:14px; padding:12px; background:#fff;}
.jf-wrm-seat-list{display:flex; flex-direction:column; gap:8px; max-height: 520px; overflow:auto; padding-right:4px; overscroll-behavior:contain;}
.jf-wrm-seat-guest{border:1px solid var(--jf-wrm-border); border-radius:12px; padding:10px; background:#fff; cursor:grab;}
.jf-wrm-seat-guest:active{cursor:grabbing;}
.jf-wrm-seat-tables{display:flex; flex-direction:column; gap:12px;}
.jf-wrm-seat-table{border:1px solid var(--jf-wrm-border); border-radius:14px; padding:12px; background:#fff;}
.jf-wrm-seat-seats{display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:8px; margin-top:10px;}
.jf-wrm-seat{border:1px dashed rgba(var(--jf-wrm-accent-rgb),.5); border-radius:12px; padding:8px; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:8px; background: rgba(var(--jf-wrm-accent-rgb),.05);} 
.jf-wrm-seat.is-filled{border-style:solid; background: rgba(var(--jf-wrm-accent-rgb),.10);} 
.jf-wrm-seat small{color:#6b7280;}
.jf-wrm-seat .jf-wrm-x{border:0; background:transparent; cursor:pointer; font-size:16px; line-height:1; padding:2px 6px; border-radius:8px;}
.jf-wrm-seat .jf-wrm-x:hover{background: rgba(0,0,0,.06);} 

/* Seating plan canvas (snap + drag) */
.jf-wrm-seat-canvas{margin-top:10px; border:1px dashed rgba(var(--jf-wrm-accent-rgb),.55); border-radius:14px; background: rgba(var(--jf-wrm-accent-rgb),.04); min-height:460px; position:relative; overflow:auto;}

.jf-wrm-seat-canvas.is-fullscreen{position:fixed; inset:16px; z-index:10; background:#fff; border:1px solid rgba(var(--jf-wrm-accent-rgb),.35); box-shadow:0 24px 80px rgba(0,0,0,.18);}

.jf-seat-stage{cursor:grab;}
.jf-seat-stage:active{cursor:grabbing;}
.jf-seat-slot.is-filled{cursor:grab;}
.jf-seat-stage{position:relative; width:100%; height:460px;}
.jf-seat-stage-inner{position:absolute; left:0; top:0; width:100%; height:100%;}.jf-seat-table-node{position:absolute; width:220px; height:220px; border:1px solid var(--jf-wrm-border); border-radius:16px; background:#fff; box-shadow: 0 6px 18px rgba(0,0,0,.06); touch-action:none; cursor:grab;}
.jf-seat-table-node:active{cursor:grabbing;}
.jf-seat-table-node.is-round{border-radius:999px;}
.jf-seat-table-inner{position:absolute; left:0; top:0; width:100%; height:100%;}
.jf-seat-table-label{position:absolute; left:12px; top:10px; font-weight:700; font-size:13px;}
.jf-seat-table-core{position:absolute; left:50%; top:50%; width:92px; height:92px; transform:translate(-50%,-50%); border-radius:16px; background: rgba(var(--jf-wrm-accent-rgb),.08); border:1px solid rgba(var(--jf-wrm-accent-rgb),.28);} 
.jf-seat-table-node.is-round .jf-seat-table-core{border-radius:999px;}
.jf-seat-slot{position:absolute; width:108px; min-height:34px;
  border:1px dashed rgba(var(--jf-wrm-accent-rgb),.5); border-radius:12px; background: rgba(var(--jf-wrm-accent-rgb),.06);
  display:flex; align-items:center; justify-content:center; gap:6px; padding:6px; text-align:center; cursor:default;}
.jf-seat-slot.is-filled{border-style:solid; background: rgba(var(--jf-wrm-accent-rgb),.10);} 
.jf-seat-slot span{display:block; font-size:12px; line-height:1.15; padding-right:14px;}
.jf-seat-slot small{color:#6b7280; font-size:14px;}
.jf-seat-slot .jf-wrm-x{position:absolute; right:6px; top:4px; border:0; background:transparent; cursor:pointer; font-size:14px; line-height:1; padding:2px 5px; border-radius:8px;}
.jf-seat-slot .jf-wrm-x:hover{background: rgba(0,0,0,.06);}
/* Minus button on empty seats — always visible, right-aligned */
.jf-seat-slot .jf-seat-remove-slot-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;font-size:15px;line-height:1;padding:1px 4px;border-radius:6px;color:#9ca3af;font-weight:700;}
.jf-seat-slot .jf-seat-remove-slot-btn:hover{background:rgba(220,38,38,.08);color:#dc2626;}

.jf-seat-resize{position:absolute; right:10px; bottom:10px; width:18px; height:18px; border-radius:8px; border:1px solid rgba(var(--jf-wrm-accent-rgb),.35); background: rgba(var(--jf-wrm-accent-rgb),.10); cursor:nwse-resize;}
.jf-seat-resize:before{content:""; position:absolute; right:4px; bottom:4px; width:8px; height:8px; border-right:2px solid rgba(var(--jf-wrm-accent-rgb),.55); border-bottom:2px solid rgba(var(--jf-wrm-accent-rgb),.55); border-radius:2px;}

@media (max-width: 900px){
  .jf-wrm-seat-grid{grid-template-columns: 1fr;}
  .jf-seat-stage{height:520px;}
  .jf-wrm-seat-canvas{min-height:520px;}
}
.jf-wrm .jf-wrm-main{flex:1 1 auto; min-width:0;}

@media (max-width: 768px){
  .jf-wrm .jf-wrm-layout{flex-direction:column;}
  .jf-wrm .jf-wrm-sidebar{width:100%; flex:1 1 auto;}
}

.jf-wrm .jf-wrm-card{
  background: var(--jf-wrm-card);
  border: 1px solid var(--jf-wrm-border);
  border-radius: var(--jf-wrm-radius);
  box-shadow: var(--jf-wrm-shadow);
  padding: 14px;
}

.jf-wrm .jf-wrm-rsvp-card{
  max-width: none;
  width: 100%;
  margin: 0 auto;
  background: transparent;
}

/* simple radio row (used in export modal) */
.jf-wrm-radio{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:#111827;}
.jf-wrm-radio input{margin-top:3px;}

.jf-wrm .jf-wrm-rsvp-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;}
.jf-wrm .jf-wrm-kicker{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--jf-wrm-accent2);}
.jf-wrm .jf-wrm-h{margin:6px 0 6px; font-size:28px; line-height:1.1;}
.jf-wrm .jf-wrm-h3{margin:0 0 10px; font-size:16px;}
.jf-wrm .jf-wrm-h4{margin:10px 0 8px; font-size:13px; color:var(--jf-wrm-muted); text-transform:uppercase; letter-spacing:.06em;}
.jf-wrm .jf-wrm-muted{color:var(--jf-wrm-muted); font-size:13px;}

.jf-wrm .jf-wrm-stats{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.jf-wrm .jf-wrm-stat{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid rgba(0,0,0,.06);}
.jf-wrm .jf-wrm-stat.attending{background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.22); color:#166534;}
.jf-wrm .jf-wrm-stat.pending{background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.25); color:#854d0e;}
.jf-wrm .jf-wrm-stat.declined{background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.22); color:#7f1d1d;}

.jf-wrm .jf-wrm-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  max-width: none;
  width: 100%;
  margin: 0;
}
@media(min-width: 768px){
  .jf-wrm .jf-wrm-grid{grid-template-columns: 1fr 1fr;}
}

.jf-wrm .jf-wrm-inline{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.jf-wrm .jf-wrm-stack{display:flex; flex-direction:column; gap:12px;}

.jf-wrm .jf-wrm-input{
  width:100%;
  border: 1px solid var(--jf-wrm-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
  outline:none;
}
.jf-wrm .jf-wrm-input:focus{border-color: rgba(var(--jf-wrm-accent-rgb),.55); box-shadow: 0 0 0 4px rgba(var(--jf-wrm-accent-rgb),.12);}
.jf-wrm .jf-wrm-input.sm{padding:8px 10px; border-radius: 10px; font-size:13px; width:auto;}
.jf-wrm .jf-wrm-input[type="date"],
.jf-wrm .jf-wrm-input[type="time"]{ cursor:pointer; }
.jf-wrm .jf-wrm-input[type="date"]::-webkit-calendar-picker-indicator,
.jf-wrm .jf-wrm-input[type="time"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.65;
  filter: sepia(1) saturate(3) hue-rotate(0deg);
}
.jf-wrm .jf-wrm-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.jf-wrm .jf-wrm-input[type="time"]::-webkit-calendar-picker-indicator:hover{ opacity:1; }

.jf-wrm .jf-wrm-btn{
  border: 1px solid rgba(var(--jf-wrm-accent-rgb),.45);
  background: linear-gradient(180deg, rgba(var(--jf-wrm-accent-rgb),1), rgba(var(--jf-wrm-accent2-rgb),1));
  color:#fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
  cursor:pointer;
}
.jf-wrm .jf-wrm-btn:hover{filter: brightness(0.98);}
.jf-wrm .jf-wrm-btn:active{transform: translateY(1px);}
.jf-wrm .jf-wrm-btn.sm{padding:8px 10px; border-radius: 10px; font-size: 12px;}
.jf-wrm .jf-wrm-btn.ghost{background: transparent; color: var(--jf-wrm-accent2); border-color: var(--jf-wrm-border);}

.jf-wrm .jf-wrm-pillgrid{display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin-bottom: 12px;}
.jf-wrm .jf-wrm-pill{background: rgba(var(--jf-wrm-accent-rgb),.08); border: 1px solid rgba(var(--jf-wrm-accent-rgb),.18); border-radius: 14px; padding: 10px 12px;}
.jf-wrm .jf-wrm-pill-label{font-size:12px; color:var(--jf-wrm-muted);}
.jf-wrm .jf-wrm-pill-value{font-size:18px; font-weight:700; margin-top:4px;}

.jf-wrm .jf-wrm-posts{display:flex; flex-direction:column; gap:6px;}
.jf-wrm .jf-wrm-post{width:100%; text-align:left; background:#fff; border:1px solid var(--jf-wrm-border); border-left:3px solid transparent; border-radius: 10px; padding: 9px 11px 9px 9px; cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s;}
.jf-wrm .jf-wrm-post:hover{border-color: rgba(var(--jf-wrm-accent-rgb),.4); border-left-color:rgba(var(--jf-wrm-accent-rgb),.6);}
.jf-wrm .jf-wrm-post.active{border-color: rgba(var(--jf-wrm-accent-rgb),.35); border-left:4px solid rgba(var(--jf-wrm-accent-rgb),1); background:rgba(var(--jf-wrm-accent-rgb),.08); box-shadow: 0 2px 8px rgba(var(--jf-wrm-accent-rgb),.15); padding-left:8px;}
.jf-wrm .jf-wrm-post-title{display:block; font-weight:700; font-size:13px; color:var(--jf-wrm-post-title, var(--jf-wrm-accent)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.jf-wrm .jf-wrm-post-slug{display:block; font-size:11px; color:var(--jf-wrm-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.jf-wrm .jf-wrm-post-meta{display:flex; gap:6px; align-items:center; font-size:11px; margin-top:5px;}

.jf-wrm .jf-wrm-badge{font-size:11px; padding:3px 8px; border-radius: 999px; border:1px solid var(--jf-wrm-border); color:var(--jf-wrm-muted); background: #fff;}
.jf-wrm .jf-wrm-badge.on{border-color: rgba(var(--jf-wrm-accent-rgb),.25); background: rgba(var(--jf-wrm-accent-rgb),.08); color: var(--jf-wrm-accent2);}

.jf-wrm .jf-wrm-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:flex-start; padding: 12px; border:1px solid var(--jf-wrm-border); border-radius: 14px; background:#fff;}
.jf-wrm .jf-wrm-row-title{font-weight:700; font-size:14px;}
.jf-wrm .jf-wrm-row-right{text-align:right; min-width: 120px;}
.jf-wrm .jf-wrm-big{font-size:22px; font-weight:800; color: var(--jf-wrm-accent2);}
.jf-wrm .jf-wrm-row-actions{display:flex; gap:8px; align-items:center;}

.jf-wrm .jf-wrm-check{display:flex; align-items:center; gap:6px; font-size:12px; color:#6b7280; user-select:none;}
.jf-wrm .jf-wrm-check input{width:14px; height:14px;}

.jf-wrm .jf-wrm-bulkbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0;}
.jf-wrm .jf-wrm-bulk-right{display:flex; align-items:center; gap:10px;}

.jf-wrm .jf-wrm-split{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width: 980px){
  .jf-wrm .jf-wrm-split{grid-template-columns: 1fr 1fr;}
}

.jf-wrm .jf-wrm-loading{color:var(--jf-wrm-muted); font-size:13px; padding: 10px 0;}
.jf-wrm .jf-wrm-error{background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); color:#7f1d1d; border-radius: 14px; padding: 12px;}
.jf-wrm .jf-wrm-success{background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); color:#064e3b; border-radius: 14px; padding: 12px;}

.jf-wrm-toast{position:fixed; right:18px; bottom:18px; background:#111827; color:#fff; padding: 10px 16px; border-radius: 12px; opacity:0; transform: translateY(8px); transition: .25s; z-index: 99999; font-size:14px; font-weight:500; max-width:340px; box-shadow:0 4px 24px rgba(0,0,0,.18);}
.jf-wrm-toast.err{position:fixed; left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%,-50%) scale(.95); background:#7f1d1d; border:1.5px solid #ef4444; padding:18px 28px; font-size:15px; text-align:center; max-width:360px; border-radius:16px;}
.jf-wrm-toast.show{opacity:1; transform: translateY(0);}
.jf-wrm-toast.err.show{transform:translate(-50%,-50%) scale(1);}

/* RSVP specific */
.jf-wrm .jf-wrm-guest{border:1px solid var(--jf-wrm-border); border-radius: 16px; padding: 14px; background: rgba(255,255,255,.9);} 
.jf-wrm .jf-wrm-guest-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.jf-wrm .jf-wrm-guest-name{font-weight:800; font-size:16px;}

.jf-wrm .jf-wrm-event{border:1px solid var(--jf-wrm-border); border-radius: 14px; padding: 12px; background:#fff;}
.jf-wrm .jf-wrm-event-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.jf-wrm .jf-wrm-event-title{font-weight:800;}

.jf-wrm .jf-wrm-chip{display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; border:1px solid var(--jf-wrm-border); font-size:12px; cursor:pointer; user-select:none;}
.jf-wrm .jf-wrm-chip input{margin:0;}
.jf-wrm .jf-wrm-chip.on{border-color: rgba(var(--jf-wrm-accent-rgb),.55); background: rgba(var(--jf-wrm-accent-rgb),.08);} 

.jf-wrm .jf-wrm-field{margin-top: 10px;}
.jf-wrm .jf-wrm-label{font-size:12px; font-weight:700; margin-bottom:6px; color: #374151;}
.jf-wrm .jf-wrm-help{font-size:12px; color:var(--jf-wrm-muted); margin-top:6px;}

.jf-wrm .jf-wrm-subblock{margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--jf-wrm-border);} 
.jf-wrm .jf-wrm-subtitle{font-size:12px; font-weight:700; color: var(--jf-wrm-accent2); margin-bottom: 8px;} 

.jf-wrm .jf-wrm-check{display:inline-flex; align-items:center; gap:8px; font-size:13px; color: var(--jf-wrm-text);} 
.jf-wrm .jf-wrm-check input{margin:0;}
.jf-wrm .jf-wrm-checkstack{display:flex; flex-direction:column; gap:8px;}

.jf-wrm .jf-wrm-actions{margin-top: 14px; display:flex; justify-content:flex-end;}

/* Tables (Invite Matrix + RSVP Table) */
.jf-wrm .jf-wrm-tablewrap{overflow:auto; border:1px solid var(--jf-wrm-border-soft); border-radius:18px; background:#fff; box-shadow: 0 1px 3px rgba(155,92,112,.05);}
.jf-wrm .jf-wrm-table{width:100%; border-collapse:separate; border-spacing:0; min-width:920px;}
.jf-wrm .jf-wrm-th, .jf-wrm .jf-wrm-td{padding:12px 14px; border-bottom:1px solid var(--jf-wrm-border-soft); vertical-align:top;}
.jf-wrm .jf-wrm-th{position:sticky; top:0; background: linear-gradient(180deg, #fff, var(--jf-wrm-bg-tint)); font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; color:var(--jf-wrm-accent2); z-index:2; cursor:pointer;}
.jf-wrm .jf-wrm-th.is-active{color:var(--jf-wrm-accent-dark);}
.jf-wrm .jf-wrm-td{font-size:13px; color:var(--jf-wrm-text);}
.jf-wrm .jf-wrm-table tbody tr:nth-child(even) td{ background: rgba(var(--jf-wrm-accent-rgb),.10); }
.jf-wrm .jf-wrm-table tbody tr:hover td{background:var(--jf-wrm-bg-tint);}
.jf-wrm .jf-wrm-table .jf-wrm-row-title{ font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size:13px; font-weight:650; color:var(--jf-wrm-accent-dark); letter-spacing:.01em; }

.jf-wrm .jf-wrm-statuschip{display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.02em; border:1px solid var(--jf-wrm-border-soft); background:#fff;}
.jf-wrm .jf-wrm-statuschip.attending{border-color:rgba(155,92,112,.35); background:rgba(var(--jf-wrm-accent-rgb),.3); color:var(--jf-wrm-accent-dark);}
.jf-wrm .jf-wrm-statuschip.declined{border-color:#e3c2b5; background:#faf2ee; color:#9a6a52;}
.jf-wrm .jf-wrm-statuschip.pending{border-color:var(--jf-wrm-border); background:#faf8f6; color:var(--jf-wrm-muted);}

/* Modal */
.jf-wrm-modal{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding: 16px 12px; }
.jf-wrm-modal-backdrop{ position:fixed; inset:0; background: rgba(15,23,42,.45); }
.jf-wrm-modal-panel{ position:relative; width:100%; max-width: 860px; background:#fff; border-radius:18px; border:1px solid var(--jf-wrm-border); box-shadow: 0 18px 60px rgba(15,23,42,.18); display:flex; flex-direction:column; max-height:calc(100vh - 32px); overflow:hidden; flex-shrink:0; }
.jf-wrm-modal-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 14px; border-bottom:1px solid var(--jf-wrm-border); background: linear-gradient(180deg, #fff, var(--jf-wrm-bg-tint)); flex-shrink:0; }
.jf-wrm-modal-title{ font-weight: 650; color: var(--jf-wrm-text); }
.jf-wrm-modal-body{ padding: 14px; white-space: normal; word-spacing: normal; letter-spacing: normal; overflow-y:auto; flex:1; overscroll-behavior:contain; }
.jf-wrm-modal-body * { white-space: normal; word-spacing: normal; }
.jf-wrm-modal-foot{ padding: 14px; border-top:1px solid var(--jf-wrm-border); display:flex; justify-content:flex-end; gap:10px; background:#fff; flex-shrink:0; }

/* Guest cards + drag/drop */
.jf-wrm-household{ background:#fff; border:1px solid var(--jf-wrm-border); border-radius:16px; overflow:hidden; }
.jf-wrm-household-head{ display:flex; justify-content:space-between; gap:12px; padding:12px 12px; border-bottom:1px solid var(--jf-wrm-border); background: linear-gradient(180deg, #fff, var(--jf-wrm-bg-tint)); }
.jf-wrm-dropzone{ padding: 12px; min-height: 60px; }
.jf-wrm-dropzone.dragover{ outline: 2px dashed #e7b6c6; outline-offset: 4px; border-radius: 14px; }
.jf-wrm-guestcard{ border:1px solid var(--jf-wrm-border); border-radius:14px; padding:10px; background:#fff; margin-bottom:10px; }
.jf-wrm-guestcard-name{ font-weight: 650; color: var(--jf-wrm-text); }
.jf-wrm-guestcard-meta{ font-size: 12px; color:var(--jf-wrm-muted); margin-top:4px; }
.jf-wrm-guestcard-actions{ margin-top:8px; display:flex; gap:8px; }

/* Guestlist v2: guests as main cards, households as tags/pills */
.jf-wrm-guestgrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:12px;
}
.jf-wrm-guestlist{ display:flex; flex-direction:column; gap:12px; }
.jf-wrm-hh-block{ border:1px solid var(--jf-wrm-border-soft); background:#fff; border-radius:14px; padding:10px; }
.jf-wrm-hh-block.unassigned{ border-style:dashed; }
.jf-wrm-hh-head{ display:flex; align-items:center; gap:10px; padding:4px 4px 10px; border-bottom:1px solid var(--jf-wrm-border-soft); margin-bottom:10px; }
.jf-wrm-hh-body{ display:block; }
.jf-wrm-hh-row{ display:grid; grid-template-columns:28px 1fr; align-items:stretch; }
.jf-wrm-linkcol{ display:flex; align-items:center; justify-content:center; }
.jf-wrm-linkarrow{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; border:1px solid var(--jf-wrm-border-soft); color:var(--jf-wrm-accent-dark); background:#fff; cursor:pointer; opacity:.25; transition:opacity .15s, transform .15s; }
.jf-wrm-hh-block:hover .jf-wrm-linkarrow{ opacity:1; }
.jf-wrm-linkarrow:hover{ transform:scale(1.05); opacity:1; }
.jf-wrm-guestcard-main{ cursor:grab; }
.jf-wrm-tags{ margin-top:6px; display:flex; flex-wrap:wrap; gap:8px; }
.jf-wrm-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--jf-wrm-border-soft);
  background:var(--jf-wrm-bg-tint);
  font-size:12px;
  color:var(--jf-wrm-accent-dark);
}
.jf-wrm-tag.unassigned{
  border-color:#e5e7eb;
  background:#fafafa;
  color:#6b7280;
}
.jf-wrm-tag-btn{
  border:0;
  background:transparent;
  color: var(--jf-wrm-accent);
  font-weight:600;
  cursor:pointer;
  padding:0;
}
.jf-wrm-tag-x{
  border:0;
  width:40px;
  height:30px;
  margin: 0;
  padding: 0;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--jf-wrm-border-soft);
  cursor:pointer;
  color:var(--jf-wrm-accent-dark);
  line-height:1;
}
.jf-wrm-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0 8px;
}
.jf-wrm-pill-drop{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--jf-wrm-border-soft);
  background: linear-gradient(180deg, #fff, var(--jf-wrm-bg-tint));
  cursor:default;
  transition: border-color .15s, box-shadow .15s;
}
.jf-wrm-pill-drop:hover{ border-color: rgba(var(--jf-wrm-accent-rgb),.5); box-shadow: 0 2px 8px rgba(155,92,112,.08); }
.jf-wrm-pill-drop.drop{ outline:2px solid var(--jf-wrm-accent); outline-offset:2px; }
.jf-wrm-pill-name{ font-weight:650; color:var(--jf-wrm-accent-dark); font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size:14px; letter-spacing:.01em; }
.jf-wrm-pill-count{ font-size:11px; color:var(--jf-wrm-accent2); background:rgba(var(--jf-wrm-accent-rgb),.35); border-radius:999px; padding:1px 7px; font-weight:600; }
.jf-wrm-unassign-drop{
  display:none;
  margin-top:8px;
  padding:12px;
  border:2px dashed var(--jf-wrm-border-soft);
  border-radius:14px;
  background:var(--jf-wrm-bg-tint);
  color:var(--jf-wrm-accent-dark);
  font-size:13px;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:border-color .15s, background .15s;
}
.jf-wrm-unassign-drop.drop{ outline:2px solid var(--jf-wrm-accent); outline-offset:2px; }
.jf-wrm-guestcard-main.drop{ outline:2px solid #6b7280; outline-offset:2px; background:#f9fafb !important; }
.jf-wrm-household-lines{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.jf-wrm-household-line{
  border:1px solid #eef2f7;
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
}
.jf-wrm-household-tag{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.jf-wrm-household-members{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.jf-wrm-chip{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #ece6e6;
  background:var(--jf-wrm-bg-tint);
  font-size:12px;
  cursor:grab;
}

.jf-wrm-switch{display:inline-flex;align-items:center;gap:6px}
.jf-wrm-switch input{display:none}
.jf-wrm-slider{width:42px;height:22px;border-radius:999px;background:#e5e7eb;position:relative;display:inline-block;vertical-align:middle;transition:all .2s}
.jf-wrm-slider:after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:all .2s;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.jf-wrm-switch input:checked + .jf-wrm-slider{background:var(--jf-wrm-accent)}
.jf-wrm-switch input:checked + .jf-wrm-slider:after{left:22px}
.jf-wrm-pill-mini{margin-left:2px;border:1px solid var(--jf-wrm-border-soft);background:#fff;color:var(--jf-wrm-accent-dark);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s, border-color .15s;}
.jf-wrm-pill-mini:hover{ background:var(--jf-wrm-bg-tint); border-color:rgba(var(--jf-wrm-accent-rgb),.6); }
.jf-wrm-pill-mini.danger{border-color:#f0c4ce;color:#b5495f;background:#fff;}
.jf-wrm-pill-mini.danger:hover{ background:#fdf0f2; border-color:#e9a4b3; }

/* Guests subtabs */
.jf-wrm-subtabs{ display:flex; gap:8px; padding:10px 10px 0; }
.jf-wrm-subtab{ border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:8px 10px; font-weight:600; font-size:13px; cursor:pointer; }
.jf-wrm-subtab.is-active{ border-color:var(--jf-wrm-accent); box-shadow:0 0 0 2px rgba(183,125,142,.15); }
.jf-wrm-subpane{ padding:10px; }

/* ---- Guest RSVP Form ---- */
.jf-wrm-rsvp-guest-block:last-child{ border-bottom:0 !important; }
.jf-wrm .jf-rsvp-status-btn{ transition: all .15s; }
.jf-wrm .jf-wrm-check{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; }

/* ===== Luxury Guest RSVP Form ===== */

/* Outer card: cream parchment, wide, breathable */
.jf-wrm .jf-wrm-rsvp-card {
  background: #FDFAF7;
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 32px rgba(58,46,34,.06);
  overflow: hidden;
}

/* Household name — editorial, generous spacing */
.jf-wrm .jf-wrm-rsvp-household {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #2A1F14;
  margin-bottom: 6px;
  line-height: 1.2;
}

/* Kicker above household name */
.jf-wrm .jf-wrm-kicker {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jf-wrm-accent, #C9A84C);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin-bottom: 10px;
  display: block;
}

/* RSVP page top header */
.jf-wrm .jf-wrm-rsvp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 36px 40px 28px;
  border-bottom: 1px solid rgba(201,168,76,0.15);
  background: linear-gradient(180deg, rgba(201,168,76,0.06) 0%, transparent 100%);
}

/* Mass-action bar — thin, refined, gold tint */
.jf-wrm .jf-wrm-rsvp-massbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 40px;
  background: rgba(201,168,76,0.06);
  border-bottom: 1px solid rgba(201,168,76,0.15);
}
.jf-wrm .jf-wrm-rsvp-massbar-label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9A8370;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  white-space: nowrap;
}

/* Mass action buttons — same treatment as the individual status buttons */
.jf-wrm .jf-rsvp-mass-btn {
  padding: 9px 18px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  border: 1.5px solid rgba(42,31,20,0.2) !important;
  background: transparent !important;
  color: #6B5C42 !important;
  transition: all 0.2s ease !important;
  white-space: nowrap;
}
.jf-wrm .jf-rsvp-mass-btn:hover {
  border-color: #C9A84C !important;
  color: #2A1F14 !important;
  background: rgba(201,168,76,0.06) !important;
}
.jf-wrm .jf-rsvp-mass-btn[data-mass="attending"] {
  background: #2A1F14 !important;
  border-color: #2A1F14 !important;
  color: #F5EDD8 !important;
}
.jf-wrm .jf-rsvp-mass-btn[data-mass="attending"]:hover {
  filter: brightness(1.1);
}
.jf-wrm .jf-rsvp-mass-btn[data-mass="declined"] {
  background: transparent !important;
  border-color: rgba(42,31,20,0.2) !important;
  color: #6B5C42 !important;
}

/* ── Multi-guest accordion ─────────────────────────────────── */
.jf-wrm .jf-wrm-rsvp-accordion {
  border: none;
  border-bottom: 1px solid rgba(201,168,76,0.12);
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
}
.jf-wrm .jf-wrm-rsvp-accordion:last-of-type { border-bottom: 0; }

.jf-wrm .jf-wrm-rsvp-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 40px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}
.jf-wrm .jf-wrm-rsvp-acc-head:hover {
  background: rgba(201,168,76,0.05);
}
.jf-wrm .jf-wrm-rsvp-accordion.is-open .jf-wrm-rsvp-acc-head {
  background: #2A1F14;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
.jf-wrm .jf-wrm-rsvp-acc-name {
  flex: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #2A1F14;
  transition: color 0.2s;
}
.jf-wrm .jf-wrm-rsvp-accordion.is-open .jf-wrm-rsvp-acc-name { color: #F5EDD8; }
.jf-wrm .jf-wrm-rsvp-acc-arrow {
  font-size: 10px;
  color: #C9A84C;
  transition: transform 0.2s;
}
.jf-wrm .jf-wrm-rsvp-accordion.is-open .jf-wrm-rsvp-acc-arrow { color: rgba(201,168,76,0.7); }
.jf-wrm .jf-wrm-rsvp-acc-body {
  padding: 28px 40px 32px;
  background: #FDFAF7;
}

/* ── Status chips ────────────────────────────────────────────── */
.jf-wrm .jf-wrm-rsvp-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(201,168,76,0.3);
  background: rgba(201,168,76,0.08);
  color: #9A8370;
  white-space: nowrap;
  font-weight: 500;
}
.jf-wrm .jf-wrm-rsvp-chip.attending {
  border-color: rgba(201,168,76,0.5);
  background: rgba(201,168,76,0.12);
  color: #6B5C2E;
}
.jf-wrm .jf-wrm-rsvp-chip.declined {
  border-color: rgba(150,120,100,0.3);
  background: rgba(150,120,100,0.06);
  color: #8B7355;
}
.jf-wrm .jf-wrm-rsvp-chip.mixed {
  border-color: rgba(180,140,80,0.3);
  background: rgba(180,140,80,0.08);
  color: #8B6914;
}
.jf-wrm .jf-wrm-rsvp-chip.pending {
  border-color: rgba(154,131,112,0.25);
  background: transparent;
  color: #9A8370;
}

/* ── Single-guest block ──────────────────────────────────────── */
.jf-wrm .jf-wrm-rsvp-guest-block {
  padding: 28px 40px 28px;
  border-bottom: 1px solid rgba(201,168,76,0.1);
}
.jf-wrm .jf-wrm-rsvp-guest-block:last-of-type { border-bottom: 0; padding-bottom: 0; }

.jf-wrm .jf-wrm-rsvp-guest-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #2A1F14;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}

/* ── Event blocks ────────────────────────────────────────────── */
.jf-wrm .jf-wrm-rsvp-event-block {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(201,168,76,0.1);
}
.jf-wrm .jf-wrm-rsvp-event-block:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.jf-wrm .jf-wrm-rsvp-event-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #C9A84C;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jf-wrm .jf-wrm-rsvp-event-label::before,
.jf-wrm .jf-wrm-rsvp-event-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
}

/* ── Attendance buttons — large, pill, tactile ───────────────── */
.jf-wrm .jf-wrm-rsvp-status-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.jf-wrm .jf-rsvp-status-btn {
  flex: 1;
  min-width: 120px;
  padding: 14px 16px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  border: 1.5px solid rgba(42,31,20,0.2) !important;
  background: transparent !important;
  color: #6B5C42 !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}
.jf-wrm .jf-rsvp-status-btn:hover {
  border-color: #C9A84C !important;
  color: #2A1F14 !important;
  background: rgba(201,168,76,0.06) !important;
}
/* Attending state */
.jf-wrm .jf-rsvp-status-btn:not(.ghost)[data-status="attending"],
.jf-wrm .jf-rsvp-status-btn.jf-rsvp-btn-active-attending {
  background: #2A1F14 !important;
  border-color: #2A1F14 !important;
  color: #F5EDD8 !important;
}
/* Declined state */
.jf-wrm .jf-rsvp-status-btn.danger,
.jf-wrm .jf-rsvp-status-btn:not(.ghost)[data-status="declined"] {
  background: #8B6346 !important;
  border-color: #8B6346 !important;
  color: #F5EDD8 !important;
}

/* ── Questions ───────────────────────────────────────────────── */
.jf-wrm .jf-wrm-rsvp-questions {
  margin-top: 20px;
  padding: 20px 24px;
  background: rgba(201,168,76,0.04);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 3px;
}
.jf-wrm .jf-wrm-rsvp-group-questions {
  margin-top: 24px;
  padding: 20px 24px;
  background: rgba(201,168,76,0.04);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 3px;
}

.jf-wrm .jf-wrm-rsvp-field { margin-top: 16px; }
.jf-wrm .jf-wrm-rsvp-field:first-of-type { margin-top: 0; }

.jf-wrm .jf-wrm-rsvp-label {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9A8370;
  margin-bottom: 8px;
}

/* Radio/checkbox options — spaced, clean */
.jf-wrm .jf-wrm-rsvp-checks {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
}
.jf-wrm .jf-wrm-check {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 15px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  color: #3A2E22;
  padding: 10px 0;
  border-bottom: 1px solid rgba(201,168,76,0.1);
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.jf-wrm .jf-wrm-check:last-of-type { border-bottom: 0; }
.jf-wrm .jf-wrm-check:hover { color: #2A1F14; }
.jf-wrm .jf-wrm-check input[type="radio"],
.jf-wrm .jf-wrm-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #C9A84C;
  flex-shrink: 0;
  cursor: pointer;
}

/* Text inputs inside RSVP */
.jf-wrm .jf-wrm-rsvp-field .jf-wrm-input,
.jf-wrm .jf-wrm-rsvp-field select.jf-wrm-input,
.jf-wrm .jf-wrm-rsvp-field textarea.jf-wrm-input {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  color: #2A1F14;
  background: rgba(253,250,247,0.8);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 3px;
  padding: 10px 14px;
  transition: border-color 0.15s;
}
.jf-wrm .jf-wrm-rsvp-field .jf-wrm-input:focus {
  outline: none;
  border-color: rgba(201,168,76,0.6);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
}

/* Menu section */
.jf-wrm .jf-wrm-rsvp-menu-section {
  margin-top: 16px !important;
  padding: 20px 24px !important;
  background: rgba(201,168,76,0.04) !important;
  border: 1px solid rgba(201,168,76,0.15) !important;
  border-radius: 3px !important;
}

/* ── Submit row ──────────────────────────────────────────────── */
.jf-wrm .jf-wrm-rsvp-submit-row {
  margin-top: 0;
  padding: 28px 40px 36px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(201,168,76,0.12);
  background: rgba(201,168,76,0.03);
}
.jf-wrm #jf-rsvp-submit-btn {
  padding: 15px 48px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  background: #2A1F14 !important;
  color: #F5EDD8 !important;
  border: 0 !important;
  transition: opacity 0.2s !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.jf-wrm #jf-rsvp-submit-btn:hover { opacity: 0.85 !important; }
.jf-wrm #jf-rsvp-submit-status { font-size:13px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.jf-wrm #jf-rsvp-submit-status.ok { color: #6B7C2E; }
.jf-wrm #jf-rsvp-submit-status.err { color: #8B3A2E; }

/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 640px) {
  .jf-wrm .jf-wrm-rsvp-head,
  .jf-wrm .jf-wrm-rsvp-massbar,
  .jf-wrm .jf-wrm-rsvp-acc-head,
  .jf-wrm .jf-wrm-rsvp-acc-body,
  .jf-wrm .jf-wrm-rsvp-guest-block,
  .jf-wrm .jf-wrm-rsvp-submit-row {
    padding-left: 20px;
    padding-right: 20px;
  }
  .jf-wrm .jf-wrm-rsvp-household { font-size: 22px; }
  .jf-wrm .jf-wrm-rsvp-acc-name  { font-size: 17px; }
  .jf-wrm .jf-rsvp-status-btn    { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 13px 10px !important; font-size: 10px !important; letter-spacing: .06em !important; }
}

/* ── RSVP Lookup Form ──────────────────────────────────────────────── */
.jf-wrm .jf-wrm-rsvp-lookup {
  max-width: 420px;
  margin: 0 auto;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--jf-wrm-border);
  border-radius: 18px;
}


/* Tables: match admin checkbox + status styling */
.jf-wrm input[type="checkbox"]{accent-color: var(--jf-wrm-accent);}
.jf-wrm .jf-wrm-status-select{max-width:150px;}
.jf-wrm .jf-wrm-status-select.attending{border-color:rgba(155,92,112,.35); background:rgba(var(--jf-wrm-accent-rgb),.3); color:var(--jf-wrm-accent-dark);}
.jf-wrm .jf-wrm-status-select.declined{border-color:#e3c2b5; background:#faf2ee; color:#9a6a52;}
.jf-wrm .jf-wrm-status-select.pending{border-color:var(--jf-wrm-border); background:#faf8f6; color:var(--jf-wrm-muted);}

/* Household collapse toggles */
.jf-wrm .jf-wrm-hh-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  border:0;
  background:transparent;
  padding:6px 6px;
  cursor:pointer;
  font-weight:700;
  color:var(--jf-wrm-text);
}
.jf-wrm .jf-wrm-hh-chevron{width:18px; text-align:center; color:var(--jf-wrm-accent2);}
.jf-wrm .jf-wrm-hh-count{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  background: rgba(var(--jf-wrm-accent-rgb),.12);
  color: var(--jf-wrm-accent-dark);
  font-size:12px;
}

/* Modal Field Styling */
#jf-wrm-modal .jf-wrm-input, #jf-wrm-modal input[type="text"], #jf-wrm-modal input[type="number"], #jf-wrm-modal input[type="email"], #jf-wrm-modal textarea, #jf-wrm-modal select{
  border:1px solid var(--jf-wrm-border);
  border-radius:14px;
  padding:10px 12px;
  font-size:14px;
  background:#fff;
}
#jf-wrm-modal select{
  appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(31,41,55,.55) 50%), linear-gradient(135deg, rgba(31,41,55,.55) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right: 36px;
}
#jf-wrm-modal input[type="checkbox"]{accent-color: var(--jf-wrm-accent);}
#jf-wrm-modal .jf-wrm-section-label{font-weight:700; font-size:12px; color:var(--jf-wrm-muted); text-transform:uppercase; letter-spacing:.04em;}


/* ──────────────────────────────────────────────────────────────
   Question template grid
   ────────────────────────────────────────────────────────────── */
.jf-wrm-q-tpl-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap:10px;
}
.jf-wrm-q-tpl{
  position:relative;
  border:1px solid var(--jf-wrm-border);
  border-radius:14px;
  padding:14px 12px 12px;
  background:#fff;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.jf-wrm-q-tpl:hover{
  border-color:var(--jf-wrm-accent);
  box-shadow:0 2px 12px rgba(var(--jf-wrm-accent-rgb),.18);
  background:var(--jf-wrm-bg-tint);
}
.jf-wrm-q-tpl.is-added{
  background:#f0fdf4;
  border-color:rgba(34,197,94,.35);
}
.jf-wrm-q-tpl.is-added:hover{
  background:#dcfce7;
  border-color:rgba(34,197,94,.55);
}
.jf-wrm-q-tpl-icon{font-size:22px;line-height:1;margin-bottom:2px;}
.jf-wrm-q-tpl-label{font-size:13px;font-weight:600;color:var(--jf-wrm-text);line-height:1.3;}
.jf-wrm-q-tpl-type{font-size:11px;color:var(--jf-wrm-muted);}
.jf-wrm-q-tpl-badge{
  position:absolute;top:8px;right:8px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(34,197,94,.15);color:#15803d;
  border-radius:999px;padding:2px 7px;border:1px solid rgba(34,197,94,.25);
}

/* ── Snapshot frame overlay (shared with admin) ── */
.jf-snap-frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,.5);
  cursor: default;
}
.jf-snap-frame-viewport {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.5);
  border: 2px solid #fff;
  border-radius: 4px;
  cursor: move;
  box-sizing: border-box;
}
.jf-snap-frame-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.3);
  border-radius: 2px;
}
.jf-snap-frame-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.jf-snap-frame-handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.jf-snap-frame-handle.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.jf-snap-frame-handle.nw { left: -6px; top: -6px; cursor: nwse-resize; }
.jf-snap-frame-bar {
  position: absolute;
  bottom: -44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(15,23,42,.85);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
  z-index: 10;
}
.jf-snap-frame-bar button {
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.jf-snap-frame-bar button:hover { background: rgba(255,255,255,.15); }
.jf-snap-frame-bar button.primary { background: var(--jf-wrm-accent, var(--jf-wrm-accent)); border-color: var(--jf-wrm-accent, var(--jf-wrm-accent)); }
.jf-snap-frame-bar button.primary:hover { background: var(--jf-wrm-accent2, var(--jf-wrm-accent2)); }

/* ── Prominent Send Invitations button ─────────────────────────── */
.jf-wrm .jf-wrm-btn-send-invites,
.jf-wrm button.jf-wrm-btn-send-invites {
  background: var(--jf-btn-send-bg, linear-gradient(135deg, var(--jf-wrm-accent) 0%, var(--jf-wrm-accent-dark) 100%)) !important;
  color: var(--jf-btn-send-text, #fff) !important;
  border-color: var(--jf-btn-send-bg, var(--jf-wrm-accent-dark)) !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(155,92,112,.35) !important;
  transition: transform .15s, box-shadow .15s !important;
  border-radius: 12px !important;
}
.jf-wrm .jf-wrm-btn-send-invites:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(155,92,112,.45) !important;
}
.jf-wrm .jf-wrm-btn-send-invites:disabled { opacity:.5; cursor:not-allowed; box-shadow:none !important; }

.jf-wrm .jf-btn-thankyou {
  background: var(--jf-btn-thankyou-bg, #e9d5ff) !important;
  color: var(--jf-btn-thankyou-text, #6d28d9) !important;
  border: none !important;
}
.jf-wrm .jf-btn-itinerary {
  background: var(--jf-btn-itinerary-bg, #d1fae5) !important;
  color: var(--jf-btn-itinerary-text, #065f46) !important;
  border: none !important;
}
.jf-wrm .jf-btn-std {
  background: var(--jf-btn-std-bg, #cffafe) !important;
  color: var(--jf-btn-std-text, #0e7490) !important;
  border: none !important;
}

/* ── RSVP Mode setup prompt (Overview — first-time) ── */
.jf-wrm-setup-prompt {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, var(--jf-wrm-bg-tint), #fdf4f8);
  border: 2px solid rgba(var(--jf-wrm-accent-rgb),.45);
  border-radius: 14px;
  margin-bottom: 4px;
}
.jf-wrm-setup-prompt-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1.2;
}
.jf-wrm-setup-prompt-title {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 4px;
  color: #1f2937;
}
.jf-wrm-setup-prompt-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.6;
}
.jf-wrm-mode-tile:hover {
  border-color: rgba(var(--jf-wrm-accent-rgb),.6) !important;
  background: var(--jf-wrm-bg-tint) !important;
}

/* ── Collaborator invitation picker ─────────────────────────── */
#jf-wrm-collab-picker .jf-wrm-top { padding-bottom: 16px; border-bottom: 2px solid var(--jf-wrm-border-soft); margin-bottom: 20px; }
.jf-wrm-collab-picker-list { display: flex; flex-direction: column; gap: 12px; }
.jf-wrm-collab-picker-card {
  display: block; text-decoration: none;
  background: #fff; border: 1.5px solid #f0e0e6; border-radius: 14px;
  padding: 18px 22px; transition: .18s;
}
.jf-wrm-collab-picker-card:hover {
  border-color: var(--jf-wrm-accent); box-shadow: 0 4px 20px rgba(var(--jf-wrm-accent2-rgb),.12);
  transform: translateY(-1px);
}
.jf-wrm-collab-picker-title {
  font-size: 17px; font-weight: 700; color: #111827; margin-bottom: 6px;
}
.jf-wrm-collab-picker-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* Seating event button active state */
.jf-wrm .jf-wrm-btn.ghost.jf-seat-ev.is-active {
  background: rgba(var(--jf-wrm-accent-rgb),.18);
  border-color: rgba(var(--jf-wrm-accent-rgb),.6);
  color: var(--jf-wrm-accent-dark);
  font-weight: 700;
}

/* ===== Custom Info Panes ===== */
.jf-wrm-custom-pane-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--jf-wrm-border);
}
.jf-wrm-custom-pane-icon { font-size: 24px; line-height: 1; }
.jf-wrm-custom-pane-body {
  font-size: 15px; line-height: 1.7; color: var(--jf-wrm-text);
  margin-bottom: 20px;
}
.jf-wrm-custom-pane-body p { margin: 0 0 12px; }
.jf-wrm-custom-pane-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px; margin-top: 16px;
}
.jf-wrm-cpane-figure {
  margin: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--jf-wrm-border); background: #fff;
}
.jf-wrm-cpane-figure img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
}
.jf-wrm-cpane-figure figcaption {
  padding: 6px 10px; font-size: 12px; color: var(--jf-wrm-muted); line-height: 1.3;
}

/* ===== Custom Pane Block Renderer ===== */
/* Text */
.jf-cpb-text { font-size:15px; line-height:1.7; color:var(--jf-wrm-text); }
.jf-cpb-text p { margin:0 0 12px; }
.jf-cpb-text p:last-child { margin-bottom:0; }
.jf-cpb-text ul,.jf-cpb-text ol { margin:0 0 12px 20px; }
.jf-cpb-text a { color:var(--jf-wrm-accent); }

/* Headings */
.jf-cpb-heading { color:var(--jf-wrm-text); margin:0 0 12px; font-weight:800; }
h2.jf-cpb-heading { font-size:22px; }
h3.jf-cpb-heading { font-size:17px; }
h4.jf-cpb-heading { font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--jf-wrm-muted); }

/* Image */
.jf-cpb-image { margin:0 0 16px; }
.jf-cpb-image img { max-width:100%; border-radius:10px; display:block; }
.jf-cpb-image figcaption { font-size:12px; color:var(--jf-wrm-muted); margin-top:6px; }
.jf-cpb-align-center { text-align:center; }
.jf-cpb-align-center img { margin:0 auto; }
.jf-cpb-align-right { text-align:right; }
.jf-cpb-align-right img { margin-left:auto; }
.jf-cpb-align-full img { width:100%; }

/* Gallery */
.jf-cpb-gallery { display:grid; gap:10px; margin-bottom:16px; }
.jf-cpb-gallery-2col { grid-template-columns:repeat(2,1fr); }
.jf-cpb-gallery-3col { grid-template-columns:repeat(3,1fr); }
.jf-cpb-gallery-4col { grid-template-columns:repeat(4,1fr); }
.jf-cpb-gallery figure { margin:0; border-radius:10px; overflow:hidden; border:1px solid var(--jf-wrm-border); }
.jf-cpb-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.jf-cpb-gallery figcaption { padding:5px 8px; font-size:11px; color:var(--jf-wrm-muted); }

/* Columns */
.jf-cpb-columns { display:grid; gap:20px; margin-bottom:16px; }
.jf-cpb-cols-2 { grid-template-columns:repeat(2,1fr); }
.jf-cpb-cols-3 { grid-template-columns:repeat(3,1fr); }
.jf-cpb-col { min-width:0; }

/* Accordion */
.jf-cpb-accordion { margin-bottom:16px; }
.jf-cpb-acc-item { border:1px solid var(--jf-wrm-border); border-radius:10px; overflow:hidden; margin-bottom:6px; }
.jf-cpb-acc-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:rgba(var(--jf-wrm-accent-rgb),.06); border:0; padding:11px 14px;
  cursor:pointer; font-weight:700; font-size:14px; color:var(--jf-wrm-text);
  transition:background .15s;
}
.jf-cpb-acc-trigger:hover { background:rgba(var(--jf-wrm-accent-rgb),.12); }
.jf-cpb-acc-arrow { font-size:10px; color:var(--jf-wrm-muted); }
.jf-cpb-acc-body { padding:12px 14px; font-size:14px; line-height:1.6; background:#fff; }

/* Tabs */
.jf-cpb-tabs { margin-bottom:16px; }
.jf-cpb-tab-nav { display:flex; gap:4px; border-bottom:2px solid var(--jf-wrm-border); margin-bottom:12px; flex-wrap:wrap; }
.jf-cpb-tab-btn {
  border:0; background:transparent; padding:8px 14px; font-size:13px; font-weight:600;
  cursor:pointer; color:var(--jf-wrm-muted); border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:color .15s, border-color .15s;
}
.jf-cpb-tab-btn:hover { color:var(--jf-wrm-accent); }
.jf-cpb-tab-btn.is-active { color:var(--jf-wrm-accent); border-bottom-color:var(--jf-wrm-accent); }
.jf-cpb-tab-panel { display:none; font-size:14px; line-height:1.7; }
.jf-cpb-tab-panel.is-active { display:block; }

/* Info Box */
.jf-cpb-infobox { border-radius:10px; padding:14px 16px; margin-bottom:16px; border-left:4px solid; }
.jf-cpb-infobox-info { background:#eff6ff; border-color:#3b82f6; color:#1e40af; }
.jf-cpb-infobox-success { background:#f0fdf4; border-color:#22c55e; color:#166534; }
.jf-cpb-infobox-warning { background:#fffbeb; border-color:#f59e0b; color:#92400e; }
.jf-cpb-infobox-error { background:#fef2f2; border-color:#ef4444; color:#991b1b; }
.jf-cpb-infobox-neutral { background:#f9fafb; border-color:#9ca3af; color:#374151; }
.jf-cpb-infobox-title { font-weight:700; font-size:14px; margin-bottom:6px; }
.jf-cpb-infobox-body { font-size:13px; line-height:1.6; }

/* Divider */
.jf-cpb-divider hr { border:0; border-top:1px solid var(--jf-wrm-border); }
.jf-cpb-divider-sm { margin:8px 0; }
.jf-cpb-divider-md { margin:16px 0; }
.jf-cpb-divider-lg { margin:28px 0; }
.jf-cpb-divider-xl { margin:44px 0; }

/* Button */
.jf-cpb-btn-wrap { margin-bottom:14px; }
.jf-cpb-btn { display:inline-block; padding:9px 20px; border-radius:999px; font-size:13px; font-weight:700; text-decoration:none; transition:.15s; }
.jf-cpb-btn-primary { background:var(--jf-wrm-accent); color:#fff; border:1.5px solid var(--jf-wrm-accent); }
.jf-cpb-btn-primary:hover { background:var(--jf-wrm-accent-dark); border-color:var(--jf-wrm-accent-dark); }
.jf-cpb-btn-secondary { background:transparent; color:var(--jf-wrm-accent); border:1.5px solid var(--jf-wrm-accent); }
.jf-cpb-btn-ghost { background:transparent; color:var(--jf-wrm-accent2); border:1.5px solid var(--jf-wrm-border); }

/* Table */
.jf-cpb-table-wrap { overflow-x:auto; margin-bottom:16px; }
.jf-cpb-table { width:100%; border-collapse:collapse; font-size:13px; }
.jf-cpb-table th { background:rgba(var(--jf-wrm-accent-rgb),.07); color:var(--jf-wrm-accent-dark); font-weight:700; padding:8px 12px; border:1px solid var(--jf-wrm-border); text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.jf-cpb-table td { padding:8px 12px; border:1px solid var(--jf-wrm-border); color:var(--jf-wrm-text); }
.jf-cpb-table tr:nth-child(even) td { background:#fafafa; }

/* Responsive */
@media (max-width:600px) {
  .jf-cpb-columns { grid-template-columns:1fr !important; }
  .jf-cpb-gallery-3col,.jf-cpb-gallery-4col { grid-template-columns:repeat(2,1fr); }
}

/* Menu Selector block */
.jf-cpb-menu-selector { background:var(--jf-wrm-card); border:1px solid var(--jf-wrm-border-soft); border-radius:14px; padding:20px; margin-bottom:16px; }
.jf-cpb-menu-title { font-size:17px; font-weight:800; color:var(--jf-wrm-text); margin:0 0 16px; }
.jf-cpb-menu-course { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--jf-wrm-border); }
.jf-cpb-menu-course:last-of-type { border-bottom:0; margin-bottom:12px; }
.jf-cpb-menu-course-name { font-size:13px; font-weight:700; color:var(--jf-wrm-accent); margin-bottom:10px; text-transform:uppercase; letter-spacing:.04em; }
.jf-cpb-menu-radio-label { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--jf-wrm-border); border-radius:10px; cursor:pointer; margin-bottom:6px; font-size:14px; transition:background .1s, border-color .1s; }
.jf-cpb-menu-radio-label:hover { background:rgba(var(--jf-wrm-accent-rgb),.05); border-color:rgba(var(--jf-wrm-accent-rgb),.3); }
.jf-cpb-menu-radio-label input[type="radio"] { accent-color:var(--jf-wrm-accent); width:16px; height:16px; flex-shrink:0; }
.jf-cpb-menu-select { width:100%; margin-top:4px; }
.jf-cpb-menu-save { margin-top:14px; width:100%; }
.jf-cpb-menu-status { font-size:13px; margin-top:8px; min-height:18px; text-align:center; }

/* Menu block preview (in admin builder + admin pane) */
.jf-cpb-menu { padding:12px; background:rgba(var(--jf-wrm-accent-rgb),.04); border:1px solid rgba(var(--jf-wrm-accent-rgb),.18); border-radius:10px; }
.jf-cpb-menu-title { font-size:15px; font-weight:700; margin-bottom:10px; }
.jf-cpb-menu-course { margin-bottom:10px; }
.jf-cpb-menu-course-name { font-size:12px; font-weight:700; color:var(--jf-wrm-accent); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.jf-cpb-menu-options { display:flex; flex-wrap:wrap; gap:5px; }
.jf-cpb-menu-opt { background:rgba(var(--jf-wrm-accent-rgb),.08); border:1px solid rgba(var(--jf-wrm-accent-rgb),.2); border-radius:999px; padding:2px 10px; font-size:11px; color:var(--jf-wrm-accent); }

/* Guest Field block */
.jf-cpb-field { margin-bottom:16px; }

/* ── Wedding OS frontend layout ─────────────────────────────────── */
.jf-wrm-os { display: flex; flex-direction: column; width: 100vw; box-sizing: border-box; overflow: hidden; position: relative;
  height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; }
.jf-wrm-os-layout { display: flex; gap: 0; position: relative; width: 100vw; box-sizing: border-box;
  overflow: hidden; flex: 1; min-height: 0; }
/* Sidebar: sticky so it stays visible while right pane scrolls */
.jf-wrm-os-sidebar { flex: 0 0 220px; width: 220px; min-width: 220px; flex-shrink: 0; align-self: stretch; border-right: 1px solid var(--jf-wrm-border-soft); display: flex; flex-direction: column; transition: width .22s ease, flex-basis .22s ease, opacity .22s ease; overflow: hidden; position: static; height: 100%; max-height: none; padding-right: 0; }
.jf-wrm-os-sidebar.is-collapsed { flex: 0 0 0px; width: 0; min-width: 0; border-right-width: 0; opacity: 0; pointer-events: none; }
.jf-wrm-os-sidebar-posts { padding: 0; border-bottom: 1px solid var(--jf-wrm-border-soft); display: flex; flex-direction: column; max-height: 340px; flex-shrink: 0; }
.jf-wrm-os-sidebar-posts-scroll { overflow-y: auto; flex: 1; padding: 0 10px 8px; overscroll-behavior: contain; }
.jf-wrm-os-sidebar-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--jf-wrm-muted); margin-bottom: 6px; flex-shrink: 0; padding: 10px 14px 0; }
/* Gap / divider between invitation list and nav section */
.jf-wrm-os-nav { margin-top: 8px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; }
/* Sticky search inside invitations panel */
.jf-wrm-posts-search-wrap { position: sticky; top: 0; z-index: 2; background: var(--jf-wrm-card); padding: 8px 10px 6px; border-bottom: 1px solid var(--jf-wrm-border-soft); margin-bottom: 6px; }
.jf-wrm-posts-search-wrap .jf-wrm-input { font-size: 12px; padding: 6px 9px; }
.jf-wrm-os-main { flex: 1; min-width: 0; min-height: 0; height: 100%; box-sizing: border-box; padding: 20px 24px; overflow-y: auto; scroll-behavior: smooth; overscroll-behavior: contain; }
/* Desktop collapse toggle */
.jf-wrm-os-sidebar-toggle { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 220px; transform: translateY(-50%); width: 18px; height: 40px; background: var(--jf-wrm-card); border: 1px solid var(--jf-wrm-border-soft); border-left: none; border-radius: 0 6px 6px 0; cursor: pointer; z-index: 10; transition: left .22s ease; font-size: 10px; color: var(--jf-wrm-muted); }
.jf-wrm-os-layout { position: relative; }
.jf-wrm-os-sidebar.is-collapsed ~ .jf-wrm-os-sidebar-toggle,
.jf-wrm-os-layout.sidebar-collapsed .jf-wrm-os-sidebar-toggle { left: 0; }

.jf-wrm-os-nav { display: flex; flex-direction: column; gap: 1px; padding: 8px 8px; }
.jf-wrm-os-nav .jf-wrm-nav-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 0; background: transparent; font-size: 13px; font-weight: 600; color: var(--jf-wrm-muted); cursor: pointer; text-align: left; transition: background .12s, color .12s; width: 100%; }
.jf-wrm-os-nav .jf-wrm-nav-btn:hover { background: rgba(var(--jf-wrm-accent-rgb),.07); color: var(--jf-wrm-text); }
.jf-wrm-os-nav .jf-wrm-nav-btn.is-active { background: rgba(var(--jf-wrm-accent-rgb),.12); color: var(--jf-wrm-accent); }
.jf-nav-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }

/* ── Module header + sub-nav ──────────────────────────────────────── */
.jf-wrm-module-header { margin-bottom: 0; }
.jf-wrm-module-header .jf-wrm-h3 { margin-bottom: 10px; }

/* Re-use the same .jf-sub-nav rules from admin.css — define here too for frontend */
.jf-wrm .jf-sub-nav { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--jf-wrm-border-soft); margin-bottom: 18px; width: 100%; }
.jf-wrm .jf-sub-nav-btn { flex: 1; text-align: center; background: transparent; border: 0; border-bottom: 2.5px solid transparent; margin-bottom: -2px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--jf-wrm-muted); cursor: pointer; border-radius: 4px 4px 0 0; transition: color .12s, border-color .12s; white-space: nowrap; }
.jf-wrm .jf-sub-nav-btn:hover { color: var(--jf-wrm-text); }
.jf-wrm .jf-sub-nav-btn.is-active { color: var(--jf-wrm-accent); border-bottom-color: var(--jf-wrm-accent); }
.jf-wrm .jf-sub-pane { display: none; width: 100%; box-sizing: border-box; }
.jf-wrm .jf-sub-pane.is-active { display: block; width: 100%; box-sizing: border-box; }

/* ── OS Mobile topbar (hidden on desktop, shown on mobile) ── */
.jf-wrm-os-mobile-topbar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
  background: var(--jf-wrm-card);
  border: 1px solid var(--jf-wrm-border-soft);
  border-radius: 999px;
  box-shadow: 0 3px 14px rgba(0,0,0,.10);
  position: sticky;
  top: 8px;
  z-index: 90;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0;
}
.jf-wrm-os-mobile-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--jf-wrm-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jf-wrm-os-mobile-active-tab {
  font-size: 12px;
  font-weight: 700;
  color: var(--jf-wrm-accent);
  white-space: nowrap;
  padding-right: 6px;
}

/* ── OS Hamburger ── */
.jf-wrm-os-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 30px;
  height: 30px;
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.jf-wrm-os-hamburger span {
  display: block;
  height: 2px;
  background: var(--jf-wrm-text);
  border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease, width .22s ease;
  transform-origin: center;
}
.jf-wrm-os-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jf-wrm-os-hamburger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.jf-wrm-os-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── OS Sidebar header (close button row, hidden on desktop) ── */
.jf-wrm-os-sidebar-header {
  display: flex;
  justify-content: flex-end;
  padding: 6px 10px 4px;
  align-items: center;
}
.jf-wrm-os-sidebar-close {
  width: 34px;
  height: 34px;
  background: rgba(var(--jf-wrm-accent-rgb), .08);
  border: 1px solid var(--jf-wrm-border);
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  color: var(--jf-wrm-muted);
  cursor: pointer;
  display: none; /* hidden on desktop, shown on mobile */
  align-items: center;
  justify-content: center;
}
.jf-wrm-os-sidebar-toggle-desktop { display: none; }
/* Collapse: a thin clickable edge stripe on the sidebar's right border */
.jf-wrm-os-collapse-btn {
  position: absolute;
  top: 0;
  left: 219px;
  width: 6px;
  height: 100%;
  background: transparent;
  border: none;
  cursor: col-resize;
  z-index: 20;
  transition: left .22s ease, background .15s;
  padding: 0;
}
.jf-wrm-os-collapse-btn:hover { background: rgba(var(--jf-wrm-accent-rgb),.18); }
.jf-wrm-os-collapse-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 1px;
  transform: translateY(-50%);
  width: 3px;
  height: 32px;
  background: rgba(var(--jf-wrm-accent-rgb),.25);
  border-radius: 2px;
  transition: background .15s;
}
.jf-wrm-os-collapse-btn:hover::after { background: rgba(var(--jf-wrm-accent-rgb),.6); }
.sidebar-collapsed .jf-wrm-os-collapse-btn { left: 0; width: 8px; }
.sidebar-collapsed .jf-wrm-os-collapse-btn::after { background: rgba(var(--jf-wrm-accent-rgb),.4); }

/* ── OS Sidebar overlay ── */
.jf-wrm-os-portal { position: static; width: 0; height: 0; }
.jf-wrm-os-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 99; /* below sidebar */
  opacity: 0;
  transition: opacity .25s ease;
}
.jf-wrm-os-sidebar-overlay.is-visible {
  display: block;
  opacity: 1;
}

@media (max-width: 680px) {
  /* Mobile: off-canvas drawer instead of a long stacked nav list.
     The drawer markup + JS already exist (hamburger, overlay, close);
     this query turns them on and makes the main pane fill the screen. */

  /* Stop any horizontal overflow at the root of the dashboard.
     The base styles use width:100vw which overflows past container padding
     and the scrollbar; clamp to 100% on mobile. */
  .jf-wrm-os { max-width: 100%; width: 100%; overflow-x: hidden; box-sizing: border-box; }
  .jf-wrm-os * { box-sizing: border-box; }
  .jf-wrm-os-layout { width: 100%; max-width: 100%; }

  /* Show the mobile chrome */
  .jf-wrm-os-mobile-topbar { display: inline-flex; }
  .jf-wrm-os-sidebar-header { display: flex; }
  .jf-wrm-os-sidebar-close { display: flex; }

  /* Hide desktop-only collapse affordances */
  .jf-wrm-os-sidebar-toggle-desktop { display: none; }
  .jf-wrm-os-collapse-btn { display: none !important; }
  .jf-wrm-os-mobile-edge-strip { display: none !important; }

  /* Layout fills the viewport */
  .jf-wrm-os-layout {
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-height: 70vh;
    position: relative;
  }

  /* Sidebar becomes an off-canvas drawer sliding in from the left.
     z-index sits above typical theme sticky headers so it is never
     hidden beneath the site nav/buttons. Right corners rounded. */
  .jf-wrm-os-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80vw;
    max-width: 300px;
    min-width: 0;
    flex: none;
    height: 100%;
    max-height: 100%;
    background: var(--jf-wrm-card);
    border: none;
    border-radius: 0 16px 16px 0;
    box-shadow: 4px 0 32px rgba(0,0,0,.28);
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 2147483646;
    opacity: 1;
    pointer-events: auto;
  }
  .jf-wrm-os-sidebar.is-open { transform: translateX(0); }

  /* Overlay sits just below the drawer but above everything else */
  .jf-wrm-os-sidebar-overlay { display: none; z-index: 2147483645; }
  .jf-wrm-os-sidebar-overlay.is-visible { display: block; }

  /* Drawer header: close button aligned right with a little breathing room */
  .jf-wrm-os-sidebar-header {
    justify-content: flex-end;
    padding: 12px 12px 4px;
  }

  /* Drawer nav: comfortable vertical tap targets */
  .jf-wrm-os-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 8px 10px 16px;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
  }
  .jf-wrm-os-nav .jf-wrm-nav-btn {
    flex: none;
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    padding: 13px 14px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* Posts list inside the drawer keeps a sensible cap */
  .jf-wrm-os-sidebar-posts { max-height: 34vh; }

  /* Two-column comms panes (Broadcast recipients|compose, Email templates
     list|editor) collapse to one column so the right pane isn't cut off.
     Inline grid styles need !important to override. */
  .jf-fe-2col { grid-template-columns: 1fr !important; }

  /* Main pane fills the screen; never sits under the drawer (drawer is fixed) */
  .jf-wrm-os-main {
    padding: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* ── Frontend Feature Gate Overlay ──────────────────────────────────────── */
/* Applied by feGateEl() in frontend.js.                                     */
/* Underlay: very lightly blurred so content is clearly previewa ble.         */
/* Overlay: pill by default, expands to card on click. Minimizable.          */

.fe-gate-inner {
  filter: none;
  pointer-events: none;
  user-select: none;
  min-height: 120px;
}

/* Allow sub-nav tab buttons to remain clickable so users can browse gated sections */
.fe-gate-inner .jf-sub-nav,
.fe-gate-inner .jf-sub-nav-btn,
.fe-gate-inner .jf-wrm-nav-btn {
  pointer-events: all;
  cursor: pointer;
}

.fe-gate-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  max-width: 300px;
}

/* ── Expanded card ── */
.fe-gate-card {
  pointer-events: all;
  background: linear-gradient(145deg, rgba(22, 8, 16, .93) 0%, rgb(201 167 76) 100%);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  padding: 16px 18px;
  color: #f0e4ef;
  box-shadow: 0 8px 36px rgba(0,0,0,.5);
  width: 300px;
  text-align: left;
}

.fe-gate-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.fe-gate-icon { font-size: 24px; display: none; margin-bottom: 0; }

.fe-gate-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 2px 0 3px;
}

.fe-gate-desc {
  font-size: 11px;
  opacity: .75;
  margin: 0;
  line-height: 1.4;
}

.fe-gate-collapse-btn {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 6px !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 10px !important;
  font-weight: normal !important;
  padding: 3px 7px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
  display: inline-block !important;
}
.fe-gate-collapse-btn:hover {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

.fe-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.fe-gate-buy {
  display: block !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
}

.fe-gate-buy-addon {
  background: #c084fc !important;
  border-color: #a855f7 !important;
  color: #fff !important;
}

.fe-gate-buy-premium {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
}

.fe-gate-footnote {
  font-size: 10px;
  opacity: .55;
  margin: 2px 0 0;
  text-align: center;
}

/* ── Minimised pill — default state ── */
.fe-gate-pill {
  pointer-events: all;
  display: flex; /* default: pill shown, card hidden */
  align-items: center;
  gap: 6px;
  background: linear-gradient(145deg, rgba(22, 8, 16, .93) 0%, rgb(201 167 76) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  padding: 5px 10px 5px 8px;
  cursor: pointer;
  color: #f0e4ef;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  max-width: 220px;
}
.fe-gate-pill:hover { linear-gradient(105deg, rgba(22, 8, 16, .93) 0%, rgb(201 167 76) 100%); }
.fe-gate-pill-icon  { font-size: 14px; flex-shrink: 0; }
.fe-gate-pill-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; }
.fe-gate-expand-btn {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,.8) !important;
  font-size: 9px !important;
  padding: 2px 6px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
}

/* Lock badge on nav buttons */
.fe-lock-badge {
  font-size: 11px;
  opacity: .65;
  pointer-events: none;
}

/* Containers with gates need relative positioning (set by JS) */
/* Make sure panes don't clip the overlay */
.jf-wrm-pane,
.jf-sub-pane {
  position: relative;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  align-self: flex-start;
}

@media (max-width: 600px) {
  .fe-gate-overlay {
    top: 8px;
    right: 8px;
    max-width: calc(100vw - 32px);
  }
  .fe-gate-card {
    width: min(280px, calc(100vw - 32px));
    padding: 13px 14px;
  }
}

/* Guest search + filter bar */
.jf-wrm-guest-filterbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0 10px; }
.jf-wrm-tag-filter-pill{
  display:inline-flex; align-items:center; padding:4px 12px; border-radius:999px;
  font-size:12px; font-weight:600; cursor:pointer; border:1.5px solid #e5e7eb;
  background:#fff; color:#6b7280; transition:all .15s;
}
.jf-wrm-tag-filter-pill.active{ border-color:var(--jf-wrm-accent,#a77a92); background:rgba(167,122,146,.08); color:#7c4a66; }
/* Guest card hover-expand */
.jf-wrm-guestcard-main .jf-wrm-mini,
.jf-wrm-guestcard-main .jf-wrm-role-row,
.jf-wrm-guestcard-main .jf-wrm-row-actions{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .22s ease, opacity .18s ease;
}
.jf-wrm-guestcard-main:hover .jf-wrm-mini,
.jf-wrm-guestcard-main:hover .jf-wrm-role-row,
.jf-wrm-guestcard-main:hover .jf-wrm-row-actions,
.jf-wrm-guestcard-main:focus-within .jf-wrm-mini,
.jf-wrm-guestcard-main:focus-within .jf-wrm-role-row,
.jf-wrm-guestcard-main:focus-within .jf-wrm-row-actions{
  max-height:300px; opacity:1;
}
/* Role adder dropdown must escape overflow:hidden clipping */
.jf-wrm-role-adder { position: relative; overflow: visible !important; }
.jf-wrm-role-adder-panel { overflow: visible !important; z-index: 9999 !important; }

/* Ensure the role-row and card don't clip the open dropdown */
.jf-wrm-guestcard-main:hover .jf-wrm-role-row,
.jf-wrm-guestcard-main:focus-within .jf-wrm-role-row { overflow: visible !important; }

/* JS adds .role-adder-open to .jf-wrm-role-row when panel is open */
.jf-wrm-role-row.role-adder-open {
  overflow: visible !important;
  max-height: 9999px !important;
}
.jf-wrm-guestcard-main:has(.jf-wrm-role-adder-panel[style*="flex"]) .jf-wrm-role-row {
  overflow: visible !important;
  max-height: 9999px !important;
}

/* ── Vendor Planning two-section nav ─────────────────────────── */
.jf-wrm .jf-vp-section-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--jf-wrm-border-soft);
  margin: 8px 0 0;
  width: 100%;
}
.jf-wrm .jf-vp-section-btn {
  background: transparent;
  border: 0;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--jf-wrm-muted);
  cursor: pointer;
  transition: color .12s, border-color .12s;
  white-space: nowrap;
  border-radius: 4px 4px 0 0;
}
.jf-wrm .jf-vp-section-btn:hover { color: var(--jf-wrm-text); }
.jf-wrm .jf-vp-section-btn.is-active {
  color: var(--jf-wrm-accent);
  border-bottom-color: var(--jf-wrm-accent);
  font-weight: 700;
}
/* tighten module-header when section nav is present */
.jf-wrm .jf-wrm-module-header + .jf-vp-section { margin-top: 0; }

/* ── ACF Additional Fields (collapsible group) ──────────────────────── */
/* In-place additional-fields toggle button — no elements moved, ACF order preserved */
.jwf-additional-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  padding: 10px 14px;
  margin: 10px 0 6px;
  border: 1.5px dashed #d1d5db;
  border-radius: 8px;
  background: #fafafa;
  width: 100%;
  text-align: left;
  transition: border-color .15s, background .15s, color .15s;
}
.jwf-additional-toggle-btn:hover {
  border-color: #9ca3af;
  background: #f3f4f6;
  color: #374151;
}
.jwf-additional-toggle-btn[aria-expanded="true"] {
  border-color: #a77a92;
  color: #a77a92;
  background: #fdf4f8;
}
/* Legacy — keep for backwards compat with any custom CSS referencing old classes */
.jwf-additional-fields-toggle { display: none; }
.jwf-additional-fields-wrap   { display: block; }

/* ── OS scroll: compensate for WP admin bar ──────────────────────────────── */
.admin-bar .jf-wrm-os { height: calc(100vh - 32px); height: calc(100dvh - 32px); }
@media (max-width: 782px) {
  .admin-bar .jf-wrm-os { height: calc(100vh - 46px); height: calc(100dvh - 46px); }
}

/* Guest table: natural horizontal scroll within the main vertical scroll */
.jf-wrm .jf-wrm-tablewrap { overflow-x: auto; overflow-y: visible; max-height: none; }

/* Sub-panels with their own content (matrix, settings tabs, etc.) should not
   create a second scroll container — let the main area handle vertical scroll */
.jf-wrm-pane, .jf-sub-pane { overflow: visible; }

/* Sidebar nav: scroll if it overflows its height */
.jf-wrm-os-sidebar { overflow-y: auto; }
.jf-wrm-os-sidebar-posts { max-height: 340px; overflow: hidden; }


/* ── Boarding pass preview in send modal ─────────────────────────── */
@keyframes jwf-spin {
  to { transform: rotate(360deg); }
}

/* Prevent the scaled-down boarding pass from overflowing its container */
#jf-bp-preview-inner .wrm-bp-wrap {
  padding: 0 !important;
  gap: 0 !important;
}

#jf-bp-preview-content {
  width: 100%;
  overflow: hidden;
}

/* ── ACF image field — Edit Image / Choose Image buttons ──────────
   Buttons sit in normal flow BELOW the image preview (not overlaid),
   so they never cover the image or any caption/label text under it.
   Always visible — no hover-to-reveal. */
.acf-image-uploader { position: relative; }

/* Push the preview image clear of the action buttons. Targets the actual
   ACF preview wrappers so the gap holds regardless of margin collapsing. */
.acf-image-uploader .image-wrap,
.acf-image-uploader .acf-image-image,
.acf-image-uploader > .show-if-value {
  margin-bottom: 16px;
}

.jf-acf-img-actions {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px !important;
  width: 100%;
  box-sizing: border-box;
}

.jf-acf-img-btn {
  flex: 0 1 140px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: 1.2 !important;
  cursor: pointer;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  transition: all 0.15s;
  white-space: nowrap;
  box-shadow: none !important;
}

.jf-acf-img-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

.jf-acf-img-edit {
  background: rgba(0,0,0,.08) !important;
  color: #3A2E22 !important;
}
.jf-acf-img-edit:hover { background: rgba(0,0,0,.14) !important; }

.jf-acf-img-change {
  background: #C9A84C !important;
  color: #1a1a1a !important;
}
.jf-acf-img-change:hover { background: #e8c97a !important; }

/* ── Tab preloader (dashboard/RSVP tabs) ──────────────────────────────
   Full-container overlay shown while a tab's data loads, covering the
   sidebar nav and sub-tabs as well as the content pane — appended inside
   the dashboard root (#jf-wrm-couple), not the pane being loaded, so it
   can't be wiped out by that pane's own render call replacing its
   innerHTML. Absolutely positioned against that root (JS makes it
   position:relative if it isn't already) rather than fixed to the
   viewport, so it stays scoped to the dashboard's own footprint. Colors
   and typography come from admin settings via CSS custom properties
   (see WRM_Tab_Preloader / jfTabPreloader). */
.jf-tab-preloader {
  position: absolute;
  inset: 0;
  z-index: 999990;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--jf-tp-bg, #2B1A12);
  border-radius: var(--jf-tp-radius, 0px);
  overflow: hidden;
  opacity: 0;
  transition: opacity .25s ease;
}
.jf-tab-preloader.jf-tp-visible { opacity: 1; }
.jf-tab-preloader-glow {
  position: absolute;
  /* Center of the glow follows the pointer — JS updates these two custom
     properties on mousemove while the overlay is visible. Defaults land
     roughly where the old fixed bottom-left position was, so it looks
     right before the first pointer move. */
  left: var(--jf-tp-glow-x, 10%);
  top: var(--jf-tp-glow-y, 85%);
  width: 46vw;
  height: 46vw;
  max-width: 560px;
  max-height: 560px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--jf-tp-accent, #C9793F) 0%, transparent 72%);
  opacity: .55;
  filter: blur(2px);
  pointer-events: none;
  transition: left .25s ease-out, top .25s ease-out;
}
.jf-tab-preloader-dot {
  position: absolute;
  right: 6vw;
  bottom: 6vh;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jf-tp-text, #E9E0D6);
  opacity: .5;
}
.jf-tab-preloader-icon {
  position: relative;
  width: var(--jf-tp-icon-size, 40px);
  height: var(--jf-tp-icon-size, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--jf-tp-icon-radius, 8px);
  font-size: 26px;
  line-height: 1;
  opacity: .9;
  animation: jf-tp-breathe 2.2s ease-in-out infinite;
}
.jf-tab-preloader-icon img { width: 100%; height: 100%; object-fit: cover; }
.jf-tab-preloader-text {
  position: relative;
  min-height: 1.4em;
  font-family: var(--jf-tp-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: var(--jf-tp-font-size, clamp(22px, 3.4vw, 36px));
  font-weight: var(--jf-tp-font-weight, 300);
  letter-spacing: var(--jf-tp-letter-spacing, .06em);
  color: var(--jf-tp-text, #E9E0D6);
  text-align: center;
  padding: 0 24px;
}
.jf-tab-preloader-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px) scale(.97);
  animation: jf-tp-pop-in .42s cubic-bezier(.34,1.56,.64,1) forwards;
}
.jf-tab-preloader-text span.jf-tp-out {
  animation: jf-tp-pop-out .3s ease-in forwards;
}
@keyframes jf-tp-pop-in {
  0%   { opacity: 0; transform: translateY(8px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes jf-tp-pop-out {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(.97); }
}
@keyframes jf-tp-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .jf-tab-preloader { transition: none; }
  .jf-tab-preloader-icon { animation: none; }
  .jf-tab-preloader-text span { animation: none; opacity: 1; transform: none; }
}