/* ===== "Deliver to ..." slim top bar (header ke UPAR) ===== */

/* BUG FIX: pehle ye sirf theme ke `wp_body_open` DOM-order par bharosa karta
   tha, jo mobile view mein kai baar theme ke apne sticky/fixed mobile-header
   ke peeche chhup jaata tha (dikhta hi nahi tha). Ab ye HAMESHA (mobile ho ya
   desktop) `position: fixed` top par rehta hai, ek bahut high z-index ke
   saath — taaki kisi bhi theme ke apne header/sticky-nav ke upar hi dikhe,
   chahe DOM order kuch bhi ho. JS (occ-delivery-bar.js) is bar ki height ke
   barabar page ke <body> mein top-padding jod deta hai, taaki neeche ka
   content isके peeche chhup na jaaye. */
#occ-delivery-bar-root {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* BUG FIX: pehle 999999 tha — itna high z-index ki wajah se ye theme ke
	   apne mobile menu/off-canvas drawer jaise components ke UPAR se dikh
	   kar unse overlap karta tha (wo drawers khud bhi apna z-index high
	   rakhte hain, par utna extreme kam hi themes karti hain). 9000 par
	   le aaye hain — ye zyaadatar themes ke normal header/sticky-nav se
	   upar rehne ke liye kaafi hai, par dedicated drawers/modals (jo
	   almost hamesha isse bahut zyada, jaise 99999+ rakhte hain) ke NEECHE
	   rehta hai, taaki wo humare bar ke peeche na dabein.
	   Agar kahin phir bhi koi sticky header is se upar nikal aaye, batayein
	   — is exact number ko us hisaab se aur tune kar denge. */
	z-index: 9000;
}

/* Point 3 BUG FIX: jab bhi koi overlay/drawer (theme ka mini-cart slider,
   humara Buy-Now popup, ya koi bhi aur modal) khula ho aur <body>/<html>
   par scroll-lock lage (occ-delivery-bar.js isko detect karta hai), bar ko
   poori tarah chhupa dete hain — taaki us overlay ke UPAR se dikh kar
   overlap na kare. */
#occ-delivery-bar-root.occ-bar-hidden-for-overlay {
	display: none;
}

/* "📍 Set your delivery location" — jab tak koi location set nahi hoti
   (ya customer popup band kar de bina chune), ye chhota clickable strip
   dikhta hai (bar ki jagah khaali nahi rehti). */
