/* makkah-live/ml.css — মক্কা-মদিনা মডিউলের শেয়ারড স্টাইল (হোম, লাইভ, মক্কা/মদিনা পেজ) */
:root {
  --pink: #dc3c83; --purple: #7750b9; --green: #1f8a5b; --ink: #293348; --muted: #7b8497;
  --line: #eae4f0; --bg: #f6f2f9; --card: #fff;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ug-font,sans-serif);
  background: var(--bg); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column;
}
.arabic { font-family: 'Amiri', serif; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- টপবার (মোবাইল) ---------- */
.guide-topbar {
  background: #f8f8f8; padding: 12px 16px; box-shadow: 0 2px 4px rgba(0,0,0,.1);
  position: sticky; top: 0; z-index: 100; width: 100%; border-bottom: 1px solid #e0e0e0;
}
.guide-topbar-wrapper { display: flex; align-items: center; gap: 16px; justify-content: center; }
.guide-back-btn {
  flex-shrink: 0; background: #f0f0f0; border: 2px solid #d0d0d0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: #666; transition: .25s;
}
.guide-back-btn:hover { background: #e8e8e8; border-color: #bbb; color: #333; }
.guide-back-btn img { width: 20px; height: 20px; object-fit: contain; display: block; }
.guide-topbar-content { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.guide-topbar h1 { font-size: 16px; font-weight: 600; color: #1a1a1a; line-height: 1.2; }
.guide-topbar p { font-size: 12px; margin-top: 4px; color: #888; line-height: 1; }
.guide-topbar-spacer { width: 40px; flex-shrink: 0; }
@media (max-width: 480px) {
  .guide-topbar { padding: 10px 12px; }
  .guide-topbar-wrapper { gap: 12px; }
  .guide-back-btn, .guide-topbar-spacer { width: 36px; height: 36px; }
  .guide-back-btn img { width: 18px; height: 18px; }
  .guide-topbar h1 { font-size: 14px; }
  .guide-topbar p { font-size: 10px; }
}
/* ডেস্কটপে নেভবার থাকে, তাই টপবার লুকানো (আগের মক্কা লাইভ পেজের মতোই) */
@media (min-width: 769px) { .guide-topbar { display: none !important; } }

/* ---------- হোম পেজ ---------- */
.wrap { width: 100%; max-width: 920px; margin: 0 auto; padding: 18px 16px 40px; flex: 1; }
.hero {
  position: relative; overflow: hidden; border-radius: 14px; padding: 26px 22px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #3b2468 0%, #7750b9 55%, #dc3c83 130%);
  box-shadow: 0 12px 30px rgba(87,52,140,.25);
}
.hero::after {
  content: ''; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background: radial-gradient(circle at 85% 20%, #fff 0 2px, transparent 3px) 0 0/34px 34px;
}
.hero .ar { font-family: 'Amiri', serif; font-size: 30px; line-height: 1.5; position: relative; z-index: 1; }
.hero h2 { font-size: 24px; font-weight: 700; margin-top: 2px; position: relative; z-index: 1; }
.hero p { font-size: 13.5px; opacity: .92; line-height: 1.7; max-width: 520px; margin: 8px auto 0; position: relative; z-index: 1; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 22px 12px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(47,36,67,.06); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(47,36,67,.12); border-color: #d9c9ee; }
.tile:active { transform: scale(.98); }
.tile .ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #f3edfb; }
.tile.makkah .ico { background: #f3edfb; }
.tile.madinah .ico { background: #e6f5ee; }
.tile.live .ico { background: #fff0f6; }
.tile.live.madinah-live .ico { background: #e6f5ee; }
.tile .ico svg { width: 44px; height: 44px; }
.tile h3 { font-size: 17px; font-weight: 700; color: var(--ink); }
.tile p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.badge-live {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px;
  background: #e5233f; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; padding: 3px 8px; border-radius: 20px;
  font-family: var(--ug-font,sans-serif);
}
.badge-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.loading, .errbox { text-align: center; color: var(--muted); padding: 40px 10px; font-size: 14px; }
.errbox { color: #b3261e; }
.errbox button, .retry-btn { margin-top: 10px; padding: 8px 18px; border: 0; border-radius: 6px; background: var(--pink); color: #fff; cursor: pointer; font-size: 13px; }
@media (min-width: 769px) {
  .wrap { padding: 36px 20px 60px; }
  .hero { padding: 38px 30px; }
  .hero .ar { font-size: 40px; } .hero h2 { font-size: 30px; }
  .grid { gap: 20px; } .tile { padding: 30px 16px 24px; } .tile h3 { font-size: 19px; }
}

/* ---------- মক্কা / মদিনা পেজ ---------- */
.place-hero { text-align: center; padding: 26px 16px 20px; color: #fff; background: linear-gradient(135deg, #3b2468, #7750b9); }
body.madinah .place-hero { background: linear-gradient(135deg, #0f4c35, #1f8a5b); }
.place-hero .ar { font-family: 'Amiri', serif; font-size: 34px; line-height: 1.5; }
.place-hero h2 { font-size: 24px; font-weight: 700; }
.place-hero p { font-size: 13px; opacity: .9; margin-top: 4px; }
.tabs {
  position: sticky; top: 0; z-index: 50; display: flex; gap: 6px; padding: 8px 10px; background: #fff;
  border-bottom: 1px solid var(--line); overflow-x: auto; justify-content: center;
}
@media (max-width: 768px) { .tabs { top: 61px; justify-content: flex-start; } }
.tab {
  flex: 1 0 auto; max-width: 220px; padding: 9px 16px; border: 1px solid var(--line); background: #faf8fc; color: var(--ink);
  border-radius: 22px; font-size: 14px; cursor: pointer; white-space: nowrap; transition: .2s;
}
.tab.on { background: var(--purple); border-color: var(--purple); color: #fff; font-weight: 600; }
body.madinah .tab.on { background: var(--green); border-color: var(--green); }
.pane { display: none; animation: fade .25s; }
.pane.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 18px; box-shadow: 0 6px 18px rgba(47,36,67,.05); }
.box h3 { font-size: 20px; margin-bottom: 12px; color: var(--purple); }
body.madinah .box h3 { color: var(--green); }
.prose p { font-size: 16px; line-height: 2; margin-bottom: 14px; color: #36405a; }
.prose p:last-child { margin-bottom: 0; }

.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: #ddd0f0; }
body.madinah .timeline::before { background: #bfe4d2; }
.t-item { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 4px 14px rgba(47,36,67,.05); }
.t-item::before {
  content: ''; position: absolute; left: -24px; top: 18px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--purple); border: 3px solid var(--bg); box-shadow: 0 0 0 2px #ddd0f0;
}
body.madinah .t-item::before { background: var(--green); box-shadow: 0 0 0 2px #bfe4d2; }
.t-item h4 { font-size: 16.5px; margin-bottom: 6px; color: var(--ink); }
.t-item p { font-size: 15px; line-height: 1.95; color: #4a5470; margin-bottom: 8px; }
.t-item p:last-child { margin-bottom: 0; }

.search {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px;
  font-family: inherit; margin-bottom: 14px; background: #fff; outline: none;
}
.search:focus { border-color: var(--purple); }
.qa { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.qa summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; font-size: 16px; font-weight: 600; position: relative; line-height: 1.7; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--purple); transition: .2s; }
body.madinah .qa summary::after { color: var(--green); }
.qa[open] summary::after { content: '−'; }
.qa[open] summary { background: #faf7fd; border-bottom: 1px solid var(--line); }
.qa .ans { padding: 14px 16px 16px; }
.qa .ans p { font-size: 15.5px; line-height: 2; color: #36405a; margin-bottom: 10px; }
.qa .ans p:last-child { margin-bottom: 0; }
.note { font-size: 12.5px; color: var(--muted); line-height: 1.8; margin-top: 12px; text-align: center; }
.empty { text-align: center; color: var(--muted); padding: 28px 10px; font-size: 14px; }
.links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.links a { padding: 10px 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line); color: var(--purple); font-size: 14px; }
.links a.live { background: #e5233f; border-color: #e5233f; color: #fff; }
body.madinah .links a { color: var(--green); }
body.madinah .links a.live { color: #fff; }

/* ---------- লাইভ পেজ ---------- */
body.live-page { background: #000; }
body.live-page .container { flex: 1; display: flex; justify-content: center; align-items: center; padding: 30px 20px; background: #000; flex-direction: column; gap: 16px; }
.video-wrapper { width: 100%; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.8); position: relative; }
.video-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; }
.video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.no-live {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; color: #ddd; padding: 20px; background: #111; font-size: 15px; line-height: 1.8;
}
.no-live.show { display: flex; }
.no-live .ar { font-family: 'Amiri', serif; font-size: 28px; color: #fff; }
.live-links { display: none; }
@media (max-width: 768px) {
  html.live-html, body.live-page { height: 100%; overflow: hidden; }
  body.live-page .container { padding: 0; align-items: stretch; overflow: hidden; }
  body.live-page .video-wrapper { height: 100%; border-radius: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; }
  body.live-page .video-container { width: 100%; height: 100%; padding-bottom: 0; }
}
@media (min-width: 769px) {
  body.live-page .container { padding: 40px 20px; }
  body.live-page .video-wrapper { max-width: 1200px; border-radius: 12px; box-shadow: 0 15px 50px rgba(0,0,0,.9); }
  .live-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .live-links a { padding: 9px 18px; border-radius: 22px; background: #1b1b1b; color: #eee; border: 1px solid #333; font-size: 14px; }
  .live-links a:hover { background: #2a2a2a; }
}