/* Voltz Energy · Mobile-first layout patch | 2026-10-21
   Keeps the existing desktop design unchanged. Shared across all pages. */
:root { --vm-ink:#1d150c; --vm-green:#235347; --vm-amber:#f5a623; }
html { -webkit-text-size-adjust:100%; }
*, *::before, *::after { box-sizing:border-box; }
img, video, iframe { max-width:100%; }
textarea, input, select { max-width:100%; }
#voltz-mobile-header, #voltz-mobile-menu { display:none; }
@media (max-width:1023px) {
  html, body { max-width:100%; overflow-x:clip; }
  body { min-width:0; }
  /* The old desktop pill holds four actions and can exceed screen width.
     Keep it for desktop, use the dedicated fluid mobile navigation below. */
  header.nav-island-container { display:none!important; }
  #mobileDrawer { display:none!important; }
  #voltz-mobile-header { display:block; position:fixed; top:max(8px,env(safe-area-inset-top));
    left:10px; right:10px; width:auto; z-index:1200; }
  .vm-bar { display:flex; align-items:center; justify-content:space-between; gap:8px;
    width:100%; min-width:0; height:62px; padding:7px 9px 7px 12px;
    border:1px solid rgba(29,21,12,.11); border-radius:32px;
    background:rgba(253,251,247,.96); color:var(--vm-ink);
    box-shadow:0 8px 30px rgba(5,31,32,.15); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); }
  .vm-brand { flex:0 1 auto; min-width:0; display:inline-flex; align-items:center;
    gap:8px; text-decoration:none; color:var(--vm-ink); }
  .vm-brand img { height:43px; width:auto; max-width:74px; object-fit:contain; }
  .vm-brand-name { font:800 13px/1.15 Manrope,Inter,system-ui,sans-serif; white-space:nowrap; }
  .vm-actions { min-width:0; flex:0 0 auto; display:flex; align-items:center; gap:7px; }
  .vm-icon, .vm-quote { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
    min-height:42px; text-decoration:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .vm-icon { width:42px; border-radius:50%; background:rgba(37,211,102,.12); color:#128c7e; }
  .vm-icon svg { width:21px; height:21px; }
  .vm-quote { padding:0 13px; border-radius:24px; white-space:nowrap; background:#f5a623;
    color:#1d150c; font:800 12px/1 Manrope,Inter,system-ui,sans-serif; box-shadow:0 3px 12px rgba(245,166,35,.18); }
  .vm-menu-toggle { background:var(--vm-ink); color:white; }
  .vm-icon:focus-visible, .vm-quote:focus-visible, .vm-menu-close:focus-visible,
  .vm-panel a:focus-visible { outline:3px solid var(--vm-amber); outline-offset:3px; }
  .vm-menu-toggle svg { stroke:var(--vm-amber); }
  #voltz-mobile-menu { display:block; position:fixed; inset:0; z-index:1400;
    visibility:hidden; opacity:0; pointer-events:none; transition:opacity .22s ease,visibility .22s ease; }
  #voltz-mobile-menu.vm-open { visibility:visible; opacity:1; pointer-events:auto; }
  .vm-backdrop { position:absolute; inset:0; border:0; background:rgba(5,18,18,.66);
    cursor:pointer; width:100%; height:100%; }
  .vm-panel { position:absolute; right:0; top:0; bottom:0; height:100%; height:100dvh;
    width:min(370px,calc(100vw - 28px)); background:#fdfbf7; color:var(--vm-ink);
    box-shadow:-20px 0 45px rgba(0,0,0,.2); display:flex; flex-direction:column;
    padding:max(18px,env(safe-area-inset-top)) 20px max(16px,env(safe-area-inset-bottom));
    transform:translateX(103%);transition:transform .27s cubic-bezier(.22,1,.36,1); }
  .vm-open .vm-panel { transform:translateX(0); }
  .vm-panel-head { display:flex;align-items:center;justify-content:space-between; flex:0 0 auto;
    padding:0 0 16px; border-bottom:1px solid rgba(29,21,12,.12); }
  .vm-panel-head img { height:43px; width:auto; }
  .vm-menu-close { min-height:42px;min-width:42px;border-radius:50%;border:0;background:rgba(29,21,12,.07);
    color:var(--vm-ink);font-size:24px;cursor:pointer; }
  .vm-links { display:flex;flex-direction:column;gap:1px;overflow-y:auto;flex:1 1 auto;
    min-height:0; padding:15px 0; overscroll-behavior:contain; }
  .vm-section-label { margin:14px 0 5px; font:800 10px/1.2 Inter,system-ui,sans-serif;
    letter-spacing:.13em; text-transform:uppercase; color:#64726b; }
  .vm-section-label:first-child { margin-top:1px; }
  .vm-links a { display:flex;align-items:center;gap:11px;min-height:43px; padding:7px 10px;
    border-radius:11px;text-decoration:none;color:var(--vm-ink);
    font:700 14px/1.25 Manrope,Inter,system-ui,sans-serif; }
  .vm-links a[aria-current="page"] { background:rgba(35,83,71,.10);color:var(--vm-green); }
  .vm-links a:active { background:rgba(245,166,35,.16); }
  .vm-links .vm-link-icon { flex:0 0 23px; text-align:center;font-size:17px; }
  .vm-panel-foot { flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:9px;
    padding-top:15px;border-top:1px solid rgba(29,21,12,.12); }
  .vm-panel-foot a,.vm-panel-foot button { min-height:44px;display:flex;align-items:center;
    justify-content:center;gap:5px;border:0;border-radius:22px;text-decoration:none;
    font:800 12px/1.2 Manrope,Inter,system-ui,sans-serif;cursor:pointer; }
  .vm-panel-foot .vm-foot-phone { background:rgba(35,83,71,.09);color:#235347; }
  .vm-panel-foot .vm-foot-quote { background:#f5a623;color:#1d150c; }
  .vm-icon:active,.vm-quote:active,.vm-links a:active { transform:scale(.97); }
  /* This keeps existing fixed action bars and form content within the viewport. */
  .grid > *, .flex > *, .vm-bar > * { min-width:0; }
  table { max-width:100%; }
  pre { max-width:100%; overflow-x:auto; }
  input,select,textarea { font-size:max(16px,1em); }
  #global-quote-modal, #quoteModal { z-index:1600!important; }
  #mobile-quick-action-bar { width:100%!important; max-width:100vw!important; }
  #mobile-quick-action-bar input { min-width:0; }
}
@media (max-width:639px) {
  body:has(#mobile-quick-action-bar) { padding-bottom:max(86px,calc(78px + env(safe-area-inset-bottom)))!important; }
  /* Bottom CTA and floating WA pill previously overlapped on small screens.
     WhatsApp stays accessible in the header and mobile menu. */
  body:has(#mobile-quick-action-bar) aside:has(.wa-expand-pill) { display:none!important; }
  .vm-brand-name { display:none; }
  #postcode-drawer { max-width:100vw; padding:16px!important; }
  #mobile-quick-action-bar button,#mobile-quick-action-bar a { touch-action:manipulation; }
  .vm-panel { width:min(370px,calc(100vw - 24px)); }
  h1,h2 { overflow-wrap:break-word; }
}
@media (max-width:339px) {
  .vm-bar { gap:5px;padding-left:8px;padding-right:7px; }
  .vm-actions {gap:5px;}
  .vm-brand img { height:38px;max-width:65px; }
  .vm-icon {width:39px;min-height:39px;}
  .vm-quote { display:none; }
}
@media (min-width:640px) and (max-width:1023px) {
  .vm-brand-name { display:inline; }
  .vm-bar {padding-inline:17px;}
}
@media (prefers-reduced-motion:reduce) {
  #voltz-mobile-menu, .vm-panel, .vm-icon, .vm-quote { transition:none!important; }
}

/* Narrow-screen refinements for the existing homepage/reviews carousel and forms. */
@media (max-width:639px) {
  .review-track > [class*="min-w-"] {
    min-width:min(300px,calc(100vw - 36px))!important;
    max-width:min(300px,calc(100vw - 36px))!important;
    padding:20px!important;
  }
  #global-quote-modal #modal-panel {
    width:calc(100vw - 28px)!important;
    max-width:450px!important;
    max-height:calc(100dvh - 34px)!important;
    overflow-y:auto!important;
    padding:22px!important;
    border-radius:22px!important;
  }
  #quoteModal { padding:12px!important; overflow-y:auto; }
  #quoteModal > div { max-width:calc(100vw - 24px)!important; max-height:calc(100dvh - 24px)!important; overflow-y:auto; }
  .hero-content .actions-row { flex-wrap:wrap!important;gap:12px!important; }
  .hero-content .btn-primary { padding:12px 18px!important;font-size:13px!important; }
  .hero-content .btn-secondary {font-size:13px!important;}
}