/* ==========================================================================
   Side Cart Plugin – Main Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Root & Toggle
   -------------------------------------------------------------------------- */

/* Root container for the cart toggle and panel. */
.devkorneff-side-cart {
	position: relative;
	z-index: 9990;
}

/* --------------------------------------------------------------------------
   Spinner Overlay
   -------------------------------------------------------------------------- */
/* Overlay that sits above the side-cart panel during add/remove actions. */
#devkorneff-side-cart-spinner-overlay.devkorneff-side-cart__spinner-overlay {
	position: fixed;
	top: 0;
	right: 0;
	width: 340px;
	max-width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.65);
	z-index: 10000;
	pointer-events: none;

	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.35s ease-out;
	transform: translateX(100%);
}

/* Spinner shown only while AJAX add/remove is in-flight. */
#devkorneff-side-cart-spinner-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Keep the spinner aligned with the panel slide-in/out. */
#devkorneff-side-cart-panel.is-open ~ #devkorneff-side-cart-spinner-overlay {
	transform: translateX(0);
}

.devkorneff-side-cart__spinner {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 4px solid rgba(0, 0, 0, 0.14);
	border-top-color: #111111;
	animation: devkorneff-side-cart-spin 0.8s linear infinite;
}

@keyframes devkorneff-side-cart-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Header/trigger button: icon + item count. */
.devkorneff-side-cart__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #ffffff;
	color: #111111;
	font-size: 0.9rem;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* Icon containers in toggle and panel header. */
.devkorneff-side-cart__toggle-icon,
.devkorneff-side-cart__header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Side cart toggle: tilt cart icon on hover (header icon unchanged). */
.devkorneff-side-cart__toggle .devkorneff-side-cart__toggle-icon {
	transition: transform 0.2s ease;
}

.devkorneff-side-cart__toggle:hover .devkorneff-side-cart__toggle-icon,
.devkorneff-side-cart__toggle:focus-visible .devkorneff-side-cart__toggle-icon {
	transform: rotate(-10deg);
}

/* SVG icon sizing. */
.devkorneff-side-cart__icon {
	width: 25px;
	height: 25px;
	vertical-align: middle;
}

/* Badge showing number of items in cart. */
.devkorneff-side-cart__toggle-count {
	min-width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background: #111111;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   2. Panel
   -------------------------------------------------------------------------- */

/* Slide-out panel. Off-screen by default; slides in when .is-open. */
.devkorneff-side-cart__panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 340px;
	max-width: 100%;
	height: 100%;
	background: #ffffff;
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.16);
	transform: translateX(100%);
	transition: transform 0.35s ease-out;
	display: flex;
	flex-direction: column;
	z-index: 9995;
}

.devkorneff-side-cart__panel.is-open {
	transform: translateX(0);
}

/* Disable transition while finger-dragging the panel. */
.devkorneff-side-cart__panel.devkorneff-side-cart__panel--swiping {
	transition: none !important;
}

/* --------------------------------------------------------------------------
   3. Panel Header
   -------------------------------------------------------------------------- */

/* Header layout: icon, title, close button. */
.devkorneff-side-cart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid #f0f0f0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Larger icon in panel header. */
.devkorneff-side-cart__header-icon .devkorneff-side-cart__icon {
	width: 25px;
	height: 25px;
}

/* Panel title ("Cart"). */
.devkorneff-side-cart__title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: #111111;
}

/* Close (X) button in panel header. */
.devkorneff-side-cart__close {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-left: auto;
	padding: 0;
	background: #ffffff;
	color: #111111;
	border: 2px solid #111111;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.devkorneff-side-cart__close:hover,
.devkorneff-side-cart__close:focus-visible {
	background-color: #111111;
	border-color: #111111;
	color: #ffffff;
}

.devkorneff-side-cart__close:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 2px;
}

.devkorneff-side-cart__close:hover:focus-visible {
	outline-color: #ffffff;
}

.devkorneff-side-cart__close-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	color: inherit;
}

/* Inline SVG X — same geometry in Chrome & Safari (text × had mismatched font metrics). */
.devkorneff-side-cart__close-svg {
	display: block;
	width: 19px;
	height: 19px;
	flex-shrink: 0;
}

/* Match circle border (2px): default SVG stroke scales down with the icon; keep stroke at 2px like the ring. */
.devkorneff-side-cart__close-svg-path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2px;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

/* --------------------------------------------------------------------------
   4. Panel Body
   -------------------------------------------------------------------------- */

/* Scrollable area for cart items. */
.devkorneff-side-cart__body {
	padding: 0.75rem 1.25rem;
	overflow-y: auto;
}

/* Empty cart message. */
.devkorneff-side-cart__empty {
	margin: 0.75rem 0;
	color: #666666;
	font-size: 0.9rem;
}

