/**
 * Padddo — Mercado Pago "Cartão de crédito ou débito" (checkout Custom)
 * restyle.
 *
 * Scope: ONLY the Mercado Pago "woo-mercado-pago-custom" payment box
 * (everything inside #mp-checkout-custom-root). This file intentionally does
 * NOT touch generic WooCommerce checkout layout (page grid, section borders,
 * overlaps, #place_order) — that's out of scope here and being handled
 * separately for the checkout page as a whole.
 *
 * The card number / expiration / CVV fields themselves are Mercado Pago
 * Secure Fields rendered inside cross-origin iframes for PCI compliance —
 * this stylesheet cannot reach their internal text (no CSS can, by design).
 * That part is restyled instead via the `style` object passed to the
 * Mercado Pago SDK at field-creation time; see
 * wp-content/themes/padddo/assets/js/mp-checkout-card-style.js and the
 * enqueue notes in functions.php for the full explanation.
 *
 * Everything below targets the real, light-DOM HTML the plugin renders
 * around those iframes (confirmed NOT inside Shadow DOM by reading
 * mp-plugins-components.min.js — only an unrelated notification component
 * in that bundle uses attachShadow): field labels, row spacing, the
 * containers that wrap each iframe (background/border/radius + focus/error
 * states), the real (non-iframe) cardholder-name input, helper/error text,
 * the CVV tooltip, and the installment/issuer/document selects.
 *
 * Enqueued only on pages where the Mercado Pago custom checkout script
 * itself is loaded (see padddo_mp_custom_checkout_style_script() in
 * functions.php), as a dependent of the plugin's own
 * 'wc_mercadopago_checkout_components' stylesheet so these rules are always
 * printed after — and win the cascade over — the plugin's defaults.
 *
 * Colors/font match wp-content/themes/padddo/theme.json:
 *   --wp--preset--color--background  #0a0809 (fundo)
 *   --wp--preset--color--foreground  #bfbaba (texto/placeholder)
 *   --wp--preset--color--accent      #ffffff (texto de foco/acento)
 *   --wp--preset--color--danger      #dd7774 (erro)
 *   --wp--preset--font-family--body  "Plus Jakarta Sans", sans-serif
 */

/* Card wrapper (the whole payment box) */
#mp-checkout-custom-root .mp-checkout-custom-container {
	background-color: var( --wp--preset--color--background ) !important;
	border: 1px solid rgba( 191, 186, 186, 0.25 ) !important;
	border-radius: 12px !important;
}

/* Field labels ("Número do cartão", "Nome impresso no cartão", "Validade", "Código de segurança"...) */
#mp-checkout-custom-root .mp-input-label {
	color: var( --wp--preset--color--foreground ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
}

#mp-checkout-custom-root .mp-input-label b {
	color: var( --wp--preset--color--danger ) !important;
}

/* Slightly more generous spacing between the stacked field rows */
#mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-form {
	gap: 24px !important;
}

/* Legibility fix: the "Cartões de crédito em Modo Teste" notice and the
 * "Pague com um toque" (saved cards) wallet-button widget both render text
 * in hardcoded dark colors (rgba(0,0,0,.9) etc.) via the plugin's own JS —
 * they were designed to sit on the plugin's original white card background.
 * Now that the card background is dark, restyling every hardcoded text
 * color inside those two informational/promotional widgets would be far
 * outside this task's scope (payment fields only). Instead, give just
 * those two widgets back their own light background so their existing text
 * stays readable, like a callout card floating inside the dark form. */
#mp-checkout-custom-root .mp-test-mode-card,
#mp-checkout-custom-root .mp-wallet-button-container {
	background-color: #ffffff !important;
}

/* The three iframe containers (card number / expiration / CVV) share the
 * same visual treatment as the real cardholder-name input, so the
 * MP-controlled iframe fields don't look out of place next to it. */
#mp-checkout-custom-root #mp-custom-checkout-form-container #form-checkout__cardNumber-container,
#mp-checkout-custom-root #mp-custom-checkout-form-container #form-checkout__expirationDate-container,
#mp-checkout-custom-root #mp-custom-checkout-form-container #form-checkout__securityCode-container,
#mp-checkout-custom-root #mp-custom-checkout-form-container #mp-card-holder-div input.mp-checkout-custom-card-input.mp-card-holder-name {
	background-color: var( --wp--preset--color--background ) !important;
	border: 1px solid rgba( 191, 186, 186, 0.35 ) !important;
	border-radius: 8px !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Real (non-iframe) cardholder-name input: text + placeholder color are
 * reachable by normal CSS here (unlike the iframe fields). */
#mp-checkout-custom-root #mp-custom-checkout-form-container #mp-card-holder-div input.mp-checkout-custom-card-input.mp-card-holder-name {
	color: var( --wp--preset--color--accent ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
}

#mp-checkout-custom-root #mp-custom-checkout-form-container #mp-card-holder-div input.mp-checkout-custom-card-input.mp-card-holder-name::placeholder {
	color: var( --wp--preset--color--foreground ) !important;
	opacity: 1 !important;
}

