/* Premium Woo Products - Frontend Styles
   Milestone 2: basic functional grid + card (abhi "premium" design nahi -
   Milestone 3 mein colors, hover effects, badges wagera aayenge. Yahan
   sirf structure sahi kaam karna chahiye: columns, spacing, alignment). */

/* ----------------------------------------------------------
   GRID
   CSS custom properties (--pwp-cols-*) PHP se inline set hoti hain
   (templates/layout-grid.php dekho), taake ek hi CSS file har widget
   instance ke liye alag column count handle kar sake.
---------------------------------------------------------- */
.pwp-grid {
	display: grid;
	grid-template-columns: repeat( var( --pwp-cols-desktop, 4 ), 1fr );
	gap: 24px;
}

@media ( max-width: 1024px ) {
	.pwp-grid {
		grid-template-columns: repeat( var( --pwp-cols-tablet, 3 ), 1fr );
	}
}

@media ( max-width: 600px ) {
	.pwp-grid {
		grid-template-columns: repeat( var( --pwp-cols-mobile, 2 ), 1fr );
		gap: 14px;
	}
}

/* ----------------------------------------------------------
   CARD
---------------------------------------------------------- */
.pwp-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	overflow: hidden;
}

.pwp-card-image-link {
	display: block;
	position: relative; /* badges ko is ke andar absolute position karne ke liye */
	background: #f7f7f7;
}

.pwp-card-image-link img {
	width: 100%;
	height: auto;
	display: block;
}

/* ----------------------------------------------------------
   QUICK VIEW BUTTON (Milestone 6)
   Default hidden, sirf image pe hover karne par fade-in hota hai
   (jaise Amazon/premium stores mein hota hai) - taake card clean
   dikhe jab tak user interested na ho.
---------------------------------------------------------- */
.pwp-card-image-wrap {
	position: relative;
}

.pwp-quick-view-btn {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX( -50% ) translateY( 8px );
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: #333;
	border: none;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.15 );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
	z-index: 3;
}

.pwp-card-image-wrap:hover .pwp-quick-view-btn {
	opacity: 1;
	visibility: visible;
	transform: translateX( -50% ) translateY( 0 );
}

.pwp-quick-view-btn:hover {
	background: #7f54b3;
	color: #fff;
}

/* ----------------------------------------------------------
   HOVER EFFECT - "Zoom In" (Milestone 3)
   Widget mein "Image Hover Effect" control se on/off hoti hai.
   overflow:hidden .pwp-card pe already lag chuka hai, isliye
   image bade hone par card ke bahar overflow nahi karegi.
---------------------------------------------------------- */
.pwp-hover-zoom .pwp-card-image-link img {
	transition: transform 0.35s ease;
}

.pwp-hover-zoom:hover .pwp-card-image-link img {
	transform: scale( 1.08 );
}

/* ----------------------------------------------------------
   BADGES - Sale / Out of Stock (Milestone 3)
---------------------------------------------------------- */
.pwp-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pwp-badge {
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 4px;
	color: #fff;
	line-height: 1.4;
}

.pwp-badge-sale {
	background: #e2401c;
}

.pwp-badge-outofstock {
	background: #777777;
}

.pwp-card-content {
	padding: 14px;
	text-align: center;
}

.pwp-card-title-link {
	text-decoration: none;
	color: inherit;
}

.pwp-card-title {
	font-size: 15px;
	margin: 0 0 8px;
	line-height: 1.4;
}

.pwp-card-price {
	font-size: 15px;
	font-weight: 600;
	color: #7f54b3;
	margin-bottom: 12px;
}

.pwp-card-price del {
	color: #999;
	font-weight: 400;
	margin-right: 6px;
}

.pwp-card-button .pwp-btn {
	display: inline-block;
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 16px;
	background: #7f54b3;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 14px;
	transition: background 0.2s ease, transform 0.15s ease;
	text-align: center;
}