.occ-delivery-prompt-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 14px;
	/* Admin "Bar Colour" setting se — mobile/tablet/desktop sab jagah ek
	   jaisa (isi variable ko poori file mein sirf yahi 2 jagah use karte
	   hain, koi alag media-query override nahi). */
	background: var( --occ-bar-bg, #fdf6ea );
	border: 0;
	border-bottom: 1px solid color-mix( in srgb, var( --occ-bar-bg, #fdf6ea ) 78%, #000 12% );
	font-size: 12px;
	font-weight: 700;
	color: #8a6d3b;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}

.occ-delivery-prompt-bar[hidden] {
	display: none;
}

/* WordPress ka apna admin-bar (logged-in users ko dikhne wala kaala top bar)
   bhi hamesha `position: fixed; top: 0;` hota hai — usse takraane se bachne
   ke liye hamara bar uske NEECHE se shuru hota hai (WP ke apne hi standard
   admin-bar heights: desktop 32px, ~782px se neeche 46px). */
body.admin-bar #occ-delivery-bar-root {
	top: 32px;
}
@media screen and ( max-width: 782px ) {
	body.admin-bar #occ-delivery-bar-root {
		top: 46px;
	}
}

.occ-delivery-bar {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 14px;
	/* Admin "Bar Colour" setting se — mobile/tablet/desktop sab jagah ek
	   jaisa. Border thoda darker shade auto-derive hota hai isi color se. */
	background: var( --occ-bar-bg, #fdf6ea );
	border-bottom: 1px solid color-mix( in srgb, var( --occ-bar-bg, #fdf6ea ) 78%, #000 12% );
	font-family: inherit;
}

.occ-delivery-bar-inner {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

.occ-delivery-bar-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.occ-delivery-bar-row-main {
	align-items: flex-start;
}

.occ-delivery-bar-pin {
	font-size: 14px;
	line-height: 1.3;
}

.occ-delivery-bar-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.occ-delivery-bar-label {
	font-size: 9px;
	letter-spacing: 0.04em;
	/* "DELIVER TO" — ab tier-label (jaise "Standard Delivery") jaisa hi
	   green + bold, jaisa maanga gaya. */
	color: #1f5f43;
	font-weight: 700;
}

.occ-delivery-bar-label strong {
	/* "HOME" wala word — dark red + bold. */
	color: #8b0000;
	font-weight: 700;
}

.occ-delivery-bar-place {
	font-size: 12px;
	font-weight: 700;
	color: #1f2a24;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* CHANGE button — bold, square-ish (chhota border-radius) aur patla (kam
   height), taaki poori bar patli ho jaaye.
   Screenshots mein ye button apni CSS se kaafi lamba (~45px) dikh raha tha —
   wajah: theme (Ellesi) ke apne global `button` styles (min-height/padding/
   line-height) hamare CSS ko override kar rahe the. Isliye yahan ID-prefixed
   selector + !important laga kar size/shape ko theme-proof kar diya hai. */
#occ-delivery-bar-root .occ-delivery-bar-change {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: auto !important;
	height: 20px !important;
	min-height: 0 !important;
	max-height: 20px !important;
	margin: 0 !important;
	padding: 0 9px !important;
	font-size: 9.5px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: #1f5f43 !important;
	background: transparent !important;
	border: 1.5px solid #1f5f43 !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	cursor: pointer;
}

.occ-delivery-bar-row-est {
	font-size: 10.5px;
	color: #4b463b;
}

.occ-delivery-bar-tier {
	font-weight: 700;
	color: #1f5f43;
	white-space: nowrap;
}

.occ-delivery-bar-est strong {
	color: #1f2a24;
	font-weight: 700;
}

/* "Get by" shabd + poora time — sirf BOLD (koi background highlight nahi). */
/* "Get by" ke baad ka time — thoda bada (1.1x) aur bold (800),
   taaki mobile aur desktop dono par saaf dikhe. em use kiya hai, isliye
   desktop par admin ke font-scale ke saath apne-aap proportional rehta hai. */
.occ-delivery-bar-getby {
	font-weight: 800;
	color: #1f2a24;
}

.occ-delivery-bar-getby strong {
	background: none;
	color: #1f2a24;
	font-weight: 800;
	font-size: 1.1em;
	line-height: 1.2;
	padding: 0;
}

/* Desktop/tablet: teeno hisse (location, order-by, get-by) ek hi line mein,
   patla (kam vertical space) — mobile par jaisa pehle tha (do lines mein,
   thoda zyada breathing room) waisa hi rehta hai, kyunki wo already sahi tha. */
@media screen and ( min-width: 783px ) {
	/* Font size aur padding ab dono admin Settings se control hote hain
	   (Delivery Location Bar → "Desktop Font Size" / "Desktop Padding") —
	   isliye har baar code badalne ki zaroorat nahi, admin khud tune kar
	   sakta hai. --occ-desktop-font-scale ek multiplier hai (1.3 = 130%),
	   --occ-desktop-padding ek px value. Dono ke liye fallback bhi diya
	   hai agar kisi wajah se variable set na ho.
	   Mobile (is media query ke bahar) bilkul nahi chhua — sirf yahi block
	   in variables ko use karta hai. */
	.occ-delivery-bar {
		padding: var( --occ-desktop-padding, 10px ) calc( var( --occ-desktop-padding, 10px ) * 2.4 );
	}
	.occ-delivery-bar-inner {
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		gap: 20px;
	}
	.occ-delivery-bar-row {
		flex-wrap: nowrap;
	}
	.occ-delivery-bar-row-main {
		align-items: center;
		flex: 0 1 auto;
		min-width: 0;
	}
	.occ-delivery-bar-text {
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}
	.occ-delivery-bar-label,
	.occ-delivery-bar-place {
		white-space: nowrap;
	}
	.occ-delivery-bar-row-est {
		flex: 0 0 auto;
		gap: 18px;
		border-left: 1px solid #e6cf9f;
		padding-left: 18px;
	}
	.occ-delivery-bar-pin {
		font-size: calc( 14px * var( --occ-desktop-font-scale, 1.3 ) );
	}
	.occ-delivery-bar-label {
		font-size: calc( 9px * var( --occ-desktop-font-scale, 1.3 ) );
	}
	.occ-delivery-bar-place {
		font-size: calc( 12px * var( --occ-desktop-font-scale, 1.3 ) );
	}
	.occ-delivery-bar-row-est {
		font-size: calc( 10.5px * var( --occ-desktop-font-scale, 1.3 ) );
		gap: calc( 12px * var( --occ-desktop-font-scale, 1.3 ) );
		padding-left: calc( 12px * var( --occ-desktop-font-scale, 1.3 ) );
	}
	/* CHANGE button — base rule ID-scoped + !important hai (theme override
	   rokne ke liye), isliye yahan bhi wahi specificity chahiye taaki
	   desktop par sahi se scale ho. */
	#occ-delivery-bar-root .occ-delivery-bar-change {
		height: calc( 20px * var( --occ-desktop-font-scale, 1.3 ) ) !important;
		max-height: calc( 20px * var( --occ-desktop-font-scale, 1.3 ) ) !important;
		font-size: calc( 9.5px * var( --occ-desktop-font-scale, 1.3 ) ) !important;
		padding: 0 calc( 9px * var( --occ-desktop-font-scale, 1.3 ) ) !important;
		border-width: 1.5px !important;
	}
}

@media ( max-width: 480px ) {
	.occ-delivery-bar {
		padding: 3px 10px;
	}
	.occ-delivery-bar-inner {
		gap: 1px;
	}
	.occ-delivery-bar-row {
		gap: 3px 10px;
	}
	.occ-delivery-bar-row-main {
		/* BUG FIX: button abhi bhi text-block se lamba tha, isliye "center"
		   karke usse 2-line text ke saath vertically beech mein rakhte hain —
		   button ki apni height bhi neeche kaafi kam kar di hai. */
		align-items: center;
	}
	.occ-delivery-bar-pin {
		font-size: 12px;
	}
	.occ-delivery-bar-label {
		font-size: 8px;
	}
	.occ-delivery-bar-place {
		font-size: 11px;
		gap: 6px;
	}
	#occ-delivery-bar-root .occ-delivery-bar-change {
		height: 16px !important;
		max-height: 16px !important;
		font-size: 8px !important;
		padding: 0 6px !important;
		border-width: 1px !important;
	}
	.occ-delivery-bar-row-est {
		font-size: 9.5px;
		gap: 3px 10px;
	}
}

/* ===== Denied banner (GPS permission deny/error) ===== */
.occ-location-denied-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #fdecea;
	color: #a83226;
	border-bottom: 1px solid #f6c6be;
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 600;
}

.occ-location-denied-banner[hidden] {
	display: none;
}

.occ-location-denied-close {
	background: transparent;
	border: 0;
	color: #a83226;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
}

/* ===== "Welcome" location modal ===== */
.occ-location-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 15, 20, 18, 0.45 );
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.occ-location-modal-overlay[hidden] {
	display: none;
}

