/* =====================================================================
   GuideHub — Editorial Digital Library × Premium Knowledge Store
   Visual identity: warm, clean, book-shop, NOT a dark dev dashboard.
   ===================================================================== */

:root {
    --gh-primary: #C75B39;        /* warm orange / terracotta */
    --gh-primary-dark: #A8482B;
    --gh-secondary: #2B2622;      /* deep charcoal */
    --gh-bg: #FBF7F0;             /* warm ivory */
    --gh-bg-alt: #F4EDE1;
    --gh-accent: #EAD9C4;         /* soft beige / sand */
    --gh-accent-strong: #E8C46A;
    --gh-text: #2B2622;
    --gh-text-muted: #6B6259;
    --gh-border: #E4D8C6;
    --gh-white: #FFFFFF;
    --gh-success: #4E7A51;
    --gh-danger: #B3432B;
    --gh-radius: 14px;
    --gh-radius-sm: 8px;
    --gh-shadow: 0 4px 18px rgba(43, 38, 34, 0.08);
    --gh-shadow-lg: 0 12px 32px rgba(43, 38, 34, 0.14);
    --gh-font: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--gh-font);
    background: var(--gh-bg);
    color: var(--gh-text);
    line-height: 1.7;
}

a { color: var(--gh-primary-dark); text-decoration: none; }
a:hover { color: var(--gh-primary); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gh-font);
    font-weight: 700;
    color: var(--gh-secondary);
    letter-spacing: -0.01em;
}

.text-muted-gh { color: var(--gh-text-muted) !important; }
.bg-gh-alt { background: var(--gh-bg-alt); }

/* ---------------------------------------------------------------- */
/* Buttons                                                            */
/* ---------------------------------------------------------------- */
.btn-gh-primary {
    background: var(--gh-primary);
    border: 1px solid var(--gh-primary);
    color: #fff;
    font-weight: 600;
    border-radius: var(--gh-radius-sm);
    padding: 0.6rem 1.4rem;
    transition: all .18s ease;
}
.btn-gh-primary:hover { background: var(--gh-primary-dark); border-color: var(--gh-primary-dark); color: #fff; }
.btn-gh-outline {
    background: transparent;
    border: 1.5px solid var(--gh-secondary);
    color: var(--gh-secondary);
    font-weight: 600;
    border-radius: var(--gh-radius-sm);
    padding: 0.55rem 1.3rem;
    transition: all .18s ease;
}
.btn-gh-outline:hover { background: var(--gh-secondary); color: #fff; }
.btn-gh-ghost {
    background: var(--gh-accent);
    border: 1px solid var(--gh-border);
    color: var(--gh-secondary);
    font-weight: 600;
    border-radius: var(--gh-radius-sm);
}
.btn-gh-ghost:hover { background: var(--gh-accent-strong); }

/* ---------------------------------------------------------------- */
/* Navbar                                                             */
/* ---------------------------------------------------------------- */
.gh-navbar {
    background: var(--gh-white);
    border-bottom: 1px solid var(--gh-border);
    padding: 0.85rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.gh-brand {
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--gh-secondary) !important;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.gh-brand .accent-dot { color: var(--gh-primary); }
.gh-navbar .nav-link {
    color: var(--gh-text);
    font-weight: 500;
    padding: 0.4rem 0.9rem !important;
}
.gh-navbar .nav-link:hover, .gh-navbar .nav-link.active { color: var(--gh-primary-dark); }
.gh-nav-search {
    max-width: 340px;
}
.gh-nav-search input {
    border-radius: 999px;
    border: 1px solid var(--gh-border);
    padding: 0.45rem 1rem 0.45rem 2.2rem;
    background: var(--gh-bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B6259' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat 0.75rem center;
    font-size: 0.9rem;
}
.gh-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gh-accent); }

/* ---------------------------------------------------------------- */
/* Hero                                                               */
/* ---------------------------------------------------------------- */
.gh-hero {
    background: linear-gradient(180deg, var(--gh-bg-alt) 0%, var(--gh-bg) 100%);
    padding: 4.5rem 0 3.5rem;
    border-bottom: 1px solid var(--gh-border);
    position: relative;
    overflow: hidden;
}
.gh-hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, var(--gh-accent-strong) 0%, transparent 70%);
    opacity: .35;
    border-radius: 50%;
}
.gh-hero h1 {
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.25;
}
.gh-hero .highlight { color: var(--gh-primary); }
.gh-hero p.lead { color: var(--gh-text-muted); font-size: 1.1rem; max-width: 640px; }

