:root {
  /* ====== 设计变量 ====== */

  /* 主题色 */
  --color-primary: #3782ff;
  --color-primary-variant: #ebf3ff;

  /* 功能色 */
  --color-action: #3782ff;
  --color-success: #42d474;
  --color-success-variant: #ecfbf1;
  --color-warning: #ffc147;
  --color-tip: #ff7614;
  --color-warning-variant: #fff9ed;
  --color-error: #fa3a3a;
  --color-error-variant: #feebeb;
  --color-marketing: #ff7614;
  --color-marketing-variant: #fff1e8;
  --color-feedback-error-dark: #DD3A35;

  /* 中性色 */
  --color-neutral-1: #1a1a1a;
  --color-neutral-2: #666666;
  --color-neutral-3: #999999;
  --color-neutral-4: #e8e8e8;

  /* 填充色 */
  --color-fill-bg: #f5f5f5;
  --color-fill-container-1: #ffffff;
  --color-fill-container-2: #f7f7f7;

  /* 反色 */
  --color-reverse: #1a1a1a;

  /* ====== 位置变量 ====== */

  /* --- 通用 ---*/
  --font-size-primary: 10px;
  --border-radius-primary: 1.2rem;

  --color-hover-primary: #4c8eff;
  --color-active-primary: #2c68cc;

  --border-color-primary: var(--color-neutral-3);
  --border-color-hover-primary: var(--color-neutral-2);

  /* --- text --- */
  --color-text-primary: var(--color-neutral-1);
  --color-text-secondary: var(--color-neutral-2);
  --color-text-tip: var(--color-neutral-3);
  --color-text-error: var(--color-error);

  --color-link: var(--color-action);

  /* --- app --- */
  --bg-body: var(--color-fill-bg);
  --bg-body-out: var(--color-fill-container-1);
  --border-radius-app-pc: 1.2rem;
  --bg-nav: transparent;
  --bg-paylist: var(--color-fill-container-1);

  /* --- tooltip --- */
  --bg-tooltip: var(--color-neutral-1);
  --color-tooltip: var(--color-neutral-4);

  /* --- loading --- */
  --border-color-loading-primary: var(--color-primary);
  --border-color-loading-plain: var(--color-text-tip);
  --font-size-loading: var(--font-size-primary);

  /* --- tag --- */
  --bg-tag: rgba(0, 0, 0, 0.08);
  --bg-tag-hot: var(--color-marketing-variant);
  --color-tag: var(--color-neutral-2);
  --color-tag-hot: var(--color-marketing);
  --border-radius-tag: 0.4rem;

  /* --- terms --- */
  --color-terms: var(--color-primary);

  /* --- 光标 --- */
  --color-caret: var(--color-primary);

  /* --- button --- */
  --font-size-btn-normal: 1.4rem;
  --font-size-btn-small: 1.2rem;
  --min-height-btn-normal: 4.8rem;
  --min-height-btn-small: 3.6rem;

  /* primary button */
  --color-btn-primary: white;
  --color-hover-btn-primary: var(--color-btn-primary);
  --color-active-btn-primary: var(--color-btn-primary);
  --bg-color-btn-primary: var(--color-primary);
  --bg-color-hover-btn-primary: var(--color-hover-primary);
  --bg-color-active-btn-primary: var(--color-active-primary);
  --border-radius-btn-primary: var(--border-radius-primary);
  /* google按钮圆角需要与支付按钮圆角一致 */
  --pm-google-pay-button-radius: 12;
  --color-fill-svg-btn-primary: var(--color-primary);

  /* plain button */
  --color-btn-plain: var(--color-primary);
  --color-hover-btn-plain: var(--color-hover-primary);
  --color-active-btn-plain: var(--color-active-primary);
  --bg-color-btn-plain: var(--color-fill-container-1);
  --bg-color-hover-btn-plain: var(--color-fill-container-2);
  --bg-color-active-btn-plain: var(--color-fill-bg);
  --border-color-btn-plain: var(--color-primary);
  --border-color-hover-btn-plain: var(--color-hover-primary);
  --border-color-active-btn-plain: var(--color-active-primary);

  --color-btn-plain-info: var(--color-neutral-1);
  --color-hover-btn-plain-info: var(--color-neutral-1);
  --color-active-btn-plain-info: var(--color-neutral-1);
  /* hover & active 填充色暂未确定 */
  --bg-color-hover-btn-plain-info: var(--color-fill-container-2);
  --bg-color-active-btn-plain-info: var(--color-fill-bg);
  --border-color-btn-plain-info: var(--color-neutral-4);
  --border-color-hover-btn-plain-info: var(--color-neutral-3);
  --border-color-active-btn-plain-info: var(--color-neutral-2);
  --border-radius-btn-plain: var(--border-radius-btn-primary);

  --color-btn-plain-danger: var(--color-error);
  --color-hover-btn-plain-danger: var(--color-error);
  --color-active-btn-plain-danger: var(--color-error);
  --bg-color-hover-btn-plain-danger: var(--color-fill-container-2);
  --bg-color-active-btn-plain-danger: var(--color-neutral-4);
  --border-color-btn-plain-danger: var(--color-btn-plain-danger);
  --border-color-hover-btn-plain-danger: var(--color-hover-btn-plain-danger);
  --border-color-active-btn-plain-danger: var(--color-active-btn-plain-danger);
  --border-radius-btn-plain: var(--border-radius-btn-primary);

  /* text button */
  --color-btn-text: var(--color-primary);
  --color-hover-btn-text: var(--color-hover-primary);
  --color-active-btn-text: var(--color-active-primary);
  --font-size-btn-text: var(--font-size-btn-normal);

  /* --- input --- */
  --bg-color-input: var(--color-fill-container-1);
  --bg-color-disabled-input: var(--color-fill-container-2);
  --border-color-input: var(--border-color-primary);
  --border-color-hover-input: var(--border-color-hover-primary);
  --border-color-focus-input: var(--color-primary);
  /* --shadow-color-focus-input: rgba(55, 130, 255, 0.2); */
  --shadow-color-focus-input: var(--color-primary);
  --shadow-size-focus-input: 1px;

  --label-color-input: var(--color-text-tip);
  --label-color-focus-input: var(--color-primary);
  --action-color-input: var(--border-color-input);
  --action-color-hover-input: var(--border-color-hover-input);

  --color-placeholder-input: var(--color-text-tip);
  --color-input: var(--color-text-primary);
  --color-disabled-input: var(--color-neutral-2);
  --color-disabled-input-lable: var(--color-neutral-3);

  --font-size-input: 1.6rem;
  --font-size-input-label: 1.4rem;
  --font-size-input-tip: 1.3rem;

  --height-input: 5.6rem;
  --border-radius-input: var(--border-radius-primary);

  /*  --- checkbox --- */
  --size-checkbox: 1.4rem;
  --border-color-checkbox: var(--border-color-input);
  --border-color-hover-checkbox: var(--border-color-hover-input);
  --border-color-focus-checkbox: var(--border-color-focus-input);
  --border-color-focus-checkbox-plain: var(--color-neutral-3);
  --shadow-size-focus-checkbox: var(--shadow-size-focus-input);
  --shadow-color-focus-checkbox: var(--shadow-color-focus-input);
  --shadow-color-focus-checkbox-plain: var(--color-neutral-3);
  --border-radius-checkbox: calc(var(--border-radius-input) / 6);
  --bg-color-checkbox: var(--bg-color-input);
  --border-color-checked-checkbox: var(--color-neutral-3);
  --bg-color-active-checkbox: var(--color-primary);
  --color-checkbox-tip: var(--color-text-tip);
  --font-size-checkbox-tip: var(--font-size-input-tip);

  /* --- item --- */
  --bg-color-item: var(--color-fill-container-1);
  --bg-color-selected-item: var(--color-primary-variant);
  --bg-color-item-extra: var(--bg-color-item);
  --divider-color-item-extra: var(--divider-color);
  --bg-color-selected-item-extra: var(--bg-color-item-extra);

  --border-color-item: var(--color-fill-bg);
  --border-color-hover-item: transparent;
  --border-color-selected-item: var(--color-primary);
  --border-color-selected-item-unvailable: var(--color-primary);

  --size-item-radio: 2.4rem;
  --size-item-radio-inner: 1.6rem;
  --border-radius-item-radio-inner: calc(var(--size-item-radio-inner) / 2);
  --border-width-item-radio-inner: 0.2rem;
  --border-width-item-radio-inner-checked: 0.5rem;
  --border-color-item-radio: var(--color-neutral-3);
  --border-color-item-radio-checked: var(--color-primary);
  --bg-color-item-arrow: var(--border-color-item-radio);

  --color-item-discount-detail: var(--color-tag-hot);
  --bg-color-item-discount-label: var(--bg-tag-hot);
  --color-item-discount-label: var(--color-tag-hot);

  --border-radius-item: var(--border-radius-primary);
  --border-radius-item-tag: var(--border-radius-tag);
  --shadow-color-focus-item: var(--shadow-color-focus-input);
  --shadow-color-focus-item-unvailable: var(--border-color-selected-item-unvailable);
  --shadow-size-focus-item: 1px;

  --color-item-account: var(--color-neutral-2);
  --color-local-currency: var(--color-neutral-1);
  --bg-local-currency: var(--bg-tag);

  --color-item-status-tag: var(--color-fill-container-1);
  --bg-item-status-tag: var(--color-reverse);

  --padding-item-main: 1.2rem 1.6rem;
  --width-item-logo: 3.2rem;
  --height-item-logo: 3.2rem;
  --font-size-item-name: 1.4rem;

  --color-item-desc: var(--color-text-tip);

  /* --- header --- */
  --header-height: 20rem;
  --header-top-height: 4.8rem;

  --header-bg: var(--color-fill-container-1);
  --opcity-header-bottom: 0.4;
  --header-top-bg: none;
  --header-main-bg: none;
  --header-bottom-bg: none;
  --header-fixed-bg: var(--header-bg);
  --header-fixed-shadow-bg: none;
  --divider-color-header: var(--color-neutral-1);
  --opacity-header-divider: 0.1;
  --margin-header-divider: 0 1.6rem;
  --display-header-divider: block;

  --color-text-header-common: var(--color-text-primary);
  --color-text-header-item: var(--color-text-primary);
  --opacity-header-item-desc: 0.7;
  --color-text-header-exchange: var(--color-text-tip);
  --color-text-header-amount: var(--color-text-primary);
  --color-text-header-tag: var(--color-tag);
  --color-text-header-tag-discount: var(--color-tag-hot);
  --color-text-header-tip: var(--color-text-primary);
  --color-text-header-fix-tip: var(--color-text-header-tip);

  --border-radius-header-tag: var(--border-radius-tag);
  --bg-header-tag: var(--bg-tag);
  --bg-header-tag-discount: var(--bg-tag-hot);
  --bg-banner-discount: var(--bg-tag-hot);
  --color-banner-discount: var(--color-tag-hot);

  --padding-header-tags: 0 2.6rem;
  --padding-header-top: 0.8rem 1.6rem 0;
  --padding-header-main: 1.6rem 2.4rem;
  --padding-header-bottom: 0 1.6rem;
  --border-radius-header-main: 0;
  --border-radius-header-bottom: 0;
  --top-offset-header-bottom: 0;

  --header-content-align: center;
  --header-content-justify: center;

  /* 头部素材图配置 */
  --header-background-image-opacity: 0;
  --header-background-image-mix-blend-mode: luminosity;
  --header-background-cover-opacity: 0;

  /* --- page-content --- */

  /* --- divider --- */
  --divider-color: var(--color-neutral-4);
  --divider-header-nav: transparent;
  --bg-divider-text: var(--bg-body);

  /* --- countdown --- */
  --color-countdown: var(--color-neutral-4);
  --bg-countdown: var(--color-neutral-1);

  /* --- toast --- */
  --bg-toast: var(--color-neutral-1);
  --color-toast-action: var(--color-primary);
  --color-toast: var(--color-fill-bg);

  /* --- collect --- */
  --bg-color-collect-card: var(--color-fill-container-1);
  --border-color-collect-card: var(--color-fill-container-1);
  --border-radius-collect-card: var(--border-radius-primary);
  --border-color-collect-card-account: var(--color-neutral-4);
  --border-radius-collect-card-account: var(--border-radius-primary);
  --bg-card-org: white;
  --border-color-card-org: var(--color-neutral-4);
  --color-card-security-tip: var(--color-neutral-1);

  /* --- pay btn --- */
  --bg-pay-btn-container: var(--color-fill-container-1);
  --bg-pay-btn-container-pc: var(--color-fill-bg);
  --shadow-pay-btn-wrapper: none;

  /* --- popup --- */
  --bg-popup: var(--color-fill-bg);
  --bg-popup-mask: #000000;
  --divider-color-popup-title: transparent;

  /* --- skeleton --- */
  --bg-text-skeleton: linear-gradient(to right, #edeef1 0%, #f6f7f8 15%, #efefef 100%);
  --bg-text-skeleton-reverse: var(--bg-text-skeleton);

  /* --- moreinfo --- */
  --color-text-moreinfo-hot: var(--color-tag-hot);
  --bg-moreinfo-tag: var(--bg-header-tag);
  --border-radius-moreinfo-tag: var(--border-radius-tag);
  --font-size-moreinfo-text: 1.3rem;

  /* --- tab --- */
  --color-tab: var(--color-neutral-2);
  --color-tab-active: var(--color-primary);
  --color-tab-indicator: var(--color-neutral-4);
  --color-tab-indicator-active: var(--color-primary);

  /* --- payguide --- */
  --color-payguide-deadline: var(--color-neutral-2);
  --bg-payguide-card: var(--color-fill-container-1);
  --border-color-payguide-card: transparent;
  --border-radius-payguide-card: var(--border-radius-primary);
  --color-payguide-card-title: var(--color-neutral-2);
  --color-imgcode-tip: var(--color-neutral-2);
  --bg-payguide-info: var(--color-fill-container-2);
  --border-color-payguide-info: var(--bg-payguide-info);
  --color-payguide-properties-label: var(--color-neutral-1);
  --color-payguide-properties-value: var(--color-neutral-1);
  --bg-payguide-partingline: var(--bg-body);
  --color-payguide-tip: var(--color-neutral-2);
  --color-payguide-tip-order: var(--color-neutral-3);
  --color-payguide-tip-order-icon: var(--color-neutral-3);
  --border-color-payguide-step: var(--border-color-primary);
  --color-payguide-code-desc: var(--color-neutral-2);
  --color-payguide-code-value: var(--color-neutral-1);
  --bg-color-payguide-code: var(--color-fill-container-2);
  --border-color-payguide-code: var(--color-fill-container-2);

  /* --- result --- */
  --color-discount-result: var(--color-tag-hot);
  --color-result-amount-success: var(--color-neutral-1);
  --bg-color-result-card: var(--color-fill-container-1);
  --border-color-result-card: var(--color-fill-container-1);
  --border-radius-result-card: var(--border-radius-primary);

  /* --- others --- */
  --color-fill-svg-copy: var(--color-action);
  --color-bingo-check: var(--color-success);
  --bg-notice: var(--color-neutral-4);
  --bg-notice-danger: var(--color-error-variant);
  --color-notice: var(--color-text-secondary);
  --bg-scrollbar-track: var(--color-neutral-3);
  --bg-scrollbar-thumb: var(--color-neutral-2);
  --color-important-text: var(--color-tip);

  /* --- image --- */
  --bind-on-image-address: /CashierV2/img_illustrationV2/img_authorization_guidepage_light_on.jpg;
  --bind-off-image-address: /CashierV2/img_illustrationV2/img_authorization_guidepage_light_off.jpg;
  
  --mada-logo-address: /CashierV2/icon/mada_LightMode.png;

  --auth-result-logo-success: /icon/link_success_light.png;
  --auth-result-logo-fail: /icon/link_failed_light.png;
  --auth-result-logo-pending: /icon/link_pending_light.png;

  --result-bind-bg: /CashierV2/img_illustrationV2/img_authorization_resultpage_light_mobile.jpg;
  
  --result-toss-bg: /CashierV2/img_illustrationV2/img_authorization_resultpage_light_toss.jpg;

  --result-shopeepay-bg: /CashierV2/img_illustrationV2/img_authorization_resultpage_light_shopeepay.jpg;

  --result-mp-bg: /CashierV2/img_illustrationV2/img_authorization_resultpage_light_mp.jpg;


  /* --- GooglePay Button --- */
  --pm-google-pay-button-color: default;

  /* --- ApplePay Button --- */
  --pm-apple-pay-button-color: black;

  /* --- subscription --- */
  --color-subscription-tag-front: var(--color-text-header-amount, #1a1a1a);
  --color-subscription-tag-detail: #fff;
  --color-subscription-tag-line-text: var(--color-neutral-3);
  --color-subscription-tag-tail: var(--color-text-header-amount, #1a1a1a);
  --bg-subscription-tag-detail: var(--color-neutral-3);
  --border-radius-subscription-tag-detail: 0.4rem;
  --radius-others: 0.6rem;

  /* --- topup btn --- */
  --bg-color-topup-btn: var(--color-primary, #3782ff);
  --color-text-topup-btn: var(--color-btn-primary, #ffffff);
  --border-radius-topup-btn: 0.8rem;
  --border-width-topup-btn: 0.1rem;
  --border-color-topup-btn: var(--color-primary, #3782ff);
  --font-size-topup-btn: 1.3rem;

  /* 刷新按钮 */
  --color-refresh-btn-border: #c9c9c9;
}

.desktop:root,
.landscape:root {
  --header-content-justify: start;
  --header-bottom-bg: none;
}

.desktop:root {
  --padding-header-main: 4.8rem 1.6rem 1.6rem 1.6rem;
}