/**
 * GV Elementor Add to Cart & Buy Now — front-end styles.
 * Loaded only on pages/templates that actually contain the widget.
 */

.gv-atc-wrapper {
	display: grid;
	grid-auto-flow: row;
	grid-auto-rows: auto;
	grid-auto-columns: auto;
	row-gap: 12px;
	column-gap: 12px;
	width: 100%;
	align-items: center;
}

/*
 * The variations form is styled as `display: contents` so its children
 * (variation picker, quantity, buttons, custom text, message) become
 * direct grid items of `.gv-atc-wrapper` and can be freely positioned
 * exactly like they are on a Simple product — the <form> element itself
 * is not part of the visual layout, only of the DOM/submission structure.
 */
.gv-atc-wrapper .gv-atc-variations-form {
	display: contents;
}

/* Fixed, non-configurable rows: the variation picker and the selected
 * variation's info box always span the full width and sit above the
 * user-positioned items (which default to row 3+). */
.gv-atc-variation-picker {
	grid-row: 1;
	grid-column: 1 / -1;
}

.gv-atc-variations {
	width: 100%;
	border: none;
	margin: 0;
}

.gv-atc-variations td {
	padding: 4px 0;
	vertical-align: middle;
}

.gv-atc-variations td.label {
	padding-inline-end: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.gv-atc-variations select {
	width: 100%;
	min-width: 160px;
	padding: 8px 10px;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	background-color: #fff;
}

.gv-atc-single-variation {
	grid-row: 2;
	grid-column: 1 / -1;
	font-size: 0.95em;
}

.gv-atc-single-variation:empty {
	display: none;
}

.gv-atc-single-variation .woocommerce-variation-price,
.gv-atc-single-variation .woocommerce-variation-availability {
	margin: 0 0 6px;
}

.gv-atc-single-variation .stock.out-of-stock {
	color: #d63638;
	font-weight: 600;
}

/*
 * Each of the 4 user-positionable items (Quantity, Add to Cart, Buy Now,
 * Custom Text) is a `.gv-atc-cell`. Its grid-row / grid-column / justify-self
 * are set entirely by the matching Elementor control (Content → Position &
 * Layout), so no fixed row/column values are set here — the PHP-side
 * defaults (row 3+) act as the out-of-the-box layout.
 */
.gv-atc-cell {
	display: flex;
	align-items: center;
	min-width: 0;
}

.gv-atc-message {
	grid-row: 99;
	grid-column: 1 / -1;
}

/* Quantity selector */
.gv-atc-qty-wrapper {
	display: inline-flex;
	align-items: stretch;
	width: 120px;
	height: 46px;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	flex-shrink: 0;
}

.gv-atc-qty-minus,
.gv-atc-qty-plus {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	flex-shrink: 0;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	color: #333;
	background: #f5f5f5;
	user-select: none;
	transition: background-color 0.15s ease-out, color 0.15s ease-out;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.gv-atc-qty-minus:hover,
.gv-atc-qty-plus:hover {
	background: #ececec;
}

.gv-atc-qty-minus:focus-visible,
.gv-atc-qty-plus:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: -2px;
}

.gv-atc-qty-minus.is-disabled,
.gv-atc-qty-plus.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.gv-atc-qty-input {
	flex: 0 1 auto;
	align-self: center;
	width: 100%;
	min-width: 0;
	height: auto;
	border: none;
	border-inline-start: 1px solid #e5e5e5;
	border-inline-end: 1px solid #e5e5e5;
	text-align: center;
	font-size: 14px;
	line-height: normal;
	padding: 6px 4px;
	color: #222;
	background: transparent;
	-moz-appearance: textfield;
	box-sizing: border-box;
}

.gv-atc-qty-input::-webkit-outer-spin-button,
.gv-atc-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.gv-atc-qty-input:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: -2px;
}

