/* ============================================================
   Find a School — shared pieces ported from the monolithic
   assets/site.css (v48) that the split site-*.css bundle in
   sg-website does not carry yet: result-card tools, pagination,
   map pin card, apply / enquiry composer, "My status", selection
   bar, sort radio list, mobile chip rail.
   Loaded after the shared bundle and before find-your-school.css.
============================================================ */
/* used by .dd-pop, .selbar, .pin-card, .map-redo, .tl and the header
   search sheet, but never defined in the split bundle */
@keyframes ddIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
/* One column on phones. site-responsive.css still carries the old
   `.fs-main:not(.map-off) .fs-grid{1fr 1fr}` rule for <=1500px, which
   outranks its own 640px rule, so cards stayed two-up and overflowed
   whenever the map was on. site.css v48 dropped that rule; match it. */
@media(max-width:640px){.fs-main:not(.map-off) .fs-grid{grid-template-columns:1fr;}}

/* ============================================================
   Find a School: mobile — results, select mode, map sheet
============================================================ */
@media(max-width:1100px){
  .fs-main,.fs-main.map-wide,.fs-main.map-off{padding:14px 16px 40px;}
}
@media(max-width:860px){
  .fs-head{flex-direction:column;align-items:flex-start;gap:12px;}
  .fs-head h1{font-size:19px;}
  .fs-tools{width:100%;gap:8px;}
  .fs-tools .fs-toggle{flex:0 0 auto;}
  .fs-sort{flex:1;min-width:0;}
  /* select mode needs a bigger, unmissable target on a phone */
  .sch .sel-box{width:32px;height:32px;top:10px;right:10px;font-size:14px;border-width:2.5px;}
  .sch.sel .sel-box{background:var(--ink);border-color:var(--ink);}
  .sch .heart{top:50px;right:10px;width:30px;height:30px;}
  .sch .seatchip{left:10px;bottom:10px;font-size:10px;}
  body.has-sel{padding-bottom:150px;}
}
@media(max-width:640px){
  .fs-grid{gap:22px;}
  .fs-bar-in{padding:9px 12px;}
}
/* apply sheet: the class chips are the first decision, keep them tappable */
@media(max-width:640px){
  .ap-classes .chip{padding:9px 14px;font-size:12.5px;}
  .ap-item{padding:11px 12px;gap:10px;}
  .ap-item img{width:44px;height:38px;}
  .ap-item strong{font-size:13px;}
  .ap-total{flex-direction:column;align-items:flex-start;gap:6px;font-size:14.5px;}
}

