/* static/css/delibab_style.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Outfit:wght@400;700;900&display=swap');

:root, [data-bs-theme="light"] {
    --dlb-magenta: #e60881;
    --dlb-yellow: #ffcb03;
    --dlb-dark: #2b303a;
    --dlb-light: #f8f9fa;
    --dlb-cyan: #015e75;

    --dlb-magenta-rgb: 230, 8, 129;
    --dlb-yellow-rgb: 255, 203, 3;
    --dlb-cyan-rgb: 1, 94, 117;

    --delibab-nav-bg: rgba(224, 242, 245, 0.95);
    --delibab-footer-bg: rgba(224, 242, 245, 0.95);
    --delibab-card-bg: rgba(255, 255, 255, 0.7);
    --delibab-card-base: #ffffff;
    --delibab-border: rgba(0, 0, 0, 0.1);
    
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

[data-bs-theme="dark"] {
    --delibab-nav-bg: rgba(1, 43, 54, 0.95);
    --delibab-footer-bg: rgba(1, 43, 54, 0.95);
    --delibab-card-bg: rgba(255, 255, 255, 0.03);
    --delibab-card-base: #1e1e1e;
    --delibab-border: rgba(255, 255, 255, 0.05);
}

html { scroll-behavior: smooth; }

/* GLOBÁLIS HORIZONTÁLIS TÚLLÓGÁS TILTÁSA (FEHÉR SÁV FIX MOBILON) */
html, body { 
    font-family: var(--font-body) !important; 
    margin: 0; padding: 0; 
    width: 100%; min-height: 100vh; 
    overflow-x: hidden; 
    transition: color 0.6s ease; 
}
[data-bs-theme="dark"] body { color: #f8f9fa !important; }
[data-bs-theme="light"] body { color: #2b303a !important; }

h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--font-heading); font-weight: 700; }

.navbar { background-color: var(--delibab-nav-bg) !important; border-bottom: 1px solid var(--delibab-border); backdrop-filter: blur(10px); transition: background-color 0.5s ease; }
footer { background-color: var(--delibab-footer-bg) !important; border-top: 1px solid var(--delibab-border); padding: 2rem 0; margin-top: 3rem; backdrop-filter: blur(10px); transition: background-color 0.5s ease; }

/* MENÜ NAGYBETŰSÍTÉSE */
.navbar-nav .nav-link { text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; }

/* RESZPONZÍV LOGÓ (FIREFOX MOBIL MENÜ KILÓGÁS FIX) */
#navbar-logo { height: 40px; transition: height 0.3s; }
@media (max-width: 576px) {
    #navbar-logo { height: 28px; }
}

.header-actions-wrapper { display: flex; align-items: center; justify-content: flex-end; width: 100%; margin-top: 0.5rem; }
@media (min-width: 992px) { .header-actions-wrapper { width: auto; margin-top: 0; margin-left: auto; } }

#theme-toggle-btn { background: rgba(128,128,128,0.2) !important; border-color: var(--delibab-border) !important; transition: box-shadow 0.3s; }
#theme-toggle-btn:hover { box-shadow: 0 0 15px rgba(1, 94, 117, 0.4); }
.theme-icon { opacity: 0.3; font-size: 0.95rem; transition: all 0.4s; filter: grayscale(100%); }
.theme-icon.active { opacity: 1; transform: scale(1.3); filter: grayscale(0%); }
#theme-sun.active { color: var(--dlb-yellow); text-shadow: 0 0 15px var(--dlb-yellow); }
#theme-moon.active { color: #88d4e5; text-shadow: 0 0 15px #88d4e5; }

/* HÁTTÉRLOGÓ TOMPÍTÁSA (Jobban belesimul a háttérbe) */
.watermark-logo { 
    position: fixed; bottom: -50px; right: -50px; 
    width: 450px; opacity: 0.02; 
    z-index: -5; 
    pointer-events: none; transition: filter 0.5s; 
}
[data-bs-theme="light"] .watermark-logo { opacity: 0.015; filter: invert(1); }

.category-hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 85vh; 
    background-size: cover; background-position: top center; background-repeat: no-repeat;
    z-index: 0; pointer-events: none;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    transition: opacity 0.5s ease-in-out;
}

/* =========================================
   UNIVERZÁLIS TÉMA SZÍNEZŐ OSZTÁLYOK
   ========================================= */
[data-bs-theme="dark"] .text-theme-accent { color: var(--dlb-yellow) !important; }
[data-bs-theme="light"] .text-theme-accent { color: var(--dlb-magenta) !important; }

