/* ============================================================
   DEMO.QRKODMENU.COM — DARK / LIGHT MOD
   Bu dosya mevcut style.css'ten SONRA yüklenmeli.
   Sadece görsel yüzeyleri (arka plan/yazı/kart rengi) değiştirir,
   işletmenin --accent (tema rengi) rengine dokunmaz.
   Aktivasyon: <html data-theme="dark"> attribute'u ile.
   ============================================================ */

html[data-theme="dark"] {
    /* --bg / --text / --card-bg artık layout'un <head>'inde business.settings['colors']
       üzerinden dinamik tanımlanıyor — burada TEKRAR sabit değer vermiyoruz, aksi halde
       (aynı seçici + aynı özgüllük + sonradan yüklenme sırası nedeniyle) işletmenin
       panelden seçtiği rengi ezerdi. */
    --muted: #aaa;
    --header-muted: rgba(255,255,255,.12);
    --shadow-light: rgba(0,0,0,.45);
    --shadow-dark: rgba(0,0,0,.65);
}

/* ── Genel gövde ── */
html[data-theme="dark"] body,
html[data-theme="dark"] .app {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

/* ── Üst navbar (kategori sayfaları) — renk sabit kalsın, sadece gölge ── */
html[data-theme="dark"] .qr-topbar {
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* ── Logo şeridi (anasayfa header) ── */
html[data-theme="dark"] .line-logo::before,
html[data-theme="dark"] .line-logo::after {
    background: rgba(255,255,255,.15);
}
html[data-theme="dark"] #menu-toggle {
    background: linear-gradient(295deg, rgba(0,0,0,0) -48%, var(--accent) 68%) !important;
}

/* ── Ana kategori kartları (hero) ── */
html[data-theme="dark"] .qr-hero-cat-card {
    background: var(--card-bg) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] .qr-hero-cat-name {
    color: var(--text) !important;
}

/* ── Çalışma saatleri ── */
html[data-theme="dark"] .hours-section {
    background: #1a1a1a !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.45) !important;
    border-color: rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] .hours-title,
html[data-theme="dark"] .hour-time.hour-open,
html[data-theme="dark"] .mobile-time.mobile-open {
    color: #4ade80 !important;
}
html[data-theme="dark"] .hour-card,
html[data-theme="dark"] .mobile-card-item {
    background: #232323 !important;
}
html[data-theme="dark"] .hour-label,
html[data-theme="dark"] .mobile-label,
html[data-theme="dark"] .hour-note,
html[data-theme="dark"] .mobile-note {
    color: #999 !important;
}
html[data-theme="dark"] .hour-time.hour-close,
html[data-theme="dark"] .mobile-time.mobile-close {
    color: #f87171 !important;
}

/* ── Arama + filtre toolbar ── */
html[data-theme="dark"] .qr-menu-toolbar,
html[data-theme="dark"] .view-filter-bar,
html[data-theme="dark"] .filter-toolbar {
    background: transparent !important;
}
html[data-theme="dark"] .qr-menu-search-inp,
html[data-theme="dark"] .filter-input,
html[data-theme="dark"] .sort-select,
html[data-theme="dark"] .stock-filter {
    background: var(--card-bg) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .qr-menu-type-dropdown-btn,
html[data-theme="dark"] .qr-menu-filter-btn,
html[data-theme="dark"] .view-btn {
    background: var(--card-bg) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .qr-menu-type-dropdown-list {
    background: var(--card-bg) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] .qr-menu-type-dropdown-list a {
    color: var(--text) !important;
    border-bottom-color: rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] .qr-menu-type-dropdown-list a:hover {
    background: #262626 !important;
}

/* ── Kategori sekmeleri ── */
html[data-theme="dark"] .qr-menu-tabs {
    background: var(--bg) !important;
    border-bottom-color: rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] .qr-menu-tab:not(.has-thumb) {
    background: #232323 !important;
    color: #ccc !important;
}
html[data-theme="dark"] .qr-menu-tab.has-thumb .qr-menu-tab-label {
    color: #ccc !important;
}

/* ── Ürün/yemek kartları (grid + liste görünümü) ── */
html[data-theme="dark"] .yemek-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .slider-item {
    background: var(--card-bg) !important;
    border-color: rgba(255,255,255,.06) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .yemek-name,
html[data-theme="dark"] .product-card-name,
html[data-theme="dark"] .category-list-item h3 {
    color: #f0f0f0 !important;
}
html[data-theme="dark"] .yemek-desc,
html[data-theme="dark"] .product-card-desc,
html[data-theme="dark"] .product-card-time {
    color: #999 !important;
}
html[data-theme="dark"] .product-card-image,
html[data-theme="dark"] .yemek-image,
html[data-theme="dark"] .category-list-item img {
    background: #262626 !important;
}
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .no-results {
    color: #ccc !important;
}
html[data-theme="dark"] .empty-state h3,
html[data-theme="dark"] .no-results h3 {
    color: #f0f0f0 !important;
}

/* ── Filtre sheet (alttan gelen) ── */
html[data-theme="dark"] .qr-filter-sheet {
    background: #1a1a1a !important;
}
html[data-theme="dark"] .qr-filter-sheet-header {
    border-bottom-color: rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] .qr-filter-sheet-header h3,
html[data-theme="dark"] .qr-filter-option {
    color: var(--text) !important;
}
html[data-theme="dark"] .qr-filter-option {
    border-bottom-color: rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] .qr-filter-sheet-footer {
    border-top-color: rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] .qr-filter-sheet-close {
    color: #ccc !important;
}

/* ── Ürün detay: tam sayfa (qr-pd-*) ── */
html[data-theme="dark"] .qr-pd-fullpage,
html[data-theme="dark"] .qr-pd-content {
    background: var(--bg) !important;
}
html[data-theme="dark"] .qr-pd-name {
    color: #f0f0f0 !important;
}
html[data-theme="dark"] .qr-pd-back-btn,
html[data-theme="dark"] .qr-pd-share-btn {
    background: rgba(30,30,30,.92) !important;
    color: var(--text) !important;
}

/* ── Genel modal (ürün detay popup, dil, wifi) ── */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .product-detail-modal .modal-content,
html[data-theme="dark"] .lang-modal,
html[data-theme="dark"] #qrWifiModal .modal-content {
    background: #1a1a1a !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .product-modal-content h3,
html[data-theme="dark"] .lang-modal-header h3,
html[data-theme="dark"] #qrWifiModal span,
html[data-theme="dark"] #qrWifiPasswordText {
    color: #f0f0f0 !important;
}
html[data-theme="dark"] .product-modal-desc,
html[data-theme="dark"] .product-detail-modal .product-modal-desc-area p {
    background: #232323 !important;
    color: #ccc !important;
}
html[data-theme="dark"] .lang-modal-header,
html[data-theme="dark"] #qrWifiModal > div > div:first-child {
    border-bottom-color: rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] .lang-option {
    color: var(--text) !important;
    border-bottom-color: rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] .lang-option:hover {
    background: #232323 !important;
}
html[data-theme="dark"] .lang-modal-close,
html[data-theme="dark"] .modal-content .close {
    color: #ccc !important;
}
html[data-theme="dark"] #qrWifiModal [style*="background:#f8f8f8"],
html[data-theme="dark"] #qrWifiModal [style*="background: #f8f8f8"] {
    background: #232323 !important;
}
html[data-theme="dark"] #qrWifiModal [style*="background:#fff"],
html[data-theme="dark"] #qrWifiModal [style*="background: #fff"] {
    background: var(--card-bg) !important;
    border-color: rgba(255,255,255,.1) !important;
}
html[data-theme="dark"] #qrWifiModal p[style*="color:#999"],
html[data-theme="dark"] #qrWifiModal p[style*="color: #999"] {
    color: #999 !important;
}
html[data-theme="dark"] #qrWifiModal p[style*="color:#1a1a1a"],
html[data-theme="dark"] #qrWifiModal p[style*="color: #1a1a1a"] {
    color: #f0f0f0 !important;
}
html[data-theme="dark"] #qrCloseWifi {
    background: #262626 !important;
    color: #ccc !important;
}

