/* --- General Setup & Variables --- */
:root {
    --gold-color: #c5a342;
    --white-color: #ffffff;
    --text-color: #4a4a4a;
    --background-color: #fafafa;
    --admin-dark-blue: #2c3e50;
    --admin-light-blue: #34495e;
    --admin-red: #e74c3c;
    --admin-green: #2ecc71;
    --admin-blue: #3498db;
    --border-color: #ddd;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', sans-serif; background-color: var(--background-color); color: var(--text-color); overflow-x: hidden; }

/* --- ================================== --- */
/* ---      PUBLIC SITE STYLES            --- */
/* --- ================================== --- */
.page-wrapper { position: relative; width: 100%; min-height: 100vh; z-index: 1; display: flex; flex-direction: column; }
.page-wrapper::before, .page-wrapper::after, main::before, main::after { content: ''; position: absolute; z-index: -1; }
.page-wrapper::before { width: 200px; height: 200px; top: 50px; left: 40px; background: radial-gradient(circle at 100% 100%, transparent 80px, var(--gold-color) 81px, var(--gold-color) 85px, transparent 86px), radial-gradient(circle at 0px 0px, var(--gold-color) 4px, transparent 5px); background-size: 100% 100%, 20px 20px; }
.page-wrapper::after { width: 150px; height: 150px; top: 60px; right: 50px; background: radial-gradient(circle, transparent 60%, var(--gold-color) 61%, var(--gold-color) 66%, transparent 67%), repeating-linear-gradient( -45deg, var(--gold-color), var(--gold-color) 5px, transparent 5px, transparent 10px ); clip-path: circle(50% at center); }
main::before { width: 150px; height: 150px; bottom: 50px; left: 40px; background: radial-gradient(circle at 0 0, transparent 70px, var(--gold-color) 71px, var(--gold-color) 75px, transparent 76px), radial-gradient(circle at 100% 100%, var(--gold-color) 4px, transparent 5px); background-size: 100% 100%, 20px 20px; }
main::after { width: 150px; height: 150px; bottom: 40px; right: 50px; background: repeating-linear-gradient( 45deg, var(--gold-color), var(--gold-color) 8px, transparent 8px, transparent 16px ); clip-path: polygon(0% 20%, 100% 0%, 100% 80%, 0% 100%); }
.main-header { display: flex; flex-direction: column; align-items: center; padding: 30px 20px 20px; }
.logo-container { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-bottom: 25px; }
.header-logo { width: 90px; height: auto; }
.logo-tagline { font-size: 0.9rem; color: var(--text-color); letter-spacing: 0.15em; text-transform: uppercase; }
.main-nav ul { list-style: none; display: flex; align-items: center; gap: 40px; }
.main-nav a { text-decoration: none; color: var(--gold-color); font-size: 1rem; font-weight: 600; letter-spacing: 0.1em; padding-bottom: 5px; position: relative; }
.main-nav a.active { border-bottom: 2px solid var(--gold-color); }
.user-menu-container { margin-left: auto; padding-left: 20px; }
.user-menu { position: relative; }
.user-menu-button { background: transparent; border: none; cursor: pointer; padding: 5px; color: var(--gold-color); }
.user-menu-dropdown { display: none; position: absolute; top: 100%; right: 0; background-color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 5px; padding: 10px 0; z-index: 1000; min-width: 160px; }
.user-menu-dropdown.active { display: block; }
.user-menu-dropdown a { display: block; padding: 10px 20px; color: var(--text-color); text-decoration: none; font-size: 0.9rem; }
.user-menu-dropdown a:hover { background-color: #f5f5f5; }
.nav-toggle { display: none; }
main { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; position: relative; }
.main-content-area { width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.page-title { font-size: 2.5rem; font-weight: 700; color: var(--gold-color); margin-bottom: 30px; text-align: center; }
.hero-title { font-size: 4.5rem; font-weight: 700; color: var(--gold-color); margin-bottom: 10px; }
.hero-subtitle { font-size: 1.5rem; font-weight: 400; letter-spacing: 0.3em; color: var(--gold-color); margin-bottom: 40px; }
.btn-primary { background-color: var(--gold-color); color: var(--white-color); padding: 10px 18px; border: none; border-radius: 4px; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color 0.3s ease; }
.btn-primary:hover { background-color: #b39130; }
.btn-secondary { background-color: #7f8c8d; color: white; padding: 10px 18px; border-radius: 4px; text-decoration: none; }
.btn-danger { background-color: var(--admin-red); color: white; padding: 5px 10px; border-radius: 4px; text-decoration: none; font-size: 0.9em; }
.contact-form { width: 100%; max-width: 500px; margin-top: 30px; }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; }
.form-group input, .form-group textarea, .language-select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; font-family: 'Montserrat', sans-serif; font-size: 1rem; }
.form-message { margin-bottom: 20px; padding: 15px; border-radius: 5px; background-color: #eaf7e9; color: #4f8a10; border: 1px solid #c8e5bc; }
.form-message.error-message { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.remember-me-group { display: flex; align-items: center; gap: 10px; }
.remember-me-group label { margin-bottom: 0; font-weight: normal; color: var(--text-color); }
.remember-me-group input[type="checkbox"] { width: auto; }
.library-intro { text-align: center; max-width: 600px; margin: 0 auto 40px auto; color: #777; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.book-card { display: flex; background: #fff; border-radius: 5px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); overflow: hidden; }
.book-cover { width: 150px; height: auto; object-fit: cover; }
.book-info { padding: 20px; display: flex; flex-direction: column; }
.book-title { margin-top: 0; margin-bottom: 10px; font-size: 1.3rem; }
.book-description { flex-grow: 1; margin-bottom: 20px; font-size: 0.9rem; line-height: 1.6; color: #555; }
.book-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; padding-top: 15px; }
.book-status { font-weight: 700; font-size: 0.9rem; }
.book-status.owned { color: var(--admin-green); }
.book-status.price { color: var(--gold-color); }
.main-footer { width: 100%; min-height: 40px; background-color: var(--gold-color); display: flex; justify-content: center; align-items: center; margin-top: auto; padding: 5px; color: var(--white-color); font-size: 0.9rem; }

/* --- ================================== --- */
/* ---         ADMIN DASHBOARD STYLES     --- */
/* --- ================================== --- */
body.admin-body { background-color: #f4f7f6; overflow-x: auto; font-family: Arial, sans-serif; }
body.admin-body .page-wrapper, body.admin-body main { display: block; }
.admin-page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.admin-top-bar { background-color: var(--admin-dark-blue); color: var(--white-color); padding: 0 30px; display: flex; justify-content: space-between; align-items: center; height: 60px; flex-shrink: 0; }
.admin-top-bar h1 { font-size: 1.5rem; margin: 0; }
.admin-user-actions { display: flex; align-items: center; gap: 20px; }
.admin-user-actions a { color: var(--white-color); text-decoration: none; font-weight: 600; display: flex; align-items: center; }
.admin-user-actions a.settings-icon { opacity: 0.7; transition: opacity 0.2s; }
.admin-user-actions a.settings-icon:hover { opacity: 1; }
.admin-main-content { padding: 30px; width: 100%; max-width: 1200px; margin: 0 auto; flex-grow: 1; }
.admin-nav-tabs { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 25px; width: 100%; }
.admin-nav-tabs a { padding: 10px 20px; text-decoration: none; color: #555; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.admin-nav-tabs a.active { color: var(--gold-color); border-bottom-color: var(--gold-color); }
.admin-content-area { width: 100%; }
.admin-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }
.admin-header-flex h2 { margin: 0; }
.dashboard-page { justify-content: flex-start; align-items: flex-start; text-align: left; }
.dashboard-page .page-title { text-align: left; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; width: 100%; margin-top: 30px; }
.admin-hub-grid { grid-template-columns: 1fr 1fr; }
.dashboard-card { background: #fff; padding: 25px; border-radius: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; flex-direction: column; transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; }
.dashboard-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.12); transform: translateY(-3px); }
.dashboard-card p { flex-grow: 1; }
.dashboard-card h3 { margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px; }
.dashboard-card .btn-primary, .dashboard-card .btn-secondary { margin-right: 10px; margin-top: 15px; display: inline-block; }
.full-width-card { grid-column: 1 / -1; }
.stat-card .stat-item { display: flex; align-items: baseline; margin-bottom: 10px; }
.stat-card .stat-number { font-size: 2.5rem; font-weight: 700; color: var(--gold-color); margin-right: 10px; }
.stat-card .stat-label { font-size: 1rem; color: #555; }
.product-list { list-style: none; padding: 0; } .product-list li { margin-bottom: 10px; } .product-list li a { text-decoration: none; color: var(--gold-color); font-weight: 600; }
.status-active { color: var(--admin-green); }
.status-inactive, .status-expired { color: var(--admin-red); }
.credit-balance { font-size: 3rem; font-weight: 700; color: var(--gold-color); line-height: 1; }
.credit-label { font-size: 1rem; font-weight: 400; display: block; margin-top: -5px; }
.dashboard-card .btn-secondary.disabled { background-color: #ccc; cursor: not-allowed; opacity: 0.7; }
.form-group label { color: var(--text-color); }
.admin-message { margin-top: 20px; }
.content-table { width: 100%; border-collapse: collapse; margin-top: 15px; background: #fff; }
.content-table th, .content-table td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: middle; }
.content-table thead th { background-color: #f2f2f2; font-size: 0.9em; text-transform: uppercase; }
.content-table .actions { display: flex; gap: 10px; }
.status-badge { padding: 4px 10px; border-radius: 15px; font-size: 0.85em; font-weight: 600; color: white; }
.status-suspended { background-color: var(--admin-red); }
.user-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.credit-form { display: flex; gap: 5px; }
.credit-form .credit-input { width: 80px; padding: 5px; font-size: 0.9rem; }
.credit-form button { padding: 5px 10px; font-size: 0.9rem; }
.admin-footer { text-align: center; padding: 15px; color: #888; font-size: 0.9em; flex-shrink: 0; border-top: 1px solid #ddd; }

/* CKEditor Specific Styles */
.ck-editor__editable_inline { min-height: 400px; }

/* --- RESPONSIVE STYLES --- */
@media (max-width: 768px) {
    body:not(.admin-body) .page-wrapper::before, body:not(.admin-body) .page-wrapper::after, body:not(.admin-body) main::before, body:not(.admin-body) main::after { display: none; }
    .main-header { flex-direction: row; justify-content: space-between; align-items: center; padding: 15px; }
    .logo-container { flex-direction: row; gap: 10px; margin-bottom: 0; }
    .header-logo { width: 60px; }
    .logo-tagline { display: none; }
    .main-nav { display: none; }
    .nav-toggle { display: block; background: transparent; border: 0; padding: 0.5em; cursor: pointer; z-index: 1001; }
    .main-nav.nav-visible { display: flex; position: fixed; top: 0; right: 0; width: 100%; height: 100vh; background-color: rgba(44, 62, 80, 0.95); z-index: 1000; padding-top: 5rem; margin-top: 0; }
    .main-nav.nav-visible ul { flex-direction: column; width: 100%; }
    .main-nav.nav-visible a { color: var(--white-color); font-size: 1.5rem; }
    .main-nav.nav-visible .user-menu-container { margin: 20px 0 0 0; padding: 0; }
    .main-nav.nav-visible .user-menu-button svg { width: 36px; height: 36px; color: var(--white-color); }
    .main-nav.nav-visible .user-menu-dropdown { top: auto; bottom: 100%; right: 50%; transform: translateX(50%); }
    .hamburger, .hamburger::before, .hamburger::after { content: ''; display: block; width: 2em; height: 3px; background: var(--gold-color); transition: all 250ms ease-in-out; }
    .hamburger::before { transform: translateY(-7px); }
    .hamburger::after { transform: translateY(4px); }
    .main-header.nav-active .nav-toggle .hamburger { transform: rotate(45deg); background: var(--white-color); }
    .main-header.nav-active .nav-toggle .hamburger::before { transform: rotate(-90deg) translateX(0); background: var(--white-color); }
    .main-header.nav-active .nav-toggle .hamburger::after { opacity: 0; }
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.1rem; }
    .admin-hub-grid, .dashboard-grid { display: block; }
    .dashboard-card { margin-bottom: 25px; }
    .admin-top-bar { flex-direction: column; height: auto; padding: 15px; text-align: center; gap: 10px; }
    .content-table thead { display: none; }
    .content-table tr { display: block; margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; }
    .content-table td { display: block; text-align: right; padding-left: 50%; position: relative; border-bottom: 1px solid #eee; }
    .content-table td:last-child { border-bottom: none; }
    .content-table td::before { content: attr(data-label); position: absolute; left: 15px; width: calc(50% - 25px); font-weight: bold; text-align: left; }
    .content-table td.actions { justify-content: flex-end; }
}


/* --- Post Card Specific Styles --- */
.post-card .book-info {
    width: 100%; /* Make the info section take the full width */
}

.post-card .book-title a {
    text-decoration: none;
    color: var(--text-color);
}
.post-card .book-title a:hover {
    color: var(--gold-color);
}

/* --- New Auth Page Styles --- */
.show-password-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -10px;
}
.show-password-group label {
    margin-bottom: 0;
    font-weight: normal;
    color: var(--text-color);
}
.show-password-group input[type="checkbox"] {
    width: auto;
}
.form-footer-links {
    text-align: center;
    margin-top: 20px;
}
.form-footer-links a {
    color: var(--text-color);
    font-size: 0.9rem;
}