/* List of cart items. */
.devkorneff-side-cart__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Single cart item. Transitions used for add/remove animations. */
.devkorneff-side-cart__item {
	padding: 0.5rem 0;
	border-bottom: 1px solid #f4f4f4;
	max-height: 200px;
	overflow: visible;
	transition: max-height 0.35s ease-out, opacity 0.35s ease-out, padding 0.35s ease-out, border-width 0.35s ease-out, margin 0.35s ease-out;
}

/* Shrink animation when removing an item. */
.devkorneff-side-cart__item--removing {
	max-height: 0 !important;
	overflow: hidden;
	opacity: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-bottom-width: 0;
	margin-top: -0.75rem;
}

/* Fade-in animation for newly added item. */
.devkorneff-side-cart__item--new {
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}

.devkorneff-side-cart__item--new.is-expanded {
	opacity: 1;
}

/* Item layout: thumbnail + details. */
.devkorneff-side-cart__item-inner {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

/* Product thumbnail (48×48). */
.devkorneff-side-cart__item-thumb {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 4px;
	background: #f4f4f4;
}

.devkorneff-side-cart__item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.devkorneff-side-cart__item-thumb a {
	display: block;
	line-height: 0;
}

/* Product name, price, quantity, remove. */
.devkorneff-side-cart__item-details {
	flex: 1;
	min-width: 0;
}

/* Name and price on one line. */
.devkorneff-side-cart__item-main {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
}

/* Product name (linked). */
.devkorneff-side-cart__item-name {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.2;
	color: #111111;
	text-decoration: none;
	text-align: left;
}

.devkorneff-side-cart__item-name:hover {
	text-decoration: underline;
}

/* Item price. */
.devkorneff-side-cart__item-price {
	font-size: 0.9rem;
	color: #111111;
}

/* Quantity and remove link. */
.devkorneff-side-cart__item-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.25rem;
	font-size: 0.8rem;
	color: #555555;
}

/* Remove item button. */
.devkorneff-side-cart__item-remove {
	margin-left: auto;
	border: 0;
	background: transparent;
	color: #c0392b;
	cursor: pointer;
	font-size: 0.8rem;
	transition: color 0.2s ease, background-color 0.2s ease, text-decoration 0.2s ease;
}

.devkorneff-side-cart__item-remove:hover {
	color: #a0281a;
	text-decoration: underline;
	background-color: rgba(192, 57, 43, 0.1);
}

/* --------------------------------------------------------------------------
   5. Panel Footer
   -------------------------------------------------------------------------- */