/* ── Kategori/alt kategori sayfaları ── */
html[data-theme="dark"] .category-header,
html[data-theme="dark"] .subcategory-header,
html[data-theme="dark"] .back-button-container {
    background: #1a1a1a !important;
    border-color: rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] .category-header-title,
html[data-theme="dark"] .subcategory-header-title,
html[data-theme="dark"] .subcategory-name {
    color: #f0f0f0 !important;
}
html[data-theme="dark"] .category-header-desc,
html[data-theme="dark"] .subcategory-header-desc,
html[data-theme="dark"] .subcategory-count,
html[data-theme="dark"] .subcategory-desc {
    color: #999 !important;
}
html[data-theme="dark"] .subcategory-card {
    background: var(--card-bg) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
}

/* ── Geri bildirim / iletişim ── */
html[data-theme="dark"] .feedback-card,
html[data-theme="dark"] .contact-info {
    background: #1a1a1a !important;
    box-shadow: 0 15px 40px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .feedback-title,
html[data-theme="dark"] .contact-info div {
    color: var(--text) !important;
}
html[data-theme="dark"] .feedback-textarea {
    background: #232323 !important;
    border-color: rgba(255,255,255,.1) !important;
    color: var(--text) !important;
}

/* ── Restoran/haftanın menüsü kartları — zaten koyu gradient overlay, dokunulmadı ── */

/* ── Alt menü (bottom nav) ── */
html[data-theme="dark"] .bottom-nav {
    background: rgba(24,24,24,.98) !important;
    border-top-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] .nav-item {
    color: #999 !important;
}
html[data-theme="dark"] .nav-item.active {
    color: #fff !important;
}

/* ── Footer ── */
html[data-theme="dark"] .footer,
html[data-theme="dark"] footer {
    background: var(--bg) !important;
    color: #999 !important;
    border-top-color: rgba(255,255,255,.06) !important;
}

/* ── Tema toggle butonu — logonun yanında, header akışı içinde ── */
.qr-theme-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid rgba(0,0,0,.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    cursor: pointer;
    margin-left: 14px;
    flex-shrink: 0;
}
html[data-theme="dark"] .qr-theme-toggle {
    background: #232323;
    color: #ffd166;
    border-color: rgba(255,255,255,.12);
}
/* Bu sitede toggle buton inline style ile geliyor (id="qrThemeToggle") —
   !important ile dark modda üzerine yazıyoruz */
html[data-theme="dark"] #qrThemeToggle {
    background: #232323 !important;
    color: #ffd166 !important;
}

