/* ==========================================================================
   OXIN RTL v3 — services: alert bands, the services rack, service details,
   cancellation. Built from the oxin.css tokens.
   ========================================================================== */

/* ---- alert band (unpaid / overdue / pending cancellation) -------------- */
.ox-band{--c:var(--amber);--ct:var(--amber-tint);--ci:var(--amber-ink);position:relative;display:flex;align-items:center;gap:var(--s4);
  margin-block-end:var(--s5);padding:var(--s4) var(--s5);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(90deg,var(--ct),color-mix(in srgb,var(--ct) 40%,var(--surface)));border:1px solid color-mix(in srgb,var(--c) 35%,var(--line))}
.ox-band::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--c)}
.ox-band.is-bad{--c:var(--red);--ct:var(--red-tint);--ci:var(--red-ink)}
.ox-band.is-info{--c:var(--blue);--ct:var(--blue-tint);--ci:var(--blue)}
.ox-band-ic{position:relative;flex:none;display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:14px;background:var(--c);color:#fff;font-size:var(--fs-500);
  box-shadow:0 8px 20px -10px var(--c)}
.ox-band-ic::after{content:"";position:absolute;inset:-4px;border-radius:17px;border:2px solid var(--c);opacity:0;animation:ox-band-ping 2.4s ease-out infinite}
@keyframes ox-band-ping{0%{opacity:.5;transform:scale(.92)}80%,100%{opacity:0;transform:scale(1.18)}}
.ox-band-tx{flex:1;min-inline-size:0;line-height:1.75}
.ox-band-tx>b{display:flex;align-items:center;gap:8px;font-size:var(--fs-400);font-weight:800;color:var(--ci)}
.ox-band-tx p,.ox-band-body,.ox-band-body p{margin:0;font-size:var(--fs-300);color:var(--ink-2)}
.ox-band-body .btn,.ox-band-body .list-group{display:none}
.ox-band-count{display:inline-grid;place-items:center;min-inline-size:22px;block-size:22px;padding-inline:6px;border-radius:999px;background:var(--c);color:#fff;font-size:var(--fs-100)}
.ox-band-btn{flex:none;display:inline-flex;align-items:center;gap:8px;block-size:42px;padding-inline:18px;border-radius:12px;background:var(--c);color:#fff!important;
  font-size:var(--fs-300);font-weight:800;text-decoration:none!important;box-shadow:0 10px 22px -12px var(--c);transition:filter .15s,transform .15s}
.ox-band-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.ox-band-btn i{font-size:var(--fs-200);transition:translate .2s var(--ease)}
.ox-band-btn:hover i{translate:-3px 0}
.ox-band .ox-check{display:inline-flex;gap:8px;margin-block-start:8px;font-size:var(--fs-300);font-weight:600}

/* ---- services list ------------------------------------------------------ */
.ox-svc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-block-end:var(--s5)}
.ox-body .ox-svc-title{margin:0;font-size:var(--fs-800);font-weight:800}
.ox-svc-sub{margin:4px 0 0;color:var(--ink-3);font-size:var(--fs-300)}
.ox-svc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-block-end:var(--s4);padding:var(--s2);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.ox-svc-filters{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.ox-svc-filters button{display:inline-flex;align-items:center;gap:8px;block-size:38px;padding-inline:14px;border:0;border-radius:10px;background:none;color:var(--ink-3);
  font:700 var(--fs-200) var(--font);cursor:pointer;transition:background .15s,color .15s}
.ox-svc-filters button:hover{color:var(--ink);background:var(--surface-2)}
.ox-svc-filters button.is-on{background:var(--ink);color:var(--surface)}
.ox-svc-filters button span{display:inline-grid;place-items:center;min-inline-size:22px;block-size:20px;padding-inline:6px;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);font-size:var(--fs-100)}
.ox-svc-filters button>i{inline-size:7px;block-size:7px;border-radius:50%;background:var(--ink-3)}
.ox-svc-filters button>i.is-ok{background:var(--teal)}.ox-svc-filters button>i.is-warn{background:var(--amber)}.ox-svc-filters button>i.is-bad{background:var(--red)}
.ox-svc-search{position:relative;display:flex;align-items:center;margin:0;min-inline-size:220px}
.ox-svc-search i{position:absolute;inset-inline-start:12px;color:var(--ink-3);pointer-events:none}
.ox-svc-search input,.ox-svc-sort select{inline-size:100%;block-size:38px;padding-inline:36px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);font:500 var(--fs-200) var(--font)}
.ox-svc-sort select{padding-inline:12px 30px}
.ox-svc-search input:focus,.ox-svc-sort select:focus{outline:0;border-color:var(--blue);background:var(--surface);box-shadow:0 0 0 3px var(--blue-tint)}

