/* ===================== THEME VARIABLES ===================== */
:root {
  /* Global */
  --primary-bg: #111;
  --primary-text: #fff;

  /* Navbar */
  --navbar-bg: rgba(17, 17, 17, 0.8);
  --navbar-text: #ffffff;
  --navbar-hover: gray;

  /* Welcome Section */
  --welcome-text: #ffffff;
  --tagline-text: #fdd835;

  /* Carousel */
  --book-shadow: rgba(0,0,0,0.5);

  /* Explore Button */
  --explore-bg: #ffffff;
  --explore-text: #000000;
  --explore-hover: gray;

  /* Resources */
  --resource-text: #ffffff;

  /* About Snapshot */
  --about-text: #ffffff;

  /* Footer */
  --footer-bg: rgba(17,17,17,0.8);
  --footer-text: gray;

  /* Our Books */
  --page-heading: #ffffff;
  --page-subheading: rgb(255, 213, 0);

  /* Book Cards */
  --book-title: #000000;
  --book-desc: #555555;
  --book-card-bg: #ffffff;
  --book-card-text: #111111;

  /* Popup */
  --book-popup-bg: #ffffff;
  --book-popup-text: #111111;
  --popup-overlay-bg: rgba(0,0,0,0.7);
}

/* ===================== General ===================== */
body {
  margin: 0;
  font-family: 'Lato', sans-serif;
  background: url('assets/background.webp') no-repeat center center fixed;
  background-size: cover;
  color: var(--primary-text);
}

/* Homepage specific text */
.homepage, .homepage * {
  color: var(--primary-text);
}

/* ===================== Navbar ===================== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: var(--navbar-bg);
  flex-wrap: wrap;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  width: 40px;
  height: 40px;
}

.company-name {
  font-weight: bold;
  font-size: 18px;
  color: var(--navbar-text);
}

.nav-right {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-right li {
  position: relative;
}

.nav-right li a {
  text-decoration: none;
  color: var(--navbar-text);
  font-weight: 500;
  transition: color 0.3s;
}

.nav-right li a:hover {
  color: var(--navbar-hover);
}


/* Dropdown */
.submenu{
  display: none;
  position: absolute;
  top: 100%;          /* 🔥 parent ke bilkul niche */
  left: 0;
  margin-top: 0;     /* 🔥 gap remove */
  background-color: var(--navbar-bg);
  padding: 10px 0;
  border-radius: 6px;
  min-width: 150px;
  z-index: 100;
}

.submenu li {
  list-style: none;
  padding: 8px 20px;
}

.submenu li a {
  color: var(--navbar-text);
  text-decoration: none;
}

.submenu li a:hover {
  color: var(--navbar-hover);
}

.nav-right li:hover .submenu {
  display: block;
}

.nav-right li:hover > .submenu,
.nav-right li .submenu:hover{
  display: block;
}

.submenu::before{
  content: "";
  position: absolute;
  top: -10px;        /* 🔥 invisible bridge */
  left: 0;
  width: 100%;
  height: 10px;
}

html {
  scroll-behavior: smooth;
}


@media (min-width: 769px){
  .nav-right li:hover > .submenu,
  .nav-right li .submenu:hover{
    display: block;
  }
}



/* ===================== Welcome Section ===================== */
.welcome-section {
  text-align: center;
  padding: 80px 20px 40px 20px;
}

.welcome-text {
  font-family: 'Shooting Star', cursive;
  font-size: 3rem;
  margin-bottom: 20px;
  font-weight: normal;
  color: var(--welcome-text);
}

.tagline {
  font-size: 1.5rem;
  margin-bottom: 40px;
  color: var(--tagline-text);
}

/* ===================== Carousel ===================== */
.book-carousel-section {
  text-align: center;
  padding-bottom: 40px;
}

.book-carousel {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 40px;
  perspective: 1000px;
  margin-bottom: 20px;
  flex-wrap: nowrap;
}

