/* =============================================================
   Daruport — single-product custom styles.
   Ports the design prototype's <style> block and adds a scoped
   base reset (Tailwind preflight is disabled so the rest of the
   site is untouched) plus the full-bleed container fix.
   ============================================================= */

/* --- Full-bleed: let the product page escape the shop container so the
   dark statement / mechanism / review bands span the viewport. The wrapper
   carries `.dp-full` (set in inc/woocommerce.php) on single products. --- */
.dp-single-product .site-content,
.dp-single-product .site-content.container,
.dp-single-product .site-content.dp-full,
.dp-single-product main#site-content {
	max-width: none !important;
	width: 100%;
	margin: 0;
	padding-inline: 0;
	padding-block: 0;
}

/* No sidebar on the product page; the content owns the full width. */
.dp-single-product .widget-area {
	display: none;
}

/* Neutralise WooCommerce's default single-product spacing/float that would
   fight the custom Tailwind layout. */
.dp-single-product .dp-product.product {
	display: block; /* never inherit WooCommerce's gallery|summary grid */
	width: 100%;
	float: none;
	margin: 0;
}
.dp-single-product .dp-product.product::before,
.dp-single-product .dp-product.product::after {
	content: none;
}

/* --- Scoped base reset (preflight is off globally) --- */
.dp-product,
.dp-product *,
.dp-product *::before,
.dp-product *::after {
	box-sizing: border-box;
}
.dp-product {
	font-family: 'Vazirmatn', Tahoma, sans-serif;
	color: #141a17;
	line-height: 1.5;
}
.dp-product h1,
.dp-product h2,
.dp-product h3,
.dp-product h4,
.dp-product h5,
.dp-product p,
.dp-product ul,
.dp-product ol,
.dp-product dl,
.dp-product dd,
.dp-product figure {
	margin: 0;
}
.dp-product ul,
.dp-product ol {
	padding: 0;
	list-style: none;
}
.dp-product ul.list-disc {
	list-style: disc;
}
.dp-product img,
.dp-product svg {
	display: block;
	max-width: 100%;
}
.dp-product img {
	height: auto;
}
.dp-product button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}
.dp-product a {
	text-decoration: none;
	color: inherit;
}
.dp-product table {
	border-collapse: collapse;
	width: 100%;
}
.dp-product input,
.dp-product textarea {
	font: inherit;
}

/* --- Prototype utilities --- */
.dp-product ::selection { background: #10b981; color: #fff; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.tr { transition: all .3s cubic-bezier(.4,0,.2,1); }

.dot-grid {
	background-image: radial-gradient(rgba(5,150,105,.10) 1px, transparent 1px);
	background-size: 22px 22px;
}

@keyframes dpFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: dpFadeUp .5s ease both; }

@keyframes dpFloaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.floaty { animation: dpFloaty 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
	.floaty, .fade-up { animation: none; }
	.tr { transition: none; }
}

/* FAQ accordion: animate grid-template-rows 0fr -> 1fr */
.dp-faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.dp-faq-body.open { grid-template-rows: 1fr; }
.dp-faq-body > div { overflow: hidden; }

