/* ==========================================================================
   Compare tutors on every page (9 Oct 2026).

   Loaded by partials/compare-assets.blade.php wherever a Compare button is
   shown. Two parts:

   1. The shortlist dock (#cmpDock). Its first styles live in home.css, which
      only pages with the Ask NXT AI panel load, so on /tutors the dock was
      unstyled. The same look is repeated here.
   2. The comparison sheet (.nxcmp), used when the page has no Ask AI panel to
      show the comparison in (public/frount/assets/js/nx-compare.js).

   Colour roles (nx-roles.css): comparing is an AI feature, so its action and
   label are indigo; WhatsApp buttons keep WhatsApp green; links are sky;
   everything else is neutral. No marigold here: the page's own CTA keeps it.
   ========================================================================== */

/* ---- 1. dock ------------------------------------------------------------ */
.cmp-dock{
  position:fixed;left:50%;right:auto;bottom:20px;transform:translateX(-50%);z-index:9999;
  width:max-content;max-width:calc(100vw - 24px);
  display:flex;align-items:center;gap:14px;padding:10px 12px 10px 14px;
  border-radius:999px;background:#0f172a;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  font-family:var(--nxt-font-body,system-ui,sans-serif);
}
.cmp-dock .cmp-dock-faces{display:flex;align-items:center;flex:0 0 auto}
.cmp-dock .cmp-dock-face{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #0f172a;background:#1e293b}
.cmp-dock .cmp-dock-face + .cmp-dock-face{margin-left:-12px}
.cmp-dock .cmp-dock-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.cmp-dock .cmp-dock-text strong{font-size:15px;font-weight:600;color:#fff;white-space:nowrap}
.cmp-dock .cmp-dock-text span{font-size:12px;color:rgba(255,255,255,.7);white-space:nowrap}
/* AI action: indigo fill, white text 6.3:1 (was the success green) */
.cmp-dock .cmp-dock-go{
  flex:0 0 auto;width:auto;min-height:0;padding:11px 24px;border:0;border-radius:999px;
  background:var(--nxt-ai-fill,#4F46E5);color:#fff;font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer;
}
.cmp-dock .cmp-dock-go:hover{background:#4338CA}
.cmp-dock .cmp-dock-go[disabled]{background:rgba(255,255,255,.10);color:rgba(255,255,255,.6);cursor:not-allowed}
.cmp-dock .cmp-dock-go:focus-visible,.cmp-dock .cmp-dock-clear:focus-visible{outline:2px solid var(--nxt-focus,#8FC2FF);outline-offset:2px}
.cmp-dock .cmp-dock-clear{flex:0 0 32px;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.7);font-size:20px;line-height:1;cursor:pointer}
.cmp-dock .cmp-dock-clear:hover{background:rgba(255,255,255,.10);color:#fff}
@media (max-width:720px){
  .cmp-dock{left:12px;right:12px;bottom:12px;transform:none;width:auto;max-width:none;gap:10px;padding:8px 8px 8px 12px}
  .cmp-dock .cmp-dock-text{flex:1 1 auto}
  .cmp-dock .cmp-dock-text strong{font-size:14px}
  .cmp-dock .cmp-dock-text span{white-space:normal}
  .cmp-dock .cmp-dock-go{padding:10px 16px;font-size:14px}
  body:has(.nxsticky) .cmp-dock{bottom:78px}
}

/* ---- 2. sheet ----------------------------------------------------------- */
html.nxcmp-open,html.nxcmp-open body{overflow:hidden}
.nxcmp{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-end;justify-content:center;font-family:var(--nxt-font-body,system-ui,sans-serif)}
.nxcmp-backdrop{position:absolute;inset:0;background:rgba(3,7,18,.72)}
.nxcmp-panel{
  position:relative;width:min(1080px,100%);max-height:min(92vh,100%);overflow:auto;overscroll-behavior:contain;
  background:var(--nxt-ink-850,#0B1424);color:var(--nxt-text,#EEF2F9);
  border:1px solid var(--nxt-line-strong,rgba(255,255,255,.16));border-bottom:0;
  border-radius:var(--nxt-r-lg,22px) var(--nxt-r-lg,22px) 0 0;box-shadow:var(--nxt-e4,0 28px 64px rgba(3,7,18,.55));
  padding:0 clamp(14px,3vw,28px) 24px;
}
body .nxcmp .nxcmp-panel:focus,body .nxcmp .nxcmp-panel:focus-visible{outline:none}
@media (min-width:760px){
  .nxcmp{align-items:center;padding:24px}
  .nxcmp-panel{border-radius:var(--nxt-r-lg,22px);border-bottom:1px solid var(--nxt-line-strong,rgba(255,255,255,.16))}
}
.nxcmp-bar{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 calc(-1 * clamp(14px,3vw,28px)) 14px;padding:16px clamp(14px,3vw,28px) 12px;
  background:var(--nxt-ink-850,#0B1424);border-bottom:1px solid var(--nxt-line,rgba(255,255,255,.09));
}
body .nxcmp .nxcmp-bar h2{margin:2px 0 0;font:800 clamp(1.125rem,1rem + .6vw,1.375rem)/1.2 var(--nxt-font-display,system-ui,sans-serif);color:var(--nxt-text,#EEF2F9)}
.nxcmp-ai{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--nxt-ai,#A5B4FC);background:var(--nxt-ai-soft,rgba(99,102,241,.16));border:1px solid var(--nxt-ai-line,rgba(129,140,248,.45))}
.nxcmp-close{flex:0 0 40px;width:40px;height:40px;border-radius:50%;border:1px solid var(--nxt-line-strong,rgba(255,255,255,.16));background:transparent;color:var(--nxt-text,#EEF2F9);font-size:22px;line-height:1;cursor:pointer}
.nxcmp-close:hover{background:var(--nxt-surface-2,rgba(255,255,255,.07))}
.nxcmp-close:focus-visible{outline:2px solid var(--nxt-focus,#8FC2FF);outline-offset:2px}

.nxcmp-loading,.nxcmp-msg{display:flex;align-items:center;gap:12px;padding:32px 4px;color:var(--nxt-text-dim,#A6B3CA)}
.nxcmp-spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--nxt-ink-600,#1E2C49);border-top-color:var(--nxt-ai,#A5B4FC);animation:nxcmp-spin 1s linear infinite}
@keyframes nxcmp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nxcmp-spin{animation:none}}

.nxcmp-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.nxcmp-grid--2,.nxcmp-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.nxcmp-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.nxcmp-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px;border-radius:var(--nxt-r-md,16px);
  background:var(--nxt-surface,rgba(255,255,255,.045));border:1px solid var(--nxt-line,rgba(255,255,255,.09))}
.nxcmp-card.is-top{border-color:var(--nxt-ai-line,rgba(129,140,248,.45))}
.nxcmp-card__head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center}
.nxcmp-face{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--nxt-ink-600,#1E2C49)}
.nxcmp-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.nxcmp-face--mono{position:relative;overflow:hidden;display:grid;place-items:center;font:800 1.125rem/1 var(--nxt-font-display,system-ui,sans-serif);color:var(--nxt-text,#EEF2F9);border:1px solid var(--nxt-line-strong,rgba(255,255,255,.16))}
.nxcmp-card__who{min-width:0}
body .nxcmp .nxcmp-card__who h3{margin:0;font:800 1rem/1.25 var(--nxt-font-display,system-ui,sans-serif);color:var(--nxt-text,#EEF2F9);overflow-wrap:anywhere}
.nxcmp-top{display:inline-block;margin-top:3px;font-size:.6875rem;font-weight:800;letter-spacing:.04em;color:var(--nxt-ai,#A5B4FC)}
.nxcmp-score{text-align:right;line-height:1}
.nxcmp-score b{font:800 1.5rem/1 var(--nxt-font-display,system-ui,sans-serif);color:var(--nxt-text,#EEF2F9)}
.nxcmp-score small{font-size:.75rem;color:var(--nxt-text-dim,#A6B3CA)}
.nxcmp-fit{height:6px;border-radius:999px;background:var(--nxt-surface-2,rgba(255,255,255,.07));overflow:hidden}
.nxcmp-fit i{display:block;height:100%;border-radius:inherit;background:var(--nxt-ai-fill,#4F46E5)}
.nxcmp-card.is-top .nxcmp-fit i{background:var(--nxt-ai,#A5B4FC)}
body .nxcmp .nxcmp-sec h4{margin:0 0 6px;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--nxt-text-faint,#78869F)}
.nxcmp-sum{margin:0 0 8px;font-size:.875rem;line-height:1.5;color:var(--nxt-text-dim,#A6B3CA)}
.nxcmp-none{margin:0;font-size:.8125rem;color:var(--nxt-text-dim,#A6B3CA)}
.nxcmp-facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0}
.nxcmp-facts div{min-width:0}
.nxcmp-facts dt{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nxt-text-faint,#78869F)}
.nxcmp-facts dd{margin:2px 0 0;font-size:.9375rem;font-weight:700;color:var(--nxt-text,#EEF2F9)}
.nxcmp-card__act{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:4px}
body .nxcmp a.nxcmp-link{color:var(--nxt-link,#6CB0FF);font-weight:700;font-size:.875rem;text-decoration:underline;text-decoration-color:var(--nxt-link-line,rgba(108,176,255,.45));text-underline-offset:3px}
.nxcmp-remove{border:1px solid var(--nxt-line-strong,rgba(255,255,255,.16));background:transparent;color:var(--nxt-text-dim,#A6B3CA);border-radius:999px;padding:6px 12px;font-size:.8125rem;font-weight:600;cursor:pointer}
.nxcmp-remove:hover{color:var(--nxt-text,#EEF2F9)}
.nxcmp-note{margin:14px 0 0;font-size:.8125rem;color:var(--nxt-text-faint,#78869F)}

/* the next-step bar (compareActionsHtml) inside the sheet */
.nxcmp .nxg-cmp-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.nxcmp .nxg-cmp-act{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--nxt-line-strong,rgba(255,255,255,.16));background:transparent;color:var(--nxt-text,#EEF2F9);
  font:700 .875rem/1.2 var(--nxt-font-body,system-ui,sans-serif);text-decoration:none;cursor:pointer}
.nxcmp .nxg-cmp-act[data-act="ask"]{color:var(--nxt-ai,#A5B4FC);border-color:var(--nxt-ai-line,rgba(129,140,248,.45))}
/* The one solid button: book the demo on WhatsApp (WhatsApp green, dark ink 7.9:1) */
.nxcmp .nxg-cmp-act--wa{background:var(--nxt-whatsapp,#25D366);border-color:var(--nxt-whatsapp,#25D366);color:#05210F}
/* Also WhatsApp, but secondary: outline + icon, green text on the dark ground (9:1) */
.nxg-cmp-act.nxg-cmp-act--wa-ghost{gap:7px;background:transparent;border-color:rgba(37,211,102,.55);color:var(--nxt-whatsapp,#25D366)}
.nxg-cmp-act.nxg-cmp-act--wa-ghost:hover{background:rgba(37,211,102,.10)}
/* Information, not an action: a link in the link colour */
body a.nxg-cmp-act.nxg-cmp-act--link{border-color:transparent;background:transparent;color:var(--nxt-link,#6CB0FF);text-decoration:underline;text-decoration-color:var(--nxt-link-line,rgba(108,176,255,.45));text-underline-offset:3px;padding-inline:6px}
.nxcmp .nxg-cmp-act:focus-visible{outline:2px solid var(--nxt-focus,#8FC2FF);outline-offset:2px}
@media (max-width:480px){.nxcmp .nxg-cmp-act:not(.nxg-cmp-act--link){flex:1 1 100%}}

/* "What each tutor teaches" panel inside the Ask AI comparison */
.nxcmp-teach-grid{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.nxcmp-teach strong{display:block;margin:0 0 6px;font-size:.875rem;color:var(--nxt-text,#EEF2F9)}