/* ==========================================================================
   Aroma Product Variant Buttons
   Styles the WooCommerce variations table to match the reference layout and
   overrides Elementor kit button/typography rules.
   ========================================================================== */

/* ==========================================================================
   WooCommerce native .price display — variation price + initial product price
   Specificity target: beat WC's 0,3,2 rule on div.product span.price
   ========================================================================== */

/* ── Container ────────────────────────────────────────────────────────────── */
/* .woocommerce-variation-price .price → 0,4,2                               */
/* body.woocommerce div.product p.price / span.price → 0,3,3                 */

body.woocommerce div.product .woocommerce-variation-price .price,
body.woocommerce div.product p.price,
body.woocommerce div.product span.price {
	display:     flex;
	align-items: baseline;
	flex-wrap:   wrap;
	gap:         12px;       /* gap-3 */
	color:       inherit;    /* kill WC's #958e09 */
	font-size:   inherit;    /* kill WC's 1.25em  */
}

/* ── Sale price (ins) ─────────────────────────────────────────────────────── */

body.woocommerce div.product .woocommerce-variation-price .price ins,
body.woocommerce div.product p.price ins,
body.woocommerce div.product span.price ins {
	font-size:       22px;
	font-weight:     900;
	color:           #1660aa;
	line-height:     1.2;
	text-decoration: none;   /* browsers underline <ins> by default */
}

@media ( min-width: 768px ) {
	body.woocommerce div.product .woocommerce-variation-price .price ins,
	body.woocommerce div.product p.price ins,
	body.woocommerce div.product span.price ins {
		font-size: 30px;
	}
}

/* ── Regular price (del) ──────────────────────────────────────────────────── */
/* WooCommerce also applies opacity:0.5 to del — reset that here.            */

body.woocommerce div.product .woocommerce-variation-price .price del,
body.woocommerce div.product p.price del,
body.woocommerce div.product span.price del {
	font-size:       13px;
	font-weight:     400;
	color:           #9ca3af;  /* text-gray-400 */
	opacity:         1;        /* override WC's 0.5 */
	text-decoration: line-through;
	line-height:     1.25;
}

@media ( min-width: 768px ) {
	body.woocommerce div.product .woocommerce-variation-price .price del,
	body.woocommerce div.product p.price del,
	body.woocommerce div.product span.price del {
		font-size: 20px;
	}
}

/* ── Simple / variable "from" price (no ins/del, bare amount) ─────────────── */

body.woocommerce div.product .woocommerce-variation-price .price > .woocommerce-Price-amount,
body.woocommerce div.product p.price > .woocommerce-Price-amount,
body.woocommerce div.product span.price > .woocommerce-Price-amount {
	font-size:   22px;
	font-weight: 900;
	color:       #1660aa;
	line-height: 1.2;
}

@media ( min-width: 768px ) {
	body.woocommerce div.product .woocommerce-variation-price .price > .woocommerce-Price-amount,
	body.woocommerce div.product p.price > .woocommerce-Price-amount,
	body.woocommerce div.product span.price > .woocommerce-Price-amount {
		font-size: 30px;
	}
}

/* ── Strip WC colour/size overrides on inner amount spans ─────────────────── */

body.woocommerce div.product .price .woocommerce-Price-amount,
body.woocommerce div.product .price .woocommerce-Price-currencySymbol {
	color:       inherit;
	font-size:   inherit;
	font-weight: inherit;
}

/* ── Variations table → block layout ─────────────────────────────────────── */

form.variations_form table.variations,
form.variations_form table.variations tbody {
	display: block;
	width: 100%;
	border: none;
	background: transparent;
}

form.variations_form table.variations {
	margin-bottom: 1.5rem;
}

form.variations_form table.variations tr {
	display: block;
	margin-bottom: 1rem;  /* mb-6 */
}

form.variations_form table.variations tr:last-child {
	margin-bottom: 0;
}

form.variations_form table.variations td {
	display: block;
	padding: 0;
	border: none;
	background: transparent;
}

/* ── Attribute label ──────────────────────────────────────────────────────── */
/* Variations table uses <th class="label"> — reset browser/WC th defaults.  */

form.variations_form table.variations th.label {
	display:              block;
	margin-bottom:        0.75rem;   /* mb-3 */
	padding-left:         0;
	padding-right:        0;
	padding-inline-start: 0;
	padding-inline-end:   0;
	background:           transparent;
	background-color:     transparent;
	border:               none;
	text-align:           left;
}