[data-bs-theme="dark"] .text-theme-main { color: var(--dlb-light) !important; }
[data-bs-theme="light"] .text-theme-main { color: var(--dlb-dark) !important; }

[data-bs-theme="dark"] .border-theme-accent { border-color: var(--dlb-yellow) !important; }
[data-bs-theme="light"] .border-theme-accent { border-color: var(--dlb-magenta) !important; }

.btn-theme-outline { background: transparent; transition: all 0.3s; }
[data-bs-theme="dark"] .btn-theme-outline { border: 1px solid var(--dlb-yellow); color: var(--dlb-yellow); }
[data-bs-theme="dark"] .btn-theme-outline:hover { background: var(--dlb-yellow); color: var(--dlb-dark) !important; }
[data-bs-theme="light"] .btn-theme-outline { border: 1px solid var(--dlb-magenta); color: var(--dlb-magenta); }
[data-bs-theme="light"] .btn-theme-outline:hover { background: var(--dlb-magenta); color: var(--dlb-light) !important; }

/* =========================================
   DÉLIBÁB VEZÉRLŐPULT ÉS KERESŐ (RESZPONZÍV)
   ========================================= */
.delibab-panel { 
    display: flex; gap: 15px; margin-bottom: 30px; align-items: stretch; position: relative; z-index: 10; 
    flex-direction: column; 
}
@media (min-width: 992px) {
    .delibab-panel { flex-direction: row; gap: 30px; margin-bottom: 50px; }
}

.panel-left { width: 100%; flex-shrink: 0; display: flex; flex-direction: column; }
@media (min-width: 992px) {
    .panel-left { width: 280px; }
}

.panel-right { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }

.search-row { border-bottom: 2px solid var(--delibab-border); padding: 15px 10px 5px 10px; display: flex; align-items: center; transition: all 0.3s; border-radius: 8px 8px 0 0; }

/* KERESŐSÁV FIREFOX FLEX-SHRINK BUG JAVÍTÁS */
.minimal-search { 
    background: transparent; border: none; color: inherit; font-size: 1.2rem; outline: none; 
    flex-grow: 1; min-width: 0; width: 100%; 
}
.minimal-search::placeholder { color: currentColor; opacity: 0.4; font-style: italic; }

[data-bs-theme="dark"] .search-row.active-search { border-bottom: 2px solid var(--dlb-yellow); background: linear-gradient(to top, rgba(var(--dlb-yellow-rgb), 0.1), transparent); }
[data-bs-theme="light"] .search-row.active-search { border-bottom: 2px solid var(--dlb-magenta); background: linear-gradient(to top, rgba(var(--dlb-magenta-rgb), 0.1), transparent); }
[data-bs-theme="dark"] .search-active-icon { color: var(--dlb-yellow) !important; text-shadow: 0 0 10px rgba(var(--dlb-yellow-rgb), 0.5); }
[data-bs-theme="light"] .search-active-icon { color: var(--dlb-magenta) !important; text-shadow: 0 0 10px rgba(var(--dlb-magenta-rgb), 0.5); }

/* TÉMAKÖRÖK SORTÁVOLSÁGA JAVÍTVA */
.topics-row { border-bottom: 2px solid var(--delibab-border); padding: 15px 0; display: flex; gap: 15px 30px; align-items: center; flex-wrap: wrap; }
.topic-btn { background: transparent; border: none; color: inherit; opacity: 0.5; font-size: 1rem; text-transform: uppercase; cursor: pointer; outline: none; transition: all 0.3s ease; padding: 0; margin: 0; }
.topic-btn:hover { opacity: 1; }
[data-bs-theme="dark"] .topic-btn.active-topic { color: var(--dlb-yellow); opacity: 1; text-shadow: 0 0 15px rgba(var(--dlb-yellow-rgb), 0.6); font-size: 1.1rem; font-weight: bold; letter-spacing: 1px; }
[data-bs-theme="light"] .topic-btn.active-topic { color: var(--dlb-magenta); opacity: 1; text-shadow: 0 0 15px rgba(var(--dlb-magenta-rgb), 0.6); font-size: 1.1rem; font-weight: bold; letter-spacing: 1px; }

/* Keresősáv és Témakörök kontraszt növelése */
[data-bs-theme="dark"] .minimal-search, 
[data-bs-theme="dark"] .topic-btn { color: var(--dlb-light); opacity: 0.9; }

[data-bs-theme="light"] .minimal-search, 
[data-bs-theme="light"] .topic-btn { color: var(--dlb-dark); opacity: 0.9; }

[data-bs-theme="dark"] .topic-btn:hover, [data-bs-theme="light"] .topic-btn:hover { opacity: 1; }

