/* -------------------------------------------------------------------------
   A2TDEV responsive shell — upgrade 02 / 10
   Purpose: final global header/nav/notification/footer polish for phones.
   Loaded after the foundation layer so page-level CSS cannot reshape the
   shell differently on Services, Products, Blog or dashboard pages.
   ------------------------------------------------------------------------- */

:root {
  --a2t-shell-max: 480px;
  --a2t-shell-header: var(--a2t-mobile-header, 76px);
  --a2t-shell-safe-bottom: max(22px, env(safe-area-inset-bottom));
  --a2t-shell-blue: var(--a2t-mobile-blue, #155dfc);
  --a2t-shell-line: var(--a2t-mobile-line, #e5eaf2);
  --a2t-shell-text: var(--a2t-mobile-text, #07111f);
  --a2t-shell-muted: var(--a2t-mobile-muted, #667085);
  --a2t-shell-surface: var(--a2t-mobile-surface, #ffffff);
  --a2t-shell-soft: var(--a2t-mobile-soft, #f6f9fe);
}

.a2t-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  padding: 10px 14px;
  border-radius: 999px;
  background: #07111f;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .18s ease;
}

.a2t-skip-link:focus {
  transform: translateY(0);
}

#a2t-main-content:focus {
  outline: none;
}

@media (max-width: 760px) {
  html {
    scrollbar-gutter: stable both-edges;
  }

  body {
    min-height: 100svh !important;
  }

  body:not(.a2t-nav-open):not(.a2t-modal-open):not(.a2t-notification-open) {
    padding-top: var(--a2t-shell-header) !important;
  }

  .x-content {
    padding-top: 0 !important;
  }

  body.a2t-nav-open .a2t-site-header,
  body.a2t-notification-open .a2t-site-header,
  body.a2t-modal-open .a2t-site-header {
    transform: translateY(0) !important;
  }

  .a2t-site-header {
    height: var(--a2t-shell-header) !important;
    min-height: var(--a2t-shell-header) !important;
    isolation: isolate !important;
  }

  .a2t-nav-shell {
    height: var(--a2t-shell-header) !important;
    max-width: var(--a2t-shell-max) !important;
    margin-inline: auto !important;
  }

  .a2t-brand {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: calc(100vw - 140px) !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .a2t-nav-actions {
    flex: 0 0 auto !important;
  }

  .a2t-theme-toggle,
  .a2t-mobile-menu-btn {
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .a2t-theme-toggle:focus-visible,
  .a2t-mobile-menu-btn:focus-visible,
  .a2t-mobile-nav-notification:focus-visible,
  .a2t-mobile-cart-link:focus-visible,
  .a2t-mobile-profile-link:focus-visible,
  .a2t-mobile-links a:focus-visible,
  .a2t-mobile-cta:focus-visible,
  .a2t-notification-item:focus-visible,
  .a2t-icon-btn:focus-visible {
    outline: 3px solid rgba(21, 93, 252, .32) !important;
    outline-offset: 3px !important;
  }

  .a2t-mobile-menu,
  .a2t-notification-modal {
    inset: var(--a2t-shell-header) 0 0 !important;
    height: calc((var(--a2t-vh, 1vh) * 100) - var(--a2t-shell-header)) !important;
    min-height: 0 !important;
    contain: layout paint !important;
  }

  .a2t-mobile-menu {
    border-top: 1px solid var(--a2t-shell-line) !important;
  }

  .a2t-mobile-menu-inner,
  .a2t-notification-dialog {
    max-width: var(--a2t-shell-max) !important;
    scroll-padding-top: 86px !important;
  }

  .a2t-mobile-menu-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .a2t-mobile-nav-quick {
    flex: 0 0 auto !important;
  }

  .a2t-mobile-links {
    flex: 0 0 auto !important;
  }

  .a2t-mobile-cart-link,
  .a2t-mobile-profile-link,
  .a2t-mobile-links a,
  .a2t-mobile-cta,
  .a2t-notification-item {
    -webkit-tap-highlight-color: transparent !important;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease, opacity .16s ease !important;
  }

  .a2t-mobile-cart-link:active,
  .a2t-mobile-profile-link:active,
  .a2t-mobile-links a:active,
  .a2t-mobile-cta:active,
  .a2t-notification-item:active,
  .a2t-theme-toggle:active,
  .a2t-mobile-menu-btn:active,
  .a2t-mobile-nav-notification:active {
    transform: scale(.985) !important;
  }

  .a2t-mobile-links a.active,
  .a2t-mobile-links a[aria-current="page"] {
    border-color: rgba(21, 93, 252, .28) !important;
    background: #eef5ff !important;
    color: var(--a2t-shell-blue) !important;
  }

  .a2t-mobile-links a.active::after,
  .a2t-mobile-links a[aria-current="page"]::after {
    color: var(--a2t-shell-blue) !important;
  }

  .a2t-mobile-cta {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    margin-top: auto !important;
    box-shadow: 0 -14px 24px rgba(255,255,255,.92), 0 14px 30px rgba(15,23,42,.12) !important;
  }

  .a2t-mobile-profile-link i {
    justify-self: end !important;
  }

  .a2t-mobile-nav-notification.is-open,
  .a2t-mobile-nav-notification-icon.is-open,
  button.a2t-mobile-nav-notification-icon[data-notification-open].is-open {
    border-color: rgba(21, 93, 252, .38) !important;
    background: #eaf2ff !important;
  }

  .a2t-mobile-nav-notification strong,
  .a2t-mobile-nav-notification-icon strong {
    max-width: 44px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .a2t-notification-modal {
    border-top: 1px solid var(--a2t-shell-line) !important;
  }

  .a2t-notification-dialog {
    display: flex !important;
    flex-direction: column !important;
  }

  .a2t-notification-head {
    flex: 0 0 auto !important;
    min-height: 116px !important;
  }

  .a2t-notification-actions {
    align-self: start !important;
  }

  .a2t-notification-list,
  .a2t-notification-empty {
    flex: 0 0 auto !important;
  }

  .a2t-notification-item {
    min-height: 112px !important;
  }

  .a2t-notification-item.is-viewed {
    background: #fff !important;
    opacity: .64 !important;
  }

  .a2t-notification-item.is-viewed .a2t-notification-icon {
    filter: grayscale(.45) !important;
  }

  .a2t-notification-item > b {
    color: #98a2b3 !important;
    font-size: 28px !important;
    line-height: 1 !important;
  }

  body.a2t-nav-open .a2t-footer,
  body.a2t-notification-open .a2t-footer {
    pointer-events: none !important;
  }

  .a2t-footer {
    margin-top: 0 !important;
    background: #07111f !important;
    color: #dbe7ff !important;
  }

  .a2t-footer a {
    color: inherit !important;
    text-decoration: none !important;
  }

  .a2t-footer-logo {
    color: #fff !important;
  }

  .a2t-footer-column {
    padding-top: 16px !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
  }

  .a2t-footer-column h4 {
    margin-bottom: 10px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  .a2t-footer-column a {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    color: #b9c7dd !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .a2t-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12) !important;
    padding-top: 18px !important;
    color: #98a7bd !important;
  }

  #snackbar {
    z-index: 5000 !important;
    border-radius: 16px !important;
    font-weight: 800 !important;
  }

  #loader-overlay {
    z-index: 10000 !important;
  }

  .loader-content {
    color: #07111f !important;
    font-weight: 900 !important;
  }

  html[data-theme="dark"] .loader-content {
    color: #f8fafc !important;
  }

  html[data-theme="dark"] .a2t-mobile-links a.active,
  html[data-theme="dark"] .a2t-mobile-links a[aria-current="page"] {
    border-color: #24436f !important;
    background: #0c2451 !important;
    color: #dbeafe !important;
  }

  html[data-theme="dark"] .a2t-mobile-cta {
    box-shadow: 0 -14px 24px rgba(5,7,13,.92), 0 14px 30px rgba(0,0,0,.28) !important;
  }

  html[data-theme="dark"] .a2t-notification-item.is-viewed {
    background: #0b1220 !important;
  }

  html[data-theme="dark"] .a2t-footer {
    background: #020617 !important;
  }
}

@media (min-width: 761px) {
  .a2t-skip-link:focus {
    top: 12px;
  }

  .a2t-mobile-menu,
  .a2t-mobile-menu-btn {
    display: none !important;
  }

  .a2t-notification-modal {
    padding: 24px !important;
  }
}

@media (max-width: 380px) {
  .a2t-mobile-cta {
    min-height: 56px !important;
    font-size: 15px !important;
  }

  .a2t-notification-head {
    min-height: 108px !important;
  }

  .a2t-notification-item {
    min-height: 104px !important;
  }
}

@supports not (height: 100dvh) {
  @media (max-width: 760px) {
    .a2t-mobile-menu,
    .a2t-notification-modal {
      height: calc(100vh - var(--a2t-shell-header)) !important;
    }
  }
}