/* Visual finish only. Original content, markup, navigation and layout stay in place. */
body {
    --bg: #0c0d0f;
    --bg-soft: #111416;
    --panel: #151719;
    --panel-2: #1b1d20;
    --gold: #d6ad64;
    --gold-2: #f0d69d;
    --gold-3: #a87935;
    --gold-4: #e6c17a;
    --gold-rgb: 214, 173, 100;
    --text: #f2eee5;
    --muted: #b1a58e;
    --line: rgba(214, 173, 100, .3);
    --gold-metal: linear-gradient(115deg, #b98538 0%, #e0b96d 25%, #f6e2ad 48%, #e6bf77 72%, #bd8d43 100%);
    --gold-metal-soft: linear-gradient(115deg, #c39650 0%, #e9c983 30%, #f8e7bb 52%, #dfb66a 78%, #c99b51 100%);
    --gold-metal-vertical: linear-gradient(180deg, #f5dfa7, #d7ac61 58%, #a97935);
    --shadow: 0 14px 34px rgba(0, 0, 0, .25);
    background: radial-gradient(ellipse at 80% 0, rgba(176, 125, 43, .055), transparent 45%), var(--bg);
    -webkit-font-smoothing: antialiased;
    color-scheme: dark;
}

.brand-mark {
    color: var(--gold-2);
    text-shadow: none;
}

.login-page:not(.admin-login-page) .login-form label {
    text-transform: none;
}

.brand-mark .icon,
.brand-logo-img,
.round-logo-img,
.shop-logo-img,
.panel-logo-img {
    filter: none;
}

.portal-card,
.vip-shop-card {
    border-color: #aa8448;
    background: linear-gradient(145deg, #1c1e20, #111416 80%);
    box-shadow: inset 0 0 0 1px rgba(247, 219, 158, .15), var(--shadow);
    transition: border-color .2s, box-shadow .2s;
}

.portal-card:hover,
.vip-shop-card:hover {
    border-color: #e4bf76;
    box-shadow: inset 0 0 0 1px rgba(247, 219, 158, .2), 0 16px 38px #0005;
}

.portal-card::after,
.vip-shop-card::after,
.catalog-image::after {
    opacity: .08;
}

.icon-submit,
.icon-button,
.back-button,
.small-gold-button,
.gold-button,
.logout-link,
.back-link,
.contact-button {
    border: 1px solid #d5ad66;
    border-radius: 11px;
    background: var(--gold-metal-soft);
    color: #271e10;
    font-weight: 650;
    box-shadow: inset 0 1px 0 #fff3d477, 0 4px 12px #0003;
    text-shadow: none;
    transition: filter .18s, box-shadow .18s;
}

.icon-submit:hover,
.icon-button:hover,
.back-button:hover,
.small-gold-button:hover,
.gold-button:hover,
.logout-link:hover,
.back-link:hover,
.contact-button:hover {
    filter: brightness(1.07);
    box-shadow: inset 0 1px 0 #fff6df99, 0 5px 15px #0004;
}

.icon-submit:active,
.small-gold-button:active,
.gold-button:active,
.contact-button:active {
    box-shadow: inset 0 2px 4px #6f481f40;
}

input,
select,
textarea {
    border-color: #514634;
    border-radius: 10px;
    background: #111315;
    color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
    border-color: #d6b474;
    box-shadow: 0 0 0 3px rgba(214, 173, 100, .12);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid #f0d69d;
    outline-offset: 4px;
}

.catalog-card,
.gold-panel,
.gold-section,
.home-featured-section,
.catalog-heading {
    border-color: rgba(214, 173, 100, .27);
    background-color: #151719;
    box-shadow: 0 8px 24px #0002;
}

.catalog-card { border-radius: 13px; }
.catalog-image { background: #101214; }
.catalog-body h3 { color: #f0e8d8; }
.catalog-meta span { color: #e7cf9e; border-color: #514531; }
.status-row { color: #b5b8ae; }

.tab-nav a,
.category-tabs a,
.contact-mini-button {
    border-color: #5a4b32;
    background: #191b1d;
    color: #decba6;
    box-shadow: none;
    transition: border-color .18s, background .18s;
}

.tab-nav a.is-active,
.category-tabs a.is-active {
    background: var(--gold-metal-soft);
    border-color: #d5ad66;
    color: #271e10;
    box-shadow: inset 0 1px #fff3d455, 0 3px 9px #0002;
}

.contact-mini-button.facebook { border-color: #435975; }
.contact-mini-button.tiktok { border-color: #714858; }
.contact-mini-button:hover { background: #252522; border-color: #b99962; }
.level-progress span { background: var(--gold-metal-soft); }
.member-board { border-color: #aa8448; box-shadow: inset 0 0 0 1px #d8b77717, var(--shadow); }
.round-logo { border-color: #b28a4b; box-shadow: inset 0 0 0 1px #e8c88c22; }
.change-password-form { background: #16191b; border-color: #77613e; border-radius: 13px; }
.flash { border-color: #9e7d4855; background: #cba05812; }
.flash-error { border-color: #9b5757; background: #bd5e5e12; color: #f2b4b4; }
.danger-button, .icon-button.danger { border-color: #9b5757; background: #311c1e; color: #f4c3c3; }

/* Keep the three shop choices together in one row. */
.login-page:not(.admin-login-page) .portal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.login-page:not(.admin-login-page) .portal-card {
    min-width: 0;
    max-width: none;
    width: 100%;
}

.login-page:not(.admin-login-page) .portal-card h1 {
    font-size: clamp(20px, 2.5vw, 30px);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .login-page:not(.admin-login-page) .portal-grid { gap: 8px; }
    .login-page:not(.admin-login-page) .portal-card { padding: 14px 6px; }
    .login-page:not(.admin-login-page) .portal-card .shop-logo-img { width: 52px; height: 52px; }
    .login-page:not(.admin-login-page) .portal-card .portal-art .icon { width: 36px; height: 36px; }
    .login-page:not(.admin-login-page) .portal-card h1 { font-size: clamp(12px, 3.2vw, 16px); }
    .login-page:not(.admin-login-page) .portal-card p { font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
    .shop-carousel-track { animation: none !important; }
    .shop-carousel { overflow-x: auto; }
}
