/* iMerchant Payments — Checkout Styles
 * =====================================
 * Isolates both Adyen Drop-in and raw card forms from theme interference.
 * All selectors use #id prefixes for high specificity to beat theme styles.
 */

/* ========================================================================
 * SECTION 1: Adyen Drop-in Theme Isolation
 * ========================================================================
 * WooCommerce themes aggressively style buttons, inputs, and labels.
 * These overrides use the #imerchant-dropin-container ID for specificity
 * (1,x,x) which beats any class-based theme selectors (0,x,x).
 * ====================================================================== */

/* ── Container baseline ── */
#imerchant-dropin-container {
  position: relative !important;
  box-sizing: border-box !important;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #00112c !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

#imerchant-dropin-container *,
#imerchant-dropin-container *::before,
#imerchant-dropin-container *::after {
  box-sizing: border-box !important;
}

/* ── Reset ALL button styles within dropin ──
 * EXCLUDES wallet payment buttons (Apple Pay, Google Pay) which use native
 * rendering and must not be stripped of their background-image / appearance. */
#imerchant-dropin-container
  button:not(.gpay-button):not(.gpay-card-info-container):not(.adyen-checkout__applepay__button),
#imerchant-dropin-container
  button:not(.gpay-button):not(.gpay-card-info-container):not(
    .adyen-checkout__applepay__button
  ):hover,
#imerchant-dropin-container
  button:not(.gpay-button):not(.gpay-card-info-container):not(
    .adyen-checkout__applepay__button
  ):focus,
#imerchant-dropin-container
  button:not(.gpay-button):not(.gpay-card-info-container):not(
    .adyen-checkout__applepay__button
  ):active,
#imerchant-dropin-container
  button:not(.gpay-button):not(.gpay-card-info-container):not(
    .adyen-checkout__applepay__button
  ):visited,
#imerchant-dropin-container [role='button']:not(.gpay-button):not(.gpay-card-info-container),
#imerchant-dropin-container [type='button']:not(.gpay-button),
#imerchant-dropin-container [type='submit'] {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  text-decoration: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  transition: none !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: baseline !important;
}

/* ── Reset ALL input/select styles within dropin ── */
#imerchant-dropin-container input,
#imerchant-dropin-container input:hover,
#imerchant-dropin-container input:focus,
#imerchant-dropin-container select,
#imerchant-dropin-container select:hover,
#imerchant-dropin-container select:focus,
#imerchant-dropin-container textarea {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* ── Reset label / span from theme ── */
#imerchant-dropin-container label,
#imerchant-dropin-container span {
  text-shadow: none !important;
  text-transform: none !important;
}

/* Reset divs but NOT background-image — wallet buttons (Google Pay)
 * use background-image for their native logo rendering. */
#imerchant-dropin-container div {
  text-shadow: none !important;
  text-transform: none !important;
}

#imerchant-dropin-container img {
  border: none !important;
  box-shadow: none !important;
}

/* ── Payment method list ── */
#imerchant-dropin-container .adyen-checkout__dropin {
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Individual payment method blocks ── */
#imerchant-dropin-container .adyen-checkout__payment-method {
  background-color: #fff !important;
  border: 1px solid #e6e9eb !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  overflow: visible !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  padding: 0 !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

#imerchant-dropin-container .adyen-checkout__payment-method:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07) !important;
}

#imerchant-dropin-container .adyen-checkout__payment-method--selected {
  border-color: #06f !important;
  background-color: #fafbff !important;
  box-shadow:
    0 0 0 1px rgba(0, 102, 255, 0.12),
    0 2px 6px rgba(0, 102, 255, 0.08) !important;
}

#imerchant-dropin-container .adyen-checkout__payment-method:last-child {
  margin-bottom: 0 !important;
}

/* ── Payment method header (the clickable "Cards" / "Google Pay" row) ── */
#imerchant-dropin-container .adyen-checkout__payment-method__header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #00112c !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  cursor: pointer !important;
  min-height: 48px !important;
  height: auto !important;
  width: 100% !important;
  text-align: left !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  overflow: visible !important;
}

#imerchant-dropin-container .adyen-checkout__payment-method__header:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: #00112c !important;
}

