/* =====================================================================
   Client responsive hardening.
   Loaded after page, theme and support styles so every public screen keeps
   its own visual language while long content stays inside the viewport.
   ===================================================================== */

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

:where(img, svg, video, canvas, iframe, object) {
  max-width: 100%;
}

:where(button, input, select, textarea) {
  max-width: 100%;
}

.page-shell > *,
.page-shell :where(
  .topbar, .nav, .header-actions, .hero, .hero-content, .hero-actions,
  .service-grid, .service-card, .card-copy, .stats, .stat,
  .services-hero, .services-copy, .benefits-row, .benefit,
  .services-panel, .services-list, .service-item, .service-name,
  .bottom-info, .consult-card, .mini-card, .modal-card, .modal-scroll,
  .rules-hero, .rules-copy, .rules-panel, .rules-grid, .rules-column,
  .rule-item, .offer-strip, .offer-file-card, .rules-cta, .cta-text,
  .reviews-hero, .reviews-copy, .reviews-panel, .review-cards-grid,
  .review-card-public, .review-card-content, .review-card-meta,
  .contacts-hero, .contacts-copy, .contact-cards, .contact-card,
  .news-hero, .news-hero-copy, .news-hero-card, .news-filters,
  .publication-grid, .publication-card, .publication-card-body,
  .publication-detail, .publication-detail-head, .publication-body,
  .faq-hero, .faq-hero-copy, .faq-section, .faq-section-head,
  .faq-list, .faq-item, .faq-question, .faq-contact-card,
  .knowledge-hero, .knowledge-hero-copy, .knowledge-browser,
  .knowledge-toolbar, .knowledge-search, .knowledge-grid,
  .knowledge-card, .knowledge-content, .knowledge-accuracy,
  .topic-hero, .topic-hero-copy, .topic-layout, .topic-article,
  .topic-section, .topic-sidebar, .topic-sidebar-card, .topic-cta,
  .legal-document-hero, .legal-document-actions, .legal-document-shell,
  .legal-document-nav, .legal-doc-card,
  .profile-hero, .profile-copy, .profile-dashboard, .profile-card,
  .card-title, .account-table, .account-row, .order-row,
  .referral-card, .referral-code-box, .referral-link-box,
  .referral-history-grid, .referral-history-row,
  .payment-head, .payment-layout, .payment-methods, .method-card,
  .payment-tools, .order-summary, .payment-promo, .payment-bonus-box,
  .auth-card, .auth-card-head, .auth-simple-card,
  .site-footer, .footer-top, .footer-bottom, .footer-col,
  .footer-brand, .footer-entity, .footer-legal, .footer-payments,
  .footer-payment-logos
) {
  min-width: 0;
}

.page-shell :where(
  h1, h2, h3, h4, p, li, blockquote,
  .service-name, .benefit strong, .benefit span,
  .publication-card-body, .publication-expiry,
  .faq-question, .faq-answer-inner,
  .knowledge-card summary > strong, .knowledge-summary,
  .knowledge-content li, .knowledge-sources a,
  .topic-lead, .topic-description, .topic-section,
  .legal-document-nav a, .legal-doc-card,
  .profile-card, .account-row, .order-row,
  .payment-layout, .summary-list,
  .footer-col, .footer-links a, .footer-legal, .footer-copy
) {
  overflow-wrap: break-word;
  word-break: normal;
}

.support-panel :where(
  strong, small, p, span, label, a, button,
  .support-bubble, .support-ai-copy, .support-ai-sources
) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

/* The launcher follows safe areas and its tail visually points inward. */
.support-widget {
  right: max(24px, calc(env(safe-area-inset-right) + 16px));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
}

.support-launcher {
  max-width: calc(100vw - 32px);
}

.support-launcher::after {
  right: 22px;
  bottom: -5px;
  border-width: 0 1px 1px 0;
}

.support-launcher-pet {
  display: block;
  align-self: center;
  transform: translateY(1px);
}

.support-launcher strong {
  min-width: 0;
  line-height: 1.1;
  text-align: left;
}

.support-panel-head > div,
.support-thread-meta > div,
.support-active-request > span {
  min-width: 0;
}

@media (max-width: 1000px) and (min-width: 641px) {
  .topbar > .nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .topbar > .nav .nav-link {
    white-space: normal !important;
    line-height: 1.12 !important;
    text-align: center;
  }
}