/* ============================================================
   Brand check seal, school marks, status colours
============================================================ */
:root{ --ok:#0E8A4F; --ok-soft:#E7F6EE; }
.sg-check{display:inline-block;vertical-align:-2px;flex:0 0 auto;}
.sg-logo{border-radius:50%;object-fit:cover;background:var(--g100);flex:0 0 auto;box-shadow:0 0 0 1.5px #fff, 0 1px 3px rgba(0,0,0,.18);}
/* admission-open now reads as a status, not a brand accent */
.adm-tag.on{color:var(--ok);}
.adm-tag.on::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px;}
.seat.ok{background:var(--ok-soft);color:var(--ok);}
.map-pin.open .adm{background:var(--ok);box-shadow:0 0 0 3px rgba(14,138,79,.20);}
.map-legend .dotv{background:var(--ok);}

/* ---------- result card: checkbox + heart on one row ---------- */
.sch-tools{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:8px;z-index:3;}
.sch-tools .sel-box,.sch-tools .heart{position:static;top:auto;right:auto;}
.sch .heart{width:30px;height:30px;}
.sch .sel-box{width:30px;height:30px;border-radius:9px;}

/* ---------- pagination ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin:30px 0 6px;flex-wrap:wrap;}
.pager button{min-width:38px;height:38px;border:1px solid var(--g400);background:#fff;border-radius:10px;font-family:inherit;font-weight:700;font-size:13px;color:var(--ink);cursor:pointer;padding:0 10px;transition:all .16s ease;}
.pager button:hover:not(:disabled){border-color:var(--ink);}
.pager button.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.pager button:disabled{opacity:.4;cursor:default;}
.pager .gap{color:var(--g500);font-weight:700;padding:0 2px;}
.pager-note{text-align:center;font-size:12px;color:var(--g500);font-weight:600;margin-top:8px;}

/* ---------- map: anchored detail card ---------- */
.pin-card{position:absolute;z-index:8;width:268px;background:#fff;border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.26);overflow:hidden;animation:ddIn .16s ease;}
.pin-card .pc-im{position:relative;height:132px;background:var(--g100);}
.pin-card .pc-im img{width:100%;height:100%;object-fit:cover;display:block;}
.pin-card .pc-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:none;background:rgba(255,255,255,.95);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.2);}
.pin-card .pc-b{padding:11px 13px 13px;}
.pin-card h4{font-size:14px;display:flex;align-items:center;gap:6px;margin:0 0 2px;}
.pin-card h4 .rt{margin-left:auto;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.pin-card .pc-sub{font-size:11.5px;color:var(--g500);font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.pin-card .pc-sub .bd{background:var(--g100);border-radius:999px;padding:2px 9px;font-size:10px;font-weight:800;color:var(--ink-2);}
.pin-card .pc-fee{font-size:13px;font-weight:800;margin-top:6px;}
.pin-card .pc-fee small{color:var(--g500);font-weight:600;font-size:11px;}
.pin-card .pc-act{display:flex;gap:7px;margin-top:10px;}
.pin-card .pc-act .btn{flex:1;padding:9px 0;font-size:12px;}
.pin-card::after{content:'';position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:#fff;transform:translateX(-50%) rotate(45deg);box-shadow:3px 3px 8px rgba(0,0,0,.10);}
.pin-card.flip::after{bottom:auto;top:-7px;box-shadow:-3px -3px 8px rgba(0,0,0,.08);}

/* ---------- map on mobile ----------
   The map owns the canvas and the results ride on a draggable sheet.
   Geometry lives in find-a-school.html; only the shared bits are here. */
@media(max-width:1100px){
  body.map-on .map-legend{display:none;}
  body.map-on .pin-card{width:232px;}
}

/* ---------- apply: removable rows, fee summary, done state ---------- */
.ap-item .right{display:flex;align-items:center;gap:10px;}
.ap-remove{width:28px;height:28px;border-radius:50%;border:none;background:var(--g100);color:var(--g600);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .16s ease;flex:0 0 auto;}
.ap-remove:hover{background:var(--ink);color:#fff;}
.ap-sum{border:1px solid var(--g200);border-radius:14px;padding:6px 14px;margin-top:16px;}
.ap-sum-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;font-size:13px;font-weight:600;color:var(--g600);border-bottom:1px solid var(--g100);}
.ap-sum-row:last-child{border-bottom:none;}
.ap-sum-row span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ap-sum-row.total{font-size:15px;font-weight:800;color:var(--ink);padding:12px 0;}
.ap-done{text-align:center;padding:6px 0 2px;}
.ap-done .ic{width:70px;height:70px;border-radius:50%;background:var(--red-soft);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;}
.ap-done h3{font-size:21px;margin-bottom:8px;}
.ap-done>p{font-size:13.5px;color:var(--g600);font-weight:500;line-height:1.65;margin:0 auto 16px;max-width:420px;}
.ap-ref{display:inline-flex;align-items:center;gap:9px;background:var(--g100);border-radius:999px;padding:8px 16px;font-size:12px;font-weight:700;color:var(--g600);margin-bottom:18px;}
.ap-ref b{color:var(--ink);letter-spacing:.4px;}
.ap-done-list{border:1px solid var(--g200);border-radius:14px;overflow:hidden;text-align:left;}
.ap-done-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--g100);}
.ap-done-row:last-child{border-bottom:none;}
.ap-done-row>div{flex:1;min-width:0;}
.ap-done-row strong{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ap-done-row span{font-size:11.5px;color:var(--g500);font-weight:600;}
.pill-wait{flex:0 0 auto;background:var(--g100);color:var(--g600);border-radius:999px;padding:5px 11px;font-size:10.5px;font-weight:800;}
.ap-amt{flex:0 0 auto;font-size:13px;font-weight:800;}
.ap-done-cta{display:flex;flex-direction:column;gap:9px;margin-top:18px;}
.ap-group{border:1px solid var(--g200);border-radius:16px;overflow:hidden;margin-bottom:14px;}
.ap-group-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;background:var(--g100);}
.ap-group-h strong{display:block;font-size:13.5px;}
.ap-group-h span{font-size:11.5px;color:var(--g500);font-weight:600;}
.ap-empty{text-align:center;padding:20px 0;}
.ap-empty .ic{width:62px;height:62px;border-radius:50%;background:var(--g100);color:var(--g500);display:inline-flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px;}
.ap-empty h3{font-size:18px;margin-bottom:6px;}
.ap-empty p{font-size:13.5px;color:var(--g600);font-weight:500;margin-bottom:18px;}
/* beat the earlier `.sch .adm-tag.on` ink rule */
.sch .adm-tag.on,.adm-tag.on{color:var(--ok);}

/* ============================================================
   Map: clickable pins, board badge, full-bleed expand, legend row
============================================================ */
/* Leaflet owns marker stacking now; only the hovered pill jumps the queue */
.map-pin.hot{z-index:7;}

/* board shown as a tinted capsule rather than a hard black tag */
.map-pin .bd{
  width:auto;min-width:0;height:19px;padding:0 7px;border-radius:6px;
  font-size:8.5px;font-weight:800;letter-spacing:.3px;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.map-pin{border-width:1.5px;}
.map-pin.hot .bd{background:rgba(255,255,255,.22)!important;}

/* expand: map takes the whole canvas, cards step aside */
@media(min-width:1101px){
  .fs-main.map-wide{padding-left:24px;padding-right:24px;}
  .fs-main.map-wide .fs-results{display:none;}
  .fs-main.map-wide .fs-map{left:0;right:0;width:auto;border-radius:0;}
}
.fs-map{transition:left .34s var(--ease),right .34s var(--ease),width .34s var(--ease),border-radius .34s var(--ease);}

/* legend on one row */
.map-legend{max-width:none;left:12px;right:64px;display:flex;align-items:center;gap:12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 13px;}
.map-legend::-webkit-scrollbar{display:none;}
.map-legend .lg-row{flex:0 0 auto;white-space:nowrap;}
.map-legend b{flex:0 0 auto;white-space:nowrap;}
.map-legend b{margin:0 4px 0 0;}
.map-legend .lg-row{margin-top:0;}
@media(max-width:1240px){.map-legend .lg-row{font-size:10.5px;}}

/* tooltips inside the map must not clip */
/* the anchored detail card is allowed to hang past the pane edge */
.fs-map{overflow:visible;}
.map-tools [data-tip]::after{z-index:400;}

/* ---------- sort dropdown reads as a choice list, not chips ---------- */
.dd-radio{display:flex;flex-direction:column;gap:2px;min-width:230px;}
.dd-radio button{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;font-family:inherit;
  text-align:left;padding:10px 11px;border-radius:11px;font-weight:600;font-size:13.5px;color:var(--ink);cursor:pointer;}
.dd-radio button:hover{background:var(--g100);}
.dd-radio .tick{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--g400);flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.dd-radio button.on .tick{border-color:var(--ink);background:var(--ink);}
.dd-radio button.on .tick::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff;}

/* the sheet handle only exists while the mobile map sheet is up */
.sheet-grab{display:none;align-items:center;justify-content:center;width:100%;padding:8px 0 6px;border:none;background:none;cursor:grab;touch-action:none;}
.sheet-grab span{width:44px;height:5px;border-radius:99px;background:var(--g300);transition:background .2s ease;}

/* ---------- enquiry composer ---------- */
.enq-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px;}
.enq-tool{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--field-line);background:#fff;border-radius:999px;
  padding:9px 15px;font-family:inherit;font-weight:700;font-size:12.5px;color:var(--ink);cursor:pointer;transition:all .16s ease;}
