/*
 * Custom Elementor Sticky Cart — Frontend Styles
 * Version: 1.0.0
 * ------------------------------------------------------------------ */

/* ── CSS Custom Properties ─────────────────────────────────────────── */
:root {
	--cesc-accent:       #111827;
	--cesc-accent-hover: #374151;
	--cesc-badge:        #ef4444;
	--cesc-drawer-w:     420px;
	--cesc-radius:       14px;
	--cesc-shadow:       0 24px 64px rgba(0,0,0,.18);
	--cesc-transition:   .3s cubic-bezier(.4,0,.2,1);
	--cesc-overlay-bg:   rgba(0,0,0,.5);
	--cesc-font:         -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;
}

/* ── Reset scoped to our elements ──────────────────────────────────── */
.cesc-trigger-btn,
.cesc-qty-btn,
.cesc-remove,
.cesc-close-btn {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: var(--cesc-font);
}

.cesc-widget-wrap *,
.cesc-drawer *,
.cesc-overlay {
	box-sizing: border-box;
}

/* ── Widget Wrapper ─────────────────────────────────────────────────── */
.cesc-widget-wrap {
	display: inline-flex;
	align-items: center;
	font-family: var(--cesc-font);
}

/* Sticky variants */
.cesc-widget-wrap.cesc-sticky {
	position: fixed;
	z-index: 9990;
}
.cesc-widget-wrap.cesc-pos-br {
	bottom: 28px;
	right:  28px;
}
.cesc-widget-wrap.cesc-pos-bl {
	bottom: 28px;
	left:   28px;
}
.cesc-widget-wrap.cesc-pos-bar {
	bottom: 0;
	left:   0;
	right:  0;
	width:  100%;
	justify-content: center;
	background: var(--cesc-accent);
	padding: 10px 20px;
	border-radius: 0;
}

/* ── Trigger Button ─────────────────────────────────────────────────── */
.cesc-trigger-wrapper {
	display: inline-flex;
}

.cesc-trigger-btn {
	display:     inline-flex;
	align-items: center;
	gap:         10px;
	background:  var(--cesc-accent);
	padding:     12px 22px 12px 18px;
	border-radius: 40px;
	transition:  background var(--cesc-transition),
	             transform  var(--cesc-transition),
	             box-shadow var(--cesc-transition);
	box-shadow: 0 4px 18px rgba(0,0,0,.22);
}

.cesc-trigger-btn:hover {
	background:  var(--cesc-accent-hover);
	transform:   translateY(-2px);
	box-shadow:  0 8px 24px rgba(0,0,0,.28);
}

.cesc-trigger-btn:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}

/* Icon container */
.cesc-icon {
	position: relative;
	display:  flex;
	align-items: center;
}

.cesc-icon svg {
	width:  24px;
	height: 24px;
	stroke: #fff;
	display: block;
}

/* Badge */
.cesc-badge {
	display:     none;
	position:    absolute;
	top:         -8px;
	right:       -10px;
	min-width:   18px;
	height:      18px;
	padding:     0 4px;
	background:  var(--cesc-badge);
	color:       #fff;
	font-size:   10px;
	font-weight: 700;
	line-height: 18px;
	text-align:  center;
	border-radius: 20px;
	border:      2px solid #fff;
	transition:  transform .2s, opacity .2s;
}

.cesc-badge.is-visible {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Cart total text */
.cesc-cart-total {
	color:       #fff;
	font-size:   14px;
	font-weight: 600;
	white-space: nowrap;
	letter-spacing: .01em;
}

/* ── Overlay ────────────────────────────────────────────────────────── */
.cesc-overlay {
	display:    none;
	position:   fixed;
	inset:      0;
	background: var(--cesc-overlay-bg);
	z-index:    9998;
	opacity:    0;
	transition: opacity var(--cesc-transition);
}

.cesc-overlay.is-open {
	display: block;
	opacity: 1;
}

/* ── Drawer ─────────────────────────────────────────────────────────── */
.cesc-drawer {
	position:         fixed;
	top:              0;
	bottom:           0;
	width:            var(--cesc-drawer-w);
	max-width:        100vw;
	background:       #fff;
	z-index:          9999;
	display:          flex;
	flex-direction:   column;
	overflow:         hidden;
	box-shadow:       var(--cesc-shadow);
	transition:       transform var(--cesc-transition);
}

/* Direction: right (default) */
.cesc-drawer[data-direction="right"] {
	right:     0;
	transform: translateX(100%);
}

/* Direction: left */
.cesc-drawer[data-direction="left"] {
	left:      0;
	transform: translateX(-100%);
}

.cesc-drawer.is-open {
	transform: translateX(0);
}

/* ── Drawer Inner ─────────────────────────────────────────────────────*/
.cesc-drawer-inner {
	display:        flex;
	flex-direction: column;
	height:         100%;
	overflow:       hidden;
}

/* ── Drawer Header ──────────────────────────────────────────────────── */
.cesc-drawer-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         20px 24px;
	border-bottom:   1px solid #f0f0f0;
	flex-shrink:     0;
}

