/* Language navigation stays usable with the complete translated catalogue. */
/* Long translated words must stay inside the home indicators and resource cards. */
body.view-home #main .hero-metrics > div { min-width: 0; }
body.view-home #main .hero-metrics small,
body.view-home .home-resource-grid :is(strong,p),
body.view-home .home-trust :is(strong,p) { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 760px) {
  body.view-home #main .hero-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.language-menu {
  max-block-size: min(420px, calc(100dvh - 120px));
  max-inline-size: calc(100vw - 32px);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.language-menu a { gap: 12px; }
.language-menu a > span { min-inline-size: 0; }
.footer-bottom .footer-languages { display: flex; flex-wrap: wrap; gap: 8px 16px; max-width: 100%; }
.footer-bottom { flex-wrap: wrap; }

/* Navigation controls keep a full touch target without scaling their labels. */
body .menu-toggle { width: 44px; min-width: 44px; min-height: 44px; padding: 9px 8px; }
body .language-picker > summary { min-width: 44px; min-height: 44px; align-items: center; }
body .language-menu a { min-height: 44px; padding-block: 8px; align-items: center; }
body .nav-wrap nav > a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; }
body .faq-list summary { min-height: 44px; align-items: center; }
body .copy-code { min-height: 44px; }
body footer :is(.footer-column > a,.footer-explore > a,.footer-languages > a) {
  min-height: 44px;
  display: flex;
  align-items: center;
  margin-block: 0;
  padding-block: 8px;
}
body .footer-languages > a { min-width: 44px; padding-inline: 6px; }
body footer .brand { min-height: 44px; }

/* The anti-spam field is visually hidden without creating RTL scroll space. */
body .honeypot {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Without script, the primary links stay in the normal document flow. */
@media (max-width: 1180px) {
  html:not(.navigation-ready) .site-header .nav-wrap { flex-wrap: wrap; }
  html:not(.navigation-ready) .site-header .menu-toggle { display: none; }
  html:not(.navigation-ready) .site-header #main-nav {
    display: flex;
    position: static;
    flex: 1 0 100%;
    order: 3;
    width: 100%;
    margin: 0;
    padding: 8px 0;
    gap: 4px 20px;
    flex-wrap: wrap;
    background: transparent;
    border: 0;
  }
}

/* Isolate exact values so an RTL paragraph cannot reorder code or payment data. */
pre, code, .console-command,
.checkout-copy-field input, input[name="ref"], input[name="username"],
input[name="hostname"], input[type="email"], textarea[name="ssh_key"],
input[type="number"],
[data-invoice-amount], [data-invoice-timer], [data-invoice-transaction],
[data-summary-total], [data-deploy-plan-price], .plan-price .amount,
.checkout-usd > strong, .brand > span,
.checkout-plan-spec, [data-summary-spec],
.view-deploy .radio-card > span > small,
.spec-resource > b {
  direction: ltr;
  unicode-bidi: isolate;
}
pre, code, .console-command, .checkout-copy-field input,
input[name="ref"], input[name="username"], input[name="hostname"],
input[type="email"], textarea[name="ssh_key"] { text-align: left; }

/* Arabic uses the site's local/system font stack, with natural connected glyphs. */
html[lang="ar"] {
  --font: "Segoe UI", Tahoma, Arial, sans-serif;
  --font-display: "Segoe UI", Tahoma, Arial, sans-serif;
}
html[lang="ar"] :is(body, p, h1, h2, h3, .eyebrow, .pill, .status-label, .popular,
  .checkout-section-top .eyebrow, .hero-metrics small) {
  letter-spacing: normal !important;
}
html[lang="ar"] :is(h1, h2, h3) { line-height: 1.45 !important; }
html[lang="ar"] :is(.eyebrow, .status-label, .pill, .popular) {
  font-family: var(--font);
}