.book {
  width: 150px;
  height: 220px;
  transition: all 0.5s ease;
  cursor: pointer;
  box-shadow: 0 10px 20px var(--book-shadow);
}

.book img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.book:hover {
  transform: scale(1.2);
  z-index: 10;
}

/* ===================== Explore Button ===================== */
.explore-button-container {
  margin-top: 20px;
}

@media (max-width:600px) {
  .explore-button-container {
    margin-bottom: 100px;
  }
}

.explore-button {
  padding: 10px 20px;
  border: none;
  background-color: var(--explore-bg);
  color: var(--explore-text);
  font-weight: bold;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.3s;
}

.explore-button:hover {
  background-color: var(--explore-hover);
}

/* ===================== Resources ===================== */
.resources {
  padding: 40px 20px;
  text-align: center;
}

.resource-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

.resource-item img {
  width: 80px;
  height: 80px;
}

.resource-item p {
  margin-top: 10px;
  font-weight: bold;
  color: var(--resource-text);
}

/* ===================== About ===================== */
.about-snapshot {
  padding: 40px 20px;
  text-align: center;
}

.about-snapshot p {
  max-width: 600px;
  margin: 0 auto;
  color: var(--about-text);
}

/* ===================== Footer ===================== */
footer {
  text-align: center;
  padding: 20px;
  background-color: var(--footer-bg);
  color: var(--footer-text);
}

/* ===================== Our Books Page ===================== */
.page-heading {
  text-align: center;
  padding-top: 40px;    /* pehle zyada tha (80–120px type) */
  padding-bottom: 10px; /* niche ka gap kam */
  color: var(--page-heading);
}

.page-heading h1 {
  font-size: 2.5rem;
  margin-bottom: 0px;
  margin-bottom: 8px;
  color: var(--page-heading);
}


/* ===================== Filters ===================== */
.book-filters {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.book-filters select {
  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* ===================== Book Grid ===================== */
/* ===================== Book Grid ===================== */
.book-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* fix 5 books per row */
  gap: 15px;
  padding: 20px;
  justify-items: center;
}

.book-card {
  background: #fff;
  color: #111;
  width: 110px;        /* aur chhota frame */
  height: 180px;       /* fix height (image + text andar fit) */
  border-radius: 8px;
  padding: 5px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;   /* ✅ text bahar nahi jayega */
}

.book-card img {
  width: 100%;
  height: 120px;       /* image aur chhoti */
  object-fit: contain; /* maintain ratio, cut nahi hoga */
  border-radius: 6px;
  background: #f1f1f1;
  flex-shrink: 0;
}

/* Title (Class) */
.book-card h3 {
  font-size: 0.65rem;  /* aur chhota text */
  margin: 2px 0 1px 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Book Name */
.book-card p {
  font-size: 0.65rem;  /* aur chhota text */
  color: gray;
  margin: 0;
  line-height: 1.1;
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* ✅ max 2 lines allowed */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===================== Book Popup Modal ===================== */
.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--popup-overlay-bg);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-box {
  background: var(--book-popup-bg);
  display: flex;
  max-width: 800px;
  width: 90%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  max-height: 80vh;
}

.popup-box img {
  width: 40%;
  object-fit: cover;
}

.popup-details {
  padding: 20px;
  overflow-y: auto;
  width: 60%;
  color: var(--book-popup-text);
}

.popup-details h2,
.popup-details p {
  color: var(--book-popup-text);
}

.popup-close {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 24px;
  cursor: pointer;
  background: #eee;
  padding: 5px 10px;
  border-radius: 50%;
}

/* ===================== Responsive ===================== */
@media (max-width: 768px) {
  .book-carousel {
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  .book {
    width: 45%;
    margin-bottom: 20px;
  }
  .book-card {
    width: 45%;
  }
}

@media (max-width: 480px) {
  .book-carousel {
    justify-content: center;
    gap: 15px;
  }
  .book {
    width: 48%;
    height: auto;
    margin-bottom: 15px;
  }
  .book-card {
    width: 90%;
  }
}

/* ===================== ROLE MODAL ===================== */
.role-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.role-modal-content {
  background: #fff;
  padding: 50px 40px;
  border-radius: 12px;
  text-align: center;
  max-width: 700px;
  width: 90%;
  box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}

.role-modal-content h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #111;
}

.role-buttons {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.role-btn {
  background: #fff;
  border: 2px solid #111;
  padding: 15px 20px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: bold;
  border-radius: 8px;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #111;
}

.role-btn img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

.role-btn:hover {
  background: #111;
  color: #fff;
}

/* ===================== MAIN CONTENT VISIBILITY ===================== */
#main-content {
  display: none;
}


/* Floating Role Button */
.role-widget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  background: var(--navbar-bg);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 99999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.role-widget img {
  width: 35px;
  height: 35px;
}

.nav-right {
  margin: 0 auto;   /* ✅ center fix */
}



 /* Mobole CSS */
/* ================= HAMBURGER ICON ================= */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 18px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}

/* ================= MOBILE NAV ================= */
    /* ================= SIDE PANEL ================= */
.side-panel {
  position: fixed;
  top: 0;
  right: -260px;
  width: 260px;
  height: 100vh;
  background: #111;
  padding-top: 80px;
  transition: right 0.35s ease;
  z-index: 9999;
}

.side-panel .submenu {
  display: none;
  position: static;
  background: transparent;
  padding-left: 15px;
}

.side-panel li.open > .submenu {
  display: block;
}

.side-panel.active {
  right: 0;
}

.side-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-panel li {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: left;
}

.side-panel li a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
}

