/* নামাজের সময়সূচি — news-card.css-এর থিম (সবুজ, Hind Siliguri) */
.nt-hero {
    background: radial-gradient(circle at 85% 10%, rgba(250, 204, 21, .18), transparent 40%),
                linear-gradient(135deg, #053d05 0%, #0a6b0a 60%, #138a13 100%);
    color: #fff; padding: 38px 0 70px; text-align: center; position: relative; z-index: 1;
}
.nt-hero::after {
    content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
    background-image: radial-gradient(#fff 1.2px, transparent 1.2px); background-size: 22px 22px;
}
.nt-hero .container { position: relative; z-index: 1; }
.nt-crumb { font-size: .85rem; opacity: .85; margin-bottom: 10px; }
.nt-crumb a { color: #fff; text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, .5); }
.nt-crumb i { font-size: .65rem; margin: 0 6px; opacity: .7; }
.nt-hero h1 { font-weight: 800; font-size: clamp(1.6rem, 4.4vw, 2.7rem); margin-bottom: 10px; line-height: 1.35; }
.nt-hero h1 span { color: #fde047; }
.nt-date { font-size: 1rem; opacity: .92; margin-bottom: 18px; }
.nt-date b { opacity: .5; margin: 0 4px; }
.nt-sub { max-width: 620px; margin: -6px auto 18px; opacity: .85; }

.nt-picker { position: relative; display: inline-block; width: min(340px, 100%); text-align: left; }
.nt-pick-btn {
    width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 14px;
    background: #fff; color: #0f172a; font-weight: 700; padding: 12px 16px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .45);
}
.nt-pick-btn span { flex: 1; text-align: left; }
.nt-pick-btn i:first-child { color: #0a6b0a; }
.nt-pick-btn i:last-child { color: #94a3b8; font-size: .8rem; }
.nt-pick-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; background: #fff; border-radius: 14px;
    padding: 8px; box-shadow: 0 20px 44px -12px rgba(15, 23, 42, .35); color: #0f172a;
}
.nt-pick-panel ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.nt-pick-panel a { display: block; padding: 8px 10px; border-radius: 9px; color: #0f172a; text-decoration: none; }
.nt-pick-panel a:hover { background: #f0fdf4; color: #0a6b0a; }
.nt-pick-panel a.active { background: #0a6b0a; color: #fff; font-weight: 700; }
.nt-pick-panel li.empty { padding: 8px 10px; color: #64748b; }

.nt-next {
    margin: 18px auto 0; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 8px 18px;
    backdrop-filter: blur(6px);
}
.nt-next[hidden] { display: none; }
.nt-next-label { font-size: .8rem; opacity: .8; }
.nt-next b { color: #fde047; font-size: 1.1rem; }
.nt-next-left { font-weight: 600; }

.nt-main { margin-top: -44px; position: relative; z-index: 2; padding-bottom: 50px; }
.nt-ramadan {
    display: flex; align-items: center; justify-content: space-around; gap: 14px; margin-bottom: 18px;
    background: linear-gradient(135deg, #facc15, #f59e0b); color: #3b2a05; border-radius: 20px; padding: 16px 20px;
    box-shadow: 0 16px 34px -14px rgba(217, 119, 6, .6); text-align: center;
}
.nt-ramadan small { display: block; font-weight: 600; opacity: .8; }
.nt-ramadan b { font-size: clamp(1.6rem, 5vw, 2.3rem); }
.nt-ramadan > i { font-size: 1.6rem; opacity: .6; }

.nt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nt-tile {
    position: relative; background: #fff; border-radius: 20px; padding: 18px; display: flex; align-items: center; gap: 14px;
    box-shadow: 0 10px 30px -14px rgba(15, 23, 42, .18); border: 2px solid transparent; transition: .25s;
}
.nt-ico { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: #f0fdf4; color: #0a6b0a; font-size: 1.2rem; flex: 0 0 auto; }
.nt-name { flex: 1; font-weight: 700; font-size: 1.1rem; color: #0f172a; line-height: 1.2; }
.nt-name small { display: block; font-weight: 500; font-size: .78rem; color: #64748b; margin-top: 3px; }
.nt-time { font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.9rem); color: #0a6b0a; }
.nt-sun .nt-ico { background: #fef9c3; color: #ca8a04; }
.nt-now-badge { display: none; position: absolute; top: -10px; right: 14px; background: #0a6b0a; color: #fff; font-size: .7rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.nt-tile.now { border-color: #0a6b0a; background: linear-gradient(135deg, #f0fdf4, #fff); }
.nt-tile.now .nt-now-badge { display: block; }
.nt-tile.next { border-color: #facc15; }
.nt-tile.next::after { content: "পরবর্তী"; position: absolute; top: -10px; right: 14px; background: #facc15; color: #3b2a05; font-size: .7rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; }

.nt-sunrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.nt-sunrow > div { background: #fff; border-radius: 14px; padding: 10px 14px; font-size: .88rem; color: #475569; box-shadow: 0 6px 18px -12px rgba(15, 23, 42, .2); }
.nt-sunrow i { color: #ca8a04; margin-right: 6px; }
.nt-sunrow b { display: block; color: #0f172a; font-size: 1rem; }
.nt-note { font-size: .82rem; color: #64748b; margin: 12px 0 0; }

.nt-section { margin-top: 38px; }
.nt-h2 { font-weight: 800; font-size: 1.3rem; margin-bottom: 14px; color: #0f172a; }
.nt-h2 i { color: #0a6b0a; }

.nt-card-cta {
    margin-top: 38px; display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: center;
    background: #fff; border-radius: 24px; padding: 24px; box-shadow: 0 14px 40px -18px rgba(15, 23, 42, .25);
    border: 1px solid #dcfce7;
}
.nt-card-prev canvas { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45); }
.nt-card-text h2 { font-weight: 800; font-size: 1.45rem; margin: 10px 0; }
.nt-card-text p { color: #475569; }
.nt-pill { display: inline-block; background: #f0fdf4; color: #0a6b0a; font-weight: 700; font-size: .8rem; padding: 4px 12px; border-radius: 999px; }

.nt-table-wrap { background: #fff; border-radius: 20px; overflow: auto; box-shadow: 0 10px 30px -16px rgba(15, 23, 42, .2); }
.nt-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .95rem; }
.nt-table th { background: #0a6b0a; color: #fff; font-weight: 700; padding: 12px 10px; text-align: center; position: sticky; top: 0; }
.nt-table th:first-child, .nt-table td:first-child { text-align: left; padding-left: 18px; }
.nt-table td { padding: 10px; text-align: center; border-bottom: 1px solid #f1f5f9; font-weight: 600; color: #1f2937; }
.nt-table td small { display: block; font-weight: 500; color: #64748b; font-size: .75rem; }
.nt-table tr.fri td { background: #fefce8; }
.nt-table tr.today td { background: #f0fdf4; }
.nt-table tr.today td:first-child b::after { content: " (আজ)"; color: #0a6b0a; }

.nt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-chips a { background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 7px 16px; color: #0f172a; text-decoration: none; font-weight: 600; transition: .2s; }
.nt-chips a:hover { border-color: #0a6b0a; color: #0a6b0a; background: #f0fdf4; }
.nt-chips a.all { background: #0a6b0a; color: #fff; border-color: #0a6b0a; }

.nt-dist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nt-dist {
    display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 12px 14px; text-decoration: none; color: #0f172a;
    box-shadow: 0 6px 20px -14px rgba(15, 23, 42, .25); border: 1px solid #f1f5f9; transition: .2s;
}
.nt-dist:hover { border-color: #0a6b0a; transform: translateY(-2px); color: #0f172a; }
.nt-dist b { flex: 1; font-size: 1rem; }
.nt-dist span { font-weight: 700; color: #0a6b0a; font-size: .9rem; text-align: center; line-height: 1.1; }
.nt-dist span small { display: block; font-size: .65rem; color: #64748b; font-weight: 500; }
.nt-dist > i { color: #cbd5e1; font-size: .75rem; }

@media (max-width: 991px) {
    .nt-dist-grid { grid-template-columns: repeat(2, 1fr); }
    .nt-sunrow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .nt-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .nt-tile { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; }
    .nt-ico { width: 38px; height: 38px; font-size: 1rem; }
    .nt-card-cta { grid-template-columns: 1fr; text-align: center; }
    .nt-card-prev { max-width: 240px; margin: 0 auto; }
}
@media (max-width: 480px) {
    .nt-dist-grid { grid-template-columns: 1fr; }
    .nt-hero { padding: 26px 0 64px; }
}
.nt-main-list { margin-top: 0; padding-top: 6px; }
.nt-hero:has(+ .nt-main-list) { padding-bottom: 46px; }
/* জেলা তালিকা খোলা থাকলে নিচের ঘরগুলোর ওপরে দেখায় */
.nt-hero.nt-open { z-index: 5; }

/* ── হিরোর মসজিদের দৃশ্য ── */
.nt-hero { padding-bottom: 170px; }
.nt-hero:has(+ .nt-main-list) { padding-bottom: 150px; }
.nt-hero .container { z-index: 2; }
.nt-art { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.nt-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.nt-moon { position: absolute; top: 0; right: 7%; width: 240px; height: 240px; }
.nt-mosque { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 190px; }
.nt-twinkle { animation: ntTwinkle 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.nt-twinkle.d2 { animation-delay: 1.3s; }
@keyframes ntTwinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
/* দুলতে থাকা ফানুস */
.nt-lantern { position: absolute; top: 0; width: 2px; background: rgba(253, 230, 138, .55); transform-origin: top center; animation: ntSwing 4s ease-in-out infinite; }
.nt-lantern.l1 { left: 7%; height: 70px; }
.nt-lantern.l2 { left: 15%; height: 115px; animation-delay: -2s; }
.nt-lantern span {
    position: absolute; left: 50%; bottom: -46px; width: 28px; height: 46px; transform: translateX(-50%);
    background: linear-gradient(180deg, #fde68a, #f59e0b); border-radius: 8px 8px 12px 12px;
    box-shadow: 0 0 22px 6px rgba(253, 224, 71, .35);
    clip-path: polygon(30% 0, 70% 0, 100% 22%, 100% 82%, 70% 100%, 30% 100%, 0 82%, 0 22%);
}
.nt-lantern span::after { content: ""; position: absolute; inset: 22% 26%; background: rgba(255, 255, 255, .55); border-radius: 6px; }
@keyframes ntSwing { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .nt-lantern, .nt-twinkle { animation: none; } }
@media (max-width: 767px) {
    .nt-hero { padding-bottom: 128px; }
    .nt-hero:has(+ .nt-main-list) { padding-bottom: 118px; }
    .nt-mosque { height: 120px; }
    .nt-lantern { display: none; }
    .nt-moon { width: 120px; height: 120px; right: -14px; top: -6px; opacity: .85; }
}

.nt-chips a.rm-chip { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.nt-ramadan-banner { margin-top: 30px; display: flex; align-items: center; gap: 16px; text-decoration: none; color: #fff; border-radius: 20px; padding: 18px 22px;
    background: radial-gradient(circle at 90% 20%, rgba(251, 191, 36, .3), transparent 50%), linear-gradient(135deg, #022c22, #065f46); box-shadow: 0 14px 34px -16px rgba(6, 95, 70, .7); }
.nt-ramadan-banner:hover { color: #fff; transform: translateY(-2px); }
.nt-ramadan-banner > i { font-size: 2rem; color: #fde047; }
.nt-ramadan-banner div { flex: 1; }
.nt-ramadan-banner b { display: block; font-size: 1.2rem; }
.nt-ramadan-banner small { opacity: .85; }
.nt-ramadan-banner span { background: #fde047; color: #3b2a05; font-weight: 700; border-radius: 999px; padding: 6px 16px; white-space: nowrap; }