/* ===== Quick Order & Add to Cart Popup — Styles ===== */
/* নিচের :root ভ্যালুগুলো ডিফল্ট/ফলব্যাক — সেটিংস পেজ থেকে বদলালে PHP এর
   ডাইনামিক ইনলাইন CSS এই ভ্যালুগুলো override করে দেয়। */
:root{
	--qop-primary: #BC4749;
	--qop-primary-dark: #a13a3c;
	--qop-cart-text-color: #ffffff;
	--qop-order-bg: #BC4749;
	--qop-order-hover: #a13a3c;
	--qop-order-text-color: #ffffff;
	--qop-chip-bg: #f5f5f5;
	--qop-border: #e2e2e2;
	--qop-radius: 4px;
	--qop-btn-height: 44px;
	--qop-btn-font-size: 14px;
	--qop-btn-font-weight: 600;
	--qop-btn-gap: 8px;
	--qop-image-ratio: 1/1;
	--qop-image-fit: cover;
	--qop-category-color: #767676;
	--qop-category-font-size: 12px;
	--qop-content-spacing: 8px;
	--qop-contact-bg: #ffffff;
	--qop-contact-border: #e5e7eb;
	--qop-contact-call-color: #12805c;
	--qop-contact-whatsapp-color: #25D366;
	--qop-contact-number-color: #12805c;
	--qop-contact-radius: 10px;
}

/* ===================================================================
   Product category label (Shop/Category grid) — shown above the title.
   Toggle from Settings; when the setting is off, PHP simply doesn't
   output this element (no CSS hide needed).
   =================================================================== */
.qop-loop-category{
	display:block;
	color:var(--qop-category-color);
	font-size:var(--qop-category-font-size);
	text-transform:uppercase;
	letter-spacing:.03em;
	line-height:1.3;
	margin:0 0 var(--qop-content-spacing);
}

/* ===================================================================
   Standard spacing between Category / Title / Price / Buttons so every
   product card in the grid lines up the same way, regardless of theme.
   =================================================================== */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title,
ul.products li.product h3.woocommerce-loop-product__title{
	margin-top:0 !important;
	margin-bottom:var(--qop-content-spacing) !important;
}
ul.products li.product .price{
	display:block;
	margin:0 0 var(--qop-content-spacing) !important;
}

/* ===================================================================
   Loop buttons (Shop/Category grid) — Add To Cart ও Order Now
   =================================================================== */
.qop-buttons{
	display:flex;
	gap:var(--qop-btn-gap);
	margin-top:var(--qop-content-spacing);
	width:100%;
}
.qop-buttons .qop-btn{
	flex:1;
	border:none;
	border-radius:var(--qop-radius);
	min-height:var(--qop-btn-height);
	padding:6px 8px;
	font-size:var(--qop-btn-font-size);
	font-weight:var(--qop-btn-font-weight);
	cursor:pointer;
	text-align:center;
	line-height:1.2;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background .15s ease;
	box-sizing:border-box;
	margin:0 !important;
}
.qop-buttons .qop-btn-cart{
	background:var(--qop-primary);
	color:var(--qop-cart-text-color);
}
.qop-buttons .qop-btn-cart:hover{ background:var(--qop-primary-dark); }
.qop-buttons .qop-btn-order{
	background:var(--qop-order-bg);
	color:var(--qop-order-text-color);
}
.qop-buttons .qop-btn-order:hover{ background:var(--qop-order-hover); }

/* মোবাইলে ডিফল্ট ফলব্যাক (768px) — সেটিংস থেকে ব্রেকপয়েন্ট/লেআউট বদলানো
   হলে PHP ইনলাইন CSS এই ব্লকটাও override করে, তাই দুটো মিলে যায়। */
@media (max-width:768px){
	.qop-buttons{ flex-direction:column; }
	.qop-buttons .qop-btn{ width:100%; }
}