.cesc-drawer-title {
	margin:      0;
	font-size:   18px;
	font-weight: 700;
	color:       var(--cesc-t-text, #111827);
	font-family: var(--cesc-font);
	letter-spacing: -.01em;
}

.cesc-close-btn {
	width:       38px;
	height:      38px;
	display:     flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background:  var(--cesc-close-bg, #f3f4f6);
	transition:  background var(--cesc-transition);
}

.cesc-close-btn:hover {
	background: var(--cesc-close-hover-bg, #e5e7eb);
}

.cesc-close-btn:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 2px;
}

.cesc-close-btn svg {
	width:  18px;
	height: 18px;
	stroke: var(--cesc-close-icon, #374151);
	display: block;
}

/* ── Shipping Progress Bar ──────────────────────────────────────────── */
.cesc-shipping-bar {
	padding:      16px 24px;
	border-bottom: 1px solid #f0f0f0;
	flex-shrink:  0;
}

.cesc-ship-msg {
	margin:      0 0 10px;
	font-size:   13px;
	color:       #6b7280;
	font-family: var(--cesc-font);
	line-height: 1.4;
}

.cesc-ship-msg strong,
.cesc-ship-msg .woocommerce-Price-amount {
	color:       var(--cesc-t-text, #111827);
	font-weight: 700;
}

.cesc-ship-msg.is-unlocked {
	color:       #9a7040;
	font-weight: 600;
}

.cesc-progress-track {
	height:        8px;
	border-radius: 100px;
	background:    #e5e7eb;
	overflow:      hidden;
}

.cesc-progress-fill {
	height:        100%;
	border-radius: 100px;
	background:    #2563eb;
	transition:    width .5s cubic-bezier(.4,0,.2,1);
}

/* ── Items List ─────────────────────────────────────────────────────── */
.cesc-items-list {
	flex:         1;
	overflow-y:   auto;
	padding:      8px 0;
	position:     relative;
}

/* Scrollbar styling */
.cesc-items-list::-webkit-scrollbar {
	width: 4px;
}
.cesc-items-list::-webkit-scrollbar-track {
	background: transparent;
}
.cesc-items-list::-webkit-scrollbar-thumb {
	background:    #d1d5db;
	border-radius: 4px;
}

/* Loading overlay */
.cesc-items-list.is-loading::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: rgba(255,255,255,.75);
	display:    flex;
}

/* ── Single Cart Item ───────────────────────────────────────────────── */
.cesc-item {
	display:        flex;
	align-items:    flex-start;
	gap:            14px;
	padding:        16px 24px;
	border-bottom:  1px solid #f9fafb;
	position:       relative;
	transition:     opacity var(--cesc-transition), transform var(--cesc-transition);
}

.cesc-item:last-child {
	border-bottom: none;
}

.cesc-item.is-removing {
	opacity:   .3;
	transform: scale(.97);
	pointer-events: none;
}

/* Thumbnail */
.cesc-item-thumb {
	flex-shrink: 0;
	width:       72px;
	height:      72px;
	overflow:    hidden;
	border-radius: 10px;
	background:  #f3f4f6;
	border:      1px solid #e5e7eb;
}

.cesc-item-thumb img.cesc-img,
.cesc-item-thumb img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
}

.cesc-item-thumb a {
	display: block;
	width:   100%;
	height:  100%;
}

/* Body */
.cesc-item-body {
	flex: 1;
	min-width: 0;
}

.cesc-item-name {
	margin:      0 0 10px;
	font-size:   14px;
	font-weight: 600;
	color:       var(--cesc-t-text, #111827);
	font-family: var(--cesc-font);
	line-height: 1.35;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

.cesc-item-name a {
	color:           inherit;
	text-decoration: none;
}
.cesc-item-name a:hover {
	text-decoration: underline;
}

.cesc-item-row {
	display:     flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* Qty stepper */
.cesc-qty {
	display:     inline-flex;
	align-items: center;
	border:      1.5px solid #e5e7eb;
	border-radius: 8px;
	overflow:    hidden;
}

.cesc-qty-btn {
	display:     flex;
	align-items: center;
	justify-content: center;
	width:       30px;
	height:      30px;
	font-size:   16px;
	font-weight: 600;
	color:       var(--cesc-t-qty-color, #374151);
	background:  transparent;
	transition:  background var(--cesc-transition), color var(--cesc-transition);
}

.cesc-qty-btn:hover {
	background: var(--cesc-t-qty-hover-bg, #f3f4f6);
	color:      var(--cesc-t-qty-hover-color, #111827);
}

.cesc-qty-btn:focus-visible {
	outline:        2px solid #60a5fa;
	outline-offset: -2px;
}

.cesc-qty-btn:disabled {
	opacity: .35;
	cursor:  not-allowed;
}

.cesc-qty-val {
	display:    inline-flex;
	align-items: center;
	justify-content: center;
	min-width:  32px;
	height:     30px;
	font-size:  13px;
	font-weight: 700;
	color:      var(--cesc-t-text, #111827);
	font-family: var(--cesc-font);
	border-left:  1.5px solid #e5e7eb;
	border-right: 1.5px solid #e5e7eb;
}

/* Line price */
.cesc-line-price {
	font-size:   14px;
	font-weight: 700;
	color:       var(--cesc-t-text, #111827);
	font-family: var(--cesc-font);
	white-space: nowrap;
}

/* Remove button — top-right corner of item row */
.cesc-remove {
	position:     absolute;
	top:          12px;
	right:        20px;
	width:        26px;
	height:       26px;
	display:      flex;
	align-items:  center;
	justify-content: center;
	border-radius: 50%;
	background:   transparent;
	transition:   background var(--cesc-transition);
}

.cesc-remove:hover {
	background: var(--cesc-t-remove-hover-bg, #fee2e2);
}

.cesc-remove:focus-visible {
	outline:        2px solid #f87171;
	outline-offset: 2px;
}

.cesc-remove svg {
	width:  14px;
	height: 14px;
	stroke: var(--cesc-t-remove-color, #9ca3af);
	display: block;
	transition: stroke var(--cesc-transition);
}

.cesc-remove:hover svg {
	stroke: var(--cesc-t-remove-hover-color, #ef4444);
}

/* ── Empty State ────────────────────────────────────────────────────── */
.cesc-empty {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	padding:        60px 24px;
	text-align:     center;
	gap:            16px;
}

.cesc-empty svg {
	width:   64px;
	height:  64px;
	stroke:  #d1d5db;
	display: block;
}

.cesc-empty p {
	margin:      0;
	font-size:   16px;
	font-weight: 500;
	color:       #9ca3af;
	font-family: var(--cesc-font);
}

.cesc-shop-link {
	display:         inline-flex;
	align-items:     center;
	padding:         11px 24px;
	background:      var(--cesc-accent);
	color:           #fff;
	font-size:       14px;
	font-weight:     600;
	font-family:     var(--cesc-font);
	text-decoration: none;
	border-radius:   8px;
	transition:      background var(--cesc-transition), transform var(--cesc-transition);
}

.cesc-shop-link:hover {
	background: var(--cesc-accent-hover);
	transform:  translateY(-1px);
}

/* ── Ponuda poklon kese ────────────────────────────────────────────── */
.cesc-gift-offer {
	display:       flex;
	align-items:   center;
	gap:           12px;
	margin:        16px 24px 0;
	padding:       12px;
	background:    #f9fafb;
	border:        1px dashed #e5e7eb;
	border-radius: 12px;
	font-family:   var(--cesc-font);
}

.cesc-cp-totals-box .cesc-gift-offer {
	margin: 0 0 16px;
}

.cesc-gift-offer-img {
	flex-shrink: 0;
	line-height: 0;
}

.cesc-gift-offer-img img {
	width:         48px;
	height:        48px;
	object-fit:    cover;
	border-radius: 8px;
	display:       block;
}

.cesc-gift-offer-body {
	flex: 1;
	min-width: 0;
}

.cesc-gift-offer-title {
	margin:      0 0 2px;
	font-size:   13px;
	font-weight: 600;
	line-height: 1.35;
	color:       var(--cesc-t-text, #111827);
}

.cesc-gift-offer-price {
	font-size: 12px;
	color:     var(--cesc-t-text-secondary, #6b7280);
}

.cesc-gift-add-btn {
	flex-shrink:   0;
	border:        none;
	cursor:        pointer;
	padding:       8px 16px;
	font-size:     13px;
	font-weight:   700;
	font-family:   var(--cesc-font);
	border-radius: 8px;
	background:    var(--cesc-t-checkout-bg, #111827);
	color:         var(--cesc-t-checkout-text, #fff);
	transition:    background var(--cesc-transition), transform var(--cesc-transition);
}

.cesc-gift-add-btn:hover {
	background: var(--cesc-t-checkout-hover-bg, #374151);
	transform:  translateY(-1px);
}

.cesc-gift-add-btn:focus-visible {
	outline:        3px solid #60a5fa;
	outline-offset: 2px;
}

@media (max-width: 380px) {
	.cesc-gift-offer {
		flex-wrap: wrap;
	}
	.cesc-gift-add-btn {
		width: 100%;
	}
}

/* ── Drawer Footer ──────────────────────────────────────────────────── */
.cesc-drawer-footer {
	padding:      20px 24px;
	border-top:   1px solid #f0f0f0;
	background:   #fff;
	flex-shrink:  0;
	display:      flex;
	flex-direction: column;
	gap:          16px;
}

.cesc-subtotal {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	font-family:     var(--cesc-font);
}

.cesc-subtotal span {
	font-size:  14px;
	color:      #6b7280;
}

.cesc-subtotal strong {
	font-size:  18px;
	font-weight: 800;
	color:      var(--cesc-t-text, #111827);
}

.cesc-checkout-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	padding:         15px 24px;
	background:      var(--cesc-t-checkout-bg, var(--cesc-accent));
	color:           var(--cesc-t-checkout-text, #fff);
	font-size:       15px;
	font-weight:     700;
	font-family:     var(--cesc-font);
	text-decoration: none;
	border-radius:   10px;
	transition:      background var(--cesc-transition),
	                 transform  var(--cesc-transition),
	                 box-shadow var(--cesc-transition);
	letter-spacing:  .02em;
}

.cesc-checkout-btn:hover {
	background:  var(--cesc-t-checkout-hover-bg, var(--cesc-accent-hover));
	transform:   translateY(-2px);
	box-shadow:  0 8px 20px rgba(17,24,39,.25);
	color:       var(--cesc-t-checkout-text, #fff);
}

.cesc-checkout-btn:focus-visible {
	outline:        3px solid #60a5fa;
	outline-offset: 3px;
}

.cesc-checkout-btn svg {
	width:  18px;
	height: 18px;
	stroke: currentColor;
	flex-shrink: 0;
	display: block;
}

/* ── Body scroll lock ───────────────────────────────────────────────── */
body.cesc-open {
	overflow: hidden;
}

/* ── Spinner animation ──────────────────────────────────────────────── */
@keyframes cesc-spin {
	to { transform: rotate(360deg); }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	:root {
		--cesc-drawer-w: 100vw;
	}

	.cesc-drawer {
		border-radius: 0;
	}

	.cesc-widget-wrap.cesc-pos-br,
	.cesc-widget-wrap.cesc-pos-bl {
		bottom: 16px;
	}
	.cesc-widget-wrap.cesc-pos-br { right: 16px; }
	.cesc-widget-wrap.cesc-pos-bl { left:  16px; }

	.cesc-trigger-btn {
		padding: 10px 16px 10px 14px;
	}

	.cesc-cart-total {
		font-size: 13px;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   Admin Sticky Button
   Styled entirely via CSS custom properties set inline in PHP.
   ═══════════════════════════════════════════════════════════════════ */

.cesc-admin-sticky {
	position: fixed;
	z-index:  9990;
}

.cesc-admin-sticky.cesc-pos-br { bottom: 28px; right: 28px; }
.cesc-admin-sticky.cesc-pos-bl { bottom: 28px; left:  28px; }

/* Full-width bottom bar */
.cesc-admin-sticky.cesc-pos-bar {
	bottom:          0;
	left:            0;
	right:           0;
	display:         flex;
	justify-content: center;
	align-items:     center;
	background:      var(--cesc-s-bg, #111827);
	padding:         10px 20px;
}

/* In bar mode the inner button is transparent — the bar IS the background */
.cesc-admin-sticky.cesc-pos-bar .cesc-trigger-btn {
	background:    transparent !important;
	box-shadow:    none !important;
	border-radius: 0 !important;
	padding:       6px 12px !important;
}

/* Apply admin settings via CSS vars */
.cesc-admin-sticky .cesc-trigger-btn {
	background-color: var(--cesc-s-bg,     #111827) !important;
	border-radius:    var(--cesc-s-radius,  40px)   !important;
}

.cesc-admin-sticky .cesc-icon svg {
	stroke: var(--cesc-s-icon, #ffffff) !important;
	width:  var(--cesc-s-sz,   24px)    !important;
	height: var(--cesc-s-sz,   24px)    !important;
}

.cesc-admin-sticky .cesc-cart-total {
	color: var(--cesc-s-icon, #ffffff) !important;
}

.cesc-admin-sticky .cesc-badge {
	background-color: var(--cesc-s-badge-bg, #ef4444) !important;
	color:            var(--cesc-s-badge-fg, #ffffff)  !important;
}

.cesc-admin-sticky .cesc-trigger-btn:hover {
	background-color: var(--cesc-t-sticky-hover-bg, var(--cesc-s-bg, #374151)) !important;
}

.cesc-admin-sticky .cesc-trigger-btn:hover .cesc-icon svg {
	stroke: var(--cesc-t-sticky-hover-icon, var(--cesc-s-icon, #ffffff)) !important;
}

.cesc-admin-sticky .cesc-trigger-btn:hover .cesc-cart-total {
	color: var(--cesc-t-sticky-hover-icon, var(--cesc-s-icon, #ffffff)) !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
	.cesc-admin-sticky.cesc-pos-br { bottom: 16px; right: 16px; }
	.cesc-admin-sticky.cesc-pos-bl { bottom: 16px; left:  16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Ajax Add to Cart — Notification Popup
   ═══════════════════════════════════════════════════════════════════ */

/* Container — one per position */
.cesc-notif-container {
	position:       fixed;
	z-index:        99999;
	display:        flex;
	flex-direction: column;
	gap:            10px;
	width:          340px;
	max-width:      calc(100vw - 32px);
	pointer-events: none;
}

/* Slide direction per position (CSS var picked up by each .cesc-notif) */
.cesc-notif-container.cesc-npos-bottom-right { bottom: 24px; right: 16px; --cesc-n-slide: translateX(110%); }
.cesc-notif-container.cesc-npos-bottom-left  { bottom: 24px; left:  16px; --cesc-n-slide: translateX(-110%); flex-direction: column-reverse; }
.cesc-notif-container.cesc-npos-top-right    { top: 24px;    right: 16px; --cesc-n-slide: translateX(110%);  flex-direction: column; }
.cesc-notif-container.cesc-npos-top-left     { top: 24px;    left:  16px; --cesc-n-slide: translateX(-110%); flex-direction: column; }
.cesc-notif-container.cesc-npos-top-center   { top: 24px;    left:  50%;  transform: translateX(-50%); --cesc-n-slide: translateY(-20px); flex-direction: column; }

/* Individual notification card */
.cesc-notif {
	background:  var(--cesc-n-bg,    #111827);
	color:       var(--cesc-n-color, #ffffff);
	border-radius: 14px;
	overflow:    hidden;
	pointer-events: all;
	box-shadow:  0 12px 40px rgba(0,0,0,.28);
	transform:   var(--cesc-n-slide, translateX(110%));
	opacity:     0;
	transition:  transform .35s cubic-bezier(.4,0,.2,1),
	             opacity    .35s cubic-bezier(.4,0,.2,1);
	font-family: var(--cesc-font);
	position:    relative;
}

.cesc-notif.is-visible {
	transform: none;
	opacity:   1;
}

.cesc-notif.is-hiding {
	transform: var(--cesc-n-slide, translateX(110%));
	opacity:   0;
}

/* Inner layout */
.cesc-notif-inner {
	display:     flex;
	align-items: flex-start;
	gap:         14px;
	padding:     16px 40px 16px 16px;
}

/* Checkmark icon */
.cesc-notif-check {
	flex-shrink: 0;
	width:       36px;
	height:      36px;
	background:  var(--cesc-n-accent, #CDAA83);
	border-radius: 50%;
	display:     flex;
	align-items: center;
	justify-content: center;
	margin-top:  2px;
}

.cesc-notif-check svg {
	width:   18px;
	height:  18px;
	stroke:  #fff;
	display: block;
}

/* Thumbnail */
.cesc-notif-thumb {
	flex-shrink: 0;
	width:       52px;
	height:      52px;
	border-radius: 8px;
	overflow:    hidden;
	background:  rgba(255,255,255,.12);
}

.cesc-notif-thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* Text body */
.cesc-notif-body {
	flex: 1;
	min-width: 0;
	display:   flex;
	flex-direction: column;
	gap:       4px;
}

.cesc-notif-msg {
	margin:      0;
	font-size:   13px;
	font-weight: 600;
	color:       var(--cesc-n-accent, #CDAA83);
	line-height: 1.3;
}

.cesc-notif-name {
	margin:      0;
	font-size:   14px;
	font-weight: 600;
	color:       var(--cesc-n-color, #fff);
	line-height: 1.35;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

.cesc-notif-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	margin-top:      8px;
	padding:         6px 14px;
	background:      var(--cesc-n-accent, #CDAA83);
	color:           #fff;
	font-size:       12px;
	font-weight:     700;
	text-decoration: none;
	border-radius:   6px;
	transition:      opacity .2s;
	align-self:      flex-start;
}

.cesc-notif-btn:hover {
	opacity: .85;
	color:   #fff;
}

/* Close button */
.cesc-notif-close {
	position:   absolute;
	top:        10px;
	right:      10px;
	width:      24px;
	height:     24px;
	display:    flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.15);
	border:     none;
	border-radius: 50%;
	cursor:     pointer;
	font-size:  16px;
	line-height: 1;
	color:      var(--cesc-n-color, #fff);
	transition: background .2s;
	padding:    0;
	font-family: var(--cesc-font);
}

.cesc-notif-close:hover {
	background: rgba(255,255,255,.28);
}

.cesc-notif-close:focus-visible {
	outline: 2px solid var(--cesc-n-accent, #CDAA83);
	outline-offset: 2px;
}

/* Progress bar (auto-dismiss countdown) */
.cesc-notif-progress {
	height:     3px;
	background: rgba(255,255,255,.15);
}

.cesc-notif-progress-bar {
	height:     100%;
	width:      100%;
	background: var(--cesc-n-accent, #CDAA83);
	transform-origin: left;
	animation:  cesc-notif-shrink linear 1 forwards;
}

@keyframes cesc-notif-shrink {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* Add to cart button loading state (archive/shop pages) */
.add_to_cart_button.cesc-atc-loading {
	opacity: .6;
	pointer-events: none;
	position: relative;
}

/* Responsive */
@media (max-width: 480px) {
	.cesc-notif-container {
		width: calc(100vw - 32px);
	}
	.cesc-notif-container.cesc-npos-top-center {
		left:      16px;
		right:     16px;
		transform: none;
		width:     auto;
	}
}

/* ═══════════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════════
   Cart Page Widget — moderan dizajn
   ═══════════════════════════════════════════════════════════════════ */

/* ── Sjenčanje i boja ────────────────────────────────────────────── */
:root {
	--cesc-cp-shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--cesc-cp-shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
	--cesc-cp-shadow-lg:  0 12px 40px rgba(0,0,0,.1),  0 4px 12px rgba(0,0,0,.06);
	--cesc-cp-radius:     16px;
	--cesc-cp-radius-sm:  10px;
	--cesc-cp-transition: .22s cubic-bezier(.4,0,.2,1);
	--cesc-cp-border:     #f0f0f2;
	--cesc-cp-bg-subtle:  #f8f9fb;
}

/* ── Traka besplatne dostave (van bočne ladice) ───────────────────── */
.cesc-cp-shipping-wrap .cesc-shipping-bar {
	background:    #fff;
	border-radius: var(--cesc-cp-radius-sm);
	box-shadow:    var(--cesc-cp-shadow-sm);
	padding:       18px 24px;
	margin-bottom: 24px;
	border-bottom: none;
}

/* ── Dvostupačan raspored ─────────────────────────────────────────── */
.cesc-cart-layout {
	display:               grid;
	grid-template-columns: 1fr 380px;
	gap:                   32px;
	align-items:           flex-start;
}

/* ── Leva kolona: stavke + akcije ─────────────────────────────────── */
.cesc-cart-main { display: flex; flex-direction: column; gap: 16px; }

/* ── Zaglavlje tabele ─────────────────────────────────────────────── */
.cesc-cart-head {
	display:               grid;
	grid-template-columns: 88px 1fr 120px 160px 120px 52px;
	gap:                   16px;
	padding:               14px 20px;
	background:            var(--cesc-cp-bg-subtle);
	border-radius:         var(--cesc-cp-radius);
	font-size:             11px;
	font-weight:           700;
	text-transform:        uppercase;
	letter-spacing:        .08em;
	color:                 #94a3b8;
	font-family:           var(--cesc-font);
}

/* ── Telo tabele (AJAX) ───────────────────────────────────────────── */
.cesc-cart-body {
	background:    #fff;
	border-radius: var(--cesc-cp-radius);
	box-shadow:    var(--cesc-cp-shadow-md);
	overflow:      hidden;
}

/* ── Red korpe ────────────────────────────────────────────────────── */
.cesc-cart-row {
	display:               grid;
	grid-template-columns: 88px 1fr 120px 160px 120px 52px;
	gap:                   16px;
	align-items:           center;
	padding:               20px;
	border-bottom:         1px solid var(--cesc-cp-border);
	transition:            background var(--cesc-cp-transition);
	position:              relative;
}

.cesc-cart-row:last-child  { border-bottom: none; }
.cesc-cart-row:hover       { background: #fafbfc; }

.cesc-cart-row.is-removing {
	opacity:        .3;
	pointer-events: none;
	transition:     opacity .35s;
}

.cesc-cart-row .cesc-col,
.cesc-cart-head .cesc-col {
	display:     flex;
	align-items: center;
}

/* ── Slika proizvoda ─────────────────────────────────────────────── */
.cesc-cart-thumb {
	width:         80px;
	height:        80px;
	border-radius: 12px;
	overflow:      hidden;
	background:    var(--cesc-cp-bg-subtle);
	border:        1px solid var(--cesc-cp-border);
	flex-shrink:   0;
}

.cesc-cart-thumb a    { display: block; width: 100%; height: 100%; overflow: hidden; }
.cesc-cart-thumb img  {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform .4s ease;
}
.cesc-cart-thumb:hover img { transform: scale(1.08); }

/* ── Naziv i varijacija ──────────────────────────────────────────── */
.cesc-col-name { flex-direction: column; align-items: flex-start; gap: 4px; }

.cesc-cart-product-name {
	font-size:       14px;
	font-weight:     600;
	color:           var(--cesc-t-text, #111827);
	text-decoration: none;
	font-family:     var(--cesc-font);
	line-height:     1.4;
	display:         -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:        hidden;
}
.cesc-cart-product-name:hover { color: #2563eb; }

.cesc-cart-variant {
	font-size:      12px;
	color:          #94a3b8;
	font-family:    var(--cesc-font);
	letter-spacing: .01em;
}

/* ── Cena / ukupno ───────────────────────────────────────────────── */
.cesc-col-price .woocommerce-Price-amount,
.cesc-col-sub   .woocommerce-Price-amount {
	font-size:   14px;
	font-weight: 600;
	color:       var(--cesc-t-text-secondary, #374151);
	font-family: var(--cesc-font);
}

.cesc-col-sub .woocommerce-Price-amount { color: var(--cesc-t-text, #111827); font-size: 15px; }

/* ── Qty stepper (moderni pill dizajn) ──────────────────────────── */
.cesc-cart-row .cesc-qty {
	display:       inline-flex;
	align-items:   center;
	background:    var(--cesc-cp-bg-subtle);
	border:        1.5px solid var(--cesc-cp-border);
	border-radius: 50px;
	overflow:      hidden;
	transition:    border-color var(--cesc-cp-transition), box-shadow var(--cesc-cp-transition);
}
.cesc-cart-row .cesc-qty:focus-within {
	border-color: #2563eb;
	box-shadow:   0 0 0 3px rgba(37,99,235,.1);
}

.cesc-cart-row .cesc-qty-btn {
	width:       36px;
	height:      36px;
	display:     flex;
	align-items: center;
	justify-content: center;
	font-size:   18px;
	font-weight: 500;
	color:       var(--cesc-t-qty-color, #374151);
	background:  transparent;
	border:      none;
	cursor:      pointer;
	transition:  background var(--cesc-cp-transition), color var(--cesc-cp-transition);
	font-family: var(--cesc-font);
}
.cesc-cart-row .cesc-qty-btn:hover       { background: var(--cesc-t-qty-hover-bg, #e5e7eb); color: var(--cesc-t-qty-hover-color, #111827); }
.cesc-cart-row .cesc-qty-btn:focus-visible { outline: none; background: var(--cesc-t-qty-hover-bg, #e5e7eb); }

.cesc-cart-row .cesc-qty-val {
	min-width:   32px;
	text-align:  center;
	font-size:   14px;
	font-weight: 700;
	color:       var(--cesc-t-text, #111827);
	font-family: var(--cesc-font);
	padding:     0 2px;
}

/* ── Dugme za uklanjanje ─────────────────────────────────────────── */
.cesc-col-rm { justify-content: center; }

.cesc-col-rm .cesc-remove {
	width:         36px;
	height:        36px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	border-radius: 50%;
	border:        1.5px solid transparent;
	background:    transparent;
	cursor:        pointer;
	padding:       0;
	transition:    background var(--cesc-cp-transition),
	               border-color var(--cesc-cp-transition),
	               transform var(--cesc-cp-transition);
}
.cesc-col-rm .cesc-remove svg {
	width:   15px;
	height:  15px;
	stroke:  var(--cesc-t-remove-color, #cbd5e1);
	display: block;
	transition: stroke var(--cesc-cp-transition);
}
.cesc-col-rm .cesc-remove:hover {
	background:   var(--cesc-t-remove-hover-bg, #fef2f2);
	border-color: #fecaca;
	transform:    scale(1.1);
}
.cesc-col-rm .cesc-remove:hover svg { stroke: var(--cesc-t-remove-hover-color, #ef4444); }

/* ── Akcije ispod tabele ─────────────────────────────────────────── */
.cesc-cart-actions {
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	gap:            16px;
	flex-wrap:      wrap;
	padding:        20px 24px;
	background:     #fff;
	border-radius:  var(--cesc-cp-radius);
	box-shadow:     var(--cesc-cp-shadow-sm);
}

/* ── Kupon forma ─────────────────────────────────────────────────── */
.cesc-coupon-form {
	display:   flex;
	gap:       10px;
	flex:      1;
	min-width: 260px;
}

.cesc-coupon-input {
	flex:          1;
	height:        46px;
	padding:       0 16px;
	border:        1.5px solid #e2e8f0;
	border-radius: var(--cesc-cp-radius-sm);
	font-size:     14px;
	font-family:   var(--cesc-font);
	color:         var(--cesc-t-text, #111827);
	background:    #fff;
	outline:       none;
	transition:    border-color .2s, box-shadow .2s;
}
.cesc-coupon-input:focus {
	border-color: #2563eb;
	box-shadow:   0 0 0 3px rgba(37,99,235,.1);
}
.cesc-coupon-input::placeholder { color: #94a3b8; }

.cesc-apply-coupon-btn {
	height:        46px;
	padding:       0 22px;
	background:    var(--cesc-t-coupon-bg, #111827);
	color:         var(--cesc-t-coupon-text, #fff);
	border:        none;
	border-radius: var(--cesc-cp-radius-sm);
	font-size:     14px;
	font-weight:   600;
	font-family:   var(--cesc-font);
	cursor:        pointer;
	white-space:   nowrap;
	transition:    background var(--cesc-cp-transition),
	               transform  var(--cesc-cp-transition),
	               box-shadow var(--cesc-cp-transition);
}
.cesc-apply-coupon-btn:hover {
	background:  var(--cesc-t-coupon-hover-bg, #374151);
	transform:   translateY(-1px);
	box-shadow:  0 4px 12px rgba(17,24,39,.2);
}
.cesc-apply-coupon-btn:active  { transform: translateY(0); }
.cesc-apply-coupon-btn.is-loading { opacity: .6; pointer-events: none; }

.cesc-coupon-msg {
	font-size:   13px;
	font-family: var(--cesc-font);
	margin-top:  8px;
	padding:     8px 12px;
	border-radius: 8px;
}
.cesc-coupon-msg.is-error   { color: #dc2626; background: #fef2f2; }
.cesc-coupon-msg.is-success { color: #9a7040; background: rgba(205,170,131,.08); }

.cesc-cart-back-link {
	font-size:       13px;
	font-weight:     500;
	color:           #64748b;
	text-decoration: none;
	font-family:     var(--cesc-font);
	white-space:     nowrap;
	display:         flex;
	align-items:     center;
	gap:             6px;
	transition:      color var(--cesc-cp-transition);
}
.cesc-cart-back-link:hover { color: var(--cesc-t-text, #111827); }

/* ── Desna kolona: sažetak narudžbine ───────────────────────────── */
.cesc-cart-sidebar { position: sticky; top: 24px; }

/* ── Kutija ukupnog iznosa ───────────────────────────────────────── */
.cesc-cp-totals-box {
	background:    #fff;
	border-radius: var(--cesc-cp-radius);
	box-shadow:    var(--cesc-cp-shadow-lg);
	overflow:      hidden;
	font-family:   var(--cesc-font);
}

/* Zaglavlje kutije */
.cesc-cp-totals-box::before {
	content:    '';
	display:    block;
	height:     4px;
	background: linear-gradient(90deg, #111827 0%, #374151 100%);
}

.cesc-cp-totals-title {
	margin:        0;
	padding:       22px 24px 18px;
	font-size:     16px;
	font-weight:   700;
	color:         var(--cesc-t-text, #111827);
	font-family:   var(--cesc-font);
	letter-spacing: -.01em;
	border-bottom: 1px solid var(--cesc-cp-border);
}

/* Redovi iznosa */
.cesc-cp-total-row {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         14px 24px;
	gap:             12px;
	border-bottom:   1px solid var(--cesc-cp-border);
}
.cesc-cp-total-row:last-of-type { border-bottom: none; }

.cesc-cp-total-row span {
	font-size:  14px;
	color:      #64748b;
	font-family: var(--cesc-font);
}
.cesc-cp-total-row small {
	font-size: 12px;
	color:     #94a3b8;
}
.cesc-cp-total-row .woocommerce-Price-amount {
	font-size:   14px;
	font-weight: 600;
	color:       var(--cesc-t-text-secondary, #374151);
}

/* Red s kuponom */
.cesc-cp-coupon-row span { display: flex; align-items: center; gap: 6px; }

.cesc-remove-coupon-btn {
	all:           unset;
	cursor:        pointer;
	font-size:     16px;
	line-height:   1;
	color:         #94a3b8;
	padding:       0 2px;
	transition:    color .2s;
}
.cesc-remove-coupon-btn:hover { color: #ef4444; }

.cesc-discount {
	color:       #9a7040 !important;
	font-weight: 600 !important;
}

/* Grand total red */
.cesc-cp-total-row.is-grand {
	padding:       20px 24px;
	background:    var(--cesc-cp-bg-subtle);
	border-top:    2px solid var(--cesc-cp-border);
	border-bottom: none;
}
.cesc-cp-total-row.is-grand span {
	font-size:   16px;
	font-weight: 700;
	color:       var(--cesc-t-text, #111827);
}
.cesc-cp-total-row.is-grand strong {
	font-size:   22px;
	font-weight: 800;
	color:       var(--cesc-t-text, #111827);
}

/* Dugme za plaćanje */
.cesc-cp-checkout-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	width:           100%;
	height:          54px;
	padding:         0 24px;
	background:      var(--cesc-t-checkout-bg, #111827);
	color:           var(--cesc-t-checkout-text, #fff);
	text-decoration: none;
	font-size:       15px;
	font-weight:     700;
	font-family:     var(--cesc-font);
	letter-spacing:  .02em;
	transition:      background var(--cesc-cp-transition),
	                 transform  var(--cesc-cp-transition),
	                 box-shadow var(--cesc-cp-transition);
	margin:          20px 24px 24px;
	width:           calc(100% - 48px);
	border-radius:   var(--cesc-cp-radius-sm);
	box-shadow:      0 4px 14px rgba(17,24,39,.2);
}
.cesc-cp-checkout-btn:hover {
	background:  var(--cesc-t-checkout-hover-bg, #374151);
	transform:   translateY(-2px);
	box-shadow:  0 8px 24px rgba(17,24,39,.3);
	color:       var(--cesc-t-checkout-text, #fff);
}
.cesc-cp-checkout-btn:active { transform: translateY(0); }
.cesc-cp-checkout-btn svg    { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Prazna korpa ─────────────────────────────────────────────────── */
.cesc-cart-empty-state .cesc-cart-empty {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	padding:        100px 24px;
	text-align:     center;
	gap:            24px;
}
.cesc-cart-empty-state .cesc-cart-empty svg {
	width:  96px;
	height: 96px;
	stroke: #cbd5e1;
}
.cesc-cart-empty-state .cesc-cart-empty p {
	font-size:   17px;
	color:       #94a3b8;
	font-family: var(--cesc-font);
	margin:      0;
}
.cesc-cart-empty-state .cesc-shop-link {
	padding: 14px 28px;
	font-size: 14px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.cesc-cart-layout { grid-template-columns: 1fr 340px; gap: 24px; }
}

@media (max-width: 860px) {
	.cesc-cart-layout { grid-template-columns: 1fr; }
	.cesc-cart-sidebar { position: static; }
}

@media (max-width: 600px) {
	.cesc-cart-head { display: none; }

	.cesc-cart-row {
		grid-template-columns: 72px 1fr 40px;
		grid-template-rows:    auto auto auto;
		gap:                   10px 14px;
		padding:               16px;
	}

	.cesc-col-img  { grid-row: 1 / 4; grid-column: 1; align-self: flex-start; }
	.cesc-col-name { grid-row: 1; grid-column: 2; }
	.cesc-col-rm   { grid-row: 1; grid-column: 3; }
	.cesc-col-price { grid-row: 2; grid-column: 2; }
	.cesc-col-price::before { content: attr(data-label) ':  '; font-size: 11px; color: #94a3b8; }
	.cesc-col-qty   { grid-row: 3; grid-column: 2; }
	.cesc-col-sub   { display: none; }

	.cesc-cart-thumb { width: 72px; height: 72px; }
	.cesc-cart-actions { flex-direction: column; align-items: flex-start; }
	.cesc-coupon-form  { min-width: 0; width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════════
   Checkout Widget — Fluid Checkout stil (primarna boja: #CDAA83)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Editor placeholder ──────────────────────────────────────────── */
.cesc-checkout-editor-placeholder {
	display: flex; flex-direction: column; align-items: center;
	justify-content: center; padding: 80px 24px; text-align: center;
	gap: 20px; border: 2px dashed #e2e8f0; border-radius: var(--cesc-cp-radius);
	background: var(--cesc-cp-bg-subtle);
}
.cesc-checkout-editor-placeholder svg { opacity: .4; }
.cesc-checkout-editor-placeholder p   { font-size: 15px; color: #94a3b8; font-family: var(--cesc-font); }

/* ── Accent CSS var (override-uje ga Elementor kontrola) ─────────── */
.cesc-checkout-wrap { --cesc-co-accent: #CDAA83; font-family: var(--cesc-font); }

/* ── Navigacija (nazad u korpu / nastavi kupovinu) ────────────────── */
.cesc-checkout-nav {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	flex-wrap:       wrap;
	margin-bottom:   20px;
}

.cesc-checkout-nav-link {
	font-size:       13px;
	font-weight:     500;
	color:           #64748b;
	text-decoration: none;
	white-space:     nowrap;
	transition:      color var(--cesc-cp-transition, .22s);
}

.cesc-checkout-nav-link:hover { color: var(--cesc-co-accent, #111827); }

/* ── 2-kolona layout ─────────────────────────────────────────────── */
.cesc-checkout-2col form.woocommerce-checkout,
.cesc-checkout-2col .woocommerce-checkout {
	display:               grid;
	grid-template-columns: 1fr 380px;
	gap:                   32px;
	align-items:           flex-start;
}
.cesc-checkout-2col #customer_details      { grid-column: 1; grid-row: 1 / 4; }
.cesc-checkout-2col #order_review_heading  { display: none; }
.cesc-checkout-2col #order_review          { grid-column: 2; grid-row: 1 / 4; position: sticky; top: 24px; }

/* Reset WC float kolone */
.cesc-checkout-wrap #customer_details .col-1,
.cesc-checkout-wrap #customer_details .col-2 { float: none !important; width: 100% !important; }

/* ── Leva kolona: kartica ────────────────────────────────────────── */
.cesc-checkout-wrap #customer_details {
	background: #fff; border-radius: var(--cesc-cp-radius);
	box-shadow: var(--cesc-cp-shadow-md); overflow: hidden;
}
.cesc-checkout-wrap .woocommerce-billing-fields,
.cesc-checkout-wrap .woocommerce-shipping-fields,
.cesc-checkout-wrap .woocommerce-additional-fields {
	padding: 28px 28px 24px; border-bottom: 1px solid #f1f5f9;
	background: transparent !important; box-shadow: none !important;
	border-radius: 0 !important; margin: 0 !important;
}
.cesc-checkout-wrap .woocommerce-additional-fields { border-bottom: none; }

/* ── Naslovi sekcija — uppercase kompakt ─────────────────────────── */
.cesc-checkout-wrap .woocommerce-billing-fields  h3,
.cesc-checkout-wrap .woocommerce-shipping-fields h3,
.cesc-checkout-wrap .woocommerce-additional-fields h3 {
	font-size: 11px !important; font-weight: 700 !important;
	text-transform: uppercase !important; letter-spacing: .12em !important;
	color: #64748b !important; font-family: var(--cesc-font) !important;
	margin: 0 0 20px !important; padding: 0 !important; border: none !important;
	display: block !important;
}

/* ── Labele ──────────────────────────────────────────────────────── */
.cesc-checkout-wrap .woocommerce-checkout label {
	font-size: 13px; font-weight: 600; color: var(--cesc-t-text-secondary, #374151);
	margin-bottom: 7px; display: block; font-family: var(--cesc-font);
}
.cesc-checkout-wrap .woocommerce-checkout .required { color: #ef4444; }

/* ── Input polja — levi border accent ───────────────────────────── */
.cesc-checkout-wrap .woocommerce-checkout .input-text,
.cesc-checkout-wrap .woocommerce-checkout select,
.cesc-checkout-wrap .woocommerce-checkout textarea {
	width: 100%; height: 50px; padding: 0 14px 0 12px;
	border: 1.5px solid #e2e8f0; border-left: 3px solid #e2e8f0;
	border-radius: 8px; font-size: 14px; font-family: var(--cesc-font);
	color: var(--cesc-t-text, #111827); background: #f8fafc; outline: none;
	appearance: none; -webkit-appearance: none;
	transition: border-left-color .2s, background .2s; box-sizing: border-box;
}
.cesc-checkout-wrap .woocommerce-checkout textarea {
	height: 110px; padding-top: 14px; resize: vertical;
}
.cesc-checkout-wrap .woocommerce-checkout select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}
.cesc-checkout-wrap .woocommerce-checkout .input-text:focus,
.cesc-checkout-wrap .woocommerce-checkout select:focus,
.cesc-checkout-wrap .woocommerce-checkout textarea:focus {
	border-left-color: var(--cesc-co-accent, #CDAA83); background: #fff;
	outline: none; box-shadow: none;
}
.cesc-checkout-wrap .woocommerce-validated .input-text,
.cesc-checkout-wrap .woocommerce-validated select {
	border-left-color: var(--cesc-co-accent, #CDAA83); background: #fff;
}
.cesc-checkout-wrap .woocommerce-invalid .input-text,
.cesc-checkout-wrap .woocommerce-invalid select { border-left-color: #ef4444; background: #fff; }

/* ── Redovi forme ─────────────────────────────────────────────────── */
.cesc-checkout-wrap .woocommerce-checkout .form-row { margin-bottom: 16px; }
.cesc-checkout-wrap .woocommerce-checkout .form-row-first,
.cesc-checkout-wrap .woocommerce-checkout .form-row-last {
	display: inline-block; width: calc(50% - 8px); float: none;
}
.cesc-checkout-wrap .woocommerce-checkout .form-row-first { margin-right: 16px; }

/* ── Slanje na drugu adresu ──────────────────────────────────────── */
.cesc-checkout-wrap #ship-to-different-address {
	display: flex; align-items: center; gap: 10px; cursor: pointer;
	padding: 14px 16px; background: #f8fafc; border-radius: 8px;
	font-weight: 600; font-size: 14px; color: var(--cesc-t-text-secondary, #374151); font-family: var(--cesc-font);
}
.cesc-checkout-wrap #ship-to-different-address input[type="checkbox"] {
	accent-color: var(--cesc-co-accent, #CDAA83); width: 17px; height: 17px;
}

/* ═══════════════════════════════════════════════════════════════════
   Desna kolona — Sažetak narudžbine (moderan redesajn)
   ═══════════════════════════════════════════════════════════════════ */
.cesc-checkout-wrap #order_review {
	background: #fff !important; border-radius: var(--cesc-cp-radius) !important;
	box-shadow: var(--cesc-cp-shadow-md) !important; overflow: hidden !important;
	padding: 0 !important; margin: 0 !important;
}

/* Zaglavna traka */
.cesc-checkout-wrap #order_review::before {
	content: 'SAŽETAK NARUDŽBINE';
	display: block; background: #111827; color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: .12em;
	padding: 16px 22px; font-family: var(--cesc-font);
}

/* Tabela pregleda */
.cesc-checkout-wrap .woocommerce-checkout-review-order-table {
	width: 100%; border-collapse: collapse;
}
.cesc-checkout-wrap .woocommerce-checkout-review-order-table thead { display: none; }

/* Redovi proizvoda */
.cesc-checkout-wrap .woocommerce-checkout-review-order-table .cart_item { }
.cesc-checkout-wrap .woocommerce-checkout-review-order-table .cart_item td {
	padding: 16px 20px; border-bottom: 1px solid #f1f5f9; vertical-align: middle;
}

/* Ćelija s nazivom + thumbnail */
.cesc-checkout-wrap .woocommerce-checkout-review-order-table .product-name {
	font-size: 14px; color: var(--cesc-t-text-secondary, #374151); font-family: var(--cesc-font); width: 99%;
}

/* Naš inject: slika + naziv u jednom redu */
.cesc-review-item { display: flex; align-items: center; gap: 14px; }

.cesc-review-img-wrap {
	position: relative; flex-shrink: 0; width: 54px; height: 54px;
	border-radius: 8px; overflow: visible;
}
.cesc-review-img-wrap img,
.cesc-review-thumb {
	width: 54px !important; height: 54px !important; object-fit: cover !important;
	display: block !important; border-radius: 8px !important; border: 1px solid #e5e7eb;
}
.cesc-review-qty-badge {
	position: absolute; top: -7px; right: -7px;
	background: #374151; color: #fff;
	font-size: 10px; font-weight: 700; font-family: var(--cesc-font);
	border-radius: 50%; min-width: 20px; height: 20px;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid #fff; line-height: 1;
}
.cesc-review-name {
	flex: 1; font-size: 13px; font-weight: 600; color: var(--cesc-t-text, #111827);
	font-family: var(--cesc-font); line-height: 1.4;
}
.cesc-review-name a { color: inherit; text-decoration: none; }
.cesc-review-name a:hover { color: #CDAA83; }

/* Sakrij WC-ov × qty jer koristimo badge */
.cesc-checkout-wrap .product-quantity { display: none; }

/* Cena (desna ćelija) */
.cesc-checkout-wrap .woocommerce-checkout-review-order-table .product-total {
	text-align: right; white-space: nowrap;
	padding: 16px 20px; border-bottom: 1px solid #f1f5f9;
	vertical-align: middle;
}
.cesc-checkout-wrap .woocommerce-checkout-review-order-table .product-total .woocommerce-Price-amount {
	font-size: 14px; font-weight: 700; color: var(--cesc-t-text, #111827);
}

/* ── Footer: međuzbir, dostava, kupon, ukupno ───────────────────── */
.cesc-checkout-wrap .woocommerce-checkout-review-order-table tfoot th,
.cesc-checkout-wrap .woocommerce-checkout-review-order-table tfoot td {
	padding: 10px 20px; font-size: 13px; font-family: var(--cesc-font);
	border-bottom: 1px solid #f1f5f9;
}
.cesc-checkout-wrap .woocommerce-checkout-review-order-table tfoot th {
	font-weight: 600; color: #64748b; text-align: left;
}
.cesc-checkout-wrap .woocommerce-checkout-review-order-table tfoot td {
	text-align: right; font-weight: 600; color: var(--cesc-t-text-secondary, #374151);
}
/* Kupon red */
.cesc-checkout-wrap .woocommerce-checkout-review-order-table tfoot .cart-discount td {
	color: #CDAA83;
}

/* Sakrij nativni izbor načina dostave (Pošiljka) kad je poštarina po načinu
   plaćanja aktivna — u tom slučaju naša poštarina određuje cenu dostave, pa
   dodatni izbor između npr. "Dostava" i "Besplatna dostava" samo zbunjuje
   kupca (izgleda kao da bira između plaćene i besplatne opcije). Obračun
   dostave u pozadini ostaje nepromenjen — ovo je samo vizuelno sakrivanje. */
.cesc-checkout-wrap.cesc-postage-active .woocommerce-shipping-totals {
	display: none !important;
}

/* Ukupno — poseban red */
.cesc-checkout-wrap .woocommerce-checkout-review-order-table tfoot .order-total th,
.cesc-checkout-wrap .woocommerce-checkout-review-order-table tfoot .order-total td {
	padding: 16px 20px; font-size: 15px; font-weight: 800;
	color: var(--cesc-t-text, #111827); border-bottom: none; border-top: 2px solid #e5e7eb;
	background: #f8fafc;
}
.cesc-checkout-wrap .woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount {
	font-size: 18px; color: var(--cesc-t-text, #111827);
}

/* ═══════════════════════════════════════════════════════════════════
   Načini plaćanja — FIX: radio dugme i label u istom redu
   ═══════════════════════════════════════════════════════════════════ */
.cesc-checkout-wrap #payment {
	background: #f8fafc; border-top: 1px solid #f1f5f9; padding: 0;
}

.cesc-checkout-wrap #payment ul.payment_methods {
	list-style: none; padding: 16px 20px; margin: 0;
	display: flex; flex-direction: column; gap: 8px;
}

/* Svaki payment method = flex red: [radio] [label] [opis u novom redu] */
.cesc-checkout-wrap #payment ul.payment_methods li {
	display:        flex;
	flex-direction: row;
	align-items:    flex-start;
	flex-wrap:      wrap;           /* opis ide u novi red */
	background:     #fff;
	border:         1.5px solid #e2e8f0;
	border-radius:  10px;
	padding:        14px 16px;
	gap:            0;
	transition:     border-color .2s, box-shadow .2s;
	position:       relative;
}

/* Odabrani metod */
.cesc-checkout-wrap #payment ul.payment_methods li.cesc-pay-active,
.cesc-checkout-wrap #payment ul.payment_methods li:has(> input:checked),
.cesc-checkout-wrap #payment ul.payment_methods li:has(> input[type="radio"]:checked) {
	border-color: var(--cesc-co-accent, #CDAA83);
	box-shadow:   0 0 0 3px rgba(205,170,131,.15);
}

/* Radio dugme — leva strana */
.cesc-checkout-wrap #payment ul.payment_methods li > input[type="radio"] {
	flex-shrink:  0;
	width:        17px;
	height:       17px;
	margin:       2px 12px 0 0; /* vertikalno poravnanje s labelom */
	accent-color: var(--cesc-co-accent, #CDAA83);
	cursor:       pointer;
}

/* Label — desno od radija */
.cesc-checkout-wrap #payment ul.payment_methods li > label {
	flex:        1;
	display:     flex;
	align-items: center;
	gap:         10px;
	flex-wrap:   wrap;
	font-weight: 600;
	font-size:   14px;
	color:       var(--cesc-t-text-secondary, #374151);
	cursor:      pointer;
	margin:      0;
	padding:     0;
	line-height: 1.4;
	min-width:   0;
}

/* Logo slike payment gateway-a unutar labele */
.cesc-checkout-wrap #payment ul.payment_methods li > label img {
	height:    24px;
	width:     auto;
	max-width: 80px;
	object-fit: contain;
	display:   inline-block;
	vertical-align: middle;
}

/* Opis (payment_box) — puni red ispod */
.cesc-checkout-wrap #payment ul.payment_methods li > .payment_box {
	flex:        0 0 100%;
	margin-left: 29px; /* poravnanje s labelom */
	margin-top:  10px;
	padding:     12px 14px;
	background:  #f8fafc;
	border-radius: 8px;
	font-size:   13px;
	color:       #64748b;
	font-family: var(--cesc-font);
}

/* Napomena o ceni poštarine za izabrani način plaćanja */
.cesc-gateway-postage-note {
	margin:      8px 0 0;
	padding:     0;
	font-size:   13px;
	font-weight: 600;
	color:       var(--cesc-co-accent, #9a7040);
}
.cesc-gateway-postage-note:first-child { margin-top: 0; }
.cesc-gateway-postage-note.is-free { color: #16a34a; }

/* ── Dugme "Potvrdi narudžbinu" ──────────────────────────────────── */
.cesc-checkout-wrap #place_order {
	display:         block !important;
	width:           calc(100% - 40px) !important;
	margin:          0 20px 20px !important;
	height:          52px !important;
	border:          none !important;
	border-radius:   10px !important;
	background:      #111827 !important;
	color:           #fff !important;
	font-size:       15px !important;
	font-weight:     700 !important;
	font-family:     var(--cesc-font) !important;
	letter-spacing:  .02em;
	cursor:          pointer;
	box-shadow:      0 4px 14px rgba(17,24,39,.2) !important;
	transition:      background .22s, transform .22s, box-shadow .22s !important;
}
.cesc-checkout-wrap #place_order:hover {
	transform:  translateY(-2px) !important;
	box-shadow: 0 8px 22px rgba(17,24,39,.3) !important;
}
.cesc-checkout-wrap #place_order:active { transform: translateY(0) !important; }

/* ── WC obaveštenja ──────────────────────────────────────────────── */
.cesc-checkout-wrap .woocommerce-error,
.cesc-checkout-wrap .woocommerce-message,
.cesc-checkout-wrap .woocommerce-info {
	border-radius: 10px; font-family: var(--cesc-font); font-size: 14px; margin-bottom: 20px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
	.cesc-checkout-2col form.woocommerce-checkout,
	.cesc-checkout-2col .woocommerce-checkout { grid-template-columns: 1fr; gap: 20px; }
	.cesc-checkout-2col #order_review     { position: static; grid-row: auto; grid-column: 1; }
	.cesc-checkout-2col #customer_details { grid-row: auto; grid-column: 1; }
}
@media (max-width: 600px) {
	.cesc-checkout-wrap .woocommerce-checkout .form-row-first,
	.cesc-checkout-wrap .woocommerce-checkout .form-row-last { display: block; width: 100%; margin-right: 0; }
	.cesc-checkout-wrap .woocommerce-billing-fields,
	.cesc-checkout-wrap .woocommerce-shipping-fields,
	.cesc-checkout-wrap .woocommerce-additional-fields { padding: 20px 16px; }

	/* Sažetak narudžbine — kompaktniji razmaci na telefonu */
	.cesc-checkout-wrap #order_review::before { padding: 14px 16px; }

	.cesc-checkout-wrap .woocommerce-checkout-review-order-table .cart_item td,
	.cesc-checkout-wrap .woocommerce-checkout-review-order-table .product-total {
		padding: 12px 14px;
	}
	.cesc-review-img-wrap { width: 44px; height: 44px; }
	.cesc-review-img-wrap img,
	.cesc-review-thumb { width: 44px !important; height: 44px !important; }

	.cesc-checkout-wrap .woocommerce-checkout-review-order-table tfoot th,
	.cesc-checkout-wrap .woocommerce-checkout-review-order-table tfoot td { padding: 10px 14px; }
	.cesc-checkout-wrap .woocommerce-checkout-review-order-table tfoot .order-total th,
	.cesc-checkout-wrap .woocommerce-checkout-review-order-table tfoot .order-total td { padding: 14px; }

	/* Načini plaćanja — manje margine, opis preko cele širine */
	.cesc-checkout-wrap #payment ul.payment_methods { padding: 14px 16px; }
	.cesc-checkout-wrap #payment ul.payment_methods li { padding: 12px 14px; }
	.cesc-checkout-wrap #payment ul.payment_methods li > .payment_box { margin-left: 0; }

	.cesc-checkout-wrap #place_order {
		width:  calc(100% - 32px) !important;
		margin: 0 16px 16px !important;
	}
}

/* ── OVERRIDE: Payment metodi — forsirana primarna boja #CDAA83 ──── */

/* Radio dugme — accent-color sa !important pobija temu i WC */
.cesc-checkout-wrap #payment input[type="radio"],
.cesc-checkout-wrap #payment .input-radio,
.cesc-checkout-wrap input.input-radio {
	accent-color: #CDAA83 !important;
}

/* Border odabranog payment metoda */
.cesc-checkout-wrap #payment ul.payment_methods li.cesc-pay-active {
	border-color: #CDAA83 !important;
	box-shadow:   0 0 0 3px rgba(205,170,131,.2) !important;
}

/* :has() fallback za browsere koji ga podržavaju */
.cesc-checkout-wrap #payment ul.payment_methods li:has(input:checked),
.cesc-checkout-wrap #payment ul.payment_methods li:has(> input[type="radio"]:checked) {
	border-color: #CDAA83 !important;
	box-shadow:   0 0 0 3px rgba(205,170,131,.2) !important;
}

/* Override WC CSS varijabli ako ih tema koristi */
.cesc-checkout-wrap,
.cesc-checkout-wrap #payment {
	--wc-color-primary:                  #CDAA83;
	--wp-components-color-accent:        #CDAA83;
	--woocommerce-component-primary:     #CDAA83;
}

/* ═══════════════════════════════════════════════════════════════════
   Nudge traka — nezavisna, full-width sticky traka na dnu ekrana
   Vidljiva samo dok korpa ima proizvode (kontrolisano preko .is-visible,
   dodato/uklonjeno server-side pri svakom AJAX osvežavanju korpe).
   ═══════════════════════════════════════════════════════════════════ */

.cesc-nudge-bar-wrap {
	/* Prazan kad je traka isključena ili je korpa prazna — ne zauzima prostor. */
	display: contents;
}

.cesc-nudge-bar {
	position:        fixed;
	left:            0;
	right:           0;
	bottom:          0;
	z-index:         9985; /* ispod overlay-a (9990+) ali iznad ostalog sadržaja */
	display:         none;
	transform:       translateY(100%);
	opacity:         0;
	background:      var(--cesc-nb-bg, #111827);
	color:           var(--cesc-nb-fg, #ffffff);
	font-family:     var(--cesc-font);
	box-shadow:      0 -8px 28px rgba(0,0,0,.22);
	transition:      transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}

.cesc-nudge-bar.is-visible {
	display:   block;
	transform: translateY(0);
	opacity:   1;
	animation: cesc-nudge-slide-in .4s cubic-bezier(.4,0,.2,1);
}

@keyframes cesc-nudge-slide-in {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.cesc-nudge-bar-inner {
	display:         flex;
	align-items:     center;
	gap:             16px;
	max-width:       1200px;
	margin:          0 auto;
	padding:         14px 24px;
}

.cesc-nudge-icon {
	flex:            0 0 auto;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.cesc-nudge-icon svg {
	width:  22px;
	height: 22px;
	stroke: var(--cesc-nb-fg, #ffffff);
}

.cesc-nudge-msg {
	flex:        1 1 auto;
	font-size:   14px;
	font-weight: 600;
	line-height: 1.35;
	color:       var(--cesc-nb-fg, #ffffff);
}

.cesc-nudge-actions {
	flex:            0 0 auto;
	display:         flex;
	align-items:     center;
	gap:             10px;
}

.cesc-nudge-open-cart {
	all:             unset;
	box-sizing:      border-box;
	cursor:          pointer;
	white-space:     nowrap;
	font-family:     var(--cesc-font);
	font-size:       13px;
	font-weight:     600;
	color:           var(--cesc-nb-fg, #ffffff);
	padding:         10px 16px;
	border-radius:   40px;
	border:          1.5px solid rgba(255,255,255,.35);
	transition:      background .25s ease, border-color .25s ease;
}

.cesc-nudge-open-cart:hover {
	background:  var(--cesc-nb-open-hover, rgba(255,255,255,.12));
	border-color: rgba(255,255,255,.6);
}

.cesc-nudge-open-cart:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 2px;
}

.cesc-nudge-checkout-btn {
	all:             unset;
	box-sizing:      border-box;
	cursor:          pointer;
	white-space:     nowrap;
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	font-family:     var(--cesc-font);
	font-size:       13px;
	font-weight:     700;
	color:           var(--cesc-nb-checkout-text, #ffffff);
	background:      var(--cesc-nb-accent, #22c55e);
	padding:         10px 18px;
	border-radius:   40px;
	transition:      background .25s ease, transform .25s ease, color .25s ease;
}

.cesc-nudge-checkout-btn:hover {
	background: var(--cesc-nb-checkout-hover, var(--cesc-nb-accent));
	color:      var(--cesc-nb-checkout-hover-text, var(--cesc-nb-checkout-text, #ffffff));
	transform:  translateY(-1px);
}

.cesc-nudge-checkout-btn:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 2px;
}

.cesc-nudge-checkout-btn svg {
	width:  13px;
	height: 13px;
	flex:   0 0 auto;
}

@media (max-width: 640px) {
	.cesc-nudge-bar-inner {
		flex-wrap: wrap;
		padding:   12px 16px;
		gap:       10px;
	}

	.cesc-nudge-msg {
		flex-basis: 100%;
		font-size:  13px;
		order:      1;
	}

	.cesc-nudge-icon { order: 0; }

	.cesc-nudge-actions {
		order:      2;
		flex-basis: 100%;
		justify-content: stretch;
	}

	.cesc-nudge-open-cart,
	.cesc-nudge-checkout-btn {
		flex: 1 1 0;
		justify-content: center;
		text-align: center;
	}
}

/* ── Povezani proizvodi ispod korpe ────────────────────────────────
   Sopstveni dizajn kartica — bez zavisnosti od ACF Set Proizvoda
   plugin-a ili Elementor Loop Template-a. Koristi iste boje/font koje
   je admin već podesio za dugmad i tekst u ostatku korpe. */
.cesc-related-section {
	max-width: 1200px;
	margin:    0 auto 40px;
	padding:   0 24px;
}

.cesc-related-title {
	margin:         0 0 20px;
	font-size:      21px;
	font-weight:    700;
	letter-spacing: -.015em;
	color:          var(--cesc-t-text, #111827);
	font-family:    var(--cesc-font);
}

.cesc-related-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap:                   20px;
}

.cesc-related-card {
	position:      relative;
	display:       flex;
	flex-direction: column;
	background:    #fff;
	border:        1px solid #ececec;
	border-radius: 16px;
	padding:       14px;
	transition:    box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.cesc-related-card:hover {
	border-color: transparent;
	box-shadow:   0 16px 32px -12px rgba(17,24,39,.14);
	transform:    translateY(-3px);
}

.cesc-related-card-link {
	position: absolute;
	inset:    0;
	z-index:  1;
}

.cesc-related-card-media {
	position:      relative;
	margin-bottom: 14px;
	border-radius: 12px;
	overflow:      hidden;
	background:    #f7f5f2;
	aspect-ratio:  1 / 1;
}

.cesc-related-card-media img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform .5s ease;
}

.cesc-related-card:hover .cesc-related-card-media img {
	transform: scale(1.06);
}

.cesc-related-card-sale {
	position:       absolute;
	top:            10px;
	left:           10px;
	z-index:        2;
	background:     #111827;
	color:          #fff;
	font-size:      10px;
	font-weight:    700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding:        4px 9px;
	border-radius:  20px;
}

.cesc-related-card-title {
	margin:      0 0 6px;
	font-size:   14px;
	font-weight: 600;
	line-height: 1.4;
	font-family: var(--cesc-font);
}

.cesc-related-card-title a {
	color:           var(--cesc-t-text, #111827);
	text-decoration: none;
}

.cesc-related-card-price {
	font-size:     14px;
	font-family:   var(--cesc-font);
	color:         var(--cesc-t-text, #111827);
	margin-bottom: 10px;
}

.cesc-related-card-price del {
	color:           #a3a3a3;
	font-weight:     400;
	margin-right:    6px;
	text-decoration: line-through;
}

.cesc-related-card-price ins {
	text-decoration: none;
	font-weight:     600;
}

.cesc-related-card-badge {
	align-self:    flex-start;
	font-size:     11px;
	font-weight:   600;
	color:         var(--cesc-co-accent, #9a7040);
	background:    rgba(205,170,131,.14);
	padding:       4px 9px;
	border-radius: 20px;
	margin-bottom: 12px;
}

.cesc-related-add-btn {
	position:      relative;
	z-index:       2;
	margin-top:    auto;
	border:        none;
	cursor:        pointer;
	padding:       10px 14px;
	font-size:     13px;
	font-weight:   700;
	font-family:   var(--cesc-font);
	border-radius: 10px;
	background:    var(--cesc-t-checkout-bg, #111827);
	color:         var(--cesc-t-checkout-text, #fff);
	transition:    background var(--cesc-transition, .22s);
}

.cesc-related-add-btn:hover {
	background: var(--cesc-t-checkout-hover-bg, #374151);
}

.cesc-related-add-btn:focus-visible {
	outline:        3px solid #60a5fa;
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.cesc-related-section { padding: 0 16px; margin-bottom: 28px; }
	.cesc-related-title   { font-size: 18px; margin-bottom: 14px; }
	.cesc-related-grid    { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
	.cesc-related-card    { padding: 10px; border-radius: 14px; }
	.cesc-related-add-btn { width: 100%; text-align: center; }
}