/* Purchase uses the same foundation tokens and app shell as the other pages. */ /* Source-style content shell, scoped to the purchase route only. */ body:has(#page-purchase.active) { height:100vh; overflow:hidden; background:#edf5f8; } body:has(#page-purchase.active) .main-area { position:fixed; inset:8px 10px 10px 242px; display:flex; flex-direction:column; width:auto; min-width:0; min-height:0; height:auto; margin:0; padding:0; overflow:hidden; background:var(--surface); border:1px solid #e8eef2; border-radius:20px; } body:has(#page-purchase.active) .main-area>.topbar { flex:0 0 70px; background:var(--surface); } body:has(#page-purchase.active) #page-purchase.active { flex:1 1 0%; min-height:0; overflow:auto; scrollbar-gutter:stable; background:var(--surface); } body:has(#page-purchase.active) #page-purchase .cloud-purchase-checkout { top:16px; } @media(max-width:900px) { body:has(#page-purchase.active) .main-area { left:8px; } } @media(max-width:640px) { body:has(#page-purchase.active) .main-area { inset:6px; border-radius:14px; } body:has(#page-purchase.active) .main-area>.topbar { flex-basis:62px; } } #page-purchase.purchase-optimized { --purchase-container-gap:32px; width:100%; max-width:none; height:auto; min-height:0; overflow:visible; margin:0; padding:26px 28px 40px; color:var(--text); background:transparent; font-family:inherit; font-size:12px; line-height:1.5; } #page-purchase.purchase-optimized [hidden] { display:none!important; } #page-purchase.purchase-optimized button, #page-purchase.purchase-optimized input, #page-purchase.purchase-optimized select { font-family:inherit; } #page-purchase.purchase-optimized .cloud-purchase-header { display:flex; align-items:center; justify-content:space-between; margin:0 0 16px; padding:0; } #page-purchase.purchase-optimized h1 { margin:0 0 8px; color:var(--text); font-size:24px; font-weight:700; letter-spacing:-.4px; } #page-purchase.purchase-optimized .cloud-purchase-subtitle { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:4px; } #page-purchase.purchase-optimized .cloud-purchase-subtitle p { margin:0; color:var(--muted); font-size:12px; } #page-purchase.purchase-optimized .cloud-purchase-integrity { display:inline-flex; align-items:center; gap:5px; min-height:20px; height:auto; padding:2px 6px; color:var(--muted); background:#eefafd; border:0; border-radius:999px; font-family:inherit; font-size:11px; font-weight:400; line-height:16px; letter-spacing:0; white-space:nowrap; box-shadow:none; filter:none; } #page-purchase.purchase-optimized .cloud-purchase-integrity .google-brand-icon { display:block; width:11px; height:11px; flex:0 0 11px; object-fit:contain; } #page-purchase.purchase-optimized .xp-integrity-help { display:inline-flex; align-items:center; } #page-purchase.purchase-optimized .xp-integrity-help .cloud-purchase-integrity { cursor:default; } #page-purchase.purchase-optimized .xp-integrity-details { position:fixed; z-index:1000; box-sizing:border-box; padding:10px 12px; color:var(--text); background:#fff; border:1px solid #dfe7ec; border-radius:8px; box-shadow:0 8px 24px rgba(31,48,59,.1); text-align:left; white-space:normal; } #page-purchase.purchase-optimized .xp-integrity-details::before { content:""; position:absolute; top:-5px; left:18px; width:8px; height:8px; background:#fff; border-top:1px solid #dfe7ec; border-left:1px solid #dfe7ec; transform:rotate(45deg); } #page-purchase.purchase-optimized .xp-integrity-details[hidden] { display:none; } #page-purchase.purchase-optimized .xp-integrity-details>strong { display:block; margin:0 0 7px; color:#303740; font-size:12px; font-weight:600; line-height:18px; } #page-purchase.purchase-optimized .xp-integrity-details ul { display:grid; gap:5px; margin:0; padding:0; list-style:none; } #page-purchase.purchase-optimized .xp-integrity-details li { display:flex; align-items:center; gap:7px; color:#68717b; font-size:11px; font-weight:400; line-height:18px; } #page-purchase.purchase-optimized .xp-integrity-details li svg { flex:none; width:13px; height:13px; color:#22b995; } #page-purchase.purchase-optimized .xp-page-label { display:none; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs { display:flex; gap:4px; width:fit-content; height:auto; padding:4px; margin:0 0 20px; background:#eceef4; border:1px solid var(--line); border-radius:10px; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs button { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px; height:56px; min-width:200px; padding:8px 18px; color:var(--muted); border:0; border-radius:7px; background:transparent; line-height:1.5; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs strong { font-size:14px; font-weight:600; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs small { font-size:11px; font-weight:400; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs button.active { color:var(--purple); background:var(--surface); box-shadow:0 2px 6px #191a2108; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs button::after { display:none; } #page-purchase.purchase-optimized .purchase-page-form { display:grid; grid-template-columns:minmax(0,1fr) 320px; align-items:start; gap:var(--purchase-container-gap); width:100%; max-width:none; padding:0; margin:0; border:0; background:none; } #page-purchase.purchase-optimized .cloud-purchase-builder, #page-purchase.purchase-optimized .cloud-purchase-panel { display:flex; flex-direction:column; gap:16px; min-width:0; height:auto; max-height:none; overflow:visible; } #page-purchase.purchase-optimized .cloud-timed-quota-card { display:flex; flex-direction:column; gap:16px; padding:0; border:0; background:none; box-shadow:none; } #page-purchase.purchase-optimized .cloud-purchase-section, #page-purchase.purchase-optimized .cloud-monthly-config, #page-purchase.purchase-optimized .cloud-purchase-advanced-card, #page-purchase.purchase-optimized .cloud-purchase-checkout { padding:20px; margin:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:0 4px 16px #191a2103; } #page-purchase.purchase-optimized .cloud-purchase-section-head { align-items:center; gap:10px; margin:0 0 18px; padding:0; background:none; } #page-purchase.purchase-optimized .cloud-purchase-section-head>b { color:var(--purple); background:var(--purple-soft); border-radius:8px; width:28px; height:28px; flex:0 0 28px; font-size:12px; } #page-purchase.purchase-optimized .cloud-purchase-section-head h2 { color:var(--text); font-size:14px; font-weight:600; } #page-purchase.purchase-optimized .cloud-purchase-section-head p { margin:3px 0 0; color:var(--muted); font-size:12px; } #page-purchase.purchase-optimized .cloud-purchase-section-price { display:none; } #page-purchase.purchase-optimized .required-badge { color:var(--muted); background:#f5f6f9; border:0; font-size:11px; } #page-purchase.purchase-optimized .cloud-package-group { padding:0; border:0; border-radius:0; background:none; } #page-purchase.purchase-optimized .cloud-package-group-label { display:none; } #page-purchase.purchase-optimized .cloud-package-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } #page-purchase.purchase-optimized .cloud-time-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } #page-purchase.purchase-optimized .cloud-package-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:124px; height:auto; padding:14px 8px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:none; transform:none; transition:border-color .15s,background .15s; } #page-purchase.purchase-optimized .cloud-package-card:hover { border-color:var(--purple); background:#f8fcfd; transform:none; box-shadow:none; } #page-purchase.purchase-optimized .cloud-package-card.active { border-color:var(--purple); background:var(--purple-soft); box-shadow:0 0 0 1px var(--purple); } #page-purchase.purchase-optimized .cloud-package-card::before, #page-purchase.purchase-optimized .cloud-package-card::after, #page-purchase.purchase-optimized .source-plan-check { display:none; } #page-purchase.purchase-optimized .cloud-package-card strong { color:var(--text); font-size:15px; font-weight:500; line-height:1.4; } #page-purchase.purchase-optimized .cloud-package-card b { color:var(--purple); font-size:21px; font-weight:700; line-height:1.3; } #page-purchase.purchase-optimized .cloud-package-card.active b { color:var(--purple); } #page-purchase.purchase-optimized .cloud-package-card small { color:var(--muted); font-size:11px; line-height:1.5; white-space:normal; text-align:center; } #page-purchase.purchase-optimized .cloud-package-card em { display:inline-flex; gap:4px; align-items:center; min-height:20px; padding:2px 7px; color:var(--muted); background:#f2f4f7; border-radius:5px; font-size:10px; font-style:normal; } #page-purchase.purchase-optimized .cloud-package-card em svg { width:11px; height:11px; } #page-purchase.purchase-optimized .cloud-package-card em[data-tone=hot] { color:#bd7a2c; background:var(--orange-soft); } #page-purchase.purchase-optimized .cloud-time-grid .cloud-package-card { min-height:115px; } #page-purchase.purchase-optimized .cloud-time-grid .metered b { font-size:16px; } #page-purchase.purchase-optimized .cloud-package-more { display:flex; align-items:center; justify-content:flex-end; gap:4px; width:100%; padding:10px 0; min-height:32px; color:var(--purple); font-size:12px; } #page-purchase.purchase-optimized .cloud-package-more svg { width:13px; height:13px; } #page-purchase.purchase-optimized .cloud-custom-quantity { display:flex; justify-content:space-between; align-items:center; min-height:48px; margin-top:0; padding-top:12px; border-top:1px solid var(--line); } #page-purchase.purchase-optimized .cloud-custom-stepper { display:grid; grid-template-columns:32px 64px 32px; gap:4px; border:0; padding:0; background:none; } #page-purchase.purchase-optimized .cloud-custom-stepper button, #page-purchase.purchase-optimized .cloud-custom-stepper input { height:32px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text); font-size:12px; } #page-purchase.purchase-optimized .cloud-region-grid { display:grid; grid-template-columns:repeat(2,minmax(0,150px)); gap:10px; } #page-purchase.purchase-optimized .cloud-region-option span { min-height:40px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--surface); } #page-purchase.purchase-optimized .cloud-region-option input:checked+span { color:var(--purple); background:var(--purple-soft); border-color:var(--purple); box-shadow:none; } #page-purchase.purchase-optimized .cloud-region-option img { width:22px; height:16px; object-fit:contain; } #page-purchase.purchase-optimized .cloud-purchase-advanced-card { padding:0; overflow:visible; } #page-purchase.purchase-optimized .cloud-advanced-toggle { display:flex; align-items:center; min-height:60px; padding:14px 18px; gap:10px; border-radius:var(--radius); } #page-purchase.purchase-optimized .cloud-advanced-toggle::before, #page-purchase.purchase-optimized .cloud-advanced-toggle::after { display:none; } #page-purchase.purchase-optimized .source-advanced-icon { color:var(--purple); } #page-purchase.purchase-optimized .source-advanced-chevron { margin-left:auto; } #page-purchase.purchase-optimized .cloud-advanced-toggle svg { width:18px; height:18px; } #page-purchase.purchase-optimized .cloud-advanced-toggle>span { overflow:hidden; font-size:11px; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; } #page-purchase.purchase-optimized .cloud-advanced-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; padding:0 18px 18px; gap:12px; } #page-purchase.purchase-optimized .cloud-advanced-item { min-width:0; padding:14px; border:1px solid var(--line); border-radius:10px; background:#f8f9fc; box-shadow:none; } #page-purchase.purchase-optimized .source-field-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; } #page-purchase.purchase-optimized .source-field-head>i { display:grid; place-items:center; flex:0 0 20px; color:var(--muted); } #page-purchase.purchase-optimized .source-field-head>div { display:flex; flex-direction:column; gap:3px; min-width:0; } #page-purchase.purchase-optimized .source-field-head strong { display:block; color:var(--text); font-size:13px; font-weight:600; line-height:1.4; } #page-purchase.purchase-optimized .source-field-head small { display:block; color:var(--muted); font-size:11px; font-weight:400; line-height:1.4; overflow-wrap:anywhere; } #page-purchase.purchase-optimized .source-field-head svg { display:block; width:16px; height:16px; } #page-purchase.purchase-optimized .cloud-advanced-item>.cloud-segmented { display:flex; gap:6px; padding:0; background:none; border:0; } #page-purchase.purchase-optimized .cloud-advanced-item .cloud-segmented button { flex:1; min-width:0; height:36px; padding:0 10px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--surface); font-size:12px; } #page-purchase.purchase-optimized .cloud-advanced-item .cloud-segmented button.active { color:var(--purple); background:var(--purple-soft); border-color:var(--purple); box-shadow:none; } #page-purchase.purchase-optimized .cloud-advanced-item :is(select,input) { display:block; width:100%; min-width:0; height:36px; padding:0 10px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:7px; font:inherit; font-size:12px; } #page-purchase.purchase-optimized .cloud-advanced-item select { appearance:none; padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%237b7f8d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; } #page-purchase.purchase-optimized .source-custom-field { display:grid; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); } #page-purchase.purchase-optimized .source-custom-field label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:11px; } #page-purchase.purchase-optimized .cloud-automation-note { margin:10px 0 0; color:var(--muted); font-size:11px; line-height:1.6; } #page-purchase.purchase-optimized .cloud-advanced-toggle[aria-expanded=true] .source-advanced-chevron svg { transform:none; } body.purchase-source-view #page-purchase.purchase-optimized .cloud-advanced-toggle[aria-expanded=true] .source-advanced-chevron svg { transform:none; } @media(max-width:650px) { #page-purchase.purchase-optimized .cloud-advanced-grid { grid-template-columns:minmax(0,1fr); } } #page-purchase.purchase-optimized .cloud-advanced-grid.xp-direct-fields { gap:18px 24px; padding-top:8px; padding-bottom:18px; } #page-purchase.purchase-optimized .xp-direct-field { display:flex; flex-direction:column; gap:8px; min-width:0; } #page-purchase.purchase-optimized .xp-direct-field>label, #page-purchase.purchase-optimized .xp-direct-field>span { color:var(--text); font-size:13px; font-weight:600; line-height:1.4; } #page-purchase.purchase-optimized .xp-direct-field label small { margin-left:6px; color:var(--muted); font-size:11px; font-weight:400; } #page-purchase.purchase-optimized .xp-direct-field :is(input,select) { display:block; width:100%; min-width:0; height:38px; padding:0 12px; color:var(--text); background:var(--surface); border:1px solid #dfe2e9; border-radius:7px; font-family:inherit; font-size:12px; } #page-purchase.purchase-optimized .xp-direct-field input::placeholder { color:#989ca8; } #page-purchase.purchase-optimized .xp-direct-field select { appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%237b7f8d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; } #page-purchase.purchase-optimized .xp-fixed-value { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:38px; padding:0 12px; border:1px solid var(--line); border-radius:7px; background:#f7f8fb; font-size:12px; } #page-purchase.purchase-optimized .xp-fixed-value small { color:var(--muted); font-size:11px; } #page-purchase.purchase-optimized .xp-field-hint { margin:0; color:var(--muted); font-size:11px; line-height:1.6; overflow-wrap:anywhere; } #page-purchase.purchase-optimized .xp-dependent-field { display:flex; align-items:center; gap:10px; margin-top:2px; } #page-purchase.purchase-optimized .xp-dependent-field>label { flex:none; color:var(--muted); font-size:12px; } #page-purchase.purchase-optimized .xp-dependent-field select { flex:1; min-width:0; } #page-purchase.purchase-optimized .cloud-purchase-checkout { position:sticky; top:88px; width:auto; height:auto; min-height:0; max-height:calc(100vh - 108px); overflow:auto; scrollbar-width:thin; } #page-purchase.purchase-optimized .purchase-checkout-head { display:flex; } body:has(#page-purchase.active) #obLauncher { display:none; } #page-purchase.purchase-optimized .purchase-checkout-head { margin:0 0 18px; padding:0 0 16px; border-bottom:1px solid var(--line); } #page-purchase.purchase-optimized .purchase-checkout-head::before { display:none; } #page-purchase.purchase-optimized .purchase-checkout-head h2 { margin:4px 0 0; color:var(--text); font-size:17px; } #page-purchase.purchase-optimized .purchase-checkout-head>div>span { color:var(--muted); font-size:11px; } #page-purchase.purchase-optimized .secure-payment { color:var(--green); background:var(--green-soft); border-radius:6px; font-size:11px; padding:4px 7px; } #page-purchase.purchase-optimized .checkout-location { margin:0 0 18px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#f8f9fc; } #page-purchase.purchase-optimized .checkout-location strong { color:var(--text); font-size:13px; } #page-purchase.purchase-optimized .checkout-location button { color:var(--purple); } #page-purchase.purchase-optimized .checkout-lines { gap:14px; } #page-purchase.purchase-optimized .checkout-lines dt { color:var(--muted); font-size:12px; } #page-purchase.purchase-optimized .checkout-lines dd { color:var(--text); font-size:13px; } #page-purchase.purchase-optimized .checkout-lines small { display:block; margin:3px 0 0; color:var(--muted); font-size:11px; } #page-purchase.purchase-optimized .checkout-gift dt, #page-purchase.purchase-optimized .checkout-gift dd { color:var(--green); } #page-purchase.purchase-optimized .checkout-total { padding:16px; margin:18px 0; border:0; border-radius:10px; background:var(--purple-soft); } #page-purchase.purchase-optimized .checkout-total strong { color:var(--purple); font-size:28px; white-space:nowrap; } #page-purchase.purchase-optimized .checkout-total small { color:var(--muted); font-size:10px; } #page-purchase.purchase-optimized .purchase-submit-button, #page-purchase.purchase-optimized #cloudMonthlyBarSubmit { display:flex; justify-content:center; align-items:center; width:100%; height:44px; margin:12px 0 0; color:white; background:var(--purple); border:1px solid var(--purple); border-radius:9px; box-shadow:none; font-size:14px; font-weight:600; cursor:pointer; } #page-purchase.purchase-optimized .purchase-submit-button i { display:none; } #page-purchase.purchase-optimized .purchase-submit-button:hover, #page-purchase.purchase-optimized #cloudMonthlyBarSubmit:hover { background:var(--purple); } #page-purchase.purchase-optimized button:disabled { opacity:.45; cursor:not-allowed; } #page-purchase.purchase-optimized .purchase-agreement { margin:0; align-items:flex-start; color:var(--muted); font-size:11px; line-height:1.7; } #page-purchase.purchase-optimized input[type=checkbox] { accent-color:var(--purple); } #page-purchase.purchase-optimized .purchase-agreement a { color:var(--purple); } #page-purchase.purchase-optimized .checkout-support { margin:20px 0 0; padding:16px 0 0; border-top:1px solid var(--line); } #page-purchase.purchase-optimized .checkout-support button { color:var(--purple); } #page-purchase.purchase-optimized .cloud-monthly-purchase-bar { display:none!important; } #page-purchase.purchase-optimized .cloud-monthly-config { height:auto; max-height:none; overflow:visible; } #page-purchase.purchase-optimized .cloud-android-block { padding:0 0 20px; border:0; border-bottom:1px solid var(--line); background:none; border-radius:0; } #page-purchase.purchase-optimized .cloud-android-head>b { background:var(--purple-soft); color:var(--purple); border-radius:8px; } #page-purchase.purchase-optimized .cloud-android-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #page-purchase.purchase-optimized .cloud-android-option { min-height:54px; border-color:var(--line); border-radius:8px; box-shadow:none; } #page-purchase.purchase-optimized .cloud-android-option.active { background:var(--purple-soft); border-color:var(--purple); } #page-purchase.purchase-optimized .cloud-android-option.active>i { background:var(--purple); border-color:var(--purple); } #page-purchase.purchase-optimized .cloud-android-option.active>i::after { display:none; } #page-purchase.purchase-optimized .cloud-month-field { margin-top:20px; } #page-purchase.purchase-optimized .cloud-month-field>strong { color:#555864; margin-bottom:10px; font-size:12px; font-weight:600; } #page-purchase.purchase-optimized #cloudMonthlyRegions { grid-template-columns:repeat(4,minmax(0,1fr)); } #page-purchase.purchase-optimized #cloudMonthlyRegions button, #page-purchase.purchase-optimized .cloud-device-models button { min-height:36px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:white; font-size:12px; } #page-purchase.purchase-optimized #cloudMonthlyRegions button.active, #page-purchase.purchase-optimized .cloud-device-models button.active { color:var(--purple); border-color:var(--purple); background:var(--purple-soft); } #page-purchase.purchase-optimized .cloud-month-duration-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } #page-purchase.purchase-optimized .cloud-month-duration-grid .cloud-package-card { min-height:138px; } #page-purchase.purchase-optimized .cloud-month-duration-grid .cloud-package-card em { position:static; color:var(--purple); background:var(--purple-soft); border-radius:5px; } #page-purchase.purchase-optimized #cloudMonthlyRegions button>span { border:0; background:transparent; color:inherit; font-size:12px; } #page-purchase.purchase-optimized .source-duration-pricing { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:4px; } #page-purchase.purchase-optimized .source-duration-pricing small { text-decoration:line-through; } #page-purchase.purchase-optimized .cloud-renew-row { padding:16px 0; margin:0; border:0; background:none; } #page-purchase.purchase-optimized .cloud-switch input:checked+span { background:var(--purple); } #page-purchase.purchase-optimized .source-month-order { padding:0; border:0; background:none; box-shadow:none; } #page-purchase.purchase-optimized .cloud-order-detail-title { display:none; } #page-purchase.purchase-optimized .cloud-month-checkout-details { display:flex; flex-direction:column; gap:12px; margin:0 0 18px; } #page-purchase.purchase-optimized .cloud-month-checkout-details>div { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; } #page-purchase.purchase-optimized .cloud-month-checkout-details strong { color:var(--text); font-weight:500; } #page-purchase.purchase-optimized .xp-month-total { padding-top:16px; border-top:1px solid var(--line); align-items:center; } #page-purchase.purchase-optimized .xp-month-total strong { color:var(--purple); font-size:26px; font-weight:700; } #page-purchase.purchase-optimized :is(#cloudCheckoutEnvPrice,#cloudCheckoutTimePrice,#cloudCheckoutUnitPrice,#cloudMonthlyBarTotal) { color:var(--purple); } #page-purchase.purchase-optimized .cloud-checkout-saved strong { color:var(--green); } #page-purchase.purchase-optimized .cloud-balance-card { display:flex; justify-content:space-between; align-items:center; margin-top:16px; } #page-purchase.purchase-optimized .cloud-balance-card>div { flex:1; min-width:0; gap:4px; } #page-purchase.purchase-optimized .cloud-balance-card button { flex:none; width:auto; margin:0; padding:6px 12px!important; border-color:var(--line)!important; } #page-purchase.purchase-optimized .cloud-balance-card .source-wallet, #page-purchase.purchase-optimized .cloud-balance-card div>span { display:none; } .xp-month-quantity { display:flex; align-items:center; justify-content:space-between; padding:18px 0; margin-top:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .xp-month-quantity>div { display:flex; flex-direction:column; gap:4px; } .xp-month-quantity small { color:var(--muted); font-size:11px; } .xp-month-quantity .cloud-checkout-quantity { display:flex; align-items:center; gap:12px; } .xp-month-quantity button { width:30px; height:30px; border:1px solid var(--line); border-radius:7px; background:white; } .xp-payment-note { margin:9px 0 0; color:var(--muted); text-align:center; font-size:11px; } #page-purchase.is-monthly .cloud-purchase-checkout>.xp-payment-note { display:none; } .xp-metered-note { padding:10px 12px; margin-top:16px; color:var(--muted); background:#f7f8fb; border-radius:8px; font-size:11px; line-height:1.7; } .xp-billing-details { padding-top:14px; border-top:1px solid var(--line); font-size:12px; } .xp-billing-title { display:flex; align-items:baseline; gap:10px; color:var(--text); } .xp-billing-title strong { font-size:12px; } .xp-billing-title span { font-size:11px; color:var(--muted); } #page-purchase.purchase-optimized .cloud-time-instructions { min-height:0; margin:12px 0 0; padding:12px; background:#f7f8fb; border:0; color:var(--muted); font-size:12px; } #page-purchase.purchase-optimized .cloud-time-instructions>svg { display:none; } .xp-field-error,.xp-balance-warning { color:#c74c53; font-size:12px; } .xp-balance-warning { padding:10px 12px; background:var(--coral-soft); border-radius:8px; } #page-purchase.purchase-optimized :is(button,input,select):focus-visible { outline:2px solid var(--purple); outline-offset:3px; } .xp-dialog { width:min(440px,calc(100% - 32px)); padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); font-family:inherit; box-shadow:var(--shadow); } .xp-dialog::backdrop { background:rgba(17,18,22,.4); } .xp-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; } .xp-dialog-head h2 { margin:0; font-size:18px; } .xp-dialog-head button { width:30px; height:30px; border:0; border-radius:8px; color:var(--muted); background:var(--bg); cursor:pointer; font-size:22px; } .xp-dialog-intro,.xp-dialog-note { color:var(--muted); font-size:12px; line-height:1.8; } .xp-review-rows { display:grid; gap:12px; margin:20px 0; font-size:13px; } .xp-review-rows>div { display:flex; justify-content:space-between; gap:20px; } .xp-review-rows dt { color:var(--muted); }.xp-review-rows dd { margin:0; text-align:right; } .xp-review-total { display:flex; justify-content:space-between; align-items:center; padding:16px; border-radius:10px; background:var(--purple-soft); font-size:13px; } .xp-review-total strong { color:var(--purple); font-size:24px; } .xp-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; } .xp-dialog-actions button,.xp-recharge-options button { min-height:38px; padding:0 16px; border:1px solid var(--line); border-radius:8px; background:white; font:inherit; font-size:13px; cursor:pointer; } .xp-dialog-actions .xp-primary { color:white; background:var(--purple); border-color:var(--purple); } .xp-recharge-label { display:flex; flex-direction:column; gap:8px; font-size:13px; } .xp-recharge-label input { width:100%; height:42px; border:1px solid var(--line); padding:0 12px; border-radius:8px; } .xp-recharge-options { display:flex; gap:10px; margin-top:12px; } .xp-success { padding:22px 0; text-align:center; }.xp-success strong { color:var(--purple); font-size:20px; }.xp-success small { color:var(--muted); } @media(min-width:1600px) { #page-purchase.purchase-optimized .purchase-page-form { grid-template-columns:minmax(0,1fr) 360px; gap:var(--purchase-container-gap); } #page-purchase.purchase-optimized .cloud-time-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } } @media(max-width:1150px) { #page-purchase.purchase-optimized { padding:22px 20px; } #page-purchase.purchase-optimized .purchase-page-form { grid-template-columns:minmax(0,1fr) 290px; gap:16px; } #page-purchase.purchase-optimized .cloud-package-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #page-purchase.purchase-optimized #cloudMonthlyRegions { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:900px) { #page-purchase.purchase-optimized .purchase-page-form { grid-template-columns:minmax(0,1fr); } #page-purchase.purchase-optimized .cloud-purchase-checkout { position:static; max-height:none; overflow:visible; } } @media(max-width:520px) { #page-purchase.purchase-optimized { padding:20px 14px; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs { width:100%; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs button { min-width:0; flex:1; padding:8px 10px; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs small { font-size:10px; } #page-purchase.purchase-optimized .cloud-purchase-section,#page-purchase.purchase-optimized .cloud-monthly-config,#page-purchase.purchase-optimized .cloud-purchase-checkout { padding:16px; } #page-purchase.purchase-optimized #cloudMonthlyRegions { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Compact workspace: a single container with connected configuration rows. */ .xp-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-width:0; height:40px; padding:0 12px; border:1px solid #dfe2e9; border-radius:8px; color:var(--text); background:var(--surface); font-family:inherit; font-size:12px; font-weight:400; text-align:left; cursor:pointer; } .xp-select-trigger>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .xp-select-trigger>svg { flex:none; width:16px; height:16px; color:var(--muted); transition:transform .15s; } .xp-select-trigger:hover { border-color:#9ddbea; } .xp-select-trigger[aria-expanded=true] { border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-soft); } .xp-select-trigger[aria-expanded=true]>svg { transform:none; } .xp-dependent-field .xp-select-trigger { flex:1; min-width:0; } .xp-select-menu { position:fixed; z-index:5000; box-sizing:border-box; padding:6px; overflow-y:auto; overscroll-behavior:contain; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgba(27,24,54,.12); font-family:inherit; scrollbar-width:thin; } .xp-select-menu[hidden] { display:none; } .xp-select-option { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:38px; padding:8px 10px; border-radius:6px; color:var(--text); font-size:12px; line-height:1.5; cursor:pointer; } .xp-select-option>span { overflow-wrap:anywhere; } .xp-select-option small { flex:none; font-size:11px; font-weight:500; } .xp-select-option[aria-selected=true] { color:var(--purple); background:var(--purple-soft); font-weight:600; } .xp-select-option.is-highlighted { background:#f0f8fb; box-shadow:inset 0 0 0 1px #b8e6f1; } .xp-select-option[aria-disabled=true] { opacity:.45; cursor:not-allowed; } #page-purchase.purchase-optimized { padding:24px 24px 24px; } #page-purchase.purchase-optimized .cloud-purchase-header { margin-bottom:8px; } #page-purchase.purchase-optimized h1 { font-size:26px; letter-spacing:-.8px; line-height:1.3; margin-bottom:0; } #page-purchase.purchase-optimized .purchase-page-form { grid-template-columns:minmax(0,1fr) 330px; gap:var(--purchase-container-gap); } #page-purchase.purchase-optimized .xp-config-workspace { display:block; padding:0; border:0; border-radius:0; background:transparent; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs { width:100%; height:52px; margin:0; padding:0; gap:5px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs button { position:relative; min-width:0; height:52px; padding:0 11px; flex:none; align-items:center; color:#7e818e; background:none; border:0; border-bottom:2px solid transparent; border-radius:0; box-shadow:none; font-size:14px; font-weight:400; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs strong { font-size:14px; font-weight:inherit; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs button.active { color:var(--purple); background:none; border-bottom-color:var(--purple); box-shadow:none; font-weight:700; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs button.active::after { display:none; } #page-purchase.purchase-optimized .cloud-purchase-mode-tabs small { display:none; } #page-purchase.purchase-optimized .cloud-purchase-panel { display:block; } #page-purchase.purchase-optimized .cloud-purchase-section { padding:12px 0; border:0; border-radius:0; box-shadow:none; } #page-purchase.purchase-optimized .cloud-purchase-section-head { gap:8px; margin-bottom:10px; min-height:28px; } #page-purchase.purchase-optimized .cloud-purchase-section-head>b, #page-purchase.purchase-optimized .required-badge { display:none; } #page-purchase.purchase-optimized .cloud-purchase-section-head h2 { font-size:14px; font-weight:700; line-height:20px; letter-spacing:-.2px; } #page-purchase.purchase-optimized .cloud-purchase-section-head>div { display:flex; min-width:0; flex-direction:row; align-items:center; gap:4px; } #page-purchase.purchase-optimized .cloud-section-help { position:relative; display:flex; flex:none; align-items:center; height:20px; } #page-purchase.purchase-optimized .cloud-section-help>button { display:grid; place-items:center; width:16px; height:16px; padding:0; color:#b5bbc5; background:transparent; border:0; border-radius:50%; line-height:0; cursor:default; } #page-purchase.purchase-optimized .cloud-section-help>button:hover, #page-purchase.purchase-optimized .cloud-section-help>button:focus-visible { color:var(--purple); background:transparent; outline:0; } #page-purchase.purchase-optimized .cloud-section-help svg { display:block; width:13px; height:13px; fill:currentColor; stroke:none; } #page-purchase.purchase-optimized :is(.cloud-purchase-section-head,.cloud-renew-row) .cloud-section-help>p { position:absolute; z-index:20; top:50%; left:calc(100% + 8px); display:flex; align-items:center; justify-content:flex-start; width:max-content; max-width:280px; min-height:32px; box-sizing:border-box; margin:0; padding:6px 10px; color:#fff; background:#263241; border-radius:6px; box-shadow:0 6px 18px rgba(20,31,45,.16); font-size:12px; font-weight:400; line-height:1.5; text-align:left; opacity:0; visibility:hidden; transform:translate(-3px,-50%); transition:opacity .15s ease,transform .15s ease,visibility .15s; pointer-events:none; } #page-purchase.purchase-optimized .cloud-section-help>button:hover+p, #page-purchase.purchase-optimized .cloud-section-help>button:focus-visible+p { opacity:1; visibility:visible; transform:translate(0,-50%); } #page-purchase.purchase-optimized #cloudTimedRegionSection { display:block; } #page-purchase.purchase-optimized #cloudTimedRegionSection .cloud-purchase-section-head { margin:0 0 10px; } #page-purchase.purchase-optimized #cloudTimedRegionSection .cloud-region-grid { grid-template-columns:repeat(2,104px); } #page-purchase.purchase-optimized .cloud-region-option span { min-height:40px; font-size:12px; font-weight:600; } #page-purchase.purchase-optimized .cloud-region-option img { box-sizing:border-box; width:24px; height:17px; padding:1px; border:0; border-radius:3px; background:#eef2f4; box-shadow:none; } #page-purchase.purchase-optimized .cloud-package-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } #page-purchase.purchase-optimized .cloud-package-card { align-items:flex-start; min-height:124px; padding:16px; gap:6px; border-radius:8px; text-align:left; border-color:#e2e6ec; } /* Keep card geometry stable when the full plan list is expanded. */ #page-purchase.purchase-optimized #cloudEnvironmentPackages { grid-template-columns:repeat(5,minmax(0,1fr)); } #page-purchase.purchase-optimized #cloudEnvironmentPackages .cloud-package-card { min-height:100px; padding:10px 12px; gap:4px; } #page-purchase.purchase-optimized .cloud-package-card strong { font-size:14px; font-weight:600; } #page-purchase.purchase-optimized .cloud-package-card b { font-size:24px; font-variant-numeric:tabular-nums; } #page-purchase.purchase-optimized .cloud-package-card em { min-height:16px; padding:1px 5px; font-size:11px; } #page-purchase.purchase-optimized #cloudEnvironmentPackages em { display:none; } #page-purchase.purchase-optimized #cloudEnvironmentPackages em[data-tone=hot] { display:block; position:absolute; top:10px; right:10px; left:auto; transform:none; } #page-purchase.purchase-optimized #cloudEnvironmentPackages em svg { display:none; } #page-purchase.purchase-optimized .cloud-package-card small { font-size:12px; color:#737987; text-align:left; } #page-purchase.purchase-optimized .cloud-package-card.active { box-shadow:none; background:#f5fcfe; border-color:var(--purple); } #page-purchase.purchase-optimized .cloud-package-card.active .source-plan-check { display:block; position:absolute; top:auto; right:-1px; bottom:-1px; left:auto; width:25px; height:25px; border-radius:0 0 8px 0; background:var(--purple); color:#fff; clip-path:polygon(100% 0,100% 100%,0 100%); line-height:0; pointer-events:none; } #page-purchase.purchase-optimized .source-plan-check svg { position:absolute; inset:66.6667% auto auto 66.6667%; transform:translate(-50%,-50%); width:14px; height:14px; } #page-purchase.purchase-optimized .cloud-time-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } #page-purchase.purchase-optimized .cloud-time-grid .cloud-package-card { min-height:112px; padding:14px 12px; } #page-purchase.purchase-optimized .cloud-time-grid .cloud-package-card strong { font-size:14px; } #page-purchase.purchase-optimized .cloud-time-grid .cloud-package-card b { font-size:22px; } #page-purchase.purchase-optimized .cloud-time-grid .metered b { font-size:18px; } #page-purchase.purchase-optimized .cloud-time-grid .metered small { display:block; max-width:100%; white-space:normal; line-height:1.35; } #page-purchase.purchase-optimized .cloud-package-more { width:auto; min-height:32px; padding:8px 0 0; margin-left:auto; font-size:12px; font-weight:600; } #page-purchase.purchase-optimized .cloud-custom-quantity { min-height:0; padding:0; margin:0 0 0 auto; border:0; gap:10px; color:var(--muted); font-size:12px; } #page-purchase.purchase-optimized .cloud-purchase-section-head>.cloud-custom-quantity { flex:0 0 auto; flex-direction:row; align-items:center; } #page-purchase.purchase-optimized .cloud-custom-stepper { grid-template-columns:32px 52px 32px; } #page-purchase.purchase-optimized .cloud-custom-stepper button, #page-purchase.purchase-optimized .cloud-custom-stepper input { height:32px; } #page-purchase.purchase-optimized .xp-billing-details { margin-top:8px; padding-top:8px; border:0; } #page-purchase.purchase-optimized .xp-billing-title { margin-bottom:6px; } #page-purchase.purchase-optimized .cloud-purchase-advanced-card { margin:0; border:0; border-radius:0; box-shadow:none; } #page-purchase.purchase-optimized .cloud-advanced-toggle { min-height:48px; padding:10px 0; } #page-purchase.purchase-optimized .cloud-advanced-grid { padding:4px 0 14px; } #page-purchase.purchase-optimized .cloud-purchase-checkout { padding:20px; border-radius:12px; max-height:none; overflow:visible; } #page-purchase.purchase-optimized .purchase-checkout-head { padding-bottom:16px; margin-bottom:16px; } #page-purchase.purchase-optimized .purchase-checkout-head>div>span { display:none; } #page-purchase.purchase-optimized .purchase-checkout-head h2 { margin:0; font-size:14px; font-weight:700; letter-spacing:-.2px; } #page-purchase.purchase-optimized .checkout-location { min-height:64px; padding:12px; margin-bottom:16px; background:#f8fafb; border-color:var(--line); } #page-purchase.purchase-optimized .checkout-lines { gap:12px; } #page-purchase.purchase-optimized .checkout-lines :is(dt,dd) { font-size:12px; } #page-purchase.purchase-optimized .xp-metered-note { margin:16px 0 0; padding:12px 12px 12px 26px; border:0; border-radius:8px; background:#f6f8fa; list-style:disc; font-size:12px; color:#626978; } #page-purchase.purchase-optimized .xp-metered-note li+li { margin-top:6px; } #page-purchase.purchase-optimized .checkout-total { padding:18px 0 0; margin:18px 0; background:none; border:0; border-top:1px solid var(--line); border-radius:0; gap:12px; } #page-purchase.purchase-optimized .checkout-total strong { font-size:28px; } #page-purchase.purchase-optimized .checkout-total>span { font-size:14px; } #page-purchase.purchase-optimized .checkout-total>div>small { display:none; } #page-purchase.purchase-optimized .checkout-support { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; padding-top:16px; } #page-purchase.purchase-optimized .checkout-support p { flex:1; width:auto; min-width:0; margin:0; } #page-purchase.purchase-optimized .checkout-support button { flex:none; width:auto; } #page-purchase.purchase-optimized .checkout-support>span, #page-purchase.purchase-optimized .checkout-support small { display:none; } #page-purchase.purchase-optimized .checkout-support :is(strong,button) { font-size:12px; font-weight:600; } #page-purchase.purchase-optimized .purchase-agreement { font-size:12px; line-height:1.8; align-items:flex-start; margin-bottom:16px; } #page-purchase.purchase-optimized .purchase-agreement input { flex:none; margin-top:4px; } #page-purchase.purchase-optimized .purchase-agreement input[type=checkbox] { appearance:none; -webkit-appearance:none; display:inline-grid; place-content:center; width:14px; height:14px; padding:0; border:1px solid #a5abb5; border-radius:3px; background:var(--surface); cursor:pointer; } #page-purchase.purchase-optimized .purchase-agreement input[type=checkbox]:checked { background:var(--purple); border-color:var(--purple); } #page-purchase.purchase-optimized .purchase-agreement input[type=checkbox]:checked::before { content:""; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg); } #page-purchase.purchase-optimized .purchase-submit-button { height:44px; border-radius:8px; font-size:14px; font-weight:600; box-shadow:none; } #page-purchase.purchase-optimized .xp-billing-title strong, #page-purchase.purchase-optimized .cloud-advanced-toggle>strong { color:var(--text); font-size:14px; font-weight:700; line-height:20px; letter-spacing:-.2px; } #page-purchase.purchase-optimized .cloud-time-instructions { margin-top:8px; padding:12px 14px; color:#626978; background:#f6f8fa; font-size:12px; line-height:1.8; } #page-purchase.purchase-optimized .cloud-time-instructions strong { display:none; } #page-purchase.purchase-optimized .cloud-time-instructions ol { margin:0; padding-left:18px; } #page-purchase.purchase-optimized .cloud-time-instructions li { font-size:12px; line-height:1.8; } #page-purchase.purchase-optimized .cloud-advanced-toggle>span, #page-purchase.purchase-optimized .cloud-advanced-toggle>.source-advanced-icon { display:none; } #page-purchase.purchase-optimized .cloud-advanced-toggle[aria-expanded=false]>span { display:block; } #page-purchase.purchase-optimized .xp-direct-field>label { font-size:12px; font-weight:600; color:#555864; } #page-purchase.purchase-optimized .cloud-advanced-grid.xp-direct-fields { gap:14px 24px; padding-top:0; } #page-purchase.purchase-optimized .xp-direct-field { gap:6px; } #page-purchase.purchase-optimized .xp-direct-field :is(input,select) { height:40px; font-size:12px; border-radius:8px; } #page-purchase.purchase-optimized .xp-field-hint { font-size:12px; } #page-purchase.purchase-optimized .xp-payment-note { display:none; } #page-purchase.purchase-optimized .cloud-monthly-config { padding:0; border:0; border-radius:0; box-shadow:none; } #page-purchase.purchase-optimized .cloud-android-block { padding:14px 0; } #page-purchase.purchase-optimized .cloud-android-head { margin-bottom:10px; } #page-purchase.purchase-optimized .cloud-android-head>b, #page-purchase.purchase-optimized .cloud-android-head small { display:none; } #page-purchase.purchase-optimized .cloud-android-head strong { color:var(--text); font-size:14px; font-weight:700; } #page-purchase.purchase-optimized .cloud-android-options { grid-template-columns:repeat(6,minmax(0,112px)); gap:8px; } #page-purchase.purchase-optimized .cloud-android-option { min-height:46px; padding:8px; gap:6px; } #page-purchase.purchase-optimized .cloud-android-option strong { font-size:12px; } #page-purchase.purchase-optimized .cloud-android-option small { display:none; } #page-purchase.purchase-optimized .cloud-month-field { padding:12px 0; margin:0; border-bottom:0; } #page-purchase.purchase-optimized .cloud-month-field>strong { color:var(--text); font-size:14px; font-weight:700; margin-bottom:10px; } #page-purchase.purchase-optimized .xp-model-row { display:flex; align-items:center; gap:24px; } #page-purchase.purchase-optimized .xp-model-row>strong { margin:0; } #page-purchase.purchase-optimized .xp-device-setup { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:12px 0; border-bottom:0; } #page-purchase.purchase-optimized .xp-device-setup .cloud-android-block { padding:0; border:0; } #page-purchase.purchase-optimized .xp-device-setup .xp-model-row { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:0; border:0; } #page-purchase.purchase-optimized .xp-device-setup .cloud-android-option { min-height:40px; padding:8px 10px; justify-content:center; } #page-purchase.purchase-optimized .xp-device-setup .cloud-android-option>i { display:none; } #page-purchase.purchase-optimized .cloud-android-option.active strong { color:var(--purple); } #page-purchase.purchase-optimized .cloud-device-models button { height:40px; min-width:64px; font-weight:600; } #page-purchase.purchase-optimized #cloudMonthlyRegions { grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; } #page-purchase.purchase-optimized #cloudMonthlyRegions button { height:40px; min-height:40px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 8px; font-weight:600; } #page-purchase.purchase-optimized #cloudMonthlyRegions button>span.cloud-region-flag { display:inline-grid; place-items:center; box-sizing:border-box; flex:none; width:24px; height:17px; padding:1px; overflow:hidden; border:0; border-radius:3px; background:#eef2f4; box-shadow:none; } #page-purchase.purchase-optimized #cloudMonthlyRegions .cloud-region-flag svg { display:block; width:100%; height:100%; overflow:hidden; border-radius:2px; } #page-purchase.purchase-optimized #cloudMonthlyRegions button>span { min-height:0; padding:0; } #page-purchase.purchase-optimized #cloudMonthlyRegions button>small { margin:0; font-size:10px; line-height:1.2; } #page-purchase.purchase-optimized #cloudMonthlyRegions button:disabled { background:#f6f8fa; color:#9aa1ac; cursor:not-allowed; } #page-purchase.purchase-optimized .cloud-duration-field { border-top:0; } #page-purchase.purchase-optimized .cloud-month-duration-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } #page-purchase.purchase-optimized .cloud-month-duration-grid .cloud-package-card { min-height:124px; padding:14px 12px; gap:6px; justify-content:center; } #page-purchase.purchase-optimized .cloud-month-duration-grid .cloud-package-card>strong { font-size:14px; font-weight:600; line-height:20px; } #page-purchase.purchase-optimized .cloud-month-duration-grid .cloud-package-card em { position:absolute; top:8px; right:8px; left:auto; transform:none; min-height:16px; padding:1px 5px; font-size:10px; line-height:16px; color:#af7835; background:#fff7eb; border-radius:5px; } #page-purchase.purchase-optimized .source-duration-pricing { flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:flex-start; gap:2px 6px; } #page-purchase.purchase-optimized .source-duration-pricing b { font-size:22px; line-height:28px; } #page-purchase.purchase-optimized .source-duration-pricing small { font-size:11px; color:#989eaa; } #page-purchase.purchase-optimized .xp-month-options { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:0; } #page-purchase.purchase-optimized .xp-month-quantity { padding:0; margin:0; border:0; gap:20px; } #page-purchase.purchase-optimized .xp-month-quantity small { display:none; } #page-purchase.purchase-optimized .cloud-renew-row { padding:0; gap:8px; } #page-purchase.purchase-optimized .cloud-renew-copy small { display:none; } #page-purchase.purchase-optimized .xp-month-quantity strong { font-size:14px; font-weight:700; color:var(--text); } #page-purchase.purchase-optimized .xp-month-quantity .cloud-checkout-quantity { gap:6px; } #page-purchase.purchase-optimized .xp-month-quantity button { width:32px; height:32px; font-size:16px; color:var(--text); } #page-purchase.purchase-optimized .xp-month-quantity button:disabled { color:#b5bac2; opacity:.5; } #page-purchase.purchase-optimized .xp-month-quantity output { display:grid; place-items:center; width:48px; height:32px; border:1px solid var(--line); border-radius:7px; font-size:12px; font-weight:600; } #page-purchase.purchase-optimized .cloud-renew-copy strong { font-size:12px; color:var(--text); font-weight:600; } #page-purchase.purchase-optimized #cloudMonthlyAdvanced .cloud-advanced-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } #page-purchase.purchase-optimized #cloudMonthlyAdvanced .cloud-advanced-item { padding:0; border:0; border-radius:0; background:none; gap:8px; } #page-purchase.purchase-optimized #cloudMonthlyAdvanced .cloud-advanced-item>span { font-size:12px; font-weight:600; color:#555864; } #page-purchase.purchase-optimized #cloudMonthlyAdvanced .cloud-segmented { max-width:280px; } #page-purchase.purchase-optimized #cloudMonthlyAdvanced .cloud-segmented button { min-height:36px; font-size:12px; } #page-purchase.purchase-optimized .xp-month-custom-field { max-width:280px; margin-top:10px; } #page-purchase.purchase-optimized .xp-month-custom-field[hidden] { display:none; } #page-purchase.purchase-optimized .xp-month-custom-field label { display:block; margin-bottom:6px; color:#555864; font-size:12px; font-weight:600; } #page-purchase.purchase-optimized .xp-month-custom-field input { width:100%; height:36px; box-sizing:border-box; padding:0 10px; color:var(--text); background:#fff; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:12px; outline:0; } #page-purchase.purchase-optimized .xp-month-custom-field input:hover { border-color:#c9d1da; } #page-purchase.purchase-optimized .xp-month-custom-field input:focus { border-color:var(--purple); box-shadow:0 0 0 2px rgba(13,174,203,.10); } #page-purchase.purchase-optimized .xp-month-custom-field small { display:block; margin-top:5px; color:#989eaa; font-size:11px; line-height:1.4; } #page-purchase.purchase-optimized .cloud-month-checkout-details { gap:10px; margin-bottom:12px; } #page-purchase.purchase-optimized .cloud-balance-card { margin-top:12px; } @media(min-width:1600px) { #page-purchase.purchase-optimized .purchase-page-form { grid-template-columns:minmax(0,1fr) 360px; } } @media(min-width:901px) and (max-width:1350px) { #page-purchase.purchase-optimized #cloudEnvironmentPackages { grid-template-columns:repeat(4,minmax(0,1fr)); } #page-purchase.purchase-optimized .cloud-time-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:1100px) { #page-purchase.purchase-optimized .purchase-page-form { grid-template-columns:minmax(0,1fr) 280px; } #page-purchase.purchase-optimized #cloudEnvironmentPackages { grid-template-columns:repeat(4,minmax(0,1fr)); } #page-purchase.purchase-optimized .cloud-time-grid,#page-purchase.purchase-optimized .cloud-month-duration-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } #page-purchase.purchase-optimized .cloud-android-options { grid-template-columns:repeat(2,minmax(0,1fr)); } #page-purchase.purchase-optimized #cloudMonthlyRegions { grid-template-columns:repeat(4,minmax(0,1fr)); } } @media(max-width:900px) { #page-purchase.purchase-optimized .purchase-page-form { grid-template-columns:minmax(0,1fr); } #page-purchase.purchase-optimized #cloudEnvironmentPackages { grid-template-columns:repeat(4,minmax(0,1fr)); } } @media(max-width:680px) { #page-purchase.purchase-optimized #cloudEnvironmentPackages { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:520px) { #page-purchase.purchase-optimized { padding:16px 12px; } #page-purchase.purchase-optimized .xp-config-workspace { padding:0; } #page-purchase.purchase-optimized .cloud-package-grid,#page-purchase.purchase-optimized #cloudEnvironmentPackages { grid-template-columns:repeat(2,minmax(0,1fr)); } #page-purchase.purchase-optimized .xp-month-options { flex-wrap:wrap; } #page-purchase.purchase-optimized #cloudMonthlyRegions { grid-template-columns:repeat(3,minmax(0,1fr)); } #page-purchase.purchase-optimized .xp-billing-title { align-items:flex-start; flex-direction:column; gap:3px; } } @media(max-width:650px) { #page-purchase.purchase-optimized .xp-device-setup .xp-model-row { flex-direction:column; align-items:flex-start; gap:10px; } } /* Shared purchase selection contract: one border, tint, check, and hover state. */ #page-purchase.purchase-optimized { --purchase-selected-bg:#f2fbfd; --purchase-selected-border:var(--purple); } #page-purchase.purchase-optimized .xp-choice { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:8px; box-shadow:none; transition:background-color .15s,border-color .15s; } #page-purchase.purchase-optimized .xp-choice:not(.is-selected):not(:disabled):hover { background:#f8fafb; border-color:#b7c3cd; box-shadow:none; transform:none; } #page-purchase.purchase-optimized .xp-choice.is-selected { background:var(--purchase-selected-bg); border-color:var(--purchase-selected-border); box-shadow:none; } #page-purchase.purchase-optimized .cloud-region-option input:checked+.xp-choice, #page-purchase.purchase-optimized #cloudMonthlyRegions button.xp-choice.is-selected, #page-purchase.purchase-optimized #cloudDeviceModels button.xp-choice.is-selected, #page-purchase.purchase-optimized #cloudMonthlyAdvanced .cloud-segmented button.xp-choice.is-selected { background:var(--purchase-selected-bg); border-color:var(--purchase-selected-border); box-shadow:none; } #page-purchase.purchase-optimized .xp-choice:not(.cloud-package-card).is-selected { color:var(--purple); } #page-purchase.purchase-optimized .xp-choice:not(.cloud-package-card).is-selected strong { color:inherit; } #page-purchase.purchase-optimized .xp-choice>.source-plan-check { display:none; } #page-purchase.purchase-optimized .xp-choice.is-selected>.source-plan-check { display:block; position:absolute; inset:auto -1px -1px auto; width:21px; height:21px; min-height:0; padding:0; margin:0; border:0; border-radius:0 0 8px 0; background:var(--purple); color:#fff; clip-path:polygon(100% 0,100% 100%,0 100%); pointer-events:none; } #page-purchase.purchase-optimized .xp-choice.is-selected>.source-plan-check svg { position:absolute; inset:66.6667% auto auto 66.6667%; transform:translate(-50%,-50%); width:12px; height:12px; fill:currentColor; } #page-purchase.purchase-optimized .cloud-package-card.is-selected>.source-plan-check { width:25px; height:25px; } #page-purchase.purchase-optimized .cloud-package-card.is-selected>.source-plan-check svg { width:14px; height:14px; } #page-purchase.purchase-optimized #cloudMonthlyRegions button.xp-choice>.source-plan-check { min-height:0; background:var(--purple); color:#fff; border:0; } #page-purchase.purchase-optimized #cloudMonthlyRegions button>span:not(.source-plan-check):not(.cloud-region-flag) { min-height:0; padding:0; border:0; border-radius:0; background:transparent; color:inherit; } #page-purchase.purchase-optimized .xp-choice:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; } #page-purchase.purchase-optimized :is(button,input):focus-visible { outline:2px solid var(--purple); outline-offset:3px; } #page-purchase.purchase-optimized .cloud-region-option:has(input:focus-visible)>span { outline:2px solid var(--purple); outline-offset:3px; } #page-purchase.purchase-optimized .cloud-android-option span { pointer-events:none; } #page-purchase.purchase-optimized #cloudEnvironmentPackages, #page-purchase.purchase-optimized .cloud-time-grid, #page-purchase.purchase-optimized .cloud-month-duration-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; } #page-purchase.purchase-optimized .xp-config-workspace { container-type:inline-size; } @container (max-width:819px) { #page-purchase.purchase-optimized #cloudEnvironmentPackages, #page-purchase.purchase-optimized .cloud-time-grid, #page-purchase.purchase-optimized .cloud-month-duration-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } @container (max-width:479px) { #page-purchase.purchase-optimized #cloudEnvironmentPackages, #page-purchase.purchase-optimized .cloud-time-grid, #page-purchase.purchase-optimized .cloud-month-duration-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } #page-purchase.purchase-optimized .cloud-package-card { justify-content:center; } #page-purchase.purchase-optimized .cloud-package-card strong { line-height:20px; } #page-purchase.purchase-optimized .cloud-package-card small { line-height:18px; } #page-purchase.purchase-optimized .cloud-package-card b { letter-spacing:-.4px; white-space:nowrap; } #page-purchase.purchase-optimized .cloud-time-grid .metered b { font-size:17px; white-space:normal; } #page-purchase.purchase-optimized .xp-specification { width:fit-content; max-width:100%; align-self:flex-start; margin:0; padding:4px 10px; color:var(--purple); background:#F2FBFD; border-radius:6px; font-size:12px; line-height:18px; } #page-purchase.purchase-optimized .cloud-renew-copy small { display:block; color:var(--muted); font-size:11px; line-height:18px; } #page-purchase.purchase-optimized .cloud-renew-row { align-items:center; } #page-purchase.purchase-optimized #cloudMonthlyAdvanced .cloud-advanced-item { display:flex; flex-direction:column; } #page-purchase.purchase-optimized #cloudMonthlyAdvanced label.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } #page-purchase.purchase-optimized #cloudMonthlyAdvanced .cloud-segmented { max-width:280px; } #page-purchase.purchase-optimized .xp-month-custom-field { max-width:none; margin-top:0; } #page-purchase.purchase-optimized .xp-month-custom-field>label { display:none; } #page-purchase.purchase-optimized .cloud-advanced-grid:has(.xp-select-trigger[aria-expanded=true]) { padding-bottom:280px; } #page-purchase.purchase-optimized .xp-preview-disclaimer { margin:8px 0 0; color:var(--muted); font-size:11px; line-height:18px; } .xp-select-option { border:1px solid transparent; } .xp-select-option[aria-selected=true] { background:#f2fbfd; border-color:var(--purple); color:var(--purple); box-shadow:none; } .xp-select-option.is-highlighted:not([aria-selected=true]) { background:#f8fafb; border-color:#b7c3cd; box-shadow:none; } .xp-dropdown-check { flex:none; width:16px; height:16px; fill:currentColor; } #page-purchase.purchase-optimized :is(.cloud-purchase-section-head,.cloud-renew-row) .cloud-section-help>p { display:none; } #page-purchase.purchase-optimized .cloud-section-help:has(button:hover)>p, #page-purchase.purchase-optimized .cloud-section-help:has(button:focus-visible)>p { display:flex; } @media(max-width:520px) { #page-purchase.purchase-optimized #cloudEnvironmentPackages, #page-purchase.purchase-optimized .cloud-time-grid, #page-purchase.purchase-optimized .cloud-month-duration-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #page-purchase.purchase-optimized #cloudMonthlyAdvanced .cloud-advanced-grid { grid-template-columns:minmax(0,1fr); } #page-purchase.purchase-optimized :is(.cloud-purchase-section-head,.cloud-renew-row) .cloud-section-help>p { left:-80px; top:calc(100% + 8px); width:240px; max-width:calc(100vw - 64px); transform:none; } } /* Match the shared page-header scale on narrow screens. */ @media(max-width:640px) { #page-purchase.purchase-optimized h1 { font-size:23px; } } @media(max-width:900px) { #page-purchase.purchase-optimized { --purchase-container-gap:16px; } }