/* Direct Checkout Button — "choose variation" popup.
   Colours / radii are driven by CSS custom properties set per-button from the
   Elementor style controls (with the fallbacks below). Layout uses flexbox.

   The popup is appended to <body>, which carries the theme/Elementor global-kit
   class (e.g. `.elementor-kit-10`). That kit styles BARE elements — `button`,
   `select`, etc. — including `background-color` and `border-radius` via global
   colour variables. Our popup uses real <button>/<select> elements, so those
   kit rules compete with ours. To make the popup fully controllable from the
   widget Style controls regardless of the host theme, every var-driven visual
   property below is marked `!important` (the value still comes from the user's
   control via the custom property — `!important` only wins the cascade). */

html.hw-dcb-pop-open {
	overflow: hidden;
}

.hw-dcb-pop-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: var( --hw-dcb-pop-overlay, rgba( 0, 0, 0, 0.6 ) ) !important;
	-webkit-tap-highlight-color: transparent;
}

.hw-dcb-pop-overlay .hw-dcb-pop {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var( --hw-dcb-pop-maxw, 440px ) !important;
	margin: 0;
	padding: 30px 24px 24px;
	background: var( --hw-dcb-pop-bg, #ffffff ) !important;
	border-radius: var( --hw-dcb-pop-radius, 16px ) !important;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.25 );
	animation: hw-dcb-pop-in 0.18s ease-out;
}

@keyframes hw-dcb-pop-in {
	from { transform: translateY( 8px ); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.hw-dcb-pop-overlay .hw-dcb-pop-close {
	position: absolute;
	top: 10px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --hw-dcb-pop-close-size, 32px ) !important;
	height: var( --hw-dcb-pop-close-size, 32px ) !important;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background: var( --hw-dcb-pop-close-bg, transparent ) !important;
	color: var( --hw-dcb-pop-close-color, #999999 ) !important;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.hw-dcb-pop-overlay .hw-dcb-pop-close:hover,
.hw-dcb-pop-overlay .hw-dcb-pop-close:focus {
	background: var( --hw-dcb-pop-close-hover-bg, rgba( 0, 0, 0, 0.06 ) ) !important;
	color: var( --hw-dcb-pop-close-hover, #333333 ) !important;
}

.hw-dcb-pop-overlay .hw-dcb-pop-body {
	display: flex;
	flex-direction: column;
}

.hw-dcb-pop-overlay .hw-dcb-pop-step {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
}

.hw-dcb-pop-overlay .hw-dcb-pop-count {
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #9aa0a6;
}

.hw-dcb-pop-overlay .hw-dcb-pop-title {
	margin: 0;
	text-align: center;
	font-size: var( --hw-dcb-pop-title-size, 20px ) !important;
	line-height: 1.3;
	font-weight: 700;
	color: var( --hw-dcb-pop-title, #111111 ) !important;
}

.hw-dcb-pop-overlay .hw-dcb-pop-select {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 12px 42px 12px 18px;
	font-size: 15px;
	line-height: 1.4;
	color: var( --hw-dcb-pop-select-text, #111111 ) !important;
	background-color: #fff !important;
	border: 1px solid var( --hw-dcb-pop-select-border, #dddddd ) !important;
	border-radius: var( --hw-dcb-pop-select-radius, 999px ) !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px;
	cursor: pointer;
}

.hw-dcb-pop-overlay .hw-dcb-pop-select:focus {
	outline: none;
	border-color: var( --hw-dcb-pop-btn-bg, #2563eb ) !important;
	box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.15 );
}

.hw-dcb-pop-overlay .hw-dcb-pop-action {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 13px 20px;
	border: 0 !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	color: var( --hw-dcb-pop-btn-text, #ffffff ) !important;
	background: var( --hw-dcb-pop-btn-bg, #2563eb ) !important;
	border-radius: var( --hw-dcb-pop-btn-radius, 999px ) !important;
	cursor: pointer;
	transition: background 0.15s ease;
}

.hw-dcb-pop-overlay .hw-dcb-pop-action:hover,
.hw-dcb-pop-overlay .hw-dcb-pop-action:focus {
	color: var( --hw-dcb-pop-btn-text-hover, #ffffff ) !important;
	background: var( --hw-dcb-pop-btn-hover, #1d4ed8 ) !important;
}

.hw-dcb-pop-overlay .hw-dcb-pop-action[hidden] {
	display: none;
}

.hw-dcb-pop-overlay .hw-dcb-pop-action:disabled {
	opacity: 0.7;
	cursor: default;
}

.hw-dcb-pop-overlay .hw-dcb-pop-loading {
	padding: 28px 0;
	text-align: center;
	color: #666;
}

@media ( max-width: 480px ) {
	.hw-dcb-pop-overlay .hw-dcb-pop {
		padding: 26px 18px 18px;
	}
}