.enq-tool:hover{border-color:var(--ink);background:var(--g100);}
.enq-tool i{font-size:12px;color:var(--g600);}
.enq-tool.rec{background:var(--red);border-color:var(--red);color:#fff;}
.enq-tool.rec i{color:#fff;animation:recPulse 1.2s infinite;}
@keyframes recPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.enq-audio{height:36px;max-width:210px;}
.enq-files{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
.enq-file{display:inline-flex;align-items:center;gap:7px;background:var(--g100);border-radius:999px;padding:6px 8px 6px 12px;font-size:11.5px;font-weight:700;color:var(--ink-2);max-width:200px;}
.enq-file button{border:none;background:none;color:var(--g500);cursor:pointer;font-size:10px;padding:2px;}
.enq-file button:hover{color:var(--ink);}
.ap-clear-saved{border:none;background:none;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--g500);text-decoration:underline;cursor:pointer;margin-left:8px;}
.ap-clear-saved:hover{color:var(--ink);}
@media(max-width:860px){
  .selbar button{font-size:12px;padding:8px 8px;}
  .enq-audio{max-width:100%;width:100%;}
}

/* ============================================================
   Selection bar: who is selected, then what you can do
============================================================ */
.selbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:130;
  display:flex;align-items:center;gap:18px;background:var(--ink);color:#fff;
  border-radius:20px;padding:12px 14px 12px 16px;box-shadow:0 20px 48px rgba(0,0,0,.34);
  animation:ddIn .22s var(--ease);max-width:calc(100vw - 28px);
}
.sb-who{display:flex;align-items:center;gap:12px;min-width:0;}
.sb-avs{display:flex;align-items:center;flex:0 0 auto;}
.sb-avs .sg-logo{margin-left:-9px;box-shadow:0 0 0 2px var(--ink);}
.sb-avs .sg-logo:first-child{margin-left:0;}
.sb-more{width:30px;height:30px;border-radius:50%;background:#3A3A3A;box-shadow:0 0 0 2px var(--ink);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-left:-9px;}
.sb-txt{min-width:0;}
.sb-txt b{display:block;font-size:13.5px;white-space:nowrap;}
.sb-txt span{display:block;font-size:11.5px;color:rgba(255,255,255,.6);font-weight:600;white-space:nowrap;}
.sb-clear{width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:11px;cursor:pointer;flex:0 0 auto;}
.sb-clear:hover{background:rgba(255,255,255,.24);}
.sb-acts{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.selbar button{font-family:inherit;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.sb-ghost{border:none;background:none;color:rgba(255,255,255,.85);font-weight:700;font-size:12.5px;padding:9px 11px;border-radius:999px;}
.sb-ghost:hover{background:rgba(255,255,255,.14);color:#fff;}
.sb-second{border:1px solid rgba(255,255,255,.35);background:none;color:#fff;font-weight:700;font-size:12.5px;padding:10px 16px;border-radius:999px;}
.sb-second:hover{background:rgba(255,255,255,.14);border-color:#fff;}
.sb-primary{border:none;background:var(--red);color:#fff;font-weight:800;font-size:13px;padding:12px 20px;border-radius:999px;}
.sb-primary:hover{background:var(--red-dark);}
@media(max-width:900px){
  .selbar{left:12px;right:12px;transform:none;max-width:none;flex-direction:column;align-items:stretch;gap:12px;
    bottom:calc(12px + env(safe-area-inset-bottom));padding:14px;}
  .sb-who{gap:10px;}
  .sb-txt b{font-size:14px;}
  .sb-clear{margin-left:auto;}
  .sb-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .sb-ghost{background:rgba(255,255,255,.12);padding:11px 8px;}
  .sb-second{grid-column:1/-1;padding:12px;}
  .sb-primary{grid-column:1/-1;padding:14px;font-size:14px;}
  body.has-sel .mbar{display:none;}
}

/* ---------- enquiry topics ---------- */
.enq-topics{display:flex;flex-wrap:wrap;gap:7px;}
.enq-topic{border:1px solid var(--field-line);background:#fff;border-radius:999px;padding:9px 14px;
  font-family:inherit;font-weight:600;font-size:12.5px;color:var(--ink);cursor:pointer;transition:all .16s ease;}
.enq-topic:hover{border-color:var(--ink);}
.enq-topic.on{background:var(--ink);border-color:var(--ink);color:#fff;}

/* ---------- mobile: filter chips that breathe ---------- */
@media(max-width:860px){
  .fs-bar-in{padding:9px 0 9px 12px;gap:0;}
  .fs-scroll{gap:7px;padding:2px 8px 2px 0;scroll-padding-left:12px;}
  .fs-scroll .fs-pill{padding:9px 13px;font-size:12.5px;}
  .fs-fixed{padding-left:8px;padding-right:12px;margin-left:0;background:#fff;box-shadow:-10px 0 12px -6px rgba(255,255,255,.95);}
  .fs-fixed .fs-toggle{display:none;}          /* lives inside Filters on mobile */
  .fs-fixed .fs-pill{padding:9px 14px;}
  .fs-tools{flex-wrap:wrap;}
  .fs-tools .fs-pill,.fs-tools .fs-toggle{font-size:12.5px;padding:9px 13px;}
}
/* the status pill and the card tools share the top edge on narrow cards */
@media(max-width:900px){
  .sch .adm-tag{max-width:calc(100% - 92px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;padding:5px 10px;}
}