@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap'); :root { --red: #A31E22; --red-dark: #7E1518; --gold: #C9A24B; --gold-light: #E5CD8C; --cream: #FAF6EC; --ink: #2B1B12; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Direction comes from the dir attribute on , which follows the interface language (middleware/locale.js). Everything below uses logical properties so the layout mirrors itself. */ body { font-family: 'Cairo', sans-serif; background: var(--cream); color: var(--ink); /* Keeps the footer at the bottom of the viewport when a page has little content. */ display: flex; flex-direction: column; min-height: 100vh; } .page-body { flex: 1 0 auto; } a { color: inherit; text-decoration: none; } .topbar { background: var(--red); border-bottom: 4px solid var(--gold); padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .brand { display: flex; align-items: center; gap: 14px; } /* The logo JPG has a white background, so it sits on a white tile rather than straight on the red bar. */ .brand-mark { width: 52px; height: 52px; padding: 4px; object-fit: contain; background: #fff; border: 2px solid var(--gold); border-radius: 6px; } .brand h1 { color: var(--gold-light); font-size: 22px; font-weight: 900; } .brand span { color: var(--cream); font-size: 13px; display: block; opacity: .85; } .search-box { display: flex; gap: 0; } .search-box input { border: 2px solid var(--gold); padding: 9px 14px; font-family: inherit; min-width: 220px; background: var(--cream); } .search-box button { background: var(--gold); border: 2px solid var(--gold); color: var(--red-dark); font-weight: 700; padding: 9px 16px; cursor: pointer; } /* Round only the two outer corners and drop the seam between the pair — works whichever element comes first in the markup, and mirrors with the reading direction. */ .search-box > :first-child, .newsletter-form > :first-child { border-start-start-radius: 6px; border-end-start-radius: 6px; } .search-box > :last-child, .newsletter-form > :last-child { border-start-end-radius: 6px; border-end-end-radius: 6px; border-inline-start: none; } .account-nav { display: flex; align-items: center; gap: 10px; } .account-greeting { color: var(--gold-light); font-size: 14px; font-weight: 600; } .btn-account { display: inline-block; background: transparent; border: 2px solid var(--gold); color: var(--gold-light); font-family: inherit; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; } .btn-account:hover { background: var(--gold); color: var(--red-dark); } .lang-btn { min-width: 78px; } .btn-account.gold { background: var(--gold); color: var(--red-dark); } .btn-account.gold:hover { background: var(--gold-light); } .form-alt { margin-top: 16px; font-size: 14px; text-align: center; color: #7a6a55; } .form-alt a { color: var(--red); font-weight: 700; } .arch-divider { height: 14px; background: linear-gradient(135deg, var(--gold) 25%, transparent 25%) -7px 0, linear-gradient(225deg, var(--gold) 25%, transparent 25%) -7px 0; background-size: 14px 14px; background-color: var(--red); } .layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; max-width: 1180px; margin: 32px auto; padding: 0 24px; align-items: start; } .categories-panel { background: #fff; border: 2px solid var(--gold-light); border-radius: 10px; overflow: hidden; } .categories-panel h2 { background: var(--red); color: var(--gold-light); padding: 12px 16px; font-size: 15px; } .categories-panel ul { list-style: none; } .categories-panel li a { display: block; padding: 11px 16px; border-bottom: 1px solid #eee; font-size: 14px; } .categories-panel li a:hover, .categories-panel li.active a { background: var(--gold-light); color: var(--red-dark); font-weight: 700; } .books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; } .book-card { background: #fff; border: 2px solid var(--gold-light); border-radius: 10px 10px 50% 50% / 10px 10px 22px 22px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; } .book-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(163, 30, 34, .18); } .book-cover { height: 230px; background: var(--red); display: flex; align-items: center; justify-content: center; overflow: hidden; } .book-cover img { width: 100%; height: 100%; object-fit: cover; } .book-cover .placeholder { color: var(--gold-light); font-size: 13px; padding: 10px; text-align: center; } .book-info { padding: 14px 16px; } .book-info h3 { font-size: 16px; margin-bottom: 4px; } .book-info .author { font-size: 13px; color: #7a6a55; margin-bottom: 8px; } /* Prices are hidden for now; kept for when they come back. */ .book-info .price { display: inline-block; background: var(--gold); color: var(--red-dark); font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 20px; } .book-info .category-tag { font-size: 12px; color: var(--red); margin-top: 6px; } .empty-state { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: #9b8a70; } .book-detail { width: min(820px, 100% - 48px); margin: 32px auto; background: #fff; border: 2px solid var(--gold-light); border-radius: 12px; padding: 30px; display: grid; grid-template-columns: 260px 1fr; gap: 28px; } .book-detail .cover { border-radius: 6px; overflow: hidden; border: 3px solid var(--gold); } .book-detail .cover img { width: 100%; display: block; } .book-detail h1 { font-size: 26px; margin-bottom: 6px; } .book-detail .meta { color: #7a6a55; margin-bottom: 16px; } .book-detail .summary { line-height: 1.9; margin-bottom: 20px; } .back-link { display: inline-block; margin: 20px 24px; color: var(--red); font-weight: 700; } footer { text-align: center; padding: 22px; color: #9b8a70; font-size: 13px; border-top: 3px solid var(--gold-light); margin-top: 40px; } .admin-page { max-width: 960px; margin: 30px auto; padding: 0 20px; } .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .btn { display: inline-block; background: var(--red); color: var(--cream); padding: 9px 18px; border-radius: 6px; border: none; font-family: inherit; /*