/*
 * DT Cart
 *
 * State model:
 *   .dtew-is-open   panel + overlay visible (drawer or modal, same markup)
 *   .dtew-is-busy   an AJAX action is in flight
 *
 * The drawer and the full-screen modal are the same DOM and the same
 * component — only .dtew-cart--slide-out vs .dtew-cart--modal, plus
 * data-position, change how .dtew-cart__panel is positioned and animated.
 * Specificity kept low (single class, occasional child combinator) so
 * Elementor's generated rules win without !important.
 */

.dtew-cart {
	--dtew-cart-icon-size: 24px;
	--dtew-cart-badge-size: 18px;
	--dtew-cart-card-gap: 8px;
	--dtew-cart-panel-w: 420px;
	--dtew-cart-thumb: 72px;
	--dtew-cart-z: 1000;

	position: relative;
	display: inline-flex;
	align-items: center;
}

.dtew-cart *,
.dtew-cart *::before,
.dtew-cart *::after {
	box-sizing: border-box;
}

.dtew-cart [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------
 * Trigger — icon or card
 * ------------------------------------------------------------- */

.dtew-cart-trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--dtew-cart-card-gap);
	background-color: var(--dtew-cart-trigger-bg, transparent);
	border: 0;
	border-radius: var(--dtew-cart-trigger-radius, 0);
	padding: var(--dtew-cart-trigger-padding, 0);
	margin: 0;
	cursor: pointer;
	color: var(--dtew-cart-trigger-color, inherit);
	font: inherit;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * Themes (Hello Elementor included) style `button:hover` / `button:focus`
 * with their own background and text colour, at a specificity that beats a
 * single class. Restating every state here — at two classes' worth of
 * specificity — is what stops the theme's colour leaking through, and
 * hands control of all three states back to the widget settings.
 *
 * :focus deliberately mirrors the NORMAL look, not hover: a clicked button
 * keeps focus, so reusing hover styles there would leave it looking
 * "stuck" hovered after the click.
 */
.dtew-cart-trigger:focus {
	background-color: var(--dtew-cart-trigger-bg, transparent);
	color: var(--dtew-cart-trigger-color, inherit);
	text-decoration: none;
}

.dtew-cart-trigger:hover {
	background-color: var(--dtew-cart-trigger-bg-hover, var(--dtew-cart-trigger-bg, transparent));
	color: var(--dtew-cart-trigger-color-hover, var(--dtew-cart-trigger-color, inherit));
	text-decoration: none;
}

/* Keyboard users still get a visible focus ring. */
.dtew-cart-trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dtew-cart-icon {
	position: relative;
	display: inline-flex;
	width: var(--dtew-cart-icon-size);
	height: var(--dtew-cart-icon-size);
}

.dtew-cart-icon svg {
	width: 100%;
	height: 100%;
}

