/* ══════════════════════════════════════════════════════
   PriceHunti — Dark Theme (Steam-inspired)
   ══════════════════════════════════════════════════════ */

/* ── Global ──────────────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #829356 !important;
    color: #f8f9fa !important;
}

/* ── Navbar & Footer ─────────────────────────────── */
.navbar.bg-dark, footer.bg-dark {
    background-color: #1a202c !important;
}

footer .text-secondary { color: #adb5bd !important; }
footer a.text-secondary { color: #90CAF9 !important; }
footer a.text-secondary:hover { color: #bbdefb !important; }
footer .text-muted, footer small.text-muted { color: #adb5bd !important; }

/* ── Main content area ───────────────────────────── */
main.container {
    flex: 1;
    background-color: transparent !important;
    box-shadow: none !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

/* ══════════════════════════════════════════════════════
   TEXT-MUTED SCOPING:
   - Default: keep Bootstrap default (#6c757d) — readable on olive body bg
   - Inside dark cards/tables/hero/footer: override to light gray
   ══════════════════════════════════════════════════════ */

/* Dark-background contexts need light muted text */
.card .text-muted,
.card small.text-muted,
.card .small,
.table .text-muted,
.modal-body .text-muted,
.modal-body .form-text,
.hero-section .text-muted,
.hero-section small.text-muted,
.alert .text-muted {
    color: #adb5bd !important;
}

/* Form labels are always light (used only in dark contexts in our forms) */
.modal-body .form-label,
.card .form-label { color: #e5e5e5 !important; }

/* ── Hero Section (Steam blue gradient) ──────────── */
.hero-section {
    background: linear-gradient(135deg, #2a475e 0%, #1b2838 100%) !important;
    color: #e5e5e5 !important;
    border-radius: 1rem;
    padding: 3rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.hero-section h1 { color: #ffffff !important; }
.hero-section h1 .text-primary { color: #66c0f4 !important; }
.hero-section .lead { color: #c7d5e0 !important; }

/* Hero input stays light for contrast with dark hero bg */
.hero-section .form-control {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ced4da !important;
}
.hero-section .form-control::placeholder { color: #6c757d !important; }
.hero-section .input-group-text {
    background-color: #fff !important;
    color: #6c757d !important;
    border: 1px solid #ced4da !important;
}
.hero-section .input-group-text .bi.text-muted { color: #6c757d !important; }

/* ── Cards (Steam dark theme) ────────────────────── */
.card {
    background-color: #1b2838 !important;
    border: 1px solid #101519 !important;
    color: #e5e5e5 !important;
}

.card-header.bg-white {
    background-color: #101519 !important;
    border-bottom: 1px solid #2a475e !important;
    color: #e5e5e5 !important;
}

/* ── Product Cards ───────────────────────────────── */
.product-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid #101519;
    background-color: #1b2838 !important;
    color: #e5e5e5 !important;
    font-weight: bold !important;
    font-size: 1.05rem !important;
}

    .product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4) !important;
    }

    .product-card .text-muted,
    .product-card small,
    .product-card .small {
        color: #8f98a0 !important;
        font-weight: bold !important;
        font-size: 0.9rem !important;
    }

    /* Title: 2-line ellipsis instead of 1-line. min-height reserves 2 lines
       so the "offer at" line below stays at a consistent vertical position. */
    .product-card .card-title.text-truncate,
    .product-card .card-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal !important;
        line-height: 1.3;
        min-height: 2.6em;
    }

.product-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    background: #e9ecef;
    flex-shrink: 0;
}

/* ── Tables (Steam dark) ─────────────────────────── */
.table {
    --bs-table-bg: #1b2838 !important;
    color: #e5e5e5 !important;
    border-color: #2a475e !important;
}

    .table tbody tr,
    .table tbody tr td {
        background-color: #1b2838 !important;
        color: #e5e5e5 !important;
    }

.table th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #e2e8f0;
}

    .table th:hover { color: #ffffff; }

.table .bi.text-muted { color: #8f98a0 !important; }

.table-light { --bs-table-bg: #101519 !important; }

    thead.table-light,
    .table-light th,
    .table-light td {
        background-color: #101519 !important;
        color: #ffffff !important;
        border-bottom: 2px solid #2a475e !important;
    }

.table-hover tbody tr:hover,
.table-hover tbody tr:hover td {
    background-color: #2a475e !important;
    color: #ffffff !important;
}

.table-success { --bs-table-bg: #1e3a2f !important; }

.table tbody tr.table-success,
.table tbody tr.table-success td {
    background-color: #1e3a2f !important;
    color: #e5e5e5 !important;
}

.badge.bg-light {
    background-color: #2a475e !important;
    color: #e5e5e5 !important;
    border: 1px solid #3d6a8a !important;
}

.badge.bg-light.text-dark { color: #e5e5e5 !important; }

/* ── Form Controls (dark theme, outside hero) ────── */
body .form-select,
body .form-control:not(.hero-section .form-control) {
    background-color: #101519 !important;
    color: #e5e5e5 !important;
    border: 1px solid #2a475e !important;
}

body .form-control::placeholder { color: #8f98a0 !important; }

.form-check-input {
    background-color: #2a475e !important;
    border-color: #3d6a8a !important;
}

.form-check-input:checked {
    background-color: #198754 !important;
    border-color: #198754 !important;
}

.form-check-label { color: #e5e5e5 !important; }

/* ── Modals (dark theme) ─────────────────────────── */
.modal-content {
    background-color: #1b2838 !important;
    color: #e5e5e5 !important;
    border: 1px solid #2a475e !important;
}

.modal-body label { color: #e5e5e5 !important; }
.modal-footer { border-top-color: #2a475e !important; }
.modal-header { border-bottom-color: #2a475e !important; }

/* ── Alerts ──────────────────────────────────────── */
.alert-light, .alert-warning, .alert-info {
    background-color: #101519 !important;
    color: #adb5bd !important;
    border: 1px solid #2a475e !important;
}

.alert a { color: #90CAF9 !important; }

/* ── Suggestions Dropdown (light background) ─────── */
.suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.12);
    max-height: 320px;
    overflow-y: auto;
    color: #333;
}

.suggestion-item {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background 0.1s;
    text-decoration: none;
    color: inherit;
    gap: 0.75rem;
}

    .suggestion-item:hover, .suggestion-item.active { background: #f0f4ff; }

    .suggestion-item img {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        object-fit: cover;
        background: #e9ecef;
    }

    .suggestion-item .name { flex: 1; font-weight: 500; }
    .suggestion-item .meta { text-align: right; font-size: 0.8rem; }
    .suggestion-item .meta .price { font-weight: 600; color: #198754; }

/* ── Coupon Code ─────────────────────────────────── */
.coupon-code {
    background: #fff3cd;
    border: 1px dashed #ffc107;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
    color: #333;
}

    .coupon-code:hover { background: #ffe69c; }

/* ── Breadcrumb ──────────────────────────────────── */
.breadcrumb { background-color: transparent !important; }
.breadcrumb-item a {
    color: #90CAF9 !important;
    font-weight: 500;
}
.breadcrumb-item a:hover { color: #bbdefb !important; }
.breadcrumb-item.active {
    color: #ffffff !important;   /* current page name — bright white, clearly visible */
    font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #ced4da !important;   /* slash separator — clearly visible */
    font-weight: 600;
}

/* ── Links inside dark areas ─────────────────────── */
.card a.text-decoration-none,
.alert a.text-decoration-none {
    color: #90CAF9 !important;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
    .hero-section { padding: 2rem 0.5rem; }
    .hero-section h1 { font-size: 1.6rem; }
    .product-thumb { width: 44px; height: 44px; }
    .table { font-size: 0.85rem; }
}

/* ── Footer ──────────────────────────────────────── */
footer { margin-top: auto; }

/* ── Misc ────────────────────────────────────────── */
.min-w-0 { min-width: 0; }
.border-top { border-top-color: rgba(255,255,255,0.2) !important; }

/* ── Hero title accent color for text-primary ────── */
.hero-section .text-primary { color: #66c0f4 !important; }


/* ==========================================================================
   배너 반응형 처리 (PC 고정, 모바일 유연)
   ========================================================================== */

/* 1. 메인 페이지(Index) 우측 하단 사이드바 배너 */
.skyscraper-sidebar {
    width: 100%;
    max-width: 260px; /* PC에서 유지할 고정 최대폭 */
    margin: 0 auto;
}

.banner-stack img {
    width: 100%;
    height: auto; /* 이미지 비율 유지 */
    display: block;
    margin-bottom: 15px;
    border-radius: 8px;
}

/* 2. 검색 페이지(Search) 양옆 고정 배너 */
/* 화면 폭이 1000px 미만일 때 (노트북/태블릿/모바일 또는 과도한 줌) -> 배너 숨김 */
@media (max-width: 999px) {
    .search-side-banner {
        display: none !important;
    }
}

/* 화면 폭이 1000px 이상일 때 -> 양옆에 고정 노출 (125% 줌 대응) */
@media (min-width: 1000px) {
    .search-side-banner {
        display: block;
        position: fixed;
        top: 120px;
        width: 160px; /* PC 고정 사이즈 */
    }
}

/* 3. 모바일(768px 이하) 환경 메인 페이지 배너 여백 최적화 */
@media (max-width: 768px) {
    .skyscraper-sidebar {
        max-width: 100%; /* 모바일 화면 폭에 100% 맞춤 */
        padding: 0 10px;
    }

    .right-sidebar {
        margin-top: 30px;
        border-top: 1px solid #444; /* 다크테마에 맞는 구분선 */
        padding-top: 20px;
    }
}