/* ─── Product View Modal ───────────────────────────────────────────── */

#productModal.modal-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  /* 👇 add this */
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px); /* optional but pretty */
}



#productModal .modal-box{
  max-height: 90vh;
  overflow: auto;
  scrollbar-width: none;         /* Firefox hide */
}

#productModal .modal-box::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* Modal box */
#productModal .modal-box{
background:var(--color-dark);
border-radius:8px;
padding:20px;
width: 40%;
box-shadow:0 4px 12px rgba(0,0,0,.3);
position:relative;
scrollbar-width:none;
}

/* Close button */
#productModal [data-modal-close]{
position:absolute;
top: 2%;
right: 1%;
background:transparent;
border:none;
font-size:1.2rem;
cursor:pointer;
color:white;
}

/* ─── Gallery ─────────────────────────────────────────────────────── */

#productModal .product-modal-gallery{
display:flex;
align-items:center;
justify-content:center;
gap:1rem;
margin-bottom:1rem;
}

#productModal .product-modal-gallery img{
max-width:90%;
border-radius:4px;
object-fit:contain;
}

#productModal .product-modal-gallery .prev-btn,
#productModal .product-modal-gallery .next-btn{
background:rgba(0,0,0,.4);
border:none;
color:#fff;
font-size:1.5rem;
padding:8px 12px;
cursor:pointer;
border-radius:4px;
}

/* ─── Thumbnails ──────────────────────────────────────────────────── */

#productModal .thumbnail-row{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:16px;
flex-wrap:wrap;
}

#productModal .thumbnail-row img{
width:100px;
height:100px;
object-fit:cover;
border-radius:4px;
cursor:pointer;
opacity:.85;
transition:opacity .2s ease, transform .2s ease;
}

#productModal .thumbnail-row img:hover{
opacity:1;
transform:scale(1.05);
}

/* ─── Details ─────────────────────────────────────────────────────── */

#productModal .product-modal-details{
font-family:"loubag";
color:white;
text-align:center;
}

#productModal .product-modal-details h4{
font-family:"brick";
font-size:2.5rem;
margin:.25rem auto;
font-weight:normal;
}

#productModal .product-modal-details .price{
font-family:"brick";
font-size:2rem;
letter-spacing:.15rem;
color:#627b9d;
margin:.25rem auto;
}

#productModal #modalDesc{
font-family:"seawashed";
font-size:1.15rem;
line-height:1.6;
margin:1rem auto;
max-width:900px;
}

/* ─── FAQ ─────────────────────────────────────────────────────────── */

#productModal .faq-question{
font-family:"askwhy";
font-size:1.25em;
padding:.5em;
margin:0;
color:white;
background:#293b54;
font-style:italic;
}

#productModal .faq-answer{
font-family:"askwhy";
font-size:.95rem;
color:#121524;
background:white;
padding:.5em;
line-height:1.4;
margin-bottom: 1rem !important;
}

/* ─── Demo Links ───────────────────────────────────────────────────── */

#productModal .demo-links-display{
margin:1rem auto;
display:flex;
flex-wrap:wrap;
gap:.5rem;
justify-content:center;
}

#productModal .demo-links-display a{
display:inline-block;
padding:.5em 1.25em;
border-radius:999px;
border:1px solid var(--color-border);
font-family:"loubag";
background:var(--bg-1);
color:var(--text);
text-decoration:none;
transition:transform .2s ease, filter .2s ease;
}

#productModal .demo-links-display a:hover{
transform:translateY(-1px);
filter:brightness(1.1);
}

/* ─── Actions ─────────────────────────────────────────────────────── */

#productModal .modal-actions{
display:flex;
justify-content:center;
margin-top:1.25rem;
}

#productModal .modal-actions button{
padding:.6em 1.5em;
border-radius:999px;
border:1px solid var(--color-border);
background:var(--bg-1);
color:var(--text);
font-family:"loubag";
font-size:1rem;
cursor:pointer;
transition:transform .2s ease, filter .2s ease;
}

#productModal .modal-actions button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
}

/* ─── Mobile ───────────────────────────────────────────────────────── */

@media(max-width:800px){
#productModal .modal-box{
width:92%;
padding:16px;
}

#productModal .product-modal-details h4{
font-size:2rem;
}

#productModal .price{
font-size:1.6rem;
}

#productModal .thumbnail-row img{
width:72px;
height:72px;
}
}