/* Main image styling */
.main-image-wrapper {
	overflow: hidden;
	position: relative;
}

.main-product-image {
	transition: transform 0.2s ease;
	cursor: zoom-in;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 767.98px) {
	.main-product-image {
		transform: none !important;
		cursor: default;
	}
}

/* Only zoom on desktop */
@media (min-width: 768px) {
	.main-product-image.zoomed {
		transform: scale(2);
	}
}


/* Thumbnail styling */
.thumbs-wrapper {
	max-width: 100%;
	max-height: 500px;
}

.thumb-img {
	width: 70px;
	height: 70px;
	object-fit: cover;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 6px;
	transition: border-color 0.2s;
}

.thumb-img:hover,
.thumb-img.active {
	border-color: #333;
}

/* Zoom icon for mobile */
.zoom-btn {
	z-index: 10;
	border-radius: 100%;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

/* Horizontal thumbs on mobile */
@media (max-width: 767.98px) {
	.thumbs-wrapper {
		flex-direction: row !important;
		max-height: none;
		overflow-x: auto;
	}
}

/* Vertical thumbs on desktop */
@media (min-width: 768px) {
	.thumbs-wrapper {
		flex-direction: column !important;
		max-height: 500px;
		overflow-y: auto;
	}
}

.modal .btn-close,
.modal .btn[data-bs-dismiss="modal"] {
	z-index: 1055 !important;
}

.badge.bg-success {
	font-size: 0.85rem;
	padding: 0.4em 0.6em;
}

/* Style active tab like a dark button */
.nav-tabs .nav-link.active {
	color: #fff;
	background-color: #000;
	border: 1px solid #000;
}

/* Prevent double borders */
.nav-tabs .nav-link {
	color: #000;
	border: 1px solid #000;
	border-radius: 0;
	background-color: #fff;
	margin-bottom: -1px; /* ensures seamless joint with tab-content */
}

.nav-tabs .nav-link:hover {
	
	border: 1px solid #000;
}


/* Accordion active panel (optional) */
.accordion-button:not(.collapsed),
.accordion-item:first-of-type .accordion-button:not(.collapsed),
#mobileDesc.show ~ .accordion-header .accordion-button {
	background-color: #212529;
	color: #fff;
}

.accordion-button {
	border-bottom: 1px solid #212529;
	box-shadow: none;
	color: #212529;
	background-color: #fff;
}

.tab-header-wrapper {
	display: inline-flex;
	border-bottom: 1px solid #000;
}

/* Optional: spacing between tabs */
.tab-header-wrapper .nav-link {
	margin-right: 0.25rem;
}

.tab-content {
	border: 1px solid #000;
	border-top: none;
}

.review-stars i {
	margin-right: 2px;
}

.star-select i {
	cursor: pointer;
	transition: color 0.2s;
}

.star-select i.hovered,
.star-select i.selected {
	color: #ffc107 !important;
}

.pagination .page-link {
	border: 1px solid #000;
	color: #000;
	border-radius: 0;
	background-color: #fff;
	transition: all 0.2s ease;
}

.pagination .page-link:hover {
	background-color: #000;
	color: #fff;
}

.pagination .page-item.active .page-link {
	background-color: #000;
	color: #fff;
	border-color: #000;
}

.pagination .page-item.disabled .page-link {
	color: #888;
	background-color: #f8f9fa;
	border: 1px solid #000; /* Fix applied here */
	cursor: not-allowed;
	opacity: 0.6;
}

.tab-pane ul,
.accordion-body ul {
	padding-left: 1.2rem;
}

.tab-pane ul li,
.accordion-body ul li {
	margin-bottom: 0.5rem;
}

/* Base Modal Drawer Setup */
	.modal.modal-drawer .modal-dialog {
		margin: 0;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		transition: transform 0.3s ease;
		border-radius: 0;
	}

	.modal.modal-drawer .modal-content {
		border-radius: 0;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border: 1px solid #000;
	}

	/* Slide animation */
	.modal.modal-drawer.fade .modal-dialog {
		transform: translateY(100%);
	}

	.modal.modal-drawer.fade.show .modal-dialog {
		transform: translateY(0);
	}

	/* Desktop behavior (fallback to centered) */
	@media (min-width: 768px) {
		.modal.modal-drawer .modal-dialog {
			position: relative;
			bottom: auto;
			transform: none !important;
			border-radius: 0.25rem;
			max-width: 500px;
			margin: 1.75rem auto;
		}
	}