.select-book-title{
  margin-top: 19px;
  font-weight: 700;
  color: #8a0000;
}

.select-book-title{
  transition: opacity 0.2s ease;
}

/* ================= BOOK POPUP ================= */
.book-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.book-popup.hidden{ display:none; }

.popup-box{
    background:#ffffff;
    width:720px;
    height:420px;
    display:flex;
    border-radius:10px;
    position:relative;
}

.close-popup{
    position:absolute;
    top:10px;
    right:15px;
    font-size:28px;
    cursor:pointer;
}

.popup-left{
    width:40%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.popup-left img{
    width:90%;
    height:90%;
    object-fit:contain;
}

.popup-right{
    width:60%;
    padding:20px;
}

.popup-price{
    margin:12px 0;
    font-weight:600;
}

.popup-btn{
    padding:10px 18px;
    margin-right:10px;
    border:none;
    background:#b74b4b;
    color:#ffffff;
    cursor:pointer;
}

.popup-btn.secondary{
    background:#444;
}

.close-popup{
    z-index:10001;
    pointer-events:auto;
}

/* ===== FIX POPUP TEXT COLOR ===== */

.book-popup,
.book-popup *{
  color:#000 !important;
}

/* Buttons keep original colors */
.book-popup .popup-btn{
  color:#fff !important;
}

.book-popup .popup-btn.secondary{
  color:#fff !important;
}


/* ===== ADD TO CART POPUP (BOOKS PAGE) ===== */

/* ADD TO CART POPUP */
.order-popup,
.order-popup *{
  color:#000 !important;
}

/* ADD TO CART POPUP – BUTTON TEXT WHITE */
.order-popup button,
.order-popup .popup-actions button {
  color: #ffffff !important;
}

.order-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.order-popup.hidden{
  display:none;
}

.order-popup-box{
  background:#fff;
  width:320px;
  padding:20px;
  text-align:center;
  position:relative;
  border-radius: 3%;
}

.popup-close{
  position:absolute;
  top:-16px;
  right:-16px;
  left:auto;
  width:28px;
  height:36px;
  border-radius:50%;
  background:#b74b4b;
  color:#fff;
  font-size:22px;
  line-height:36px;
  cursor:pointer;
}

.order-popup-box img{
  width:120px;
  height:160px;
  object-fit:contain;
}

.popup-actions{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:10px;
}

.popup-actions button{
  width:44px;
  height:44px;
  font-size:20px;
  cursor:pointer;
  background: #b74b4b;
  border: none;
  border-radius: 50%;
}

/* QTY NUMBER (CENTER + BIG) */
.popup-actions span,
.popup-actions .qty,
.popup-actions .quantity,
.popup-actions input {
  width: 100px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;   /* 🔥 BIG NUMBER */
  font-weight: 700 !important;
  text-align: center !important;
  border: none;
  background: #ffffff;
  color: #000000 !important;
  border: 2px solid #b74b4b !important; /* 🔥 RED BORDER */
  border-radius: 6px !important;        /* 🔥 BOX SHAPE */
}


.filter-btn.hidden-filter{
  display: none !important;
}

/* ===== CART ICON (PNG FINAL FIX) ===== */

.cart-link{
  position:relative;
  margin-left:20px;
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
}

/* 🔥 MAIN FIX — YAHI BUG TODTA HAI */
.cart-png{
  width:24px !important;
  height:24px !important;
  max-width:24px !important;
  max-height:24px !important;
  display:block;
  object-fit:contain;
}

/* COUNT BADGE */
.cart-count{
  position:absolute;
  top:-6px;
  right:-10px;
  background:#b74b4b;
  color:#fff;
  font-size:11px;
  padding:2px 6px;
  border-radius:50%;
  line-height:1;
}



/* ================= PROFESSIONAL FILTER LAYOUT ================= */
.books-page .book-filters-pro {
  max-width: 900px;
  margin: 30px auto 10px;
  padding: 20px;
}

.books-page .filters-row {
  display: flex;
  justify-content: center;
  gap: 60px;
}

.books-page .filter-group {
  display: flex;
  flex-direction: column;
  min-width: 220px;
}

.books-page .filter-group label {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #ffffff;
}

.books-page .filter-group select {
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 6px;
  border: none;
  outline: none;
}

.books-page .filters-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* Mobile */
@media (max-width: 600px) {
  .books-page .filters-row {
    flex-direction: column;
    gap: 18px;
    align-items: center;
  }

  .books-page .filter-group {
    width: 100%;
    max-width: 260px;
  }
}



.filter-group label {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #ffffff;
}

.filter-group select {
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 6px;
  border: none;
  outline: none;
}

.filters-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* Video & Audio filters – ALWAYS LEFT */
.filters {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  text-align: left !important;
}

#role-widget{
  position: fixed;
  bottom: 90px;   /* 🔼 upar */
  left: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99998;
}


