/* =============================================
   Fabric detail popup (#FabricDetailPopup)
   Self-contained: loaded on every page because the modal lives in the layout.
============================================= */
#FabricDetailPopup{
	--fd-navy:#0f3a5c;
	--fd-navy-dark:#0a2a45;
	--fd-blue:#4a86c9;
	--fd-tint:#f3f7fc;
	--fd-line:#e2e9f2;
	--fd-ink:#1a2a3a;
	--fd-muted:#5f6f80;
}
#FabricDetailPopup .modal-dialog{
	display:flex;
	align-items:center;
	width:auto;
	max-width:860px;
	min-height:calc(100% - 40px);
	margin:20px auto;
	padding:0 12px;
}
#FabricDetailPopup .modal-content{
	position:relative;
	width:100%;
	border:0;
	border-radius:20px;
	overflow:hidden;
	background:#fff;
	box-shadow:0 24px 70px rgba(10,42,69,.35);
}
/* the title is only for screen readers; the heading inside the body is the visible one */
#FabricDetailPopup .modal-header{ position:absolute; top:0; right:0; z-index:5; padding:12px 14px; border:0; background:none;}
#FabricDetailPopup .modal-header .modal-title{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
#FabricDetailPopup .modal-header .close{
	float:none;
	display:block;
	width:38px;
	height:38px;
	margin:0;
	padding:0;
	border-radius:50%;
	background:#fff;
	color:var(--fd-navy);
	font:400 24px/36px Arial, sans-serif;
	text-align:center;
	opacity:1;
	text-shadow:none;
	box-shadow:0 2px 10px rgba(15,58,92,.25);
	transition:background .2s, color .2s;
}
#FabricDetailPopup .modal-header .close:hover,
#FabricDetailPopup .modal-header .close:focus-visible{ background:var(--fd-navy); color:#fff; outline:0;}
#FabricDetailPopup .modal-body{ padding:0;}