.tag-cloud-row { padding: 15px 0; min-height: 50px; display: flex; flex-wrap: wrap; gap: 10px; }
.cloud-pill { background: var(--delibab-card-bg); border: 1px solid var(--delibab-border); padding: 5px 15px; border-radius: 50px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; color: inherit; }
[data-bs-theme="dark"] .cloud-pill:hover { background: rgba(var(--dlb-yellow-rgb), 0.1); border-color: var(--dlb-yellow); color: var(--dlb-yellow); box-shadow: 0 0 10px rgba(var(--dlb-yellow-rgb),0.3); }
[data-bs-theme="dark"] .cloud-pill.active { background: rgba(var(--dlb-yellow-rgb), 0.2); border-color: var(--dlb-yellow); color: var(--dlb-yellow); font-weight: bold; }
[data-bs-theme="light"] .cloud-pill:hover { background: rgba(var(--dlb-magenta-rgb), 0.1); border-color: var(--dlb-magenta); color: var(--dlb-magenta); box-shadow: 0 0 10px rgba(var(--dlb-magenta-rgb),0.3); }
[data-bs-theme="light"] .cloud-pill.active { background: rgba(var(--dlb-magenta-rgb), 0.2); border-color: var(--dlb-magenta); color: var(--dlb-magenta); font-weight: bold; }

/* =========================================
   KATEGÓRIA KÁRTYÁK (PURE CSS ACCORDION)
   ========================================= */
.cat-cards-container { display: flex; gap: 12px; height: 160px; }

