/*!
Theme Name: Aroma Notes Child
Theme URI: https://wahban.com
Description: Premium custom WooCommerce theme optimized for performance and user experience.
Author: Mohamed Wahban
Author URI: https://wahban.com
Template: aromanotes
Version: 1.0.0
Text Domain: aromanotes
*/

/* Add your custom style here */

/*
 * Checkout: City/Area (select2) dropdown fix (2026-10-14)
 * The theme's pill input radius (--ui-radius-sm: 128px) is meant for the
 * closed <select>/<input> boxes, not for an open select2 popup. Without an
 * explicit override the open dropdown inherits that huge radius and reads
 * as a misshapen blob overlapping the fields below it. Force a normal,
 * contained popup instead (uses the theme's existing card-radius token).
 */
.select2-container {
	max-width: 100%;
}
.select2-container .select2-dropdown {
	border-radius: var(--wc-card-border-radius, 8px) !important;
	border: 1px solid var(--ui-border-color, rgba(111, 71, 38, .18)) !important;
	box-shadow: 0 8px 24px rgba(21, 21, 21, .12) !important;
	background-color: #fff !important;
	overflow: hidden;
	z-index: 9999;
}
.select2-container .select2-results {
	max-height: 280px;
	overflow-y: auto;
}
.select2-container .select2-search--dropdown {
	padding: 8px;
}
.select2-container .select2-search--dropdown .select2-search__field {
	border-radius: var(--wc-form-border-radius, 4px) !important;
	border: 1px solid var(--ui-border-color, rgba(111, 71, 38, .18));
	padding: 6px 10px;
}

/*
 * Cart/checkout "(includes X VAT)" note: smaller and quieter than the
 * total itself, it's a bookkeeping detail, not the headline number. The
 * price amount is wrapped in its own <span class="woocommerce-Price-amount">
 * with its own font-size elsewhere, so it has to be targeted explicitly -
 * setting font-size only on .includes_tax doesn't reach it.
 */
.includes_tax,
.includes_tax .woocommerce-Price-amount {
	font-size: 11px !important;
}
.includes_tax {
	opacity: .65;
	line-height: 1.3;
	/* Block + right-align instead of inline-block: the phrase is long
	   enough to wrap, and inline-block wrapping mid-phrase ("(includes" on
	   one line, the amount on the next) read as broken. A full line below
	   the total wraps cleanly instead. */
	display: block;
	text-align: right;
	margin-top: 2px;
}

/*
 * Paymob "Card Information" widget: the dark frame around the card fields
 * is WooCommerce's own .payment_box wrapper, not Paymob's SDK (confirmed
 * via devtools) - #222 at 0% alpha instead of the `transparent` keyword,
 * since the SDK's own JS appears to treat a literal transparent/0-alpha
 * color differently than it treats the `transparent` keyword and this one
 * doesn't break its rendering.
 */
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
	background-color: #22222200;
	color: #fff;
}
#paymob-elements {
	margin: 16px 0;
}