.ox-svc-list{display:grid;gap:10px}
.ox-unit{--led:var(--ink-3);position:relative;display:grid;grid-template-columns:auto minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.1fr) auto auto;align-items:center;gap:var(--s4);
  padding:14px 26px 14px 20px;border-radius:14px;background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface-2) 60%,var(--surface)));
  border:1px solid var(--line);color:var(--ink)!important;text-decoration:none!important;box-shadow:var(--sh-1);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s;animation:ox-up .45s var(--ease) both}
.ox-unit:nth-child(2){animation-delay:.04s}.ox-unit:nth-child(3){animation-delay:.08s}.ox-unit:nth-child(4){animation-delay:.12s}.ox-unit:nth-child(n+5){animation-delay:.16s}
.ox-unit:hover{transform:translateX(-4px);border-color:color-mix(in srgb,var(--blue) 40%,var(--line));box-shadow:var(--sh-2)}
.ox-unit[hidden]{display:none}
.ox-unit.is-active{--led:var(--teal)}.ox-unit.is-pending{--led:var(--amber)}.ox-unit.is-suspended{--led:var(--red)}
.ox-unit-ears{position:absolute;inset-block:8px;inset-inline-end:8px;inline-size:8px;border-radius:4px;
  background:radial-gradient(circle,var(--line-2) 1.6px,transparent 2px) center 4px/8px 12px repeat-y;opacity:.9}