/* Focus ring — the plugin's own JS toggles "mp-checkout-custom-card-form-focus"
 * on the iframe containers on focus/blur (see
 * setupSecureFieldsStylesAndAddListeners in card-form.min.js) and
 * "mp-focus" on the cardholder-name input, so both are safe, existing hooks
 * to restyle rather than something we invented. */
#mp-checkout-custom-root #mp-custom-checkout-form-container #form-checkout__cardNumber-container.mp-checkout-custom-card-form-focus,
#mp-checkout-custom-root #mp-custom-checkout-form-container #form-checkout__expirationDate-container.mp-checkout-custom-card-form-focus,
#mp-checkout-custom-root #mp-custom-checkout-form-container #form-checkout__securityCode-container.mp-checkout-custom-card-form-focus,
#mp-checkout-custom-root #mp-custom-checkout-form-container #mp-card-holder-div input.mp-checkout-custom-card-input.mp-card-holder-name.mp-focus {
	border: 1px solid var( --wp--preset--color--accent ) !important;
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, 0.15 ) !important;
}

/* Validation error state on the same containers/input */
#mp-checkout-custom-root #mp-custom-checkout-form-container #form-checkout__cardNumber-container.mp-error,
#mp-checkout-custom-root #mp-custom-checkout-form-container #form-checkout__expirationDate-container.mp-error,
#mp-checkout-custom-root #mp-custom-checkout-form-container #form-checkout__securityCode-container.mp-error,
#mp-checkout-custom-root #mp-custom-checkout-form-container #mp-card-holder-div input.mp-checkout-custom-card-input.mp-card-holder-name.mp-error {
	border: 1px solid var( --wp--preset--color--danger ) !important;
	box-shadow: none !important;
}

/* Error / info helper text under each field */
#mp-checkout-custom-root .mp-helper .mp-helper-message.error {
	color: var( --wp--preset--color--danger ) !important;
}

#mp-checkout-custom-root .mp-helper .mp-helper-message.info,
#mp-checkout-custom-root .mp-helper .mp-helper-message.message {
	color: var( --wp--preset--color--foreground ) !important;
}

#mp-checkout-custom-root .mp-input-label.mp-label-error,
#mp-checkout-custom-root input-label div.mp-input-label.mp-label-error {
	color: var( --wp--preset--color--danger ) !important;
}

/* CVV tooltip trigger ("?" badge next to the security-code field) */
#mp-checkout-custom-root .mp-checkout-custom-security-code-tooltip {
	background: var( --wp--preset--color--foreground ) !important;
	border-color: var( --wp--preset--color--foreground ) !important;
	color: var( --wp--preset--color--background ) !important;
}

/* Installments / issuer <select> dropdowns — swap the plugin's dark arrow
 * icon for a light one so it stays visible against the dark background.
 *
 * `color-scheme: dark` tells the browser this widget lives on a dark
 * surface, so wherever *we* can't reach with plain CSS — most notably the
 * OPEN, native <option> popup list, which on Windows/Chrome + Firefox is
 * partly drawn by the OS/browser chrome rather than the page — Chromium and
 * Firefox pick dark-appropriate native colors for it automatically (dark
 * popup background, light text) instead of falling back to their light-mode
 * defaults. This is the standard, low-risk fix for "native form control
 * doesn't match my dark theme" and costs nothing if unsupported (older
 * browsers just ignore the property and keep their previous rendering). */
#mp-checkout-custom-root #mp-checkout-custom-installments-card .mp-checkout-custom-installments-select-container .mp-custom-checkout-select-input,
#mp-checkout-custom-root #mp-checkout-custom-issuers-container .mp-custom-checkout-select-input {
	background-color: var( --wp--preset--color--background ) !important;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' fill='none' viewBox='0 0 13 8'%3E%3Cpath fill='%23bfbaba' d='m1.702.756 4.796 4.796 4.8-4.801.849.848-5.65 5.65L.855 1.605z'/%3E%3C/svg%3E" ) !important;
	border: 1px solid rgba( 191, 186, 186, 0.35 ) !important;
	color: var( --wp--preset--color--accent ) !important;
	color-scheme: dark !important;
	font-family: var( --wp--preset--font-family--body ) !important;
}