.gh-hero-search {
    max-width: 640px;
    background: var(--gh-white);
    border-radius: 999px;
    box-shadow: var(--gh-shadow-lg);
    padding: 0.4rem 0.4rem 0.4rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--gh-border);
}
.gh-hero-search input {
    border: none;
    flex: 1;
    background: transparent;
    font-size: 1rem;
    padding: 0.6rem 0;
}
.gh-hero-search input:focus { outline: none; }
.gh-hero-search button {
    border-radius: 999px;
    white-space: nowrap;
}
.gh-hero-tags { margin-top: 1.1rem; }
.gh-hero-tags a {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--gh-text-muted);
    border: 1px solid var(--gh-border);
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    margin: 0.2rem 0.3rem 0.2rem 0;
    background: var(--gh-white);
}
.gh-hero-tags a:hover { border-color: var(--gh-primary); color: var(--gh-primary-dark); }

/* ---------------------------------------------------------------- */
/* Section headers                                                    */
/* ---------------------------------------------------------------- */
.gh-section { padding: 3.2rem 0; }
.gh-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
    gap: .5rem;
}
.gh-section-head .eyebrow {
    color: var(--gh-primary);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.3rem;
}
.gh-section-head h2 { font-size: 1.7rem; margin: 0; }
.gh-section-head p { color: var(--gh-text-muted); margin: 0.3rem 0 0; }
.gh-section-link { font-weight: 600; white-space: nowrap; }
.gh-section-alt { background: var(--gh-bg-alt); }

/* ---------------------------------------------------------------- */
/* Category showcase                                                  */
/* ---------------------------------------------------------------- */
.gh-cat-card {
    background: var(--gh-white);
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    padding: 1.6rem 1.3rem;
    height: 100%;
    transition: all .2s ease;
    display: block;
    color: var(--gh-text);
}
.gh-cat-card:hover { transform: translateY(-4px); box-shadow: var(--gh-shadow-lg); color: var(--gh-text); border-color: var(--gh-primary); }
.gh-cat-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: var(--gh-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: var(--gh-primary-dark);
    margin-bottom: 1rem;
}
.gh-cat-card h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.gh-cat-card p { font-size: 0.86rem; color: var(--gh-text-muted); margin: 0; }