.occ-location-modal {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: #ffffff;
	border-radius: 16px;
	padding: 24px 22px 22px;
	box-sizing: border-box;
	box-shadow: 0 20px 50px rgba( 0, 0, 0, 0.2 );
}

.occ-location-modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: transparent;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: #8a8f98;
	cursor: pointer;
}

.occ-location-modal h2 {
	margin: 0 0 16px;
	font-size: 19px;
	font-weight: 800;
	color: #14181f;
}

.occ-location-modal-sub {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.4;
	color: #3d4149;
}

.occ-location-modal-pin-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f1f2f4;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.occ-location-detect-btn {
	width: 100%;
	background: #22c55e;
	color: #ffffff;
	border: 0;
	border-radius: 10px;
	padding: 13px 16px;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
}

.occ-location-detect-btn:disabled {
	opacity: 0.7;
	cursor: default;
}

.occ-location-modal-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	color: #9aa0a8;
	font-size: 12px;
	font-weight: 600;
}

.occ-location-modal-divider::before,
.occ-location-modal-divider::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: #e5e7eb;
}

.occ-location-pincode-row {
	display: flex;
}

.occ-location-pincode-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d7dade;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
}

.occ-location-pincode-error {
	margin: 8px 2px 0;
	font-size: 12px;
	color: #d33;
	font-weight: 600;
}

