/* ============================================================
   NISTHA NEW — signature UI. Deep navy canvas + gold accent,
   rounded portrait cards with under-poster labels, contained
   hero, pill chips, tile grids, structured footer.
   Theme colors still flow from admin theme_settings (CSS vars).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

body.layout-nisthanew {
    --nn-bg: var(--bg, #0B1526);
    --nn-card: var(--card, #14253C);
    --nn-raised: #1B2E4A;
    --nn-line: #223850;
    --nn-gold: var(--primary, #F5B300);
    --nn-gold-deep: var(--secondary, #D99E00);
    --nn-text: var(--text, #F2F6FB);
    --nn-muted: var(--muted, #8FA3B8);
    font-family: var(--font, 'Poppins'), 'Poppins', sans-serif;
    background: var(--nn-bg);
    color: var(--nn-text);
}

/* ---------- Top nav ---------- */
.layout-nisthanew .desktop-nav {
    background: rgba(9, 18, 33, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nn-line);
    padding: .65rem 1.6rem;
}
.layout-nisthanew .desktop-nav .brand img { height: 46px; }
.layout-nisthanew .mobile-menu-btn {
    color: var(--nn-text); font-size: 1.5rem;
    width: 42px; height: 42px; border-radius: 12px;
    border: 1px solid var(--nn-line); background: var(--nn-card);
    transition: .2s;
}
.layout-nisthanew .mobile-menu-btn:hover { border-color: var(--nn-gold); color: var(--nn-gold); }
.layout-nisthanew .nav-right .nav-link {
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nn-card); border: 1px solid var(--nn-line);
    color: var(--nn-text); font-size: 1.05rem;
}
.layout-nisthanew .nav-right .nav-link:hover { border-color: var(--nn-gold); color: var(--nn-gold); }
.layout-nisthanew .nav-right .profile-link { width: auto; padding: 0 .7rem; gap: .5rem; }
.layout-nisthanew .nav-right .profile-link img { width: 30px; height: 30px; }
.layout-nisthanew .btn-subscribe {
    border-radius: 10px; padding: .55rem 1.4rem; font-weight: 700;
    background: var(--nn-gold); color: #10131A;
    box-shadow: 0 4px 14px rgba(245, 179, 0, .25);
}
.layout-nisthanew .btn-subscribe:hover { background: var(--nn-gold-deep); transform: translateY(-1px); }
.layout-nisthanew .notif-badge { border-radius: 6px !important; }

/* ---------- Hamburger drawer ---------- */
.layout-nisthanew .mobile-nav {
    background: #0D1A2E; border-right: 1px solid var(--nn-line); width: 300px; left: -300px;
}
.layout-nisthanew .mobile-nav-header { border-bottom-color: var(--nn-line); }
.layout-nisthanew .mobile-nav-close { color: var(--nn-text); }
.layout-nisthanew .mn-link {
    color: var(--nn-text); font-size: .92rem; padding: .8rem 1.2rem;
    border-left: 0; border-radius: 10px; margin: .1rem .6rem;
}
.layout-nisthanew .mn-link:hover, .layout-nisthanew .mn-link.active {
    background: rgba(245, 179, 0, .12); color: var(--nn-gold); border-left-color: transparent;
}
.layout-nisthanew .mn-link i { color: var(--nn-muted); }
.layout-nisthanew .mn-link.active i, .layout-nisthanew .mn-link:hover i { color: var(--nn-gold); }
.layout-nisthanew .mn-cta { border-top-color: var(--nn-line); color: var(--nn-gold); }

/* ---------- Hero carousel — contained card ---------- */
.layout-nisthanew .hero-banner,
.layout-nisthanew .hero-carousel {
    aspect-ratio: auto; height: min(62vh, 560px); min-height: 340px;
    margin: 1.2rem 1.6rem 0; border-radius: 22px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}
