/* Country links retain the homepage's approved card geometry and typography. */
/* The location page loads this stylesheet but not critical.css, whose global
   `* { box-sizing: border-box }` keeps the header container within the viewport.
   Without it, at 390px .container-header (width:100% + 15px padding) overflowed by
   the padding. Re-assert the reset the homepage relies on, scoped to page chrome. */
.vps-location-page, .vps-location-page *,
.vps-location-page .container, header .container-header { box-sizing: border-box; }
.locations-section .loc-country-link { color: inherit; font: inherit; }
.locations-section .loc-country-link:hover,
.locations-section .loc-country-link:focus { text-decoration: underline; }

/* Country pages: the home page sections, with body text from 16px and 48px targets. */
.vps-location-page { font-size: 16px; line-height: 1.6; }
.vps-location-page .location-block_light > section { background: #ffffff; }
.vps-location-page .location-block_grey > section { background: #fafafa; }
.vps-location-page .cta-section.location-cta_after-grey .cta-decor::after { background-color: #fafafa; }
.vps-location-page .hero-section .subtitle,
.vps-location-page .section-subtitle { font-size: 16px; line-height: 1.6; max-width: 760px; }
.vps-location-page .hero-section .subtitle { font-weight: 400; }
.vps-location-page .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.vps-location-page .location-note { text-align: center; margin: 16px 0 0; }
.vps-location-page .location-note a { display: inline-flex; align-items: center; min-height: 48px; }
.vps-location-page .cta-section .location-note,
.vps-location-page .cta-section .location-note a { color: #ffffff; padding: 0; }

/* Plans: one heading per data center, its Looking Glass link beside it. */
.vps-location-page .location-facility { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin: 40px 0 24px; }
.vps-location-page .location-facility h3 { margin: 0; text-align: center; }
/* Outrank the legacy tariff selectors even when the theme bundle loads later. */
.vps-location-page .tariffs-section .location-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; align-items: stretch; margin-bottom: 40px; padding-top: 14px; }
.vps-location-page .tariffs-section .location-plans .tariff { width: auto; height: auto; margin: 0; padding: 24px 18px; display: flex; flex-direction: column; min-width: 0; }
.vps-location-page .tariffs-section .location-plans .tariff .tariff-size { font-size: 18px; line-height: 1.4; min-height: 50px; padding: 0; margin: 0 0 8px; }
.vps-location-page .location-best-for { min-height: 52px; margin: 0 0 8px; text-align: center; color: #666666; }
.vps-location-page .location-price { color: #14cda1; font-size: 30px; font-weight: 700; }
.vps-location-page .location-price small { display: block; font-size: 16px; font-weight: 400; }
.vps-location-page .location-payment { min-height: 78px; overflow-wrap: anywhere; }
.vps-location-page .location-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: start; margin: 16px 0 24px; }
.vps-location-page .location-specs dt,
.vps-location-page .location-specs dd { margin: 0; overflow-wrap: anywhere; }
.vps-location-page .location-specs dd { text-align: end; }
.vps-location-page .order-btn { margin-top: auto; }
.vps-location-page .hero-btn,
.vps-location-page .order-btn,
.vps-location-page .loc-network { display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; min-width: 48px; min-height: 48px; font-size: 16px; height: auto; }

/* Tiles (why, use cases, payments) and the reused cards: the height follows the text. */
.vps-location-page .included-section .included-list .included-item { height: auto; min-height: 200px; box-sizing: border-box; padding-bottom: 24px; }
.vps-location-page .included-section .included-list .included-item .included-item-desc { font-size: 16px; margin-right: 30px; }
.vps-location-page .included-section .included-list .included-item .included-item-desc a { color: #08765e; }
.vps-location-page .location-tiles .included-item-title { font-size: 20px; }
.vps-location-page .location-guarantees { padding-top: 0; }
.vps-location-page .location-pay-names { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 12px 30px 0; padding: 0; align-self: stretch; min-width: 0; }
.vps-location-page .location-pay-names li { background: #fafafa; border: 1px solid #ececec; border-radius: 40px; padding: 4px 12px; font-size: 16px; color: #444444; white-space: nowrap; }

/* How to order: a line of text under every step. */
.vps-location-page .steps-section .steps-list .steps-item { height: auto; min-height: 200px; padding-bottom: 24px; box-sizing: border-box; }
.vps-location-page .steps-item-text { position: relative; margin: 8px 30px 0 37px; font-size: 16px; color: #444444; }

.vps-location-page .location-table-wrap { overflow-x: auto; padding-top: 24px; }
.vps-location-page .location-table { border-collapse: collapse; width: 100%; text-align: start; }
.vps-location-page .location-table td,
.vps-location-page .location-table th { padding: 12px 16px; border-bottom: 1px solid #ddd; }
.vps-location-page .location-table a { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; }

/* FAQ: the home page accordion on native <details>. */
.vps-location-page .faq-block .faq-question { min-height: 48px; list-style: none; }
.vps-location-page .faq-block .faq-question::-webkit-details-marker { display: none; }
.vps-location-page .faq-block details[open] > .faq-question::after { transform: rotate(180deg); }
.vps-location-page .faq-block details > .faq-answer { max-height: none; padding-block: 0 15px; }
.vps-location-page .faq-block .faq-answer p { font-size: 16px; }

.vps-location-page .locations-section .loc-country-link { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; }
.vps-location-page .locations-cities li { gap: 12px; flex-wrap: wrap; }
.vps-location-page .locations-tabs-labels li { min-height: 48px; min-width: 48px; }
.vps-location-page .locations-country-name,
.vps-location-page .locations-cities li,
.vps-location-page .locations-tabs-labels li { font-size: 16px; line-height: 1.6; }
.vps-location-page a:focus-visible,
.vps-location-page summary:focus-visible { outline: 2px solid #08765e; outline-offset: 3px; }
@media (max-width: 1050px) {
  .vps-location-page .tariffs-section .location-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .vps-location-page .tariffs-section .location-plans { grid-template-columns: minmax(0, 1fr); }
  .vps-location-page .hero-actions { flex-direction: column; align-items: stretch; }
  .vps-location-page .hero-actions .hero-btn { width: 100%; }
  .vps-location-page .hero-badges li { white-space: normal; }
  .vps-location-page .location-payment,
  .vps-location-page .location-best-for,
  .vps-location-page .tariffs-section .location-plans .tariff .tariff-size { min-height: 0; }
  .vps-location-page .location-specs { grid-template-columns: 1fr 1fr; }
  /* One horizontally scrolling row of coins and card brands. */
  .vps-location-page .location-pay-names { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
}