html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 1199px) {
  .mobile-nav-active {
    overflow: hidden;
  }

  .navbar {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden;
    pointer-events: none;
    z-index: 9997;
    transition: visibility 0.25s ease;
  }

  .navbar::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(6, 14, 40, 0.62) !important;
    opacity: 0;
    pointer-events: none;
    z-index: 0 !important;
    transition: opacity 0.25s ease;
  }

  .mobile-nav-active .navbar {
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-nav-active .navbar::before {
    opacity: 1;
    pointer-events: auto;
  }

  .navbar > ul {
    position: absolute !important;
    inset-block: 0 !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    left: 0 !important;
    right: auto !important;
    width: min(86vw, 360px) !important;
    max-width: 360px !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 72px 0 20px !important;
    display: block !important;
    background: rgba(13, 21, 71, 0.96) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #2196f3 rgba(255, 255, 255, 0.16);
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    z-index: 1 !important;
  }

  .navbar > ul::-webkit-scrollbar {
    width: 8px;
  }

  .navbar > ul::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.16);
  }

  .navbar > ul::-webkit-scrollbar-thumb {
    background: #2196f3;
    border-radius: 999px;
  }

  html[dir="rtl"] .navbar > ul,
  html[lang="ar"] .navbar > ul,
  html[lang^="ar-"] .navbar > ul,
  body[dir="rtl"] .navbar > ul,
  body:dir(rtl) .navbar > ul,
  .rtl .navbar > ul,
  [dir="rtl"] .navbar > ul {
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    left: auto !important;
    right: 0 !important;
    transform: translateX(105%);
    text-align: right;
    direction: rtl;
  }

  .mobile-nav-active .navbar > ul {
    transform: translateX(0) !important;
  }

  .navbar > ul > li,
  html[dir="rtl"] .navbar ul li {
    margin: 0 !important;
  }

  html[dir="rtl"] .navbar ul,
  html[lang="ar"] .navbar ul,
  html[lang^="ar-"] .navbar ul,
  body[dir="rtl"] .navbar ul,
  body:dir(rtl) .navbar ul,
  .rtl .navbar ul,
  [dir="rtl"] .navbar ul {
    flex-direction: column !important;
  }

  .navbar a,
  .navbar a:focus {
    width: 100%;
    min-width: 0;
    white-space: normal !important;
    gap: 10px;
  }

  .navbar a span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .navbar .menu-account-btn,
  .navbar .menu-account-btn:focus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 32px) !important;
    min-height: 44px;
    margin: 16px !important;
    padding: 10px 16px !important;
    border-radius: 4px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.35;
  }

  .navbar .menu-account-btn span {
    display: block;
    width: 100%;
    text-align: center;
  }

  html[dir="rtl"] .navbar a,
  html[lang="ar"] .navbar a,
  html[lang^="ar-"] .navbar a,
  body[dir="rtl"] .navbar a,
  body:dir(rtl) .navbar a,
  .rtl .navbar a,
  [dir="rtl"] .navbar a {
    text-align: right;
    direction: rtl;
  }

  .navbar .dropdown ul,
  .navbar .dropdown .dropdown ul {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 4px 14px 10px !important;
    padding: 6px 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .mobile-nav-hide {
    position: fixed !important;
    top: 14px !important;
    inset-inline-start: 14px !important;
    inset-inline-end: auto !important;
    left: 14px !important;
    right: auto !important;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(13, 21, 71, 0.55);
    color: #fff !important;
    font-size: 28px !important;
    z-index: 10000 !important;
  }

  html[dir="rtl"] .mobile-nav-hide,
  html[lang="ar"] .mobile-nav-hide,
  html[lang^="ar-"] .mobile-nav-hide,
  body[dir="rtl"] .mobile-nav-hide,
  body:dir(rtl) .mobile-nav-hide,
  .rtl .mobile-nav-hide,
  [dir="rtl"] .mobile-nav-hide {
    inset-inline-start: auto !important;
    inset-inline-end: 14px !important;
    left: auto !important;
    right: 14px !important;
  }

  .mobile-nav-show {
    flex: 0 0 auto;
  }

  .header,
  section#main-body,
  .primary-content {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .top-bar,
  .main-header {
    max-width: 100vw;
    overflow: visible !important;
  }

  .top-bar .container,
  .top-bar .row,
  .top-bar [class*="col-"],
  .top-bar .d-flex,
  .main-header .container,
  .main-header .row,
  .main-header [class*="col-"] {
    overflow: visible !important;
  }

  .top-bar .dropdown-menu,
  .main-header .dropdown-menu {
    z-index: 10050 !important;
    max-width: calc(100vw - 24px);
    white-space: normal;
  }

  .top-bar .dropdown-menu.dropdown-menu-end,
  .main-header .dropdown-menu.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
  }

  html[dir="rtl"] .top-bar .dropdown-menu.dropdown-menu-end,
  html[dir="rtl"] .main-header .dropdown-menu.dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
  }

  .container,
  .container-fluid {
    max-width: 100%;
  }
}

