/**
 * Site-wide + client panel responsiveness
 * Loaded last so it wins over theme/AdminLTE defaults.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}
canvas {
  max-width: 100%;
}
.container,
.container-fluid,
.inner,
.wrapper,
.content-wrapper,
.ovh-catalog,
.ovh-domains-page,
.ai-page,
.no-page {
  max-width: 100%;
}
h1, h2, h3, p, li, td, th, label {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ===== Public header ===== */
.hb-site-header { overflow: visible !important; }
.hb-header-cta,
.hb-user-menu { min-width: 0; }

@media (max-width: 991px) {
  .hb-site-header { overflow: hidden !important; max-height: 100dvh !important; }
  .hb-header-cta-desktop { display: none !important; }
  .hb-header-cta-mobile {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    position: relative;
  }
  .hb-header-cta-mobile .hb-locale-triggers {
    width: auto !important;
    margin-inline-end: auto;
  }
  .hb-header-cta-mobile .hb-header-start {
    flex: 1 1 100%;
    width: 100%;
    text-align: center;
    padding: 12px 14px !important;
    order: 20;
  }
  .hb-header-cta-mobile .hb-user-drop.dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 54px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .12) !important;
    border: 1px solid #e6edf0 !important;
    z-index: 8;
  }
  .hb-navbar .navbar-nav > li.dropdown > .dropdown-menu.hb-svc-mega-menu,
  .hb-navbar .navbar-nav > li.dropdown:hover > .dropdown-menu.hb-svc-mega-menu {
    display: none !important;
    grid-template-columns: none;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .hb-navbar .navbar-nav > li.dropdown.open > .dropdown-menu.hb-svc-mega-menu,
  .hb-navbar .navbar-nav > li.dropdown.open:hover > .dropdown-menu.hb-svc-mega-menu {
    display: flex !important;
    flex-direction: column;
  }
  .hb-svc-card-mini,
  .hb-navbar .navbar-nav > li.dropdown > .dropdown-menu.hb-svc-mega-menu .hb-svc-card-mini {
    white-space: normal !important;
    padding: 8px 6px !important;
    gap: 8px !important;
  }
  .hb-navbar .navbar-nav > li.dropdown > .dropdown-menu.hb-svc-mega-menu .hb-mega-desc {
    display: none !important;
  }
  .hb-navbar .navbar-nav > li.dropdown > .dropdown-menu.hb-svc-mega-menu .hb-mega-head {
    padding: 4px 8px 2px !important;
    font-size: 11px !important;
  }
  .hb-navbar .navbar-collapse.in ~ #to-top,
  body:has(.hb-nav-center.navbar-collapse.in) #to-top,
  body:has(.hb-nav-center.navbar-collapse.in) .floating {
    display: none !important;
  }
}

/* ===== Domain / AI heroes ===== */
.ovh-domain-hero,
.ovh-domain-hero-layout,
.ovh-domain-hero-copy,
.ovh-domain-search-shell {
  min-width: 0;
  max-width: 100%;
}
.ovh-domain-hero-title,
.ai-page .ai-hero h1 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ovh-domain-transfer-link,
.ai-gen-link,
.no-prices-link {
  max-width: 100%;
  white-space: normal !important;
  text-align: start;
}

@media (max-width: 991px) {
  .ovh-domain-hero-copy,
  .ai-page .ai-hero {
    text-align: start !important;
    max-width: 100% !important;
  }
  .ovh-domain-hero-sub,
  .ai-page .ai-hero > p {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .ovh-domain-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0 0 10px !important;
  }
  .ovh-domain-tab {
    width: 100%;
    justify-content: flex-start;
    border-radius: 12px !important;
    white-space: normal;
    line-height: 1.35 !important;
    padding: 12px 14px !important;
  }
  .ovh-nav-tabs {
    display: flex;
    flex-wrap: wrap;
  }
  .ovh-nav-tabs a {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .ovh-transfer-bar,
  .ovh-domains-page .ovh-transfer-bar {
    flex-wrap: wrap !important;
  }
  .ovh-transfer-submit,
  .ai-adv,
  .ai-go {
    width: 100%;
  }
  .ai-bar {
    flex-wrap: wrap;
    border-radius: 18px !important;
    padding: 12px !important;
  }
  [dir="rtl"] .ai-bar { padding: 12px !important; }
  .ai-bar input[type="text"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .ai-adv, .ai-go { flex: 1 1 calc(50% - 6px); width: auto; }
  .ovh-domain-hero-visual img {
    width: min(100%, 280px);
    margin: 0 auto;
  }
}

@media (max-width: 575px) {
  .ovh-domain-hero-title,
  .ai-page .ai-hero h1 { font-size: 26px !important; letter-spacing: -.02em; }
  .ovh-catalog { padding-left: 0; padding-right: 0; }
  .container.inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ===== Home / storefront blocks ===== */
@media (max-width: 767px) {
  .hb-home-hero,
  .home-hero,
  .hb-plans,
  .hb-services,
  .footer-pro {
    overflow: hidden;
  }
  .table-responsive { display: block; width: 100%; overflow-x: auto; }
}

/* ===== Client / admin panel ===== */
.wrapper,
.content-wrapper,
.content,
.box,
.box-body,
.row,
[class*="col-"] {
  min-width: 0;
}
@media (max-width: 767px) {
  .content-wrapper,
  .right-side,
  .main-footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .box-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-header .navbar {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .content-header > h1 {
    font-size: 20px;
    line-height: 1.3;
  }
  .content-header > .breadcrumb {
    position: static;
    float: none;
    margin-top: 8px;
    padding: 0;
  }
  .content {
    padding: 12px !important;
  }
  .box-header > .box-title {
    white-space: normal;
    font-size: 16px;
  }
  .btn-group,
  .box-tools {
    max-width: 100%;
    float: none !important;
  }
  .form-control,
  .input-group,
  select.form-control {
    max-width: 100%;
  }
  .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    max-width: calc(100vw - 16px);
    right: 8px;
    left: auto;
  }
  html[dir="rtl"] .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    left: 8px;
    right: auto;
  }
}