/* ── Payment method title text ── */
#imerchant-dropin-container .adyen-checkout__payment-method__header__title {
  color: #00112c !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 0 10px !important;
  flex: 1 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* ── Payment method brand images ── */
#imerchant-dropin-container .adyen-checkout__payment-method__image__wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

#imerchant-dropin-container .adyen-checkout__payment-method__image {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  border-radius: 3px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  background: #fff !important;
}

#imerchant-dropin-container .adyen-checkout__payment-method__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
  max-width: none !important;
}

/* ── Payment method details (expanded form area) ── */
#imerchant-dropin-container .adyen-checkout__payment-method__details {
  padding: 0 16px 16px !important;
  background: transparent !important;
}

/* ── Card form ── */
#imerchant-dropin-container .adyen-checkout__card__form {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Field containers ── */
#imerchant-dropin-container .adyen-checkout__field {
  margin-bottom: 16px !important;
  background: transparent !important;
}

/* ── Labels ── */
#imerchant-dropin-container .adyen-checkout__label {
  display: block !important;
  background: transparent !important;
}

#imerchant-dropin-container .adyen-checkout__label__text {
  color: #00112c !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 4px !important;
  display: block !important;
}

/* ── Input fields (Adyen secured fields are iframes inside these) ── */
#imerchant-dropin-container .adyen-checkout__input {
  height: 44px !important;
  min-height: 44px !important;
  max-height: none !important;
  padding: 6px 12px !important;
  border: 1px solid #b9c4c9 !important;
  border-radius: 6px !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #00112c !important;
  font-size: 16px !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  display: block !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease !important;
}

#imerchant-dropin-container .adyen-checkout__input--focus,
#imerchant-dropin-container .adyen-checkout__input:focus,
#imerchant-dropin-container .adyen-checkout__input:focus-within {
  border-color: #06f !important;
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.25) !important;
  outline: none !important;
  background: #fff !important;
  background-color: #fff !important;
}

#imerchant-dropin-container .adyen-checkout__input--error {
  border-color: #d10244 !important;
}

#imerchant-dropin-container .adyen-checkout__input--valid {
  border-color: #0abf53 !important;
}

/* ── Input wrapper (contains the iframe for secured fields) ── */
#imerchant-dropin-container .adyen-checkout__input-wrapper {
  position: relative !important;
  overflow: visible !important;
  display: block !important;
  width: 100% !important;
  background: transparent !important;
}

/* ── Secured field iframes — prevent theme from clipping ── */
#imerchant-dropin-container .adyen-checkout__input-wrapper iframe,
#imerchant-dropin-container .adyen-checkout__input iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 24px !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ── Card number / CVC / Expiry specific secured fields ── */
#imerchant-dropin-container .adyen-checkout__card__cardNumber__input,
#imerchant-dropin-container .adyen-checkout__card__exp-date__input,
#imerchant-dropin-container .adyen-checkout__card__cvc__input {
  height: 44px !important;
  min-height: 44px !important;
  padding: 6px 12px !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
}

/* ── Card number field with brand icon ── */
#imerchant-dropin-container .adyen-checkout__card__cardNumber__input {
  padding-left: 48px !important;
}

/* ── Card brand icon inside card number input (left side, detected brand) ── */
#imerchant-dropin-container .adyen-checkout__card__cardNumber__brandIcon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 16px !important;
  z-index: 1 !important;
}

/* ── Accepted card brands row (shown inside card form) ── */
#imerchant-dropin-container .adyen-checkout__card__brands {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  list-style: none !important;
}

#imerchant-dropin-container .adyen-checkout__card__brands li,
#imerchant-dropin-container .adyen-checkout__card__brands__brand-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

#imerchant-dropin-container .adyen-checkout__card__brands img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border: none !important;
  max-width: none !important;
  border-radius: 2px !important;
}

/* ── Card number field — brand icons on the right side ── */
#imerchant-dropin-container
  .adyen-checkout__card__cardNumber
  .adyen-checkout__card__cardNumber__brandIcon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 16px !important;
  z-index: 1 !important;
}

/* Dual-brand icons (right side of card number, e.g. Visa + CB) */
#imerchant-dropin-container .adyen-checkout__card__dual-branding__buttons {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  z-index: 1 !important;
}