/* Buttons */
.gv-atc-btn {
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	cursor: pointer;
	padding: 12px 28px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-align: center;
	border-radius: 6px;
	border: 1px solid transparent;
	transition-property: color, background-color, border-color, box-shadow;
	transition-duration: 0.15s;
	transition-timing-function: ease-out;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.gv-atc-btn:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/*
 * pointer-events: none here is static (never toggled by JS) and safe: it
 * only ensures a tap/click on the icon or label always resolves to the
 * parent .gv-atc-btn as the click target, instead of the inner <span>.
 */
.gv-atc-btn-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	pointer-events: none;
}

.gv-atc-btn-icon {
	display: inline-flex;
	align-items: center;
	margin-inline-end: 8px;
}

.gv-atc-btn-icon-after {
	margin-inline-end: 0;
	margin-inline-start: 8px;
	order: 2;
}

.gv-atc-btn-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.gv-atc-btn-add-to-cart {
	color: #ffffff;
	background-color: #2c6ecb;
}

.gv-atc-btn-add-to-cart:hover {
	background-color: #24589f;
}

.gv-atc-btn-buy-now {
	color: #2c2c2c;
	background-color: #f0b429;
}

.gv-atc-btn-buy-now:hover {
	background-color: #d99f1f;
}

.gv-atc-btn-whatsapp {
	color: #ffffff;
	background-color: #25d366;
}

.gv-atc-btn-whatsapp:hover {
	background-color: #1ea952;
}

.gv-atc-btn-call {
	color: #ffffff;
	background-color: #333333;
}

.gv-atc-btn-call:hover {
	background-color: #1a1a1a;
}

/* Link-type buttons (WhatsApp/Call) render as <a>, not <button>, but share
 * the same .gv-atc-btn base class — text-decoration needs an explicit
 * reset since anchors default to underlined text. */
a.gv-atc-btn {
	text-decoration: none;
}

.gv-atc-btn:disabled,
.gv-atc-btn.is-disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

.gv-atc-btn-inner {
	transition: opacity 0.1s ease-out;
}

.gv-atc-btn.is-loading .gv-atc-btn-inner {
	opacity: 0;
}

/*
 * The spinner overlays the button (rather than sitting inline) so the
 * button's width never shifts when loading starts/stops, and the label
 * is always guaranteed to reappear (opacity toggle only, never removed
 * from the DOM) once loading ends — even if a response fails oddly.
 */
.gv-atc-spinner {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
}

.gv-atc-btn.is-loading .gv-atc-spinner {
	display: flex;
}

.gv-atc-spinner::after {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: gv-atc-spin 0.7s linear infinite;
}

@keyframes gv-atc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Ripple (purely decorative, never intercepts input) */
.gv-atc-ripple {
	position: absolute;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	transform: scale(0);
	animation: gv-atc-ripple 0.5s ease-out;
	pointer-events: none;
}

@keyframes gv-atc-ripple {
	to {
		transform: scale(3);
		opacity: 0;
	}
}

/* Messages */
.gv-atc-message {
	width: 100%;
	font-size: 13px;
	line-height: 1.4;
	margin-top: 6px;
	min-height: 0;
}

.gv-atc-message.gv-atc-message-success {
	color: #1e7e34;
}

.gv-atc-message.gv-atc-message-error {
	color: #d63638;
}

.gv-atc-unavailable,
.gv-atc-editor-placeholder {
	padding: 12px 16px;
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	color: #666;
	font-size: 13px;
}

/* On narrow screens, let long-content cells wrap to full width rather than
 * overflowing, while still respecting the user's chosen row/column. */
@media (max-width: 767px) {
	.gv-atc-cell {
		max-width: 100%;
	}
}

/* RTL support */
body.rtl .gv-atc-qty-input {
	direction: ltr;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.gv-atc-btn,
	.gv-atc-qty-minus,
	.gv-atc-qty-plus,
	.gv-atc-spinner::after,
	.gv-atc-ripple {
		animation: none !important;
		transition: none !important;
	}
}