/* MASPIK subscriber dashboard - entirely our own controls.
   No ACF or Frontend Admin classes are styled here; those assets are dequeued
   in inc/dashboard-fields.php. Depends on tokens.css. */

#mspk .mspk-dash{max-width:1040px;padding-top:clamp(20px,3vw,40px);}

/* ---------- header ---------- */
#mspk .mspk-dash__head{padding-bottom:24px;}
#mspk .mspk-dash__title{
  font-family:var(--mspk-hd);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(27px,3.3vw,38px);line-height:1.12;color:var(--mspk-ink);
}
#mspk .mspk-dash__sub{margin-top:8px;font-size:15px;color:var(--mspk-muted);}
#mspk .mspk-dash__id{
  margin-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--mspk-line);border-radius:13px;padding:13px 18px;
}
#mspk .mspk-dash__idlabel{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mspk-muted);}
#mspk .mspk-dash__id code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;font-weight:700;
  background:var(--mspk-cream);padding:5px 12px;border-radius:8px;color:var(--mspk-green);
}
#mspk .mspk-copyid{
  background:var(--mspk-green);color:#fff;border:0;border-radius:8px;padding:7px 14px;
  font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--mspk-bd);
}
#mspk .mspk-copyid:hover{background:var(--mspk-green-lt);}
#mspk .mspk-dash__help{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--mspk-orange-dk);text-decoration:none;}
#mspk .mspk-dash__help:hover{text-decoration:underline;text-underline-offset:3px;}
#mspk .mspk-dash__switch{margin-top:14px;display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:13.5px;color:var(--mspk-muted);}
#mspk .mspk-dash__switch a{
  background:#fff;border:1px solid var(--mspk-line);border-radius:999px;padding:6px 14px;
  color:var(--mspk-ink);text-decoration:none;font-weight:600;
}
#mspk .mspk-dash__switch a:hover{border-color:var(--mspk-orange);color:var(--mspk-orange-dk);}

#mspk .mspk-notice{
  display:flex;align-items:center;gap:9px;margin-bottom:20px;padding:14px 18px;
  border-radius:12px;font-size:14.5px;font-weight:600;
}
#mspk .mspk-notice--ok{background:#E4F0E8;color:var(--mspk-green);border:1px solid #BFDCC9;}

/* ---------- tabs ---------- */
#mspk .mspk-tabs{background:#fff;border:1px solid var(--mspk-line);border-radius:20px;overflow:hidden;box-shadow:var(--mspk-shadow);}
#mspk .mspk-tabs__list{
  display:flex;gap:2px;overflow-x:auto;padding:8px 8px 0;
  background:var(--mspk-cream-lt);border-bottom:1px solid var(--mspk-line);
}
#mspk .mspk-tabs__btn{
  flex:0 0 auto;background:none;border:0;cursor:pointer;font-family:var(--mspk-bd);
  padding:12px 18px;border-radius:10px 10px 0 0;font-size:14.5px;font-weight:600;
  color:var(--mspk-muted);border-bottom:3px solid transparent;white-space:nowrap;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
#mspk .mspk-tabs__btn:hover{color:var(--mspk-ink);background:rgba(255,255,255,.7);}
#mspk .mspk-tabs__btn[aria-selected="true"]{
  color:var(--mspk-green);background:#fff;border-bottom-color:var(--mspk-orange);
}
#mspk .mspk-tabs__btn:focus-visible{outline:2px solid var(--mspk-orange);outline-offset:-3px;}

#mspk .mspk-panel{padding:clamp(20px,3vw,32px);}
#mspk .mspk-panel__blurb{font-size:14.5px;color:var(--mspk-muted);margin-bottom:22px;}
#mspk .mspk-panel__fields{display:grid;gap:18px;}

/* ---------- controls ---------- */
#mspk .mspk-ctl{display:flex;flex-direction:column;gap:7px;}
#mspk .mspk-ctl__label{font-family:var(--mspk-hd);font-size:15px;color:var(--mspk-ink);line-height:1.3;}
#mspk .mspk-ctl__hint{font-size:13px;color:var(--mspk-muted);line-height:1.55;margin:0;}
#mspk .mspk-ctl__count{font-size:12px;color:var(--mspk-muted);margin:0;text-align:right;}

