ui-express-checkout {
  display: grid;
  gap: var(--spacing-12);
}
ui-express-checkout ui-linked-fields {
    display: grid;
    gap: var(--spacing-12);
  }
ui-express-checkout [ui-express-checkout-field] {
    display: grid;
    gap: var(--spacing-8);
  }
[error-message]:is(ui-express-checkout [ui-express-checkout-field])::after {
        content: attr(error-message);
        position: relative;
        font: var(--font-body-sm);
        color: var(--color-error);
      }
:is(ui-express-checkout [ui-express-checkout-field]):has(input:required,select:required,textarea:required) [ui-express-checkout-label]::after {
        content: " *";
        color: var(--color-error);
      }
:is(ui-express-checkout [ui-express-checkout-field]) > input,:is(ui-express-checkout [ui-express-checkout-field]) > select,:is(ui-express-checkout [ui-express-checkout-field]) > textarea,:is(ui-express-checkout [ui-express-checkout-field]) :is([ui-phone-number],[ui-phone-countries-wrapper]) {
      width: 100%;
      outline: none;
      border-radius: var(--radius-xs);
      padding: var(--spacing-12) var(--spacing-16);
      color: var(--color-on-background);
      background-color: var(--color-surface-container);
      border: 1px solid var(--color-surface-container-highest);
      transition: border-color var(--transition-standard-default-effects);
    }
:is(:is(ui-express-checkout [ui-express-checkout-field]) > input,:is(ui-express-checkout [ui-express-checkout-field]) > select,:is(ui-express-checkout [ui-express-checkout-field]) > textarea,:is(ui-express-checkout [ui-express-checkout-field]) :is([ui-phone-number],[ui-phone-countries-wrapper]))::placeholder {
        color: color-mix(in srgb, currentColor 50%, transparent);
      }
:is(:is(ui-express-checkout [ui-express-checkout-field]) > input,:is(ui-express-checkout [ui-express-checkout-field]) > select,:is(ui-express-checkout [ui-express-checkout-field]) > textarea,:is(ui-express-checkout [ui-express-checkout-field]) :is([ui-phone-number],[ui-phone-countries-wrapper])):focus {
        border-color: var(--color-on-background);
      }
:is(ui-express-checkout [ui-express-checkout-field]) > textarea {
      min-height: 43px;
      resize: vertical;
    }
:is(ui-express-checkout [ui-express-checkout-field]) > select {
      outline: none;
      cursor: pointer;
      appearance: none;
    }
:is(ui-express-checkout [ui-express-checkout-field]):has( > select) {
      position: relative;
    }
:is(ui-express-checkout [ui-express-checkout-field]):has( > select)::after {
        content: "";
        width: 6px;
        height: 6px;
        rotate: 45deg;
        position: absolute;
        inset-block-end: 20px;
        inset-inline-end: var(--spacing-16);
        border-block-end: 1.2px solid currentColor;
        border-inline-end: 1.2px solid currentColor;
      }


/* HAYYAK Arabic Express Checkout */
ui-express-checkout { direction: rtl; text-align: right; }
ui-express-checkout .express-checkout-intro { display: grid; gap: var(--spacing-8); padding: var(--spacing-16); margin-block-end: var(--spacing-8); border: 1px solid #E5DDE2; border-radius: var(--radius-sm); background: #F8F5F7; }
ui-express-checkout .express-checkout-intro h2 { margin: 0; color: #2A2028; font: var(--font-title-md); }
ui-express-checkout .express-checkout-intro p { margin: 0; color: #4A5759; font: var(--font-body-md); line-height: 1.7; }
ui-express-checkout [ui-express-checkout-label] { font-weight: 600; }
ui-express-checkout input, ui-express-checkout select, ui-express-checkout textarea { min-height: 48px; font-size: 16px; }