@media (max-width: 720px) {
  .page-shell {
    max-width: 100%;
  }

  .topbar,
  .topbar > .nav,
  .topbar > .header-actions {
    min-width: 0 !important;
  }

  .topbar > .nav .nav-link {
    min-height: 46px !important;
    height: auto !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  .topbar > .nav .nav-link > span {
    min-width: 0;
    overflow-wrap: break-word;
  }

  :where(
    .hero h1, .services-copy h1, .rules-copy h1,
    .reviews-copy h1, .contacts-copy h1, .news-hero h1,
    .publication-detail-head h1, .profile-copy h1, .payment-head h1,
    .faq-hero h1, .knowledge-hero h1, .topic-hero h1,
    .legal-document-hero h1, .legal-doc-card h1
  ) {
    max-width: 100% !important;
    font-size: clamp(36px, 12vw, 54px) !important;
    line-height: .98 !important;
    letter-spacing: -2px !important;
    overflow-wrap: break-word;
  }

  .news-hero h1 span:first-child {
    white-space: normal !important;
  }

  :where(
    .hero-actions, .trust-row, .benefits-row, .cta-actions,
    .modal-actions, .legal-document-actions, .publication-card-meta,
    .review-card-meta, .support-thread-meta
  ) {
    max-width: 100%;
    flex-wrap: wrap;
  }

  :where(
    .btn, .consult-card a, .green-action, .dark-action,
    .show-more, .offer-link, .faq-contact-link,
    .legal-document-actions a, .payment-promo-controls button,
    .loyalty-conflict-confirm
  ) {
    max-width: 100%;
    height: auto;
    min-height: 46px;
    white-space: normal;
    line-height: 1.22;
    text-align: center;
  }

  :where(
    .service-grid, .stats, .bottom-info, .contact-cards,
    .publication-grid, .review-cards-grid, .topic-layout,
    .topic-sidebar, .profile-dashboard, .payment-layout
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(
    .services-panel, .rules-panel, .reviews-panel,
    .faq-section, .knowledge-browser, .topic-article,
    .profile-card, .payment-methods, .payment-tools,
    .order-summary, .publication-detail
  ) {
    max-width: 100%;
  }

  .faq-section-head,
  .faq-contact-card,
  .knowledge-accuracy {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .faq-item summary {
    grid-template-columns: 40px minmax(0, 1fr) 34px !important;
  }

  .knowledge-toolbar > p {
    white-space: normal;
  }

  .knowledge-sources a {
    width: auto;
    max-width: 100%;
  }

  .publication-expiry,
  .publication-more,
  .news-filters a,
  .trust-row > div,
  .benefit strong,
  .benefit span,
  .legal-documents-badge,
  .publication-cta a,
  .footer-copy,
  .footer-payments > span {
    white-space: normal;
  }

  .modal-price,
  .summary-list > div,
  .promo-row,
  .bonus-summary-row {
    min-width: 0;
    flex-wrap: wrap;
  }

  :where(#modalTitle, #modalDesc, #modalPrice) {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .support-widget {
    right: max(10px, calc(env(safe-area-inset-right) + 8px));
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px));
  }

  .support-launcher {
    max-width: calc(100vw - 20px);
    min-height: 60px;
    padding: 3px 18px 3px 8px;
    gap: 8px;
  }

  .support-launcher::after {
    right: 18px;
    bottom: -5px;
    border-width: 0 1px 1px 0;
  }

  .support-launcher-pet {
    width: 44px;
    flex-basis: 44px;
  }

  .support-launcher strong {
    font-size: clamp(14px, 4vw, 16px);
  }

  .support-panel {
    inset:
      auto max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
    max-width: none;
  }

  .support-panel-head {
    padding-inline: 13px;
  }

  .support-panel-head > div {
    flex: 1 1 auto;
  }

  .support-panel-head strong,
  .support-panel-head small {
    white-space: normal;
  }

  .support-popular button,
  .support-active-request,
  .support-operator-button,
  .support-submit-button,
  .support-new-request,
  .support-panel-foot a {
    white-space: normal;
    line-height: 1.25;
  }
}

@media (max-width: 420px) {
  .topbar {
    gap: 9px !important;
  }

  .topbar > .logo {
    width: 124px !important;
    padding-inline: 10px !important;
    font-size: 11.5px !important;
  }

  .topbar > .logo .logo_help {
    margin-left: 20px !important;
  }

  .topbar > .header-actions {
    gap: 5px !important;
  }

  .header-cart-btn,
  .auth-main-btn,
  .theme-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  .profile-menu {
    right: 0 !important;
    width: min(270px, calc(100vw - 16px)) !important;
  }

  :where(
    .services-panel, .rules-panel, .reviews-panel,
    .faq-section, .knowledge-browser, .topic-article,
    .profile-card, .payment-methods, .payment-tools,
    .order-summary, .publication-detail
  ) {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .services-page .service-item {
    grid-template-columns: 72px minmax(0, 1fr) 18px !important;
    gap: 8px !important;
  }

  .services-page .bank-logo {
    width: 68px !important;
    min-width: 68px !important;
  }

  .service-name {
    font-size: 13px !important;
    line-height: 1.25;
  }

  .profile-card :where(
    .account-row strong, .order-row strong, .referral-history-row b,
    .case-document-row strong
  ) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .support-panel-body {
    padding: 13px;
  }

  .support-question-form,
  .support-message-form {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 7px;
  }
}

@media (max-width: 360px) {
  .page-shell {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  :where(
    .hero h1, .services-copy h1, .rules-copy h1,
    .reviews-copy h1, .contacts-copy h1, .news-hero h1,
    .publication-detail-head h1, .profile-copy h1, .payment-head h1,
    .faq-hero h1, .knowledge-hero h1, .topic-hero h1,
    .legal-document-hero h1, .legal-doc-card h1
  ) {
    font-size: clamp(32px, 11.5vw, 42px) !important;
    letter-spacing: -1.5px !important;
  }

  .faq-item summary {
    grid-template-columns: 34px minmax(0, 1fr) 30px !important;
    gap: 8px !important;
    padding-inline: 10px !important;
  }

  .faq-number,
  .faq-toggle {
    width: 32px !important;
    height: 32px !important;
  }

  .support-widget {
    right: max(8px, calc(env(safe-area-inset-right) + 6px));
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 8px));
  }

  .support-launcher {
    max-width: calc(100vw - 16px);
    min-height: 56px;
    padding: 3px 14px 3px 7px;
    gap: 6px;
    border-radius: 17px;
  }

  .support-launcher-pet {
    width: 40px;
    flex-basis: 40px;
  }

  .support-launcher strong {
    font-size: 13px;
  }

  .support-panel-head {
    min-height: 70px;
    gap: 8px;
  }

  .support-agent-mark {
    width: 38px;
    height: 38px;
  }

  .support-panel-head button {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  .support-panel-foot {
    padding-inline: 12px;
  }
}

@media (max-width: 300px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .topbar > .logo,
  .topbar > .header-actions,
  .mobile-nav-toggle,
  .topbar > .nav {
    grid-column: 1 !important;
  }

  .topbar > .header-actions {
    grid-row: 2 !important;
    width: 100%;
    justify-self: stretch !important;
    justify-content: space-between;
  }

  .mobile-nav-toggle {
    grid-row: 3 !important;
  }

  .topbar > .nav {
    grid-row: 4 !important;
  }
}

@media (max-height: 700px) {
  .support-panel {
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
  }

  .support-panel.is-thread-view {
    max-height: calc(100dvh - 12px);
  }
}

/* Final support launcher: compact, stable and without a detached tail. */
.support-widget {
  right: max(20px, calc(env(safe-area-inset-right) + 14px));
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px));
}