/* ===== FLOATING CART ===== */
#floatingCart{
  position: fixed;
  bottom: 20px;   /* 🔽 niche */
  left: 20px;
  width: 56px;
  height: 56px;
  background: #b74b4b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}


/* cart icon */
#floatingCart img{
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* count badge */
#cartCount{
  position: absolute;
  top: -6px;
  right: -6px;
  background: #fff;
  color: #b74b4b;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 50%;
}


.order-popup.hidden{
  display:none !important;
}


/* ===== ADD TO CART POPUP (ISOLATED) ===== */

.addtocart-popup{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}

.addtocart-popup.hidden{
  display: none;
}

.addtocart-box{
  background: #fff;
  width: 320px;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  position: relative;
}

.addtocart-close{
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 24px;
  cursor: pointer;
}

.addtocart-box img{
  width: 120px;
  height: 160px;
  object-fit: contain;
  margin-bottom: 10px;
}

.addtocart-qty{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 14px 0;
}

.addtocart-qty button{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #b74b4b;
  color: #fff;
  border: none;
  font-size: 20px;
}

.addtocart-confirm{
  width: 100%;
  padding: 10px;
  background: #b74b4b;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* ======================================================
   ADD TO CART POPUP – FINAL CLEAN DESIGN
   ====================================================== */

/* Overlay */
#cartPopup{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

#cartPopup.hidden{
  display: none;
}

