/* English plan page (/plans/...) refinements layered on commerce-details.css:
   spec sheet, same-destination comparison, icon tiles and mobile checkout bar. */
.plan-details-container, .localized-plan-shell { --px-line: #e4e7ec; --px-ink: #101828; --px-muted: #475467; --px-brand: #5145cd; --px-brand-dark: #3730a3; --px-soft: #f5f6ff; }

/* commerce-details.css orders sections explicitly; slot the spec sheet after
   the at-a-glance tiles and the comparison after coverage, before partner offers. */
.plan-details-container > .plan-specs { order: 4; }
.plan-details-container > .plan-compare { order: 5; }

/* Consistent section rhythm and heading weight */
.plan-details-container > section { scroll-margin-top: 90px; }
.plan-details-container .section-title { font-weight: 800 !important; }
.plan-details-container > .plan-details,
.plan-details-container > .plan-specs,
.plan-details-container > .countries-coverage,
.plan-details-container > .plan-compare,
.plan-details-container > .installation-instructions,
.plan-details-container > .faqs,
.plan-details-container > .similar-plans { margin-top: 3.25rem; }
@media (min-width: 1024px) {
    .plan-details-container > .plan-details,
    .plan-details-container > .plan-specs,
    .plan-details-container > .countries-coverage,
    .plan-details-container > .plan-compare,
    .plan-details-container > .installation-instructions,
    .plan-details-container > .faqs,
    .plan-details-container > .similar-plans { margin-top: 4rem; }
}
.details-grid { margin-bottom: 0 !important; }

/* At-a-glance tiles */
.detail-icon { width: 2.6rem; height: 2.6rem; min-width: 0 !important; padding: 0 !important; border-radius: .8rem !important; }
.detail-icon svg { width: 1.25rem; height: 1.25rem; }
.detail-card #networkDetails { font-weight: 650; color: var(--px-ink) !important; }

/* Specification sheet */
.plan-spec-list { display: grid; margin: 0; border: 1px solid var(--px-line); border-radius: 1.15rem; background: #fff; overflow: hidden; box-shadow: 0 8px 24px rgba(16, 24, 40, .045); }
@media (min-width: 768px) { .plan-spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-spec-list > div { display: grid; grid-template-columns: minmax(7.5rem, 38%) minmax(0, 1fr); gap: 1rem; padding: .95rem 1.25rem; border-top: 1px solid var(--px-line); }
.plan-spec-list > div:first-child { border-top: 0; }
@media (min-width: 768px) {
    .plan-spec-list > div:nth-child(2) { border-top: 0; }
    .plan-spec-list > div:nth-child(odd) { border-right: 1px solid var(--px-line); }
}
.plan-spec-list dt { margin: 0; color: #667085; font-size: .8rem; font-weight: 750; letter-spacing: .02em; }
.plan-spec-list dd { margin: 0; color: var(--px-ink); font-size: .92rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }

/* Same-destination comparison */
.plan-compare-scroll { border: 1px solid var(--px-line); border-radius: 1.15rem; background: #fff; overflow-x: auto; box-shadow: 0 8px 24px rgba(16, 24, 40, .045); }
.plan-compare-scroll:focus-visible { outline: 3px solid #818cf8; outline-offset: 3px; }
.plan-compare-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .92rem; }
.plan-compare-table th, .plan-compare-table td { padding: .85rem 1.1rem; border-top: 1px solid var(--px-line); text-align: left; white-space: nowrap; }
.plan-compare-table thead th { border-top: 0; background: #f9fafb; color: #667085; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.plan-compare-table tbody th { font-weight: 750; }
.plan-compare-table tbody th a { color: var(--px-brand-dark); text-decoration: none; }
.plan-compare-table tbody th a:hover { text-decoration: underline; text-underline-offset: 3px; }
.plan-compare-table tbody tr:hover td, .plan-compare-table tbody tr:hover th { background: #fafaff; }
.plan-compare-table td { color: var(--px-muted); }
.plan-compare-table td:nth-child(3) { color: var(--px-ink); font-weight: 750; }
.plan-compare-table tr.is-current th, .plan-compare-table tr.is-current td { background: var(--px-soft) !important; }
.plan-compare-table tr.is-current th { box-shadow: inset 4px 0 0 var(--px-brand); }
.plan-compare-table tr.is-current th span { color: var(--px-ink); }
.plan-compare-table tr.is-current small { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px; background: var(--px-brand); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .02em; vertical-align: middle; margin-left: 0; margin-inline-start: .5rem; }
.plan-compare-muted { color: #98a2b3; }
.plan-compare-more { display: inline-flex; margin-top: .9rem; color: var(--px-brand-dark); font-weight: 800; font-size: .9rem; text-decoration: none; }
.plan-compare-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Similar plans: tidy flags */
.related-plan-card .country-badge img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

/* Mobile checkout bar: once scripted, hidden until the main checkout button scrolls away */
@media (max-width: 767px) {
    /* Primary checkout stays in the price card; the fixed bar takes over after it. */
    .plan-price .purchase-button { display: flex !important; width: 100%; min-height: 3.1rem; justify-content: center; margin: .7rem 0 .1rem !important; }
    .plan-compare-table { min-width: 0; }
    .plan-compare-table th:nth-child(2), .plan-compare-table td:nth-child(2) { display: none; }
    .plan-compare-table th, .plan-compare-table td { padding: .8rem .75rem; }
    .plan-compare-table tr.is-current small { display: block; width: max-content; margin: .3rem 0 0; }
    /* Without the script the bar stays visible, so checkout never depends on hydration. */
    .mobile-purchase-bar[data-ready] { transition: transform .25s ease, opacity .25s ease; }
    .mobile-purchase-bar[data-ready]:not(.is-visible) { transform: translateY(calc(100% + 1.5rem)); opacity: 0; pointer-events: none; }
    .plan-spec-list > div { grid-template-columns: minmax(6.5rem, 40%) minmax(0, 1fr); padding: .85rem 1rem; }
    .plan-details-container > .plan-details,
    .plan-details-container > .plan-specs,
    .plan-details-container > .countries-coverage,
    .plan-details-container > .plan-compare,
    .plan-details-container > .installation-instructions,
    .plan-details-container > .faqs,
    .plan-details-container > .similar-plans { margin-top: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { .mobile-purchase-bar { transition: none !important; } }

/* The description is server-rendered and no longer replaced after load, so
   the mobile space reserved for that swap (min-height: 6.2em) is not needed. */
@media (max-width: 767px) {
    .plan-details-container .plan-description { min-height: 0 !important; }
}

/* Localized plan pages (/{locale}/plans/...): spec sheet, comparison, FAQ */
.localized-plan-section { margin-top: 3rem; }
.localized-plan-section-eyebrow { margin: 0 0 .4rem; color: #5145cd; font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.localized-plan-section h2 { margin: 0 0 1.1rem; color: #101828; font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.localized-plan-section-intro { margin: -.4rem 0 1.1rem; color: #475467; line-height: 1.6; }
.localized-plan-faq details { border: 1px solid #e4e7ec; border-radius: 1rem; background: #fff; box-shadow: 0 8px 24px rgba(16, 24, 40, .045); overflow: clip; }
.localized-plan-faq details + details { margin-top: .75rem; }
.localized-plan-faq summary { position: relative; padding: 1.15rem 3.5rem 1.15rem 1.3rem; color: #101828; font-weight: 750; cursor: pointer; list-style: none; }
.localized-plan-faq summary::-webkit-details-marker { display: none; }
.localized-plan-faq summary::after { content: '+'; position: absolute; top: 50%; inset-inline-end: 1.2rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; transform: translateY(-50%); border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 1.15rem; }
[dir="rtl"] .localized-plan-faq summary { padding: 1.15rem 1.3rem 1.15rem 3.5rem; }
.localized-plan-faq details[open] summary::after { content: '−'; }
.localized-plan-faq summary:focus-visible { outline: 3px solid #818cf8; outline-offset: -3px; }
.localized-plan-faq details p { margin: 0; padding: 0 1.3rem 1.2rem; color: #475467; line-height: 1.65; }
[dir="rtl"] .plan-compare-table th, [dir="rtl"] .plan-compare-table td { text-align: right; }
[dir="rtl"] .plan-compare-table tr.is-current th { box-shadow: inset -4px 0 0 #5145cd; }
[dir="rtl"] .plan-spec-list > div:nth-child(odd) { border-right: 0; }
@media (min-width: 768px) { [dir="rtl"] .plan-spec-list > div:nth-child(odd) { border-left: 1px solid #e4e7ec; } }
@media (max-width: 767px) { .localized-plan-section { margin-top: 2.25rem; } }