.occ-location-pincode-error[hidden] {
	display: none;
}

/* ===== Checkout page: "updated delivery estimate" toast ===== */
.occ-checkout-delivery-toast {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	background: #eaf7ee;
	border: 1px solid #bfe6cb;
	color: #14532d;
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 0 18px;
	font-size: 12.5px;
}

.occ-checkout-delivery-toast-tier {
	font-weight: 700;
}

.occ-checkout-delivery-toast-close {
	margin-left: auto;
	background: transparent;
	border: 0;
	font-size: 18px;
	line-height: 1;
	color: #14532d;
	cursor: pointer;
}

/* ===== Order details: delivery-estimate box (customer + admin) ===== */
.occ-order-delivery-estimate {
	margin: 24px 0;
	padding: 14px 18px;
	background: #fdf6ea;
	border: 1px solid #f0dcb8;
	border-radius: 8px;
}

.occ-order-delivery-estimate h2 {
	font-size: 15px;
	margin: 0 0 8px;
}

.occ-order-delivery-tier {
	font-weight: 700;
	color: #1f5f43;
}

.occ-admin-order-delivery-estimate {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed #ddd;
	font-size: 13px;
}

/* ===== Point 2: logged-in pincode-mismatch confirmation dialog ===== */
.occ-mismatch-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 15, 20, 18, 0.45 );
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.occ-mismatch-modal {
	width: 100%;
	max-width: 420px;
	background: #ffffff;
	border-radius: 16px;
	padding: 22px;
	box-sizing: border-box;
	box-shadow: 0 20px 50px rgba( 0, 0, 0, 0.2 );
}

.occ-mismatch-modal h3 {
	margin: 0 0 10px;
	font-size: 16px;
}

.occ-mismatch-modal p {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #3d4149;
}

.occ-mismatch-modal-actions {
	display: flex;
	gap: 10px;
}

.occ-mismatch-modal-actions button {
	flex: 1 1 0;
	border-radius: 8px;
	padding: 11px 12px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.occ-mismatch-confirm {
	background: #22c55e;
	color: #fff;
	border: 0;
}

.occ-mismatch-keep {
	background: #fff;
	color: #3d4149;
	border: 1px solid #d7dade;
}


/* Optional right-corner slot (occ_delivery_bar_extra action). Absolute, isliye bar ki
   height/width par koi asar nahi. Slot khaali ho to ye element render hi nahi hota. */
#occ-delivery-bar-root .occ-delivery-bar {
	position: relative;
}
#occ-delivery-bar-root .occ-delivery-bar-extra {
	position: absolute;
	right: 14px;
	top: 6px;
	z-index: 2;
	display: flex;
	align-items: flex-start;
}