#imerchant-dropin-container .adyen-checkout__card__dual-branding__buttons img {
  width: 24px !important;
  height: 16px !important;
  object-fit: contain !important;
  border-radius: 2px !important;
}

/* ── Cardholder name (regular text input, not iframe) ── */
#imerchant-dropin-container .adyen-checkout__card__holderName input,
#imerchant-dropin-container .adyen-checkout__card__holderName input[type='text'] {
  height: 44px !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
  border: 1px solid #b9c4c9 !important;
  border-radius: 6px !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #00112c !important;
  font-size: 16px !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

#imerchant-dropin-container .adyen-checkout__card__holderName input:focus {
  border-color: #06f !important;
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.25) !important;
  outline: none !important;
}

#imerchant-dropin-container .adyen-checkout__card__holderName input::placeholder {
  color: #90a2bd !important;
}

/* ── Select dropdowns (e.g. issuer lists) ── */
#imerchant-dropin-container .adyen-checkout__dropdown__button {
  height: 40px !important;
  padding: 8px 12px !important;
  border: 1px solid #b9c4c9 !important;
  border-radius: 6px !important;
  background: #fff !important;
  background-color: #fff !important;
  color: #00112c !important;
  font-size: 16px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

/* ── Error messages ── */
#imerchant-dropin-container .adyen-checkout__error-text {
  color: #d10244 !important;
  font-size: 12px !important;
  margin-top: 4px !important;
  background: transparent !important;
}

/* ── Checkbox ── */
#imerchant-dropin-container .adyen-checkout__checkbox__label {
  color: #00112c !important;
  background: transparent !important;
  font-size: 13px !important;
}

/* ── Radio buttons — hidden; the selected card border is enough indicator ── */
#imerchant-dropin-container .adyen-checkout__payment-method__radio,
#imerchant-dropin-container .adyen-checkout__payment-method__radio--selected {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* ========================================================================
 * PAY BUTTON
 * ======================================================================== */
#imerchant-dropin-container .adyen-checkout__button,
#imerchant-dropin-container .adyen-checkout__button--pay,
#imerchant-dropin-container button.adyen-checkout__button,
#imerchant-dropin-container button.adyen-checkout__button--pay {
  background: #00112c !important;
  background-color: #00112c !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 24px !important;
  margin: 12px 0 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: none !important;
}

/* Force white text on ALL children inside pay button (spans, text nodes) */
#imerchant-dropin-container .adyen-checkout__button *,
#imerchant-dropin-container .adyen-checkout__button--pay *,
#imerchant-dropin-container button.adyen-checkout__button *,
#imerchant-dropin-container button.adyen-checkout__button--pay * {
  color: #fff !important;
}

#imerchant-dropin-container .adyen-checkout__button--pay:hover,
#imerchant-dropin-container .adyen-checkout__button:hover,
#imerchant-dropin-container button.adyen-checkout__button--pay:hover,
#imerchant-dropin-container button.adyen-checkout__button:hover {
  background: #001d47 !important;
  background-color: #001d47 !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
  text-decoration: none !important;
  border: none !important;
}

#imerchant-dropin-container .adyen-checkout__button--pay:focus,
#imerchant-dropin-container .adyen-checkout__button:focus,
#imerchant-dropin-container button.adyen-checkout__button--pay:focus,
#imerchant-dropin-container button.adyen-checkout__button:focus {
  background: #001d47 !important;
  background-color: #001d47 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.4) !important;
  outline: none !important;
  border: none !important;
}

#imerchant-dropin-container .adyen-checkout__button--pay:active,
#imerchant-dropin-container .adyen-checkout__button:active,
#imerchant-dropin-container button.adyen-checkout__button--pay:active,
#imerchant-dropin-container button.adyen-checkout__button:active {
  background: #000c1f !important;
  background-color: #000c1f !important;
  color: #fff !important;
  border: none !important;
}

