/* ========= Base & Tokens ========= */
:root{
  --k-font:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --k-ink:#0f172a; --k-ink-2:#334155;
  --k-border:#e6eef7; --k-bg:#fafcff; --k-card:#fff; --k-muted:#94a3b8;
  --radius:6px; --radius-lg:12px;
  --theme-primary:#16a34a; --theme-primary-700:#15803d; --theme-tint:#e9f8ee;
  --shadow-1:0 2px 8px rgba(2,6,23,.06);
  --shadow-2:0 10px 24px rgba(2,6,23,.12);
  --shadow-3:0 18px 40px rgba(0,0,0,.18);
  --header-offset:72px;

  /* control the left/right column width from inside the plugin */
  --k-cols: 2fr 1fr;
}

/* ========= Per-FNO Themes ========= */
.krypton-coverage[data-theme="openserve"]   { --theme-primary:#16a34a; --theme-primary-700:#15803d; --theme-tint:#e9f8ee; }
.krypton-coverage[data-theme="octotel"]     { --theme-primary:#f97316; --theme-primary-700:#ea580c; --theme-tint:#fff3e9; }
.krypton-coverage[data-theme="vumatelcore"] { --theme-primary:#ec008c; --theme-primary-700:#be0974; --theme-tint:#f3e8ff; }
.krypton-coverage[data-theme="vumatel"]     { --theme-primary:#ec008c; --theme-primary-700:#be0974; --theme-tint:#f3e8ff; }
.krypton-coverage[data-theme="frogfoot"]    { --theme-primary:#0d9488; --theme-primary-700:#0f766e; --theme-tint:#e6fffb; }
.krypton-coverage[data-theme="metrofibre"]  { --theme-primary:#2563eb; --theme-primary-700:#1d4ed8; --theme-tint:#e7efff; }
.krypton-coverage[data-theme="thinkspeed"]  { --theme-primary:#0ea5e9; --theme-primary-700:#0284c7; --theme-tint:#e0f2fe; }
.krypton-coverage[data-theme="dfa"]         { --theme-primary:#111827; --theme-primary-700:#0b1220; --theme-tint:#e5e7eb; }
.krypton-coverage[data-theme="dfaductbank"]         { --theme-primary:#111827; --theme-primary-700:#0b1220; --theme-tint:#e5e7eb; }
.krypton-coverage[data-theme="comtel"]      { --theme-primary:#dc2626; --theme-primary-700:#b91c1c; --theme-tint:#fee2e2; }
.krypton-coverage[data-theme="lightspeed"]  { --theme-primary:#22c55e; --theme-primary-700:#16a34a; --theme-tint:#dcfce7; }
.krypton-coverage[data-theme="lightstruck"] { --theme-primary:#eab308; --theme-primary-700:#ca8a04; --theme-tint:#fef9c3; }
.krypton-coverage[data-theme="wefno"]       { --theme-primary:#06b6d4; --theme-primary-700:#0891b2; --theme-tint:#cffafe; }
.krypton-coverage[data-theme="kryptonweb"]  { --theme-primary:#2EB872; --theme-primary-700:#23965c; --theme-tint:#e6f7ee; }
.krypton-coverage[data-theme="cybersmart"]  { --theme-primary:#24a3dd; --theme-primary-700:#1a51b0; --theme-tint:#d1e1ff; }

/* ========= Layout (scoped so theme CSS can’t override it) ========= */
.krypton-coverage{ max-width:1140px; margin:0 auto; font-family:var(--k-font); color:var(--k-ink); overflow:visible !important; }
.krypton-map-wrap{ margin-bottom:12px; }
.krypton-style-selector{ display:none !important; } /* hide dev selector */

.k-toggle input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
.k-toggle .k-seg{ display:flex; align-items:center; justify-content:center; gap:.5rem; height:42px; border-radius:999px; font:600 14px/1.1 "Inter",system-ui; color:var(--seg-muted); cursor:pointer; z-index:2; transition:color .15s ease; }
.k-toggle .k-ico{ font-size:16px; line-height:0; }
.k-toggle .k-slider{ position:absolute; top:4px; bottom:4px; width:calc(50% - 4px); left:4px; border-radius:999px; background:var(--seg-active-bg); box-shadow:0 0 0 2px var(--seg-active-ring), 0 6px 16px rgba(16,24,40,.08); transition:left .22s cubic-bezier(.2,.8,.2,1); z-index:1; }
#svc-home:checked ~ label[for="svc-home"], #svc-biz:checked ~ label[for="svc-biz"]{ color:var(--seg-text); }
#svc-biz:checked ~ .k-slider{ left:calc(50% + 0px); }
@media (max-width:480px){ .k-toggle{ width:100%; max-width:420px; } }

/* === Brand-forward segmented toggle (Krypton style) === */
.k-toggle{
  --brand:#2EB872;            /* Krypton green */
  --brand-700:#23965c;
  --tint:#e6f7ee;
  --ring: color-mix(in srgb, var(--brand) 40%, transparent);

  position:relative; display:grid; grid-template-columns:1fr 1fr;
  width:380px; max-width:100%;
  margin:10px auto 16px; padding:6px;
  border-radius:999px; background:#fff;
  border:1px solid var(--k-border,#e5e7eb);
  box-shadow:0 8px 22px rgba(2,6,23,.06);
}

.k-toggle .k-seg{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 14px;
  border-radius:999px; cursor:pointer;
  font:800 14.5px/1 Inter, system-ui, sans-serif;
  color:#475569; letter-spacing:.01em;
  transition:color .15s ease, filter .15s ease;
}

/* Replace emoji with SVG; hide the old span */
.k-toggle .k-ico{ display:none; }

/* Modern icons via ::before (currentColor) */
.k-toggle .k-seg::before{
  content:""; display:inline-block; width:20px; height:20px;
  background: currentColor;            /* color comes from the label */
  mask: var(--icon) no-repeat center / contain;
  -webkit-mask: var(--icon) no-repeat center / contain;
}

/* Per-option icons (house / briefcase) */
.k-toggle label[for="svc-home"]{ --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m4 10.5 8-6 8 6V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.k-toggle label[for="svc-biz"]{ --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9 6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2h3a2 2 0 0 1 2 2v3H2V8a2 2 0 0 1 2-2h5Zm-7 7h20v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5Zm9-7h2V6h-2v-.5Z'/%3E%3C/svg%3E"); }

/* Slider (brand gradient) */
.k-toggle .k-slider{
  position:absolute; top:6px; bottom:6px; left:6px; width:calc(50% - 6px);
  border-radius:999px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 22px rgba(2,6,23,.16);
  transition:left .22s cubic-bezier(.2,.8,.2,1);
  z-index:1;
}

/* Active label = white text for contrast over the slider */
#svc-home:checked ~ label[for="svc-home"],
#svc-biz:checked  ~ label[for="svc-biz"],
.k-toggle label.is-active{ color:#fff; }

/* Move slider */
#svc-biz:checked ~ .k-slider{ left:calc(50% + 0px); }

/* Focus ring */
.k-toggle:focus-within{
  box-shadow:0 10px 26px rgba(2,6,23,.12), 0 0 0 4px var(--ring);
}

/* Mobile width */
@media (max-width:480px){
  .k-toggle{ width:100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .k-toggle, .k-toggle .k-seg, .k-toggle .k-slider{ transition:none !important; }
}


/* ========= FNO bar ========= */
.k-fno-bar{
  width:100%; 
  display:flex; 
  flex-direction: column;   /* stack heading above the chips */
  justify-content:center; 
  gap: 8px;
  text-align: center;
  align-items:center;
  margin:12px 0 14px; 
  padding:8px 10px;
  background:var(--theme-tint); 
  border:1px solid var(--k-border); 
  border-radius:10px;
  scroll-margin-top:var(--header-offset);
  /* Make scrollIntoView land it cleanly below the header too */
  scroll-margin-top: calc(var(--header-offset, 72px) + 8px);
}

.k-fno-bar:empty{ display:none; }
.k-fno-wrap{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.k-fno-item{
  appearance:none; border:1px solid var(--k-border); background:#fff; padding:6px 10px; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:transform .06s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease; box-shadow:0 2px 8px rgba(2,6,23,.06);
}
.k-fno-item:hover{ transform:translateY(-1px); box-shadow:0 10px 18px rgba(2,6,23,.12); }
.k-fno-item.k-active{ border-color:var(--theme-primary); background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.08); }
/*.k-fno-item img{ height:auto; max-height:40px; width:auto; display:block; }*/
.k-fno-item img { width: 120px; height: 40px; object-fit: contain; }
.k-fno-chip{ font-weight:700; font-size:13px; color:var(--k-ink); }

/* Make FNO bar stick just below the fixed header */
@media (max-width:980px){
  .k-fno-bar{
    position: sticky;
    /* header height + iOS safe area + tiny gap */
    top: calc(var(--header-offset, 72px) + env(safe-area-inset-top, 0px) + 8px);
    z-index: 1002;
    background: var(--theme-tint);
    backdrop-filter: saturate(120%) blur(4px);
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
  }
  /* Add WP admin bar on top of that (mobile ~46px) */
  body.admin-bar .k-fno-bar{
    top: calc(var(--header-offset, 72px) + env(safe-area-inset-top, 0px) + 46px + 8px);
  }
}

.k-fno-title{
  font: 800 13px/1.2 var(--k-font);
  color: var(--theme-primary-700);
  letter-spacing: .04em;
  text-transform: uppercase;
}




/*@media (max-width:980px){
  .k-fno-bar{ position:sticky; top:12px; z-index:1002; background:var(--theme-tint); backdrop-filter:saturate(120%) blur(4px); box-shadow:0 6px 14px rgba(0,0,0,.06); }
  body.admin-bar .k-fno-bar{ top:calc(12px + 46px); }
}*/

/* ========= Packages grid (controlled by --k-cols) ========= */
.krypton-packages-grid{ display:grid; grid-template-columns:var(--k-cols, 2fr 1fr); gap:24px; align-items:start; }

/* Left column (cards) */
.k-left{ background:var(--k-card); border:1px solid var(--k-border); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-1); }
.k-left h3{ margin:0 0 6px; font-size:26px; font-weight:900; letter-spacing:-.02em; }
.k-left p.k-sub{ margin:0 0 16px; color:var(--k-ink-2); }

/* WA-like tiles: bigger grid cells */
.krypton-coverage .k-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr)) !important;
  gap:18px !important;
}
.krypton-coverage .k-card{
  position:relative; padding:18px; border-radius:14px;
  background:#f8fafc; border:1px solid var(--k-border); box-shadow:var(--shadow-1);
  cursor:pointer; transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease; outline:none;
}
.krypton-coverage .k-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }

/* Selected card: solid brand color */
.krypton-coverage .k-card.k-selected{
  background:var(--theme-primary) !important;
  border:2px solid var(--theme-primary) !important;
  color:#fff !important;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.krypton-coverage .k-card.k-selected .k-title,
.krypton-coverage .k-card.k-selected .k-price,
.krypton-coverage .k-card.k-selected .k-speed,
.krypton-coverage .k-card.k-selected .k-old{ color:#fff !important; }
.krypton-coverage .k-card.k-selected .k-old{ opacity:.7; }

/* Promo badge */
.k-badge{
  position:absolute; top:-10px; left:16px; padding:6px 10px; font-size:11px; font-weight:800; border-radius:10px;
  background:var(--theme-primary-700); color:#fff; letter-spacing:.02em;
}

/* Card content */
.k-title{ font-weight:800; font-size:14px; color:var(--k-ink); }
.k-price{ font-size:26px; font-weight:900; margin:8px 0 2px; color:var(--k-ink); }
.k-pm{ font-size:12px; font-weight:700; margin-left:4px; }
.k-old{ text-decoration:line-through; color:var(--k-muted); font-size:12px; }
.k-speed{ font-size:13px; color:var(--k-ink-2); display:flex; gap:10px; align-items:center; }

/* Right column (details) */
.k-right{ background:var(--k-card); border:1px solid var(--k-border); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.k-right .k-head{ padding:0 0 18px; border-bottom:1px solid var(--k-border); }
.k-right .k-brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px; color:var(--theme-primary-700); }
.k-right .k-priceBig{ font-size:36px; font-weight:900; color:var(--k-ink); margin-top:12px; letter-spacing:-.02em; }
.k-right .k-old{ margin-right:8px; color:var(--k-muted); text-decoration:line-through; font-weight:600; }
.k-right .k-speedline{ margin-top:6px; font-size:14px; color:var(--k-ink-2); }

/* Perks + info bubble */
.k-section{ padding:18px 0; border-top:1px solid var(--k-border); }
.k-section h4{ margin:0 0 10px; font-size:13px; color:var(--theme-primary-700); letter-spacing:.03em; text-transform:uppercase; }
.k-perks{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.k-perks li{ margin:0; font-size:13px; color:var(--k-ink); display:flex; gap:10px; align-items:center; position:relative; }
.k-perks li::before{ content:""; width:8px; height:8px; border-radius:999px; background:var(--theme-primary); display:inline-block; }
.k-info{
  margin-left:auto; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--k-border); background:#fff; font-size:12px; color:var(--theme-primary-700); cursor:pointer;
}
.k-pop{
  position:absolute; right:0; top: calc(100% + 8px);
  min-width:220px; max-width:360px; background:#fff; color:#0f172a;
  border:1px solid var(--k-border); border-radius:10px; padding:10px 12px; box-shadow:0 16px 32px rgba(2,6,23,.14); z-index:20;
}

/* Notes accordion */
.k-acc-header{ width:100%; display:flex; align-items:center; justify-content:space-between; background:transparent; border:0; padding:0; margin:0; font-weight:800; font-size:13px; color:var(--theme-primary-700); cursor:pointer; }
.k-acc-icon{ transition: transform .18s ease; }
.k-acc-header[aria-expanded="true"] .k-acc-icon{ transform:rotate(180deg); }
.k-acc-body[hidden]{ display:none !important; }
.k-acc-list{ list-style:none; padding:0; margin:10px 0 0; }
.k-acc-list li{ display:flex; align-items:flex-start; gap:10px; margin:8px 0; position:relative; }
.k-acc-bullet{ width:8px; height:8px; border-radius:999px; background:var(--theme-primary); margin-top:7px; }

/* Perks → adopt Notes typography */
.k-right .k-acc-list li,
.krypton-coverage .k-perks li{
  font-size:14px;          /* match Notes */
  line-height:1.45;        /* match Notes */
  font-weight:400;         /* match Notes */
  color:var(--k-ink);
  align-items:center;
}


/* CTA */
.k-cta-wrap{ padding:18px 0 0; }
.k-cta{
  width:100%; padding:14px 16px; border-radius:14px; border:none;
  background:var(--theme-primary) !important; color:#fff !important;
  font-weight:800; font-size:16px; letter-spacing:.01em; cursor:pointer;
  transition: background .15s ease, transform .08s ease, box-shadow .12s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.k-cta:hover{ background:var(--theme-primary-700) !important; }
.k-cta:active{ transform:translateY(1px); }

/* Empty + debug */
.krypton-empty{ padding:14px; background:#fffbea; border:1px solid #fde68a; border-radius:var(--radius); color:#713f12; font-size:14px; }
.krypton-coverage > pre{ display:none; margin:8px 0 12px; }
.krypton-coverage.k-debug-on > pre{ display:block; }

/* Center the grid block under the map when inside ArkaHost wrappers */
#primary.site-content .container .entry-content .krypton-coverage #kryptonPackages > .krypton-packages-grid{
  max-width:1100px; margin-inline:auto;
}

/* Space the title when a promo badge is present */
.krypton-coverage{
  --k-title-offset-with-badge: 14px;   /* adjust 10–18px to taste */
}

/* If the badge is absolutely positioned, push the title down */
.krypton-coverage .k-card .k-badge ~ .k-title{
  margin-top: var(--k-title-offset-with-badge) !important;
}

/* If your badge sits in normal flow instead, this also helps a bit */
.krypton-coverage .k-card .k-badge{
  margin-bottom: 8px;
}


/* Responsive */
@media (max-width:980px){
  .krypton-packages-grid{ grid-template-columns:1fr; gap:12px; }
  .k-right{ order:2; } .k-left{ order:1; }
}

/* Accessibility + motion */
.k-card:focus-visible, .k-fno-item:focus-visible, .k-cta:focus-visible, .k-toggle .k-seg:focus-visible{
  outline:2px solid color-mix(in srgb, var(--theme-primary) 60%, transparent); outline-offset:2px;
}
@media (hover:none){ .k-card:hover{ transform:none; box-shadow:var(--shadow-1); } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

.k-card .k-term {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--k-muted, #64748b);
}



/* --- Sort bar (hidden until packages render) ----------------------------- */
.krypton-coverage .k-sortbar{
  display:none;                /* hidden by default */
  align-items:center; gap:8px;
  margin:10px 0 14px;
}
.krypton-coverage .k-sortbar.is-visible{
  display:flex;                /* shown when we add .is-visible from JS */
}
.krypton-coverage .k-sortbar label{
  font: 600 13px/1 var(--k-font, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  opacity:.8;
}
.krypton-coverage .k-sortbar select{
  appearance:none; -webkit-appearance:none;
  font: 600 13px/1 var(--k-font, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  padding:8px 10px; border:1px solid var(--k-border, #e5e7eb); border-radius:8px;
  background:#fff; cursor:pointer;
}


/* --- Promo badge → title spacing ---------------------------------------- */
.krypton-coverage .k-card .k-badge + .k-title{
  margin-top: 6px; /* push the title down when a promo label is present */
}

/* (Optional) ensure card title has a sensible default margin */
.krypton-coverage .k-card .k-title{
  margin: 2px 0 0;
}

/* Keep the address search hidden for now */
/*.k-search{ display:none !important; }*/


/* === Address Search (themed) === */
.krypton-coverage .k-search{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:14px 0 16px;
  border:1px solid var(--k-border,#e5e7eb);
  border-radius:12px; background:#fff;
  box-shadow:0 2px 8px rgba(2,6,23,.06);
}
.krypton-coverage .k-search-ico{ font-size:18px; opacity:.7; }
.krypton-coverage .k-search input{
  flex:1; border:0; outline:0; min-width:140px;
  font:600 15px/1.2 Inter,system-ui,sans-serif;
}
.krypton-coverage .k-search .k-search-clear{
  border:0; background:transparent; font-size:18px;
  opacity:.55; cursor:pointer; padding:6px;
}
.krypton-coverage .k-search .k-btn{
  padding:10px 14px; border-radius:10px;
  border:1px solid var(--theme-primary,#72A642);
  background:var(--theme-primary,#72A642);
  color:#fff; font-weight:800; cursor:pointer;
}
.krypton-coverage .k-search .k-btn[disabled]{ opacity:.6; cursor:wait; }

/* Hide the 28East iframe when wrapper has .k-no-map */
.krypton-coverage.k-no-map .krypton-map-wrap{ display:none !important; }

/* === Krypton Search (brand-forward, glassy, accessible) === */
.krypton-coverage .k-search{
  /* Search-only brand tokens (stick to Krypton brand, not FNO) */
  --brand: #2EB872;          /* Krypton green */
  --brand-700: #23965c;
  --brand-tint: #e6f7ee;
  --ring: color-mix(in srgb, var(--brand) 40%, transparent);

  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 14px;
  margin: 14px 0 18px;
  border: 1px solid var(--k-border,#e5e7eb);
  border-radius: 14px;

  /* subtle glass/shine */
  background:
    linear-gradient(180deg, #fff, #fbfeff);
  backdrop-filter: saturate(115%) blur(4px);
  box-shadow: 0 8px 22px rgba(2,6,23,.08);
}

.krypton-coverage .k-search:focus-within{
  border-color: var(--brand);
  box-shadow:
    0 8px 22px rgba(2,6,23,.12),
    0 0 0 4px var(--ring);
}

/* magnifier */
.krypton-coverage .k-search-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; font-size:16px; opacity:.7;
  border-radius: 8px;
  background: var(--brand-tint);
}

/* input */
.krypton-coverage .k-search input{
  flex:1; min-width: 160px;
  font: 600 15px/1.25 Inter, system-ui, sans-serif;
  border: 0; outline: 0; background: transparent;
  color: var(--k-ink,#0f172a);
}

/* Clear (ghost pill) */
.krypton-coverage .k-search .k-search-clear{
  width:32px; height:32px;
  border-radius: 999px;
  border:1px solid var(--k-border,#e5e7eb);
  background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; opacity:.7; cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
}
.krypton-coverage .k-search .k-search-clear:hover{
  opacity:.95; transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(2,6,23,.10);
}

/* Submit (brand pill) */
.krypton-coverage .k-search .k-btn{
  flex:0 0 auto;
  padding: 10px 14px;
  border-radius: 10px; border: 1px solid var(--brand);
  background: linear-gradient(180deg, var(--brand), var(--brand-700));
  color:#fff; font-weight: 800; letter-spacing:.01em;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(2,6,23,.14);
  transition: filter .15s ease, transform .08s ease, box-shadow .12s ease;
}
.krypton-coverage .k-search .k-btn:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(2,6,23,.16);
}
.krypton-coverage .k-search .k-btn:active{ transform: translateY(0); }

.krypton-coverage .k-search .k-btn[disabled],
.krypton-coverage .k-search .k-btn.k-cta--loading{
  opacity:.75; cursor: wait;
}

/* Inline loading spinner when JS adds .k-cta--loading */
.krypton-coverage .k-search .k-btn.k-cta--loading::before{
  content:"";
  width:1em; height:1em; margin-right:8px;
  border:2px solid rgba(255,255,255,.9);
  border-right-color: transparent;
  border-radius:50%;
  display:inline-block; vertical-align:-2px;
  animation: kspin .8s linear infinite;
}
@keyframes kspin{ to{ transform: rotate(360deg); } }

/* Autocomplete panel (matches box) */
.krypton-coverage .k-suggest{
  position: absolute; inset-inline: 0; top: calc(100% + 4px);
  z-index: 1005;
  display: none; max-height: 320px; overflow: auto;
  background: #fff; border: 1px solid var(--k-border,#e5e7eb);
  border-radius: 12px; box-shadow: 0 16px 38px rgba(2,6,23,.14);
}
.krypton-coverage .k-suggest.open{ display:block; }
.krypton-coverage .k-suggest ul{ list-style:none; margin:0; padding:4px; }
.krypton-coverage .k-suggest li{
  padding: 10px 12px; border-radius:8px;
  cursor:pointer; line-height:1.25;
}
.krypton-coverage .k-suggest li:hover,
.krypton-coverage .k-suggest li.active{
  background: var(--brand-tint);
}
.krypton-coverage .k-suggest .k-subl{
  display:block; font-size:12px; opacity:.65; margin-top:2px;
}

/* Mobile: allow wrapping; keep button full-width if tight */
@media (max-width: 520px){
  .krypton-coverage .k-search{ flex-wrap: wrap; padding: 10px; gap:8px; }
  .krypton-coverage .k-search .k-btn{ width:100%; order: 3; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .krypton-coverage .k-search,
  .krypton-coverage .k-search .k-btn,
  .krypton-coverage .k-search .k-search-clear{ transition:none !important; }
}

/* Bigger, comfier Krypton search */
.krypton-coverage .k-search{
  padding:16px 16px 16px 18px;     /* was 12px */
  border-radius:16px;              /* was 14px */
}
.krypton-coverage .k-search-ico{   /* magnifier bubble */
  width:32px; height:32px;         /* was 28 */
  font-size:18px;                  /* was 16 */
}
.krypton-coverage .k-search input{
  font: 600 16px/1.35 Inter, system-ui, sans-serif;  /* was 15px */
}
.krypton-coverage .k-search .k-search-clear{
  width:36px; height:36px;         /* was 32 */
  font-size:18px;
}
.krypton-coverage .k-search .k-btn{
  padding:12px 18px;               /* was 10x14 */
  border-radius:12px;              /* was 10 */
  font-size:15px;
}
@media (max-width:520px){
  .krypton-coverage .k-search .k-btn{ padding:13px 16px; }
}





/* --- Krypton Coverage: address autocomplete --- */
.krypton-coverage .k-search { position: relative; }
.krypton-coverage .k-suggest {
  position: absolute; inset-inline: 0; top: 100%;
  z-index: 1005;
  display: none; max-height: 320px; overflow: auto;
  background: #fff; border: 1px solid var(--k-border, #e5e7eb);
  border-top: 0; border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 24px rgba(2,6,23,.12);
  font-family: system-ui, Inter, sans-serif;
}
.krypton-coverage .k-suggest.open { display: block; }
.krypton-coverage .k-suggest ul { list-style: none; margin: 0; padding: 0; }
.krypton-coverage .k-suggest li {
  padding: 10px 12px; cursor: pointer; border-top: 1px solid #f1f5f9;
  line-height: 1.25;
}
.krypton-coverage .k-suggest li:hover,
.krypton-coverage .k-suggest li.active {
  background: #f8fafc;
}
.krypton-coverage .k-suggest .k-subl {
  display:block; font-size: 12px; opacity: .65; margin-top: 2px;
}





/* -----------------------------------------------------------
   Per-item brand tokens + pre-order styling (theme-safe)
   ----------------------------------------------------------- */

/* Default per-item tokens (fallbacks to current theme if unknown FNO) */
.k-fno-item{
  position: relative;
  --fno-primary: var(--theme-primary);
  --fno-primary-700: var(--theme-primary-700);
  --fno-tint: var(--theme-tint);
}

/* Map each FNO’s own palette onto the item via its data-fno */
.k-fno-item[data-fno="openserve"]   { --fno-primary:#16a34a; --fno-primary-700:#15803d; --fno-tint:#e9f8ee; }
.k-fno-item[data-fno="octotel"]     { --fno-primary:#f97316; --fno-primary-700:#ea580c; --fno-tint:#fff3e9; }
.k-fno-item[data-fno="vumatel"]     { --fno-primary:#ec008c; --fno-primary-700:#be0974; --fno-tint:#f3e8ff; }
.k-fno-item[data-fno="vumatelcore"] { --fno-primary:#ec008c; --fno-primary-700:#be0974; --fno-tint:#f3e8ff; }
.k-fno-item[data-fno="frogfoot"]    { --fno-primary:#0d9488; --fno-primary-700:#0f766e; --fno-tint:#e6fffb; }
.k-fno-item[data-fno="metrofibre"]  { --fno-primary:#2563eb; --fno-primary-700:#1d4ed8; --fno-tint:#e7efff; }
.k-fno-item[data-fno="thinkspeed"]  { --fno-primary:#0ea5e9; --fno-primary-700:#0284c7; --fno-tint:#e0f2fe; }
.k-fno-item[data-fno="dfa"]         { --fno-primary:#111827; --fno-primary-700:#0b1220; --fno-tint:#e5e7eb; }
.k-fno-item[data-fno="dfaductbank"]         { --fno-primary:#111827; --fno-primary-700:#0b1220; --fno-tint:#e5e7eb; }
.k-fno-item[data-fno="comtel"]      { --fno-primary:#dc2626; --fno-primary-700:#b91c1c; --fno-tint:#fee2e2; }
.k-fno-item[data-fno="lightspeed"]  { --fno-primary:#22c55e; --fno-primary-700:#16a34a; --fno-tint:#dcfce7; }
.k-fno-item[data-fno="lightstruck"] { --fno-primary:#eab308; --fno-primary-700:#ca8a04; --fno-tint:#fef9c3; }
.k-fno-item[data-fno="wefno"]       { --fno-primary:#06b6d4; --fno-primary-700:#0891b2; --fno-tint:#cffafe; }
.k-fno-item[data-fno="kryptonweb"]  { --fno-primary:#2EB872; --fno-primary-700:#23965c; --fno-tint:#e6f7ee; }
.k-fno-item[data-fno="cybersmart"] { --fno-primary:#24a3dd; --fno-primary-700:#1a51b0; --fno-tint:#d1e1ff; }

/* Pre-order state (works with either class) */
.k-fno-item.k-preorder,
.k-fno-item.k-pre{
  background: var(--fno-tint);
  border-color: var(--fno-primary-700);
}
.k-fno-item.k-preorder::after,
.k-fno-item.k-pre::after{
  content:"";
  position:absolute; inset:-3px;
  border:2px dashed var(--fno-primary-700);
  border-radius:10px; pointer-events:none;
}

/* Keep pre-order look when the item is selected/active */
.k-fno-item.k-preorder.k-active,
.k-fno-item.k-pre.k-active{
  background: var(--fno-tint);
  border-color: var(--fno-primary-700);
}

/* “Pre-order” pill — supports .k-prebadge and .k-pre-badge */
.k-fno-item.k-preorder .k-prebadge,
.k-fno-item.k-preorder .k-pre-badge,
.k-fno-item.k-pre       .k-prebadge,
.k-fno-item.k-pre       .k-pre-badge{
  position:absolute; top:-8px; left:-8px;
  padding:4px 6px; border-radius:999px; font-weight:800; font-size:10px; letter-spacing:.02em;
  background: var(--fno-tint);
  color: var(--fno-primary-700);
  border:1px dashed var(--fno-primary-700);
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}



/* Nicer tint on capable browsers */
@supports (background: color-mix(in srgb, white 0%, black 0%)) {
  .k-fno-item.k-preorder,
  .k-fno-item.k-pre{
    background: color-mix(in srgb, var(--fno-primary) 12%, white);
    border-color: color-mix(in srgb, var(--fno-primary) 55%, transparent);
  }
  .k-fno-item.k-preorder::after,
  .k-fno-item.k-pre::after{
    border-color: color-mix(in srgb, var(--fno-primary) 55%, transparent);
  }
  .k-fno-item.k-preorder .k-prebadge,
  .k-fno-item.k-preorder .k-pre-badge,
  .k-fno-item.k-pre       .k-prebadge,
  .k-fno-item.k-pre       .k-pre-badge{
    background: color-mix(in srgb, var(--fno-primary) 12%, white);
    border-color: color-mix(in srgb, var(--fno-primary) 55%, transparent);
    color: var(--fno-primary-700);
  }
}

/* Right panel stays tied to the selected FNO (container theme) */
.k-right .k-pre-pill{
  margin-left:8px; padding:4px 8px; border-radius:999px;
  background: var(--theme-tint);
  color: var(--theme-primary-700);
  font-weight:800; font-size:11px;
  border:1px dashed var(--theme-primary-700);
}
.k-cta.k-pre{ background: var(--theme-primary) !important; }
.k-cta.k-pre:hover{ background: var(--theme-primary-700) !important; }

/* Hide the dashed halo around pre-order FNO logos */
.k-fno-bar .k-fno-item.k-preorder::after,
.k-fno-bar .k-fno-item.k-pre::after{
  content: none !important;   /* prevents the pseudo-element from rendering */
  border: 0 !important;
}

/* Order button disabled state */
.k-cta[disabled],
.k-cta.is-disabled{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none; /* belt & braces */
  box-shadow:none;
}


/* Hidden by default */
.krypton-coverage .krypton-map-wrap[hidden] {
  display: none !important;
}

/* Optional: if you prefer a class instead of [hidden] */
.krypton-coverage:not(.k-map-visible) .krypton-map-wrap {
  display: none !important;
}


/* Top bar: toggle left, Show Map right */
.krypton-coverage .k-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Pill button that matches segmented toggle look/feel */
.krypton-coverage .k-mapbtn {
  --btn-bg: var(--seg-bg, #ffffff);
  --btn-fg: var(--seg-fg, #0f172a);
  --btn-bd: var(--seg-border, #e5e7eb);
  --btn-shadow: 0 1px 0 rgba(2,6,23,.04), 0 2px 8px rgba(2,6,23,.06);

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  cursor: pointer;
  box-shadow: var(--btn-shadow);
  transition: background .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .05s ease;
  user-select: none;
}

/* Icon */
.krypton-coverage .k-mapbtn .ico {
  width: 16px; height: 16px; display: inline-block;
}
.krypton-coverage .k-mapbtn .ico svg {
  width: 100%; height: 100%;
  display: block;
  stroke: currentColor; fill: none;
}

/* Hover/active */
.krypton-coverage .k-mapbtn:hover {
  border-color: var(--seg-border-hover, #cbd5e1);
  box-shadow: 0 2px 10px rgba(2,6,23,.10);
}
.krypton-coverage .k-mapbtn:active {
  transform: translateY(0.5px);
}

/* Focus ring (theme-aware) */
.krypton-coverage .k-mapbtn:focus-visible {
  outline: none;
  box-shadow:
    0 1px 0 rgba(2,6,23,.04),
    0 2px 8px rgba(2,6,23,.08),
    0 0 0 3px color-mix(in srgb, var(--theme-primary-600, #2563eb) 20%, transparent);
}

/* ON state = primary pill (like selected segment) */
.krypton-coverage .k-mapbtn.is-on {
  background: var(--k-cta-bg, var(--theme-primary-600, #16a34a)); /* fallback green */
  color: var(--k-cta-fg, #ffffff);
  border-color: var(--k-cta-bd, #15803d);
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--k-cta-bg, #16a34a) 18%, transparent),
    0 1px 0 rgba(2,6,23,.06);
}

/* Optional darker hover for ON */
.krypton-coverage .k-mapbtn.is-on:hover {
  background: var(--theme-primary-700, #1d4ed8);
  border-color: var(--theme-primary-800, #1e40af);
}

/* Hide iframe unless visible */
.krypton-coverage:not(.k-map-visible) .krypton-map-wrap { display: none !important; }


/* Input row in the search bar */
.krypton-coverage .k-search{
  display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; /* already mostly set */
}
.krypton-coverage .k-search .k-field{
  position: relative;
  display: flex; align-items: center;
  flex: 1 1 280px;            /* grows; gives input its own row if needed */
  min-height: 44px;           /* stable row height */
}

/* Icon cluster is anchored to the input row, not the whole .k-search */
.krypton-coverage .k-search .k-field .k-icons{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:8px;
  height:32px; z-index:1;
}

/* Reuse your magnifier bubble as-is inside the cluster */
.krypton-coverage .k-search .k-field .k-search-ico{
  position:static; /* important: cluster controls layout */
}

/* Geo bubble matches the magnifier */
.krypton-coverage .k-search .k-field .k-geo{
  width:32px; height:32px;
  border:1px solid var(--k-border,#e5e7eb);
  border-radius:8px; background:#fff; color:inherit;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(2,6,23,.06);
  cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease, opacity .15s ease, transform .05s ease;
}
.krypton-coverage .k-search .k-field .k-geo:hover{
  background:#f8fafc; box-shadow:0 6px 16px rgba(2,6,23,.10);
}
.krypton-coverage .k-search .k-field .k-geo.is-busy{ opacity:.65; cursor:wait; }
.krypton-coverage .k-search .k-field .k-geo.is-ok{
  background: var(--brand,#2EB872); color:#fff; border-color: var(--brand-700,#23965c);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand,#2EB872) 18%, transparent);
}

/* Input padding to clear the icon cluster */
.krypton-coverage .k-search .k-field.has-geo input{
  padding-left: 96px; /* 12 + 32 (geo) + 8 + 32 (magnifier) + ~12 breathing */
}

/* Button behavior on mobile: moves to its own row, below the input row */
@media (max-width:520px){
  .krypton-coverage .k-search .k-btn{
    width:100%;
    order: 3;              /* forces it below the field row */
  }
  .krypton-coverage .k-search .k-field{
    flex-basis: 100%;
  }
  .krypton-coverage .k-search .k-field.has-geo input{
    padding-left: 100px;   /* tiny bump for smaller gutters */
  }
}



/* Optional: schedule badge if you decide to surface timing in the UI */
.k-badge--schedule{
  position:absolute; top:-10px; right:16px;
  padding:6px 8px; font-size:11px; font-weight:800; border-radius:10px;
  background:#0ea5e9; color:#fff; letter-spacing:.02em;
}

/* Same skeleton as your pre-order badge */
.k-fno-item .k-pre-badge,
.k-fno-item .k-promo-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  color:#fff;
  z-index:2;
}

/* keep your pre-order color as-is */
.k-fno-item .k-pre-badge{
  background:#f59e0b; /* example */
}

/* promo uses a fixed, per-item CSS var so it never changes with global theme */
.k-fno-item .k-promo-badge{
  background: var(--promo-badge-bg, #0ea5e9);
}


/* Make sure the badge’s positioning is relative to each icon tile */
.k-fno-item { position: relative; }

/* Prevent badges from stretching */
.k-fno-item .k-pre-badge,
.k-fno-item .k-promo-badge{
  width: auto;
  white-space: nowrap;
  display: inline-flex; /* ensure not block */
}

/* Pre-order: top-left */
.k-fno-item .k-pre-badge{
  left: -6px;
  right: auto;
}

/* Promo: top-right (unchanged) */
.k-fno-item .k-promo-badge{
  right: -6px;
  left: auto;
}

/* Keep NOTES rows top-aligned, independent from Perks */
.k-acc-list li{
  align-items: flex-start;         /* was center via the combined rule */
}

/* Lock the bullet’s size so long text can't squash it */
.k-acc-bullet{
  flex: 0 0 8px;                   /* no shrink, no grow, fixed 8px basis */
  width: 8px;
  height: 8px;
  aspect-ratio: 1 / 1;             /* guarantees a circle */
  border-radius: 50%;
  background: var(--theme-primary);
  display: inline-block;
  align-self: flex-start;          /* keeps it aligned when lines wrap */
  margin-top: 7px;                 /* matches your visual offset */
}

/* Allow the text block to wrap freely next to the fixed bullet */
.k-acc-list li > div{
  flex: 1 1 auto;
  min-width: 0;                    /* prevents overflow in narrow widths */
}

/* --- Global Black Friday banner above the FNO chips --- */
.k-bf-banner{
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #0b0b0b;         /* fixed, not theme-driven */
  color: #fff;
  font: 800 12px/1.2 var(--k-font, Inter, system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
}
.k-bf-banner .k-bf-spark{ opacity: .85; }

/* --- Optional per-logo Black Friday pill (bottom-center) --- */

/* ensure the badge can sit below the logo without overlapping */
.k-fno-item {
  position: relative;
  padding-bottom: 14px; /* add some space for the badge */
}

.k-fno-item .k-bf-badge{
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: 11px; font-weight: 800; line-height: 1;
  border-radius: 999px;
  color: #fff;
  background: #111;                 /* fixed black */
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  z-index: 2;
  white-space: nowrap;
}

/* Fancy Black Friday banner */
.k-bf-banner{
  --bf-bg1: #0d0d0f;
  --bf-bg2: #1a1a22;
  --bf-accent: #ffce3a;     /* gold accent */
  --bf-glow: rgba(255,206,58,.35);
  --bf-ring: rgba(255,255,255,.08);

  position: relative;
  width: 100%;
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  color: #fff;
  font: 800 13px/1.15 var(--k-font, Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px; justify-content: center;

  /* Depth + gradient base */
  background:
    radial-gradient(120% 180% at 80% -30%, var(--bf-glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--bf-bg2), var(--bf-bg1));
  box-shadow:
    0 10px 24px rgba(0,0,0,.25),
    inset 0 0 0 1px var(--bf-ring);

  /* Subtle glow ring */
  outline: 1px solid transparent;
  backdrop-filter: saturate(1.05);
}

/* Shimmer highlight sweep */
.k-bf-banner::after{
  content:"";
  position:absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%);
  background-size: 220% 220%;
  mix-blend-mode: screen;
  pointer-events:none;
  animation: bfShimmer 3.2s ease-in-out infinite;
}

/* Confetti speckles */
.k-bf-banner::before{
  content:"";
  position:absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(2px 2px at 12% 28%, rgba(255,206,58,.5) 50%, transparent 55%),
    radial-gradient(2px 2px at 78% 62%, rgba(255,88,88,.45) 50%, transparent 55%),
    radial-gradient(2px 2px at 35% 75%, rgba(120,211,255,.45) 50%, transparent 55%),
    radial-gradient(2px 2px at 58% 22%, rgba(255,206,58,.5) 50%, transparent 55%);
  opacity:.55;
  filter: drop-shadow(0 0 2px rgba(255,206,58,.35));
  pointer-events:none;
}

.k-bf-banner strong{
  font-weight: 900;
  letter-spacing: .08em;
  background: linear-gradient(180deg, #fff, #f2f2f2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* chrome/safari gradient text */
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.k-bf-banner .k-bf-spark{
  font-size: 1rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px var(--bf-glow));
  transform-origin: center;
  animation: bfSpark 2.6s ease-in-out infinite;
}

/* Animations */
@keyframes bfShimmer{
  0%   { background-position: -120% -120%; }
  50%  { background-position:  10%  10%; }
  100% { background-position: 220% 220%; }
}
@keyframes bfSpark{
  0%,100% { transform: rotate(0deg) scale(1); opacity:.95; }
  40%     { transform: rotate(-8deg) scale(1.05); opacity:1; }
  70%     { transform: rotate(6deg) scale(1.02); opacity:.98; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .k-bf-banner::after,
  .k-bf-banner .k-bf-spark{ animation: none; }
}

/* Optional: dark theme tweak hook */
.krypton-coverage[data-theme="openserve"] .k-bf-banner{
  --bf-bg1: #0b0b10;
  --bf-bg2: #13131a;
}






/* Fancier Black Friday pill (bottom-center on each FNO logo) */
.k-fno-item { position: relative; }

.k-fno-item .k-bf-badge{
  position: absolute;
  bottom: -6px;                 /* bottom-center instead of top */
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font: 800 11px/1 var(--k-font, Inter, system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;

  /* neon gradient + depth */
  background: linear-gradient(135deg, #141414 0%, #ff2a6d 40%, #ffcc00 95%);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow:
    0 8px 18px rgba(0,0,0,.35),
    0 0 12px rgba(255, 106, 0, .25),
    inset 0 0 0 1px rgba(255,255,255,.06);
  isolation: isolate;           /* keep internal glow contained */
  overflow: hidden;
  z-index: 3;
  will-change: transform, opacity;
}

/* Sheen sweep */
.k-fno-item .k-bf-badge::before{
  content: "";
  position: absolute; inset: -1px;
  background:
    radial-gradient(130px 22px at -60px 50%, rgba(255,255,255,.32), transparent 60%);
  mix-blend-mode: screen;
  animation: k-bf-sheen 3s linear infinite;
  pointer-events: none;
}

/* Twinkle dots */
.k-fno-item .k-bf-badge .tw{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255,255,255,.15) 40%, transparent 65%);
  box-shadow:
    0 0 8px rgba(255,255,255,.8),
    0 0 14px rgba(255,170,0,.45);
  opacity: .9;
  animation: k-bf-twinkle 2.6s ease-in-out infinite;
}
.k-fno-item .k-bf-badge .tw:nth-of-type(2){ animation-delay: .8s; width:7px; height:7px; opacity:.8; }
.k-fno-item .k-bf-badge .tw:nth-of-type(3){ animation-delay: 1.6s; width:6px; height:6px; opacity:.75; }

/* Hover/Focus lift (desktop) */
@media (hover:hover){
  .k-fno-item:hover .k-bf-badge,
  .k-fno-item:focus-within .k-bf-badge{
    transform: translateX(-50%) translateY(-1px) scale(1.02);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .k-fno-item .k-bf-badge::before,
  .k-fno-item .k-bf-badge .tw{ animation: none; }
}

/* Keyframes */
@keyframes k-bf-sheen{
  0%   { transform: translateX(0);    opacity:.55; }
  45%  { transform: translateX(140%); opacity:.35; }
  46%  { opacity: 0; }
  100% { transform: translateX(0);    opacity:.55; }
}
@keyframes k-bf-twinkle{
  0%,100% { transform: scale(.9); opacity:.65; }
  50%     { transform: scale(1.18); opacity:1; }
}