html[dir="rtl"] .language-menu { right: auto; left: 0; }
html[dir="rtl"] .nav-wrap nav { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .menu-toggle { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .skip-link { left: auto; right: 20px; }
html[dir="rtl"] :is(table, caption, .discovery-table-wrap table,
  .discovery-table-wrap caption, .view-track .page-hero.narrow,
  .checkout-invoice-details dd, .view-dashboard .billing-empty) { text-align: right; }
html[dir="rtl"] ul { padding-left: 0; padding-right: 24px; }
html[dir="rtl"] .spec-list { padding-inline: 0; }
html[dir="rtl"] .breadcrumbs li + li::before { margin-right: 0; margin-left: 9px; }
html[dir="rtl"] .segmented button span { margin-left: 0; margin-right: 9px; }
html[dir="rtl"] .spec-list svg { margin-right: 0; margin-left: 3px; }
html[dir="rtl"] .hero-metrics > div {
  padding-left: 0;
  padding-right: 24px;
  border-left: 0;
  border-right: 1px solid #75b9973b;
}
html[dir="rtl"] .hero-metrics > div:first-child { padding-right: 0; border-right: 0; }
html[dir="rtl"] .terminal-payment-methods { text-align: left; }
html[dir="rtl"] .console-tag { right: auto; left: 24px; }
html[dir="rtl"] .payment-deadline { text-align: left; }
html[dir="rtl"] .checkout-details dd { text-align: left; }
html[dir="rtl"] .checkout-copy-field button {
  border-left: 0;
  border-right: 1px solid #ffffff12;
  border-radius: 7px 0 0 7px;
}
html[dir="rtl"] :is(.discovery-editorial-note, .checkout-preview,
  .checkout-address-qr-note, .checkout-reload, .auth-checkout-notice) {
  border-left: 0;
  border-right: 2px solid var(--mint);
}
html[dir="rtl"] :is(.checkout-address-qr-note, .checkout-reload) {
  padding-left: 0;
  padding-right: 13px;
}
html[dir="rtl"] .discovery-resource-arrow { right: auto; left: 0; }
html[dir="rtl"] .dashboard-tabs > a > small,
html[dir="rtl"] .topup-history small { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .view-dashboard .draft-list .draft-actions {
  padding-left: 0;
  padding-right: 40px;
}
html[dir="rtl"] .reference-box button { margin-left: 0; margin-right: auto; }
html[dir="rtl"] input[name="ref"]::placeholder { direction: rtl; text-align: right; }
html[dir="rtl"] .back-top { right: auto; left: 24px; }

@media (min-width: 761px) {
  html[dir="rtl"] .view-deploy .order-summary {
    border-left: 0;
    border-right: 1px solid var(--client-line);
    padding-left: 0;
    padding-right: 29px;
  }
  html[dir="rtl"] .view-dashboard .dashboard-nav {
    padding-right: 0;
    padding-left: 25px;
    border-right: 0;
    border-left: 1px solid var(--client-line);
  }
}
@media (min-width: 821px) {
  html[dir="rtl"] .view-checkout .checkout-summary {
    padding-right: 0;
    padding-left: 29px;
    border-right: 0;
    border-left: 1px solid var(--checkout-line);
  }
}
@media (min-width: 921px) {
  html[dir="rtl"] .view-payment .payment-layout > .checkout-summary {
    padding-right: 0;
    padding-left: 29px;
    border-right: 0;
    border-left: 1px solid var(--payment-line);
  }
}
@media (max-width: 920px) {
  html[dir="rtl"] .payment-layout .checkout-summary .checkout-details dd { text-align: right; }
  html[dir="rtl"] .payment-layout .checkout-summary .checkout-saving { text-align: left; }
}
@media (max-width: 820px) {
  html[dir="rtl"] .checkout-summary .checkout-details dd { text-align: right; }
  html[dir="rtl"] .checkout-summary .checkout-saving { text-align: left; }
}
@media (max-width: 760px) {
  html[dir="rtl"] .hero-metrics > div { padding-right: 18px; }
  html[dir="rtl"] .hero-metrics > div:nth-child(3) { padding-right: 0; border-right: 0; }
  html[dir="rtl"] .view-dashboard .draft-list .draft-actions { padding-right: 37px; }
  html[dir="rtl"] .view-dashboard .invoice-list > article > .text-link {
    margin-left: 0;
    margin-right: 42px;
  }
  html[dir="rtl"] .view-track .reference-box button { margin-right: 0; }
  html[dir="rtl"] .back-top { left: 16px; }
}
@media (max-width: 480px) {
  /* Longer translated actions share the available header space and can wrap. */
  body .site-header .nav-actions {
    min-inline-size: 0;
    flex: 0 1 auto;
  }
  .site-header .language-picker,
  .site-header .menu-toggle { flex-shrink: 0; }
  body .site-header .nav-actions .button {
    min-inline-size: 0;
    min-block-size: 44px;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .language-menu {
    position: fixed;
    top: 76px;
    right: 16px;
    left: auto;
    width: min(235px, calc(100vw - 32px));
    max-block-size: min(420px, calc(100dvh - 176px));
  }
  html[dir="rtl"] .language-menu { right: auto; left: 16px; }
  html[dir="rtl"] .console-tag { left: 15px; }
}
@media (max-width: 360px) {
  body .site-header .nav-actions > .button { display: none; }
}
@media (max-width: 560px) {
  html[dir="rtl"] [data-checkout-selection] .checkout-selected-method > [data-payment-method-network] {
    text-align: right;
  }
}