#imerchant-dropin-container .adyen-checkout__button--pay:disabled,
#imerchant-dropin-container .adyen-checkout__button:disabled,
#imerchant-dropin-container button.adyen-checkout__button--pay:disabled,
#imerchant-dropin-container button.adyen-checkout__button:disabled {
  background: #b9c4c9 !important;
  background-color: #b9c4c9 !important;
  color: #fff !important;
  cursor: not-allowed !important;
  border: none !important;
}

/* ── Pay button loading spinner ── */
#imerchant-dropin-container .adyen-checkout__button .adyen-checkout__spinner,
#imerchant-dropin-container .adyen-checkout__button--loading .adyen-checkout__spinner {
  border-color: rgba(255, 255, 255, 0.25) !important;
  border-top-color: #fff !important;
}

/* ========================================================================
 * GOOGLE PAY BUTTON
 * Let the native Google Pay button render with its own SVG logo.
 * Only override sizing/radius to match our design language.
 * ======================================================================== */
#imerchant-dropin-container .adyen-checkout__googlepay,
#imerchant-dropin-container .adyen-checkout__paywithgoogle {
  background: transparent !important;
  padding: 8px 0 0 !important;
}

/* Google Pay button — only set sizing/radius. Let Google's native CSS
 * handle background-image (the GPay wordmark), colors, and rendering.
 * DO NOT override background-color or color — it breaks the logo. */
#imerchant-dropin-container .gpay-button-fill {
  border-radius: 8px !important;
  overflow: hidden !important;
  width: 100% !important;
}

#imerchant-dropin-container button.gpay-button {
  border-radius: 8px !important;
  min-height: 48px !important;
  height: 48px !important;
  width: 100% !important;
  cursor: pointer !important;
  box-shadow: none !important;
  border: none !important;
}

/* ========================================================================
 * APPLE PAY BUTTON
 * Apple Pay uses a native <apple-pay-button> web component with shadow DOM.
 * We only set CSS custom properties and sizing — never strip appearance.
 * ======================================================================== */
#imerchant-dropin-container .adyen-checkout__applepay {
  background: transparent !important;
  padding: 8px 0 0 !important;
}

#imerchant-dropin-container .adyen-checkout__applepay__button,
#imerchant-dropin-container apple-pay-button,
#imerchant-dropin-container .apple-pay-button {
  --apple-pay-button-style: black;
  --apple-pay-button-type: pay;
  -webkit-appearance: -apple-pay-button !important;
  -apple-pay-button-style: black;
  -apple-pay-button-type: pay;
  border-radius: 8px !important;
  min-height: 48px !important;
  height: 48px !important;
  width: 100% !important;
  cursor: pointer !important;
  display: block !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#imerchant-dropin-container .adyen-checkout__applepay__button:hover,
#imerchant-dropin-container apple-pay-button:hover {
  opacity: 0.9 !important;
}

/* ========================================================================
 * STORED PAYMENT METHODS (saved cards)
 * ======================================================================== */
#imerchant-dropin-container .adyen-checkout__payment-method--stored {
  background-color: #fff !important;
}

#imerchant-dropin-container
  .adyen-checkout__payment-method--stored
  .adyen-checkout__payment-method__header {
  background: transparent !important;
}

/* ========================================================================
 * LOADING / SPINNER STATES
 * ======================================================================== */
#imerchant-dropin-container .adyen-checkout__spinner__wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: transparent !important;
}

#imerchant-dropin-container .adyen-checkout__spinner {
  border-color: #e6e9eb !important;
  border-top-color: #06f !important;
}

/* ========================================================================
 * STATUS / RESULT SCREENS
 * ======================================================================== */
#imerchant-dropin-container .adyen-checkout__status {
  background: transparent !important;
  padding: 20px !important;
  text-align: center !important;
}

#imerchant-dropin-container .adyen-checkout__status__text {
  color: #00112c !important;
  font-size: 16px !important;
}

/* ========================================================================
 * ADDITIONAL SAFETY: prevent common theme patterns from leaking in
 * ======================================================================== */

/* WooCommerce themes often target form elements globally */
#imerchant-dropin-container .adyen-checkout__field-wrapper {
  display: flex !important;
  gap: 12px !important;
  background: transparent !important;
}

