/* ==========================================================================
   OXIN RTL v3 — responsive pass. Loaded last. Fixes found by auditing every
   page at 360 / 390 / 768 / 1024 px: horizontal overflow, text below 12px,
   tap targets under 40px, and long stacks on phones.
   ========================================================================== */

/* never scroll sideways (clip, not hidden: sticky headers keep working) */
/* one scroller only: the document. body must not become a scroll box
   (theme.min.css gives html/body height:100%, which with any overflow-x
   other than visible/clip turns body into a second scrollbar) */
html,body,body.ox-body{overflow-x:clip;overflow-y:visible}
html,body.ox-body{height:auto;min-block-size:100%}
.ox-main,#order-standard_cart{max-inline-size:100%}
#order-standard_cart .row{margin-inline:0}
#order-standard_cart .row>[class*="col-"]{padding-inline:6px}

/* ---- homepage: product families ---------------------------------------- */
.ox-fams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.ox-fam{position:relative;display:flex;flex-direction:column;gap:10px;padding:var(--s6) var(--s5) var(--s5);border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.ox-fam:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--blue) 35%,var(--line))}
.ox-fam::before{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:var(--s5);inline-size:44px;block-size:3px;border-radius:0 0 3px 3px;background:var(--blue)}
.ox-fam.is-intl::before{background:var(--teal)}.ox-fam.is-cloud::before{background:#7C3AED}.ox-fam.is-ded::before{background:var(--ink)}
.ox-fam.is-colo::before{background:var(--amber)}.ox-fam.is-host::before{background:#EC4899}
.ox-fam-ic{display:grid;place-items:center;inline-size:48px;block-size:48px;border-radius:14px;background:var(--blue-tint);color:var(--blue);font-size:var(--fs-500)}
.ox-fam.is-intl .ox-fam-ic{background:var(--teal-tint);color:var(--teal)}
.ox-fam.is-cloud .ox-fam-ic{background:color-mix(in srgb,#7C3AED 12%,var(--surface));color:#7C3AED}
.ox-fam.is-ded .ox-fam-ic{background:var(--surface-2);color:var(--ink)}
.ox-fam.is-colo .ox-fam-ic{background:var(--amber-tint);color:var(--amber)}
.ox-fam.is-host .ox-fam-ic{background:color-mix(in srgb,#EC4899 12%,var(--surface));color:#DB2777}
.ox-body .ox-fam h3{margin:4px 0 0;font-size:var(--fs-600);font-weight:800}
.ox-fam p{margin:0;font-size:var(--fs-300);color:var(--ink-3);line-height:1.8}
.ox-fam-count{align-self:flex-start;padding:2px 10px;border-radius:999px;background:var(--surface-2);font-size:var(--fs-200);font-weight:600;color:var(--ink-2)}
.ox-fam-count b{font-weight:800;color:var(--ink)}
.ox-fam-flags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ox-fam-flags .ox-flag{inline-size:24px;block-size:18px}
.ox-fam-more{padding:0 8px;border-radius:999px;background:var(--surface-2);font-size:var(--fs-100);font-weight:700;color:var(--ink-3)}
.ox-fam-subs{display:flex;flex-wrap:wrap;gap:6px}
.ox-fam-subs a{display:inline-flex;align-items:center;min-block-size:32px;padding:4px 10px;border-radius:9px;background:var(--surface-2);font-size:var(--fs-200);font-weight:600;
  color:var(--ink-2)!important;text-decoration:none!important;transition:background .15s,color .15s}
.ox-fam-subs a:hover{background:var(--blue-tint);color:var(--blue)!important}
.ox-fam-go{margin-block-start:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-block-size:42px;padding-inline:16px;border-radius:11px;
  background:var(--blue);color:var(--on-blue)!important;font-size:var(--fs-300);font-weight:800;text-decoration:none!important;transition:filter .15s}
.ox-fam-go:hover{filter:brightness(1.08)}
.ox-body .ox-hero h1,.ox-body h1,.ox-body h2{text-wrap:balance}

/* ---- tablet --------------------------------------------------------------- */
@media (max-width:1100px){.ox-fams{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- phones --------------------------------------------------------------- */
@media (max-width:767px){
  /* readable floor: the base size shrinks on phones, these steps must not */
  :root{--fs-100:12px;--fs-200:13px}
  .oxc{--c-fs-100:12px;--c-fs-200:13px}
  .ox-lockup small,.ox-wordmark small{font-size:10.5px}

  .ox-fams{grid-template-columns:1fr;gap:var(--s3)}
  .ox-fam{padding:var(--s5) var(--s4) var(--s4)}
  .ox-fam-go{align-self:stretch;justify-content:center}

  /* tap targets */
  .ox-auth-row a{display:inline-flex;align-items:center;min-block-size:40px}
  .ox-crumbs a,.breadcrumb a{display:inline-flex;align-items:center;min-block-size:36px;padding-inline:2px}
  .oxf-cols a{min-block-size:40px}
  .oxf-cols ul{gap:0}
  .ox-link,.ox-sec a.ox-more,.ox-sec-foot a{display:inline-flex;align-items:center;min-block-size:40px}
  #order-standard_cart .badge,.ox-body .tld-filters .badge,.ox-body a.badge{display:inline-flex;align-items:center;min-block-size:34px;padding:4px 12px;font-size:12px}
  #order-standard_cart .btn-continue-shopping{font-size:13px;min-block-size:40px}
  .md-control,.md-editor .btn{min-inline-size:36px;min-block-size:36px}

  /* forms: 16px inputs stop iOS from zooming on focus */
  .ox-body input[type=text],.ox-body input[type=email],.ox-body input[type=password],.ox-body input[type=search],.ox-body input[type=tel],.ox-body input[type=number],
  .ox-body select,.ox-body textarea,.ox-body .form-control{font-size:16px!important}
}
@media (max-width:380px){
  .ox-deck-actions .ox-deck-btn{flex:1;justify-content:center}
}

/* mobile sheet: grouped store list */
.ox-acc-filter{position:sticky;top:-1px;z-index:3;padding-block:8px;background:var(--surface);box-shadow:0 8px 12px -10px rgba(14,23,38,.25)}
.ox-acc-filter label{position:relative;display:flex;align-items:center;margin:0}
.ox-acc-filter label i{position:absolute;inset-inline-start:12px;color:var(--ink-3);pointer-events:none}
.ox-acc-filter input{inline-size:100%!important;min-block-size:44px!important;padding-inline:36px 12px!important;margin:0!important;font-size:16px!important}
.ox-acc-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block:10px 4px;padding:6px 8px;border-radius:8px;background:var(--surface-2);font-size:var(--fs-100);font-weight:800;color:var(--ink-3);list-style:none}
.ox-acc-h[hidden],.ox-acc-p li[hidden]{display:none}
.ox-acc-h b{padding:0 7px;border-radius:999px;background:var(--surface);color:var(--ink-2)}
.ox-acc-loc{display:flex!important;align-items:center;gap:10px}
.ox-acc-loc>span{flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ox-acc-loc small{font-size:var(--fs-100);color:var(--ink-3)}

/* icon fields (register, account, contacts): icon on the start side, text clear of it */
.ox-body .prepend-icon{position:relative}
.ox-body .prepend-icon .field-icon{position:absolute!important;inset-block:0;inset-inline-start:0!important;left:auto;right:0;display:grid!important;place-items:center;inline-size:44px!important;margin:0!important;color:var(--ink-3);pointer-events:none;z-index:2}
.ox-body .prepend-icon .field,.ox-body .prepend-icon .form-control{padding-right:44px!important;padding-left:12px!important}
.ox-body .prepend-icon .field[dir=ltr],.ox-body .prepend-icon input[type=email],.ox-body .prepend-icon input[type=tel]{text-align:left}
.ox-body .prepend-icon .field::placeholder{text-align:right}
.ox-body .prepend-icon .field:focus+.field-icon,.ox-body .prepend-icon:focus-within .field-icon{color:var(--blue)}

/* sidebar: native select used on phones */
.o-select{inline-size:100%;block-size:46px;padding-inline:14px 36px;border-radius:12px;border:1.5px solid var(--line-2);background-color:var(--surface);color:var(--ink);font:600 16px var(--font);appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%235E6A7C%27 stroke-width=%272.5%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center}
.o-select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
@media (max-width:767px){.ox-body .form-check a,.ox-body label a{display:inline-block;padding-block:8px}}

/* touch devices of any width: comfortable tap targets */
@media (pointer:coarse){
  .ox-auth-row a,.oxc-note a,.ox-link{display:inline-flex;align-items:center;min-block-size:40px}
  .ox-crumbs a{display:inline-flex;align-items:center;min-block-size:36px}
  .oxf-cols a{min-block-size:40px}
  .ox-body .list-group-item,.ox-body .pagination .page-link{min-block-size:42px;display:flex;align-items:center}
  .ox-body .pagination .page-link{min-inline-size:42px;justify-content:center}
  .ox-body .form-check a,.ox-body label a{display:inline-block;padding-block:8px}
  .ox-body a.badge,#order-standard_cart .badge{display:inline-flex;align-items:center;min-block-size:34px;padding:4px 12px}
}

/* small labels found in the audit */
.ox-deck-plate .ox-mono,.ox-svc-plate .ox-mono{font-size:12px}
.ox-deck-rack-top{font-size:11px}
.ox-svcpanel-count small{font-size:11px}
.ox-wallet-brand small{font-size:10px}
.oxi-stamp small{font-size:10px}

/* dashboard on phones */
@media (max-width:767px){
  .ox-deck{padding:var(--s5) var(--s4);gap:var(--s4)}
  .ox-deck-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ox-deck-btn{justify-content:center;white-space:nowrap;padding-inline:10px;font-size:13px}
  .ox-deck-btn.is-warn{grid-column:1/-1}
  .ox-deck-sub{font-size:var(--fs-300)}
  .ox-tiles{grid-template-columns:1fr 1fr;gap:10px}
  .ox-tile{grid-template-columns:auto 1fr;grid-template-areas:"ic ic" "k k" "v v" "f f";padding:14px;gap:6px}
  .ox-tile-ic{inline-size:36px;block-size:36px;border-radius:10px;font-size:var(--fs-400)}
  .ox-tile-v b{font-size:var(--fs-700)}
  .ox-tile-v.is-money b{font-size:var(--fs-500)}
  .ox-tile-v small{inline-size:100%}
  .ox-tile-bars{display:none}
  .ox-quick{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ox-quick a{padding:12px 4px;font-size:12px}
  .ox-quick a span{inline-size:38px;block-size:38px}
}

/* services / invoices toolbar on phones */
@media (max-width:767px){
  .ox-svc-bar{display:grid;grid-template-columns:1fr;gap:8px;padding:8px}
  .ox-svc-filters{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;margin:-2px;padding:2px}
  .ox-svc-filters::-webkit-scrollbar{display:none}
  .ox-svc-filters button{flex:none;block-size:40px}
  .ox-svc-search,.ox-svc-sort{inline-size:100%;min-inline-size:0}
  .ox-svc-search input,.ox-svc-sort select{block-size:44px}
  .ox-svc-head .ox-btn{inline-size:100%;justify-content:center}
  .ox-body .ox-svc-title{font-size:var(--fs-700)}
}

/* service details on phones */
@media (max-width:767px){
  .ox-svc-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;inline-size:100%}
  .ox-svc-hero-actions .ox-deck-btn{justify-content:center;white-space:nowrap;padding-inline:8px;font-size:13px}
  .ox-svc-hero-main{align-items:flex-start}
  .ox-svc-hero-ic{inline-size:52px;block-size:52px;font-size:22px}
  .ox-svc-bill{grid-template-columns:1fr 1fr}
  .ox-svc-bill-i{padding:var(--s3) var(--s4)}
  .ox-svc-bill-i.is-due{grid-column:1/-1}
  .ox-svc-bill-i>b{font-size:var(--fs-300)}
  .ox-body .ox-svc-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .ox-body .ox-svc-tabs::-webkit-scrollbar{display:none}
  .ox-body .ox-svc-tabs .nav-link{white-space:nowrap}
  .oxv-power{padding:var(--s4)}
  .oxv-power-btns{display:grid;grid-template-columns:1fr 1fr}
  .oxv-gauges{grid-template-columns:1fr 1fr;gap:10px}
  .oxv-g{padding:12px}
  .oxv-ring{inline-size:88px;block-size:88px}
  .oxv-ring b{font-size:var(--fs-400)}
  .oxv-g[data-oxv-g="bw"],.oxv-g[data-oxv-g="net"]{grid-column:1/-1}
  .oxv-tools{grid-template-columns:1fr 1fr}
  .oxv-tools button{padding:12px}
  .oxv-adv>summary{padding:var(--s3) var(--s4)!important}
}

/* invoices header on phones */
@media (max-width:767px){
  .ox-inv-hero{padding:var(--s5) var(--s4);gap:var(--s4)}
  .ox-body .ox-inv-title{font-size:var(--fs-700)}
  .ox-inv-sub{font-size:var(--fs-300)}
  .ox-inv-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ox-inv-hero-actions .ox-deck-btn{justify-content:center}
  .ox-inv-meter-i{padding:var(--s3)}
  .ox-inv-meter-i b{font-size:var(--fs-500)}
  .ox-wallet{padding:var(--s5);min-block-size:0}
  .ox-pay-head{align-items:flex-start}
}

/* ticket departments and domain pricing table */
.ox-body h5>a[href*="submitticket.php?step=2"]{display:inline-flex;align-items:center;gap:8px;min-block-size:44px}
.ox-body td>small,.ox-body .tld-pricing small{font-size:12px}

/* ==========================================================================
   Phones / tablets / touch: "lite" rendering.
   Mobile GPUs ran out of compositing layers under the 3D corridor +
   backdrop-filter glass, and dropped layers mid-scroll (the logo and
   sections blinked out). Here: no 3D, no blur, solid surfaces.
   ========================================================================== */
@media (max-width:991px), (hover:none) and (pointer:coarse){
  /* hero: static scene instead of the 3D corridor */
  .ox-walk .ox-stage{display:none!important}
  .ox-walk{position:relative;overflow:hidden;
    background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--blue) 16%,transparent),transparent 70%),
               linear-gradient(180deg,var(--ceil),var(--stage) 55%,var(--bg))}
  .ox-walk::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 36px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/36px 100%;
    -webkit-mask-image:linear-gradient(to bottom,#000,transparent 85%);mask-image:linear-gradient(to bottom,#000,transparent 85%)}
  .ox-stops{margin-block-start:0!important;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:28px 16px 64px}
  .ox-stop{min-inline-size:0;max-inline-size:100%}
  .ox-glass,.ox-hero-card{max-inline-size:100%!important;min-inline-size:0}
  .ox-stop,.ox-stop.is-first,.ox-stop.at-end,.ox-stop.at-start{min-block-size:0!important;padding:0!important;justify-content:stretch}
  .ox-stop.is-first{padding-block:12px 8px!important}
  .ox-glass,.ox-hero-card{inline-size:100%!important}
  .ox-scroll-hint{display:none}
  /* no backdrop blur anywhere on small/touch screens */
  .ox-glass,.ox-con-win,.ox-hdr,.ox-hdr-island,.ox-hdr.is-floating .ox-hdr-island,.ox-sheet-panel,.oxh-products .ox-fam,.ox-mega,.ox-pal,.ox-pal-box,.oxf-cta{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .ox-glass{background:var(--surface)!important}
  .ox-hdr-island,.ox-hdr.is-floating .ox-hdr-island{background:var(--surface)!important;transition:none!important}
  .ox-hdr{transition:none!important}
  .oxh-products .ox-fam{background:var(--surface)!important}
  /* the floating 3D server: keep the picture, drop the 3D animation */
  .oxh-srv{animation:none!important}
  .oxh-shadow,.oxh-gpu i,.oxh-bays i::after,.oxh-cab-units i::before,.oxh-rack i::after{animation:none!important}
  .oxh-deco{display:none}
}