/* ===================================================================
   স্ট্যান্ডার্ড WooCommerce-স্টাইল রেসপন্সিভ প্রোডাক্ট ছবি — সব ডিভাইসে
   সমান সাইজ/অনুপাত (Shop, Category, Related/Upsell গ্রিড সব জায়গায়)
   =================================================================== */
ul.products li.product > a > img,
ul.products li.product .attachment-woocommerce_thumbnail,
li.product img,
.type-product img,
.wc-block-grid__product img,
.woocommerce ul.products li.product img{
	width:100% !important;
	height:auto !important;
	aspect-ratio:var(--qop-image-ratio);
	object-fit:var(--qop-image-fit);
	display:block;
}

/* ===================================================================
   Single product page — Quantity + Add to Cart + Order Now সব একই সারিতে,
   ডেস্কটপ ও মোবাইল দুই জায়গাতেই এক লাইনে থাকে (নিচের JS তিনটাকে একসাথে wrap করে)।
   =================================================================== */
.qop-single-buttons-wrap{
	display:flex;
	align-items:stretch;
	gap:var(--qop-btn-gap);
	flex-wrap:nowrap;
	margin-top:8px;
}
.qop-single-buttons-wrap .quantity{
	display:flex;
	flex:0 0 auto;
	margin:0 !important;
}
.qop-single-buttons-wrap .quantity .qty{
	min-height:var(--qop-btn-height);
	height:var(--qop-btn-height);
	width:56px;
	box-sizing:border-box;
	border-radius:var(--qop-radius);
}
.qop-single-buttons-wrap .single_add_to_cart_button,
.qop-single-buttons-wrap .qop-single-order-now{
	min-height:var(--qop-btn-height) !important;
	height:auto !important;
	font-size:var(--qop-btn-font-size) !important;
	font-weight:var(--qop-btn-font-weight) !important;
	border-radius:var(--qop-radius) !important;
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	margin:0 !important;
	flex:1 1 0;
	min-width:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	box-sizing:border-box;
}
.qop-single-order-now{
	background:var(--qop-order-bg) !important;
	border-color:var(--qop-order-bg) !important;
	color:var(--qop-order-text-color) !important;
}
.qop-single-order-now:hover,
.qop-single-order-now:focus{
	background:var(--qop-order-hover) !important;
	border-color:var(--qop-order-hover) !important;
	color:var(--qop-order-text-color) !important;
}

/* খুব ছোট স্ক্রিনেও (মোবাইল) সব সময় এক লাইনেই থাকে — এখানে চাপ কমাতে
   প্যাডিং/টেক্সট সাইজ একটু ছোট করা হয়, বাটন নিচে নামে না। */
@media (max-width:400px){
	.qop-single-buttons-wrap{ gap:6px; }
	.qop-single-buttons-wrap .quantity .qty{ width:40px; }
	.qop-single-buttons-wrap .single_add_to_cart_button,
	.qop-single-buttons-wrap .qop-single-order-now{
		font-size:calc(var(--qop-btn-font-size) - 2px) !important;
		padding-left:6px !important;
		padding-right:6px !important;
	}
}

/* ===================================================================
   Call Now / Message Now (WhatsApp) — Order Now বাটনের নিচে দুইটা বক্স।
   নাম্বার, লেবেল ও রং সব Settings পেজ থেকে বদলানো যায়।
   =================================================================== */