#mspk .mspk-ctl input[type="text"],
#mspk .mspk-ctl input[type="number"],
#mspk .mspk-ctl textarea{
  width:100%;border:1px solid var(--mspk-line);border-radius:11px;
  padding:12px 14px;font:inherit;font-size:15px;color:var(--mspk-ink);background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
#mspk .mspk-ctl textarea{
  min-height:130px;line-height:1.55;resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
}
#mspk .mspk-ctl input:focus,#mspk .mspk-ctl textarea:focus{
  outline:0;border-color:var(--mspk-orange);box-shadow:0 0 0 3px rgba(244,135,34,.18);
}
#mspk .mspk-ctl--number input{max-width:220px;}

/* number + short text sit two per row when there is space */
@media (min-width:760px){
  #mspk .mspk-panel__fields{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
  #mspk .mspk-ctl--textarea,
  #mspk .mspk-ctl--select,
  #mspk .mspk-ctl--radio,
  #mspk .mspk-ctl--switch{grid-column:1 / -1;}
}

/* ---------- switch row ---------- */
#mspk .mspk-ctl--switch{
  flex-direction:row;align-items:center;justify-content:space-between;gap:20px;
  background:var(--mspk-cream-lt);border:1px solid var(--mspk-line);
  border-radius:13px;padding:16px 18px;
}
#mspk .mspk-ctl__text{display:flex;flex-direction:column;gap:4px;min-width:0;}
#mspk .mspk-switch{flex:0 0 auto;position:relative;display:inline-block;cursor:pointer;}
#mspk .mspk-switch input{position:absolute;opacity:0;width:0;height:0;}
#mspk .mspk-switch__track{
  display:block;width:48px;height:27px;border-radius:999px;background:#D9CDBF;
  transition:background .18s ease;position:relative;
}
#mspk .mspk-switch__track::after{
  content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28);transition:transform .18s ease;
}
#mspk .mspk-switch input:checked + .mspk-switch__track{background:var(--mspk-green);}
#mspk .mspk-switch input:checked + .mspk-switch__track::after{transform:translateX(21px);}
#mspk .mspk-switch input:focus-visible + .mspk-switch__track{outline:2px solid var(--mspk-orange);outline-offset:2px;}

/* ---------- radio cards ----------
   These option labels are full sentences, so a segmented control squeezes them
   into unreadable slivers. One selectable card per line instead. */
#mspk .mspk-seg{display:flex;flex-direction:column;gap:8px;}
#mspk .mspk-seg__opt{position:relative;cursor:pointer;display:block;}
#mspk .mspk-seg__opt input{position:absolute;opacity:0;width:0;height:0;}
#mspk .mspk-seg__opt span{
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 16px;border-radius:12px;font-size:14.5px;line-height:1.45;
  border:1px solid var(--mspk-line);background:#fff;color:var(--mspk-ink);
  transition:border-color .15s ease,background .15s ease;
}
#mspk .mspk-seg__opt span::before{
  content:"";flex:0 0 auto;width:17px;height:17px;margin-top:2px;border-radius:50%;
  border:2px solid #C9BAAA;background:#fff;transition:border-color .15s ease,box-shadow .15s ease;
}
#mspk .mspk-seg__opt:hover span{border-color:var(--mspk-orange-soft);}
#mspk .mspk-seg__opt input:checked + span{
  border-color:var(--mspk-green);background:#F3F8F4;font-weight:600;
}
#mspk .mspk-seg__opt input:checked + span::before{
  border-color:var(--mspk-green);box-shadow:inset 0 0 0 3.5px #fff,inset 0 0 0 9px var(--mspk-green);
}
#mspk .mspk-seg__opt input:focus-visible + span{outline:2px solid var(--mspk-orange);outline-offset:2px;}

