/* ==========================================================================
   RESPONSIVE - breakpoint-specific adjustments (media queries) for mobile,
   tablet, and desktop. Loaded last so these overrides reliably win over
   their non-responsive counterparts in tokens/base/layout/components/
   dashboard/forms.css, matching the effective behavior of the original
   single-file stylesheet these were extracted from (media queries there
   were interspersed directly after the rules they adjust, meaning they
   already appeared later in cascade order than their base rule in every
   case - collecting them here just makes that explicit and centralized).
   ========================================================================== */

@media (max-width: 900px) {
  .gradient-wrap .section {
    padding: 36px 0;
  }
}

@media (max-width: 900px) {
  .card-carousel {
    overflow: hidden;
    margin: 0 -14px;
    padding: 0 14px;
  }
  .card-carousel-track {
    display: flex;
    gap: 14px;
    will-change: transform;
    touch-action: pan-y;
    cursor: grab;
  }
  .card-carousel-track.is-dragging {
    cursor: grabbing;
  }
  .card-carousel-track [aria-hidden="true"] {
    display: block;
  }
  .card-carousel-slide {
    flex: 0 0 84%;
    width: 84%;
  }
  .card-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
  }
  .card-carousel-arrow {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--surface-border);
    background: var(--surface);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .card-carousel-arrow:hover,
  .card-carousel-arrow:focus-visible {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--black);
  }
  .card-carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .card-carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--surface-border);
    cursor: pointer;
    transition: width 0.3s ease, border-radius 0.3s ease, background 0.3s ease;
  }
  .card-carousel-dot.is-active {
    width: 22px;
    border-radius: 5px;
    background: var(--yellow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .badge-in { animation: none; }
}

@media (max-width: 820px) {
  .auth-split-form {
    padding: 32px 24px;
  }
}

@media (max-width: 820px) {
  .account-grid {
    grid-template-columns: 1fr !important;
  }
  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .quick-actions {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 640px) {
  .hide-on-mobile {
    display: none !important;
  }
  .icon-btn {
    display: flex;
  }
  .theme-toggle-btn--header {
    display: none;
  }
  /* See the matching comment at the 720px breakpoint - pages with no
     hamburger/mobile-sheet menu (e.g. receipt, admin dashboard) need to
     keep their only toggle visible on mobile. */
  .theme-toggle-btn--standalone {
    display: inline-flex !important;
  }

}

@media (max-width: 380px) {
  .dash-hero-actions .btn {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .quick-actions--tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .quick-tile {
    padding: 12px 4px;
    font-size: 11.5px;
  }

}

@media (max-width: 420px) {
  .network-quick-grid {
    gap: 8px;
  }
  .network-quick-tile {
    padding: 10px 4px;
    font-size: 10.5px;
  }

}

@media (min-width: 640px) {
  .size-pill-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .bundle-detail {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 420px) {
  .modal-footer-btn {
    padding: 12px 6px;
    font-size: 13px;
  }

}

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .inline-form { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 720px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .theme-toggle-btn--header { display: none; }
  /* Auth-style pages (login, signup, forgot/reset password, admin login)
     have no hamburger/mobile-sheet menu to hold a second toggle, so their
     header toggle button needs to stay visible on mobile instead of being
     hidden like the ones on pages that already have a toggle in the
     mobile sheet. */
  .theme-toggle-btn--standalone { display: inline-flex; }
  .header-actions .btn span { display: none; }
  /* Taller header bar on mobile only - desktop keeps its original height. */
  .header-bar { padding: 12px 20px !important; }
  .has-mobile-menu #headerAccountLink,
  .has-mobile-menu #headerLogoutBtn { display: none; }
  /* Bump the round icon buttons up to the standard recommended minimum
     touch-target size on mobile - they were 38-40px, which is fine for a
     mouse pointer but tight for a fingertip on the most frequently-tapped
     controls in the header (theme toggle, mobile sheet close button).
     Desktop keeps its original, more compact size since precision isn't a
     concern with a mouse. */
  .theme-toggle-btn,
  .icon-btn,
  .mobile-close {
    width: 44px;
    height: 44px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: none;
    gap: 14px 16px;
    text-align: center;
  }
  /* Brand and Contact Us stay full-width rows; Quick Links and Bundle
     sit side by side in the two columns between them, instead of every
     footer column stacking one under another on phones. */
  .footer-brand,
  .footer-contact {
    grid-column: 1 / -1;
  }
  .footer-brand .brand-name,
  .footer-brand p {
    margin-left: auto;
    margin-right: auto;
  }
  .footer-grid h4 {
    text-align: center;
  }
  .footer-grid ul {
    text-align: center;
  }
  /* Contact Us rows keep their icon-box layout left-aligned even though
     the rest of the footer centers on phones, matching the reference
     layout instead of collapsing into plain centered text.
     Selector is `.footer-grid .footer-contact-list` (not just
     `.footer-contact-list`) so it outweighs `.footer-grid ul`'s
     margin: 0 above - that rule was silently winning on specificity
     and cancelling the centering. */
  .footer-grid .footer-contact-list {
    max-width: 280px;
    margin: 0 auto;
  }
  .footer-contact-list li {
    text-align: left;
  }
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
  .top-strip .container { font-size: 11.5px; }

  /* Tighten the outer gutter on phones so cards (feature cards, bundle
     tiles, contact cards) sit closer to the screen edge instead of
     floating in a wide empty margin - was the same 24px used on desktop. */
  .container { padding: 0 14px; }

  /* Shrink the logo so it stays compact on narrow screens */
  .brand { gap: 6px; }
  .brand-mark { width: 40px; height: 40px; font-size: 15px; border-radius: 10px; }
  .brand-name { font-size: 12px; white-space: nowrap; }
  /* "Arrange in columns": stack the wordmark onto two lines on mobile only -
     font-size is untouched, this just breaks after "Pennyworth" via the
     .brand-break <br> that's hidden everywhere else. */
  .brand-break { display: block; }
  .header-actions { gap: 10px; }
  .header-actions .btn { padding: 8px 12px; font-size: 13px; }
  /* Bigger hamburger icon on mobile - was inheriting the base 26px. */
  .nav-toggle svg { height: 30px; width: 30px; }

  /* Log In / Sign Up (and, when a customer is logged in, the "My Account" /
     "Log Out" pair header-auth.js swaps them for) all move into the
     hamburger menu, so the header bar just needs the logo (kept in its
     normal left spot), a centered wordmark, and the menu toggle. Matching
     any direct .btn child - not just <a> - so a <button> like "Log Out"
     gets hidden here too, not just the anchor links. The wordmark is
     positioned relative to the header bar itself (not the logo), so it
     centers in the bar independent of where the logo sits.
     It's bounded by `left`/`right` (not just centered with a fixed
     max-width) so it's centered in the space actually left over between
     the logo and the icon cluster on the right (theme toggle + hamburger)
     instead of true-center-of-bar, which let a long wordmark run under
     those icons. Overflow ellipsizes instead of overlapping if it's ever
     still too tight, and pointer-events is off so it can never sit on
     top of and block a tap on either neighboring control. */
  .site-header .header-actions > .btn { display: none; }
  .site-header .header-bar { position: relative; }
  .site-header .brand-name {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
  }

  /* Customer + admin dashboards (.dash-header, e.g. account.html and
     admin/dashboard.html) - "Pennyworth Data Hub" there can wrap onto its
     own line via .dash-header .container's flex-wrap, but the actions row
     itself (e.g. "View Site" + "Log Out" on the admin dashboard) had no
     wrap of its own, so on very narrow phones those buttons could overflow
     past the edge and sit on top of the brand instead of dropping below it. */
  .dash-header .header-actions { flex-wrap: wrap; justify-content: flex-end; }

  /* Dashboard tables/forms (admin + account) were forcing their parent
     wider than the screen, which pushed everything else in the same
     stacked column off to one side. Let each one scroll horizontally
     within its own box instead, so nothing else gets shifted. */
  #ordersWrap,
  #ordersTableWrap,
  #socialOrdersWrap,
  #recentOrdersPreview {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: visible;
    margin-inline: auto;
  }

  .group-card {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .order-mobile-list {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .order-mobile-card {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }
  .inline-form {
    grid-template-columns: 1fr !important;
  }
  .inline-form .btn {
    width: 100%;
  }

  .bundle-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: none;
  }
  .net-card {
    border-radius: 12px;
    padding: 12px 6px;
    gap: 8px;
  }
  .net-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .net-card-label {
    font-size: 11px;
  }

  .grid-4 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .feature-card {
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--yellow-dark), var(--yellow));
  }
  .feature-icon {
    margin: 0 auto 7px;
  }

  .hero-inner > div:first-child {
    text-align: center;
  }
  .hero .eyebrow,
  .hero h1,
  .hero-lede {
    text-align: center;
  }
  .hero-lede {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta {
    justify-content: center;
  }
  .hero-stats {
    justify-content: center;
    text-align: center;
  }

}

@media (max-width: 480px) {
  .container {
    padding: 0 12px;
  }
  .hero .container {
    padding: 0 12px;
  }
  .hero h1 {
    font-size: clamp(30px, 9vw, 40px);
  }

}

@media (prefers-reduced-motion: reduce) {
  .fab::after { animation: none; }
}

@media (max-width: 720px) {
  .fab {
    width: 46px;
    height: 46px;
    font-size: 19px;
  }
  /* Lifted an extra ~78px on top of their normal spacing so the stack
     clears the mobile dock instead of overlapping its icons. */
  .fab-support {
    right: 14px;
    bottom: 154px;
  }
  .fab-whatsapp {
    right: 14px;
    bottom: 94px;
  }
}

@media (max-width: 480px) {
  .receipt-card { padding: 28px 20px; }

}

@media print {
  .no-print { display: none !important; }
  .fab,
  .support-popover { display: none !important; }
  body { background: var(--white); }
  .receipt-card { box-shadow: none; }
}

@media (max-width: 640px) {
  .faq-question {
    font-size: 15px;
    padding: 16px 18px;
  }
  .faq-answer p {
    padding: 0 18px 18px;
    font-size: 14px;
  }

}

@media (max-width: 640px) {
  .track-banner { padding: 28px 20px; }
  .track-banner h1 { font-size: 24px; }
  .track-card { padding: 22px; }

}

@media (max-width: 640px) {
  .topup-form {
    flex-direction: column;
    align-items: stretch;
  }
  .topup-form .btn {
    width: 100%;
  }
  .wallet-balance-card strong {
    font-size: 28px;
  }

}

@media (max-width: 640px) {
  .delivery-notice {
    margin-top: 24px;
    padding-top: 22px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .btn-hero::after,
  .btn-primary::after,
  .net-card::after {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pw-loader-mark {
    animation: none;
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pw-splash-logo {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .pw-splash-ring {
    animation: none;
    opacity: 0.5;
  }
  .pw-splash--done .pw-splash-logo {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   MOBILE APP-STYLE POLISH
   Intentional phone UI treatment. This section only overrides responsive
   presentation; it does not change page structure, routes or business logic.
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --mobile-gutter: 16px;
    --mobile-radius: 18px;
    --mobile-card-radius: 16px;
  }

  html {
    scroll-padding-top: 76px;
  }

  body {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .container,
  .hero .container {
    width: 100%;
    max-width: none;
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }

  /* Compact app-style header while retaining the existing navigation/menu. */
  .site-header {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  }

  .header-bar {
    min-height: 64px;
    padding: 8px var(--mobile-gutter) !important;
    gap: 10px;
  }

  .brand {
    min-width: 0;
    gap: 8px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex: 0 0 38px;
  }

  .site-header .brand-name {
    max-width: min(46vw, 180px);
    font-size: 12px;
    line-height: 1.05;
  }

  .site-header .brand-name small {
    font-size: 8.5px;
    margin-top: 3px;
  }

  .header-actions {
    flex: 0 0 auto;
    gap: 7px;
  }

  .theme-toggle-btn,
  .icon-btn,
  .mobile-close {
    width: 42px;
    height: 42px;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
  }

  /* Hero becomes a compact app landing panel instead of a tall desktop hero. */
  .hero-inner {
    min-height: 0;
    padding: 62px 0 44px;
    gap: 28px;
  }

  .hero-inner > div:first-child {
    width: 100%;
    max-width: 520px;
  }

  .hero .eyebrow {
    font-size: 10px;
    letter-spacing: 0.11em;
    margin-bottom: 12px;
  }

  .hero h1 {
    font-size: clamp(31px, 9.2vw, 42px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
  }

  .hero-lede {
    max-width: 330px;
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 24px;
  }

  .hero-cta {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
  }

  .hero-cta .btn {
    width: auto;
    min-height: 25px;
    padding: 6px 9px;
    font-size: 12px;
    border-radius: 10px;
    justify-content: center;
  }

  /* .btn-hero's desktop layout spreads the label and arrow icon to
     opposite edges (min-width:210px, gap:32px, justify-content:
     space-between) - on mobile the button is auto-width now, so pull
     the icon back next to the label and center the whole thing. */
  .hero-cta .btn-hero {
    min-width: 0;
    gap: 8px;
  }

  .hero-stats {
    width: 100%;
    gap: 18px;
  }

  .hero-stats div b {
    font-size: 21px;
  }

  .hero-stats div span {
    font-size: 10px;
    max-width: 100px;
  }

  /* Sections use an app-like rhythm on phones. */
  .section,
  .gradient-wrap .section {
    padding: 32px 0;
  }

  .section-head {
    max-width: none;
    margin-bottom: 20px;
  }

  .section-head h2,
  .dash-section-title {
    font-size: 20px;
    line-height: 1.1;
  }

  /* Feature cards become compact swipe-friendly app cards. */
  .card-carousel {
    margin-left: calc(var(--mobile-gutter) * -1);
    margin-right: calc(var(--mobile-gutter) * -1);
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }

  .card-carousel-track {
    gap: 12px;
  }

  .card-carousel-slide {
    flex-basis: 88%;
    width: 88%;
  }

  .feature-card {
    padding: 14px;
    border-radius: var(--mobile-card-radius);
  }

  .feature-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    margin-bottom: 7px;
  }

  .feature-card h3 {
    font-size: 14.5px;
    margin-bottom: 3px;
  }

  .feature-card p {
    font-size: 12.5px;
    line-height: 1.4;
  }

  .card-carousel-controls {
    margin-top: 16px;
  }

  .card-carousel-arrow {
    width: 40px;
    height: 40px;
  }

  /* Bundle chooser: three compact columns so all five tiles (networks +
     Social Media Boost + Result Checker) settle into two full rows instead
     of leaving the last tile stranded alone in a third row. */
  #bundles .bundle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: none;
  }

  #bundles .net-card {
    min-width: 0;
    min-height: 108px;
    padding: 8px 5px;
    border-radius: var(--mobile-card-radius);
    gap: 5px;
  }

  #bundles .net-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  /* MTN/Telecel/AirtelTigo tiles show a network logo image rather than the
     Social Media Boost/Result Checker emoji tiles, so size just these
     up to 2/3 of their card's width (square, via aspect-ratio) instead of
     the small fixed icon size the emoji tiles keep. */
  #bundleGrid .net-card-icon {
    width: 66%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
  }

  #bundles .net-card-label {
    width: 100%;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
  }

  /* Make the two secondary products feel like full-width app actions. */
  #productLinksGrid {
    grid-template-columns: 1fr 1fr;
  }

  /* Generic buttons/controls: comfortable fingertip targets. */
  .btn {
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 14px;
  }

  .btn-sm {
    min-height: 42px;
    padding: 10px 14px;
  }

  input,
  select,
  textarea {
    min-height: 46px;
    font-size: 16px;
  }

  /* Account/dashboard panels behave like stacked mobile app screens. */
  .dash-hero {
    border-radius: var(--mobile-radius);
    padding: 20px 17px;
    margin-bottom: 14px;
  }

  .dash-hero-top {
    gap: 10px;
  }

  .dash-hero-actions {
    gap: 8px;
    margin-top: 16px;
  }

  .dash-hero-actions .btn {
    min-height: 44px;
  }

  .stat-grid {
    gap: 10px;
  }

  .stat-card {
    border-radius: 14px;
    padding: 15px;
  }

  .quick-actions--tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .quick-tile {
    min-height: 92px;
    padding: 14px 8px;
    border-radius: 15px;
  }

  .quick-tile-icon {
    width: 40px;
    height: 40px;
  }

  .network-quick-grid {
    gap: 10px;
  }

  .network-quick-tile {
    min-height: 84px;
    padding: 12px 6px;
    border-radius: 15px;
  }

  /* Forms/cards should never create an accidental wider layout. */
  .auth-split-form,
  .track-card,
  .receipt-card,
  .wallet-balance-card,
  .danger-zone,
  .group-card,
  .pw-modal-panel {
    max-width: 100%;
    min-width: 0;
    border-radius: var(--mobile-radius);
  }

  .inline-form,
  .topup-form {
    width: 100%;
    min-width: 0;
  }

  /* Tables stay contained; users can scroll the table itself when needed. */
  .table-wrap,
  #ordersWrap,
  #ordersTableWrap,
  #socialOrdersWrap,
  #recentOrdersPreview {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer becomes a compact app-style information area. */
  .site-footer {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }

  .footer-grid {
    gap: 18px 14px;
  }

  /* Keep fixed/floating controls above the iPhone home indicator. */
  .fab-support,
  .fab-whatsapp {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 380px) {
  :root {
    --mobile-gutter: 14px;
  }

  .site-header .brand-name {
    max-width: 125px;
  }

  .hero-inner {
    padding-top: 52px;
  }

  .hero h1 {
    font-size: clamp(29px, 9.4vw, 36px);
  }

  #bundles .net-card {
    min-height: 96px;
    padding-left: 4px;
    padding-right: 4px;
  }
}


/* ============================================================================
   NATIVE-APP FEEL WITHOUT PWA
   This is ordinary responsive web UI. It works in Safari/Chrome as a normal
   website and does not depend on manifest.json or a service worker.
   ============================================================================ */
@media (max-width: 767px) {
  :root {
    --mobile-gutter: 16px;
    --mobile-bottom-nav: 76px;
  }

  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    padding-bottom: calc(var(--mobile-bottom-nav) + env(safe-area-inset-bottom));
  }

  /* Full-width app surfaces, while keeping the existing page structure. */
  main,
  .page-main,
  .main-content {
    width: 100%;
    min-width: 0;
  }

  section {
    min-width: 0;
  }

  img, video, iframe, canvas, svg {
    max-width: 100%;
  }

  /* App-like bottom navigation. It is injected by mobile-dock.js and is
     purely UI; every destination remains a normal web URL. */
  .mobile-dock {
    position: fixed;
    z-index: 9998;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    min-height: 64px;
    padding: 7px 6px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    border: 1px solid color-mix(in srgb, var(--surface-border) 78%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 12px 34px rgba(0,0,0,.16);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
  }

  .mobile-dock-item {
    min-width: 0;
    min-height: 50px;
    border: 0;
    background: transparent;
    color: var(--muted, #777);
    border-radius: 16px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, background .18s ease, color .18s ease;
  }

  .mobile-dock-item.is-active {
    color: var(--black, #111);
    background: var(--yellow, #ffc629);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
  }

  .mobile-dock-item:active,
  .mobile-dock-item.is-pressed {
    transform: scale(.94);
  }

  .mobile-dock-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    line-height: 1;
  }

  .mobile-dock-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-dock-brand {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: currentColor;
    color: var(--surface, #fff);
    font-size: 12px;
    font-weight: 900;
    font-family: Inter, sans-serif;
  }

  .mobile-dock-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9.5px;
    line-height: 1.1;
    font-weight: 700;
  }

  /* Native-looking press states for all primary actions. */
  .btn,
  button,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  .btn:active,
  button:active,
  [role="button"]:active {
    transform: translateY(1px) scale(.985);
  }

  /* Floating support controls must sit above the dock. */
  .fab-support,
  .fab-whatsapp {
    bottom: calc(var(--mobile-bottom-nav) + 20px + env(safe-area-inset-bottom)) !important;
  }

  /* The hamburger sheet's bottom action(s) - Sign Up/Log In on marketing
     pages, Log Out on the account dashboard - sit at the very bottom of
     the 100svh sheet via margin-top:auto. The bottom dock bar is a fixed
     element with a higher z-index than the sheet, so without this the
     dock physically covers those buttons and they can't be tapped.
     This has to go on .mobile-sheet itself (the scroll/flex container),
     not .mobile-sheet-cta (the child using margin-top:auto) - tested
     empirically: padding on the child adds to the very content
     margin-top:auto measures "free space" against. On a nav list long
     enough to make the sheet's content taller than the viewport (which
     it is - Bundles/Why Us/FAQ/Track Order/Social Media Boost/Result
     Checker/Contact, 7 items), that padding ate the only free space the
     auto margin had, so the buttons stayed pinned exactly where the dock
     already was - no visible change at all. Padding the container instead
     shrinks its available content box either way: short content still
     gets pinned above this reserved band via the auto margin, and long
     (scrolled) content still ends with guaranteed clearance below it. */
  .mobile-sheet {
    padding-bottom: calc(var(--mobile-bottom-nav) + 22px + env(safe-area-inset-bottom));
  }

  /* Sheets/modals feel like native mobile bottom sheets. */
  .modal,
  .modal-overlay,
  .mobile-sheet {
    align-items: flex-end;
  }

  .modal-content,
  .modal-dialog,
  .mobile-sheet-panel,
  .pw-modal-panel {
    width: min(100%, 560px);
    max-width: 100%;
    max-height: min(88vh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  /* Never allow long labels/prices to push cards beyond the viewport. */
  .card, .net-card, .feature-card, .stat-card, .quick-tile,
  .track-card, .receipt-card, .group-card {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Mobile data cards prioritize the purchase action and price. */
  #bundles .net-card,
  .bundle-card {
    position: relative;
    touch-action: manipulation;
  }

  /* Horizontal scrolling is reserved for intentional carousels/tables. */
  .card-carousel,
  .table-wrap,
  #ordersWrap,
  #ordersTableWrap,
  #socialOrdersWrap,
  #recentOrdersPreview {
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .card-carousel::-webkit-scrollbar,
  .table-wrap::-webkit-scrollbar,
  #ordersWrap::-webkit-scrollbar,
  #ordersTableWrap::-webkit-scrollbar,
  #socialOrdersWrap::-webkit-scrollbar,
  #recentOrdersPreview::-webkit-scrollbar {
    display: none;
  }
}

@media (min-width: 768px) {
  .mobile-dock {
    display: none !important;
  }
  body.has-mobile-dock {
    padding-bottom: 0;
  }
}


/* ============================================================================
   FINAL MOBILE-ONLY FIXES — requested UI corrections
   1) Use the real Pennyworth P logo in the Home dock item.
   2) Let the Result Checker participate in the same mobile card grid as the
      network bundle cards, without changing the desktop layout.
   3) Give the account hamburger sheet enough width and constrain its contact
      text so labels/details never get clipped or scattered on iOS Safari.
   ============================================================================ */
@media (max-width: 767px) {
  /* The section container becomes the mobile card grid. The existing
     bundleGrid and productLinksGrid wrappers become transparent layout
     wrappers, so their cards flow together in one 3-column grid - five
     tiles fill two full rows instead of leaving one stranded alone. */
  #bundles > .container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }

  #bundles > .container > .section-head {
    grid-column: 1 / -1;
  }

  #bundles > .container > #bundleGrid,
  #bundles > .container > #productLinksGrid {
    display: contents;
  }

  #bundles > .container > #productLinksGrid .net-card,
  #bundles > .container > #bundleGrid .net-card {
    width: 100%;
    margin: 0;
  }

  /* Keep the real P logo crisp and correctly sized in the Home dock item. */
  .mobile-dock-brand-wrap {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    overflow: hidden;
    flex: none;
  }

  .mobile-dock-brand-logo {
    display: block;
    width: 24px;
    height: 24px;
    max-width: none;
    object-fit: cover;
    border-radius: 7px;
  }

  /* Account hamburger now matches the homepage mockup's width exactly
     (no page-specific override) - only the contact-detail wrapping stays
     page-specific, since the dashboard sheet is the only one with a
     contact block. */
  body:has(.account-shell) .mobile-sheet-contact {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 22px 12px;
  }

  body:has(.account-shell) .mobile-contact-item {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-items: flex-start;
  }

  body:has(.account-shell) .mobile-contact-item > span:last-child {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
  }

  body:has(.account-shell) .mobile-contact-item small {
    line-height: 1.2;
  }

  /* Account menu buttons should occupy the available drawer width instead
     of inheriting browser button sizing. */
  body:has(.account-shell) .mobile-sheet-panel-link {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
  }
}