.pwp-card-button .pwp-btn:hover {
	background: #6a4494;
	color: #fff;
}

/* ----------------------------------------------------------
   BUTTON - Auto Width + Alignment (Milestone 5.1)
   Jab "Width: Auto" select ho, button apni text ke barabar chhota
   ho jata hai (flex:1 ki jagah flex:0) aur .pwp-card-button (flex
   container) ka "justify-content" (Elementor Alignment control se)
   usko left/center/right kar deta hai.
   Two-button mode (Milestone 5.2) mein dono buttons DEFAULT full-width
   ke hisaab se flex:1 lete hain, matlab 50-50 jagah share karte hain.
---------------------------------------------------------- */
.pwp-card-button {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center; /* default - Elementor "Alignment" control isko override karta hai */
}

.pwp-btn-auto {
	flex: 0 0 auto !important;
	padding-left: 28px;
	padding-right: 28px;
}

/* ----------------------------------------------------------
   SECONDARY BUTTON (Milestone 5.2) - default "outline" look
   taake do buttons hon to visually alag pehchane jaayein bina
   kuch configure kiye. Style tab > Secondary Button se poora
   override ho sakta hai.
---------------------------------------------------------- */
.pwp-btn-secondary {
	background: transparent;
	color: #7f54b3;
	border: 2px solid #7f54b3;
}

.pwp-btn-secondary:hover {
	background: #7f54b3;
	color: #fff;
}

/* ----------------------------------------------------------
   CATEGORY LABEL (Milestone 5.1)
---------------------------------------------------------- */
.pwp-card-category {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #7f54b3;
	margin-bottom: 4px;
	font-weight: 600;
}

/* ----------------------------------------------------------
   RATING (Milestone 5.1)
   .star-rating WooCommerce ki apni class hai (wc_get_rating_html()
   se aati hai) - hum bas alignment/spacing thodi behtar kar rahe hain.
---------------------------------------------------------- */
.pwp-card-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 8px;
}

.pwp-card-rating .star-rating {
	font-size: 14px;
}

.pwp-card-rating-count {
	font-size: 12px;
	color: #777;
}

/* ----------------------------------------------------------
   BUTTON LOADING STATE (Milestone 4)
---------------------------------------------------------- */
.pwp-btn-loading {
	opacity: 0.7;
	cursor: wait;
}

.pwp-add-to-cart-btn {
	/* button element ko bhi <a> jaisa hi dikhna chahiye - browser
	   defaults (border, font) reset kar rahe hain */
	border: none;
	cursor: pointer;
	font-family: inherit;
}

/* ----------------------------------------------------------
   MINI-CART DRAWER (Milestone 4)
   Default state mein screen ke bahar (right se) chhupa hota hai.
   JS ".pwp-drawer-open" class add karta hai jab AJAX add-to-cart
   successful ho ya user cart icon click kare.
---------------------------------------------------------- */
.pwp-cart-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	z-index: 100000; /* Elementor ke admin bar/editor se upar rahe */
}

.pwp-cart-drawer-overlay.pwp-overlay-visible {
	opacity: 1;
	visibility: visible;
}

.pwp-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 380px;
	max-width: 90vw; /* chhoti screens (mobile) pe poora 380px na ho, viewport se bahar na jaye */
	background: #fff;
	box-shadow: -2px 0 12px rgba( 0, 0, 0, 0.15 );
	z-index: 100001;
	transform: translateX( 100% ); /* screen ke bahar */
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
}

.pwp-cart-drawer.pwp-drawer-open {
	transform: translateX( 0 );
}

.pwp-cart-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid #eee;
	font-size: 17px;
	font-weight: 600;
}

.pwp-cart-drawer-close {
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #555;
	padding: 0;
}

.pwp-cart-drawer-body {
	padding: 20px;
	overflow-y: auto;
	flex: 1;
}