.dtew-cart-badge {
	position: absolute;
	top: -0.4em;
	right: -0.5em;
	min-width: var(--dtew-cart-badge-size);
	height: var(--dtew-cart-badge-size);
	padding: 0 4px;
	border-radius: 999px;
	background: #e02b2b;
	color: #fff;
	font-size: calc(var(--dtew-cart-badge-size) * 0.6);
	line-height: var(--dtew-cart-badge-size);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dtew-cart-badge--hidden {
	display: none;
}

.dtew-cart-card__subtotal {
	white-space: nowrap;
}

/* ---------------------------------------------------------------
 * Overlay + panel shell
 * ------------------------------------------------------------- */

.dtew-cart__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: var(--dtew-cart-z);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.dtew-cart.dtew-is-open .dtew-cart__overlay {
	opacity: 1;
}

.dtew-cart__panel {
	position: fixed;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	z-index: calc(var(--dtew-cart-z) + 1);
	overflow-y: auto;
}

/* Slide-out: fixed width, slides in from the chosen side. */
.dtew-cart--slide-out .dtew-cart__panel {
	width: var(--dtew-cart-panel-w);
	max-width: 100%;
	transition: transform 0.25s ease;
}

.dtew-cart--slide-out[data-position='right'] .dtew-cart__panel {
	right: 0;
	transform: translateX(100%);
}

.dtew-cart--slide-out[data-position='left'] .dtew-cart__panel {
	left: 0;
	transform: translateX(-100%);
}

.dtew-cart--slide-out.dtew-is-open .dtew-cart__panel {
	transform: translateX(0);
}

/* Full-screen modal: renamed in spirit only — it's actually a centred,
   sized card (default 80% of the viewport) that floats over a dimmed
   background, like a lightbox. Size and corner radius are both
   Elementor-controllable; the drop shadow comes from the shared
   .dtew-cart__panel box-shadow control so slide-out and modal both get
   the same "floated over your content" affordance if you want it. */
.dtew-cart--modal .dtew-cart__panel {
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	width: var(--dtew-cart-modal-w, 80%);
	height: var(--dtew-cart-modal-h, 80%);
	max-width: 100vw;
	max-height: 100vh;
	border-radius: var(--dtew-cart-modal-radius, 8px);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.96);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.dtew-cart--modal.dtew-is-open .dtew-cart__panel {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.dtew-cart__panel-inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	padding: 20px;
}

.dtew-cart.dtew-is-busy .dtew-cart__panel-inner {
	opacity: 0.6;
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * Panel content
 * ------------------------------------------------------------- */

.dtew-cart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.dtew-cart__title {
	margin: 0;
	font-size: 1.2em;
}

.dtew-cart__close {
	background: none;
	border: 0;
	font-size: 1.5em;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
}

.dtew-cart__notices:empty {
	display: none;
}

.dtew-cart__notice {
	padding: 8px 12px;
	margin-bottom: 12px;
	border-radius: 4px;
	font-size: 0.9em;
	background: #f4f4f4;
}

.dtew-cart__notice--error {
	background: #fbe4e4;
	color: #8a1f1f;
}

.dtew-cart__notice--success {
	background: #e6f5e9;
	color: #1f6b34;
}

.dtew-cart__empty {
	text-align: center;
	padding: 32px 0;
}

.dtew-cart__continue {
	display: inline-block;
	margin-top: 12px;
}

.dtew-cart__items {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	flex: 1;
	overflow-y: auto;
}

.dtew-cart__item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	position: relative;
}

.dtew-cart__item-image img {
	width: var(--dtew-cart-thumb);
	height: var(--dtew-cart-thumb);
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.dtew-cart__item-details {
	flex: 1;
	min-width: 0;
}

.dtew-cart__item-name a {
	color: inherit;
	text-decoration: none;
}

.dtew-cart__item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
	gap: 12px;
}

.dtew-cart__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: var(--dtew-cart-qty-radius, 4px);
	overflow: hidden; /* keeps button/input backgrounds inside the rounded corners */
}

.dtew-cart__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--dtew-cart-qtybtn-size, 28px);
	height: var(--dtew-cart-qtybtn-size, 28px);
	background-color: var(--dtew-cart-qtybtn-bg, transparent);
	color: var(--dtew-cart-qtybtn-color, inherit);
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font-size: 1em;
	line-height: 1;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Focus mirrors the normal look so a clicked button doesn't keep the
   theme's focus colour (see the note on .dtew-cart-trigger:focus). */
.dtew-cart__qty-btn:focus {
	background-color: var(--dtew-cart-qtybtn-bg, transparent);
	color: var(--dtew-cart-qtybtn-color, inherit);
}

.dtew-cart__qty-btn:hover {
	background-color: var(--dtew-cart-qtybtn-bg-hover, var(--dtew-cart-qtybtn-bg, transparent));
	color: var(--dtew-cart-qtybtn-color-hover, var(--dtew-cart-qtybtn-color, inherit));
}