/* In-answer pharmacist emphasis (used inside Q&A answers). */
.rx-warn { background: #fff1f2; color: #9f1239; font-weight: 800; border-radius: 6px; padding: 1px 7px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rx-key { background: #ecfdf5; color: #047857; font-weight: 800; border-radius: 6px; padding: 1px 7px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rx-u { text-decoration: underline; text-decoration-color: #34d399; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 800; color: #065f46; }

/* Long-form prose spacing inside the review/usage tabs. */
.dp-prose p { margin-bottom: 1rem; line-height: 2; }
.dp-prose h2 { font-size: 1.35rem; font-weight: 900; color: #141a17; padding-top: .5rem; }
.dp-prose h3 { font-size: 1.1rem; font-weight: 900; color: #222a26; padding-top: .25rem; }
.dp-prose ul { list-style: disc; padding-inline-start: 1.25rem; margin-bottom: 1rem; }

/* Native WooCommerce reviews, restyled to sit inside our card. */
.dp-native-reviews .commentlist { list-style: none; margin: 0; padding: 0; }
.dp-native-reviews .comment-text { margin-inline-start: 0; }
.dp-native-reviews .star-rating { color: #f59e0b; }
.dp-native-reviews input:not([type=checkbox]):not([type=radio]),
.dp-native-reviews textarea {
	width: 100%;
	border: 1px solid #eceeed;
	border-radius: .75rem;
	padding: .6rem .8rem;
}
.dp-native-reviews .submit,
.dp-native-reviews button {
	background: #059669;
	color: #fff;
	font-weight: 800;
	border-radius: .75rem;
	padding: .7rem 1.4rem;
}

/* --- Quantity stepper: hide the browser's native number spinners and give
   the +/- controls a clean, professional disabled state. --- */
#dp-qty::-webkit-outer-spin-button,
#dp-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#dp-qty { -moz-appearance: textfield; appearance: textfield; }
.dp-qbtn { cursor: pointer; transition: background-color .15s ease, opacity .15s ease; user-select: none; }
.dp-qbtn:disabled { opacity: .35; cursor: not-allowed; }
.dp-qbtn:disabled:hover { background-color: #f6f7f6; /* ink-50, cancel hover */ }

/* --- Sticky-layering fixes. The prototype assumed no sticky site header, but
   .dp-header is sticky with z-index:100 (72px bar; +44px category bar ≥768px),
   so everything that sticks or overlays must clear it. --- */

/* Section nav: stick just below the header instead of hidden underneath it. */
#dp-secnav { top: 72px; }
@media (min-width: 768px) {
	#dp-secnav { top: 116px; }
}
/* Logged-in admin bar pushes the header down; follow it. */
@media (min-width: 600px) and (max-width: 767.98px) {
	.admin-bar #dp-secnav { top: 118px; }
}
@media (min-width: 768px) and (max-width: 782.98px) {
	.admin-bar #dp-secnav { top: 162px; }
}
@media (min-width: 783px) {
	.admin-bar #dp-secnav { top: 148px; }
}

/* Anchor jumps (section nav, "N نظر" link) must clear header + section nav;
   the markup's scroll-mt-24 (96px) was tuned for the headerless prototype. */
.dp-single-product [id^="sec-"] { scroll-margin-top: 168px; }
@media (min-width: 768px) {
	.dp-single-product [id^="sec-"] { scroll-margin-top: 200px; }
}

/* The fullscreen lightbox must cover the sticky header (z-index 100). */
#dp-lightbox { z-index: 120; }

/* Reviews summary card: lg:top-24 (96px) sat 20px under the 116px header. */
@media (min-width: 1024px) {
	.dp-single-product #sec-reviews .lg\:top-24 { top: 8.25rem; }
}

/* --- AJAX add-to-cart busy state (product.js toggles .dp-loading). --- */
.dp-loading { opacity: .6; pointer-events: none; cursor: progress; }

/* --- Brand landing pager (paginate_links output had no styles at all). --- */
.dp-brand-pager .page-numbers {
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: .75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #eceeed; /* ink-100 */
	border-radius: .75rem;
	font-size: .875rem;
	font-weight: 700;
	color: #414b46; /* ink-600 */
	transition: border-color .15s ease, color .15s ease;
}
.dp-brand-pager a.page-numbers:hover { border-color: #6ee7b7; color: #047857; }
.dp-brand-pager .page-numbers.current { background: #059669; border-color: #059669; color: #fff; }
.dp-brand-pager .page-numbers.dots { border: 0; background: none; }

/* --- Refill reminder toggle: styled in real CSS (not Tailwind utilities) so it
   renders in its correct state on first paint — no checked/unchecked flash while
   the Tailwind CDN initialises — and the unchecked box stays clearly visible. */
.dp-remind { background: #fff; border: 1px solid #eceeed; }
.dp-remind:hover { border-color: #6ee7b7; }
.dp-remind.is-on { background: rgba(236, 253, 245, .5); border-color: #6ee7b7; }
.dp-remind__box {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: .375rem;
	border: 2px solid #7f8a85; /* ink-400 — clearly visible when unchecked */
	background: #fff;
	color: #b6bcb9; /* faint check hint when off */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dp-remind__box svg { width: 1rem; height: 1rem; }
.dp-remind.is-on .dp-remind__box { background: #059669; border-color: #059669; color: #fff; }