/* Shop page styles
 * Moved out of pages/shop.php (was an inline <style>) on 2026-11-04. It is linked at the same spot,
 * so the cascade order is unchanged. Image URLs are root-absolute ($base_path is always "/").
 */

/* Page background - Show full background image */
body {
    background: url('/img/backgrounds/bg-shop.jpg') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
    padding-top: 112px;
    margin: 0;
    position: relative;
}

/* Glass effect container */
.glass-container {
    background: rgba(5, 7, 11, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(201,162,39,.22);
    border-radius: 0;
    padding: 2.5rem 2.5rem;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(0,0,0,.25);
    position: relative;
}

.glass-container::before {
    content: ''; position: absolute; inset: 5px;
    border: 1px solid rgba(201,162,39,.14);
    pointer-events: none;
}

.glass-container::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(#e8c552,#e8c552) left top / 18px 2px,
        linear-gradient(#e8c552,#e8c552) left top / 2px 18px,
        linear-gradient(#e8c552,#e8c552) right top / 18px 2px,
        linear-gradient(#e8c552,#e8c552) right top / 2px 18px,
        linear-gradient(#e8c552,#e8c552) left bottom / 18px 2px,
        linear-gradient(#e8c552,#e8c552) left bottom / 2px 18px,
        linear-gradient(#e8c552,#e8c552) right bottom / 18px 2px,
        linear-gradient(#e8c552,#e8c552) right bottom / 2px 18px;
    background-repeat: no-repeat;
}

/* Wow title gradient */
.wow-title {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    background: linear-gradient(180deg, #fff7d6 0%, #f2cf5b 35%, #c9a227 62%, #8a6a14 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.9));
    letter-spacing: .02em;
}

/* Item card hover effect */
.item-card {
    transition: all 0.3s ease;
    position: relative;
}

.item-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201,162,39,0.4);
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    z-index: 20;
}

/* Tooltip positioned on the right side */
.item-card .item-tooltip {
    display: none;
    position: absolute;
    z-index: 100;
    background: rgba(5,7,11,0.95);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(201,162,39,0.3);
    padding: 1rem;
    width: 320px;
    color: #d1d5db;
    font-size: 0.8rem;
    top: 0;
    left: calc(100% + 10px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.8);
}

/* Tooltip arrow pointing left */
.item-card .item-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 20px;
    border: 8px solid transparent;
    border-right-color: rgba(201,162,39,0.3);
}

/* Show tooltip only for categories that have tooltips */
.item-card.has-tooltip:hover .item-tooltip {
    display: block;
}

/* Limited stock badge animation */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.limited-stock-badge {
    animation: pulse 2s infinite;
}

/* Custom alert overlay */
.custom-alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
}

.custom-alert-overlay.show {
    display: flex;
}

.custom-alert-overlay.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Tab content animation */
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============ FORCE TEXT WRAPPING ============ */
.force-wrap {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1200px) {
    .item-card .item-tooltip {
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        margin-top: 10px;
        width: 280px;
    }

    .item-card .item-tooltip::before {
        right: auto;
        top: auto;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-right-color: transparent;
        border-bottom-color: rgba(201,162,39,0.3);
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 96px;
    }

    .glass-container {
        padding: 1.5rem 0.75rem;
    }

    .item-card .item-tooltip {
        width: 250px;
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        margin-top: 10px;
    }

    .item-card .item-tooltip::before {
        right: auto;
        top: auto;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-right-color: transparent;
        border-bottom-color: rgba(201,162,39,0.3);
    }
}

/* ---- Emberfrost banner and free badge (a second inline block further down pages/shop.php) ---- */
.ef-banner{margin-bottom:1.25rem;padding:1rem;border:1px solid rgba(96,165,250,.35);background:linear-gradient(90deg,rgba(30,58,138,.35),rgba(127,29,29,.30));display:flex;gap:.9rem;align-items:center}
.ef-banner .ef-ico{color:#7dd3fc;font-size:1.6rem;flex:0 0 auto}
.ef-banner .ef-title{color:#bae6fd;font-weight:700;margin-bottom:.25rem}
.ef-banner .ef-patch{color:#fcd34d;margin-top:.35rem}
.ef-free-badge{position:absolute;top:.5rem;left:.5rem;background:#059669;color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.08em;padding:.2rem .5rem;border:1px solid #34d399;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.ef-pieces{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.ef-piece{width:2.25rem;height:2.25rem;border:1px solid rgba(201,162,39,.45);border-radius:2px}
.ef-claimed{margin-top:.75rem;width:100%;padding:.625rem 0;text-align:center;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.4);color:#6ee7b7;font-weight:600;font-size:.875rem}
@media (max-width:640px){.ef-banner{flex-direction:column;align-items:flex-start}}
.ps-banner{margin-bottom:1.25rem;padding:1rem;border:1px solid rgba(242,207,82,.35);background:linear-gradient(90deg,rgba(120,53,15,.35),rgba(30,27,75,.35));display:flex;gap:.9rem;align-items:center}
.ps-banner .ps-sigil{width:3rem;height:3rem;flex:0 0 auto;border:1px solid rgba(242,207,82,.6);border-radius:3px;box-shadow:0 0 14px rgba(242,207,82,.25)}
.ps-banner .ps-title{color:#fde68a;font-weight:700;margin-bottom:.25rem}
.ps-banner .ps-ttl{color:#f2cf5b;font-weight:600}
@media (max-width:640px){.ps-banner{flex-direction:column;align-items:flex-start}}