/* Keep TikSales tokens and shared package-card presentation. */ #page-purchase.purchase-simple { --purchase-field-width:360px; --purchase-title-option-gap:10px; } #page-purchase.purchase-simple :is(#cloudEnvironmentPackages,#cloudTimePackages) { display:grid; width:100%; grid-template-columns:repeat(4,minmax(0,1fr)); } #page-purchase.purchase-simple :is(#cloudEnvironmentMore,#cloudTimeMore) { display:block; } #page-purchase.purchase-simple #cloudEnvironmentPackages .cloud-package-card { align-items:flex-start; justify-content:center; min-height:88px; padding:12px 16px; gap:10px; text-align:left; } #page-purchase.purchase-simple #cloudEnvironmentPackages .xp-environment-heading { display:flex; width:100%; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px; } #page-purchase.purchase-simple #cloudEnvironmentPackages .xp-environment-pricing { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; margin-top:0; } #page-purchase.purchase-simple #cloudEnvironmentPackages .cloud-package-card small { color:#737987; text-align:left; } #page-purchase.purchase-simple #cloudEnvironmentPackages .xp-environment-pricing b { flex:none; } #page-purchase.purchase-simple #cloudEnvironmentPackages em:not([data-tone=normal]) { display:inline-flex; align-items:center; justify-content:center; flex:none; position:static; transform:none; height:20px; box-sizing:border-box; padding:0 7px; border:0; border-radius:5px; color:#008ba6; background:#e1f7fb; font-size:11px; font-style:normal; font-weight:600; line-height:1; white-space:nowrap; } #page-purchase.purchase-simple #cloudEnvironmentPackages .xp-environment-badge-text { display:block; line-height:1; transform:translateY(1px); } #page-purchase.purchase-simple #cloudEnvironmentPackages em[data-tone=hot] { color:#fff; background:linear-gradient(135deg,#ff9a3d 0%,#f47b20 100%); } #page-purchase.purchase-simple :is(#cloudEnvironmentPackages,#cloudTimePackages) .cloud-package-card strong { color:#30323c; } #page-purchase.purchase-simple :is(#cloudMonthlyDurations,#xpRenewPlans) { display:grid; width:100%; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; } #page-purchase.purchase-simple :is(#cloudMonthlyDurations,#xpRenewPlans) .cloud-package-card { align-items:flex-start; min-height:100px; padding:10px 14px; gap:5px; text-align:left; } #page-purchase.purchase-simple :is(#cloudMonthlyDurations,#xpRenewPlans) .xp-duration-heading { display:flex; align-items:center; flex-wrap:wrap; gap:7px; } #page-purchase.purchase-simple :is(#cloudMonthlyDurations,#xpRenewPlans) .xp-duration-heading strong { color:#30323c; font-size:14px; font-weight:600; line-height:20px; } #page-purchase.purchase-simple :is(#cloudMonthlyDurations,#xpRenewPlans) .xp-duration-heading em { position:static; color:#fff; background:linear-gradient(135deg,#ff9a3d 0%,#ff6540 48%,#ee3f4d 100%); font-size:10px; font-weight:600; line-height:16px; padding:1px 6px; } #page-purchase.purchase-simple :is(#cloudEnvironmentPackages,#cloudTimePackages,#cloudMonthlyDurations,#xpRenewPlans) .cloud-package-card b { font-size:22px; font-weight:700; line-height:28px; } #page-purchase.purchase-simple :is(#cloudEnvironmentPackages,#cloudTimePackages,#cloudMonthlyDurations,#xpRenewPlans) .cloud-package-card { box-sizing:border-box; justify-content:center; padding-top:12px; padding-bottom:12px; } #page-purchase.purchase-simple :is(#cloudEnvironmentPackages,#cloudTimePackages,#cloudMonthlyDurations,#xpRenewPlans) .cloud-package-card>:not(.source-plan-check) { margin-top:0; margin-bottom:0; } @container (max-width:819px) { #page-purchase.purchase-simple :is(#cloudMonthlyDurations,#xpRenewPlans) { grid-template-columns:repeat(3,minmax(0,1fr)); } } @container (max-width:540px) { #page-purchase.purchase-simple :is(#cloudEnvironmentPackages,#cloudTimePackages) { grid-template-columns:repeat(2,minmax(0,1fr)); } #page-purchase.purchase-simple :is(#cloudMonthlyDurations,#xpRenewPlans) { grid-template-columns:repeat(2,minmax(0,1fr)); } } #page-purchase.purchase-simple .xp-package-field { width:100%; max-width:var(--purchase-field-width); } #page-purchase.purchase-simple .xp-package-field select[hidden] { display:none !important; } #page-purchase.purchase-simple .xp-package-field .xp-select-trigger { height:58px; padding:0 16px; border-radius:10px; font-size:14px; background:var(--surface); } #page-purchase.purchase-simple .xp-package-field .xp-select-trigger>span { flex:1; } #page-purchase.purchase-simple .xp-package-field .xp-select-trigger { height:auto; min-height:76px; padding-top:12px; padding-bottom:12px; } #page-purchase.purchase-simple .xp-package-field .xp-select-trigger:has(.xp-package-with-note) { height:auto; min-height:76px; padding-top:14px; padding-bottom:14px; align-items:flex-start; } #page-purchase.purchase-simple .xp-select-trigger:has(.xp-package-with-note)>svg { margin-top:2.5px; } .xp-package-value { display:flex; align-items:center; gap:12px; min-width:0; width:100%; } .xp-package-value.xp-package-with-note { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; } .xp-package-note { grid-column:1 / -1; color:var(--muted); font-size:12px; font-weight:400; line-height:1.6; white-space:normal; } .xp-package-value strong { color:#30323c; font-size:14px; font-weight:600; line-height:1.5; } .xp-package-value .xp-package-price { margin-left:auto; color:var(--purple); font-size:18px; font-weight:700; line-height:1.4; font-variant-numeric:tabular-nums; white-space:nowrap; } .xp-package-copy { display:flex; flex-direction:column; gap:3px; min-width:0; white-space:normal; } .xp-package-title-row { display:inline-flex; align-items:center; gap:7px; width:fit-content; max-width:100%; } .xp-package-copy small { color:var(--muted); font-size:12px; font-weight:400; } .xp-package-badge { display:inline-flex; align-items:center; flex:none; min-height:18px; padding:1px 6px; color:#fff; background:linear-gradient(135deg,#ff9a3d 0%,#ff6540 48%,#ee3f4d 100%); border-radius:5px; font-size:10px; font-weight:600; line-height:16px; white-space:nowrap; } .xp-package-menu .xp-select-option { min-height:62px; padding:10px 12px; gap:10px; } .xp-select-option[hidden] { display:none; } .xp-package-menu .xp-select-option.is-highlighted { box-shadow:none; background:#f4f8fa; border-color:transparent; } .xp-package-menu .xp-select-option[aria-selected=true] { background:#effafd; border-color:transparent; box-shadow:none; } .xp-package-menu .xp-select-option[aria-selected=true].is-highlighted { background:#e8f7fb; } #page-purchase.purchase-simple .xp-package-hint { margin:10px 0 0; color:var(--muted); font-size:12px; line-height:1.7; } #page-purchase.purchase-simple .xp-package-hint.xp-environment-gift { display:inline-flex; align-items:center; gap:6px; width:fit-content; min-height:20px; margin:0 0 0 4px; padding:0; color:#555864; background:none; border:0; border-radius:0; box-shadow:none; font-size:12px; font-weight:400; line-height:20px; cursor:default; } #page-purchase.purchase-simple .xp-package-hint.xp-environment-gift svg { flex:none; width:14px; height:14px; color:var(--purple); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #page-purchase.purchase-simple .xp-package-hint.xp-environment-gift strong { color:var(--purple); font-weight:600; } #page-purchase.purchase-simple .xp-environment-row .cloud-purchase-section-head>div { flex-wrap:wrap; row-gap:6px; } #page-purchase.purchase-simple .xp-environment-row .cloud-purchase-section-head .xp-environment-gift { margin:0 0 0 8px; } #page-purchase.purchase-simple .xp-package-hint[hidden] { display:none; } #page-purchase.purchase-simple .xp-environment-row .cloud-purchase-section-head { flex-wrap:wrap; gap:10px 16px; } #page-purchase.purchase-simple .xp-environment-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; } #page-purchase.purchase-simple .xp-environment-actions>.cloud-custom-quantity { flex:0 0 auto; width:auto; max-width:100%; min-height:32px; box-sizing:border-box; justify-content:flex-start; flex-wrap:nowrap; gap:12px; margin:0; padding:0; border:0; border-radius:0; background:transparent; } #page-purchase.purchase-simple .cloud-custom-quantity>span { white-space:nowrap; } @container (max-width:540px) { #page-purchase.purchase-simple .xp-environment-actions { align-items:flex-start; flex-direction:column; } } #page-purchase.purchase-simple .cloud-custom-quantity>span { color:#555864; font-size:12px; font-weight:600; line-height:20px; } #page-purchase.purchase-simple .xp-environment-row .cloud-custom-stepper :is(button,input) { background:#fff; border-color:#d7e5ea; } #page-purchase.purchase-simple .cloud-custom-quantity>small { font-size:12px; color:var(--muted); } #page-purchase.purchase-simple #cloudEnvironmentQuantity { appearance:textfield; -moz-appearance:textfield; } #cloudEnvironmentQuantity::-webkit-inner-spin-button, #cloudEnvironmentQuantity::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; } #page-purchase.purchase-simple .cloud-custom-quantity[hidden] { display:none !important; } #page-purchase.purchase-simple :is(.xp-environment-row,.xp-runtime-row) { padding:12px 0; } #page-purchase.purchase-simple .xp-environment-row { padding-top:20px; padding-bottom:0; } #page-purchase.purchase-simple .xp-runtime-row { padding-top:16px; } #page-purchase.purchase-simple #cloudEnvironmentMore { min-height:20px; margin:0 0 0 auto; padding:0; line-height:20px; } #page-purchase.purchase-simple .cloud-purchase-section-head, #page-purchase.purchase-simple #cloudTimedRegionSection .cloud-purchase-section-head { margin-bottom:var(--purchase-title-option-gap); min-height:20px; align-items:center; } #page-purchase.purchase-simple .xp-billing-details { margin-top:var(--purchase-title-option-gap); padding-top:0; } #page-purchase.purchase-simple .xp-billing-details .cloud-time-instructions { margin-top:0; width:100%; max-width:none; box-sizing:border-box; } #page-purchase.purchase-simple .cloud-purchase-checkout { position:sticky; top:16px; } #page-purchase.purchase-simple .cloud-purchase-checkout .checkout-location:not(.cloud-balance-card) { background:#f1fbfd; border-color:#d7eef3; } #page-purchase.purchase-simple #cloudTimedRegionSection .cloud-region-option img, #page-purchase.purchase-simple #cloudTimedCheckout .checkout-location>img { width:20px; height:14px; } #page-purchase.purchase-simple .checkout-lines dd { font-size:12px; font-weight:500; line-height:22px; font-variant-numeric:tabular-nums; } #page-purchase.purchase-simple #cloudTimedCheckout .checkout-lines dt, #page-purchase.purchase-simple #cloudTimedCheckout .checkout-lines dt small, #page-purchase.purchase-simple #cloudTimedCheckout .checkout-lines .checkout-gift dt { color:var(--muted); } #page-purchase.purchase-simple #cloudTimedCheckout .checkout-lines dd, #page-purchase.purchase-simple #cloudTimedCheckout .checkout-lines .checkout-gift dd, #page-purchase.purchase-simple #cloudTimedCheckout .checkout-location strong { color:var(--text); } #page-purchase.purchase-simple .cloud-duration-field { display:flex; flex-direction:column; gap:var(--purchase-title-option-gap); } #page-purchase.purchase-simple .cloud-duration-field>strong { margin-bottom:0; } #page-purchase.purchase-simple .cloud-duration-field .cloud-renew-row { justify-content:flex-start; align-items:center; width:fit-content; max-width:100%; margin:0; padding:0; gap:12px; } #page-purchase.purchase-simple .cloud-renew-row .cloud-switch { flex:none; } #page-purchase.purchase-simple :is(#cloudTimedAdvanced,#cloudMonthlyAdvanced) { margin-top:16px; padding-top:16px; border-top:1px solid #e9ebf0; } #page-purchase.purchase-simple .cloud-advanced-toggle { width:fit-content; max-width:100%; min-height:24px; padding:0; justify-content:flex-start; gap:12px; border-radius:0; background:transparent; color:var(--purple); } #page-purchase.purchase-simple .cloud-advanced-toggle>strong { flex:none; color:#30323c; font-size:14px; line-height:20px; font-weight:600; } #page-purchase.purchase-simple .cloud-advanced-toggle>.xp-advanced-preview { display:block; flex:0 1 auto; min-width:0; color:#7e8293; font-size:12px; line-height:20px; font-weight:400; white-space:normal; overflow:visible; text-overflow:clip; } #page-purchase.purchase-simple .cloud-advanced-toggle>#cloudTimedAdvancedSummary, #page-purchase.purchase-simple .cloud-advanced-toggle>#cloudMonthlyAdvancedSummary { display:none; } #page-purchase.purchase-simple .cloud-advanced-toggle .source-advanced-chevron { display:grid; place-items:center; flex:none; width:18px; height:20px; margin-left:0; border-radius:0; background:transparent; color:#30323c; } #page-purchase.purchase-simple .xp-renew-heading { display:flex; align-items:center; gap:4px; min-height:20px; } #page-purchase.purchase-simple .cloud-renew-copy small { font-size:12px; } #page-purchase.purchase-simple .cloud-advanced-grid[hidden] { display:none !important; } #page-purchase.purchase-simple :is(#cloudTimedAdvanced,#cloudMonthlyAdvanced) .cloud-advanced-grid { width:100%; max-width:640px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px; padding-top:8px; } #page-purchase.purchase-simple :is(#cloudTimedAdvanced,#cloudMonthlyAdvanced) .cloud-advanced-item { gap:var(--purchase-title-option-gap); } #page-purchase.purchase-simple #cloudTimedAdvanced .cloud-advanced-item { display:flex; flex-direction:column; padding:0; border:0; border-radius:0; background:none; } #page-purchase.purchase-simple #cloudTimedAdvanced .cloud-advanced-item>span { font-size:12px; font-weight:600; color:#555864; } #page-purchase.purchase-simple :is(#cloudTimedAdvanced,#cloudMonthlyAdvanced) .cloud-advanced-item>span { margin-bottom:0; } #page-purchase.purchase-simple :is(#cloudTimedAdvanced,#cloudMonthlyAdvanced) .cloud-segmented, #page-purchase.purchase-simple :is(#cloudTimedAdvanced,#cloudMonthlyAdvanced) .xp-month-custom-field { width:100%; max-width:none; } #page-purchase.purchase-simple #cloudMonthlyAdvanced .xp-month-proxy-item { grid-column:1; } #page-purchase.purchase-simple :is(#cloudTimedAdvanced,#cloudMonthlyAdvanced) .xp-advanced-hint { margin:0; color:var(--muted); font-size:11px; font-weight:400; line-height:18px; } #page-purchase.purchase-simple :is(#cloudTimedAdvanced,#cloudMonthlyAdvanced) .xp-advanced-hint[hidden] { display:none; } #page-purchase.purchase-simple #cloudTimedAdvanced .cloud-segmented button.xp-choice.is-selected { background:var(--purchase-selected-bg); border-color:var(--purchase-selected-border); box-shadow:none; } #page-purchase.purchase-simple .cloud-android-head, #page-purchase.purchase-simple .cloud-month-field>strong { margin-bottom:var(--purchase-title-option-gap); } #page-purchase.purchase-simple .xp-device-setup .xp-model-row, #page-purchase.purchase-simple .xp-direct-field { gap:var(--purchase-title-option-gap); } /* Flex fields use gap alone; block fields use the title margin alone. */ #page-purchase.purchase-simple .xp-device-setup .xp-model-row>strong, #page-purchase.purchase-simple .cloud-month-field.cloud-duration-field>strong { margin:0; } #page-purchase.purchase-simple .cloud-android-head strong, #page-purchase.purchase-simple .cloud-month-field>strong, #page-purchase.purchase-simple .cloud-purchase-section-head h2, #page-purchase.purchase-simple .xp-direct-field>label, #page-purchase.purchase-simple :is(#cloudTimedAdvanced,#cloudMonthlyAdvanced) .cloud-advanced-item>span { line-height:20px; } #page-purchase.purchase-simple :is(.cloud-android-option strong,.cloud-device-models button,#cloudMonthlyRegions button) { font-size:12px; font-weight:600; line-height:20px; } #page-purchase.purchase-simple .cloud-android-option:not(.is-selected) strong, #page-purchase.purchase-simple .cloud-device-models button:not(.is-selected), #page-purchase.purchase-simple #cloudMonthlyRegions button:not(.is-selected):not(:disabled) { color:#30323c; } #page-purchase.purchase-simple #cloudTimedRegionSection .cloud-region-option input:not(:checked)+span { color:#30323c; } @container (max-width:540px) { #page-purchase.purchase-simple :is(#cloudTimedAdvanced,#cloudMonthlyAdvanced) .cloud-advanced-toggle { display:grid; grid-template-columns:max-content 18px; column-gap:12px; row-gap:4px; text-align:left; } #page-purchase.purchase-simple :is(#cloudTimedAdvanced,#cloudMonthlyAdvanced) .cloud-advanced-toggle>strong { grid-column:1; grid-row:1; } #page-purchase.purchase-simple :is(#cloudTimedAdvanced,#cloudMonthlyAdvanced) .cloud-advanced-toggle>.xp-advanced-preview { grid-column:1 / -1; grid-row:2; } #page-purchase.purchase-simple :is(#cloudTimedAdvanced,#cloudMonthlyAdvanced) .cloud-advanced-toggle>.source-advanced-chevron { grid-column:2; grid-row:1; } #page-purchase.purchase-simple #cloudTimedAdvanced .cloud-advanced-grid.xp-direct-fields, #page-purchase.purchase-simple #cloudMonthlyAdvanced .cloud-advanced-grid { max-width:360px; grid-template-columns:minmax(0,1fr); gap:20px; } } /* Compact monthly order: configuration, quantity/pricing, then payment. */ #page-purchase.purchase-simple #cloudMonthlyCheckout .cloud-month-checkout-details { gap:8px; margin-bottom:14px; } #page-purchase.purchase-simple #cloudMonthlyCheckout .cloud-month-checkout-details>div { align-items:center; min-height:22px; line-height:22px; } #page-purchase.purchase-simple #cloudMonthlyCheckout .xp-checkout-device-summary { max-width:65%; text-align:right; color:var(--text); overflow-wrap:anywhere; } #page-purchase.purchase-simple #cloudMonthlyCheckout .xp-checkout-quantity-row { margin-top:6px; padding-top:14px; border-top:1px solid var(--line); } #page-purchase.purchase-simple #cloudMonthlyCheckout .cloud-checkout-quantity { display:flex; align-items:center; gap:6px; } #page-purchase.purchase-simple #cloudMonthlyCheckout .cloud-checkout-quantity button { width:28px; height:28px; padding:0; border-radius:6px; } #page-purchase.purchase-simple #cloudMonthlyCheckout .cloud-checkout-quantity output { min-width:32px; text-align:center; color:var(--text); font-weight:600; } #page-purchase.purchase-simple #cloudMonthlyCheckout .cloud-checkout-saved { color:var(--muted); } #page-purchase.purchase-simple #cloudMonthlyCheckout .xp-month-total { margin-top:6px; padding-top:14px; } #page-purchase.purchase-simple #cloudMonthlyCheckout .xp-month-total>span { color:var(--text); font-weight:600; } #page-purchase.purchase-simple #cloudMonthlyCheckout #cloudCheckoutMonthlyTotal { color:var(--purple); font-size:24px; line-height:32px; font-weight:700; } #page-purchase.purchase-simple #cloudMonthlyCheckout .cloud-balance-card { min-height:0; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; } #page-purchase.purchase-simple #cloudMonthlyCheckout .cloud-balance-card>div { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; width:100%; } #page-purchase.purchase-simple #cloudMonthlyCheckout .cloud-balance-card small { margin:0; color:var(--muted); font-size:12px; } #page-purchase.purchase-simple #cloudMonthlyCheckout .cloud-balance-card strong { color:var(--text); font-size:12px; font-weight:500; } #page-purchase.purchase-simple #cloudMonthlyCheckout .xp-balance-warning { margin:6px 0 14px; padding:0; border:0; border-radius:0; background:none; color:#c74c53; font-size:12px; line-height:20px; } #page-purchase.purchase-simple #cloudMonthlyBarSubmit { margin-top:14px; height:44px; } #page-purchase.purchase-simple #cloudMonthlyCheckout .xp-balance-warning:not([hidden])+#cloudMonthlyBarSubmit { margin-top:0; } #page-purchase.purchase-simple .secure-payment { padding:2px 6px; font-size:10px; line-height:16px; font-weight:600; } /* One text hierarchy for timed and monthly order summaries. */ #page-purchase.purchase-simple .cloud-purchase-checkout { --order-label-size:12px; --order-value-size:12px; --order-line-height:22px; --order-total-size:24px; } #page-purchase.purchase-simple .cloud-purchase-checkout .purchase-checkout-head h2 { color:var(--text); font-size:14px; font-weight:700; line-height:20px; } #page-purchase.purchase-simple .cloud-purchase-checkout :is(.checkout-lines dt,.cloud-month-checkout-details>div>span:first-child,.checkout-location small) { color:var(--muted); font-size:var(--order-label-size); font-weight:400; line-height:var(--order-line-height); } #page-purchase.purchase-simple .cloud-purchase-checkout :is(.checkout-lines dd,.checkout-lines dd span,.cloud-month-checkout-details strong,.checkout-location strong,#cloudCheckoutUnitPrice,#cloudCheckoutSaved,#cloudMonthlyQuantity) { color:var(--text); font-size:var(--order-value-size); font-weight:500; line-height:var(--order-line-height); font-variant-numeric:tabular-nums; } #page-purchase.purchase-simple #cloudMonthlyCheckout :is(#cloudCheckoutUnitPrice,#cloudCheckoutSaved) { color:var(--text); font-size:14px; font-weight:600; } #page-purchase.purchase-simple .cloud-purchase-checkout :is(#cloudCheckoutTotalBlock>span,.xp-month-total>span:first-child) { color:var(--text); font-size:14px; font-weight:600; line-height:22px; } #page-purchase.purchase-simple .cloud-purchase-checkout :is(#purchasePageTotal,#cloudCheckoutMonthlyTotal) { color:var(--purple); font-size:var(--order-total-size); font-weight:700; line-height:32px; letter-spacing:0; font-variant-numeric:tabular-nums; } #page-purchase.purchase-simple .cloud-purchase-checkout :is(.xp-metered-note,.xp-balance-warning) { font-size:12px; font-weight:400; line-height:20px; } #page-purchase.purchase-simple .cloud-purchase-checkout :is(#cloudMonthlyBarSubmit,#cloudPurchaseSubmit) { font-size:14px; font-weight:600; line-height:20px; } @media(max-width:900px) { #page-purchase.purchase-simple .cloud-purchase-checkout { position:static; } } @media(max-width:480px) { #page-purchase.purchase-simple .xp-package-field .xp-select-trigger { height:60px; padding:0 12px; } .xp-package-value { gap:8px; } .xp-package-value strong { font-size:13px; } .xp-package-value .xp-package-price { font-size:16px; } .xp-package-menu .xp-package-value { flex-wrap:wrap; } .xp-package-menu .xp-package-badge { display:none; } .xp-package-menu .xp-package-copy { flex:1; } }