/* Popup Box */
.order-popup-box{
  background: #ffffff;
  width: 320px;
  padding: 22px 20px 20px;
  border-radius: 14px;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  animation: cartPop 0.25s ease-out;
}

/* subtle open animation */
@keyframes cartPop{
  from{
    transform: scale(0.92);
    opacity: 0;
  }
  to{
    transform: scale(1);
    opacity: 1;
  }
}

/* Close (X) */
#cartPopupClose{
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #b74b4b;
  color: #fff;
  font-size: 22px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}

/* Book Image */
#cartPopupThumb{
  width: 120px;
  height: 160px;
  object-fit: contain;
  margin: 0 auto 10px;
  display: block;
}

/* Book Title */
#cartPopupTitle{
  font-size: 16px;
  font-weight: 600;
  color: #111;
  margin-bottom: 4px;
}

/* Price */
#cartPopupPrice{
  font-size: 15px;
  font-weight: 600;
  color: #8a0000;
  margin-bottom: 14px;
}

/* Qty Row */
.popup-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

#qtyPlus,
#qtyMinus{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #b74b4b;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

#qtyPlus:hover,
#qtyMinus:hover{
  transform: scale(1.05);
}

#cartPopupQty{
  width: 56px;
  height: 38px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #ccc;
  color: #111;
  background: #fff;
}

/* ================= BUTTONS ================= */

/* Common */
#cartConfirm,
#cartCancel{
  display: inline-block;
  width: auto;
  min-width: 170px;
  padding: 12px 22px;
  margin: 6px auto 0;
  font-size: 15px;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* ADD TO CART – PRIMARY */
#cartConfirm{
  background: linear-gradient(135deg, #b74b4b, #8a0000);
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 18px rgba(183,75,75,0.4);
}

#cartConfirm:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(183,75,75,0.5);
}

/* CANCEL – SECONDARY */
#cartCancel{
  background: linear-gradient(135deg, #b74b4b, #8a0000);
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 18px rgba(183,75,75,0.4);
}

#cartCancel:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(183,75,75,0.5);
}

/* ===== FIX CART COUNT NOT VISIBLE ON BOOKS PAGE ===== */

#floatingCart{
  position: fixed;
  z-index: 99999;   /* already hai, just safety */
}

/* 🔥 FORCE COUNT ABOVE ALL OVERLAYS */
#cartCount,
.cart-count{
  position: absolute;
  z-index: 100000;  /* overlays se bhi upar */
}


/* ================= ABOUT SECTION (HOME) ================= */
/* ABOUT CONTAINER – WIDER LIKE AUTHORS */
.about-container{
  max-width: 1280px;     /* 🔥 pehle 900px tha */
  margin: 0 auto;
  padding: 40px;

  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}


.about-container h2 {
  color: #000000;
  font-size: 40px;
  margin-bottom: 20px;
  text-align: center;
}

.about-container p {
  line-height: 1.7;
  margin-bottom: 15px;
  font-size: 16px;
  text-align: justify;
  color: #333;
}

@media (max-width: 600px){
  .about-container{
    max-width: 100%;
    margin: 0;      /* 🔥 side gap */
    padding: 20px;
    border-radius: 10px;
  }
}


/* ================= CONTACT SECTION (HOME) ================= */

.contact-section {
  background: transparent;
  padding: 70px 20px;
}

.page-heading {
  text-align: center;
  padding: 40px 20px 10px;
  color: var(--page-heading);
  max-width: none;
  margin: 0;
  border-radius: 0;
}


.contact-section .page-heading{
  max-width: 1340px;     /* 👈 same as contact-container */
  margin: 0 auto 0;     /* 👈 center */
  padding: 40px 20px 14px;
  background: #2c3e50;
  border-radius: 18px 18px 0px 0px;  /* 👈 box ke upar match */
}
.page-heading h1 {
  margin: 0;
  font-size: 30px;
}

.contact-container {
  max-width: 1300px;
  margin: 0 auto;
  background: #ffffff;
  padding: 40px;
  border-radius: 0px 0px 18px 18px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
  color: #333;
}