.ox-unit-led{position:absolute;inset-block-start:12px;inset-inline-start:12px;inline-size:7px;block-size:7px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led)}
.ox-unit.is-active .ox-unit-led{animation:ox-led-breathe 2.6s ease-in-out infinite}
@keyframes ox-led-breathe{50%{opacity:.45}}
.ox-unit-ic{display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:12px;background:var(--blue-tint);color:var(--blue);font-size:var(--fs-500)}
.ox-unit.is-suspended .ox-unit-ic{background:var(--red-tint);color:var(--red)}
.ox-unit.is-pending .ox-unit-ic{background:var(--amber-tint);color:var(--amber)}
.ox-unit:not(.is-active):not(.is-pending):not(.is-suspended) .ox-unit-ic{background:var(--surface-2);color:var(--ink-3)}
.ox-unit-main{display:flex;flex-direction:column;min-inline-size:0;line-height:1.5}
.ox-unit-name{font-size:var(--fs-400);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ox-unit-addr{font:500 var(--fs-200)/1.6 var(--mono);color:var(--ink-3);text-align:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ox-unit-price,.ox-unit-due{display:flex;flex-direction:column;line-height:1.5;min-inline-size:0}
.ox-unit-price b{font-size:var(--fs-300);font-weight:800;white-space:nowrap}
.ox-unit-price small,.ox-unit-due small{font-size:var(--fs-100);color:var(--ink-3)}
.ox-unit-due b{font-size:var(--fs-200);font-weight:700}
.ox-unit-gauge{display:block;block-size:5px;margin-block:5px 2px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.ox-unit-gauge.is-lg{block-size:7px}
.ox-unit-gauge i{display:block;block-size:100%;inline-size:0;border-radius:inherit;background:linear-gradient(90deg,var(--teal),#34D399);transition:inline-size .9s var(--ease)}
.ox-unit-gauge i.is-warn{background:linear-gradient(90deg,var(--amber),#FBBF24)}
.ox-unit-gauge i.is-bad{background:linear-gradient(90deg,var(--red),#F87171)}
.ox-unit-go{display:grid;place-items:center;inline-size:32px;block-size:32px;border-radius:50%;background:var(--surface-2);color:var(--ink-3);transition:background .2s,color .2s}
.ox-unit:hover .ox-unit-go{background:var(--blue);color:var(--on-blue)}
.ox-svc-empty{display:flex;align-items:center;justify-content:center;gap:10px;padding:var(--s8) var(--s4);color:var(--ink-3);text-align:center}
.ox-svc-empty[hidden]{display:none}
.ox-svc-empty.is-first{flex-direction:column;border:1.5px dashed var(--line-2);border-radius:var(--r-lg)}
.ox-svc-empty-ic{display:grid;place-items:center;inline-size:64px;block-size:64px;border-radius:18px;background:var(--blue-tint);color:var(--blue);font-size:26px}
.ox-svc-empty h2{margin:var(--s2) 0 0;font-size:var(--fs-600)}

/* ---- service details: hero ---------------------------------------------- */
.ox-svc-hero{--led:#94A3B8;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s5);overflow:hidden;isolation:isolate;
  margin-block-end:var(--s4);padding:var(--s6) var(--s6);border-radius:var(--r-lg);color:#E2E8F0;
  background:linear-gradient(135deg,#0B1424 0%,#0E1B33 60%,#0B2230 100%);box-shadow:0 28px 56px -30px rgba(11,20,36,.6)}
.ox-svc-hero.is-active{--led:#34D399}.ox-svc-hero.is-pending{--led:#FBBF24}.ox-svc-hero.is-suspended{--led:#F87171}
.ox-svc-hero-grid{position:absolute;inset:0;z-index:-1;opacity:.45;
  background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 26px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/26px 100%;
  -webkit-mask-image:radial-gradient(ellipse at 85% 30%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 85% 30%,#000,transparent 70%)}
.ox-svc-hero::after{content:"";position:absolute;z-index:-1;inset-block-start:-60%;inset-inline-end:-15%;inline-size:55%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--led) 30%,transparent),transparent 65%)}
.ox-svc-hero-main{display:flex;align-items:center;gap:var(--s4);min-inline-size:0;flex:1}
.ox-svc-hero-ic{position:relative;flex:none;display:grid;place-items:center;inline-size:64px;block-size:64px;border-radius:18px;font-size:26px;color:#fff;
  background:linear-gradient(160deg,#1E3A64,#13284A);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.ox-svc-led{position:absolute;inset-block-start:-3px;inset-inline-end:-3px;inline-size:14px;block-size:14px;border-radius:50%;background:var(--led);border:3px solid #0E1B33;box-shadow:0 0 12px var(--led)}
.ox-svc-hero.is-active .ox-svc-led{animation:ox-led-breathe 2.4s ease-in-out infinite}
.ox-svc-hero-tx{min-inline-size:0}
.ox-svc-hero-plates{display:flex;flex-wrap:wrap;gap:6px;margin-block-end:6px}
.ox-svc-plate{display:inline-flex;align-items:center;gap:6px;block-size:26px;padding-inline:10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:var(--fs-100);font-weight:600;color:#CBD5E1}
.ox-svc-plate.is-status{color:#fff}
.ox-svc-dot{inline-size:7px;block-size:7px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led)}
.ox-body .ox-svc-hero-name{margin:0;font-size:var(--fs-800);font-weight:800;color:#F8FAFC;line-height:1.3;overflow-wrap:anywhere}
.ox-svc-hero-addr{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:10px}
.ox-copy{display:inline-flex;align-items:center;gap:8px;block-size:34px;padding-inline:12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  color:#E2E8F0;font-size:var(--fs-200);cursor:pointer;transition:background .15s,border-color .15s}
.ox-copy:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.ox-copy>i:first-child{color:#7DD3FC}
.ox-copy-i{color:#64748B;font-size:var(--fs-100)}
.ox-copy.is-copied{border-color:#34D399}
.ox-copy.is-copied .ox-copy-i::before{content:"\f00c";color:#34D399}
.ox-svc-hero-actions{display:flex;flex-wrap:wrap;gap:8px}
.ox-deck-btn.is-danger{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.35);color:#FCA5A5!important}
.ox-deck-btn.is-danger:hover{background:rgba(248,113,113,.2)}
.ox-deck-btn.is-disabled{opacity:.5;pointer-events:none}

/* billing strip */
.ox-svc-bill{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:1px;margin-block-end:var(--s5);border-radius:var(--r-lg);overflow:hidden;
  background:var(--line);border:1px solid var(--line);box-shadow:var(--sh-1)}
.ox-svc-bill-i{display:flex;flex-direction:column;gap:2px;padding:var(--s4) var(--s5);background:var(--surface);line-height:1.6;min-inline-size:0}
.ox-svc-bill-k{display:flex;align-items:center;gap:6px;font-size:var(--fs-100);font-weight:600;color:var(--ink-3)}
.ox-svc-bill-k i{color:var(--blue)}
.ox-svc-bill-i>b{font-size:var(--fs-400);font-weight:800;overflow-wrap:anywhere}
.ox-svc-bill-i>small{font-size:var(--fs-100);color:var(--ink-3)}
.ox-svc-bill-i.is-due{background:linear-gradient(180deg,var(--surface),var(--blue-tint))}
.ox-svc-bill-i.is-bad b{color:var(--red-ink)}
.ox-svc-hook{margin-block-end:var(--s4)}

/* tabs as a segmented rail */
.ox-body .ox-svc-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 var(--s3);padding:5px;border:1px solid var(--line)!important;border-radius:14px;background:var(--surface)}
.ox-body .ox-svc-tabs .nav-item{margin:0}
.ox-body .ox-svc-tabs .nav-link{display:inline-flex;align-items:center;gap:8px;block-size:40px;padding-inline:16px;border:0!important;border-radius:10px!important;background:none;
  color:var(--ink-3)!important;font-size:var(--fs-300);font-weight:700;transition:background .15s,color .15s}
.ox-body .ox-svc-tabs .nav-link:hover{background:var(--surface-2);color:var(--ink)!important}
.ox-body .ox-svc-tabs .nav-link.active{background:var(--blue)!important;color:var(--on-blue)!important;box-shadow:0 8px 18px -10px var(--blue)}
.ox-svc-panes>.tab-pane{animation:ox-up .35s var(--ease) both}
.ox-svc-panes>.tab-pane:not(#manage){padding:var(--s5);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.ox-svc-links{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:var(--s4)}

/* key/value grid */
.ox-kvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:10px}
.ox-kv{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);min-inline-size:0;line-height:1.6}
.ox-kv.is-wide{grid-column:1/-1}
.ox-kv>span{font-size:var(--fs-100);font-weight:600;color:var(--ink-3)}
.ox-kv>b{font-size:var(--fs-300);font-weight:700;overflow-wrap:anywhere}
.ox-kv>b.ox-mono{text-align:end}
.ox-kvgrid.is-compact .ox-kv{padding:8px 12px}

/* configurable options as spec tiles */
.ox-spec-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px}
.ox-spec-tile{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.ox-spec-tile::before{content:"";position:absolute;inset-block:10px;inset-inline-start:0;inline-size:3px;border-radius:0 3px 3px 0;background:var(--blue)}
.ox-spec-tile span{font-size:var(--fs-100);font-weight:600;color:var(--ink-3)}
.ox-spec-tile b{font-size:var(--fs-300);font-weight:800}

/* module (Virtualizor) console frame */
.ox-console-frame{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
.ox-console-frame-bar{display:flex;align-items:center;gap:12px;block-size:42px;padding-inline:16px;direction:ltr;background:linear-gradient(180deg,#111A2B,#0B1220);color:#94A3B8;font:600 12px/1 var(--mono)}
.ox-console-frame-bar .ox-con-dots{display:flex;gap:6px}
.ox-console-frame-bar .ox-con-dots i{inline-size:10px;block-size:10px;border-radius:50%}
.ox-console-frame-bar .ox-con-dots i:nth-child(1){background:#F87171}.ox-console-frame-bar .ox-con-dots i:nth-child(2){background:#FBBF24}.ox-console-frame-bar .ox-con-dots i:nth-child(3){background:#34D399}
.ox-console-frame-t{flex:1;text-align:center;font-family:var(--font);direction:rtl}
.ox-console-frame-s{display:inline-flex;align-items:center;gap:6px;color:#34D399;font-family:var(--font)}
.ox-module-area{text-align:start!important;min-block-size:200px}
.ox-module-area iframe{display:block;inline-size:100%!important;border:0!important;background:transparent!important}

/* usage rings */
.ox-usage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--s4)}
.ox-usage-i{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border-radius:14px;background:var(--surface-2)}
.ox-usage-i h3{margin:0;font-size:var(--fs-400)}
.ox-usage-i p{margin:0;color:var(--ink-3);font-size:var(--fs-200)}
.ox-ring{--v:calc(var(--p,0) * 1%);display:grid;place-items:center;inline-size:84px;block-size:84px;border-radius:50%;
  background:radial-gradient(closest-side,var(--surface) 76%,transparent 78% 100%),conic-gradient(var(--blue) var(--v),var(--line) 0)}
.ox-ring b{font-size:var(--fs-300);font-weight:800}

/* downloads, add-ons, change password */
.ox-svc-sub-card .ox-card-title i{color:var(--blue)}
.ox-dl-list,.ox-addon-list{display:grid;gap:10px}
.ox-dl{display:flex;align-items:center;gap:var(--s3);padding:12px 14px;border-radius:12px;background:var(--surface-2)}
.ox-dl-ic{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:10px;background:var(--blue-tint);color:var(--blue)}
.ox-dl-tx{flex:1;min-inline-size:0}.ox-dl-tx p{margin:0;font-size:var(--fs-200);color:var(--ink-3)}
.ox-addon-i{padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.ox-addon-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-block-end:10px}
.ox-addon-f{margin-block-start:10px}
.ox-pw-form{max-inline-size:560px}
.ox-pw-row{display:flex;gap:8px}
.ox-pw-row .form-control{flex:1}
.ox-form-actions{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:var(--s4)}
.ox-btn-danger{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}
.ox-btn-danger:hover{filter:brightness(1.08)}

/* ---- cancellation ------------------------------------------------------- */
.ox-cancel{max-inline-size:760px}
.ox-cancel-head{display:flex;align-items:center;gap:var(--s4);margin-block-end:var(--s5)}
.ox-cancel-ic{display:grid;place-items:center;inline-size:56px;block-size:56px;border-radius:16px;background:var(--red-tint);color:var(--red);font-size:22px}
.ox-body .ox-cancel-head h1{margin:0;font-size:var(--fs-700)}
.ox-cancel-head p{margin:4px 0 0;color:var(--ink-2)}
.ox-cancel-form{padding:var(--s5)}
.ox-cancel-type{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:var(--s4) 0;padding:0;border:0}
.ox-cancel-type legend{grid-column:1/-1;margin-block-end:8px;font-size:var(--fs-300);font-weight:700}
.ox-choice{position:relative;margin:0;cursor:pointer}
.ox-choice input{position:absolute;opacity:0}
.ox-choice span{display:flex;flex-direction:column;gap:4px;block-size:100%;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--surface);transition:all .15s}
.ox-choice span i{font-size:var(--fs-500);color:var(--blue)}
.ox-choice.is-danger span i{color:var(--red)}
.ox-choice small{font-size:var(--fs-100);color:var(--ink-3)}
.ox-choice input:checked+span{border-color:var(--blue);background:var(--blue-tint);box-shadow:0 0 0 1px var(--blue)}
.ox-choice.is-danger input:checked+span{border-color:var(--red);background:var(--red-tint);box-shadow:0 0 0 1px var(--red)}
.ox-choice input:focus-visible+span{outline:2px solid var(--ring);outline-offset:2px}
.ox-result{max-inline-size:520px;margin:var(--s8) auto;padding:var(--s8) var(--s6);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);text-align:center}
.ox-result-ic{display:inline-grid;place-items:center;inline-size:68px;block-size:68px;border-radius:50%;font-size:28px;background:var(--teal-tint);color:var(--teal)}
.ox-result.is-bad .ox-result-ic{background:var(--red-tint);color:var(--red)}
.ox-body .ox-result h1{margin:var(--s4) 0;font-size:var(--fs-500);line-height:1.8}

@media (max-width:1100px){
  .ox-unit{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic main st" "ic price due";row-gap:8px}
  .ox-unit-ic{grid-area:ic}.ox-unit-main{grid-area:main}.ox-unit-status{grid-area:st}.ox-unit-price{grid-area:price}.ox-unit-due{grid-area:due}
  .ox-unit-go{display:none}
}
@media (max-width:640px){
  .ox-unit{grid-template-columns:auto 1fr;grid-template-areas:"ic main" "st st" "price due";padding:14px 22px 14px 14px}
  .ox-band{flex-wrap:wrap}
  .ox-band-btn{inline-size:100%;justify-content:center}
  .ox-svc-hero{padding:var(--s5)}
  .ox-body .ox-svc-hero-name{font-size:var(--fs-600)}
  .ox-cancel-type{grid-template-columns:1fr}
  .ox-svc-search{min-inline-size:0;flex:1}
}
@media (prefers-reduced-motion:reduce){
  .ox-band-ic::after,.ox-unit,.ox-unit-led,.ox-svc-led,.ox-svc-panes>.tab-pane{animation:none!important}
}

/* ---- fixes: legacy spacing aliases, sidebar cards, keyboard hints ---------- */
:root{--space-1:var(--s1);--space-2:var(--s2);--space-3:var(--s3);--space-4:var(--s4);--space-5:var(--s5);--space-6:var(--s6);--space-8:var(--s8)}
.o-spacer{flex:1}
.u-mbe-4{margin-block-end:var(--s4)}
.o-chip{display:inline-grid;place-items:center;min-inline-size:22px;block-size:20px;padding-inline:6px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:var(--fs-100);font-weight:700}
.o-sidebar-head .o-row{gap:var(--s3)!important}
.o-sidebar-head .o-row>i:first-child{display:grid;place-items:center;flex:none;inline-size:30px;block-size:30px;border-radius:9px;background:var(--blue-tint);color:var(--blue);font-size:var(--fs-200)}
.o-sidebar-head .card-minimise{color:var(--ink-3);font-size:var(--fs-100);cursor:pointer}
.o-sidebar-card .collapsable-card-body>div:not(.o-sidebar-list){padding:var(--s4) var(--s5)!important;font-size:var(--fs-300);line-height:1.9;color:var(--ink-2)}
.o-sidebar-card .collapsable-card-body strong{color:var(--ink)}
.o-sidebar-card .collapsable-card-body .btn{margin-block-start:var(--s2)}
.ox-body kbd,.ox-pal kbd,.ox-search-trigger kbd{display:inline-block;min-inline-size:22px;padding:1px 6px!important;border:1px solid var(--line-2)!important;border-block-end-width:2px!important;border-radius:6px!important;background:var(--surface)!important;color:var(--ink-2)!important;font:700 11px/1.6 var(--mono)!important;text-align:center;box-shadow:none!important;vertical-align:middle}
.ox-pal-foot{color:var(--ink-3)}

/* mega menu: country flags on location chips */
.ox-city{align-items:center!important;justify-content:flex-start!important;gap:10px!important}
.ox-city>span{flex:1;min-inline-size:0;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ox-flag{flex:none;inline-size:22px;block-size:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(14,23,38,.12),0 1px 2px rgba(14,23,38,.15)}
.ox-store-sub{margin-inline-start:8px;padding:1px 8px;border-radius:999px;background:var(--surface-2);font-size:var(--fs-100);font-weight:600;color:var(--ink-3)}