/* WooCommerce ka default mini-cart HTML (woocommerce_mini_cart()) ke
   liye kuch basic spacing - taake bilkul unstyled na dikhe. WooCommerce
   ki apni classes (.woocommerce-mini-cart, .cart_list) already exist
   karti hain, hum sirf spacing/alignment thoda behtar kar rahe hain. */
.pwp-cart-drawer-body .woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pwp-cart-drawer-body .woocommerce-mini-cart-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
	position: relative;
}

.pwp-cart-drawer-body .woocommerce-mini-cart-item img {
	width: 56px;
	height: auto;
	border-radius: 4px;
}

.pwp-cart-drawer-body .woocommerce-mini-cart__buttons {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pwp-cart-drawer-body .woocommerce-mini-cart__buttons a {
	display: block;
	text-align: center;
	padding: 12px;
	border-radius: 4px;
	text-decoration: none;
	background: #7f54b3;
	color: #fff;
}

/* ----------------------------------------------------------
   EMPTY STATE
---------------------------------------------------------- */
.pwp-empty-state {
	padding: 30px;
	text-align: center;
	border: 1px dashed #ccc;
	border-radius: 8px;
	color: #777;
}

/* ============================================================
   LIST LAYOUT (Milestone 5)
   ============================================================
   .pwp-card ka structure grid jaisa hi hai - sirf flex-direction
   row kar dete hain taake image aur content side-by-side aa jayein
   (upar-neeche stack hone ki jagah).
---------------------------------------------------------- */
.pwp-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pwp-list .pwp-card {
	flex-direction: row;
	align-items: stretch;
}

.pwp-list .pwp-card-image-link {
	width: 180px; /* Elementor "Image Width" control isko override karta hai */
	flex-shrink: 0;
}

.pwp-list .pwp-card-image-link img {
	height: 100%;
	object-fit: cover;
}

.pwp-list .pwp-card-content {
	text-align: left;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pwp-list .pwp-card-button {
	max-width: 220px; /* List mein button poori width lena ajeeb lagta hai */
}

/* "Image Position: Right" wale case ke liye - Elementor 'list_image_position'
   control se ye class add/remove nahi hoti abhi (CSS order se handle kiya) */
.pwp-list.pwp-list-image-right .pwp-card {
	flex-direction: row-reverse;
}

@media ( max-width: 600px ) {
	.pwp-list .pwp-card {
		flex-direction: column;
	}
	.pwp-list .pwp-card-image-link {
		width: 100%;
	}
}

/* ============================================================
   CAROUSEL LAYOUT (Milestone 5) - Swiper.js
   ============================================================ */
.pwp-carousel-wrap {
	position: relative;
}

.pwp-swiper {
	overflow: hidden;
	padding-bottom: 6px; /* pagination dots ke liye thodi jagah */
}

.pwp-swiper .swiper-slide {
	height: auto; /* saare slides barabar height ke rahein */
}

.pwp-swiper .swiper-slide .pwp-card {
	height: 100%;
}

/* Swiper ke apne pagination dots - premium "pill" look ke liye smooth
   transition (Style tab > Carousel > Dots se colors/size customize hote hain,
   ye sirf animation/base defaults hain). */
.pwp-carousel-wrap .swiper-pagination-bullet {
	transition: width 0.25s ease, background-color 0.2s ease;
	margin: 0 4px !important;
}

.pwp-carousel-wrap .swiper-pagination-bullet-active {
	background: #7f54b3;
}

.pwp-carousel-wrap .swiper-pagination-fraction {
	font-size: 13px;
	font-weight: 600;
	color: #333;
}

.pwp-carousel-arrow {
	position: absolute;
	top: 40%;
	transform: translateY( -50% );
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: none;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.12 );
	cursor: pointer;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #333;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pwp-carousel-arrow:hover {
	background: #7f54b3;
	color: #fff;
	transform: translateY( -50% ) scale( 1.08 );
	box-shadow: 0 4px 14px rgba( 127, 84, 179, 0.35 );
}

.pwp-carousel-prev {
	left: -18px;
}

.pwp-carousel-next {
	right: -18px;
}

@media ( max-width: 600px ) {
	/* Chhoti screen pe arrows carousel ke bahar overflow na karein */
	.pwp-carousel-prev {
		left: 4px;
	}
	.pwp-carousel-next {
		right: 4px;
	}
}

/* ============================================================
   PAGINATION (Milestone 5)
   ============================================================ */
.pwp-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 30px;
	flex-wrap: wrap;
}