.support-launcher {
  width: auto;
  min-width: 132px;
  min-height: 54px;
  padding: 4px 16px 4px 7px;
  justify-content: flex-start;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: linear-gradient(145deg, #2da746, #14752d);
  box-shadow: 0 12px 28px rgba(10, 79, 31, .28);
}

.support-launcher::after {
  display: none;
  content: none;
}

.support-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(10, 79, 31, .34);
}

.support-launcher-pet {
  width: 40px;
  flex: 0 0 40px;
  transform: none;
}

.support-launcher strong {
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}

.support-launcher-dot {
  top: -3px;
  right: -3px;
  border-color: #14752d;
  background: #fff06a;
}

html[data-theme="dark"] .support-launcher,
html[data-theme="dark"] .support-launcher:hover {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: linear-gradient(145deg, #2da746, #14752d);
}

@media (max-width: 600px) {
  .support-widget {
    right: max(10px, calc(env(safe-area-inset-right) + 8px));
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px));
  }

  .support-launcher {
    width: 54px;
    min-width: 54px;
    min-height: 54px;
    padding: 5px;
    justify-content: center;
    gap: 0;
    border-radius: 18px;
  }

  .support-launcher-pet {
    width: 42px;
    flex-basis: 42px;
  }

  .support-launcher strong {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}