/* ============ HEART Theme ============ */
:root {
  --heart-dark: #0b1220;
  --heart-accent: #ffcc00;
  --heart-cta: #ff2d55;
  --heart-blue: #0d6efd;
}

body { font-family: "Hind Siliguri", Arial, sans-serif; background: #fff; }

/* বাংলা টেক্সটে বাটন ভেঙে যাওয়া ফিক্স */
.btn { white-space: nowrap; }
.btn.w-100, .d-grid .btn, .btn-cta.btn-lg { white-space: normal; }
.navbar .btn { line-height: 1.6; }

/* Navbar */
.site-navbar { background: var(--heart-dark); }
.site-navbar .navbar-brand, .site-navbar .nav-link { color: #fff !important; font-weight: 500; }
.site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: var(--heart-accent) !important; }
.site-navbar .navbar-toggler { border-color: rgba(255,255,255,.4); }
.site-navbar .navbar-toggler-icon { filter: invert(1); }
.brand-logo { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; }

.btn-cta {
  background: var(--heart-cta); color: #fff; font-weight: 700; border-radius: 999px;
  border: 2px solid transparent; box-shadow: 0 2px 8px rgba(255,45,85,.35); transition: .2s;
}
.btn-cta:hover { background: #e0264b; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(255,45,85,.45); }

/* Section titles */
.section-title { font-weight: 700; position: relative; display: inline-block; margin-bottom: .4rem; }
.section-title:after { content: ""; display: block; width: 60px; height: 3px; background: var(--heart-cta); margin: 8px auto 0; border-radius: 3px; }
.section-subtitle { color: #6c757d; margin-bottom: 1.5rem; }

/* Hero slider */
.hero-slider { position: relative; width: 100%; height: 56vw; max-height: 520px; overflow: hidden; background: #000; }
.hero-slider .hs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.hero-slider .hs-slide.active { opacity: 1; }
.hero-slider img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slider .hs-caption {
  position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%);
  text-align: center; color: #fff; background: rgba(0,0,0,.45);
  padding: 14px 22px; border-radius: 12px; max-width: 90%;
}
.hero-slider .hs-caption h2 { margin: .2rem 0; font-size: clamp(18px, 3.5vw, 32px); font-weight: 700; }
.hero-slider .hs-caption p { margin: 0 0 6px; font-size: clamp(14px, 2.6vw, 18px); }
.hero-slider .hs-prev, .hero-slider .hs-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  background: rgba(0,0,0,.35); color: #fff; border: 0; font-size: 26px;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
}
.hero-slider .hs-prev { left: 12px; } .hero-slider .hs-next { right: 12px; }
.hero-slider .hs-prev:hover, .hero-slider .hs-next:hover { background: rgba(0,0,0,.6); }
.hero-slider .hs-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; display: flex; gap: 8px; z-index: 5; }
.hero-slider .hs-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: #ffffff80; cursor: pointer; }
.hero-slider .hs-dots button.active { background: #fff; }
@media (max-width: 576px) { .hero-slider { height: 62vw; max-height: 420px; } }

/* Stats */
.stats-section { background: var(--heart-dark); color: #fff; }
.stat-box { padding: 24px 10px; }
.stat-box .stat-icon { font-size: 2rem; }
.stat-box .stat-value { font-size: 2.2rem; font-weight: 800; color: var(--heart-accent); }
.stat-box .stat-label { opacity: .85; }

/* Tour cards */
.tour-card { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.08); transition: .25s; height: 100%; }
.tour-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.tour-card .tour-banner { height: 200px; object-fit: cover; width: 100%; background: #e9ecef; }
.tour-card .badge-fee { background: var(--heart-cta); font-size: .95rem; }
.countdown { display: flex; gap: 8px; justify-content: center; }
.countdown .cd-box { background: var(--heart-dark); color: #fff; border-radius: 8px; padding: 6px 10px; min-width: 56px; text-align: center; }
.countdown .cd-box b { display: block; font-size: 1.2rem; color: var(--heart-accent); }
.countdown .cd-box small { font-size: .7rem; opacity: .8; }

/* Logo slider (sponsors/donors) */
.logo-slider { display: flex; align-items: center; gap: 10px; }
.logo-marquee { overflow-x: auto; position: relative; padding: 10px 0; flex: 1; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.logo-marquee::-webkit-scrollbar { display: none; }
.logo-track { display: flex; gap: 56px; align-items: center; width: max-content; margin: 0 auto; }
.logo-track img { height: 100px; width: auto; max-width: 220px; object-fit: contain; filter: grayscale(20%); transition: .2s; }
.logo-track img:hover { filter: none; transform: scale(1.06); }
.logo-arrow {
  width: 42px; height: 42px; min-width: 42px; border-radius: 50%; border: 0;
  background: var(--heart-dark); color: #fff; font-size: 18px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(11,18,32,.25); transition: .2s; z-index: 2;
}
.logo-arrow:hover { background: var(--heart-cta); transform: scale(1.08); }
@media (max-width: 576px) { .logo-track img { height: 72px; } .logo-track { gap: 36px; } }

/* Gallery & memories */
.g-img { width: 100%; height: 220px; object-fit: cover; border-radius: 12px; transition: .25s; cursor: pointer; }
.g-img:hover { transform: scale(1.02); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.memory-card { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.08); height: 100%; }
.memory-card img { height: 230px; width: 100%; object-fit: cover; }

/* Seat map */
.seat-map { display: inline-block; background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 14px; padding: 18px 22px; }
.seat-row { display: flex; gap: 8px; margin-bottom: 8px; justify-content: center; }
.seat {
  width: 46px; height: 40px; border-radius: 8px 8px 4px 4px; border: 2px solid #adb5bd;
  font-size: .75rem; font-weight: 700; cursor: default; background: #fff; color: #333;
}
.seat-gap { width: 30px; display: inline-block; }
.seat-available { background: #fff; border-color: #198754; color: #198754; }
.seat-selectable { cursor: pointer; }
.seat-selectable:hover { background: #d1e7dd; }
.seat-selected { background: #198754 !important; color: #fff !important; }
.seat-pending { background: #fff3cd; border-color: #ffc107; color: #997404; }
.seat-booked { background: #dc3545; border-color: #b02a37; color: #fff; }
.seat-blocked { background: #adb5bd; border-color: #6c757d; color: #fff; }
.seat-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; margin-top: 10px; }
.seat-legend .seat { width: 26px; height: 22px; font-size: 0; pointer-events: none; }

/* Suggestions */
.suggestion-card { border: 0; border-radius: 12px; box-shadow: 0 3px 12px rgba(0,0,0,.07); }
.vote-btn { border: 1px solid #dee2e6; background: #fff; border-radius: 999px; padding: 4px 14px; font-size: .9rem; cursor: pointer; transition: .15s; }
.vote-btn.voted-up { background: #d1e7dd; border-color: #198754; color: #198754; }
.vote-btn.voted-down { background: #f8d7da; border-color: #dc3545; color: #dc3545; }
.reply-box { background: #f8f9fa; border-radius: 10px; padding: 10px 14px; margin-top: 8px; }
.reply-box.admin-reply { background: #fff8e1; border-left: 4px solid var(--heart-accent); }

/* Footer */
.site-footer { background: var(--heart-dark); color: #fff; padding: 36px 0; margin-top: 48px; }
.site-footer a { color: var(--heart-accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-top { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
@media (min-width: 768px) { .footer-top { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.footer-brand img { width: 50px; height: 50px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; }
.footer-sep { height: 1px; background: rgba(255,255,255,.12); margin: 18px 0; }
.footer-bottom { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; font-size: .95rem; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }

/* Misc */
.bg-soft { background: #f6f8fb; }
.video-frame { max-width: 760px; margin: 0 auto; }
.video-frame iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.15); }

/* ============ Live Chat Widget ============ */
#chatWidget { position: fixed; bottom: 20px; right: 20px; z-index: 1050; }
#chatToggle {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--heart-cta); color: #fff; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(255,45,85,.45); transition: .2s;
}
#chatToggle:hover { transform: scale(1.08); }
#chatPanel {
  display: none; flex-direction: column; width: 340px; height: 460px;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.chat-head { background: var(--heart-dark); color: #fff; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; }
.chat-head small { font-size: .7rem; }
#chatClose { background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.chat-body { flex: 1; overflow-y: auto; padding: 12px; background: #f4f6fa; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: .85rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.chat-msg.visitor { align-self: flex-end; background: var(--heart-cta); color: #fff; border-bottom-right-radius: 3px; }
.chat-msg.bot { align-self: flex-start; background: #fff; border: 1px solid #e3e8f0; border-bottom-left-radius: 3px; }
.chat-msg.admin { align-self: flex-start; background: #fff8e1; border: 1px solid #ffcc00; border-bottom-left-radius: 3px; }
.chat-msg.admin:before { content: "🛡️ Admin"; display: block; font-size: .65rem; font-weight: 700; color: #997404; margin-bottom: 2px; }
.chat-msg.typing { color: #999; }
.chat-foot { display: flex; border-top: 1px solid #e3e8f0; }
.chat-foot input { flex: 1; border: 0; padding: 12px; font-size: .9rem; outline: none; }
.chat-foot button { border: 0; background: var(--heart-dark); color: #fff; padding: 0 18px; cursor: pointer; }
.chat-foot button:hover { background: var(--heart-cta); }
@media (max-width: 420px) {
  #chatPanel { width: calc(100vw - 32px); height: 70vh; }
}
@media print { #chatWidget { display: none !important; } }

/* ============ Mobile responsiveness (100%) ============ */
.seat-map { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.seat-row { min-width: max-content; }
.countdown { flex-wrap: wrap; }
.tour-card .card-body, .suggestion-card .card-body { word-break: break-word; }
iframe { max-width: 100%; }

@media (max-width: 576px) {
  .section-title { font-size: 1.45rem; }
  h1.section-title { font-size: 1.6rem; }
  .section-subtitle { font-size: .9rem; }
  .seat { width: 38px; height: 34px; font-size: .62rem; }
  .seat-gap { width: 16px; }
  .seat-legend { gap: 8px; font-size: .75rem; }
  .countdown .cd-box { min-width: 46px; padding: 4px 6px; }
  .countdown .cd-box b { font-size: 1rem; }
  .tour-card .tour-banner { height: 160px; }
  .memory-card img { height: 180px; }
  .g-img { height: 160px; }
  .stat-box { padding: 14px 6px; }
  .stat-box .stat-value { font-size: 1.6rem; }
  .hero-slider .hs-caption { padding: 8px 12px; bottom: 14%; }
  .hero-slider .hs-prev, .hero-slider .hs-next { width: 34px; height: 34px; font-size: 20px; }
  .vote-btn { padding: 3px 10px; font-size: .8rem; }
  .footer-links { font-size: .85rem; }
  .site-footer { padding: 24px 0; }
  .video-frame iframe { border-radius: 10px; }
  .btn-cta.btn-lg { font-size: 1rem; padding: .55rem 1.1rem; }
  .logo-arrow { width: 34px; height: 34px; min-width: 34px; font-size: 14px; }
  .card-body { padding: 1rem; }
  .modal-dialog { margin: .5rem; }
}
@media (max-width: 380px) {
  .seat { width: 32px; height: 30px; font-size: .55rem; }
  .seat-gap { width: 12px; }
  .chip { font-size: .68rem; }
}