.pwp-page-link {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid #e0e0e0;
	background: #fff;
	color: #333;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	transition: background 0.15s ease, color 0.15s ease;
}

.pwp-page-link:hover:not( :disabled ):not( .pwp-page-active ) {
	background: #f3eefa;
	border-color: #7f54b3;
}

.pwp-page-link.pwp-page-active {
	background: #7f54b3;
	border-color: #7f54b3;
	color: #fff;
	cursor: default;
}

.pwp-page-link:disabled,
.pwp-page-link.pwp-page-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pwp-page-ellipsis {
	padding: 0 4px;
	color: #999;
}

.pwp-inner {
	transition: opacity 0.2s ease;
}

/* ============================================================
   QUICK VIEW MODAL (Milestone 6)
   ============================================================ */
.pwp-qv-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.6 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	z-index: 100000;
}

.pwp-qv-overlay.pwp-qv-visible {
	opacity: 1;
	visibility: visible;
}

.pwp-qv-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -48% );
	width: 90%;
	max-width: 760px;
	max-height: 85vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.3 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 100001;
	padding: 30px;
}

.pwp-qv-modal.pwp-qv-visible {
	opacity: 1;
	visibility: visible;
	transform: translate( -50%, -50% );
}

.pwp-qv-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: #f3f3f3;
	color: #333;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.pwp-qv-close:hover {
	background: #e5e5e5;
}

.pwp-qv-body {
	min-height: 200px;
}

/* Loading state - jab tak AJAX response nahi aaya */
.pwp-qv-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	color: #999;
	font-size: 14px;
}

/* Quick View content layout (quick-view-content.php se aata hai) */
.pwp-qv-layout {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

.pwp-qv-image {
	flex: 1 1 260px;
	position: relative;
}

.pwp-qv-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

.pwp-qv-badge {
	position: absolute;
	top: 10px;
	left: 10px;
}

.pwp-qv-details {
	flex: 1 1 300px;
}

.pwp-qv-title {
	font-size: 22px;
	margin: 0 0 10px;
}

.pwp-qv-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.pwp-qv-rating-count {
	font-size: 13px;
	color: #777;
}

.pwp-qv-price {
	font-size: 20px;
	font-weight: 600;
	color: #7f54b3;
	margin-bottom: 14px;
}

.pwp-qv-price del {
	color: #999;
	font-weight: 400;
	margin-right: 8px;
}

.pwp-qv-description {
	font-size: 14px;
	color: #555;
	line-height: 1.6;
	margin-bottom: 14px;
}

.pwp-qv-stock {
	font-size: 13px;
	margin-bottom: 18px;
}

.pwp-qv-in-stock {
	color: #2a8a3e;
}

.pwp-qv-out-stock {
	color: #c0392b;
}

.pwp-qv-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.pwp-qv-actions .pwp-btn {
	flex: 0 0 auto;
}

.pwp-qv-full-details-link {
	font-size: 14px;
	color: #7f54b3;
	text-decoration: none;
	font-weight: 600;
}

.pwp-qv-full-details-link:hover {
	text-decoration: underline;
}

@media ( max-width: 600px ) {
	.pwp-qv-modal {
		padding: 20px;
		width: 94%;
	}
	.pwp-qv-layout {
		flex-direction: column;
	}
}