/* Bestia Reliqua - v11: Admin Panel Style Fix */

/* --- 1. General & Font Styling --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;700&display=swap');

:root {
    --font-primary: 'Kanit', sans-serif;
    --font-title: 'Cinzel Decorative', cursive;
    --color-gold: #ffd700;
    --color-gold-bright: #ffde00;
    --color-bg-dark: #0d0a1b;
    --color-bg-element: #1a1a2e;
    --color-purple-deep: #2a005a;
    --color-stock-blue: #3a8dff;
    --color-success: #28a745;
    --color-danger: #dc3545;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg-dark);
    color: #e0e0e0;
    line-height: 1.6;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Y2lyY2xlIGZpbGw9IiM4MDgwODAiIGN4PSIxMCIgY3k9IjEwIiByPSIxIi8+PC9zdmc+');
    background-size: 10px;
    background-blend-mode: overlay;
}

/* --- 2. Layout & Main Structure --- */
.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.site-header { background: linear-gradient(to right, var(--color-bg-element), var(--color-purple-deep), var(--color-bg-element)); border-bottom: 5px solid var(--color-gold-bright); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); position: sticky; top: 0; z-index: 1000; padding: 10px 0; position: relative; }
.site-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://www.transparenttextures.com/patterns/stardust.png'); opacity: 0.1; pointer-events: none; }
.header-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; position: relative; z-index: 2; }
.site-header .site-title { font-family: var(--font-title); font-size: 2.2em; color: var(--color-gold); text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.9), 0 0 15px rgba(255, 215, 0, 0.6); margin: 5px 0; }
.site-header .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.site-header .main-nav a { color: #f0f0f0; font-weight: 500; transition: all 0.3s ease; padding: 8px 15px; border-radius: 6px; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.site-header .main-nav a:hover { color: var(--color-gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.7); background-color: rgba(255, 255, 255, 0.1); }
.content-area { background-color: rgba(15, 15, 25, 0.98); border: 3px solid rgba(255, 215, 0, 0.6); border-radius: 20px; padding: 40px; margin-top: 40px; position: relative; z-index: 5; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.9); }
.section-title { font-family: var(--font-primary) !important; color: var(--color-gold); text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.9), 0 0 12px rgba(255, 215, 0, 0.7); border-bottom: 2px solid rgba(255, 215, 0, 0.4); text-align: center; font-size: 2.5em; margin-bottom: 40px; padding-bottom: 20px; position: relative; }
.section-title::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, var(--color-gold) 0%, transparent 70%); opacity: 0.8; width: 100px; height: 8px; border-radius: 50%; }

