/* assets/styles.css - full file (paste entire content) */
/* Reset & Base */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px} /* change to 17 to zoom more */
body{font-family:'Poppins',sans-serif;background:#f6f6f8;color:#111;min-height:100vh;-webkit-font-smoothing:antialiased}

/* container */
.container{max-width:1260px;margin:0 auto;padding:0 16px}

/* header */
.modern-header{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.06);position:sticky;top:0;z-index:1200;padding:8px 0}
.header-container{display:flex;align-items:center;gap:18px;justify-content:space-between}
.header-logo img{height:42px}
.header-search-wrapper{flex:1;max-width:720px;margin:0 16px;position:relative}
.search-box input{width:100%;padding:10px 42px 10px 16px;border-radius:28px;border:1px solid #e6e6e6;background:#fff;font-size:14px}
.search-icon-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#9aa3ab}
.clear-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:none;color:#e53935;cursor:pointer}

/* search dropdown */
.search-results-dropdown{position:absolute;top:calc(100% + 10px);left:0;width:100%;display:none;z-index:2000;background:#fff;border-radius:10px;box-shadow:0 12px 30px rgba(10,20,30,0.08);max-height:360px;overflow:auto;padding:6px;border:1px solid #eee}
.search-results-dropdown .result-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;color:#111;text-decoration:none;border-bottom:1px solid #f5f5f5}
.search-results-dropdown .result-item:last-child{border-bottom:none}
.search-results-dropdown .result-item:hover{background:#f6fbff}
.search-results-dropdown .result-item img{width:64px;height:64px;object-fit:cover;border-radius:6px;flex-shrink:0}
.search-results-dropdown .result-info h4{margin:0;font-size:14px;color:#0b1220;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-results-dropdown .result-info p{margin:4px 0 0;font-size:13px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* menu */
.menu-links{list-style:none;display:flex;gap:18px;margin:0;padding:0;align-items:center}
.menu-links a{color:#333;text-decoration:none;font-weight:600;font-size:14px}
.hamburger{display:none;font-size:22px;cursor:pointer;color:#333;padding:8px}

/* page title */
.page-title{max-width:1260px;margin:22px auto;padding:0 16px}
.page-title h1{font-size:30px;margin:0;font-weight:800;color:#0b1220}

/* category row */
.cat-row{background:#fff;border-radius:12px;padding:14px;box-shadow:0 10px 30px rgba(12,20,30,0.06);border:1px solid rgba(12,20,30,0.03);position:relative;margin:22px 0}
.cat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}
.cat-header h3{margin:0;font-size:18px;color:#0b1220;font-weight:700}
.cat-actions{display:flex;gap:8px;align-items:center}

/* track */
.cat-track-wrapper{position:relative;overflow:hidden;padding:6px 2px}
.cat-track{display:flex;gap:16px;transition:transform 420ms cubic-bezier(.22,.9,.35,1);will-change:transform;padding-bottom:6px}

/* card item width */
.cat-item{flex:0 0 calc((100% - 16px*3)/4);max-width:calc((100% - 16px*3)/4);min-width:220px}
.cat-item.see-more{flex:0 0 calc((100% - 16px*3)/4);max-width:calc((100% - 16px*3)/4);display:flex;align-items:center;justify-content:center}

/* see more card */
.see-more-card{width:100%;height:420px;border-radius:10px;background:#f7fafc;border:2px dashed #e6edf2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;text-align:center;color:#334155;font-weight:700}
.see-more-card a{display:inline-block;margin-top:12px;padding:10px 14px;background:#fff;border-radius:8px;border:1px solid #e2e8f0;text-decoration:none;color:#0b1220;font-weight:700}

/* card */
.card{background:#fff;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(12,20,30,0.06);border:1px solid rgba(12,20,30,0.03);min-height:auto;transform:translateY(10px);opacity:0;animation:slide-and-fade-in .45s ease forwards}
@keyframes slide-and-fade-in{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}

/* media */
.card .media{height:260px;display:flex;align-items:center;justify-content:center;background:#fff;padding:12px;border-bottom:1px solid #f4f4f4}
.card .media img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.img-skel{width:100%;height:100%;background:linear-gradient(90deg,#f0f0f0,#eaeaea,#f0f0f0);background-size:200% 100%;animation:skeleton 1.2s linear infinite}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* body */
.card .body{padding:12px;display:flex;flex-direction:column;flex:1}
.card .title{font-size:16px;margin:0 0 8px;line-height:1.35;color:#111;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{font-size:13px;color:#6b7280;margin-bottom:8px}
.card .desc{font-size:13px;color:#4b5563;line-height:1.45;margin-bottom:12px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* bottom */
.card .card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;margin-top:12px;border-top:1px dashed #f1f1f1;flex-wrap:nowrap}
.discount-text{color:#e63946;font-weight:700;font-size:13px;white-space:nowrap;flex:1;min-width:0}
.btn{background:#28a745;color:#fff;padding:9px 14px;border-radius:8px;text-decoration:none;font-weight:700;white-space:nowrap;flex-shrink:0}

/* arrows */
.cat-btn{position:absolute;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 8px 20px rgba(10,20,30,0.12);display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(0,0,0,0.06);z-index:30}
.cat-btn:hover{transform:scale(1.03)}
.cat-btn.prev{left:8px;top:50%;transform:translateY(-50%)}
.cat-btn.next{right:8px;top:50%;transform:translateY(-50%)}

/* Footer */
.main-footer{background:#0b1116;color:#cbd5e1;padding:28px 0;margin-top:28px}
.footer-container{max-width:1260px;margin:0 auto;padding:0 16px}
.footer-request-area{background:#0f1720;color:#e6eef5;padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 24px rgba(2,6,23,0.6);margin-bottom:18px}
.footer-form{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end}
.footer-form .f-btn{justify-self:center}
.f-group input{background:#111827;border:1px solid #23303b;color:#fff;padding:10px;border-radius:8px}
.f-btn{background:linear-gradient(45deg,#1abc9c,#16a085);border:none;color:#fff;padding:10px 16px;border-radius:8px;cursor:pointer}
.footer-content{padding-top:12px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:18px}
.footer-links a{color:#cbd5e1;text-decoration:none}
.footer-links a:hover{color:#7ee0c6;padding-left:6px;transition:all .18s}
.footer-bottom{background:#071018;padding:12px 0;text-align:center;color:#6b7280}

/* Responsive */
@media(max-width:1260px){.container{max-width:1100px}}
@media(max-width:980px){.cat-item{flex:0 0 calc((100% - 16px*2)/3);max-width:calc((100% - 16px*2)/3)} .card .media{height:220px}}
@media(max-width:760px){
  .container{max-width:100%;padding:0 12px}
  .cat-item{flex:0 0 86%;max-width:86%}
  .card{min-height:360px}
  .card .media{height:180px}
  .menu-links{position:fixed;top:72px;right:-100%;width:72%;height:calc(100vh - 72px);flex-direction:column;background:#fff;padding:20px;gap:20px;align-items:flex-start;box-shadow:-6px 0 20px rgba(0,0,0,0.08);transition:right .32s cubic-bezier(.22,.9,.35,1);z-index:1300}
  .menu-links.active{right:0}
  .hamburger{display:block}
  .hero .title{font-size:22px}
  .footer-content{display:block}
  .footer-form{grid-template-columns:1fr;gap:10px}
  .footer-request-area{margin-bottom:10px}
  .cat-btn{display:flex}
  .search-results-dropdown{left:-12px;width:calc(100% + 24px);border-radius:8px;padding:8px;max-height:420px}
  .search-results-dropdown .result-item img{width:72px;height:72px}
  .search-results-dropdown .result-info h4{font-size:15px;white-space:normal;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
  .see-more-card{height:320px}
}

/* small helper */
img{max-width:100%;display:block}
.no-image{background:#f4f6f7;color:#9aa3ab;padding:18px;border-radius:6px;display:flex;align-items:center;justify-content:center}
/* ---------- Page title / site H1 styling: "Rokomari Promo Code" ---------- */
.page-title {
  max-width: 1260px;
  margin: 18px auto 12px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;       /* center on desktop; page layout already centered */
  text-align: center;
}

/* H1 */
.page-title h1 {
  font-size: clamp(20px, 3.6vw, 40px); /* responsive: grows on wide screens */
  line-height: 1.06;
  margin: 0;
  font-weight: 800;
  color: #0b1220;
  letter-spacing: -0.5px;
  display: inline-block;
  position: relative;
  padding-bottom: 14px; /* space for underline */
  -webkit-font-smoothing: antialiased;
  align:center;
}

/* Accent underline (gradient) */
.page-title h1::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  height: 6px;
  width: min(240px, 60%);
  border-radius: 6px;
  background: linear-gradient(90deg, #1abc9c, #3498db, #9b59b6);
  box-shadow: 0 6px 18px rgba(60,80,120,0.12);
  opacity: 0.95;
}

/* Small subtitle under the H1 (Bangla hint text) */
.page-title .subtitle {
  font-size: 14px;
  color: #49515b;
  opacity: 0.95;
  max-width: 900px;
  line-height: 1.4;
  margin-top: 6px;
}

/* Small left badge (optional) */
.page-title .site-badge {
  position:absolute;
  left: 16px;
  top: -6px;
  background:#fff;
  border-radius:8px;
  padding:6px 10px;
  box-shadow:0 6px 20px rgba(10,20,30,0.06);
  border:1px solid rgba(0,0,0,0.04);
  font-weight:700;
  font-size:12px;
  color:#0b1220;
  display:none; /* hidden by default; enable if you want the badge */
}

/* responsive tweaks */
@media (max-width: 980px) {
  .page-title { align-items: flex-start; text-align: left; padding-left: 16px; padding-right: 16px; }
  .page-title h1::after { width: 160px; }
  .page-title h1 { padding-bottom: 12px; }
}
@media (max-width: 520px) {
  .page-title { padding-left: 12px; padding-right: 12px; }
  .page-title h1 { font-size: clamp(18px, 6.8vw, 28px); }
  .page-title .subtitle { font-size: 13px; color:#505f6b; }
}



/* ----------------------------------------------------------
   PAGE TITLE (fully rewritten to work on all devices)
----------------------------------------------------------- */

/* Main H1 Title */
h1.page-title {
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;

  /* Proper centering everywhere */
  text-align: center !important;
  display: block;
  width: 100%;

  margin: 2rem auto;
  position: relative;
  color: #333;
}

/* Gradient underline */
h1.page-title::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;

  width: 50%;
  height: 6px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ff6b6b, #5f27cd);
}

/* Mobile optimization */
@media (max-width: 600px) {
  h1.page-title::before {
    width: 70%;
  }
}


/* === Card layout normalization === */
.card{
  display:flex;
  flex-direction:column;
  height:460px; /* adjust if you want taller/shorter cards */
}

.card-content{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Fixed image area */
.card .media{
  flex-shrink:0;
  height:220px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.card .media img{
  max-width:100%;
  max-height:100%;
  object-fit:cover;
}

/* Text + button area */
.card .body{
  display:flex;
  flex-direction:column;
  flex:1;
}

/* Description: max 4 lines, fill available space */
.card .desc{
  flex:1;
  font-size:14px;
  line-height:1.5;
  margin-top:6px;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Button bar pinned to bottom */
.card-bottom{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}


/* ===========================
   Global FAQ section
   =========================== */
/* FAQ: vertical accordion layout */
.faq-section{
  margin:40px 0 10px;
  padding:24px 0 32px;
  background:transparent; /* keep same theme */
}

.faq-section .container{
  max-width:880px;
}

/* stack FAQ items vertically instead of wide grid */
.faq-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
}

/* each FAQ item acts like a card but auto height */
.faq-item{
  width:100%;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  padding:12px 14px;
  box-shadow:0 4px 10px rgba(15,23,42,0.04);
}

/* keep your existing summary/body styles (or add if missing) */
.faq-item summary{
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item[open] summary{
  color:#2563eb;
}
.faq-body{
  margin-top:8px;
  font-size:14px;
  color:#4b5563;
  line-height:1.5;
}


@media(min-width:768px){
  .faq-section{
    margin-top:48px;
    padding-top:32px;
  }
}


/* ===========================
   Category pages: improved card layout
   Only affects <main data-cards="true"> pages (category listings)
   =========================== */
@media (min-width: 900px){
  #main[data-cards] .cards-area{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
  }

  #main[data-cards] .card{
    width: 100%;
    min-height:auto;
    max-width: 100%;
    margin: 16px auto;
    border-radius: 12px;
    box-shadow:0 10px 24px rgba(15,23,42,0.06);
    border:1px solid rgba(15,23,42,0.04);
    overflow:hidden;
  }

  #main[data-cards] .card-content{
    align-items:flex-start;
    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:18px;
    padding:14px;
  }

  #main[data-cards] .card .media{
    flex:0 0 150px;
    height:180px;
    border-radius:10px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f9fafb;
    padding:0;
  }

  #main[data-cards] .card .media img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  #main[data-cards] .card .body{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:2px 4px;
  }

  #main[data-cards] .card .title{
    font-size:1.05rem;
    margin-bottom:6px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #main[data-cards] .card .meta{
    font-size:0.9rem;
    color:#6b7280;
    margin-bottom:4px;
  }

  #main[data-cards] .card .desc{
    font-size:0.95rem;
    color:#374151;
    line-height:1.4;
    margin-bottom:8px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #main[data-cards] .card .card-bottom{
    margin-top:6px;
    padding-top:8px;
    border-top:1px dashed #e5e7eb;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }

  #main[data-cards] .card .discount-text{
    font-size:0.9rem;
    color:#ef4444;
    font-weight:600;
  }

  #main[data-cards] .card .btn{
    padding:8px 16px;
    border-radius:999px;
    font-size:0.92rem;
  }
}

/* Style for the category page "আরও দেখুন" button */
#main[data-cards] .cards-load-more{
  display:block;
  margin:18px auto 8px;
  padding:10px 22px;
  border-radius:999px;
  border:none;
  background:#16a34a;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
#main[data-cards] .cards-load-more:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(22,163,74,0.35);
}


/* ===========================
   Breadcrumbs
   =========================== */
.breadcrumbs{
  background:#f3f4f6;
  border-bottom:1px solid #e5e7eb;
}
.breadcrumbs .container{
  padding:6px 16px;
}
.breadcrumbs ol{
  list-style:none;
  display:flex;
  gap:6px;
  font-size:12px;
  color:#6b7280;
  flex-wrap:wrap;
}
.breadcrumbs a{
  color:#4b5563;
  text-decoration:none;
}
.breadcrumbs a:hover{
  text-decoration:underline;
}
.breadcrumbs li+li::before{
  content:'/';
  margin-right:6px;
  color:#9ca3af;
}


/* ===========================
   Discount badge
   =========================== */
.card{
  position:relative;
}
.card::before{
  content:'Promo';
  position:absolute;
  top:10px;
  left:10px;
  background:linear-gradient(135deg,#f97316,#ec4899);
  color:#fff;
  font-size:11px;
  font-weight:600;
  padding:4px 8px;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}


/* contact form */
.contact-form{
  max-width:480px;
  margin-top:8px;
}
.contact-form .form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}
.contact-form label{
  font-size:14px;
  font-weight:600;
  color:#111827;
}
.contact-form input,
.contact-form textarea{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #e5e7eb;
  font-size:14px;
  outline:none;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 1px rgba(37,99,235,0.12);
}
.contact-form .btn.primary{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  border:none;
  background:#16a34a;
  color:#fff;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
}
.contact-form .btn.primary:hover{
  background:#15803d;
}

/* Add arrow icon at end of FAQ question */
.faq-item summary{
  position:relative;
  padding-right:24px;
}
.faq-item summary::after{
  content:"🔽";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  opacity:0.7;
}
.faq-item[open] summary::after{
  transform:translateY(-50%) rotate(180deg);
}


/* Category page intro paragraphs */
.page-title + p,
.page-title + p + p{
  max-width:900px;
  margin:6px auto;
  font-size:14px;
  line-height:1.7;
}

#main[data-cards] p{
  font-size:14px;
  line-height:1.7;
}