.dtew-cart__qty-input {
	width: var(--dtew-cart-qty-input-width, 36px);
	height: var(--dtew-cart-qtybtn-size, 28px);
	box-sizing: border-box;
	border: 0;
	border-left: 1px solid rgba(0, 0, 0, 0.15);
	border-right: 1px solid rgba(0, 0, 0, 0.15);
	background: none;
	color: var(--dtew-cart-qty-input-color, inherit);
	text-align: center;
	/* Suppress the native up/down spinner in every engine — our own
	   +/- buttons replace it, so the injected browser control is just
	   visual noise sitting on top of ours. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.dtew-cart__qty-input::-webkit-outer-spin-button,
.dtew-cart__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dtew-cart__item-remove {
	position: absolute;
	top: 8px;
	right: 0;
	background: none;
	border: 0;
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
	color: rgba(0, 0, 0, 0.4);
}

.dtew-cart__item-remove:hover {
	color: rgba(0, 0, 0, 0.8);
}

/* Coupon */

.dtew-cart__coupon {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.dtew-cart__coupon input {
	flex: 1;
	padding: 8px 10px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}

.dtew-cart__coupon button {
	padding: 8px 14px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #f4f4f4;
	border-radius: 4px;
	cursor: pointer;
}

.dtew-cart__applied-coupons {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	font-size: 0.9em;
}

.dtew-cart__applied-coupons li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
}

.dtew-cart__applied-coupons button {
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

/* Shipping estimate */

.dtew-cart__shipping {
	margin-bottom: 12px;
	font-size: 0.9em;
}

.dtew-cart__shipping-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.dtew-cart__shipping-form select,
.dtew-cart__shipping-form input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}

.dtew-cart__shipping-form button {
	align-self: flex-start;
	padding: 8px 14px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #f4f4f4;
	border-radius: 4px;
	cursor: pointer;
}

.dtew-cart__shipping-rate {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
}

/* Totals */

.dtew-cart__totals {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 12px;
	margin-bottom: 16px;
}

.dtew-cart__totals-row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
}

.dtew-cart__totals-row--total {
	font-weight: 700;
	font-size: 1.1em;
}

/* Actions */

.dtew-cart__actions {
	display: flex;
	gap: 10px;
	margin-top: auto;
}

.dtew-cart__view-cart,
.dtew-cart__checkout {
	flex: 1;
	text-align: center;
	padding: 12px 16px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
}

.dtew-cart__view-cart {
	border: 1px solid rgba(0, 0, 0, 0.2);
	color: inherit;
}

.dtew-cart__checkout {
	background: #1f6b34;
	color: #fff;
}

/* Editor / no-WooCommerce notice */

.dtew-editor-notice {
	padding: 12px;
	background: #fff3cd;
	border: 1px dashed #d9a300;
	font-size: 0.9em;
}

/* ---------------------------------------------------------------
 * Theme-proofing: hover / focus states
 *
 * Hello Elementor (and many themes) style `button:hover`, `button:focus`
 * and `a:hover` with their own background / text colour. Those selectors
 * out-rank a bare class, so without these the panel's buttons and links
 * pick up the theme's colours on hover. Each rule below restates the
 * element's own look at higher specificity. Elementor style controls
 * generate longer selectors, so anything set in the widget panel still
 * wins over these defaults.
 * ------------------------------------------------------------- */

.dtew-cart__close:hover,
.dtew-cart__close:focus,
.dtew-cart__applied-coupons button:hover,
.dtew-cart__applied-coupons button:focus {
	background: none;
	color: inherit;
}

.dtew-cart__item-remove:hover,
.dtew-cart__item-remove:focus {
	background: none;
}

.dtew-cart__coupon button:hover,
.dtew-cart__coupon button:focus,
.dtew-cart__shipping-form button:hover,
.dtew-cart__shipping-form button:focus {
	background: #e8e8e8;
	color: inherit;
}

.dtew-cart__view-cart:hover,
.dtew-cart__view-cart:focus {
	color: inherit;
	text-decoration: none;
}

.dtew-cart__checkout:hover,
.dtew-cart__checkout:focus {
	color: #fff;
	text-decoration: none;
}