.qop-contact-buttons{
	display:flex;
	gap:var(--qop-btn-gap);
	margin-top:var(--qop-btn-gap);
	flex-wrap:wrap;
}
.qop-contact-box{
	flex:1 1 140px;
	display:flex;
	align-items:center;
	gap:10px;
	background:var(--qop-contact-bg);
	border:1px solid var(--qop-contact-border);
	border-radius:var(--qop-contact-radius);
	padding:10px 12px;
	text-decoration:none !important;
	box-sizing:border-box;
	position:relative;
	transition:border-color .15s ease;
}
.qop-contact-box:hover{ border-color:#c9cdd3; }
.qop-contact-icon{
	position:relative;
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:26px;
	height:26px;
}
.qop-contact-icon svg{
	width:24px;
	height:24px;
}
.qop-contact-call .qop-contact-icon{ color:var(--qop-contact-call-color); }
.qop-contact-whatsapp .qop-contact-icon{ color:var(--qop-contact-whatsapp-color); }
.qop-contact-dot{
	position:absolute;
	top:-2px;
	right:-2px;
	width:8px;
	height:8px;
	border-radius:50%;
	background:#22c55e;
	border:2px solid var(--qop-contact-bg);
}
.qop-contact-text{
	display:flex;
	flex-direction:column;
	min-width:0;
}
.qop-contact-label{
	font-size:12px;
	color:#6b7280;
	line-height:1.3;
}
.qop-contact-number{
	font-size:13px;
	font-weight:700;
	color:var(--qop-contact-number-color);
	line-height:1.3;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

@media (max-width:360px){
	.qop-contact-label{ font-size:11px; }
	.qop-contact-number{ font-size:12px; }
}
/* থিমের নিজস্ব Add to Cart বাটনও একই রঙে আনার জন্য — একাধিক common selector
   pattern দিয়ে দেওয়া হয়েছে, কারণ বিভিন্ন থিম বিভিন্ন ক্লাস ব্যবহার করে। */
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.single_add_to_cart_button,
button.single_add_to_cart_button,
a.single_add_to_cart_button,
.single_add_to_cart_button.button.alt{
	background-color:var(--qop-primary) !important;
	border-color:var(--qop-primary) !important;
	color:var(--qop-cart-text-color) !important;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover,
a.single_add_to_cart_button:hover{
	background-color:var(--qop-primary-dark) !important;
	border-color:var(--qop-primary-dark) !important;
	color:var(--qop-cart-text-color) !important;
}

/* কোয়ান্টিটি বক্সের হাইট বাটনগুলোর সাথে মিলিয়ে দেওয়া */
.woocommerce div.product form.cart .quantity .qty{
	min-height:var(--qop-btn-height);
	box-sizing:border-box;
}

/* সিঙ্গেল প্রোডাক্ট পেজের বাটন মোবাইলে stack হবে নাকি এক লাইনে থাকবে —
   এটা এখন সেটিংস (single_mobile_layout) থেকে নিয়ন্ত্রিত হয় এবং PHP এর
   ডাইনামিক ইনলাইন CSS দিয়ে যোগ হয় (ডিফল্ট: এক লাইনেই থাকবে)। */

/* ===================================================================
   Modal overlay + box
   =================================================================== */
.qop-modal{
	position:fixed;
	inset:0;
	z-index:99999;
	display:none;
}
.qop-modal.qop-open{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	box-sizing:border-box;
	overflow-y:auto;
}
.qop-modal-overlay{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0.55);
}
.qop-modal-box{
	position:relative;
	background:#fff;
	max-width:480px;
	width:92%;
	margin:auto;
	border-radius:6px;
	overflow:hidden;
	box-shadow:0 10px 40px rgba(0,0,0,0.25);
	max-height:88vh;
	display:flex;
	flex-direction:column;
}
.qop-modal-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:18px 20px;
	border-bottom:1px solid var(--qop-border);
}
.qop-modal-title{
	margin:0;
	font-size:18px;
	font-weight:600;
	color:#222;
}
.qop-modal-close{
	background:none;
	border:none;
	font-size:26px;
	line-height:1;
	cursor:pointer;
	color:#555;
	padding:0 4px;
}
.qop-modal-close:hover{ color:#000; }

.qop-modal-body{
	padding:16px 20px 22px;
	overflow-y:auto;
}
.qop-loading{
	text-align:center;
	padding:30px 0;
	color:#777;
}

/* Product summary inside modal */
.qop-product-top{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:16px;
}
.qop-product-image img{
	width:56px;
	height:56px;
	object-fit:cover;
	border-radius:4px;
}
.qop-product-title{
	font-weight:600;
	font-size:14px;
	color:#222;
}
.qop-main-price{ font-size:13px; color:#777; }
.qop-main-price ins{ text-decoration:none; color:var(--qop-primary); }
.qop-main-price del{ opacity:0.6; margin-right:4px; }

/* Attribute chips — Size/Color ইত্যাদি এক লাইনে ক্লিকযোগ্য টেক্সট, dropdown না */
.qop-attribute-chips{ margin-bottom:16px; }
.qop-attr-label{
	font-weight:600;
	font-size:14px;
	margin-bottom:8px;
	color:#222;
}
.qop-chip-row{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}
.qop-chip{
	background:var(--qop-chip-bg);
	border:1px solid var(--qop-border);
	border-radius:var(--qop-radius);
	padding:8px 16px;
	font-size:13px;
	font-weight:500;
	color:#333;
	cursor:pointer;
	line-height:1.2;
	white-space:nowrap;
}
.qop-chip:hover{ border-color:var(--qop-primary); }
.qop-chip.qop-chip-selected{
	background:var(--qop-primary);
	border-color:var(--qop-primary);
	color:var(--qop-cart-text-color);
}
.qop-chip:disabled{
	opacity:0.4;
	cursor:not-allowed;
}

/* সিঙ্গেল প্রোডাক্ট পেজের আসল WooCommerce Size/Color ড্রপডাউন লুকিয়ে
   এক-লাইন চিপ স্টাইলে দেখানোর জন্য (নিচের JS কোড এটা তৈরি করে) */
.variations select.qop-native-select-hidden{
	display:none !important;
}
.qop-native-chip-row{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:4px 0 6px;
}
.woocommerce div.product form.cart .variations td.value,
.woocommerce div.product form.cart .variations th.label{
	padding-bottom:6px;
}

.qop-stock-status{
	margin-top:4px;
	margin-bottom:10px;
	color:#c0392b;
	font-size:13px;
}

/* Confirm বাটন (variable product) ও simple product বাটন — action অনুযায়ী রং */
.qop-confirm-btn,
.qop-simple-btn{
	width:100%;
	border:none;
	border-radius:var(--qop-radius);
	min-height:var(--qop-btn-height);
	padding:8px 20px;
	font-weight:var(--qop-btn-font-weight);
	font-size:var(--qop-btn-font-size);
	cursor:pointer;
	margin-top:6px;
	box-sizing:border-box;
}
.qop-confirm-btn.qop-action-cart,
.qop-simple-btn.qop-action-cart{
	background:var(--qop-primary);
	color:var(--qop-cart-text-color);
}
.qop-confirm-btn.qop-action-cart:hover,
.qop-simple-btn.qop-action-cart:hover{ background:var(--qop-primary-dark); }
.qop-confirm-btn.qop-action-order,
.qop-simple-btn.qop-action-order{
	background:var(--qop-order-bg);
	color:var(--qop-order-text-color);
}
.qop-confirm-btn.qop-action-order:hover,
.qop-simple-btn.qop-action-order:hover{ background:var(--qop-order-hover); }
.qop-confirm-btn:disabled{
	background:#ccc !important;
	color:#666 !important;
	cursor:not-allowed;
}

/* Simple product (no variations) */
.qop-simple-product{ text-align:center; padding:6px 0; }

.qop-success-msg{
	text-align:center;
	color:#1e7e34;
	font-weight:600;
	margin-top:14px;
}

body.qop-modal-open{ overflow:hidden; }

@media (max-width:480px){
	.qop-modal.qop-open{ padding:12px; }
	.qop-modal-box{ width:100%; max-height:92vh; }
}