.master-card, .cat-card {
    background-color: transparent !important;
    border-radius: 12px; backdrop-filter: blur(5px);
    position: relative; text-decoration: none;
    overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. Alapállapot (Inaktív, Keskeny, Szöveg elforgatva) */
.master-card { flex: 2; padding: 15px 20px; }
.master-card h3 { font-size: 1.3rem; margin-bottom: 5px !important; }
.master-card h5 { font-size: 1rem; margin-bottom: 5px !important; }
.master-card p { margin-top: 10px !important; font-size: 0.85rem; }

.cat-card {
    flex: 1; display: flex; flex-direction: column;
    justify-content: center; align-items: center; 
    padding: 10px; cursor: pointer;
}
.cat-card h5 { 
    margin: 0; font-weight: bold; text-transform: uppercase; 
    letter-spacing: 1px; font-size: 1rem; color: inherit;
    writing-mode: vertical-rl; transform: rotate(180deg);
    white-space: nowrap; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Backendből kiválasztott Aktív állapot (Alapból kinyitva, FELÜL-BALRA igazítva) */
.master-card.active { flex: 4; }
.cat-card.active { flex: 5; justify-content: flex-start; align-items: flex-start; padding: 20px; }
.cat-card.active h5 { font-size: 1.3rem; writing-mode: horizontal-tb; transform: none; text-align: left; white-space: normal; }

/* 3. GLOW (VILÁGÍTÁS) CSAK AZ AKTÍV KÁRTYÁRA! (A hover glow CSS-t végleg töröltük) */
[data-bs-theme="dark"] .cat-card, [data-bs-theme="dark"] .master-card { border: 1px solid var(--dlb-magenta) !important; color: #ffffff !important; }
[data-bs-theme="light"] .cat-card, [data-bs-theme="light"] .master-card { border: 1px solid var(--dlb-cyan) !important; color: #2b303a !important; }

[data-bs-theme="dark"] .cat-card.active, [data-bs-theme="dark"] .master-card.active {
    background-color: rgba(var(--dlb-cyan-rgb), 0.3) !important; 
    color: var(--dlb-yellow) !important; 
    box-shadow: 0 0 20px rgba(var(--dlb-yellow-rgb), 0.8) !important; 
    border-color: var(--dlb-yellow) !important;
}
[data-bs-theme="light"] .cat-card.active, [data-bs-theme="light"] .master-card.active {
    background-color: rgba(var(--dlb-yellow-rgb), 0.3) !important; 
    color: var(--dlb-magenta) !important; 
    box-shadow: 0 0 20px rgba(var(--dlb-magenta-rgb), 0.8) !important; 
    border-color: var(--dlb-magenta) !important;
}

/* 4. HOVER ANIMÁCIÓ (TISZTA CSS LOGIKÁVAL) */

/* A. Ha egeret húzunk a kártyasor fölé, csukjuk be a nyitott Aktív kártyát (Kivéve, ha pont rajta van az egér!) */
.cat-cards-container:hover .cat-card.active:not(:hover) {
    flex: 1; justify-content: center; align-items: center; padding: 10px;
}
.cat-cards-container:hover .cat-card.active:not(:hover) h5 {
    font-size: 1rem; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; white-space: nowrap;
}
.cat-cards-container:hover .master-card.active:not(:hover) {
    flex: 2;
}

/* B. Amelyik kártya felett PONTOSAN ott az egér, azt nyissuk ki (Glow nélkül, azt az .active osztály kezeli) */
.cat-cards-container .cat-card:hover {
    flex: 5; justify-content: flex-start; align-items: flex-start; padding: 20px;
}
.cat-cards-container .cat-card:hover h5 {
    font-size: 1.3rem; writing-mode: horizontal-tb; transform: none; text-align: left; white-space: normal;
}
.cat-cards-container .master-card:hover {
    flex: 4;
}

/* =========================================
   ACCORDION IDÉZETEK ANIMÁCIÓJA
   ========================================= */
.cat-quote {
    font-size: 0.85rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    transition: all 0.4s ease;
    white-space: normal;
    font-style: italic;
}

/* 1. HOVER (Amikor egerészünk) -> Alapszín */
.cat-cards-container .cat-card:hover .cat-quote,
.cat-cards-container .master-card:hover .cat-quote {
    opacity: 0.8;
    max-height: 80px;
    margin-top: 10px;
    color: inherit;
}

/* 2. AKTÍV (A kiválasztott) -> Kiemelt szín */
.cat-card.active .cat-quote,
.master-card.active .cat-quote {
    opacity: 1 !important;
    max-height: 80px !important;
    margin-top: 10px !important;
}

/* 3. VISSZACSUKÁS (Ha máshova húzzuk az egeret) */
.cat-cards-container:hover .cat-card.active:not(:hover) .cat-quote,
.cat-cards-container:hover .master-card.active:not(:hover) .cat-quote {
    opacity: 0 !important;
    max-height: 0 !important;
    margin-top: 0 !important;
}

/* 5. PC Méretezés */
@media (min-width: 992px) {
    .cat-cards-container { height: 220px; }
    .master-card { padding: 25px 20px; }
    .master-card h3 { font-size: calc(1.3rem + .6vw); margin-bottom: 0.5rem !important; }
    .master-card h5 { font-size: 1.25rem; margin-bottom: 0.5rem !important; }
    .master-card p { margin-top: 1rem !important; font-size: 0.875rem; }
}

/* =========================================
   UNIVERZÁLIS KÁRTYÁK (Videó, Cikk, Arckép)
   ========================================= */
.video-grid { position: relative; z-index: 5; } 
.video-col { position: relative; } 

.video-card, .article-card, .profile-card { 
    transition: transform 0.2s; cursor: pointer; border-radius: 12px; 
    background: transparent !important; 
    backdrop-filter: blur(15px) !important;
    border: 1px solid var(--dlb-yellow) !important; 
}
[data-bs-theme="dark"] .video-card,
[data-bs-theme="dark"] .article-card,
[data-bs-theme="dark"] .profile-card { 
    background-color: rgba(var(--dlb-cyan-rgb), 0.3) !important; 
    border-color: var(--dlb-yellow) !important;
}
[data-bs-theme="light"] .video-card,
[data-bs-theme="light"] .article-card,
[data-bs-theme="light"] .profile-card { 
    background-color: rgba(var(--dlb-yellow-rgb), 0.3) !important; 
    border-color: var(--dlb-magenta) !important;
}

.video-card:hover, .article-card:hover, .profile-card:hover { 
    transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.3); 
}

/* Arcképcsarnok szöveg normalizálása (Chrome/Firefox szinkronizálás) */
.profile-card h5, .profile-card p, .profile-card span {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    word-wrap: break-word;
    overflow-wrap: break-word;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
}

/* CÍMEK SZÍNEZÉSE ÉS VASTAGSÁG JAVÍTÁSA */
[data-bs-theme="dark"] .video-card h5, [data-bs-theme="dark"] .article-card h5 { color: var(--dlb-light); }
[data-bs-theme="light"] .video-card h5, [data-bs-theme="light"] .article-card h5 { color: var(--dlb-dark); }

@media (max-width: 768px) {
    .video-card h5 { font-weight: 500 !important; } /* Mobilon vékonyabb betű a videó címeken */
}

.thumbnail-container { position: relative; width: 100%; padding-top: 56.25%; background-color: #000; border-radius: 12px 12px 0 0; overflow: hidden; }
.thumbnail-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.preview-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.thumbnail-container:hover .preview-wrapper { opacity: 1; }

.video-card-footer-btn { padding: 12px; border-radius: 0 0 12px 12px; transition: filter 0.3s; text-transform: uppercase; letter-spacing: 0.5px; }
[data-bs-theme="dark"] .video-card-footer-btn { background-color: var(--dlb-dark) !important; color: var(--dlb-light) !important; border-top: 1px solid rgba(255,255,255,0.1); }
[data-bs-theme="light"] .video-card-footer-btn { background-color: var(--dlb-light) !important; color: var(--dlb-dark) !important; border-top: 1px solid rgba(0,0,0,0.1); }
.video-card-footer-btn:hover { filter: brightness(1.2); }

/* INLINE PLAYER KERET (ÚJ) */
.inline-player-wrapper {
    border: 2px solid var(--dlb-magenta);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(var(--dlb-magenta-rgb), 0.4);
    transition: all 0.3s;
}
[data-bs-theme="dark"] .inline-player-wrapper {
    border-color: var(--dlb-yellow);
    box-shadow: 0 0 15px rgba(var(--dlb-yellow-rgb), 0.4);
}

#backToTopBtn {
    display: none; position: fixed; bottom: 30px; right: 30px; z-index: 999;
    width: 50px; height: 50px; border: none; outline: none;
    background-color: var(--dlb-cyan); color: white; cursor: pointer;
    border-radius: 50%; box-shadow: 0 4px 15px rgba(var(--dlb-cyan-rgb), 0.5);
    transition: background-color 0.3s, transform 0.3s; align-items: center; justify-content: center; font-size: 1.5rem; opacity: 0;
}
#backToTopBtn:hover { background-color: #014a5c; transform: scale(1.1); box-shadow: 0 0 25px rgba(var(--dlb-cyan-rgb), 0.8); }
#backToTopBtn.show { display: flex; opacity: 1; }

/* =========================================
   MOBIL KÜLÖNLEGES NÉZET (NETFLIX SCROLL)
   ========================================= */
.mobile-master-btn { width: 48px; border-radius: 8px; transition: all 0.3s; }
[data-bs-theme="dark"] .mobile-master-btn { background-color: rgba(var(--dlb-cyan-rgb), 0.3); border: 1px solid var(--dlb-yellow); color: var(--dlb-yellow); }
[data-bs-theme="light"] .mobile-master-btn { background-color: rgba(var(--dlb-yellow-rgb), 0.3); border: 1px solid var(--dlb-magenta); color: var(--dlb-magenta); }

.mobile-search-row { padding: 10px; background-color: rgba(255,255,255,0.05); }
[data-bs-theme="light"] .mobile-search-row { background-color: rgba(0,0,0,0.05); }

.mobile-topics-row { scrollbar-width: none; -ms-overflow-style: none; }
.mobile-topics-row::-webkit-scrollbar { display: none; }
.mobile-topic-btn { font-size: 0.85rem !important; white-space: nowrap; }
.mobile-cloud-pill { font-size: 0.75rem !important; padding: 4px 10px; }

.mobile-category-row { display: flex; align-items: stretch; gap: 12px; margin-bottom: 2rem; }

.mobile-master-tab, .mobile-cat-tab {
    width: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; transition: all 0.3s;
    min-height: 180px;
}

.mobile-cat-text {
    writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 900; letter-spacing: 2px;
    font-size: 0.85rem; text-transform: uppercase; text-shadow: 0 0 10px rgba(0,0,0,0.5); white-space: nowrap;
}

[data-bs-theme="dark"] .mobile-master-tab, [data-bs-theme="dark"] .mobile-cat-tab { background-color: rgba(var(--dlb-cyan-rgb), 0.3); border: 1px solid var(--dlb-yellow); color: var(--dlb-yellow); }
[data-bs-theme="light"] .mobile-master-tab, [data-bs-theme="light"] .mobile-cat-tab { background-color: rgba(var(--dlb-yellow-rgb), 0.3); border: 1px solid var(--dlb-magenta); color: var(--dlb-magenta); }

.mobile-video-scroll {
    flex-grow: 1; display: flex; gap: 15px; overflow-x: auto; padding-bottom: 5px;
    scrollbar-width: none; -ms-overflow-style: none; cursor: default;
}
.mobile-video-scroll::-webkit-scrollbar { display: none; }
.mobile-video-wrapper { flex: 0 0 240px; }

/* Arcképcsarnok betűméret fix - Szigorú szelektorral */
html body .profile-card h5 {
    font-size: 1.1rem !important;
}
html body .profile-card p, 
html body .profile-card span {
    font-size: 0.9rem !important;
    -webkit-text-size-adjust: 100% !important;
}