/* ── Mobile centering & padding fixes ────────────────────────────── */

/* Ensure container gutter is adequate on very small screens */
@media (max-width: 575px) {
  .container,
  .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Tables inside .container must scroll, not break layout */
@media (max-width: 767px) {
  .table-responsive,
  .ng-domain-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Prevent oversized fixed-width elements from breaking centering */
@media (max-width: 575px) {
  .ng-hero,
  .ng-section,
  .ng-section-alt,
  .ng-section-dark,
  .ng-cta-section {
    padding-left: 0;
    padding-right: 0;
  }

  /* Pricing cards should be full-width, not overflow */
  .ng-pricing-card {
    padding: 28px 20px 24px;
  }

  /* Trust grid: 2-column on mobile */
  .ng-trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* ── Invoice overlay: center properly on small screens ─────────────── */
@media (max-width: 575px) {
  #fullpage-overlay .inner-wrapper {
    position: relative;
    top: auto;
    left: auto;
    width: 90%;
    height: auto;
    margin: 20px auto;
  }
}

/* ── Form inputs: prevent fixed-width overflow on mobile ────────────── */
@media (max-width: 767px) {
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ── Dashboard hero: allow text to wrap properly on mobile ──────────── */
@media (max-width: 575px) {
  .dash-hero-text {
    min-width: 0;
    flex-basis: 100%;
  }
  .dash-hero {
    flex-wrap: wrap;
  }
}

/* ── Domain search bar: ensure full-width on small screens ──────────── */
@media (max-width: 575px) {
  .ng-domain-search-bar {
    max-width: 100%;
    border-radius: 12px;
  }
  .ng-domain-search-bar button {
    border-radius: 0 0 12px 12px;
  }
  .ng-domain-search-bar input {
    border-radius: 12px 12px 0 0;
    padding: 14px 18px;
  }
}

/* ── Section head: ensure text doesn't overflow on mobile ───────────── */
@media (max-width: 575px) {
  .ng-section-head p {
    max-width: 100%;
    padding: 0 8px;
  }
  .ng-faq-list {
    max-width: 100%;
    padding: 0 4px;
  }
  .ng-policy-wrap {
    max-width: 100%;
  }
}

/* ── Tables: ensure all tables scroll on mobile, not break layout ────── */
@media (max-width: 767px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Announcements: ensure content stays within viewport ────────────── */
@media (max-width: 575px) {
  .announcement-body img,
  .viewticket-body img,
  .kb-article img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ── Global image safety ─────────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Store / order pages ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  #order-standard_cart .cart-body,
  .order-container {
    padding-left: 12px;
    padding-right: 12px;
  }
  #order-standard_cart .product-details-panel {
    padding: 16px;
  }
}

/* ── Client area cards: ensure proper stacking ───────────────────────── */
@media (max-width: 575px) {
  .client-home-cards .card {
    margin-bottom: 16px;
  }
}

/* ── Top-bar dropdown caret: fix garbled icon from FA5 Pro not loading ── */
/* The order form CSS overrides the caret to use FA5 Pro which is unloaded.
   Replace with a pure-CSS border triangle — no icon font needed. */
.top-bar .country-select::after,
.top-bar .country-select:after,
.top-bar-dropdown button::after,
.top-bar-dropdown button:after {
  content: '' !important;
  font-family: initial !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 5px 4px 0 4px !important;
  border-color: currentColor transparent transparent transparent !important;
  vertical-align: middle !important;
  margin-inline-start: 5px !important;
  font-size: initial !important;
  font-weight: initial !important;
  text-rendering: initial !important;
  -webkit-font-smoothing: initial !important;
  transition: transform 0.3s ease !important;
}

.top-bar-dropdown button.show::after,
.top-bar-dropdown button.show:after,
.top-bar .country-select.open::after,
.top-bar .country-select.open:after {
  transform: rotate(180deg) !important;
}