.contact-container h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  color: #960202;
}

.contact-info {
  margin: 20px 0;
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
}

.contact-info a {
  color: #2980b9;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

html {
  scroll-behavior: smooth;
}


.about-section,
.contact-section {
  margin-top: 80px;     /* 🔥 section separation */
}



@media (max-width: 768px) {
  .about-section,
  .authors-section,
  .contact-section {
    margin-top: 50px;
  }
}


@media (max-width: 600px) {

  .contact-info {
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
  }

  .contact-info br {
    display: none;   /* purane <br> tod do */
  }

  .contact-info a {
    display: block;          /* 🔥 link niche aa jaye */
    margin: 6px 0 16px;      /* link ke niche gap */
    word-break: break-word; /* long email safe */
  }

  .contact-info a {
    margin-bottom: 10px;      /* link ke niche gap */
  }

  .contact-info span.comma {
    display: none;
  }
}

/*---------------------------*/

/* Mobile */
@media (max-width: 600px){
  .order-popup-box{
    width: 88%;
    max-width: 320px;
  }

  #cartConfirm,
  #cartCancel{
    min-width: 150px;
    font-size: 14px;
    padding: 11px 18px;
  }
}


@media (max-width: 600px) {
  .filters {
    align-items: flex-start !important;
    text-align: left !important;
  }
}



/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-right {
    display: none; /* desktop menu hide */
  }

  .book-carousel {
    gap: 25px;              /* pehle 70px tha */
  }

  .book {
    width: 110px;           /* pehle 150px */
    height: 160px;          /* pehle 220px */
  }

  .book:hover {
    transform: scale(1.05); /* mobile pe over-zoom na ho */
  }

    .welcome-section {
    padding-top: 0px;   /* pehle 80px tha */
    padding-bottom: 0px;
  }

  .welcome-text {
    font-size: 2rem;     /* pehle 3rem */
    margin-bottom: 12px;
  }

  .tagline {
    font-size: 1.1rem;   /* pehle 1.5rem */
    margin-bottom: 20px;
  }

    .about-container {
    margin: 20px 12px;   /* 👈 left-right gap */
    padding: 12px;      /* andar ka padding thoda kam */
    max-width: 100%;
  }
}

@media (max-width: 480px) {

  .book-carousel {
    gap: 18px;
  }

  .book {
    width: 95px;
    height: 140px;
  }

  .welcome-section {
    padding-top: 25px;
  }

  .welcome-text {
    font-size: 1.7rem;
  }

  .tagline {
    font-size: 1rem;
  }
}

.panel-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  z-index: 9998;
}

.panel-overlay.active{
  display: block;
}

/*Banner*/
/* ================= HOME BANNER ================= */

.home-banner {
  padding-bottom: 10px;        /* sirf vertical */
}


.banner-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: transparent;       /* 🔥 yahin hona chahiye */
  border-radius: 18px;
  box-sizing: border-box;
}


.banner-slider {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-radius: 16px;
}


/* Slides */
.banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.banner-slide.active {
  opacity: 1;
  z-index: 1;
}

.banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 🔥 YAHI MAIN FIX */
  background: transparent;      /* empty space black */
}


/* Arrows */
.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: #fff;
  border: none;
  font-size: 28px;
  padding: 10px 14px;
  cursor: pointer;
  z-index: 5;
}

.banner-arrow.prev {
  left: 15px;
}

.banner-arrow.next {
  right: 15px;
}

/* Dots */
.banner-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 6;
}

.banner-dots span {
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  cursor: pointer;
}

.banner-dots span.active {
  background: #fff;
}