.fd{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); font-family:'Inter', 'Raleway', Arial, sans-serif; color:var(--fd-ink);}
.fd-media{ display:flex; align-items:center; justify-content:center; min-height:420px; padding:36px; background:linear-gradient(160deg,#eef4fb,#d9e6f5);}
.fd-media img{ display:block; max-width:100%; max-height:380px; width:auto; height:auto; object-fit:contain; border-radius:10px; mix-blend-mode:multiply;}
.fd-info{ display:flex; flex-direction:column; padding:40px 40px 32px;}
.fd-eyebrow{ align-self:flex-start; margin-bottom:12px; padding:5px 12px; border-radius:999px; background:var(--fd-tint); color:var(--fd-navy); font:700 11px/1 'Inter', Arial, sans-serif; letter-spacing:.1em; text-transform:uppercase;}
.fd-title{ margin:0 0 6px; padding-right:34px; font:600 28px/1.2 'Playfair Display', Georgia, serif; color:var(--fd-navy); text-transform:none;}
.fd-comp{ margin:0 0 18px; font-size:14px; line-height:1.5; color:var(--fd-muted);}
.fd-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 6px; margin:0 0 20px; padding:14px 0; border-top:1px solid var(--fd-line); border-bottom:1px solid var(--fd-line);}
.fd-price small{ flex-basis:100%; margin-bottom:2px; font:500 11.5px/1.4 'Inter', Arial, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--fd-muted);}
.fd-price strong{ font:700 32px/1.1 'Inter', Arial, sans-serif; color:var(--fd-navy);}
.fd-price span{ font-size:13px; color:var(--fd-muted);}
.fd-specs{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin:0 0 24px;}
.fd-specs > div{ min-width:0;}
.fd-specs dt{ margin:0 0 3px; font:600 11.5px/1.3 'Inter', Arial, sans-serif; letter-spacing:.07em; text-transform:uppercase; color:var(--fd-muted);}
.fd-specs dd{ margin:0; display:flex; align-items:center; gap:8px; font:500 15px/1.4 'Inter', Arial, sans-serif; color:var(--fd-ink); word-break:break-word;}
.fd-dot{ flex:none; width:14px; height:14px; border-radius:50%; background:#cfd8e3; border:1px solid rgba(0,0,0,.15);}
.fd-dot.fb-c-white{ background:#fff;} .fd-dot.fb-c-black{ background:#111;} .fd-dot.fb-c-blue{ background:#2f6fc4;}
.fd-dot.fb-c-gray, .fd-dot.fb-c-grey{ background:#888;} .fd-dot.fb-c-brown{ background:#8b5a3c;} .fd-dot.fb-c-green{ background:#2e8b57;}
.fd-dot.fb-c-red{ background:#c0392b;} .fd-dot.fb-c-pink{ background:#f0a6c0;} .fd-dot.fb-c-yellow{ background:#f2c94c;}
.fd-dot.fb-c-orange{ background:#f2994a;} .fd-dot.fb-c-purple{ background:#8e5bb5;} .fd-dot.fb-c-laveder, .fd-dot.fb-c-lavender{ background:#d8d2f2;}
.fd-dot.fb-c-ecru{ background:#c2b280;} .fd-dot.fb-c-navy{ background:#1c2f5a;} .fd-dot.fb-c-beige{ background:#e6d7b8;}
.fd-actions{ display:flex; flex-direction:column; gap:10px; margin-top:auto;}
.fd-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:48px;
	padding:0 22px;
	border-radius:999px;
	font:600 14px/1 'Inter', Arial, sans-serif;
	letter-spacing:.03em;
	cursor:pointer;
	transition:background .2s, color .2s, box-shadow .2s, transform .2s;
}
.fd-btn:hover, .fd-btn:focus{ text-decoration:none;}
.fd-btn-primary{ background:var(--fd-navy); border:1px solid var(--fd-navy); color:#fff !important; box-shadow:0 8px 18px rgba(15,58,92,.28);}
.fd-btn-primary:hover{ background:var(--fd-navy-dark); transform:translateY(-1px);}
.fd-btn-ghost{ background:#fff; border:1px solid #c9d6e6; color:var(--fd-navy);}
.fd-btn-ghost:hover{ background:var(--fd-tint);}
.fd-btn:focus-visible{ outline:3px solid rgba(74,134,201,.5); outline-offset:2px;}
.fd-notes{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:16px 0 0; padding:0; list-style:none;}
.fd-notes li{ margin:0; font-size:12.5px; line-height:1.4; color:var(--fd-muted); list-style:none;}
.fd-notes i{ margin-right:5px; color:var(--fd-blue);}

.fd-loading{ display:flex; align-items:center; justify-content:center; gap:12px; min-height:320px; font:500 14px 'Inter', Arial, sans-serif; color:var(--fd-muted);}
.fd-loading:before{ content:''; width:22px; height:22px; border:3px solid #d5e1ef; border-top-color:var(--fd-navy); border-radius:50%; animation:fd-spin .8s linear infinite;}
.fd-error{ min-height:240px; display:flex; align-items:center; justify-content:center; padding:40px; text-align:center; font:500 14px/1.6 'Inter', Arial, sans-serif; color:var(--fd-muted);}
@keyframes fd-spin{ to{ transform:rotate(360deg);} }
@media (prefers-reduced-motion:reduce){ .fd-loading:before{ animation-duration:2s;} .fd-btn{ transition:none;} }

@media (max-width:767px){
	#FabricDetailPopup .modal-dialog{ margin:10px auto; padding:0 10px; min-height:calc(100% - 20px);}
	#FabricDetailPopup .modal-content{ border-radius:16px; max-height:calc(100vh - 20px); overflow-y:auto;}
	.fd{ grid-template-columns:1fr;}
	.fd-media{ min-height:0; padding:28px 20px 20px;}
	.fd-media img{ max-height:230px;}
	.fd-info{ padding:22px 22px 24px;}
	.fd-title{ font-size:23px; padding-right:0;}
	.fd-price strong{ font-size:28px;}
	.fd-specs{ gap:12px 16px;}
}

/* legacy .close rules offset the button; pin it inside the card */
#FabricDetailPopup .modal-header .close{ position:relative !important; top:0 !important; right:0 !important; margin:0 !important;}

/* size of the x in every modal close button */
button.close span{ font-size:22px;}