/* ==========================================================================
   SPEEDLINK device-compatibility layer
   Loaded LAST on the captive portal and customer-facing pages so it can
   refine (never replace) the existing page styles.

   Classes set on <html> by assets/js/device-compat.js:
     is-mobile  phone / tablet          is-desktop  laptop / PC
     is-tv      smart TV / TV box       is-lite     low-power device
     is-ios, is-android, is-cna (iOS "Captive Network Assistant" mini browser)
   ========================================================================== */

/* ---- 1. Everyone: sane text sizing, no tap flash, no double-tap zoom ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html body{-webkit-tap-highlight-color:transparent;min-height:100vh;min-height:100dvh}
html button,html a,html .plan,html .option-btn,html .qbtn,html .package-filter,html label{touch-action:manipulation}
html body.dark-mode{color-scheme:dark}

/* Notched phones / rounded corners / landscape: keep content off the edges */
html body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* Old browsers (older TVs / old Androids) that don't know `inset` */
html .purchase-overlay,html .notice-overlay{top:0;right:0;bottom:0;left:0}

/* Popups: never taller than the screen (address bars, landscape, keyboards) */
html .purchase-modal,html .notice-modal{
  max-height:88vh;max-height:92dvh;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
html.dc-modal-open,html.dc-modal-open body{overflow:hidden}

/* Keep long words / phone numbers / usernames from stretching the layout */
html .modal-selected,html .status,html .plan-name,html .meta{overflow-wrap:anywhere}
html img,html svg,html video{max-width:100%}

/* Old browsers without container queries: fall back to viewport breakpoints */
@supports not (container-type:inline-size){
  @media (max-width:700px){html .plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:420px){html .plans{grid-template-columns:1fr}}
}

/* ---- 2. Touch screens (phones + tablets) ---- */
@media (pointer:coarse){
  /* 16px stops iOS zooming the page when a field is focused (all widths, incl. iPad) */
  html input,html select,html textarea,
  html .phone-input,html .option-field input,html .option-select{font-size:16px}
  /* 44px = comfortable thumb target */
  html .qbtn,html .option-btn,html .pay-btn,html .cancel-btn,html .package-action,
  html .package-filter,html .rw-redeem-btn,html .notice-ack-btn,html .trial-action{min-height:44px}
  html .modal-close,html .theme-toggle{width:44px;height:44px}
  html .phone-input,html .option-field input,html .option-select{min-height:46px}
}
/* No sticky "hover" lift after a tap on touch devices */
@media (hover:none){
  html .plan:hover{transform:none;box-shadow:0 2px 8px rgba(15,23,42,.04)}
  html .option-btn:hover,html .qbtn:hover{transform:none}
}

/* ---- 3. Phones in landscape (very short screens) ---- */
@media (max-height:480px) and (orientation:landscape){
  html .brand{padding:12px 14px 10px;margin-bottom:10px}
  html .brand h1{font-size:20px;margin:6px 0 2px}
  html .brand .logo{width:40px;height:40px;font-size:18px;border-radius:12px}
  html .brand p{margin-bottom:8px}
  html .purchase-modal,html .notice-modal{padding:20px 22px 18px}
  html .purchase-overlay,html .notice-overlay{align-items:flex-start;padding-top:10px;padding-bottom:10px}
  html .modal-title{margin-bottom:8px}
}

/* ---- 4. Tablets (portrait / small landscape) ---- */
@media (min-width:700px) and (max-width:1023px){
  html .plans{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- 5. Laptops / desktops: use the width instead of a phone-sized column ---- */
@media (min-width:1024px){
  html body .wrap{width:100%;max-width:1040px;padding-top:34px;padding-bottom:50px}
  html .plans{grid-template-columns:repeat(4,minmax(0,1fr))}
  html .quick-row{gap:16px}
  html .brand{padding-top:36px;padding-bottom:30px}
  html .brand h1{font-size:34px}
  html .purchase-modal{width:min(560px,100%)}
}
@media (min-width:1024px) and (hover:hover){
  html .plan,html .option-btn,html .qbtn,html .package-action{cursor:pointer}
}

/* Keyboard users (laptops) get a clear focus ring */
html :focus-visible{outline:3px solid #2563eb!important;outline-offset:2px!important}

/* ---- 6. TVs / TV boxes (10-foot UI, remote control) ---- */
/* `zoom` scales the whole layout (Chromium/WebKit TV browsers all support it).
   --dc-zoom is worked out per screen by device-compat.js so a 720p TV never overflows. */
html.is-tv body .wrap{max-width:1040px;zoom:var(--dc-zoom,1.2);padding-top:30px}
html.is-tv .purchase-modal,html.is-tv .notice-modal{zoom:var(--dc-zoom,1.2)}
html.is-tv{font-size:112.5%}                       /* rem-based pages (customer portal) get bigger text */
html.is-tv .theme-toggle{display:none}            /* tiny corner control is unreachable by remote */
html.is-tv .plans{grid-template-columns:repeat(3,minmax(0,1fr))}
html.is-tv .quick-row{grid-template-columns:repeat(3,minmax(0,1fr))}
/* The focus ring IS the cursor on a TV: make it unmistakable, from far away. */
html.is-tv :focus{
  outline:4px solid #fbbf24!important;outline-offset:4px!important;
  box-shadow:0 0 0 8px rgba(0,0,0,.35)!important;
  position:relative;z-index:2;
}
html.is-tv .plan:focus-within{border-color:#fbbf24;transform:translateY(-3px)}
/* Safe zone: TVs overscan, keep content away from the screen edge */
html.is-tv body{padding-left:2.5vw;padding-right:2.5vw;padding-top:1.5vh;padding-bottom:2vh}
html.is-tv .phone-input,html.is-tv .option-field input,html.is-tv .option-select{min-height:52px;font-size:18px}
html.is-tv .pay-btn,html.is-tv .cancel-btn,html.is-tv .qbtn,html.is-tv .package-action{min-height:48px}

/* ---- 7. Low-power devices (TVs, old/cheap phones): drop heavy effects ---- */
html.is-lite body::before,html.is-lite body::after{display:none}
html.is-lite .brand::after{display:none;animation:none}
html.is-lite .purchase-overlay,html.is-lite .notice-overlay,html.is-lite .logo,html.is-lite .trust-chip{
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
html.is-lite .brand,html.is-lite .portal-section,html.is-lite .purchase-overlay.open .purchase-modal{animation:none}
html.is-lite .plan,html.is-lite .option-btn,html.is-lite .qbtn{transition:none}

/* ---- 8. Small "display mode" switch (added by device-compat.js) ---- */
.dc-switch{
  display:block;margin:10px auto 0;padding:8px 14px;border:0;background:transparent;
  color:inherit;opacity:.6;font:inherit;font-size:12px;text-decoration:underline;cursor:pointer;
}
.dc-switch:hover,.dc-switch:focus{opacity:1}
.dc-device-note{
  display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:10px 12px;border-radius:10px;
  background:rgba(37,99,235,.08);font-size:12.5px;line-height:1.45;
}
body.dark-mode .dc-device-note{background:rgba(96,165,250,.14)}


/* ---- Faster, easier scrolling and going back (2026-11-05) ---- */
html{scroll-behavior:auto!important;-webkit-text-size-adjust:100%}
body{-webkit-overflow-scrolling:touch}
html .purchase-overlay,html .notice-overlay{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html .purchase-modal{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
/* the Pay / Cancel row stays visible at the bottom of a long form, so nobody scrolls to find it */
html .purchase-modal .modal-actions{position:sticky;bottom:0;z-index:2;margin:14px -4px 0;padding:12px 4px max(12px,env(safe-area-inset-bottom));background:linear-gradient(to top,var(--dc-sheet,#fff) 72%,rgba(255,255,255,0))}
body.dark-mode .purchase-modal .modal-actions{--dc-sheet:#121a2b;background:linear-gradient(to top,#121a2b 72%,rgba(18,26,43,0))}
html .modal-close{width:40px;height:40px;font-size:18px}
html .purchase-modal .modal-actions button,html .purchase-modal .modal-actions .cancel-btn{min-height:46px}
.dc-top{position:fixed;right:14px;bottom:max(16px,env(safe-area-inset-bottom));z-index:900;width:44px;height:44px;border:0;border-radius:50%;background:#0f172a;color:#fff;font-size:20px;font-weight:800;line-height:1;box-shadow:0 8px 22px rgba(15,23,42,.28);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .15s,transform .15s;cursor:pointer}
.dc-top.show{opacity:.92;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.dc-top{transition:none}}


/* Pulling down at the top must not refresh the captive portal (2026-11-05) */
html,body{overscroll-behavior-y:contain}
html .purchase-overlay,html .notice-overlay{overscroll-behavior:none;touch-action:none}
html .purchase-modal,html .notice-modal,html .rw-modal #rwResult,html #optionOverlay #optionFields{touch-action:pan-y}