/* assets/buy-now.css — the "Cumpără rapid" modal (assets/buy-now.js). */

.ph-buy-now-modal[hidden] { display: none; }

/* z-index: the tawk.to chat widget iframe sets itself to 2000000000 (a
   deliberately huge "always on top" value, and its container div's id is
   regenerated per page load so it can't be targeted reliably by CSS) —
   confirmed live: it physically sat on top of this modal's close button
   and silently ate the click (Playwright's own "element intercepts
   pointer events" error caught it directly). The old 9998/9999 here lost
   to that every time the widget happened to overlap. 2147483647 is the
   max signed 32-bit int, the standard "always above everything, including
   third-party widgets" sentinel — nothing legitimate should ever need to
   go higher. */
.ph-buy-now-backdrop {
	position: fixed;
	inset: 0;
	background: rgb(0 0 0 / 0.45);
	z-index: 2147483646;
}

.ph-buy-now-panel {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 26rem;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	background: #fff;
	border-radius: var(--pl-radius-card);
	box-shadow: var(--pl-shadow-card-lg);
	padding: 2rem;
	z-index: 2147483647;
}

@media (max-width: 480px) {
	.ph-buy-now-panel {
		max-width: calc(100% - 1.5rem);
		padding: 1.5rem;
	}
}

.ph-buy-now-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.25rem;
	height: 2.25rem;
	/* Astra's own global `button` rule sets padding: 14px 20px (asymmetric)
	   — this rule never explicitly overrode padding, so that leaked in on
	   top of the fixed width/height above and pushed the × glyph off-center
	   inside the circle (confirmed live via getComputedStyle: computed
	   padding was still Astra's 14px/20px, not 0). Explicit reset + flex
	   centering (doesn't depend on line-height/text-align lining up
	   exactly the way the old approach did) instead of hoping padding
	   stays 0 by default. */
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px; /* matches every other icon-circle button sitewide (.ph-search-submit, .ph-mega-menu-close, etc) — 50% is cosmetically identical on a square box but inconsistent with the codebase's own convention */
	border: none;
	background: var(--pl-gray-100);
	color: var(--pl-navy);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.ph-buy-now-close:hover { background: var(--pl-mist); }

.ph-buy-now-panel h2 {
	margin: 0 0 1.25rem;
	padding-right: 2rem;
	font-size: 1.25rem;
	color: var(--pl-navy);
}

.ph-buy-now-form { display: flex; flex-direction: column; gap: 1rem; }

.ph-buy-now-row { display: flex; flex-direction: column; gap: 0.4rem; }
.ph-buy-now-row label,
.ph-buy-now-payment-label { font-size: 0.85rem; font-weight: 600; color: var(--pl-navy); }

/* Bare "input" here was also catching the payment-method radio inputs —
   they're nested inside this same .ph-buy-now-row wrapper (the "Metodă de
   plată" row). width:100%/height:3rem blew a normal ~18px radio up to
   ~198x44px, confirmed live via getBoundingClientRect — that's what pushed
   the label way off to the right with a huge gap instead of sitting right
   next to it. Scoped to the actual text fields only. */
.ph-buy-now-row input[type="text"],
.ph-buy-now-row input[type="tel"] {
	width: 100%;
	height: 3rem;
}

.ph-buy-now-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.ph-buy-now-payment-options { display: flex; flex-direction: column; gap: 0.5rem; }
.ph-buy-now-payment-option {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid rgba(var(--pl-navy-rgb), 0.15);
	border-radius: var(--pl-radius-sm);
	cursor: pointer;
	font-size: 0.9rem;
}
.ph-buy-now-payment-option input[type="radio"] {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
}
.ph-buy-now-payment-option:has(input:checked) {
	border-color: var(--pl-navy);
	background: var(--pl-mist);
}

.ph-buy-now-error {
	margin: 0;
	padding: 0.6rem 0.9rem;
	border-radius: var(--pl-radius-sm);
	background: #fdecea;
	color: #a12622;
	font-size: 0.85rem;
}