/* Ensure each field in a row takes equal space */
#imerchant-dropin-container .adyen-checkout__field-wrapper > .adyen-checkout__field {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Ensure spans used for icons/text don't get theme backgrounds */
#imerchant-dropin-container .adyen-checkout__payment-method__surcharge {
  color: #687282 !important;
  background: transparent !important;
}

/* Ensure no ::before/::after pseudo-elements from themes leak in */
#imerchant-dropin-container .adyen-checkout__payment-method__header::before,
#imerchant-dropin-container .adyen-checkout__payment-method__header::after,
#imerchant-dropin-container .adyen-checkout__button--pay::before,
#imerchant-dropin-container .adyen-checkout__button--pay::after,
#imerchant-dropin-container .adyen-checkout__button::before,
#imerchant-dropin-container .adyen-checkout__button::after {
  content: none !important;
  display: none !important;
}

/* ========================================================================
 * SECTION 2: Raw Card Form Styles
 * ========================================================================
 * Direct card entry form. All selectors prefixed with #imerchant-rawcard-form
 * for isolation from theme styles.
 * ====================================================================== */

/* ── Card form container ── */
#imerchant-rawcard-form {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 24px 20px 16px !important;
  margin: 4px 0 0 !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  isolation: isolate;
}

#imerchant-rawcard-form *,
#imerchant-rawcard-form *::before,
#imerchant-rawcard-form *::after {
  box-sizing: border-box !important;
}

/* ── Header: brands + secure badge ── */
#imerchant-rawcard-form .imerchant-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: transparent !important;
}

#imerchant-rawcard-form .imerchant-card-brands {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}

#imerchant-rawcard-form .imerchant-brand {
  display: inline-block !important;
  width: 42px !important;
  height: 28px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  background-color: #fff !important;
}

#imerchant-rawcard-form .imerchant-brand-visa {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 32"><rect fill="%23fff" width="48" height="32" rx="4"/><text x="24" y="20" font-family="Arial" font-size="12" font-weight="bold" fill="%231A1F71" text-anchor="middle">VISA</text></svg>') !important;
}

#imerchant-rawcard-form .imerchant-brand-mastercard {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 32"><rect fill="%23fff" width="48" height="32" rx="4"/><circle cx="19" cy="16" r="10" fill="%23EB001B" opacity="0.8"/><circle cx="29" cy="16" r="10" fill="%23F79E1B" opacity="0.8"/></svg>') !important;
}

#imerchant-rawcard-form .imerchant-brand-amex {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 32"><rect fill="%23016FD0" width="48" height="32" rx="4"/><text x="24" y="20" font-family="Arial" font-size="9" font-weight="bold" fill="%23fff" text-anchor="middle">AMEX</text></svg>') !important;
}

#imerchant-rawcard-form .imerchant-brand-discover {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 32"><rect fill="%23fff" width="48" height="32" rx="4"/><text x="24" y="20" font-family="Arial" font-size="8" font-weight="bold" fill="%23FF6000" text-anchor="middle">DISCOVER</text></svg>') !important;
}

#imerchant-rawcard-form .imerchant-secure-badge {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  color: #16a34a !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  background: transparent !important;
}

#imerchant-rawcard-form .imerchant-lock-icon {
  width: 13px !important;
  height: 13px !important;
  fill: #16a34a !important;
  flex-shrink: 0 !important;
}

/* ── Form fields ── */
#imerchant-rawcard-form .imerchant-field {
  margin-bottom: 16px !important;
  background: transparent !important;
}

#imerchant-rawcard-form label {
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: #374151 !important;
  letter-spacing: 0.01em !important;
  background: transparent !important;
  text-transform: none !important;
  line-height: 1.5 !important;
}

#imerchant-rawcard-form label .required {
  color: #dc2626 !important;
}

#imerchant-rawcard-form .input-text,
#imerchant-rawcard-form input[type='text'] {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 11px 14px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #1f2937 !important;
  background: #fafbfc !important;
  background-color: #fafbfc !important;
  background-image: none !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  line-height: 1.5 !important;
  outline: none !important;
  overflow: visible !important;
}

#imerchant-rawcard-form .input-text::placeholder,
#imerchant-rawcard-form input[type='text']::placeholder {
  color: #9ca3af !important;
}