form.variations_form table.variations th.label label {
	display:     block;
	margin:      0;
	font-weight: 700;
	color:       #111827;   /* text-gray-900 */
	font-size:   14px;      /* text-[14px] */
	cursor:      default;
}

@media ( min-width: 768px ) {
	form.variations_form table.variations th.label label {
		font-size: 20px;    /* md:text-[20px] */
	}
}

/* ── Toast notification ───────────────────────────────────────────────────── */

.apv-toast {
	position:        fixed;
	bottom:          24px;
	left:            50%;
	transform:       translateX( -50% ) translateY( 12px );
	z-index:         99999;
	padding:         12px 20px;
	border-radius:   8px;
	font-size:       14px;
	font-weight:     500;
	line-height:     1.4;
	color:           #ffffff;
	white-space:     nowrap;
	pointer-events:  none;
	opacity:         0;
	transition:      opacity 0.25s ease, transform 0.25s ease;
}

.apv-toast--success { background: #1660aa; }
.apv-toast--error   { background: #dc2626; }

.apv-toast--visible {
	opacity:   1;
	transform: translateX( -50% ) translateY( 0 );
}

/* ── Hide original variations_button (replaced by [aroma_add_to_cart_actions]) */

.woocommerce-variation-add-to-cart {
	display: none !important;
}

/* ── Hide "Clear" link ───────────────────────────────────────────────────── */

.reset_variations {
	display: none !important;
}

/* ── Hide WooCommerce variation price (displayed separately via shortcode) ── */

.woocommerce-variation-price {
	display: none !important;
}

/* ── Add to Cart button ──────────────────────────────────────────────────── */
/* Outlined blue — border-[#1660aa] text-[#1660aa] hover:bg-[#f0f7ff]       */

body.woocommerce div.product form.cart .single_add_to_cart_button {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	gap:              6px;              /* gap-1.5 */
	height:           48px;             /* h-[48px] */
	padding:          0 8px;            /* px-2 */
	border-radius:    1rem;             /* rounded-2xl */
	border:           2px solid #1660aa;
	border-style:     solid;
	border-width:     2px;
	border-color:     #1660aa;
	background:       transparent;
	background-color: transparent;
	color:            #1660aa;
	font-size:        14px;
	font-weight:      700;
	white-space:      nowrap;
	flex-shrink:      0;
	transition:       background-color 0.15s ease;
}

body.woocommerce div.product form.cart .single_add_to_cart_button:hover:not( :disabled ):not( .disabled ) {
	background:       #f0f7ff;
	background-color: #f0f7ff;
	color:            #1660aa;
	border-color:     #1660aa;
}

body.woocommerce div.product form.cart .single_add_to_cart_button.loading,
body.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
body.woocommerce div.product form.cart .single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor:  not-allowed;
}

@media ( min-width: 768px ) {
	body.woocommerce div.product form.cart .single_add_to_cart_button {
		height:    56px;
		padding:   0 12px;
		font-size: 16px;
		gap:       8px;
	}
}

@media ( min-width: 1024px ) {
	body.woocommerce div.product form.cart .single_add_to_cart_button {
		font-size: 18px;
	}
}

/* ── Buy Now button ──────────────────────────────────────────────────────── */
/* Filled blue — bg-[#1660aa] text-white hover:bg-[#104375] hover:shadow-lg */

body.woocommerce div.product form.cart .apv-buy-now-btn {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	gap:              6px;              /* gap-1.5 */
	height:           48px;             /* h-[48px] */
	padding:          0 8px;            /* px-2 */
	border-radius:    1rem;             /* rounded-2xl */
	border:           2px solid #1660aa;
	border-style:     solid;
	border-width:     2px;
	border-color:     #1660aa;
	background:       #1660aa;
	background-color: #1660aa;
	color:            #ffffff;
	font-size:        14px;
	font-weight:      700;
	white-space:      nowrap;
	flex-shrink:      0;
	transition:       background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

body.woocommerce div.product form.cart .apv-buy-now-btn:hover:not( :disabled ) {
	background:       #104375;
	background-color: #104375;
	border-color:     #104375;
	color:            #ffffff;
	box-shadow:       0 10px 15px -3px rgba( 0, 0, 0, .1 ), 0 4px 6px -4px rgba( 0, 0, 0, .1 );
	transform:        translateY( -2px );
}

body.woocommerce div.product form.cart .apv-buy-now-btn:disabled {
	opacity:    0.45;
	cursor:     not-allowed;
	transform:  none;
	box-shadow: none;
}

@media ( min-width: 768px ) {
	body.woocommerce div.product form.cart .apv-buy-now-btn {
		height:    56px;
		padding:   0 12px;
		font-size: 16px;
		gap:       8px;
	}
}

@media ( min-width: 1024px ) {
	body.woocommerce div.product form.cart .apv-buy-now-btn {
		font-size: 18px;
	}
}

/* ==========================================================================
   [aroma_add_to_cart_actions] portal — quantity + buttons outside the form
   ========================================================================== */

/* ── Outer wrapper ────────────────────────────────────────────────────────── */

.apv-actions {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         12px;
}

/* ── Quantity stepper ─────────────────────────────────────────────────────── */

.apv-qty-control {
	display:       flex;
	align-items:   center;
	height:        48px;
	border:        2px solid #e5e7eb;  /* border-gray-200 */
	border-radius: 1rem;               /* rounded-2xl */
	background:    #ffffff;
	width:         100%;               /* w-full */
	flex-shrink:   0;
	overflow:      hidden;
}

@media ( min-width: 640px ) {
	.apv-qty-control { width: 110px; } /* sm:w-[110px] */
}

@media ( min-width: 768px ) {
	.apv-qty-control { height: 56px; } /* md:h-[56px] */
}

body .apv-qty-control .apv-qty-btn {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            40px;            /* w-10 */
	height:           100%;
	padding:          0;
	margin:           0;
	border:           none;
	border-style:     none;
	border-width:     0;
	border-radius:    0;
	background:       transparent;
	background-color: transparent;
	color:            #6b7280;         /* text-gray-500 */
	font-size:        inherit;
	font-weight:      inherit;
	font-style:       normal;
	text-decoration:  none;
	text-transform:   none;
	letter-spacing:   normal;
	box-shadow:       none;
	cursor:           pointer;
	flex-shrink:      0;
	transition:       color 0.15s ease, background-color 0.15s ease;
}

body .apv-qty-control .apv-qty-btn:hover {
	color:            #1660aa;         /* hover:text-[#1660aa] */
	background:       #f9fafb;         /* hover:bg-gray-50 */
	background-color: #f9fafb;
}

.apv-qty {
	flex:            1;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border-left:     1px solid #f3f4f6; /* border-x border-gray-100 */
	border-right:    1px solid #f3f4f6;
	font-weight:     700;               /* font-bold */
	color:           #1f2937;           /* text-gray-800 */
	font-size:       16px;
	user-select:     none;
}

@media ( min-width: 768px ) {
	.apv-qty { font-size: 20px; }      /* md:text-[20px] */
}

/* ── Buttons row ──────────────────────────────────────────────────────────── */

.apv-actions__buttons {
	display:    flex;
	flex:       1;
	min-width:  0;
	gap:        12px;
}

/* ── Add to Cart (outlined blue) ──────────────────────────────────────────── */
/* Selector 0,3,1 — beats Elementor kit's default button background rule.    */

body .apv-actions .apv-actions__add-to-cart {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	gap:              6px;
	flex:             1;
	min-width:        0;
	height:           48px;
	padding:          0 8px;
	border-radius:    1rem;
	border:           2px solid #1660aa;
	border-style:     solid;
	border-width:     2px;
	border-color:     #1660aa;
	background:       #ffffff;
	background-color: #ffffff;
	color:            #1660aa;
	font-size:        14px;
	font-weight:      700;
	font-family:      inherit;
	font-style:       normal;
	text-decoration:  none;
	text-transform:   none;
	white-space:      nowrap;
	cursor:           pointer;
	box-shadow:       none;
	transition:       background-color 0.15s ease;
}

body .apv-actions .apv-actions__add-to-cart:hover:not( :disabled ) {
	background:       #f0f7ff;
	background-color: #f0f7ff;
	color:            #1660aa;
}

body .apv-actions .apv-actions__add-to-cart:disabled {
	opacity: 0.45;
	cursor:  not-allowed;
}

@media ( min-width: 768px ) {
	body .apv-actions .apv-actions__add-to-cart {
		height:    56px;
		padding:   0 12px;
		font-size: 16px;
		gap:       8px;
	}
}

@media ( min-width: 1024px ) {
	body .apv-actions .apv-actions__add-to-cart { font-size: 18px; }
}

/* ── Buy Now (filled blue) ────────────────────────────────────────────────── */
/* Selector 0,3,1 — beats Elementor kit's default button background rule.    */

body .apv-actions .apv-actions__buy-now {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	gap:              6px;
	flex:             1.2;
	min-width:        0;
	height:           48px;
	padding:          0 8px;
	border-radius:    1rem;
	border:           2px solid #1660aa;
	border-style:     solid;
	border-width:     2px;
	border-color:     #1660aa;
	background:       #1660aa;
	background-color: #1660aa;
	color:            #ffffff;
	font-size:        14px;
	font-weight:      700;
	font-family:      inherit;
	font-style:       normal;
	text-decoration:  none;
	text-transform:   none;
	white-space:      nowrap;
	cursor:           pointer;
	box-shadow:       none;
	transition:       background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

body .apv-actions .apv-actions__buy-now:hover:not( :disabled ) {
	background:       #104375;
	background-color: #104375;
	border-color:     #104375;
	color:            #ffffff;
	box-shadow:       0 10px 15px -3px rgba( 0, 0, 0, .1 ), 0 4px 6px -4px rgba( 0, 0, 0, .1 );
	transform:        translateY( -2px );
}

body .apv-actions .apv-actions__buy-now:disabled {
	opacity:    0.45;
	cursor:     not-allowed;
	transform:  none;
	box-shadow: none;
}

@media ( min-width: 768px ) {
	body .apv-actions .apv-actions__buy-now {
		height:    56px;
		padding:   0 12px;
		font-size: 16px;
		gap:       8px;
	}
}

@media ( min-width: 1024px ) {
	body .apv-actions .apv-actions__buy-now { font-size: 18px; }
}

/* ── Button group ─────────────────────────────────────────────────────────── */

.apv-buttons {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.5rem;   /* gap-2 */
}

/* ── Button — normal state ───────────────────────────────────────────────── */
/*
 * Selector specificity: 0,4,2 — beats Elementor's generated rule:
 *   .elementor-{id} .elementor-element.elementor-element-{id} .cart button
 * which is 0,4,1.
 *
 * WooCommerce always renders the variation form as:
 *   <form class="variations_form cart" ...>
 * so stacking both classes on `form` is safe and precise.
 */

body.woocommerce form.variations_form.cart .apv-buttons button.apv-btn {
	display:              inline-block;
	margin:               0;
	margin-inline-start:  0;
	padding:              0.5rem 0.75rem;  /* py-2 px-3 */
	border-radius:        0.75rem;         /* rounded-xl */
	border:               2px solid #e5e7eb;
	border-style:         solid;
	border-width:         2px;
	border-color:         #e5e7eb;         /* border-gray-200 */
	background:           transparent;
	background-color:     transparent;
	color:                #374151;         /* text-gray-700 */
	font-size:            13px;            /* text-[13px] */
	font-weight:          500;
	font-family:          inherit;
	font-style:           normal;
	line-height:          1.4;
	text-decoration:      none;
	text-transform:       none;
	letter-spacing:       normal;
	cursor:               pointer;
	box-shadow:           none;
	outline:              none;
	transition:           border-color 0.15s, color 0.15s;
	vertical-align:       middle;
}

@media ( min-width: 768px ) {
	body.woocommerce form.variations_form.cart .apv-buttons button.apv-btn {
		font-size: 20px;   /* md:text-[20px] */
	}
}

/* ── Button — hover ──────────────────────────────────────────────────────── */

body.woocommerce form.variations_form.cart .apv-buttons button.apv-btn:hover {
	border:           2px solid #1660aa;  /* hover:border-[#1660aa] */
	border-style:     solid;
	border-width:     2px;
	border-color:     #1660aa;
	background:       transparent;
	background-color: transparent;
	color:            #1660aa;            /* hover:text-[#1660aa] */
	text-decoration:  none;
	box-shadow:       none;
}

/* ── Button — active / selected ──────────────────────────────────────────── */

body.woocommerce form.variations_form.cart .apv-buttons button.apv-btn[aria-pressed="true"] {
	border:           2px solid #1660aa;
	border-style:     solid;
	border-width:     2px;
	border-color:     #1660aa;
	background:       transparent;
	background-color: transparent;
	color:            #1660aa;
	box-shadow:       none;
}

/* ── Button — focus ──────────────────────────────────────────────────────── */

body.woocommerce form.variations_form.cart .apv-buttons button.apv-btn:focus,
body.woocommerce form.variations_form.cart .apv-buttons button.apv-btn:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 2px rgba( 22, 96, 170, 0.25 );
}

/* ── Button — disabled / unavailable ─────────────────────────────────────── */

body.woocommerce form.variations_form.cart .apv-buttons button.apv-btn:disabled {
	border-color:     #e5e7eb;
	color:            #374151;
	background:       transparent;
	background-color: transparent;
	opacity:          0.35;
	cursor:           not-allowed;
	pointer-events:   none;
}