/* ============================================================
   GÖRÜNÜM AYARLARI PANELİNDEN GELEN BUTON / VURGU RENKLERİ
   Bu bölüm [data-theme="dark"] ile SINIRLI DEĞİL — hem açık hem
   karanlık modda uygulanır, çünkü var(--qr-button-bg) vb. zaten
   layout'ta moda göre otomatik doğru değeri taşıyor.
   ============================================================ */
.qr-back-to-top {
    background: var(--qr-button-bg) !important;
    color: var(--qr-button-text) !important;
}
.qr-filter-apply-btn {
    background: var(--qr-button-bg) !important;
    color: var(--qr-button-text) !important;
}
.feedback-submit {
    background: var(--qr-button-bg) !important;
    color: var(--qr-button-text) !important;
}
#qrWifiCopyBtn {
    background: var(--qr-button-bg) !important;
    color: var(--qr-button-text) !important;
}

/* Çalışma saatleri vurgu rengi (kapanış saati + kart sol çizgisi) */
.hour-time.hour-close,
.mobile-time.mobile-close {
    color: var(--qr-hours-accent) !important;
}
.hour-card,
.mobile-card-item {
    border-left-color: var(--qr-hours-accent) !important;
}
.hours-title i {
    color: var(--qr-hours-accent) !important;
}