/**
 * BullionGiant - Custom Pages CSS Reset
 *
 * Minimal overrides to neutralise Hello Elementor base styles
 * on pages using custom Preline/Tailwind templates.
 * Keep this file as lean as possible.
 */

/* Brand tokens.
   --e-global-color-secondary mirrors Elementor's global secondary colour, which
   is stripped on our custom templates. Recreate it here so dark elements
   (CTA buttons, dark panels) share one source of truth: #131313. */
:root {
	--e-global-color-secondary: #131313;
	/* Shimmering gold gradient — premium accent for CTA text (e.g. the
	   cart's "Proceed to Checkout" button). One source of truth so any
	   element can opt in via the .bg-gold-text utility below. */
	--bg-gold-gradient: linear-gradient(110deg, #d4af37 0%, #fdf6c0 25%, #e8c350 50%, #fdf6c0 75%, #d4af37 100%);
	/* Solid gold — single colour for use cases that need a flat tone
	   (gradient stops, borders, text accents). Matches the base stop of
	   --bg-gold-gradient so the two read as the same metal. */
	--bg-gold: #d4af37;
}

/* Defensive horizontal-overflow clip for the custom checkout / cart pages.
   The dark order-summary panel uses negative margin-inline-end to bleed
   its background to the viewport edge, and third-party wallet iframes
   (Klarna / Apple Pay / Google Pay) can also report widths past the
   container. Without this, those produce a body-level horizontal scroll.
   `clip` (not `hidden`) is used so it doesn't break the right-column's
   `position: sticky`. */
body.page-template-template-cart,
body.woocommerce-cart,
body.page-template-template-checkout,
body.woocommerce-checkout {
	overflow-x: clip;
}


/* Gold shimmer text. Apply to an inline element (e.g. a <span> wrapping the
   button label) — it clips the animated gradient to the glyphs, so the host
   element keeps its own background. */
.bg-gold-text {
	background-image: var(--bg-gold-gradient);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: bg-gold-shimmer 3s linear infinite;
}
@keyframes bg-gold-shimmer {
	to { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
	.bg-gold-text { animation: none; }
}

/* All interactive controls on the custom cart/checkout use a pointer cursor.
   Tailwind v4's preflight no longer forces cursor:pointer on buttons, so set
   it explicitly here for buttons, summaries and role=button elements. */
body.page-template-template-cart button,
body.page-template-template-cart summary,
body.page-template-template-cart [role="button"],
body.woocommerce-cart button,
body.page-template-template-checkout button,
body.page-template-template-checkout summary,
body.page-template-template-checkout [role="button"],
body.woocommerce-checkout button {
	cursor: pointer;
}
body.page-template-template-cart button:disabled,
body.page-template-template-checkout button:disabled,
body.woocommerce-cart button:disabled,
body.woocommerce-checkout button:disabled {
	cursor: not-allowed;
}

/* All form controls on cart/checkout use the design system's radius-sm (2px).
   Set at the top level so individual <input>/<select>/<textarea> elements
   don't need a rounded-* utility, and so any plugin-rendered inputs (Stripe
   payment fields, WC state selects, coupon form, etc.) inherit the same
   radius automatically. !important needed to beat per-element Tailwind
   utilities like rounded-lg/xl from copy-pasted markup. */
body.page-template-template-cart :is(input, select, textarea),
body.woocommerce-cart :is(input, select, textarea),
body.page-template-template-checkout :is(input, select, textarea),
body.woocommerce-checkout :is(input, select, textarea) {
	border-radius: 0.125rem !important;
}

/* Country select — real SVG flag on the closed state. The dropdown popup
   stays native (no flags inside <option> — browsers don't allow it), but the
   collapsed select gets a 24×16 flag in front of the country name. Flag is
   served from flagcdn.com as a lazy-loaded SVG; .bg-country-select gets extra
   start padding so the text doesn't sit under the flag. */
.bg-country-select-wrap {
	position: relative;
}
.bg-country-select-flag {
	position: absolute;
	inset-inline-start: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.3125rem;  /* 21px — 3:2 aspect with 14px height */
	height: 0.875rem;  /* 14px */
	object-fit: cover;
	border-radius: 0.125rem;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
	pointer-events: none;
}
.bg-country-select-wrap > select.bg-country-select {
	padding-inline-start: 2.375rem !important;
}

/* Replace the native <select> dropdown arrow with a custom chevron so we
   can (a) push it off the right border and (b) leave room for the
   woocommerce-validated / -invalid icon to sit beside it. */
body.page-template-template-cart select,
body.woocommerce-cart select,
body.page-template-template-checkout select,
body.woocommerce-checkout select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem 1rem;
	padding-inline-end: 2.5rem !important;
}

/* On rows with a <select>, shift the validation tick / × further left so
   it doesn't collide with the dropdown arrow (which sits 12px from the
   right edge and is ~16px wide → reserves 12–28px from the right).
   !important needed because the original ::after rule has :not() decorations
   that out-specificity a plain :has(select) override. */
.woocommerce-checkout .form-row.woocommerce-validated:has(select)::after,
.woocommerce-checkout .form-row.woocommerce-invalid:has(select)::after {
	right: 34px !important;
}

/* Reset Hello Elementor base styles that conflict with Tailwind */
body.page-template-template-homepage,
body.woocommerce-cart,
body.woocommerce-checkout {
	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
	color: #1f2937;
	line-height: 1.5;
}

/* Remove Hello Elementor default content width constraints */
body.page-template-template-homepage .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* On cart/checkout: hide stray top-level injections (Elementor popups,
   admin-bar-like blocks, plugin promo banners, etc.) that land outside our
   own header/main/footer structure.
   Exceptions:
     - [role="dialog"]   — our login/register modals are direct body children
     - [id^="bg-"]       — theme-owned overlays (toast container, loader icons,
                           upsell, etc.) live outside main by design
     - script/style/link/meta/noscript — non-visual elements */
body.page-template-template-cart > *:not(header):not(main):not(footer):not([role="dialog"]):not([id^="bg-"]):not(script):not(style):not(link):not(meta):not(noscript),
body.page-template-template-checkout > *:not(header):not(main):not(footer):not([role="dialog"]):not([id^="bg-"]):not(script):not(style):not(link):not(meta):not(noscript) {
	display: none !important;
}

/* Prevent admin bar from pushing layout down */
body.page-template-template-cart,
body.page-template-template-checkout {
	margin-top: 0 !important;
}


/* ── Checkout Page ── */

/* WooCommerce notices on checkout — JS converts these to toasts and removes them.
   No CSS hiding needed; the JS removes the elements from the DOM. */

/* Validation error / success state on fields.
   Invalid uses orange (warning / required), not red (critical error) —
   we want shoppers to read it as "fill this in", not "you broke something". */
.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
	border-color: #f97316;
}
.woocommerce-checkout .form-row.woocommerce-validated .input-text,
.woocommerce-checkout .form-row.woocommerce-validated select {
	border-color: #22c55e;
}