.ph-buy-now-submit {
	border-radius: 9999px; /* every other primary CTA sitewide (add-to-cart, contact form, newsletter, quick-buy) is a full pill — this was the one genuine outlier still on the card radius */
	background: var(--pl-accent-gradient);
	color: #fff;
	border: none;
	font-weight: 700;
	padding: 0.85rem 0;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: var(--pl-shadow-chip);
}
.ph-buy-now-submit:disabled { opacity: 0.6; cursor: not-allowed; }

body.ph-buy-now-open { overflow: hidden; }

/* ---------- v2.1 restyle (DESIGN.md: 10px controls, 16px panel, 52px primary) ---------- */
.ph-buy-now-backdrop { background: rgb(14 32 65 / 0.5); }
.ph-buy-now-panel {
	max-width: 28rem;
	padding: 24px;
	border-radius: 16px;
	box-shadow: 0 24px 48px -16px rgb(14 32 65 / 0.35);
	font-family: var(--v-font, inherit);
}
.ph-buy-now-panel h2 {
	margin: 0 0 18px;
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--v-ink, #0E2041);
}
.ph-buy-now-close {
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--v-panel, #EEF2F7);
	color: var(--v-ink, #0E2041);
}
.ph-buy-now-close:hover { background: #E2E8F1; }
.ph-buy-now-form { gap: 16px; }
.ph-buy-now-row { gap: 6px; }
.ph-buy-now-row label,
.ph-buy-now-payment-label { font-size: 0.85rem; font-weight: 500; color: var(--v-text, #33415C); }
.ph-buy-now-row input[type="text"],
.ph-buy-now-row input[type="tel"] {
	height: 48px;
	padding: 0 14px;
	border: 1px solid #D5DCE6;
	border-radius: 10px;
	background: #fff;
	color: var(--v-ink, #0E2041);
	font-size: 1rem;
	box-shadow: none;
}
.ph-buy-now-row input[type="text"]:focus,
.ph-buy-now-row input[type="tel"]:focus {
	border-color: var(--v-navy, #223654);
	box-shadow: 0 0 0 3px rgb(34 54 84 / 0.15);
	outline: none;
}
.ph-buy-now-payment-options { gap: 8px; }
.ph-buy-now-payment-option {
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid #D5DCE6;
	border-radius: 10px;
	font-size: 0.95rem;
	color: var(--v-ink, #0E2041);
	font-variant-numeric: tabular-nums;
}
.ph-buy-now-payment-option input[type="radio"] { accent-color: var(--v-navy, #223654); }
.ph-buy-now-payment-option:has(input:checked) {
	border-color: var(--v-navy, #223654);
	background: var(--v-panel, #EEF2F7);
	font-weight: 600;
}
.ph-buy-now-error { border-radius: 10px; }
.ph-buy-now-submit {
	min-height: 52px;
	padding: 0 20px;
	border-radius: 10px;
	background: var(--v-accent, #BE4F33);
	font-size: 1.05rem;
	box-shadow: none;
	transition: background-color 0.15s ease;
}
.ph-buy-now-submit:hover:not(:disabled) { background: var(--v-accent-hover, #A8432A); }

/* Phones: bottom sheet, thumb-reachable. */
@media (max-width: 480px) {
	.ph-buy-now-panel {
		top: auto;
		bottom: 0;
		left: 0;
		transform: none;
		max-width: none;
		width: 100%;
		max-height: calc(100dvh - 24px);
		padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
		border-radius: 16px 16px 0 0;
		box-sizing: border-box;
	}
	.ph-buy-now-close { top: 12px; right: 12px; }
}
@media (max-width: 480px) and (prefers-reduced-motion: no-preference) {
	.ph-buy-now-modal:not([hidden]) .ph-buy-now-panel { animation: ph-sheet-up 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
	@keyframes ph-sheet-up { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
}