/* SME Saved: Save button, toast, sign-in sheet and the Saved screen. Live brand only (navy #0A2C3D, maroon #9C1C1F, Oswald / Roboto).
   Author: Tshepho (Mr B), 15 Oct 2026. Everything is scoped to .svx* classes. */
.svx-row,.svx-save,.svx-toast,.svx-sheet,.svx{--svx-navy:#0A2C3D;--svx-red:#9C1C1F;--svx-red-d:#7E1518;--svx-ink:#1D2A33;--svx-mute:#5B6873;--svx-line:#E3E8EC;--svx-soft:#F5F7F9;--svx-pink:#F7E9E9;font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif}
.svx-ic{width:20px;height:20px;display:block;flex:none}

/* ---- the Save button ---- */
.svx-row{display:flex;align-items:center;gap:8px;margin:10px 0 14px;flex-wrap:wrap}
.svx-save{-webkit-appearance:none;appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--svx-navy);background:#fff;color:var(--svx-navy);transition:background .15s,color .15s,border-color .15s,transform .1s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;margin:0;line-height:1}
.svx-save:active{transform:scale(.96)}
.svx-save:focus-visible,.svx-chip:focus-visible,.svx-rm:focus-visible,.svx-btn:focus-visible,.svx-pg:focus-visible,.svx-link:focus-visible,.svx-toast-a:focus-visible{outline:3px solid #F2B8BA;outline-offset:2px}
.svx-save--pill{min-height:44px;padding:0 18px 0 14px;border-radius:999px;font:500 15px/1 Roboto,system-ui,sans-serif;letter-spacing:.01em}
.svx-save--pill:hover{background:var(--svx-soft)}
.svx-save--pill.is-on{background:var(--svx-red);border-color:var(--svx-red);color:#fff}
.svx-save--pill.is-on:hover{background:var(--svx-red-d);border-color:var(--svx-red-d)}
.svx-save--card{position:absolute;top:8px;right:8px;z-index:2;width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.95);color:var(--svx-navy);box-shadow:0 1px 4px rgba(10,44,61,.18)}
.svx-save--card.is-on{color:var(--svx-red)}
.svx-has-card{position:relative}
/* the Events tab bookmark (SME Success Core markup), painted here */
.svx-prog svg{width:18px;height:18px}
.svx-prog{color:var(--svx-navy,#0A2C3D)}
.svx-prog.is-on{color:#9C1C1F}

/* ---- toast ---- */
.svx-toast{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:100000;margin:0 auto;max-width:440px;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:12px;background:var(--svx-navy);color:#fff;box-shadow:0 10px 30px rgba(10,44,61,.3);font-size:15px;line-height:1.35;transform:translateY(16px);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.svx-toast.is-on{opacity:1;transform:none;pointer-events:auto}
.svx-toast-t{flex:1;min-width:0}
.svx-toast-a{flex:none;min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;font:700 14px/1 Roboto,system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}
.svx-toast-a:hover{background:rgba(255,255,255,.22);color:#fff}
@media (min-width:1024px){.svx-toast{bottom:24px;left:24px;right:auto}}

/* ---- sign-in sheet (bottom sheet on phones, small dialog on laptops) ---- */
html.svx-lock{overflow:hidden}
.svx-sheet{position:fixed;inset:0;z-index:100001}
.svx-sheet[hidden]{display:none}
.svx-sheet-bg{position:absolute;inset:0;background:rgba(10,44,61,.5);opacity:0;transition:opacity .18s}
.svx-sheet-in{position:absolute;left:0;right:0;bottom:0;background:#fff;color:var(--svx-ink);border-radius:20px 20px 0 0;padding:28px 20px calc(20px + env(safe-area-inset-bottom));text-align:center;transform:translateY(100%);transition:transform .2s ease-out;box-shadow:0 -8px 30px rgba(10,44,61,.2)}
.svx-sheet.is-on .svx-sheet-bg{opacity:1}
.svx-sheet.is-on .svx-sheet-in{transform:none}
.svx-sheet-ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:999px;background:var(--svx-pink);color:var(--svx-red);margin-bottom:10px}
.svx-sheet-ic .svx-ic{width:24px;height:24px}
.svx-sheet h2{font:600 24px/1.2 Oswald,"Arial Narrow",sans-serif;color:var(--svx-navy);margin:0 0 8px;text-transform:none;letter-spacing:0}
.svx-sheet p{font-size:16px;line-height:1.5;color:var(--svx-mute);margin:0 auto 18px;max-width:34ch}
.svx-sheet .svx-btn{width:100%;max-width:340px}
.svx-sheet-alt{margin:14px auto 0 !important;font-size:15px !important}
.svx-sheet-alt a{color:var(--svx-red);font-weight:700;text-decoration:underline;display:inline-block;padding:10px 4px}
.svx-sheet-x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:none;color:var(--svx-mute);display:grid;place-items:center;cursor:pointer;border-radius:999px}
.svx-sheet-x:hover{background:var(--svx-soft)}
@media (min-width:768px){
  .svx-sheet-in{left:50%;right:auto;bottom:auto;top:50%;width:400px;border-radius:16px;padding:32px 28px 26px;transform:translate(-50%,-46%);opacity:0;transition:transform .18s,opacity .18s}
  .svx-sheet.is-on .svx-sheet-in{transform:translate(-50%,-50%);opacity:1}
}

/* ---- buttons ---- */
.svx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid var(--svx-navy);background:#fff;color:var(--svx-navy) !important;font:700 15px/1 Roboto,system-ui,sans-serif;text-decoration:none !important;cursor:pointer}
.svx-btn--primary{background:var(--svx-red);border-color:var(--svx-red);color:#fff !important}
.svx-btn--primary:hover{background:var(--svx-red-d);border-color:var(--svx-red-d)}

/* ---- the Saved screen ---- */
.svx{color:var(--svx-ink)}
.svx-head h2{font:600 26px/1.15 Oswald,"Arial Narrow",sans-serif;color:var(--svx-navy);margin:0 0 4px;letter-spacing:0}
.svx-head p{font-size:15px;line-height:1.5;color:var(--svx-mute);margin:0 0 14px}
.svx-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px 14px;padding:2px 16px 4px}
.svx-chips::-webkit-scrollbar{display:none}
.svx-chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--svx-line);background:#fff;color:var(--svx-ink);font:500 15px/1 Roboto,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.svx-chip:hover{border-color:var(--svx-navy)}
.svx-chip.is-on{background:var(--svx-navy);border-color:var(--svx-navy);color:#fff}
.svx-chip-n{font-size:12px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--svx-soft);color:var(--svx-mute)}
.svx-chip.is-on .svx-chip-n{background:rgba(255,255,255,.18);color:#fff}
.svx-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.svx-card{position:relative;display:flex;align-items:stretch;background:#fff;border:1px solid var(--svx-line);border-radius:14px;overflow:hidden;transition:opacity .2s,transform .2s}
.svx-card.is-going{opacity:0;transform:translateX(16px)}
.svx-link{flex:1;min-width:0;display:flex;gap:12px;padding:12px;color:inherit !important;text-decoration:none !important}
.svx-link:hover .svx-title{color:var(--svx-red)}
.svx-th{flex:none;width:76px;height:76px;border-radius:10px;overflow:hidden;background:var(--svx-soft);color:#9AA6B0;display:grid;place-items:center}
.svx-th img{width:100%;height:100%;object-fit:cover;display:block}
.svx-th svg{width:30px;height:30px}
.svx-txt{min-width:0;display:flex;flex-direction:column;gap:4px;padding-right:40px}
.svx-type{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--svx-red)}
.svx-title{font:500 16px/1.3 Roboto,system-ui,sans-serif;color:var(--svx-navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.svx-meta{font-size:13px;color:var(--svx-mute)}
.svx-rm{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;border-radius:999px;background:none;color:var(--svx-red);display:grid;place-items:center;cursor:pointer}
.svx-rm:hover{background:var(--svx-pink)}
.svx-card--sk{height:102px;padding:12px;gap:12px;align-items:center}
.svx-card--sk .svx-th,.svx-sk-l{background:linear-gradient(90deg,#EEF1F4,#F7F9FA,#EEF1F4);background-size:200% 100%;animation:svx-sk 1.2s infinite}
.svx-sk-l{flex:1;height:14px;border-radius:6px;margin-right:40%}
@keyframes svx-sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.svx-card,.svx-toast,.svx-sheet-in,.svx-sheet-bg{transition:none}.svx-card--sk .svx-th,.svx-sk-l{animation:none}}
.svx-empty{text-align:center;padding:36px 16px;border:1px dashed var(--svx-line);border-radius:14px;background:#fff}
.svx-empty-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:999px;background:var(--svx-pink);color:var(--svx-red);margin-bottom:10px}
.svx-empty-ic .svx-ic{width:26px;height:26px}
.svx-empty h3{font:600 20px/1.2 Oswald,"Arial Narrow",sans-serif;color:var(--svx-navy);margin:0 0 6px}
.svx-empty p{font-size:15px;line-height:1.5;color:var(--svx-mute);max-width:42ch;margin:0 auto 16px}
.svx-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:18px 0 4px}
.svx-pg{min-width:44px;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--svx-line);background:#fff;color:var(--svx-navy);font:500 15px/1 Roboto,system-ui,sans-serif;cursor:pointer}
.svx-pg.is-on{background:var(--svx-navy);border-color:var(--svx-navy);color:#fff}
.svx-pg[disabled]{opacity:.45;cursor:default}
.svx-pg-gap{color:var(--svx-mute);padding:0 4px}
@media (min-width:768px){
  .svx-chips{margin:0 0 16px;padding:2px 0 4px;flex-wrap:wrap;overflow:visible}
  .svx-list{grid-template-columns:1fr 1fr;gap:12px}
  .svx-th{width:88px;height:88px}
}