/* Mobile */
@media (max-width: 768px) {
  .home-banner {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .banner-slider {
    height: 240px;
    border-radius: 12px;
  }
}

@media (max-width: 768px) {
  .banner-wrap {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

@media (max-width: 768px) {
  .banner-slider {
    height: auto;
    min-height: 120px;
  }

  .banner-slide img {
    max-height: 140px;
  }
}

/* ================= MOBILE BOOK POPUP FIX ================= */
@media (max-width: 600px){

  .popup-box{
    flex-direction: column;
    width: 92%;
    height: auto;
    max-height: 90vh;
  }

  /* IMAGE TOP */
  .popup-left{
    width: 100%;
    padding: 10px;
  }

  .popup-left img{
    width: 100%;
    height: 220px;
    object-fit: contain;
  }

  /* CONTENT BELOW IMAGE */
  .popup-right{
    width: 100%;
    padding: 14px;
    text-align: left;   /* 🔥 left aligned text */
  }

  .popup-right h2{
    font-size: 18px;
    margin-bottom: 6px;
  }

  .popup-right p{
    font-size: 14px;
    margin-bottom: 6px;
  }

  .popup-price{
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0;
  }

  /* BUTTONS CENTER */
  .popup-btn{
    width: auto;              /* ❌ full width hata */
    min-width: 160px;         /* ✅ proper button size */
    max-width: 220px;
    margin: 10px auto 0;      /* ✅ center align */
    padding: 10px 18px;
    display: block;
    text-align: center;
  }

  /* ADD GAP BETWEEN BUTTONS */
  .popup-btn.secondary{
    margin-top: 14px;
  }
}

/* ================= ADD TO CART POPUP – MOBILE ================= */
@media (max-width: 600px){

  .order-popup-box{
    width: 70%;
    max-width: 320px;
    border-radius: 12px;
    padding: 20px 16px;
  }

  /* book image */
  .order-popup-box img{
    width: 120px;
    height: 160px;
    object-fit: contain;
    margin: 0 auto 10px;
    display: block;
  }

  /* book name */
  #cartPopupTitle{
    font-size: 16px;
    font-weight: 600;
    color: #000;
    text-align: center;
    margin-bottom: 6px;
  }

  /* price */
  #cartPopupPrice{
    font-size: 15px;
    font-weight: 600;
    color: #000;
    text-align: center;
    margin-bottom: 14px;
  }

  /* qty row */
  .popup-actions{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
  }

  /* + / - buttons */
  .popup-actions button{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #b74b4b;
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
  }

  /* quantity box */
  #cartPopupQty{
    width: 48px;
    height: 38px;
    font-size: 16px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    color: #000;
  }

  /* confirm / cancel buttons */
  #cartConfirm,
  #cartCancel{
    width: auto;
    min-width: 140px;
    padding: 10px 18px;
    border-radius: 6px;
    margin: 8px auto 0;
    display: block;
    font-size: 14px;
  }

  #cartConfirm{
    background: #b74b4b;
    color: #fff;
    border: none;
  }

  #cartCancel{
    background: #444;
    color: #fff;
    border: none;
  }
}

/* ================= MOBILE BOOK POPUP BUTTON ORDER FIX ================= */
@media (max-width: 600px){

  /* popup right section ko flex banao */
  .popup-right{
    display: flex;
    flex-direction: column;
  }

  /* ADD TO CART – upar */
  #addToCartBtn{
    order: 1;
    margin-top: 10px;
  }

  /* VIEW PDF – niche */
  #viewPdfBtn{
    order: 2;
    margin-top: 14px;
  }
}


/* ================= MOBILE ADD TO CART CLICK FIX ================= */
@media (max-width: 600px){

  /* popup container ko touch-safe banao */
  .book-popup{
    pointer-events: auto;
  }

  .popup-box{
    pointer-events: auto;
  }

  .popup-right{
    position: relative;
    z-index: 5;
    pointer-events: auto;
  }

  /* 🔥 ADD TO CART BUTTON – FORCE CLICKABLE */
  #addToCartBtn{
    position: relative;
    z-index: 10;
    pointer-events: auto;
    touch-action: manipulation;
  }

  /* View PDF bhi safe */
  #viewPdfBtn{
    position: relative;
    z-index: 9;
    pointer-events: auto;
  }
}


html {
  scroll-behavior: smooth;
}