/* Loaded after page styles. Keep printable invoices independent of screen layout. */
main, section, form, .grid > *, .form-layout > *, .contact-layout > *,
.profile-grid > *, .dash-user > *, .footer-grid > * { min-width: 0; }
input, select, textarea { min-width: 0; }
textarea { resize: vertical; }
.contact-link, .dash-email, .profile-field, .verify-container, .modal,
.footer-col, .supplier-key-facts, .inv-kpi-val { overflow-wrap: anywhere; }
.product-grid { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.vehicle-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.suppliers-grid { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
.dash-table-wrap { max-width: 100%; overflow-x: auto; }
.nav-account-wrap:focus-within .nav-account-dropdown { opacity: 1; pointer-events: auto; transform: none; }
:focus-visible { outline: 2px solid #C9A84C; outline-offset: 3px; }

/* Nine links, language and account controls need a compact menu on laptops too. */
@media screen and (max-width: 1360px) {
  nav.raiz-nav { padding: 0 4%; flex-wrap: wrap; height: auto; min-height: 64px; }
  nav.raiz-nav > .nav-logo { height: 64px; display: flex; align-items: center; }
  nav.raiz-nav .nav-actions { display: none !important; }
  nav.raiz-nav .nav-hamburger { display: flex !important; height: 44px; width: 44px; align-items: center; justify-content: center; }
  nav.raiz-nav .nav-links { display: none; order: 4; flex-direction: column; width: 100%; gap: 0; padding: 8px 0 12px; background: #1a1a1a; max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
  nav.raiz-nav .nav-links.open { display: flex; }
  nav.raiz-nav .nav-links li { width: 100%; flex-shrink: 0; }
  nav.raiz-nav .nav-links a { display: block; white-space: normal; padding: 13px 20px; font-size: 15px; }
  nav.raiz-nav .nav-lang-li, nav.raiz-nav .nav-account-li,
  nav.raiz-nav .nav-quote-li { display: block; }
}
@media screen and (max-width: 1024px) {
  .inv-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero.hero-logistics .hero-visual-container { display: block !important; }
}
@media screen and (max-width: 768px) {
  input:not([type=checkbox]):not([type=radio]), select, textarea,
  .modal input, .modal select, .modal textarea { font-size: 16px !important; }
  button, .btn, .panel-action, .dash-tab { min-height: 44px; }
  .modal-overlay { padding: 10px; }
  .modal { width: 100% !important; max-height: calc(100dvh - 20px); overscroll-behavior: contain; }
  .modal .grid-2col, .modal .grid-3col { grid-template-columns: minmax(0, 1fr) !important; }
  .panel-header, .search-bar, .topbar, .invoice-top-toolbar > div { flex-wrap: wrap; }
  .search-bar > input, .search-bar > select { flex: 1 1 160px; max-width: 100%; }
  .modal .d-flex { flex-wrap: wrap; }
  .invoice-scroll-body { padding: 10px; }
  .invoice-sheet { padding: 20px 14px; }
  .inv-header, .inv-signature-row { flex-direction: column; }
  .inv-doc-info { text-align: left; }
  .inv-trace-banner { grid-template-columns: 76px minmax(0, 1fr); }
  .inv-trace-banner > :last-child { grid-column: 1 / -1; }
  .inv-parties, .inv-pay-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .inv-pay-grid > div { min-width: 0 !important; }
  .inv-calc-box { width: 100%; }
  .inv-tbl { display: block; overflow-x: auto; }
  .inv-tbl th, .inv-tbl td { min-width: 75px; }
  .inv-items-heading { display: none !important; }
  .inv-item-row { grid-template-columns: minmax(0, 1fr) !important; padding: 12px; border: 1px solid #555; border-radius: 8px; gap: 10px !important; }
  .inv-item-row label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .inv-item-row .item-field-label { display: block; font-size: 12px; color: #ccc; }
  .inv-item-row button { justify-self: end; min-width: 44px; }
  #chatbot-panel, #freight-panel { max-height: calc(100dvh - 200px); overflow-y: auto; }
}
@media screen and (min-width: 769px) {
  .inv-item-row label { min-width: 0; }
  .inv-item-row .item-field-label { display: none; }
}
@media screen and (max-width: 480px) {
  .login-card, .pay-card, .forgot-password-card, .reset-password-card,
  .verify-container { padding: 24px 16px; }
  .inv-kpi-grid, .supplier-key-facts { grid-template-columns: minmax(0, 1fr); }
  .estimator-box { padding: 20px 14px; }
  .country-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .logistics-stages { grid-template-columns: minmax(0, 1fr); }
  .logistics-caption { min-height: 0; }
  .brand-left { flex-wrap: wrap; }
  .veh-lb-inner { gap: 4px; padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}
/* Contact addresses must wrap instead of expanding the mobile layout viewport. */
.contact-info-footer, .footer-link { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.chat-header .info { min-width: 0; }
.chat-header { gap: 6px; padding-inline: 10px; }
.chat-header .info h4 { overflow-wrap: anywhere; }
@media screen and (max-width: 900px) {
  .page-container.grid-2col, .page-container.grid-3col { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media screen and (max-width: 768px) {
  .sidebar:not(.open) { visibility: hidden; }
  .sidebar.open { visibility: visible; max-height: 100dvh; }
}
@media screen and (max-width: 600px) {
  .footer-nl-form { flex: 1 1 100%; flex-direction: column; min-width: 0; }
  .footer-nl-form input, .footer-nl-form button { width: 100%; }
  .footer-nl-text { min-width: 0; }
}
#chatbot-panel:not(.open), #freight-panel:not(.open) { visibility: hidden; }
#chatbot-panel.open, #freight-panel.open { visibility: visible; }
@media screen and (max-width: 1360px) {
  nav.raiz-nav .nav-links { max-height: calc(100dvh - 80px); }
}

/* Shared dialog actions: a full-width close button must not squeeze its sibling. */
.modal .modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.modal .modal-actions > :is(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto !important;
  width: auto;
  min-width: 0;
  min-height: 44px;
  height: auto;
  margin: 0;
  padding: 11px 18px;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.modal .modal-actions > :first-child { flex: 1 1 12rem !important; }
.modal .modal-actions.flex-col { align-items: stretch; }
.modal .modal-actions.flex-col > :is(button, a) { flex: 0 0 auto !important; }
@media screen and (max-width: 600px) {
  .modal .modal-actions { flex-direction: column; align-items: stretch; }
  .modal .modal-actions > :is(button, a),
  .modal .modal-actions > :first-child { flex: 0 0 auto !important; width: 100%; }
}

@media screen and (max-width: 768px) {
  .invoice-payment-actions { flex-wrap: wrap; }
  .invoice-payment-actions > input { flex: 1 1 100% !important; width: 100%; }
  .invoice-payment-actions > button { flex: 1 1 140px; min-height: 44px; }
}