#imerchant-rawcard-form .input-text:focus,
#imerchant-rawcard-form input[type='text']:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  background: #fff !important;
  background-color: #fff !important;
}

/* ── Card number with dynamic brand icon ── */
#imerchant-rawcard-form .imerchant-card-number-wrap {
  position: relative !important;
}

#imerchant-rawcard-form .imerchant-card-number-wrap .input-text,
#imerchant-rawcard-form .imerchant-card-number-wrap input.input-text,
#imerchant-rawcard-form .imerchant-card-number-wrap input[type='text'] {
  padding-left: 54px !important;
}

#imerchant-rawcard-form .imerchant-card-type-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 22px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: 3px !important;
  transition:
    background-image 0.2s ease,
    opacity 0.2s ease !important;
  /* Default: generic card icon */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 22"><rect width="32" height="22" rx="3" fill="%23f3f4f6" stroke="%23d1d5db" stroke-width="1"/><path d="M4 8h24v2H4z" fill="%239ca3af"/><rect x="4" y="13" width="8" height="2" rx="1" fill="%23d1d5db"/><rect x="4" y="17" width="5" height="1.5" rx=".75" fill="%23e5e7eb"/></svg>') !important;
}

/* Detected brand icons */
#imerchant-rawcard-form .imerchant-card-type-icon.imerchant-card-type-visa {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 22"><rect width="32" height="22" rx="3" fill="%231A1F71"/><path d="M13.2 15.2l1.6-8h2l-1.6 8h-2zm8.2-8l-1.9 5.5-.8-4.1c-.1-.5-.5-.7-1-.7h-3.2l-.1.3c.7.2 1.5.4 2 .7l1.7 6.3h2.1l3.2-8h-2zm-14.1 0l-2.5 5.5-.3-1.4c-.5-1.3-1.8-2.8-3.2-3.4l1.8 7.3h2.1L9.4 7.2h-2.1zm19.7 8l1.6-8h1.9l-1.6 8h-1.9z" fill="%23fff"/></svg>') !important;
}

#imerchant-rawcard-form .imerchant-card-type-icon.imerchant-card-type-mastercard {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 22"><rect width="32" height="22" rx="3" fill="%23252525"/><circle cx="12.5" cy="11" r="7" fill="%23EB001B"/><circle cx="19.5" cy="11" r="7" fill="%23F79E1B" opacity="0.85"/><path d="M16 5.8a7 7 0 010 10.4 7 7 0 000-10.4z" fill="%23FF5F00"/></svg>') !important;
}

#imerchant-rawcard-form .imerchant-card-type-icon.imerchant-card-type-amex {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 22"><rect width="32" height="22" rx="3" fill="%23016FD0"/><text x="16" y="14" font-family="Arial,sans-serif" font-size="7.5" font-weight="bold" fill="%23fff" text-anchor="middle">AMEX</text></svg>') !important;
}

#imerchant-rawcard-form .imerchant-card-type-icon.imerchant-card-type-discover {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 22"><rect width="32" height="22" rx="3" fill="%23fff" stroke="%23e5e7eb" stroke-width="1"/><circle cx="19" cy="11" r="5" fill="%23FF6000"/><text x="11" y="14" font-family="Arial,sans-serif" font-size="5" font-weight="bold" fill="%23333" text-anchor="middle">DIS</text></svg>') !important;
}

/* ── Expiry + CVV row ── */
#imerchant-rawcard-form .imerchant-row {
  display: flex !important;
  gap: 12px !important;
}

#imerchant-rawcard-form .imerchant-row .imerchant-field {
  flex: 1 !important;
  min-width: 0 !important;
}

/* ── Encrypted footer ── */
#imerchant-rawcard-form .imerchant-encrypted-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
  letter-spacing: 0.02em !important;
  background: transparent !important;
}

#imerchant-rawcard-form .imerchant-shield-icon {
  width: 14px !important;
  height: 14px !important;
  fill: #94a3b8 !important;
  flex-shrink: 0 !important;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  #imerchant-rawcard-form {
    padding: 18px 14px 12px !important;
  }
  #imerchant-rawcard-form .imerchant-row {
    flex-direction: column !important;
    gap: 0 !important;
  }
  #imerchant-rawcard-form .imerchant-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}