/* Footer: coupons, totals, actions. */
.devkorneff-side-cart__footer {
	padding: 1rem 1.25rem;
	border-top: 1px solid #f0f0f0;
	border-bottom: 0;
	margin-top: auto;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

/* Stored coupons list (for saved coupons feature). */
.devkorneff-side-cart__stored-coupons {
	margin-bottom: 0.75rem;
	
}

.devkorneff-side-cart__stored-coupons-title {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.devkorneff-side-cart__stored-coupons-list {
	
	list-style: none;
	margin: 0;
	padding: 0;
}

.devkorneff-side-cart__stored-coupons-list li {
	margin-bottom: 0.25rem;
}

.devkorneff-side-cart .devkorneff-side-cart__apply-stored-coupon.button {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	text-align: left;
	padding: 0.5rem 0.6rem;
	text-transform: uppercase;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1;
	background-color: #5a5a5a;
	border: 1px solid #4a4a4a;
	color: #ffffff;
	border-radius: 4px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.devkorneff-side-cart .devkorneff-side-cart__apply-stored-coupon.button:hover {
	background-color: #6a6a6a;
	border-color: #5a5a5a;
	color: #ffffff;
}

/* Coupon input and apply button. */
.devkorneff-side-cart__coupon {
	display: flex;
	gap: 0.35rem;
	margin-bottom: 0.75rem;
}

.devkorneff-side-cart__coupon-input {
	flex: 1;
	min-width: 0;
	padding: 0.4rem 0.5rem;
	font-size: 0.9rem;
	border: 1px solid #ddd;
	border-radius: 2px;
}

.devkorneff-side-cart .devkorneff-side-cart__coupon-apply.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0.4rem 0.6rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	font-weight: 400 !important;
	line-height: 1;
	background-color: #5a5a5a;
	border: 1px solid #4a4a4a;
	color: #ffffff;
	border-radius: 4px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.devkorneff-side-cart .devkorneff-side-cart__coupon-apply.button:hover {
	background-color: #6a6a6a;
	border-color: #5a5a5a;
	color: #ffffff;
}

.devkorneff-side-cart__apply-stored-coupon.button {
	font-weight: 500 !important;
	font-size: .75em !important;
}

/* Success and error notices in panel. */
.devkorneff-side-cart__notices {
	margin-bottom: 0.5rem;
}

.devkorneff-side-cart__notice--success {
	color: #0a6e0a;
	font-size: 0.85rem;
	margin: 0 0 0.25rem;
}

.devkorneff-side-cart__notice--error {
	color: #b32d2e;
	font-size: 0.85rem;
	margin: 0 0 0.25rem;
}

/* Subtotal, totals, etc. */
.devkorneff-side-cart__totals {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
}

.devkorneff-side-cart__totals-lines {
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
}

.devkorneff-side-cart__totals-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
}

.devkorneff-side-cart__totals-label {
	flex: 1 1 auto;
	min-width: 0;
}

.devkorneff-side-cart__totals-value {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
}

.devkorneff-side-cart__actions {
	display: flex;
	gap: 0.5rem;
	text-transform: uppercase;
}

/* View Cart / Checkout button styling. */
.devkorneff-side-cart__actions .button,
.devkorneff-side-cart__actions a.button:link,
.devkorneff-side-cart__actions a.button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	text-align: center;
	font-weight: 600;
	font-size: 0.9em;
	line-height: 1;
	padding: 0.75rem 1rem;
	border-radius: 5px;
	color: #ffffff;
	background-color: #252525;
	border: 1px solid #232323;
	text-decoration: none;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.devkorneff-side-cart .devkorneff-side-cart__actions .button:hover,
.devkorneff-side-cart .devkorneff-side-cart__actions a.button:hover {
	color: #ffffff;
	background-color: #555555;
	border-color: #555555;
}

/* General notice text in panel. */
.devkorneff-side-cart__notice {
	font-size: 0.85rem;
	color: #666666;
}

/* ==========================================================================
   Add-to-Cart Shortcodes
   ========================================================================== */

/* Hide side cart on cart and checkout pages (use main cart/checkout UI there). */
.woocommerce-cart .devkorneff-side-cart,
.woocommerce-checkout .devkorneff-side-cart {
	display: none !important;
}

/* When WooCommerce appends its "View cart" link after AJAX add-to-cart,
 * hide it inside our simple button wrapper so the primary CTA stays clean. */
.devkorneff-add-to-cart-simple .added_to_cart.wc-forward {
	display: none !important;
}

/* Simple product shortcode [devkorneff_add_to_cart]: dark button style.
 * Higher specificity to override Oxygen .woocommerce ul.products li.product .button:hover (red). */
div.devkorneff-add-to-cart-simple a.devkorneff-add-to-cart-button.add_to_cart_button.button {
	color: #ffffff;
	background-color: #252525;
	border: 1px solid #232323;
	padding: 0.75rem 1rem;
	border-radius: 5px;
	text-decoration: none;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

div.devkorneff-add-to-cart-simple a.devkorneff-add-to-cart-button.add_to_cart_button.button:hover {
	color: #ffffff;
	background-color: #3a3a3a;
	border-color: #3a3a3a;
}

/* Variable product shortcode [devkorneff_add_to_cart_variable]: dark button style.
 * Higher specificity to override Oxygen .woocommerce .oxy-woo-element div.product form.cart button.button.alt:hover (red). */
form.devkorneff-side-cart-variations-form.cart.variations_form button.single_add_to_cart_button.button.alt.devkorneff-add-to-cart-button {
	color: #ffffff;
	background-color: #252525;
	border: 1px solid #232323;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

form.devkorneff-side-cart-variations-form.cart.variations_form button.single_add_to_cart_button.button.alt.devkorneff-add-to-cart-button:hover {
	color: #ffffff;
	background-color: #3a3a3a;
	border-color: #3a3a3a;
}

/* Demo button shortcode [devkorneff_add_demo]: dark button style.
 * Higher specificity to override Oxygen .woocommerce button.button:hover (red). */
form.devkorneff-add-to-cart-variable.devkorneff-add-demo button.devkorneff-add-to-cart-button {
	color: #ffffff;
	background-color: #252525;
	border: 1px solid #232323;
	padding: 0.75rem 1rem;
	border-radius: 5px;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

form.devkorneff-add-to-cart-variable.devkorneff-add-demo button.devkorneff-add-to-cart-button:hover {
	color: #ffffff;
	background-color: #3a3a3a;
	border-color: #3a3a3a;
}

/* Simple product demo shortcode [devkorneff_add_demo_simple]: match variable demo / add-to-cart style.
 * Higher specificity to override Oxygen .woocommerce button.button:hover (red). */
div.devkorneff-add-demo-simple a.devkorneff-add-to-cart-button.button:not(.devkorneff-demo-link) {
	color: #ffffff;
	background-color: #252525;
	border: 1px solid #232323;
	padding: 0.75rem 1rem;
	border-radius: 5px;
	text-decoration: none;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

div.devkorneff-add-demo-simple a.devkorneff-add-to-cart-button.button:not(.devkorneff-demo-link):hover {
	color: #ffffff;
	background-color: #3a3a3a;
	border-color: #3a3a3a;
}

/* Variable shortcode: hide WooCommerce's variation price display (unless show_price is set). */
.devkorneff-side-cart-variations-form:not(.devkorneff-show-price) .woocommerce-variation-price {
	display: none !important;
}