/* --- 3. Item Card & Price Tags --- */
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; }
.item-card { background: linear-gradient(145deg, #1f1d2e, var(--color-bg-element)); border: 2px solid rgba(255, 215, 0, 0.4); border-radius: 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); transition: all 0.4s ease-in-out; overflow: hidden; display: flex; flex-direction: column; }
.item-card:hover { transform: translateY(-12px) scale(1.03); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8); border-color: rgba(255, 230, 0, 0.9); }
.item-image-wrapper { width: 100%; height: 160px; position: relative; background: #100e1d; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid rgba(255,215,0,0.2); }
.item-info-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; text-align: center; }
.item-name { font-family: var(--font-title); font-size: 1.6em; color: #ffcc00; margin-bottom: 15px; min-height: 2.6em; }
.item-details-tags { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.item-price-tag, .item-denarius-tag, .item-stock-tag { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px; border-radius: 8px; font-weight: 500; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 2px 3px rgba(0,0,0,0.2); width: 90%; margin: 0 auto; }
.item-price-tag { background: linear-gradient(135deg, #e6a11f, #c0800d); color: #fff; }
.item-denarius-tag { background: linear-gradient(135deg, #a8a8a8, #7f8c8d); color: #fff; }
.item-stock-tag { background: linear-gradient(135deg, var(--color-stock-blue), #2369c3); color: #fff; }
.item-meta { margin: 10px 0; }
.rarity-badge { padding: 4px 12px; border-radius: 20px; font-size: 0.8em; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); display: inline-block; }
.rarity-badge.rarity-1 { background: linear-gradient(135deg, #9e9e9e, #757575); }
.rarity-badge.rarity-2 { background: linear-gradient(135deg, #8d6e63, #6d4c41); }
.rarity-badge.rarity-3 { background: linear-gradient(135deg, #039be5, #0277bd); }
.rarity-badge.rarity-4 { background: linear-gradient(135deg, #ab47bc, #8e24aa); }
.rarity-badge.rarity-5 { background: linear-gradient(135deg, #fdd835, #f9a825); color: #212121; }
.monster-tier-overlay { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 8px; font-size: 0.8em; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px #000; border: 1px solid rgba(255,255,255,0.3); }
.monster-tier-overlay.monster-tier-c { background-color: rgba(108, 117, 125, 0.8); }
.monster-tier-overlay.monster-tier-b { background-color: rgba(90, 98, 104, 0.8); }
.monster-tier-overlay.monster-tier-a { background-color: rgba(23, 162, 184, 0.8); }
.monster-tier-overlay.monster-tier-s { background-color: rgba(255, 193, 7, 0.8); color: #212121; }
.monster-tier-overlay.monster-tier-ss { background-color: rgba(220, 53, 69, 0.8); }
.monster-tier-overlay.monster-tier-sss { background-color: rgba(102, 16, 242, 0.8); }
.item-description-toggle { margin-top: 15px; flex-grow: 1; position: relative; min-height: 4.5em; overflow: hidden; }
.item-description-short { font-size: 0.9em; color: #c0c0c0; line-height: 1.5; }
.item-description-short::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1.5em; background: linear-gradient(to top, var(--color-bg-element) 20%, transparent 100%); }
.buy-button-container { margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(255, 215, 0, 0.2); }
.buy-button { background: linear-gradient(to right, #4CAF50, #2E8B57); color: white; padding: 10px 20px; border-radius: 8px; font-size: 1.1em; font-weight: bold; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); transition: all 0.3s ease; border: none; cursor:pointer; display: inline-flex; align-items: center; gap: 8px; }
.buy-button:hover:not(:disabled) { background: linear-gradient(to right, #36a43b, #287a4c); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6); transform: translateY(-2px); }

/* --- 4. AdminCP & Form Styling --- */
.admin-panel .admin-section { background: linear-gradient(145deg, rgba(26, 26, 46, 0.7), rgba(30, 28, 48, 0.5)); padding: 30px; border-radius: 15px; border: 1px solid rgba(255, 215, 0, 0.3); margin-bottom: 40px; box-shadow: 0 8px 25px rgba(0,0,0,0.5); }
.admin-panel .section-title { font-size: 2em; margin-bottom: 25px; border-bottom: none; text-align: left; padding-bottom: 0; }
.admin-panel .section-title::after { display: none; }
.restock-form { text-align: center; }
.restock-note { margin-top: 15px; font-style: italic; color: #aaa; font-size: 0.9em; }
.settings-form { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.settings-form .form-group-column { display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 700px; }
.settings-form .form-group { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 15px; width: 100%; }
.settings-form label { font-weight: 500; text-align: right; color: #c0c0c0; }
.settings-form label i { margin-right: 8px; color: var(--color-gold); }
.settings-form input, .settings-form select { background-color: rgba(0,0,0,0.3); border: 1px solid #4a5568; color: #fff; padding: 10px; border-radius: 8px; width: 100%; transition: border-color 0.3s, box-shadow 0.3s; }
.settings-form input:focus, .settings-form select:focus { border-color: var(--color-gold); box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); outline: none; }
.settings-form .price-range-inputs { display: flex; align-items: center; gap: 10px; }
.settings-form .price-range-inputs input { width: 80px; text-align: center; }
.form-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: white; padding: 12px 25px; border-radius: 8px; font-size: 1.1em; font-weight: bold; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); transition: all 0.3s ease; border: none; cursor: pointer; width: 100%; max-width: 700px; margin-top: 10px; }
.form-button.save { background: linear-gradient(to right, #007bff, #0056b3); }
.form-button.restock { background: linear-gradient(to right, var(--color-danger), #a51826); max-width: none; width: auto; }
.form-button:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6); }

/* --- 5. Cart, Checkout, Receipt Styling --- */
.cart-empty, .checkout-form-container { text-align: center; padding: 50px 20px; background-color: rgba(26, 26, 46, 0.5); border: 1px dashed rgba(255, 215, 0, 0.3); border-radius: 15px; }
.button-primary, .button-secondary { text-decoration: none; color: white; padding: 12px 25px; border-radius: 8px; font-size: 1.1em; font-weight: bold; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); transition: all 0.3s ease; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.button-primary { background: linear-gradient(to right, var(--color-success), #2E8B57); }
.button-secondary { background: linear-gradient(to right, #6c757d, #5a6268); }
.admin-table, .cart-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; background-color: rgba(26, 26, 46, 0.2); border-radius: 8px; overflow: hidden;}
.admin-table th, .cart-table th, .admin-table td, .cart-table td { padding: 15px; text-align: left; border-bottom: 1px solid rgba(255,215,0,0.2); }
.admin-table th, .cart-table th { background-color: rgba(255,215,0,0.1); font-weight: bold; color: var(--color-gold-bright); }
.admin-table tbody tr:hover, .cart-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); }
.cart-summary, .checkout-summary { background-color: rgba(26, 26, 46, 0.5); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 15px; padding: 30px; }
.checkout-form { max-width: 700px; margin: 0 auto; text-align: left; }
.checkout-form .form-group { margin-bottom: 25px; }
.checkout-form label, .receipt-info label { display: block; font-weight: 500; margin-bottom: 8px; color: #aaa; }
.checkout-form input[type="text"], .checkout-form textarea, .checkout-form select { width: 100%; background-color: rgba(0,0,0,0.3); border: 1px solid #4a5568; color: #fff; padding: 12px; border-radius: 8px; }
.checkout-form .radio-group label { display: inline-flex; align-items: center; gap: 10px; margin-right: 20px; color: #e0e0e0;}
#receipt-container { background: #fdfdfd; color: #111; padding: 30px; border: 1px solid #ccc; max-width: 600px; margin: 20px auto; font-family: 'Courier New', monospace; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
#receipt-container h4 { text-align: center; font-family: var(--font-primary); font-size: 1.5em; border-bottom: 2px dashed #999; padding-bottom: 10px; margin-bottom: 20px; }
.receipt-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.receipt-table th, .receipt-table td { padding: 8px; text-align: left; border-bottom: 1px solid #eee;}
.receipt-table .total-row td { border-top: 2px solid #333; font-weight: bold; font-size: 1.1em; }
.receipt-info { border-top: 2px dashed #999; margin-top: 20px; padding-top: 20px; }
.receipt-actions { text-align: center; margin-top: 30px; }

/* --- 6. Toast Notification --- */
#toast-notification { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 8px; padding: 16px; position: fixed; z-index: 2000; left: 50%; transform: translateX(-50%); bottom: 30px; font-size: 17px; transition: visibility 0s, opacity 0.5s linear; opacity: 0; }
#toast-notification.show { visibility: visible; opacity: 1; }
#toast-notification.success { background-color: var(--color-success); }
#toast-notification.error { background-color: var(--color-danger); }

/* --- 7. PROMOTION & ENHANCED UI STYLES --- */
.checkout-summary hr { border-color: rgba(255,215,0,0.2); margin: 15px 0; border-style: solid; border-width: 1px 0 0 0; }
.currency-label { font-weight: normal; font-size: 0.9em; color: #ccc; }
.promo-code-group { display: flex; gap: 0; position: relative; }
.promo-code-group input { flex-grow: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
.promo-code-group button { flex-shrink: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 1em; background: linear-gradient(to right, var(--color-gold), #c0800d); color: #111; font-weight: bold; }
.promo-code-group button:hover { background: linear-gradient(to right, #ffeb3b, var(--color-gold)); }
.promo-code-group button:disabled { background: #555; cursor: not-allowed; }
#promo-message { margin-top: 10px; text-align: center; font-weight: bold; min-height: 1.2em; }
#promo-message.success { color: var(--color-success); }
#promo-message.error { color: var(--color-danger); }

/* Receipt Watermark */
#receipt-container { position: relative; background: #fdfdfd; }
#receipt-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://img2.pic.in.th/pic/unnameda78571b2ba80ff73.md.png'); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.08; z-index: 1; }
#receipt-container > * { position: relative; z-index: 2; }

/* Signature Area */
.signature-area { margin-top: 40px; padding-top: 20px; text-align: right; border-top: 1px dashed #ccc; }
.signature-area p { margin: 0; line-height: 1.2; font-size: 0.9em; color: #555; }
.signature-text { font-family: 'Great Vibes', cursive; font-size: 2.5em; color: #333; }
.signature-title { font-size: 0.8em !important; color: #777 !important; }