/* ---------------------------------------------------------------- */
/* Product cards (book-like covers)                                   */
/* ---------------------------------------------------------------- */
.gh-card {
    background: var(--gh-white);
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all .2s ease;
    position: relative;
}
.gh-card:hover { box-shadow: var(--gh-shadow-lg); transform: translateY(-3px); }
.gh-card-cover {
    aspect-ratio: 3 / 4;
    width: 100%;
    background: var(--gh-accent);
    position: relative;
    overflow: hidden;
}
.gh-card-cover .cover-svg { width: 100%; height: 100%; display: block; }
.gh-card-fav {
    position: absolute;
    top: 10px; right: 10px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--gh-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    z-index: 2;
}
.gh-card-fav.is-active { color: #fff; background: var(--gh-primary); }

/* Admin: existing preview-image thumbnails with an overlaid remove button
   (same visual language as .gh-card-fav, but for a destructive action). */
.gh-preview-thumb {
    position: relative;
    display: block;
    margin-bottom: 0;
    cursor: pointer;
    border-radius: var(--gh-radius-sm);
    overflow: hidden;
    border: 1px solid var(--gh-border);
}
.gh-preview-thumb img { display: block; transition: opacity .15s ease, filter .15s ease; }
.gh-preview-remove {
    position: absolute;
    top: 6px; right: 6px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    display: flex; align-items: center; justify-content: center;
    color: var(--gh-danger);
    font-size: 0.85rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.gh-preview-thumb:has(input:checked) img { opacity: 0.35; filter: grayscale(1); }
.gh-preview-thumb:has(input:checked) .gh-preview-remove { background: var(--gh-danger); color: #fff; }
.gh-card-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.gh-card-cat { font-size: 0.72rem; color: var(--gh-primary-dark); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 0.3rem; }
.gh-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gh-secondary);
    margin-bottom: 0.35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.gh-card-desc { font-size: 0.83rem; color: var(--gh-text-muted); margin-bottom: 0.6rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gh-card-meta { font-size: 0.78rem; color: var(--gh-text-muted); margin-bottom: 0.7rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.gh-card-meta span { display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; }
.gh-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gh-price { font-weight: 800; color: var(--gh-secondary); }
.gh-price-free { font-weight: 800; color: var(--gh-success); }
.gh-price-old { text-decoration: line-through; color: var(--gh-text-muted); font-size: 0.8rem; font-weight: 400; margin-right: 0.3rem; }

.gh-badge { font-size: 0.68rem; font-weight: 700; letter-spacing: .04em; padding: 0.25rem 0.55rem; border-radius: 999px; text-transform: uppercase; }
.gh-badge-free { background: #E4EFE1; color: var(--gh-success); }
.gh-badge-new { background: #E5EEF5; color: #2E6690; }
.gh-badge-best { background: #FBEAD8; color: var(--gh-primary-dark); }
.gh-badge-featured { background: #FBF1D6; color: #96751B; }
.gh-card-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 0.3rem; z-index: 2; }

.gh-rating { color: var(--gh-accent-strong); font-size: 0.82rem; }
.gh-rating .bi-star-fill, .gh-rating .bi-star-half { color: #D9A441; }

/* ---------------------------------------------------------------- */
/* Free library strip                                                 */
/* ---------------------------------------------------------------- */
.gh-free-banner {
    background: var(--gh-secondary);
    color: #fff;
    border-radius: var(--gh-radius);
    padding: 2.2rem;
}
.gh-free-banner h2 { color: #fff; }
.gh-free-banner p { color: #D8CFC4; }

/* ---------------------------------------------------------------- */
/* Topics chips                                                       */
/* ---------------------------------------------------------------- */
.gh-topic-chip {
    display: inline-block;
    background: var(--gh-white);
    border: 1px solid var(--gh-border);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    margin: 0.25rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gh-text);
}
.gh-topic-chip:hover { background: var(--gh-secondary); color: #fff; border-color: var(--gh-secondary); }

/* ---------------------------------------------------------------- */
/* CTA band                                                           */
/* ---------------------------------------------------------------- */
.gh-cta-band {
    background: linear-gradient(120deg, var(--gh-primary) 0%, var(--gh-primary-dark) 100%);
    color: #fff;
    border-radius: var(--gh-radius);
    padding: 2.6rem;
    text-align: center;
}
.gh-cta-band h2 { color: #fff; }
.gh-cta-band p { color: #FBE3D6; }

/* ---------------------------------------------------------------- */
/* Footer                                                             */
/* ---------------------------------------------------------------- */
.gh-footer {
    background: var(--gh-secondary);
    color: #D8CFC4;
    padding: 3.5rem 0 1.5rem;
    margin-top: 2rem;
}
.gh-footer h5 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.gh-footer a { color: #C9BFB2; }
.gh-footer a:hover { color: #fff; }
.gh-footer .gh-brand { color: #fff !important; }
.gh-footer-bottom { border-top: 1px solid #443C34; margin-top: 2rem; padding-top: 1.2rem; font-size: 0.85rem; color: #9C9285; }

/* ---------------------------------------------------------------- */
/* Filters / browse                                                   */
/* ---------------------------------------------------------------- */
.gh-filter-card { background: var(--gh-white); border: 1px solid var(--gh-border); border-radius: var(--gh-radius); padding: 1.3rem; }
.gh-filter-card label { font-weight: 600; font-size: 0.85rem; }
.gh-page-header { background: var(--gh-bg-alt); border-bottom: 1px solid var(--gh-border); padding: 2.2rem 0; }

/* ---------------------------------------------------------------- */
/* Product detail                                                     */
/* ---------------------------------------------------------------- */
.gh-detail-cover { border-radius: var(--gh-radius); overflow: hidden; box-shadow: var(--gh-shadow-lg); }

.js-lightbox-trigger { position: relative; cursor: zoom-in; }
.gh-zoom-hint {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(43, 38, 34, 0.4);
    color: #fff; font-size: 1.8rem;
    opacity: 0; transition: opacity .15s ease;
}
.gh-zoom-hint-sm { font-size: 1.1rem; }
.js-lightbox-trigger:hover .gh-zoom-hint { opacity: 1; }
.gh-detail-meta-list { list-style: none; padding: 0; margin: 0; }
.gh-detail-meta-list li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px dashed var(--gh-border); font-size: 0.9rem; }
.gh-sticky-buy { position: sticky; top: 90px; background: var(--gh-white); border: 1px solid var(--gh-border); border-radius: var(--gh-radius); padding: 1.5rem; }

/* ---------------------------------------------------------------- */
/* Empty states                                                       */
/* ---------------------------------------------------------------- */
.gh-empty { text-align: center; padding: 4rem 1rem; color: var(--gh-text-muted); }
.gh-empty i { font-size: 3rem; color: var(--gh-accent-strong); margin-bottom: 1rem; display: block; }

/* ---------------------------------------------------------------- */
/* Library tabs / auth cards / misc                                   */
/* ---------------------------------------------------------------- */
.gh-tab-pills .nav-link { border-radius: 999px; color: var(--gh-text); font-weight: 600; }
.gh-tab-pills .nav-link.active { background: var(--gh-secondary); color: #fff; }
.gh-auth-card { max-width: 420px; margin: 4rem auto; background: var(--gh-white); border: 1px solid var(--gh-border); border-radius: var(--gh-radius); padding: 2.5rem; text-align: center; }

/* ---------------------------------------------------------------- */
/* Admin dashboard shell — deliberately distinct from the storefront  */
/* ---------------------------------------------------------------- */
.gh-admin-body { background: #F3F0EA; }
.gh-admin-sidebar { background: var(--gh-secondary); min-height: 100vh; color: #D8CFC4; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
.gh-admin-sidebar .brand { color: #fff; font-weight: 800; font-size: 1.15rem; padding: 1.4rem 1.3rem 1rem; display: flex; align-items: center; gap: 0.5rem; }
.gh-admin-sidebar .nav-section-label { color: #7A7166; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.8rem 1.3rem 0.3rem; }
.gh-admin-sidebar a.nav-link { color: #B9AFA1; padding: 0.55rem 1rem; border-radius: 10px; margin: 0.15rem 0.7rem; font-size: 0.9rem; display: flex; align-items: center; transition: all .15s ease; }
.gh-admin-sidebar a.nav-link.active { background: var(--gh-primary); color: #fff; box-shadow: 0 4px 12px rgba(199,91,57,0.35); }
.gh-admin-sidebar a.nav-link:not(.active):hover { background: rgba(255,255,255,0.07); color: #fff; }

.gh-admin-topbar { background: #fff; border-bottom: 1px solid var(--gh-border); padding: 1rem 1.75rem; position: sticky; top: 0; z-index: 10; }
.gh-admin-topbar h1 { font-size: 1.15rem; }

.gh-admin-card { background: #fff; border: 1px solid var(--gh-border); border-radius: 16px; padding: 1.5rem; box-shadow: 0 2px 10px rgba(43,38,34,0.04); }
.gh-admin-card h3 { font-size: 0.95rem; font-weight: 700; }

.gh-admin-stat {
    background: #fff;
    border-radius: 16px;
    padding: 1.35rem 1.4rem;
    border: 1px solid var(--gh-border);
    box-shadow: 0 2px 10px rgba(43,38,34,0.04);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.gh-admin-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(43,38,34,0.08); }
.gh-admin-stat .stat-icon {
    width: 46px; height: 46px; min-width: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    color: #fff;
}
.gh-admin-stat .num { font-size: 1.6rem; font-weight: 800; color: var(--gh-secondary); line-height: 1.2; }
.gh-admin-stat .label { font-size: 0.8rem; color: var(--gh-text-muted); margin-top: 0.1rem; }
.stat-icon-orange { background: linear-gradient(135deg, var(--gh-primary), var(--gh-primary-dark)); }
.stat-icon-blue { background: linear-gradient(135deg, #4E8FB0, #2E6690); }
.stat-icon-green { background: linear-gradient(135deg, #6FA36F, #4E7A51); }
.stat-icon-gold { background: linear-gradient(135deg, #E8C46A, #C79A3E); }

.gh-admin-section-title { font-size: 0.95rem; font-weight: 700; color: var(--gh-secondary); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.gh-admin-quick-action {
    display: flex; align-items: center; gap: 0.7rem;
    background: #fff; border: 1px solid var(--gh-border); border-radius: 12px;
    padding: 0.9rem 1.1rem; text-decoration: none; color: var(--gh-secondary); font-weight: 600; font-size: 0.88rem;
    transition: all .15s ease;
}
.gh-admin-quick-action:hover { border-color: var(--gh-primary); color: var(--gh-primary-dark); transform: translateY(-1px); }
.gh-admin-quick-action i { font-size: 1.1rem; color: var(--gh-primary); }

.gh-admin-list-row { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0; border-bottom: 1px solid #F1EEE8; }
.gh-admin-list-row:last-child { border-bottom: none; }

/* ---------------------------------------------------------------- */
/* Responsive                                                          */
/* ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .gh-hero { padding: 3rem 0 2.2rem; text-align: center; }
    .gh-hero p.lead { margin-left: auto; margin-right: auto; }
    .gh-hero-search { margin: 0 auto; flex-direction: column; border-radius: var(--gh-radius); padding: 0.8rem; }
    .gh-hero-search input { width: 100%; padding: 0.5rem; }
    .gh-hero-search button { width: 100%; margin-top: 0.5rem; }
    .gh-section { padding: 2.2rem 0; }
    .gh-nav-search { display: none; }
    .gh-sticky-buy { position: static; }
}