/* Tick icon on validated fields (not on checkboxes/terms). For rows with a
   <select> the icon is shifted left below to clear the custom dropdown arrow. */
.woocommerce-checkout .form-row.woocommerce-validated:not(.woocommerce-terms-and-conditions-wrapper):not(:has(input[type="checkbox"])) {
	position: relative;
}
.woocommerce-checkout .form-row.woocommerce-validated:not(.woocommerce-terms-and-conditions-wrapper):not(:has(input[type="checkbox"]))::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

/* Error icon on invalid fields. Select rows shift the icon left below to
   clear the custom dropdown arrow. */
.woocommerce-checkout .form-row.woocommerce-invalid {
	position: relative;
}
.woocommerce-checkout .form-row.woocommerce-invalid::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 6-12 12'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

/* Dynamically replaced state/county field (wc-country-select). Match the
   rest of the form's text-sm (14px) sizing rather than inheriting the
   16px body default. border-radius intentionally omitted — the top-level
   input/select/textarea rule above forces radius-sm (2px) site-wide. */
#billing_state_field select,
#billing_state_field input[type="text"],
#shipping_state_field select,
#shipping_state_field input[type="text"] {
	padding: 0.75rem 1rem;
	width: 100%;
	background-color: white;
	border: 1px solid #e5e7eb;
	color: #1f2937;
	font-size: 0.875rem;
	line-height: 1.25rem;
}
#billing_state_field select:focus,
#billing_state_field input[type="text"]:focus {
	border-color: #111827;
	outline: none;
	box-shadow: 0 0 0 1px #111827;
}

/* Payment gateway fields (Stripe, PayPal, etc.) */
.payment_box label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: #1f2937;
	margin-bottom: 0.25rem;
}
.payment_box input[type="text"],
.payment_box input[type="tel"],
.payment_box input[type="number"],
.payment_box select,
.payment_box textarea {
	padding: 0.625rem 0.75rem;
	width: 100%;
	background-color: white;
	border: 1px solid #e5e7eb;
	color: #1f2937;
	font-size: 0.875rem;
}
.payment_box input:focus,
.payment_box select:focus,
.payment_box textarea:focus {
	border-color: #111827;
	outline: none;
	box-shadow: 0 0 0 1px #111827;
}
/* Stripe Elements card fields. Stripe mounts each field as an <iframe> inside a
   <div class="StripeElement"> — these are NOT <input>s, so the .payment_box
   input rules above never reach them and they render flat/unstyled. Give the
   containers the same border/padding/background/radius as our other fields.
   .StripeElement + its state classes (--focus/--invalid) are applied by
   Stripe.js on every Elements integration, so this is gateway-agnostic. This
   lives in an external same-origin stylesheet, so a strict CSP doesn't block
   it (unlike the gateway's own injected styles). */
