/* ============================================================================
   Skeleton loaders for product-detail AJAX sections (#fbt_div, #additional_info_tbody,
   #similar_ajax_list). Animated shimmer-sweep style (à la codepen mxbck/EvmLVp).

   Each skeleton reuses the same box layout as the real content it replaces, so swapping
   skeleton -> real markup is height-neutral (no layout shift / CLS, removes the load "jerk").

   Used by: resources/views/Front/product_details.blade.php
   Injected by: public/assets/frontend/js/page_scripts/product_details.js (beforeSend handlers)
   ============================================================================ */

/* Shared shimmer element — sizing is set per-section below; this only paints the sweep. */
@keyframes skelShimmer {
	0%   { background-position: -468px 0; }
	100% { background-position:  468px 0; }
}
.skel-box {
	background: #f6f7f8;
	background-image: linear-gradient(to right, #eeeeee 8%, #e0e0e0 18%, #eeeeee 33%);
	background-size: 800px 104px;
	background-repeat: no-repeat;
	animation: skelShimmer 1.25s linear infinite forwards;
	border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.skel-box { animation: none; }
}

/* ---- Frequently Bought Together (#fbt_div) — reuses .fbt-col.peakFBTClass box ---- */
#fbt_div .fbt-col.fbt-skeleton { pointer-events: none; align-items: stretch; }
/* the real card's image lives in an inline <a> sized by the <img>; the skeleton span has no intrinsic
   size, so force the anchor to a full-width block or width:100% would resolve to 0. */
#fbt_div .fbt-col.fbt-skeleton > a { display: block; width: 100%; }
#fbt_div .fbt-col.fbt-skeleton .fbt-skel-img  { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 4px; }
#fbt_div .fbt-col.fbt-skeleton .fbt-skel-line { display: block; height: .7rem; margin: .45rem auto; width: 85%; }
#fbt_div .fbt-col.fbt-skeleton .fbt-skel-sku  { width: 50%; }

/* ---- Additional info table (#additional_info_tbody) — reuses <tr><th><td> rows ---- */
#additional_info_tbody tr.ai-skeleton th { width: 35%; }
#additional_info_tbody tr.ai-skeleton .ai-skel-line { display: block; height: .8rem; margin: .45rem 0; }
#additional_info_tbody tr.ai-skeleton th .ai-skel-line { width: 70%; }
#additional_info_tbody tr.ai-skeleton td .ai-skel-line { width: 90%; }

/* ---- Similar products (#similar_ajax_list) — a single non-wrapping row of card placeholders ---- */
#similar_ajax_list .sim-skeleton-row { display: flex; gap: 1rem; width: 100%; }
#similar_ajax_list .sim-skel-card    { flex: 1 1 0; min-width: 0; }
#similar_ajax_list .sim-skel-img     { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; }
#similar_ajax_list .sim-skel-line    { display: block; height: .8rem; margin: .55rem 0; width: 90%; }
#similar_ajax_list .sim-skel-line.short { width: 55%; }
@media (max-width: 991px) { #similar_ajax_list .sim-skel-card:nth-child(n+3) { display: none; } }
@media (max-width: 575px) { #similar_ajax_list .sim-skel-card:nth-child(n+2) { display: none; } }

/* ============================================================================
   Category listing page (category_listing.blade.php): #post-data, #recommeded_ajax_list, #filter_ajax
   ============================================================================ */

/* Shared product-card placeholder pieces (used by the grid + recommended row below).
   Fixed image height (NOT aspect-ratio) to stay predictable inside theme flex containers. */
.skel-card-img   { display: block; width: 100%; height: 190px; border-radius: 6px; }
.skel-card-line  { display: block; height: .8rem; margin: .5rem 0; width: 90%; }
.skel-card-line.short { width: 55%; }
.skel-card-price { display: block; height: 1rem; margin-top: .6rem; width: 40%; }

/* ---- Product grid (#post-data) — neutral wrapper (NOT .product-cart-wrap, to avoid inheriting the
   theme card's height/flex rules); explicit responsive column widths form the grid. ---- */
#post-data .skel-card-wrap { width: 25%; padding: .5rem; box-sizing: border-box; pointer-events: none; }
@media (max-width: 1199px) { #post-data .skel-card-wrap { width: 33.333%; } }
@media (max-width: 767px)  { #post-data .skel-card-wrap { width: 50%; } }

/* ---- Recommended row (#recommeded_ajax_list) — single non-wrapping row of card placeholders ---- */
#recommeded_ajax_list .rmnd-skeleton-row { display: flex; gap: 1rem; width: 100%; }
#recommeded_ajax_list .rmnd-skel-card    { flex: 1 1 0; min-width: 0; }
@media (max-width: 991px) { #recommeded_ajax_list .rmnd-skel-card:nth-child(n+3) { display: none; } }
@media (max-width: 575px) { #recommeded_ajax_list .rmnd-skel-card:nth-child(n+2) { display: none; } }

/* ============================================================================
   Home page (index.blade.php) — reusable skeletons for its AJAX sections.
   ============================================================================ */

/* Generic horizontal card row (product/blog carousels). */
.skel-card-row { display: flex; gap: 1rem; width: 100%; }
.skel-card-row .skel-row-card { flex: 1 1 0; min-width: 0; }
@media (max-width: 991px) { .skel-card-row .skel-row-card:nth-child(n+4) { display: none; } }
@media (max-width: 575px) { .skel-card-row .skel-row-card:nth-child(n+3) { display: none; } }

/* Small product list (.product-list-small sections: top selling / trending / recently added / top rated). */
.skel-list-small .skel-list-item  { display: flex; gap: .6rem; align-items: center; margin: .7rem 0; }
.skel-list-small .skel-list-thumb { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 6px; }
.skel-list-small .skel-list-lines { flex: 1 1 auto; }
.skel-list-small .skel-list-line  { display: block; height: .7rem; margin: .35rem 0; width: 90%; }
.skel-list-small .skel-list-line.short { width: 55%; }

/* Generic banner/ADS block placeholder (variable real sizes — modest reserved height). */
.skel-banner { display: block; width: 100%; height: 120px; border-radius: 8px; margin: .5rem 0; }

/* ---- Quick-view modal (#quickViewModalContent) — image column (col-md-4) + info column (col-md-8) ---- */
#quickViewModalContent .qv-skel-img   { display: block; width: 100%; height: 320px; border-radius: 8px; }
#quickViewModalContent .qv-skel-line  { display: block; height: .9rem; margin: .65rem 0; width: 90%; }
#quickViewModalContent .qv-skel-line.lg    { height: 1.4rem; width: 75%; }
#quickViewModalContent .qv-skel-line.md    { width: 40%; }
#quickViewModalContent .qv-skel-line.price { height: 1.6rem; width: 35%; margin: 1rem 0; }
#quickViewModalContent .qv-skel-line.short { width: 60%; }
#quickViewModalContent .qv-skel-btn   { display: block; height: 2.6rem; width: 60%; border-radius: 6px; margin-top: 1.2rem; }
@media (max-width: 767px) { #quickViewModalContent .qv-skel-img { height: 220px; margin-bottom: 1rem; } }

/* ---- Filter sidebar (#filter_ajax) — title + checkbox/label rows ---- */
#filter_ajax .filter-skeleton .flt-skel-title { display: block; height: 1rem; width: 60%; margin: .4rem 0 .9rem; }
#filter_ajax .filter-skeleton .flt-skel-row   { display: flex; align-items: center; gap: .6rem; margin: .6rem 0; }
#filter_ajax .filter-skeleton .flt-skel-box   { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 3px; }
#filter_ajax .filter-skeleton .flt-skel-line  { flex: 1 1 auto; height: .8rem; }

/* ============================================================================
   Empty "no products" state for the category / sub-category product listings.
   Replaces the old cramped product-card / alert box with a centred full-width panel.
   Used by: resources/views/Front/category_product_listing.blade.php
            resources/views/Front/partials/subcategory_product_listing.blade.php
   ============================================================================ */
.empty-listing-state {
	width: 100%;
	max-width: 560px;
	margin: 1rem auto 1.5rem;
	padding: 3rem 1.5rem;
	text-align: center;
	background: #ffffff;
	border: 1px solid #eef0f3;
	border-radius: 12px;
}
.empty-listing-icon {
	width: 84px;
	height: 84px;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fdeee8;
	color: #e35728;
}
.empty-listing-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #16335c;
	margin: 0 0 .5rem;
}
.empty-listing-text {
	font-size: .95rem;
	line-height: 1.6;
	color: #6b7280;
	max-width: 400px;
	margin: 0 auto 1.5rem;
}
.empty-listing-btn {
	display: inline-block;
	background: #e35728;
	color: #ffffff;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	padding: 11px 24px;
	border-radius: 8px;
	transition: background .2s ease;
}
.empty-listing-btn:hover,
.empty-listing-btn:focus {
	background: #c64718;
	color: #ffffff;
}
@media (max-width: 575px) {
	.empty-listing-state { padding: 2rem 1rem; }
}

/* ---- Search "did you mean" correction note (catalog_search_listing.blade.php) ---- */
.search-correction {
	max-width: 560px;
	margin: 1rem auto 1.25rem;
	padding: .9rem 1.1rem;
	background: #f8f9fb;
	border: 1px solid #eef0f3;
	border-radius: 10px;
}
.search-correction p { margin: 0; }
.search-correction-primary {
	font-size: 1rem;
	font-weight: 600;
	color: #16335c;
}
.search-correction-secondary {
	font-size: .9rem;
	color: #6b7280;
	margin-top: .25rem !important;
}
.search-correction a {
	color: #e35728;
	text-decoration: underline;
}
.search-correction a:hover { color: #c64718; }

/* ---- Quick-view modal: reserve a stable min-height so the skeleton -> loaded-content swap
   (image + full product details) doesn't grow/shift the centred modal (load "jerk").
   Loaded content is taller than the skeleton; this opens the modal near its final size.
   Values are approximate typical content height — adjust if a product overflows/underfills. ---- */
#quickViewModalContent { min-height: 500px; }
@media (max-width: 767px) { #quickViewModalContent { min-height: 640px; } }