body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper, .aic-order-pay, .uce-order-pay) {
  --wr-service-panel: #fff;
  --wr-service-link: #0954ca;
  --wr-service-selected: #e8f1ff;
  --wr-service-unavailable: #f1f4f8;
  --wr-service-soft: #f3f7ff;
  --wr-service-disabled: #e7edf5;
  --wr-service-disabled-border: #cbd7e8;
  --wr-service-muted: #596b85;
  --wr-service-input-border: #9aacc6;
  --wr-service-success-bg: #e8f6ef;
  --wr-service-success-border: #a1d6ba;
  --wr-service-success: #087b58;
  --wr-service-warning-bg: #fff4df;
  --wr-service-warning-border: #e6c486;
  --wr-service-error-bg: #fff0f2;
  --wr-service-error-border: #e7a9b2;
  --wr-service-secondary: #52627d;
}
/* Webraan-only appearance for the Apple ID and Unlock plugins.
   Keep step visibility, authentication, availability and payment behavior in the plugins. */
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) {
  --bg: var(--wr-bg, #f7faff);
  --bg-2: #eef5ff;
  --blob-a: rgba(23, 105, 255, .09);
  --blob-b: rgba(10, 99, 247, .06);
  --blob-c: rgba(23, 105, 255, .03);
  --glass-bg: var(--wr-service-panel);
  --glass-bg-2: var(--wr-service-soft);
  --glass-stroke: #d6e2f3;
  --glass-stroke-strong: #8aafe7;
  --text-hi: var(--wr-text, #10234f);
  --text-mid: var(--wr-service-secondary);
  --text-lo: var(--wr-service-muted);
  --accent: var(--wr-primary, #0a63f7);
  --accent-dark: #0954ca;
  --accent-glow: rgba(10, 99, 247, .18);
  --accent-green: var(--wr-service-success);
  --accent-blue: #0954ca;
  --accent-purple: var(--accent);
  --accent-red: #b42336;
  --accent-yellow: #875400;
  color-scheme: light;
  color: var(--text-hi);
  font-family: var(--wr-font);
  font-size: 15px;
  line-height: 1.8;
  background: linear-gradient(145deg, var(--bg-2), var(--wr-service-panel) 55%, var(--bg));
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 16px 48px rgba(16, 35, 79, .06);
}
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(button, input, textarea, select) { font-family: inherit; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .glass {
  box-shadow: 0 10px 32px rgba(16, 35, 79, .06);
}
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .brand-mark { color: #fff; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .brand-name { font-size: 18px; line-height: 1.5; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .step-title { font-size: 17px; line-height: 1.7; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .step-eyebrow { align-items: flex-start; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .step-num { flex-shrink: 0; margin-top: 2px; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.brand-sub, .step-title-en, .footer-note, .req-date, .copy-icon) { font-size: 13px; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.plan-desc, .question-hint, .loader-sub, .timer-row, .plan-unavailable-msg, .plan-availability-status, .req-meta, .req-empty, .cred-label, .agree-check, .uc-attestation, .aic-f-hint, .aic-f-note, .aic-dino-sub) { font-size: 14px; line-height: 1.85; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.plan-title, .question-text, .loader-title, .aic-dino-title) { font-size: 16px; line-height: 1.8; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .plan-title { padding-inline-end: 22px; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .plan-price { font-size: 17px; color: var(--wr-service-link); }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .plan-price-row { flex-wrap: wrap; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .plan-unavailable-msg { white-space: normal; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .plan-card.selected { background: var(--wr-service-selected); }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.plan-card.is-unavailable, .plan-card.is-checking) {
  opacity: 1;
  background: var(--wr-service-unavailable);
  border-style: dashed;
  box-shadow: none;
}
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .plan-card.is-unavailable :is(.plan-title, .plan-price) { color: var(--text-mid); }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .check-badge { color: #fff; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.terms-box, .msg-box, .cred-card, .aic-f-notice) {
  background: var(--wr-service-soft);
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.95;
}
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.invoice-row, .cred-row, .choice-btn, .req-id) { font-size: 15px; line-height: 1.8; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.cred-value, .invoice-row b) { overflow-wrap: anywhere; min-width: 0; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .btn {
  font-size: 15px;
  line-height: 1.6;
  min-height: 46px;
}
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.btn-primary, .btn-success, .auth-tab.active) { color: #fff; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.btn.disabled, .btn:disabled, .btn[aria-disabled="true"]) {
  opacity: 1;
  background: var(--wr-service-disabled);
  border-color: var(--wr-service-disabled-border);
  color: var(--wr-service-muted);
  box-shadow: none;
}
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .auth-tab { font-size: 14px; line-height: 1.8; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .field { margin-bottom: 18px; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .field label { font-size: 14px; line-height: 1.7; color: var(--text-mid); letter-spacing: 0; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .field :is(input, textarea, select) {
  background: var(--wr-service-panel);
  border-color: var(--wr-service-input-border);
  color: var(--text-hi);
  font-size: 16px;
  line-height: 1.5;
}
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .field input.en { font-family: -apple-system, Arial, sans-serif; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(input, textarea)::placeholder { color: var(--wr-service-muted); opacity: 1; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .otp-box { background: var(--wr-service-panel); border-color: var(--wr-service-input-border); box-shadow: none; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.field input, .field textarea, .otp-box):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(10, 99, 247, .15);
}
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .field input.field-invalid {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 3px rgba(180, 35, 54, .1);
}
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.field-error-msg, .aic-f-msg, .aic-f-error) { font-size: 14px; line-height: 1.8; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.field-error-msg.show, #payMsg.field-error-msg.show, .aic-f-msg.show) { max-height: none; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.status-pill, .success-pill) { font-size: 13px; line-height: 1.7; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.status-pill.ok, .success-pill) { background: var(--wr-service-success-bg); border-color: var(--wr-service-success-border); color: var(--wr-service-success); }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .status-pill.warn { background: var(--wr-service-warning-bg); border-color: var(--wr-service-warning-border); }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.status-pill.danger, .btn-danger, .aic-f-error) { background: var(--wr-service-error-bg); border-color: var(--wr-service-error-border); }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .req-actions .btn { font-size: 14px; }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .aic-dino-stage { background: var(--wr-service-selected); }
/* The optional canvas draws white lettering itself; adapt it without changing its game code. */
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .aic-dino-canvas { filter: invert(1) hue-rotate(180deg); }
body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--wr-service-link); outline-offset: 3px; }

/* These variables affect only the two plugins' own payment summaries. */
body.webraan-body .aic-order-pay {
  --aic-pay-bg: var(--wr-bg);
  --aic-pay-panel: var(--wr-service-panel);
  --aic-pay-panel-2: var(--wr-service-soft);
  --aic-pay-stroke: #8aafe7;
  --aic-pay-stroke-soft: #d6e2f3;
  --aic-pay-text: var(--wr-text);
  --aic-pay-muted: var(--wr-service-secondary);
  --aic-pay-faint: var(--wr-service-muted);
  --aic-pay-accent: #0954ca;
  --aic-pay-ink: var(--wr-text);
  color-scheme: light;
  color: var(--aic-pay-text);
  font-family: var(--wr-font);
}
body.webraan-body .uce-order-pay {
  --uce-pay-bg: var(--wr-bg);
  --uce-pay-panel: var(--wr-service-panel);
  --uce-pay-panel-2: var(--wr-service-soft);
  --uce-pay-stroke: #8aafe7;
  --uce-pay-stroke-soft: #d6e2f3;
  --uce-pay-text: var(--wr-text);
  --uce-pay-muted: var(--wr-service-secondary);
  --uce-pay-faint: var(--wr-service-muted);
  --uce-pay-accent: #0954ca;
  --uce-pay-ink: var(--wr-text);
  color-scheme: light;
  color: var(--uce-pay-text);
  font-family: var(--wr-font);
}
body.webraan-body :is(.aic-order-pay, .uce-order-pay) :is(.aic-pay-chip, .uce-pay-chip, .aic-pay-item__media, .uce-pay-item__media, .aic-pay-total-row--final, .uce-pay-total-row--final) { background: var(--wr-service-selected); }
body.webraan-body :is(.aic-order-pay, .uce-order-pay) :is(.aic-pay-item__mark, .uce-pay-item__mark) { color: #fff; }
body.webraan-body :is(.aic-order-pay, .uce-order-pay) :is(.aic-pay-summary__note, .uce-pay-summary__note, .aic-pay-item__meta, .uce-pay-item__meta) { font-size: 14px; line-height: 1.8; }
/* The plugins mark these two declarations !important; match their precedence locally. */
body.webraan-body :is(.aic-order-pay, .uce-order-pay) .payment_box { background: var(--wr-service-selected) !important; }
body.webraan-body :is(.aic-order-pay, .uce-order-pay) #place_order:is(.aic-pay-submit__btn, .uce-pay-submit__btn) { color: #fff !important; }

@media (max-width: 640px) {
  body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) { border-radius: 24px; }
  body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .otp-row { gap: 6px; }
  body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .otp-box { min-width: 0; max-width: 42px; flex: 0 1 42px; padding-inline: 0; }
  body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .req-top { flex-wrap: wrap; gap: 6px; }
  body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .auth-tabs { gap: 4px; }
  body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .auth-tab { padding-inline: 6px; }
}

/* The preference changes presentation only, never checkout state. */
html[data-wr-theme="dark"] body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper, .aic-order-pay, .uce-order-pay) {
  --wr-service-panel: #101d31;
  --wr-service-link: #9bc2ff;
  --wr-service-selected: #203858;
  --wr-service-unavailable: #1c293d;
  --wr-service-soft: #17283f;
  --wr-service-disabled: #26344c;
  --wr-service-disabled-border: #4b607e;
  --wr-service-muted: #b9c8df;
  --wr-service-input-border: #6b83a4;
  --wr-service-success-bg: #143a30;
  --wr-service-success-border: #377e64;
  --wr-service-success: #72dfb1;
  --wr-service-warning-bg: #3b301c;
  --wr-service-warning-border: #967741;
  --wr-service-error-bg: #422634;
  --wr-service-error-border: #a56475;
  --wr-service-secondary: #c1cde0;
  --bg: #0d1728;
  --bg-2: #182c48;
  --glass-stroke: #3e5575;
  --glass-stroke-strong: #83a7d5;
  --text-hi: #eff5ff;
  --text-mid: #c1cde0;
  --text-lo: #b9c8df;
  --accent-blue: #9bc2ff;
  --accent-green: #72dfb1;
  --accent-red: #ff9dac;
  --accent-yellow: #f7ce80;
  color-scheme: dark;
}
html[data-wr-theme="dark"] body.webraan-body .aic-order-pay {
  --aic-pay-bg: #0d1728;
  --aic-pay-text: #eff5ff;
  --aic-pay-ink: #eff5ff;
  --aic-pay-stroke: #83a7d5;
  --aic-pay-stroke-soft: #3e5575;
}
html[data-wr-theme="dark"] body.webraan-body .uce-order-pay {
  --uce-pay-bg: #0d1728;
  --uce-pay-text: #eff5ff;
  --uce-pay-ink: #eff5ff;
  --uce-pay-stroke: #83a7d5;
  --uce-pay-stroke-soft: #3e5575;
}
html[data-wr-theme="dark"] body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) :is(.step-num, .choice-arrow, .copy-icon) { color: var(--wr-service-link); }
html[data-wr-theme="dark"] body.webraan-body :is(.apple-checkout-wrapper, .unlock-checkout-wrapper) .aic-dino-canvas { filter: none; }

/* Center the Apple ID page content container in RTL layouts. */
body.webraan-body.page-id-6163 main.wr-section.wr-prose { margin-inline: auto; }