/* style.css */
/* --- 1. Global Variables --- */
:root {
  --color-yellow: #ffa602;   /* хайж байгаа номоо үлдээх товч */
  --color-red: #ff6362;      /* зарна, news, гарах */
  --color-pink: #bc5090;     /* түрээслэнэ, + Ном нэмэх товч */
  --color-purple: #58508d;   /* солино, хайж байгаа номууд товч, афоризм гэх мэт */
  --color-green: #50868d;    /* үнэгүй & header, footer, search, filter, category, page */
  --color-light-green: #5c959c;  /* Цайвар ногоон (login & миний хуудас товч) */
}
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}
body { 
    background-color: #f4f6f9; 
    color: #333; 
    overflow-x: hidden !important; /* Утасны дэлгэц баруун тийш халихаас бүрэн хамгаална */
    width: 100% !important;
}
/* ДЭЭД БАННЕР */
.top-banner { 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto 5px auto;
    background: #e0e0e0; 
    height: 200px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: 2px dashed #bbb; 
    color: #666;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}
.top-banner img,
.top-banner video,
.top-banner iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
}
/* ХАЙЛТЫН ХЭСЭГ */
.search-section { 
    width: 100%;
    max-width: 1200px;
    margin: 16px auto; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 10px; 
    flex-wrap: wrap; 
    padding: 0;
    box-sizing: border-box;
}
/* Хайлтын талбар */
    .search-box { 
        width: 100%; 
        height: 42px; /* Баруун талын товчнуудтай яг ижил өндөртэй болгох */
        padding: 0 20px; 
        font-size: 14px; 
        border: 2px solid var(--color-light-green, #5c959c); 
        border-radius: 25px; 
        outline: none; 
        box-sizing: border-box;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    }

    /* "Хайх" товч */
    .btn-search {
        background: var(--color-light-green, #5c959c); 
        color: white; 
        border: none; 
        height: 42px; /* Өндрийг нь ижил болгох */
        padding: 0 20px; 
        border-radius: 25px; 
        cursor: pointer; 
        font-weight: bold;
        font-size: 14px;
        transition: opacity 0.2s ease;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    }
    .btn-search:hover {
        opacity: 0.80 !important; 
    }
    /* + Хайж байгаа номоо үлдээх товч */
    .btn-request-book {
        background: var(--color-yellow, #ffa602); 
        color: #fff; 
        height: 42px; /* Хайлтын товчтой яг ижил өндөр */
        line-height: 42px; /* Текстийг голлох */
        padding: 0 18px; 
        border-radius: 25px; 
        text-decoration: none; 
        font-weight: bold; 
        font-size: 14px; 
        margin-left: 15px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        transition: opacity 0.2s ease;
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
    }
    .btn-request-book:hover {
        opacity: 0.80 !important;
    }
    /* 📋 Хайж буй номууд товч */
    .btn-requested-list {
        background: var(--color-purple, #58508d); 
        color: #fff; 
        height: 42px; /* Хайлтын товчтой яг ижил өндөр */
        line-height: 42px; /* Текстийг голлох */
        padding: 0 18px; 
        border-radius: 25px; 
        text-decoration: none; 
        font-weight: bold; 
        font-size: 14px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        transition: opacity 0.2s ease;
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
    }
    .btn-requested-list:hover {
        opacity: 0.80 !important;
    }
/* ҮНДСЭН КОНТЕЙНЕР */
.container { 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto 40px auto; 
    display: flex; 
    align-items: flex-start; 
    gap: 8px; 
    box-sizing: border-box;
}
/* ШҮҮЛТҮҮРИЙН ЦЭС (SIDEBAR) */
.sidebar { 
    flex: 0 0 267px; 
    background: #fff; 
    padding: 10px; 
    border-radius: 8px; 
    height: fit-content; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
    position: sticky; 
    top: 20px;
    z-index: 10;
}
.sidebar h3 { 
    font-size: 13px; 
    font-weight: bold;
    color: #2c3e50; 
    margin-bottom: 8px; 
    border-bottom: 2px solid var(--color-green, #50868d); 
    padding-bottom: 4px; 
}
.filter-title {
    font-size: 13px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 6px;
    display: block;
}
.category-list { list-style: none; }
.category-list li { margin-bottom: 2px; }

.category-list a { 
    display: flex;            
    justify-content: space-between; 
    align-items: center;         
    padding: 5px 6px; 
    color: #555; 
    text-decoration: none; 
    border-radius: 4px; 
    font-size: 12px; 
    line-height: 1.3;
    transition: color 0.15s ease, background-color 0.15s ease; 
}
.category-list a span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 6px;
    flex-grow: 1;
    min-width: 0;
}
.category-list a .count {
    color: #95a5a6;
    font-size: 11px;
    font-weight: 500;
    min-width: 20px;
    text-align: right;
    flex-shrink: 0;
}
.category-list a:hover {
    background-color: #88b3b8; 	/*soft green eniig bas var css bolgonoo dara hereg bolno*/
    color: #fff;
}
/* 2. Сонгогдсон үед (Active) гарах ногоон өнгө */
.category-list a.active, 
.category-list li.active a { 
    background: var(--color-green, #50868d) !important;
    color: white !important;
    font-weight: bold;
}
.category-list a:hover .count, 
.category-list a.active .count {
    color: #fff;
}
/* Зөвхөн "Багц ном" сонгогдоогүй байх үеийн өнгө ба бичгийн хэлбэр */
.category-list a.bagts-nom-item:not(.active) {
    color: var(--color-pink); /* Хүссэн өнгөө заана (жишээ нь улбар шар) */
    font-weight: 600;
}

/* Сонгогдоогүй байх үеийн баруун талын тооны (count) өнгө */
.category-list a.bagts-nom-item:not(.active) .count {
    color: var(--color-pink);
}
.filter-group { margin-bottom: 0px; padding-bottom: 10px; }

.filter-checkboxes {
    padding-left: 10px;
}
.filter-checkboxes label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
    cursor: pointer;
}
.filter-select {
    width: 100%;
    padding: 5px 6px;
    font-size: 11px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    background: #fff;
}
.price-inputs { display: flex; gap: 4px; align-items: center; }
.price-inputs input {
    width: 50%;
    padding: 5px;
    font-size: 11px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}
.btn-filter {
    flex: 2; /* HTML дотор байсан flex тохиргоог энд оруулж болно */
    height: 36px;
    background: var(--color-green, #50868d);
    color: white;
    border: none;
    border-radius: 4px !important;
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: opacity 0.2s;
    padding: 0;
    margin: 0;
}
.btn-filter:hover { opacity: 0.80 !important; }
/* Цэвэрлэх товчны загварыг бас CSS рүү оруулах */
.btn-clear {
    flex: 1;
    height: 36px;
    color: white;
	background: var(--color-red, #ff6362);
    text-decoration: none;
    border-radius: 4px !important;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: opacity 0.2s;
    padding: 0;
    margin: 0;
}
.btn-clear:hover { opacity: 0.80 !important; }


/* ҮНДСЭН АГУУЛГА (MAIN CONTENT) */
.main-content { 
    flex: 1; 
    min-width: 0; 
    max-width: 100% !important; /* Дэлгэцнээс илүү гарахгүй байх хязгаар */
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.section-title { 
    margin: 10px 0 12px 0; 
    font-size: 14px; 
    color: #2c3e50; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-weight: bold; 
}
.section-title a { font-size: 13px; color: var(--color-green, #50868d); text-decoration: none;}
.section-title a:hover { opacity: 0.80 !important; /* Хулгана аваачахад өнгө нь бага зэрэг бүдгэрч тодорно */ }

/* МЭДЭЭНИЙ ХЭСЭГ */
.featured-news { 
    background: #fff; 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); 
    display: flex; 
    margin-bottom: 15px; 
}
.news-img { width: 40%; background: #2c3e50; min-height: 160px; background-size: cover; background-position: center; }
.news-info { width: 60%; padding: 15px; display: flex; flex-direction: column; justify-content: center; }
.news-tag { background: var(--color-red, #ff6362); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 3px; width: fit-content; font-weight: bold; margin-bottom: 8px; }
.news-title { font-size: 17px; font-weight: bold; color: #2c3e50; margin-bottom: 8px; text-decoration: none; line-height: 1.3; }

.news-excerpt { 
    font-size: 13px; 
    color: #555; 
    margin-bottom: 10px; 
}
.news-date { font-size: 12px; color: #95a5a6; }

/* НОМЫН ЖАГСААЛТ */
.book-grid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 8px; 
    margin-bottom: 30px; 
}
.book-card { 
    background: #fff; 
    border-radius: 6px; 
    overflow: hidden; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); 
    transition: transform 0.2s; 
    display: flex; 
    flex-direction: column; 
}
.book-card:hover { transform: translateY(-4px); }

.book-img { 
    width: 100%; 
    height: 140px; 
    object-fit: cover; 
    background: #eee; 
}
.book-info { 
    padding: 8px; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
}
.book-title { 
    font-weight: bold; 
    font-size: 14px; 
    margin-bottom: 4px; 
    color: #2c3e50; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.book-author { 
    color: #7f8c8d; 
    font-size: 12px; 
    margin-bottom: 5px; 
}

.book-badge { display: inline-block; padding: 2px 4px; font-size: 9px; border-radius: 3px; font-weight: bold; margin-bottom: 4px; width: fit-content; }
.badge-зарна { background: #e74c3c; color: #fff; }
.badge-солино { background: #2ecc71; color: #fff; }
.badge-түрээслүүлнэ { background: #3498db; color: #fff; }

.book-cat-tag { 
    font-size: 10px; 
    background: #f1f2f6; 
    color: #57606f; 
    padding: 2px 4px; 
    border-radius: 3px; 
    display: inline-block; 
    margin-bottom: 4px; 
    width: fit-content; 
}
.book-price { 
    font-weight: bold; 
    color: var(--color-green); 
    font-size: 14px; 
    margin-top: auto; 
}
/* Aphorism */
.aphorism-bar {
    width: 100%;
    max-width: 1200px;
    margin: 14px auto;
	margin-bottom: 5px;
    padding: 14px 22px;
    background: linear-gradient(135deg, #fefefe 0%, #f7f9fc 100%);
    border: 1px solid #e1e8ed;
/*    border-left: 4px solid #3498db;*/
	border-left: 4px solid var(--color-green, #50868d);
    border-radius: 6px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    box-sizing: border-box;
}
.aphorism-content {
    font-size: 15px;
    color: #2c3e50;
    line-height: 1.6;
}
.aphorism-content span:first-child {
    font-style: italic;
    color: #34495e;
}
.aphorism-author {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-green, #50868d); /* Хоёр цэгийн оронд таслал тавина */
    white-space: nowrap;
    font-style: normal;
}