/*
 * Stripe Payment UI Overrides — Perla Comps child theme
 *
 * Themes all non-iframe Stripe UI elements (banners, save-method checkbox,
 * card icons, payment-method list items, my-account payment methods table)
 * to match the dark/gold design system.
 *
 * Loaded at priority 108 (after parent Vite bundle + child CSS) so plain
 * specificity wins without !important in most cases.
 * !important is used only where plugin or WooCommerce core inline styles must
 * be overridden.
 */

/* ============================================================
   1. EXPRESS CHECKOUT BANNER (.wc-stripe-banner-checkout)
   ============================================================ */

.wc-stripe-banner-checkout {
  margin-bottom: 1.5rem;
}

.wc-stripe-banner-checkout fieldset {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.875rem;
  padding: 1rem;
  margin: 0 0 0.75rem;
  background: rgba(255, 255, 255, 0.03);
}

.wc-stripe-banner-checkout fieldset legend.banner-title {
  color: var(--color-text-secondary, #d8cff5);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 0.5rem;
  float: none;
  width: auto;
  margin-bottom: 0;
}

.wc-stripe-banner-checkout .wc_stripe_checkout_banner_gateways {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

/* Divider — "or pay with card" */
.wc-stripe-banner-checkout .banner-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-gray-500, #8f87b0);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  margin: 0.25rem 0 1rem;
}

.wc-stripe-banner-checkout .banner-divider::before,
.wc-stripe-banner-checkout .banner-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   2. PAYMENT METHOD LIST — STRIPE ITEMS
   (.wc_payment_methods li.payment_method_stripe_*)
   ============================================================ */

/* Stripe CC card element wrapper */
#wc-stripe-card-element,
.wc-stripe-elements-field {
  background: #100d22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.625rem;
  padding: 0.75rem 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 44px;
}

#wc-stripe-card-element:focus-within,
.wc-stripe-elements-field:focus-within {
  border-color: var(--color-primary, #ecc31a);
  box-shadow: 0 0 0 2px rgba(236, 195, 26, 0.25);
}

/* Custom form inner wrappers */
#wc-stripe-cc-custom-form .form-row input,
#wc-stripe-cc-custom-form .form-row select {
  background: #100d22 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.625rem !important;
  color: var(--color-text-primary, #fffef9) !important;
  -webkit-text-fill-color: var(--color-text-primary, #fffef9) !important;
}

#wc-stripe-cc-custom-form .form-row input:focus,
#wc-stripe-cc-custom-form .form-row select:focus {
  border-color: var(--color-primary, #ecc31a) !important;
  box-shadow: 0 0 0 2px rgba(236, 195, 26, 0.25) !important;
  outline: none !important;
}

#wc-stripe-cc-custom-form label {
  color: var(--color-text-secondary, #d8cff5) !important;
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ============================================================
   3. SAVE PAYMENT METHOD CHECKBOX (.wc-stripe-save-source)
   ============================================================ */

.wc-stripe-save-source {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1rem;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.625rem;
}

.wc-stripe-save-source .save-source-label {
  color: var(--color-text-secondary, #d8cff5) !important;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  margin: 0;
}

/* Hide the styled ::before checkbox span; show native input instead */
.wc-stripe-save-source .checkbox {
  display: flex;
  align-items: center;
  margin: 0;
}

.wc-stripe-save-source .checkbox input[type='checkbox'] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-primary, #ecc31a);
  cursor: pointer;
  border-radius: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #100d22;
  flex-shrink: 0;
  margin: 0;
}

.wc-stripe-save-source .save-source-checkbox {
  display: none;
}

/* ============================================================
   4. CARD ICONS (.wc-stripe-card-icons, .card-icons)
   ============================================================ */

.wc-stripe-card-icons,
.payment_method_stripe_cc .wc-stripe-card-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.wc-stripe-card-icons img {
  height: 22px;
  width: auto;
  border-radius: 3px;
  opacity: 0.85;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  transition: opacity 0.2s ease;
}

.wc-stripe-card-icons img:hover {
  opacity: 1;
}

/* ============================================================
   5. WALLET / OFFSITE NOTICE
   ============================================================ */

.wc-stripe-wallet-notice,
.wc-stripe-offsite-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-info-bg, rgba(149, 124, 255, 0.16));
  border: 1px solid var(--color-info-border, rgba(149, 124, 255, 0.45));
  border-radius: 0.625rem;
  color: var(--color-info-text, #dbd4ff);
  font-size: 0.875rem;
  margin-top: 0.75rem;
}

.wc-stripe-wallet-notice::before,
.wc-stripe-offsite-notice::before {
  content: 'info';
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 1.125rem;
  flex-shrink: 0;
  line-height: 1.4;
}

/* ============================================================
   6. MY ACCOUNT — PAYMENT METHODS TABLE
   (.woocommerce-MyAccount-paymentMethods)
   ============================================================ */

body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods,
body.woocommerce-account.logged-in .account-payment-methods-table {
  width: 100%;
  border-collapse: collapse;
  border: none !important;
  background: transparent !important;
}

/* Table head */
body.woocommerce-account.logged-in .account-payment-methods-table thead th {
  color: var(--color-primary, #ecc31a) !important;
  -webkit-text-fill-color: var(--color-primary, #ecc31a) !important;
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--perla-border-dim, rgba(255, 255, 255, 0.1)) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  font-size: 0.8125rem !important;
  padding: 0.875rem 1rem !important;
  vertical-align: middle !important;
}

/* Table body rows */
body.woocommerce-account.logged-in .account-payment-methods-table tbody tr {
  background: transparent !important;
}

body.woocommerce-account.logged-in .account-payment-methods-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

body.woocommerce-account.logged-in .account-payment-methods-table tbody td {
  color: var(--color-text-primary, #fffef9) !important;
  -webkit-text-fill-color: var(--color-text-primary, #fffef9) !important;
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--perla-border-dim, rgba(255, 255, 255, 0.1)) !important;
  padding: 0.875rem 1rem !important;
  vertical-align: middle !important;
}

/* Default badge */
body.woocommerce-account.logged-in .account-payment-methods-table tbody tr.default-payment-method td:first-child::before {
  content: '';
}

body.woocommerce-account.logged-in .account-payment-methods-table .payment-method-default mark {
  background: rgba(236, 195, 26, 0.15) !important;
  color: var(--color-primary, #ecc31a) !important;
  -webkit-text-fill-color: var(--color-primary, #ecc31a) !important;
  border-radius: 0.375rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Actions column — Delete / Make default buttons */
body.woocommerce-account.logged-in .account-payment-methods-table .woocommerce-button,
body.woocommerce-account.logged-in .account-payment-methods-table a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.375rem 0.875rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  line-height: 1.4 !important;
}

body.woocommerce-account.logged-in .account-payment-methods-table a.button.delete,
body.woocommerce-account.logged-in .account-payment-methods-table a.button.wc-stripe-delete-payment-source {
  background: var(--color-danger-bg, rgba(255, 59, 53, 0.14)) !important;
  color: var(--color-danger-text, #ffbaba) !important;
  -webkit-text-fill-color: var(--color-danger-text, #ffbaba) !important;
  border: 1px solid var(--color-danger-border, rgba(255, 59, 53, 0.42)) !important;
  box-shadow: none !important;
}

body.woocommerce-account.logged-in .account-payment-methods-table a.button.delete:hover,
body.woocommerce-account.logged-in .account-payment-methods-table a.button.wc-stripe-delete-payment-source:hover {
  background: rgba(255, 59, 53, 0.25) !important;
  border-color: rgba(255, 59, 53, 0.65) !important;
}

/* "Add payment method" button below the table */
body.woocommerce-account.logged-in a.button.add-payment-method,
body.woocommerce-account.logged-in a.button[href*='add-payment-method'] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-top: 1.25rem !important;
  background: linear-gradient(135deg, var(--color-primary, #ecc31a) 0%, var(--color-primary-dark, #bd9808) 100%) !important;
  color: var(--color-on-primary, #0e0b06) !important;
  -webkit-text-fill-color: var(--color-on-primary, #0e0b06) !important;
  border: 2px solid #6b4900 !important;
  border-radius: 1rem !important;
  box-shadow: 4px 4px 0 #4a3400 !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  padding: 0.625rem 1.5rem !important;
  text-decoration: none !important;
  transition: filter 0.2s ease !important;
}

body.woocommerce-account.logged-in a.button.add-payment-method:hover,
body.woocommerce-account.logged-in a.button[href*='add-payment-method']:hover {
  filter: brightness(1.06) !important;
}

/* ============================================================
   7. ADD PAYMENT METHOD PAGE — form wrapper
   ============================================================ */

body.woocommerce-account.logged-in .woocommerce-MyAccount-content form#add_payment_method {
  max-width: 520px;
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-PaymentMethods {
  border: none !important;
  background: transparent !important;
}

/* The "add-payment-method" submit button */
body.woocommerce-account.logged-in #add_payment_method #payment .button,
body.woocommerce-account.logged-in #add_payment_method .woocommerce-Button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  background: linear-gradient(135deg, var(--color-primary, #ecc31a) 0%, var(--color-primary-dark, #bd9808) 100%) !important;
  color: var(--color-on-primary, #0e0b06) !important;
  -webkit-text-fill-color: var(--color-on-primary, #0e0b06) !important;
  border: 2px solid #6b4900 !important;
  border-radius: 1rem !important;
  box-shadow: 4px 4px 0 #4a3400 !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  padding: 0.75rem 1.5rem !important;
  margin-top: 1rem !important;
  transition: filter 0.2s ease !important;
}

body.woocommerce-account.logged-in #add_payment_method #payment .button:hover,
body.woocommerce-account.logged-in #add_payment_method .woocommerce-Button:hover {
  filter: brightness(1.06) !important;
}

/* ============================================================
   8. CHECKOUT PAGE — STRIPE PAYMENT METHOD LIST ITEM POLISH
   ============================================================ */

/* Stripe payment description text inside the payment method tab */
.payment_method_stripe_cc .payment-description,
.payment_method_stripe_cc > .payment_box p,
.payment_method_stripe_googlepay > .payment_box p,
.payment_method_stripe_applepay > .payment_box p {
  color: var(--color-text-secondary, #d8cff5) !important;
  -webkit-text-fill-color: var(--color-text-secondary, #d8cff5) !important;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

/* Stripe card element container (default Stripe-hosted form type) */
.stripe_cc-type .StripeElement,
.stripe-type .StripeElement {
  background: #100d22 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.625rem !important;
  padding: 0.75rem 0.875rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.stripe_cc-type .StripeElement--focus,
.stripe-type .StripeElement--focus {
  border-color: var(--color-primary, #ecc31a) !important;
  box-shadow: 0 0 0 2px rgba(236, 195, 26, 0.25) !important;
}

.stripe_cc-type .StripeElement--invalid,
.stripe-type .StripeElement--invalid {
  border-color: var(--color-danger, #ff3b35) !important;
  box-shadow: 0 0 0 2px rgba(255, 59, 53, 0.2) !important;
}

/* Stripe error messages */
.woocommerce-NoticeGroup .stripe-error,
#wc-stripe-cc-element-errors,
.wc-stripe-error {
  color: var(--color-danger-text, #ffbaba) !important;
  -webkit-text-fill-color: var(--color-danger-text, #ffbaba) !important;
  background: var(--color-danger-bg, rgba(255, 59, 53, 0.14)) !important;
  border: 1px solid var(--color-danger-border, rgba(255, 59, 53, 0.42)) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.875rem !important;
  font-size: 0.875rem !important;
  margin: 0.5rem 0 !important;
}

/* Stripe Link button polish */
.wc-stripe-link-button,
#wc-stripe-link-authentication-element {
  margin-bottom: 0.75rem;
}

/* ============================================================
   9. STRIPE PAYMENT ELEMENT — .p-Tabs-panel + outer wrappers
   These classes are exposed in the outer DOM by Stripe Elements
   (not inside the iframe) and can be styled from the parent.
   ============================================================ */

/* Top-level Payment Element container */
.p-PaymentForm,
.__PrivateStripeElement,
#wc-stripe-card-element > .__PrivateStripeElement,
.wc-stripe-cc-container {
  width: 100% !important;
}

/* Tab bar (payment method selector: Card / Link / etc.) */
.p-Tabs {
  margin-bottom: 0 !important;
}

.p-Tab {
  background: var(--color-surface, #17102e) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.75rem !important;
  color: var(--color-text-secondary, #d8cff5) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.p-Tab:hover {
  border-color: rgba(236, 195, 26, 0.45) !important;
  color: var(--color-text-primary, #fffef9) !important;
}

.p-Tab--selected {
  background: rgba(236, 195, 26, 0.1) !important;
  border-color: var(--color-primary, #ecc31a) !important;
  color: var(--color-primary, #ecc31a) !important;
  box-shadow: 0 0 0 1px rgba(236, 195, 26, 0.3) !important;
}

/* Tab panel content area — matches account form card look */
.p-Tabs-panel {
  background: transparent !important;
  padding: 0 !important;
}

/* Stripe-rendered input wrappers inside the Payment Element */
.p-Input,
.p-InputField {
  background: var(--color-surface, #17102e) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.75rem !important;
  min-height: 3rem !important;
  padding: 0 1rem !important;
  color: var(--color-text-primary, #fffef9) !important;
  font-size: 0.875rem !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.p-Input:focus-within,
.p-InputField:focus-within {
  border-color: var(--color-primary, #ecc31a) !important;
  box-shadow: 0 0 0 1px var(--color-primary, #ecc31a) !important;
}

/* Stripe-rendered label */
.p-Label {
  color: var(--color-text-secondary, #d8cff5) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.375rem !important;
}

/* Error text below the field */
.p-FieldError {
  color: var(--color-danger-text, #ffbaba) !important;
  font-size: 0.8125rem !important;
  margin-top: 0.25rem !important;
}

/* ============================================================
   10. ADD PAYMENT METHOD — PAYMENT METHOD LIST POLISH
   (`.perla-payment-method-list`, `.perla-payment-box`)
   ============================================================ */

/* Strip the default WooCommerce list margins/bullets */
.perla-payment-method-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
}

/* Gateway label (when multiple gateways) */
.perla-payment-method-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  color: var(--color-text-primary, #fffef9) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  padding: 0.5rem 0 !important;
}

/* Payment form box (shown when gateway selected) */
.perla-payment-box {
  margin-top: 0.75rem !important;
  padding: 1rem !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.875rem !important;
}

/* Single gateway — hide the radio (nothing to choose from) */
body.woocommerce-account .perla-payment-method-list > li:only-child input[type='radio'] {
  display: none !important;
}

/* Force the payment box visible when it's the only option */
body.woocommerce-account .perla-payment-method-list > li:only-child .perla-payment-box {
  display: block !important;
  margin-top: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Strip any white background Stripe injects into the inner card element */
body.woocommerce-account #add_payment_method #wc-stripe-card-element,
body.woocommerce-account #add_payment_method .wc-stripe-elements-field {
  background: var(--color-surface, #17102e) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem 1rem !important;
  min-height: 3rem !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

body.woocommerce-account #add_payment_method #wc-stripe-card-element:focus-within,
body.woocommerce-account #add_payment_method .wc-stripe-elements-field:focus-within {
  border-color: var(--color-primary, #ecc31a) !important;
  box-shadow: 0 0 0 1px var(--color-primary, #ecc31a) !important;
}

/* Payment Element full-width stretch inside the card */
body.woocommerce-account #add_payment_method #payment,
body.woocommerce-account #add_payment_method .woocommerce-Payment {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Stripe Link authentication element spacing */
body.woocommerce-account #add_payment_method #wc-stripe-link-authentication-element {
  margin-bottom: 1rem !important;
}

/* ============================================================
   11. CHECKOUT — WC_PAYMENT_METHODS LIST CLEAN-UP
   Strip default WooCommerce list border/bg so it sits cleanly
   inside the dark Payment Methods Card.
   ============================================================ */

#payment ul.wc_payment_methods {
  list-style: none !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

#payment ul.wc_payment_methods > li.wc_payment_method {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 0.25rem !important;
}

/* Show the gateway label only when multiple gateways exist */
#payment ul.wc_payment_methods > li.wc_payment_method > label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: var(--color-text-primary, #fffef9) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  padding: 0.625rem 0 !important;
}

/* Payment form box (the card form that slides open) */
#payment ul.wc_payment_methods .payment_box {
  background: transparent !important;
  border: none !important;
  padding: 0.25rem 0 0 !important;
  margin: 0 !important;
}

/* When there is only one gateway — hide the radio + label clutter */
#payment ul.wc_payment_methods > li.wc_payment_method:only-child > input[type='radio'],
#payment ul.wc_payment_methods > li.wc_payment_method:only-child > label {
  display: none !important;
}

#payment ul.wc_payment_methods > li.wc_payment_method:only-child > .payment_box {
  display: block !important;
}

/* ============================================================
   12. STRIPE LINK — NATIVE PHONE COUNTRY SELECT
   Match `body #categories-competitions .perla-archive-filter-select-wrap
   .perla-archive-filter-select` (perla-sections.css): pill, dim border,
   primary on focus, readable option colors.

   NOTE: Stripe Payment Element renders `#payment-linkMobilePhoneCountryInput`
   inside an iframe. Those controls are themed via Appearance API in
   `inc/stripe-integration.php` (`.PickerAction` / `.Dropdown*` rules).
   Rules here only apply if the same node ever appears in the top document.
   ============================================================ */

body.woocommerce-checkout select[name='linkMobilePhoneCountry'],
body.woocommerce-account select[name='linkMobilePhoneCountry'],
body.woocommerce-checkout select#payment-linkMobilePhoneCountryInput,
body.woocommerce-account select#payment-linkMobilePhoneCountryInput {
  box-sizing: border-box;
  width: auto;
  min-width: min(100%, 8.5rem);
  max-width: 100%;
  height: 2.5rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  color-scheme: light;
  font-family: var(--font-body, inherit);
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.25;
  background-color: #f4f0fc !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000000'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.65rem center !important;
  background-size: 1rem 1rem !important;
  border: 1.5px solid var(--perla-border-dim, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 999px !important;
  padding: 0 2.25rem 0 0.875rem !important;
  outline: none !important;
  box-shadow: none !important;
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease !important;
}

body.woocommerce-checkout select[name='linkMobilePhoneCountry']:hover,
body.woocommerce-account select[name='linkMobilePhoneCountry']:hover,
body.woocommerce-checkout select#payment-linkMobilePhoneCountryInput:hover,
body.woocommerce-account select#payment-linkMobilePhoneCountryInput:hover {
  border-color: var(--perla-border, rgba(255, 255, 255, 0.2)) !important;
}

body.woocommerce-checkout select[name='linkMobilePhoneCountry']:focus,
body.woocommerce-checkout select[name='linkMobilePhoneCountry']:focus-visible,
body.woocommerce-account select[name='linkMobilePhoneCountry']:focus,
body.woocommerce-account select[name='linkMobilePhoneCountry']:focus-visible,
body.woocommerce-checkout select#payment-linkMobilePhoneCountryInput:focus,
body.woocommerce-checkout select#payment-linkMobilePhoneCountryInput:focus-visible,
body.woocommerce-account select#payment-linkMobilePhoneCountryInput:focus,
body.woocommerce-account select#payment-linkMobilePhoneCountryInput:focus-visible {
  border-color: var(--color-primary, #ecc31a) !important;
  box-shadow: none !important;
}

body.woocommerce-checkout select[name='linkMobilePhoneCountry']:disabled,
body.woocommerce-account select[name='linkMobilePhoneCountry']:disabled,
body.woocommerce-checkout select#payment-linkMobilePhoneCountryInput:disabled,
body.woocommerce-account select#payment-linkMobilePhoneCountryInput:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Same readable OS option list as archive `.perla-archive-filter-select option` */
body.woocommerce-checkout select[name='linkMobilePhoneCountry'],
body.woocommerce-account select[name='linkMobilePhoneCountry'],
body.woocommerce-checkout select#payment-linkMobilePhoneCountryInput,
body.woocommerce-account select#payment-linkMobilePhoneCountryInput {
  background-color: #f4f0fc;
  color: #000000 !important;
}

/* Stripe sometimes exposes the country field as a text/combobox input with this id */
body.woocommerce-checkout input#payment-linkMobilePhoneCountryInput,
body.woocommerce-account input#payment-linkMobilePhoneCountryInput {
  box-sizing: border-box;
  width: auto;
  min-width: min(100%, 8.5rem);
  max-width: 100%;
  height: 2.5rem;
  font-family: var(--font-body, inherit);
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.25;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  color-scheme: light;
  background: #f4f0fc !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 999px !important;
  padding: 0 0.875rem !important;
  outline: none !important;
  box-shadow: none !important;
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease !important;
}

body.woocommerce-checkout input#payment-linkMobilePhoneCountryInput:hover,
body.woocommerce-account input#payment-linkMobilePhoneCountryInput:hover {
  border-color: var(--perla-border, rgba(255, 255, 255, 0.2)) !important;
}

body.woocommerce-checkout input#payment-linkMobilePhoneCountryInput:focus,
body.woocommerce-checkout input#payment-linkMobilePhoneCountryInput:focus-visible,
body.woocommerce-account input#payment-linkMobilePhoneCountryInput:focus,
body.woocommerce-account input#payment-linkMobilePhoneCountryInput:focus-visible {
  border-color: var(--color-primary, #ecc31a) !important;
}

/* ==========================================================================
   HIDE WooCommerce #payment div — custom tabbed UI replaces it
   ==========================================================================
   The standard WooCommerce #payment.woocommerce-checkout-payment div is kept
   in the DOM for WC checkout JS (radio buttons, payment_box show/hide, AJAX
   fragment updates) but is never shown to the user — our custom tabbed UI in
   template-parts/checkout/payment-section.php is the visible payment interface.

   The child-theme woocommerce/checkout/payment.php override also adds an inline
   style for the same purpose, but this CSS rule ensures AJAX fragment updates
   (woocommerce_update_order_review) also stay hidden after the DOM is replaced.
   ========================================================================== */

body.woocommerce-checkout #payment.woocommerce-checkout-payment {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Hide official WooCommerce Stripe UPE (Payment Element) on checkout
   ========================================================================== */

body.woocommerce-checkout .payment_method_stripe #wc-stripe-upe-form,
body.woocommerce-checkout .payment_method_stripe .wc-stripe-upe-element,
body.woocommerce-checkout .payment_method_stripe .wc-upe-form {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/*
 * Legacy Payment Element mount (#wc-stripe-card-element.payment-type) only lives
 * in the hidden #payment fragment — never hide the Perla custom form wrapper.
 */
body.woocommerce-checkout #payment.woocommerce-checkout-payment #wc-stripe-card-element.payment-type {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Visible tab: always show Perla custom card chrome */
.perla-stripe-fields #wc-stripe-cc-custom-form,
.perla-stripe-fields .perla-stripe-card-form {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
}

/* Hide official WooCommerce Stripe UPE test-mode / instruction chrome in Card tab */
.perla-payment-tab-stripe #wc-stripe-payment-method-instructions-card,
.perla-payment-tab-stripe .wc-stripe-payment-method-instruction,
.perla-payment-tab-stripe .testmode-info,
.perla-payment-tab-stripe p.testmode-info,
.perla-stripe-fields #wc-stripe-payment-method-instructions-card,
.perla-stripe-fields .wc-stripe-payment-method-instruction,
.perla-stripe-fields .testmode-info {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

/*
 * Hide official WooCommerce Stripe UPE only when our custom form is present.
 * (Avoid hiding the only card UI if stripe_cc is misconfigured.)
 */
.perla-stripe-fields:has(#wc-stripe-cc-custom-form) #wc-stripe-card-element.payment-type,
.perla-stripe-fields:has(#wc-stripe-cc-custom-form) #wc-stripe-upe-form,
.perla-stripe-fields:has(#wc-stripe-cc-custom-form) .wc-stripe-upe-element,
.perla-stripe-fields:has(.perla-stripe-card-form) #wc-stripe-card-element.payment-type,
.perla-stripe-fields:has(.perla-stripe-card-form) #wc-stripe-upe-form {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

.perla-stripe-fields .perla-cf-stripe-el .StripeElement,
.perla-stripe-fields .perla-cf-stripe-el iframe {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================================================
   STRIPE SAVED / NEW CARD TYPE RADIOS (.wc-stripe-payment-type)
   Plugin hides the native radio and draws a circle on the label ::before.
   ========================================================================== */

body.woocommerce-checkout .perla-stripe-fields label.wc-stripe-label-payment-type,
body.woocommerce-checkout .perla-payment-card label.wc-stripe-label-payment-type,
body.woocommerce-account label.wc-stripe-label-payment-type {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  padding: 0 !important;
  margin: 0 0 0.875rem !important;
  color: var(--color-text-primary, #fffef9) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
}

body.woocommerce-checkout .perla-stripe-fields label.wc-stripe-label-payment-type::before,
body.woocommerce-checkout .perla-payment-card label.wc-stripe-label-payment-type::before,
body.woocommerce-account label.wc-stripe-label-payment-type::before {
  content: '' !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  vertical-align: middle !important;
}

body.woocommerce-checkout .perla-stripe-fields input.wc-stripe-payment-type:checked + label.wc-stripe-label-payment-type::before,
body.woocommerce-checkout .perla-payment-card input.wc-stripe-payment-type:checked + label.wc-stripe-label-payment-type::before,
body.woocommerce-account input.wc-stripe-payment-type:checked + label.wc-stripe-label-payment-type::before {
  border-color: var(--color-primary, #ecc31a) !important;
  background: var(--color-primary, #ecc31a) !important;
  box-shadow: inset 0 0 0 2px var(--color-surface, #17102e) !important;
}

body.woocommerce-checkout .perla-stripe-fields label.wc-stripe-label-payment-type::after,
body.woocommerce-checkout .perla-payment-card label.wc-stripe-label-payment-type::after,
body.woocommerce-account label.wc-stripe-label-payment-type::after {
  content: none !important;
  display: none !important;
}

/* Saved cards dropdown — label + value on dark checkout */
body.woocommerce-checkout .perla-stripe-fields .wc-stripe-saved-methods-container,
body.woocommerce-checkout .perla-payment-card .wc-stripe-saved-methods-container {
  margin: 0 0 1rem 1.625rem !important;
}

body.woocommerce-checkout .perla-stripe-fields .wc-stripe-saved-methods,
body.woocommerce-checkout .perla-payment-card .wc-stripe-saved-methods {
  width: 100% !important;
  max-width: 100% !important;
  color: var(--color-text-primary, #fffef9) !important;
  background: var(--color-surface, #17102e) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.625rem !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.875rem !important;
}

/* ==========================================================================
   PERLA CUSTOM STRIPE CARD FORM (.perla-stripe-card-form)
   ==========================================================================
   Styles the outer chrome of the custom Perla card form rendered by
   woo-stripe-payment/cc-forms/perla.php. The inner card-element iframes
   are styled via elementStyles in inc/stripe-integration.php.
   ========================================================================== */

/* ── Layout wrapper ────────────────────────────────────────────────────── */
.perla-stripe-card-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.25rem 0;
}

/* Card tab header (matches Stripe Payment Element “Card” tab) */
.perla-stripe-card-form__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.perla-stripe-card-form__tab-icon {
  font-size: 1.125rem !important;
  color: var(--color-primary, #ecc31a);
}

.perla-stripe-card-form__tab-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary, #fffef9);
}

/* Card number | expiry | CVC — one row on desktop */
.perla-stripe-card-form__fields {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr) minmax(0, 0.75fr);
  gap: 0.75rem 1rem;
  align-items: start;
}

@media (max-width: 640px) {
  .perla-stripe-card-form__fields {
    grid-template-columns: 1fr;
  }
}

/* ── Two-column row (legacy / optional) ──────────────────────────────── */
.perla-cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ── Individual field wrapper ────────────────────────────────────────── */
.perla-cf-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* ── Label ───────────────────────────────────────────────────────────── */
.perla-cf-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary, #d8cff5);
  letter-spacing: 0.01em;
}

.perla-cf-icon {
  font-size: 0.9375rem !important;
  line-height: 1 !important;
  opacity: 0.75;
}

/* ── Input container (Stripe element + postal input share same wrapper) ─ */
/* Match woo-stripe-payment #wc-stripe-card icon (card_brand.svg) in Perla fields */
.perla-stripe-card-form .perla-cf-field--card .perla-cf-input-wrap,
.perla-stripe-card-form .perla-cf-input-wrap--cvc {
  padding-right: 3.25rem !important;
}

/* Let #wc-stripe-card position against .perla-cf-input-wrap (not the narrow Stripe mount) */
.perla-stripe-card-form #stripe-card-number {
  position: static;
  width: 100%;
}

.perla-stripe-card-form .perla-cf-input-wrap--cvc .perla-cf-stripe-el {
  flex: 1;
  min-width: 0;
}

.perla-stripe-card-form #stripe-card-number #wc-stripe-card,
.perla-stripe-card-form #stripe-card-number #wc-stripe-card.active {
  position: absolute !important;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 21px;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
  pointer-events: none;
  opacity: 0.9;
  z-index: 2;
}

/* CVC: card-back outline + bold “123” (not the same as #wc-stripe-card brand icon) */
.perla-stripe-card-form #wc-stripe-card-cvc {
  position: absolute !important;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 21px;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  pointer-events: none;
  opacity: 1;
  line-height: 0;
}

.perla-stripe-card-form #wc-stripe-card-cvc .perla-cf-cvc-icon {
  display: block;
  width: 32px;
  height: 21px;
}

.perla-cf-input-wrap {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background: transparent !important;
  border: 1.5px solid var(--perla-border-dim, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  min-height: 2.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  display: flex;
  align-items: center;
}

.perla-cf-input-wrap:hover {
  border-color: var(--perla-border, rgba(255, 255, 255, 0.2)) !important;
}

.perla-cf-input-wrap:has(.focused),
.perla-cf-input-wrap:focus-within {
  border-color: var(--color-primary, #ecc31a);
  box-shadow: 0 0 0 2px rgba(236, 195, 26, 0.22);
}

.perla-cf-input-wrap:has(.invalid) {
  border-color: #ff3b35;
  box-shadow: 0 0 0 2px rgba(255, 59, 53, 0.18);
}

/* Checkout validation — highlight incomplete card fields (matches wallet confirm error) */
body.woocommerce-checkout .perla-stripe-fields.perla-stripe-fields--error .perla-cf-field--error .perla-cf-input-wrap,
body.woocommerce-checkout .perla-cf-field.perla-cf-field--error .perla-cf-input-wrap {
  border-color: var(--color-danger-border, #ff3b35) !important;
  background: color-mix(in srgb, var(--color-danger, #ff3b35) 8%, rgba(255, 255, 255, 0.04)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger, #ff3b35) 28%, transparent) !important;
}

body.woocommerce-checkout .perla-stripe-fields.perla-stripe-fields--error .perla-cf-field--error .perla-cf-input-wrap:hover,
body.woocommerce-checkout .perla-cf-field.perla-cf-field--error .perla-cf-input-wrap:hover {
  border-color: var(--color-danger, #ff3b35) !important;
}

body.woocommerce-checkout .perla-stripe-fields.perla-stripe-fields--error .perla-cf-field--error .perla-cf-input-wrap:focus-within,
body.woocommerce-checkout .perla-cf-field.perla-cf-field--error .perla-cf-input-wrap:focus-within {
  border-color: var(--color-danger, #ff3b35) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger, #ff3b35) 32%, transparent) !important;
}

body.woocommerce-checkout .perla-stripe-fields.perla-stripe-fields--error .perla-cf-field--error .perla-cf-label,
body.woocommerce-checkout .perla-cf-field.perla-cf-field--error .perla-cf-label {
  color: var(--color-danger-text, #f87171);
}

body.woocommerce-checkout .perla-stripe-fields__error {
  display: block;
  margin: 0;
  text-align: left;
}

/* ── Stripe card element div ─────────────────────────────────────────── */
.perla-stripe-card-form .perla-cf-stripe-el,
.perla-stripe-card-form .perla-cf-stripe-el.StripeElement {
  width: 100%;
  min-height: 1.375rem;
  background: transparent !important;
}

/* Stripe mounts a small iframe inside each field — blend into our box */
.perla-stripe-card-form .perla-cf-stripe-el iframe {
  display: block !important;
  width: calc(100% + 5px) !important;
  max-width: calc(100% + 5px) !important;
  min-height: 1.25rem !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Legacy Stripe Card Element input (when exposed in parent DOM) */
.perla-stripe-card-form .InputElement.Input.Input--empty,
.perla-stripe-card-form .InputElement.is-empty.Input.Input--empty {
  width: calc(100% + 5px) !important;
  min-width: calc(100% + 5px) !important;
}

/* ── Postal code input ───────────────────────────────────────────────── */
.perla-cf-postal {
  width: 100%;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--color-text-primary, #fffef9) !important;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0 !important;
  margin: 0 !important;
}

.perla-cf-postal::placeholder {
  color: rgba(110, 98, 168, 0.8);
}

/* ── Error message ───────────────────────────────────────────────────── */
.perla-cf-error {
  font-size: 0.75rem;
  color: #ff3b35;
  min-height: 1rem;
}

/* ── Security hint row ───────────────────────────────────────────────── */
.perla-cf-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary, #d8cff5);
  opacity: 0.65;
  margin: 0;
  padding-top: 0.25rem;
}

/* Save card uses .woocommerce-terms-and-conditions-wrapper (same as T&C). */

/* Wallet confirm chrome lives in perla-sections.css (matches billing fields). */

/* Disable visual state for Place Order when wallet not confirmed */
#place_order:disabled,
#place_order[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto; /* keep hover tooltip */
}

/* ==========================================================================
   SAVED CARD DISPLAY IN MY ACCOUNT (wc-stripe token method column)
   ========================================================================== */

.woocommerce-MyAccount-paymentMethods .payment-method-method img {
  display: inline;
  vertical-align: middle;
  max-height: 1.5rem;
  margin-right: 0.4rem;
}

.woocommerce-MyAccount-paymentMethods .default-payment-method-label {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(236, 195, 26, 0.15);
  color: var(--color-primary, #ecc31a);
  margin-left: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}