/* ---------- searchable multi-select ---------- */
#mspk .mspk-multi{position:relative;border:1px solid var(--mspk-line);border-radius:11px;background:#fff;padding:8px;}
#mspk .mspk-multi__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
#mspk .mspk-multi.is-empty .mspk-multi__chips{display:none;}
#mspk .mspk-chipx{
  display:inline-flex;align-items:center;gap:6px;background:var(--mspk-green);color:#fff;
  border-radius:7px;padding:4px 6px 4px 10px;font-size:12.5px;font-weight:600;
}
#mspk .mspk-chipx button{
  background:rgba(255,255,255,.22);border:0;color:#fff;border-radius:5px;
  width:17px;height:17px;line-height:1;cursor:pointer;font-size:13px;padding:0;
}
#mspk .mspk-chipx button:hover{background:rgba(255,255,255,.4);}
#mspk .mspk-multi__search{
  width:100%;border:0 !important;padding:7px 8px !important;font-size:14.5px;background:transparent;
}
#mspk .mspk-multi__search:focus{outline:0;box-shadow:none !important;}
#mspk .mspk-multi:focus-within{border-color:var(--mspk-orange);box-shadow:0 0 0 3px rgba(244,135,34,.18);}
#mspk .mspk-multi__list{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:260px;overflow-y:auto;
  background:#fff;border:1px solid var(--mspk-line);border-radius:12px;box-shadow:var(--mspk-shadow-lg);padding:6px;
}
#mspk .mspk-multi__opt{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:8px 11px;border-radius:8px;font-size:14px;font-family:var(--mspk-bd);color:var(--mspk-ink);
}
#mspk .mspk-multi__opt:hover{background:var(--mspk-cream-lt);}
#mspk .mspk-multi__opt[aria-selected="true"]{background:#E4F0E8;color:var(--mspk-green);font-weight:700;}
#mspk .mspk-multi__opt[aria-selected="true"]::after{content:" ✓";}
#mspk .mspk-multi__opt[hidden]{display:none;}

/* ---------- save bar ---------- */
#mspk .mspk-dashform__bar{
  position:sticky;bottom:0;z-index:20;margin-top:18px;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:#fff;border:1px solid var(--mspk-line);border-radius:16px;
  padding:14px 16px;box-shadow:0 -6px 24px rgba(1,73,33,.1);
}
#mspk .mspk-dashform__title{
  flex:1 1 220px;border:1px solid var(--mspk-line);border-radius:10px;
  padding:11px 13px;font:inherit;font-size:15px;color:var(--mspk-ink);
}
#mspk .mspk-dashform__title:focus{outline:0;border-color:var(--mspk-orange);box-shadow:0 0 0 3px rgba(244,135,34,.18);}
#mspk .mspk-dashform__bar .mspk-btn{border:0;cursor:pointer;font-family:var(--mspk-bd);margin-left:auto;}

@media (max-width:620px){
  #mspk .mspk-dash__help{margin-left:0;width:100%;}
  #mspk .mspk-ctl--switch{align-items:flex-start;}
  #mspk .mspk-dashform__bar .mspk-btn{width:100%;margin-left:0;}
}

/* ---------- create dashboard ---------- */
#mspk .mspk-dash--create{max-width:720px;}
#mspk .mspk-createform{
  background:#fff;border:1px solid var(--mspk-line);border-radius:16px;
  padding:24px;box-shadow:var(--mspk-shadow);display:flex;flex-direction:column;gap:18px;align-items:flex-start;
}
#mspk .mspk-createform .mspk-ctl{width:100%;}
#mspk .mspk-createform .mspk-btn{border:0;cursor:pointer;font-family:var(--mspk-bd);}
#mspk .mspk-notice--info{background:var(--mspk-orange-soft);color:#7a4a12;border:1px solid #F2CFA6;}
#mspk .mspk-steps-how{margin-top:26px;display:grid;gap:14px;counter-reset:mspk-how;list-style:none;padding:0;}
#mspk .mspk-steps-how li{
  position:relative;padding:16px 18px 16px 56px;background:var(--mspk-cream-lt);
  border:1px solid var(--mspk-line);border-radius:13px;font-size:14.5px;color:var(--mspk-muted);line-height:1.55;
}
#mspk .mspk-steps-how li::before{
  counter-increment:mspk-how;content:counter(mspk-how);
  position:absolute;left:18px;top:16px;width:24px;height:24px;border-radius:50%;
  background:var(--mspk-green);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:700;
}
#mspk .mspk-steps-how strong{display:block;font-family:var(--mspk-hd);color:var(--mspk-ink);font-size:15.5px;margin-bottom:3px;}
#mspk .mspk-steps-how a{color:var(--mspk-orange-dk);font-weight:600;}