/* ---------- Global page styles ---------- */
body{
  font-family:'Merriweather',serif;
  padding:20px;
  background-color:#f9f9f9;
  position:relative;
}

/* ---------- Filter bar ---------- */
.filters{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:20px;
  margin:10px 0 20px 0;
  padding-left:20px;
  font-size:15px;
  opacity:.9;
  flex-wrap:wrap;
}
.filters select{
  font-size:14px;
  padding:8px 14px;
  border-radius:8px;
  border:1px solid #ccc;
  background-color:#fff;
  font-family:'Calibri',serif;
  min-width:180px;
  cursor:pointer;
  box-shadow:none;
  transition:border .2s ease;
}
.filters select:hover{border-color:#999}

/* ---------- Cart icon & sidebar ---------- */
.cart-icon{
  position:fixed;
  bottom:80vh;
  right:30px;
  background:#FFD700;
  padding:10px;
  border-radius:50%;
  cursor:pointer;
  font-size:18px;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
}

.cart-sidebar{
  position:fixed;
  top:0;
  right:-350px;
  width:300px;
  height:100%;
  background:#fff;
  box-shadow:-3px 0 10px rgba(0,0,0,.2);
  padding:20px;
  transition:right .3s ease-in-out;
  overflow-y:auto;
  border-radius:10px 0 0 10px;
}
.cart-sidebar.sidebar-open{right:0}

.cart-header{font-size:20px;font-weight:bold;margin-bottom:10px;text-align:center}
.cart-items{max-height:400px;overflow-y:auto}
.cart-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ccc}
.cart-close-btn{background:red;color:#fff;border:none;padding:5px;cursor:pointer;font-size:18px}
.cart-total{font-weight:bold;text-align:center;margin:10px 0}
.cart-buttons{text-align:center}
.checkout-btn{
  background:#228B22;color:#fff;padding:10px;width:100%;
  border:none;font-size:16px;cursor:pointer;border-radius:5px;margin-top:10px
}

/* ---------- Book card container ---------- */
.book-container{
  display:flex;
  flex-direction:row;
  max-width:1200px;
  margin:20px auto;
  background:#fff;
  padding:20px;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
  border-radius:10px;
}
.left{width:40%;padding-right:20px;display:flex;flex-direction:column;align-items:center}
.right{width:60%}
.title{font-size:24pt;font-weight:bold;margin-bottom:10px;text-align:center}
.cover{text-align:center;margin-bottom:15px}
.cover img{width:70%;height:auto;border-radius:10px}

/* ---------- Tags ---------- */
.tag{
  display:inline-block;
  background:#D3D3D3;
  color:#000;
  padding:5px 10px;
  border-radius:15px;
  font-size:12pt;
}
.tag.age-2-plus{background:#FFD700}
.tag.age-4-plus{background:#32CD32}
.tag.age-6-plus{background:#ADD8E6}
.tags{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px
}

/* ---------- Q&A + description ---------- */
.questions{
  font-family:'Playfair Display',serif;
  color:#000080;
  font-size:14pt;
  font-weight:bold;
  margin-top:20px;
}
.surat-quran{
  font-family:'Playfair Display',serif;
  color:#228B22;
  font-size:12pt;
  margin-bottom:10px;
}
.surat-quran p{
  white-space:normal;
  word-wrap:break-word;
  margin-bottom:10px;
}

.description{
    margin-top:20px;
}

/* --- ALWAYS show full description, hide the toggle --- */
.description .full{          /* the long text span   */
    display:inline !important;
}
.description .more{          /* the “Read More” link */
    display:none  !important;
}



/* ---------- Buttons ---------- */
.buttons{margin-top:20px;display:flex;gap:20px;flex-wrap:wrap}

.preview-btn{
  font-family:'Merriweather Sans',sans-serif;
  background:#F3F4F6;
  color:#1E3A8A;
  border:1px solid #1E3A8A;
  padding:6px 25px;
  font-size:14pt;
  border-radius:5px;
  cursor:pointer;
  transition:background .3s,color .3s;
}
.preview-btn:hover{background:#E0E7FF}

.add-cart-btn{
  font-family:'Merriweather Sans',sans-serif;
  font-weight:600;
  background:#1E3A8A;
  color:#fff;
  border:none;
  padding:6px 25px;
  border-radius:5px;
  font-size:14pt;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.add-cart-btn:hover{background:#047857}

.amazon-btn{
  font-family:'Merriweather Sans',sans-serif;
  background:#fff;
  color:#000;
  border:2px solid #000;
  padding:6px 25px;
  border-radius:5px;
  font-size:14pt;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:background .3s,color .3s;
}
.amazon-btn:hover{background:#f5f5f5}
.amazon-logo{width:24px;height:auto}

/* ---------- Extra sections ---------- */
.values-instilled{
  font-family:'Playfair Display',serif;
  font-size:14pt;font-weight:bold;margin-top:20px;color:#000;text-decoration:underline
}
.values{
  font-family:'Playfair Display',serif;
  font-size:12pt;margin-top:5px;color:#000
}
.question-text{color:#013220;text-decoration:underline}
.answer-text{font-size:12pt;color:#000}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  .book-container{flex-direction:column}
  .left,.right{width:100%;padding:0}
  .title{font-size:20pt}
  .buttons button{font-size:12pt;padding:8px 16px}
  .tags{justify-content:center}
}

/* ---------- Navigation bar & misc ---------- */
.nav-bar{
  display:flex;justify-content:space-between;align-items:center;
  background:#fff;padding:12px 24px;font-size:16px;font-family:'Calibri',serif;
  border-bottom:1px solid #e0e0e0;
}
.nav-left{font-weight:bold;color:#000}
.nav-right a{margin-left:20px;text-decoration:none;color:#000}
.nav-right a:hover{text-decoration:underline}

.page-header{
  text-align:center;background:#fff;padding:40px 20px 20px;border-bottom:1px solid #f0f0f0
}
.page-header h1{
  font-family:'Playfair Display',serif;font-size:45px;color:#000;margin:0
}
.page-header p{
  font-family:'Calibri',serif;font-size:18px;color:#333;margin-top:10px
}

#searchInput{
  font-size:14px;padding:8px 14px;border-radius:8px;border:1px solid #ccc;
  background:#fff;font-family:'Lusitana',serif;min-width:200px;box-shadow:none
}

.floating-message{
  position:fixed;bottom:10px;left:10px;background:#f0f0f0;color:#000;
  font-family:'Merriweather',serif;padding:8px;border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);z-index:999;font-size:8pt;
  max-width:160px;text-align:center
}


#lightbox img {
  border-radius: 8px;
  box-shadow: 0 2px 20px rgba(255,255,255,0.2);
  transition: transform 0.3s ease;
}

#lightbox div:hover {
  transform: scale(1.05);
}