.layout-nisthanew .hero-slide img,
.layout-nisthanew .hero-banner img { object-fit: cover; }
.layout-nisthanew .hero-overlay {
    background:
        linear-gradient(90deg, rgba(9, 18, 33, .92) 0%, rgba(9, 18, 33, .55) 42%, transparent 70%),
        linear-gradient(0deg, rgba(9, 18, 33, .85) 0%, transparent 40%);
    align-items: flex-end;
}
.layout-nisthanew .hero-content {
    padding: 0 3rem 3.2rem; max-width: 640px;
}
.layout-nisthanew .hero-content .welcome-label {
    color: var(--nn-gold); letter-spacing: .22em; font-weight: 700;
    font-size: .8rem; text-transform: uppercase;
}
.layout-nisthanew .hero-content h1 {
    font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.5px;
    color: #fff; margin-bottom: .7rem;
}
.layout-nisthanew .hero-content p { color: #C7D3E0; font-size: 1rem; max-width: 480px; margin-bottom: 1.6rem; }
.layout-nisthanew .hero-content .btn-watch {
    border-radius: 30px; padding: .8rem 2.2rem; font-weight: 700;
    background: var(--nn-gold); color: #10131A;
}
.layout-nisthanew .hero-content .btn-watch:hover { background: var(--nn-gold-deep); }
.layout-nisthanew .hero-arrow {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(13, 26, 46, .7); border: 1px solid var(--nn-line); color: #fff;
}
.layout-nisthanew .hero-arrow:hover { border-color: var(--nn-gold); color: var(--nn-gold); }
.layout-nisthanew .hero-dots { bottom: 1.4rem; }
.layout-nisthanew .hero-dots span { width: 22px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.layout-nisthanew .hero-dots span.active { background: var(--nn-gold); }

/* ---------- Category hero (browse/livetv headers) ---------- */
.layout-nisthanew .category-hero {
    aspect-ratio: auto; height: min(46vh, 420px); min-height: 260px;
    margin: 1.2rem 1.6rem 0; border-radius: 22px; overflow: hidden;
    background-size: cover; background-position: center 20%;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}
.layout-nisthanew .category-hero-overlay {
    background: linear-gradient(90deg, rgba(9, 18, 33, .9) 0%, rgba(9, 18, 33, .4) 55%, transparent 85%);
    max-width: 620px; padding: 2.5rem 3rem;
}
.layout-nisthanew .category-hero-overlay .small-label {
    color: var(--nn-gold); letter-spacing: .18em; font-weight: 700; font-size: .78rem;
}
.layout-nisthanew .category-hero-overlay h1 { font-size: 2.4rem; font-weight: 800; letter-spacing: -.5px; }
.layout-nisthanew .category-hero-overlay .btn-watch { border-radius: 30px; padding: .7rem 2rem; background: var(--nn-gold); color: #10131A; font-weight: 700; }

/* ---------- Breadcrumb (browse pages) ---------- */
.nn-crumb { display: none; }
.layout-nisthanew .nn-crumb {
    display: block; padding: 1rem 1.8rem 0; font-size: .82rem; color: var(--nn-muted);
}
.layout-nisthanew .nn-crumb a { color: var(--nn-muted); }
.layout-nisthanew .nn-crumb a:hover { color: var(--nn-gold); }
.layout-nisthanew .nn-crumb b { color: var(--nn-text); font-weight: 600; }

/* ---------- Sections ---------- */
.layout-nisthanew .content-section { padding: 1.4rem 1.8rem .4rem; }
.layout-nisthanew .section-header { margin-bottom: 1rem; justify-content: space-between; display: flex; align-items: center; }
.layout-nisthanew .section-title {
    font-size: 1.15rem; font-weight: 700; color: var(--nn-text);
    display: flex; align-items: center; gap: .55rem;
}
.layout-nisthanew .section-title::before {
    content: ""; width: 5px; height: 20px; border-radius: 4px;
    background: linear-gradient(180deg, var(--nn-gold), var(--nn-gold-deep));
}
.layout-nisthanew .see-all {
    color: var(--nn-gold); font-size: .82rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .2rem;
}

/* ---------- Content cards (portrait, mockup style) ---------- */
.layout-nisthanew .content-rail { gap: 1.1rem; padding-bottom: .4rem; }
.layout-nisthanew .content-card {
    width: 158px; transition: transform .25s ease;
}
.layout-nisthanew .content-card:hover { transform: translateY(-5px); }
.layout-nisthanew .content-card .poster {
    width: 158px; height: 236px; border-radius: 14px; overflow: hidden;
    background: var(--nn-raised); border: 1px solid var(--nn-line);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
    transition: border-color .2s, box-shadow .2s;
}
.layout-nisthanew .content-card:hover .poster {
    border-color: var(--nn-gold); box-shadow: 0 14px 30px rgba(245, 179, 0, .18);
}
.layout-nisthanew .content-card .poster img { width: 100%; height: 100%; object-fit: cover; }
.layout-nisthanew .card-meta-below { display: block; padding-top: .55rem; }
.layout-nisthanew .cm-title {
    font-size: .85rem; font-weight: 600; color: var(--nn-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layout-nisthanew .cm-sub { font-size: .72rem; color: var(--nn-muted); margin-top: .1rem; }

/* Other card variants inside nisthanew */
.layout-nisthanew .content-card.card-landscape { width: 250px; }
.layout-nisthanew .content-card.card-landscape .poster { width: 250px; height: 140px; }
.layout-nisthanew .content-card.card-wide { width: 280px; }
.layout-nisthanew .content-card.card-wide .poster { width: 280px; height: 158px; }
.layout-nisthanew .content-card.card-compact { width: 118px; }
.layout-nisthanew .content-card.card-compact .poster { width: 118px; height: 176px; }
.layout-nisthanew .content-card.card-vertical { width: 120px; }
.layout-nisthanew .content-card.card-vertical .poster { width: 120px; height: 210px; }
.layout-nisthanew .content-card .title { font-size: .85rem; font-weight: 600; margin-top: .5rem; color: var(--nn-text); }
.layout-nisthanew .content-card .meta { font-size: .72rem; color: var(--nn-muted); }

/* Ranked */
.layout-nisthanew .card-ranked .rank-num {
    font-size: 4.5rem; font-weight: 900; color: transparent;
    -webkit-text-stroke: 2px var(--nn-gold); line-height: 1;
}

/* Badges */
.layout-nisthanew .badge { border-radius: 6px; font-size: .62rem; font-weight: 700; letter-spacing: .3px; }
.layout-nisthanew .badge.premium { background: var(--nn-gold); color: #10131A; }
.layout-nisthanew .badge.free { background: rgba(34, 197, 94, .9); color: #04120A; }
.layout-nisthanew .badge.rent { background: #2563EB; color: #fff; }

/* ---------- Quick links → gold-icon tiles ---------- */
.layout-nisthanew .quick-links { padding: 1.2rem 1.8rem; gap: .8rem; }
.layout-nisthanew .quick-link {
    flex-direction: row; align-items: center; gap: .7rem;
    min-width: 140px; padding: .7rem 1rem;
    background: var(--nn-card); border: 1px solid var(--nn-line); border-radius: 14px;
}
.layout-nisthanew .quick-link:hover { border-color: var(--nn-gold); transform: translateY(-2px); }
.layout-nisthanew .quick-link .ql-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: rgba(245, 179, 0, .14); color: var(--nn-gold);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.layout-nisthanew .quick-link .ql-text strong { font-size: .85rem; color: var(--nn-text); display: block; }
.layout-nisthanew .quick-link .ql-text small { font-size: .68rem; color: var(--nn-muted); }

/* ---------- Chips / genre pills ---------- */
.layout-nisthanew .category-chips { display: flex; gap: .55rem; flex-wrap: wrap; }
.layout-nisthanew .chip {
    padding: .45rem 1.25rem; border-radius: 30px; font-size: .82rem; font-weight: 500;
    background: var(--nn-card); border: 1px solid var(--nn-line); color: var(--nn-text);
}
.layout-nisthanew .chip:hover { border-color: var(--nn-gold); color: var(--nn-gold); }
.layout-nisthanew .chip.active {
    background: var(--nn-gold); border-color: var(--nn-gold); color: #10131A; font-weight: 700;
}
.layout-nisthanew .season-chip { border-radius: 30px !important; }

/* ---------- Continue watching ---------- */
.layout-nisthanew .cw-card .thumb { border-radius: 14px; border: 1px solid var(--nn-line); }
.layout-nisthanew .cw-card .play-overlay i { background: var(--nn-gold); color: #10131A; }
.layout-nisthanew .cw-card .progress-bar .fill { background: var(--nn-gold); }
.layout-nisthanew .cw-resume { background: var(--nn-gold); color: #10131A; border-radius: 20px; }
.layout-nisthanew .cw-start { background: var(--nn-raised); color: var(--nn-text); border-radius: 20px; }

/* ---------- Live TV — tiles ---------- */
.layout-nisthanew .live-card { width: 120px; }
.layout-nisthanew .live-card .logo-wrap {
    width: 120px; height: 120px; border-radius: 18px;
    background: var(--nn-card); border: 1px solid var(--nn-line); padding: 1rem;
}
.layout-nisthanew .live-card:hover .logo-wrap { border-color: var(--nn-gold); }
.layout-nisthanew .live-card .name { color: var(--nn-text); font-weight: 500; }
.layout-nisthanew .live-card .live-dot { background: rgba(9, 18, 33, .85); border-radius: 8px; }

/* ---------- Details page ---------- */
.layout-nisthanew .detail-hero { border-radius: 0 0 26px 26px; }
.layout-nisthanew .detail-hero img { object-fit: cover; }
.layout-nisthanew .detail-overlay {
    background: linear-gradient(180deg, rgba(9, 18, 33, .25) 0%, rgba(9, 18, 33, .85) 70%, var(--nn-bg) 100%);
}
.layout-nisthanew .detail-back {
    background: rgba(13, 26, 46, .75); border: 1px solid var(--nn-line); border-radius: 12px;
}
.layout-nisthanew .detail-content { max-width: 1060px; }
.layout-nisthanew .detail-poster { border-radius: 16px; border: 1px solid var(--nn-line); }
.layout-nisthanew .detail-info h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -.5px; }
.layout-nisthanew .detail-meta { color: var(--nn-muted); }
.layout-nisthanew .detail-meta .badge { background: var(--nn-raised) !important; color: var(--nn-text); border-radius: 8px; }
.layout-nisthanew .detail-actions .btn-watch {
    border-radius: 30px; padding: .75rem 2rem; font-weight: 700;
    background: var(--nn-gold); color: #10131A;
}
.layout-nisthanew .btn-list {
    border-radius: 30px; padding: .7rem 1.5rem; font-weight: 600;
    background: transparent; border: 1px solid var(--nn-line); color: var(--nn-text);
}
.layout-nisthanew .btn-list:hover { border-color: var(--nn-gold); color: var(--nn-gold); background: rgba(245, 179, 0, .08); }
.layout-nisthanew .detail-desc { color: var(--nn-muted); line-height: 1.7; }
.layout-nisthanew .cast-item img { border-radius: 14px; }
.layout-nisthanew .cast-item .name { color: var(--nn-text); }
.layout-nisthanew .event-info { background: var(--nn-card); border: 1px solid var(--nn-line) !important; border-radius: 14px !important; }

/* ---------- Buttons / forms ---------- */
.layout-nisthanew .btn-watch {
    border-radius: 30px; background: var(--nn-gold); color: #10131A; font-weight: 700;
}
.layout-nisthanew .btn-submit {
    border-radius: 12px; padding: .85rem; font-weight: 700;
    background: var(--nn-gold); color: #10131A;
}
.layout-nisthanew .btn-submit:hover { background: var(--nn-gold-deep); }
.layout-nisthanew .form-control,
.layout-nisthanew .form-group input,
.layout-nisthanew .form-group select,
.layout-nisthanew .form-group textarea {
    background: var(--nn-card); border: 1px solid var(--nn-line);
    border-radius: 12px; color: var(--nn-text);
}
.layout-nisthanew .form-control:focus,
.layout-nisthanew .form-group input:focus,
.layout-nisthanew .form-group select:focus,
.layout-nisthanew .form-group textarea:focus {
    border-color: var(--nn-gold); box-shadow: 0 0 0 3px rgba(245, 179, 0, .15); outline: none;
}
.layout-nisthanew .search-bar {
    background: var(--nn-card); border: 1px solid var(--nn-line); border-radius: 30px; padding: .7rem 1.3rem;
}
.layout-nisthanew .search-bar:focus-within { border-color: var(--nn-gold); }

/* ---------- Auth page ---------- */
.layout-nisthanew .auth-page {
    background:
        radial-gradient(60% 80% at 15% 50%, rgba(245, 179, 0, .12), transparent 60%),
        linear-gradient(120deg, #0A1626 0%, #0B1526 55%, #0E1D33 100%);
}
.layout-nisthanew .auth-box {
    background: rgba(20, 37, 60, .85); backdrop-filter: blur(12px);
    border: 1px solid var(--nn-line); border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    padding: 2.6rem;
}
.layout-nisthanew .auth-box h1 { color: var(--nn-gold); }

/* ---------- Premium banner ---------- */
.layout-nisthanew .premium-banner {
    margin: 1.4rem 1.8rem; border-radius: 20px;
    background: linear-gradient(120deg, var(--nn-gold) 0%, var(--nn-gold-deep) 100%);
    border: none; box-shadow: 0 14px 34px rgba(245, 179, 0, .22);
}
.layout-nisthanew .premium-banner .btn-subscribe { background: #10131A; color: var(--nn-gold); border-radius: 30px; }

/* ---------- Generic cards / panels ---------- */
.layout-nisthanew .plan-card,
.layout-nisthanew .card {
    background: var(--nn-card); border: 1px solid var(--nn-line) !important; border-radius: 16px;
}
.layout-nisthanew .modal-content { background: #0D1A2E !important; border: 1px solid var(--nn-line) !important; border-radius: 18px !important; }
.layout-nisthanew .modal-header { border-bottom-color: var(--nn-line) !important; }
.layout-nisthanew .form-select, .layout-nisthanew .form-check-input { background-color: var(--nn-card); border-color: var(--nn-line); color: var(--nn-text); }
.layout-nisthanew .table { color: var(--nn-text); }
.layout-nisthanew .table td, .layout-nisthanew .table th { border-color: var(--nn-line); }

/* ---------- Bottom nav (mobile) ---------- */
.layout-nisthanew .bottom-nav {
    background: rgba(9, 18, 33, .97); border-top: 1px solid var(--nn-line);
}
.layout-nisthanew .bn-item.active, .layout-nisthanew .bn-item:hover { color: var(--nn-gold); }

/* ---------- Footer (nn markup) ---------- */
.nn-footer { background: #0A1424; border-top: 1px solid var(--nn-line); margin-top: 2rem; }
.nn-footer-inner {
    max-width: 1180px; margin: 0 auto; padding: 3rem 1.8rem 2rem;
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem;
}
.nn-fcol h6 {
    color: var(--nn-text); font-size: .85rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem;
}
.nn-fcol a {
    display: block; color: var(--nn-muted); font-size: .88rem;
    padding: .3rem 0; transition: color .2s;
}
.nn-fcol a:hover { color: var(--nn-gold); }
.nn-fcol a i { margin-right: .5rem; color: var(--nn-gold); }
.nn-flogo { height: 52px; margin-bottom: .8rem; }
.nn-tag { color: var(--nn-gold); font-weight: 600; font-size: .95rem; margin: 0 0 .4rem; }
.nn-fmuted { color: var(--nn-muted); font-size: .85rem; line-height: 1.6; max-width: 280px; }
.nn-socials { display: flex; gap: .6rem; margin-top: 1.1rem; }
.nn-socials a {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--nn-card); border: 1px solid var(--nn-line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--nn-text); font-size: 1rem;
}
.nn-socials a:hover { border-color: var(--nn-gold); color: var(--nn-gold); }
.nn-socials a i { margin: 0; }
.nn-footer-bar {
    border-top: 1px solid var(--nn-line); padding: 1.1rem 1.8rem;
    text-align: center; color: var(--nn-muted); font-size: .8rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .nn-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .layout-nisthanew .desktop-nav { padding: .55rem .9rem; }
    .layout-nisthanew .desktop-nav .brand img { height: 40px; }
    .layout-nisthanew .hero-banner, .layout-nisthanew .hero-carousel,
    .layout-nisthanew .category-hero { margin: .8rem .9rem 0; border-radius: 16px; height: auto; min-height: 0; aspect-ratio: 16/9; }
    .layout-nisthanew .hero-content { padding: 0 1.2rem 2.6rem; }
    .layout-nisthanew .hero-content h1 { font-size: 1.5rem; }
    .layout-nisthanew .hero-content p { font-size: .82rem; margin-bottom: 1rem; }
    .layout-nisthanew .hero-content .btn-watch { padding: .6rem 1.6rem; font-size: .85rem; }
    .layout-nisthanew .category-hero-overlay { padding: 1.2rem 1.4rem; }
    .layout-nisthanew .category-hero-overlay h1 { font-size: 1.5rem; }
    .layout-nisthanew .content-section { padding: 1rem 1rem .3rem; }
    .layout-nisthanew .quick-links { padding: 1rem; }
    .layout-nisthanew .content-card { width: 118px; }
    .layout-nisthanew .content-card .poster { width: 118px; height: 176px; border-radius: 12px; }
    .layout-nisthanew .premium-banner { margin: 1rem; }
    .layout-nisthanew .nn-crumb { padding: .8rem 1rem 0; }
    .nn-footer-inner { grid-template-columns: 1fr; gap: 1.4rem; padding: 2rem 1.2rem 1.2rem; }
}