.payment_box .StripeElement {
	padding: 0.625rem 0.75rem;
	width: 100%;
	background-color: white;
	border: 1px solid #e5e7eb;
	border-radius: 0.125rem;
	color: #1f2937;
	font-size: 0.875rem;
}
.payment_box .StripeElement--focus {
	border-color: #111827;
	box-shadow: 0 0 0 1px #111827;
}
.payment_box .StripeElement--invalid {
	border-color: #dc2626;
}
/* Stripe validates each field inside its own iframe (and shows its own inline
   errors), so our WooCommerce tick/cross is redundant on the payment fields —
   and it was firing on the empty card/expiry/cvc rows, showing a misleading
   green tick. Hide our validation icon inside the payment box only; billing
   fields keep theirs. Real validation is unaffected (this is icon-only). */
.payment_box .form-row::after {
	display: none !important;
}
.payment_box p {
	margin-bottom: 0.75rem;
}
.payment_box fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

/* Neutralise <strong> inside order total — WC wraps the price in <strong> */
.woocommerce-checkout-review-order-table strong {
	font-weight: inherit;
}

/* Hide ALL WooCommerce blockUI on checkout — we use our own loading overlay */
.woocommerce-checkout .blockUI {
	display: none !important;
}

/* Express Checkout wallet (Commerce Express plugin) — strip the plugin's
   own padding / margin / border / background on its wrapper so the wallet
   buttons (Apple Pay, Google Pay, etc.) sit flush above the payment methods
   box. Spacing is controlled by surrounding sections in template-checkout.php. */
#ce-checkout-wrapper,
#ce-checkout-element {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
#ce-checkout-wrapper:empty,
#ce-checkout-element:empty {
	display: none;
}

/* Payment gateway icons */
.wc_payment_method label img {
	max-height: 1.5rem;
	width: auto;
}

/* Terms, conditions and privacy text */
.woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .woocommerce-privacy-policy-text {
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	line-height: 1.5;
	color: #6b7280;
}
.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-checkout .woocommerce-privacy-policy-text a {
	color: #374151;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce-terms-and-conditions-wrapper p,
.woocommerce-checkout .woocommerce-privacy-policy-text p {
	margin-bottom: 0.375rem;
}
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.75rem;
}
/* No validation icons on terms/checkbox rows */
.woocommerce-terms-and-conditions-wrapper::after,
.woocommerce-terms-and-conditions-wrapper.woocommerce-validated::after,
.woocommerce-terms-and-conditions-wrapper.woocommerce-invalid::after {
	display: none !important;
}

/* .woocommerce-form-coupon CSS removed — the form is no longer rendered.
   template-checkout.php removes woocommerce_checkout_coupon_form from
   woocommerce_before_checkout_form, and the cart has its own custom coupon
   entry. If you re-enable WC's default coupon form, recover this block
   from git history. */

/* Show/Hide toggle for cart items details */
details .bg-toggle-hide { display: none; }
details[open] .bg-toggle-show { display: none; }
details[open] .bg-toggle-hide { display: inline; }

/* Remove default summary marker across browsers */
details summary::-webkit-details-marker { display: none; }

/* Checkout right panel — extend dark background to viewport edge */
@media (min-width: 1024px) {
  #bg-checkout-summary {
    margin-inline-end: calc(-1 * (100vw - 100%) / 2);
    padding-inline-end: calc((100vw - 100%) / 2);
  }
}

/* WooCommerce order-received fallback */
.woocommerce-order .woocommerce-thankyou-order-received {
	font-size: 1.125rem;
	font-weight: 500;
	color: #1f2937;
	margin-bottom: 1.5rem;
}
/* Place Order button: shield icon via ::before so it survives WC's
   .html(orderButtonText) replacement on every updated_checkout event.
   Stroke white (#fff) to match the dark gray-800 button background. */
#place_order::before {
	content: '';
	display: inline-block;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	/* Solid padlock icon as a mask so the gold gradient below shimmers
	   through the silhouette — same --bg-gold-gradient and keyframes as the
	   label text, so icon and text stay perfectly in sync. */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 1 1 6 0v3H9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 1 1 6 0v3H9z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	background-image: var(--bg-gold-gradient);
	background-size: 200% auto;
	animation: bg-gold-shimmer 3s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	#place_order::before { animation: none; }
}

/* Gold shimmer label on the Place Order button — matches the cart's
   "Proceed to Checkout". WC re-renders the button text on every
   updated_checkout, so this must be CSS on #place_order itself (a wrapping
   span around the label would be wiped). background-clip:text consumes the
   element's own background, so the dark fill is provided by the .bg-[var…]
   wrapper around the button in template-checkout.php — not a pseudo, which
   would paint over the gradient. */
#place_order {
	background-color: transparent !important;
	background-image: var(--bg-gold-gradient);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: bg-gold-shimmer 3s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	#place_order { animation: none; }
}