/* Once an installment/issuer option is selected, the plugin's own CSS adds a
 * `:has(option:not([disabled]):checked)` rule that forces the closed
 * select's visible text back to `var(--andes-gray-900)`
 * (≈ rgba(0,0,0,.9), near-black) with !important. Because `:has()` counts
 * toward specificity, that plugin rule (2 IDs + 2 classes + :has(...) ≈
 * (2,4,1)) beats the plain `color` override two blocks above (2 IDs + 2
 * classes ≈ (2,2,0)) even though ours is printed later — !important only
 * breaks ties on source order when specificity is equal.
 *
 * Two independent fixes, kept together on purpose (belt and suspenders —
 * a live test showed the variable-only fix below was, on its own, NOT
 * enough to fix this in practice, so don't remove either half):
 *
 * 1) Match the plugin's `:has(...)` selector exactly (same specificity),
 *    so the normal "later in source order wins" tie-break applies and our
 *    `color` here — not theirs — is what's actually used. This is the
 *    primary fix; it doesn't depend on custom-property inheritance timing
 *    or any other indirection.
 * 2) Also override the custom property's *value* itself
 *    (var(--andes-gray-900) -> theme's light text color), scoped to just
 *    the installments/issuer containers. Harmless extra safety net in case
 *    a future plugin update tweaks the `:has()` selector (e.g. adds/drops a
 *    class) enough to change its specificity or otherwise stops matching
 *    fix #1 — this still resolves to a readable color either way. */
#mp-checkout-custom-root #mp-checkout-custom-installments-card .mp-checkout-custom-installments-select-container .mp-custom-checkout-select-input:has( option:not( [disabled] ):checked ),
#mp-checkout-custom-root #mp-checkout-custom-issuers-container .mp-custom-checkout-select-input:has( option:not( [disabled] ):checked ) {
	color: var( --wp--preset--color--accent ) !important;
}

#mp-checkout-custom-root #mp-checkout-custom-installments-card,
#mp-checkout-custom-root #mp-checkout-custom-issuers-container {
	--andes-gray-900: var( --wp--preset--color--accent );
}

/* <option> items — OPEN dropdown list state.
 * ------------------------------------------------------------------
 * CORRECTION (previously this file forced `color: #000` here on the
 * assumption the native popup background always stays light/white — that
 * assumption was wrong and was itself the cause of a real bug: on
 * Windows/Chrome and Firefox with OS/browser dark mode active, the native
 * <option> popup already renders with a DARK background by default, which
 * made this forced black text invisible — "list opens, text goes black and
 * unreadable" reported by the store owner while testing live. The closed
 * select's displayed value was unaffected because that part is fully
 * custom-painted by us (`appearance: none` + the rules above), unlike the
 * open list, which is where the browser/OS native widget takes back over.
 *
 * Fix: light text + explicit dark background, matching the theme, plus
 * `color-scheme: dark` above so browsers that don't fully honor
 * `background-color` on <option> (see limitation note below) still pick a
 * dark native popup background on their own instead of defaulting to
 * light. */
#mp-checkout-custom-root #mp-checkout-custom-installments-card .mp-checkout-custom-installments-select-container .mp-custom-checkout-select-input option,
#mp-checkout-custom-root #mp-checkout-custom-issuers-container .mp-custom-checkout-select-input option {
	color: var( --wp--preset--color--accent ) !important;
	background-color: var( --wp--preset--color--background ) !important;
}

/* KNOWN BROWSER LIMITATION — documented, not silently assumed fixed:
 * the open <option> list of a native <select> is, in several browser/OS
 * combinations, drawn (at least partially) by OS-level UI chrome rather
 * than the page's rendering engine. `color` on <option> is reliably
 * respected almost everywhere; `background-color` on <option> and the
 * popup's own surface color are NOT guaranteed to be respected in every
 * browser/OS combination — behaviour has genuinely differed across Chrome/
 * Firefox/Safari versions and Windows/macOS/Linux/mobile over time, and can
 * change again with a future browser update. `color-scheme: dark` (above)
 * plus this rule cover every combination we could verify in this project's
 * supported/tested browsers, but if a customer on some other browser still
 * sees a mismatched (not necessarily unreadable — the OS still guarantees
 * contrast between its own popup background and its own text color) native
 * popup, that is a genuine platform limitation of styling native <select>
 * dropdowns with CSS, not a bug in this file. The only way to guarantee
 * pixel-perfect control of the open list in 100% of browsers would be to
 * replace the native <select> with a fully custom-rendered dropdown
 * (custom-styled div/listbox) — a materially bigger, more invasive change
 * (own keyboard/accessibility/ARIA handling, would need to stay in sync
 * with the plugin re-populating the underlying native <select> on every
 * card/bin change) that has NOT been implemented here and should only be
 * done after explicit confirmation, given the added complexity and
 * maintenance surface. */

/* Document (CPF/CNPJ) input shown for some card issuers */
#mp-checkout-custom-root .mp-input-document .mp-input {
	background-color: var( --wp--preset--color--background ) !important;
	border: 1px solid rgba( 191, 186, 186, 0.35 ) !important;
}

#mp-checkout-custom-root .mp-input-document .mp-input .mp-document,
#mp-checkout-custom-root .mp-input-document .mp-input .mp-document-select {
	background-color: var( --wp--preset--color--background ) !important;
	color: var( --wp--preset--color--accent ) !important;
}

#mp-checkout-custom-root .mp-input-document .mp-input .mp-vertical-line {
	border-left-color: rgba( 191, 186, 186, 0.35 ) !important;
}

@media ( max-width: 480px ) {
	#mp-checkout-custom-root .mp-checkout-custom-container {
		padding: 20px 16px 32px !important;
	}
}