/*
Theme Name: KhoPress Tinh Nguyệt - Bánh Trung Thu Cao Cấp
Theme URI: https://khopress.com
Author: KhoPress Luxury Design Studio
Description: Giao diện Thương Mại Điện Tử & Quà Tặng Bánh Trung Thu Hoàng Gia 2026 - Masterpiece Luxury Edition.
Version: 2.1.0
License: GNU General Public License v2 or later
Text Domain: khopress-mooncake
*/

/* ==========================================================================
   1. Luxury Design Tokens & Root Variables
   ========================================================================== */
:root {
    /* Imperial Gold Metallic Palette */
    --gold-primary: #d4af37;
    --gold-dark: #8b6508;
    --gold-deep: #5c4305;
    --gold-light: #fef08a;
    --gold-amber: #b8860b;
    --gold-shimmer-1: #996515;
    --gold-shimmer-2: #d4af37;
    --gold-shimmer-3: #fff3b0;
    --gold-shimmer-4: #e6c065;
    --gold-shimmer-5: #805300;

    /* Royal Crimson Palette */
    --crimson-dark: #7f1d1d;
    --crimson-base: #991b1b;
    --crimson-light: #b91c1c;
    --crimson-sheen: #dc2626;

    /* Silk Ivory & Cream Surfaces */
    --cream-bg: #faf7f2;
    --cream-surface: #fdfbf7;
    --cream-card: #ffffff;
    --slate-text: #1e293b;
    --slate-muted: #64748b;

    /* Hairlines & Glows */
    --border-gold-subtle: rgba(212, 175, 55, 0.3);
    --border-gold-medium: rgba(212, 175, 55, 0.5);
    --border-gold-strong: rgba(212, 175, 55, 0.75);
    --shadow-gold-glow: 0 0 25px rgba(212, 175, 55, 0.22);
    --shadow-gold-card: 0 10px 30px -5px rgba(184, 134, 11, 0.12), 0 0 0 1px rgba(212, 175, 55, 0.2);
}

/* ==========================================================================
   2. Typography & Hierarchy (Editorial Prestige)
   ========================================================================== */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background-color: var(--cream-bg);
    color: #27272a;
    font-family: 'Plus Jakarta Sans', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.68;
    letter-spacing: -0.01em;
}

/* Headings with Editorial Prestige & No Orphan Words */
h1, h2, h3, h4, .font-serif {
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 {
    font-weight: 700;
    line-height: 1.15;
}

h2 {
    font-weight: 700;
    line-height: 1.25;
}

h3 {
    font-weight: 600;
    line-height: 1.35;
}

/* Regal Roman Display Caps */
.font-cinzel {
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    letter-spacing: 0.06em;
}

/* Typography Utility Classes */
.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

/* WordPress Admin Bar Overlap Fix */
body.admin-bar #site-header,
body.admin-bar header,
body.admin-bar .site-header,
body.admin-bar .fixed-top {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar #site-header,
    body.admin-bar header,
    body.admin-bar .site-header,
    body.admin-bar .fixed-top {
        top: 46px !important;
    }
}

/* Custom Refined Scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: #f1ebd9;
}
::-webkit-scrollbar-thumb {
    background: #b8860b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #8b6508;
}

/* ==========================================================================
   3. Imperial Gold Foil & Metallic Text Effects
   ========================================================================== */
@keyframes gold-foil-shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gold-text-foil {
    background: linear-gradient(135deg, var(--gold-shimmer-1) 0%, var(--gold-shimmer-2) 22%, var(--gold-shimmer-3) 48%, var(--gold-shimmer-4) 72%, var(--gold-shimmer-5) 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gold-foil-shimmer 7s linear infinite;
}

.crimson-text-gradient {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hairline & Glow Utilities */
.border-gold-hairline {
    border: 1px solid rgba(212, 175, 55, 0.35);
}

.border-gold-glow {
    border: 1px solid rgba(212, 175, 55, 0.55);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.18);
}

.shadow-gold-soft {
    box-shadow: 0 10px 30px -5px rgba(184, 134, 11, 0.12), 0 0 0 1px rgba(212, 175, 55, 0.2);
}

.shadow-gold-glow {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.25);
}

/* Top Navbar Glass Effect */
.glass-light {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   4. Bespoke Product Packaging Card Design
   ========================================================================== */
.luxury-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 1.25rem;
    box-shadow: 0 4px 20px -2px rgba(184, 134, 11, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.85);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-card:hover {
    border-color: rgba(212, 175, 55, 0.7);
    box-shadow: 0 20px 45px -10px rgba(184, 134, 11, 0.2), 0 0 0 1px rgba(212, 175, 55, 0.4);
    transform: translateY(-5px);
}

/* Inner Bespoke Packaging Frame Accent */
.packaging-frame {
    position: relative;
}
.packaging-frame::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: inherit;
    pointer-events: none;
    transition: border-color 0.3s ease;
}
.luxury-card:hover .packaging-frame::before {
    border-color: rgba(212, 175, 55, 0.5);
}

/* Packaging Tags & Badges */
.packaging-tag-gold {
    background: rgba(28, 25, 23, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(212, 175, 55, 0.45);
    color: #fef08a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.packaging-tag-crimson {
    background: linear-gradient(135deg, #991b1b, #7f1d1d);
    border: 1px solid rgba(254, 202, 202, 0.35);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(153, 27, 27, 0.3);
}

/* ==========================================================================
   5. Luxury Call-To-Action Buttons & Sheen Sweep
   ========================================================================== */
@keyframes shimmer-sweep {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Primary Royal Crimson Button */
.btn-crimson {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 55%, #691212 100%);
    color: #ffffff;
    font-weight: 700;
    border: 1px solid rgba(254, 240, 138, 0.45);
    box-shadow: 0 4px 18px rgba(127, 29, 29, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-crimson::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 200%;
    height: 200%;
    background: linear-gradient(60deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
    transform: translateX(-100%) rotate(25deg);
    transition: transform 0.75s ease-in-out;
    pointer-events: none;
}

.btn-crimson:hover::before {
    transform: translateX(100%) rotate(25deg);
}

.btn-crimson:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 55%, #7f1d1d 100%);
    border-color: rgba(254, 240, 138, 0.75);
    box-shadow: 0 8px 25px rgba(153, 27, 27, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

/* Imperial Gold Button */
.btn-gold-royal {
    background: linear-gradient(90deg, #9a7210 0%, #d4af37 25%, #fef08a 50%, #d4af37 75%, #9a7210 100%);
    background-size: 200% 100%;
    animation: shimmer-sweep 5s infinite linear;
    color: #1e1b18;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.btn-gold-royal:hover {
    box-shadow: 0 6px 24px rgba(212, 175, 55, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* Floating Pulse Button Glow */
@keyframes pulse-gold-glow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6), 0 4px 18px rgba(127, 29, 29, 0.4);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 14px rgba(212, 175, 55, 0), 0 6px 22px rgba(127, 29, 29, 0.55);
    }
}

.pulse-gold {
    animation: pulse-gold-glow 2.4s infinite;
}

/* Delicate Ornamental Divider */
.gold-ornament-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.gold-ornament-line::before,
.gold-ornament-line::after {
    content: "";
    height: 1px;
    width: 60px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.7), transparent);
}

/* ==========================================================================
   6. Executive Corporate Financial Dashboard Styles
   ========================================================================== */
.dashboard-executive-card {
    background: linear-gradient(145deg, #ffffff 0%, #fdfbf7 100%);
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 20px 50px -10px rgba(184, 134, 11, 0.12), 0 0 0 1px rgba(212, 175, 55, 0.2);
    border-radius: 1.75rem;
}

.dashboard-metric-card {
    background: #ffffff;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 1.25rem;
    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.06);
    transition: all 0.3s ease;
}
.dashboard-metric-card:hover {
    border-color: rgba(212, 175, 55, 0.65);
    box-shadow: 0 10px 25px rgba(184, 134, 11, 0.14);
    transform: translateY(-2px);
}

/* Slick Executive Preset Buttons */
.preset-btn {
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: #faf7f2;
    color: #1e293b;
    font-weight: 700;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.preset-btn:hover {
    border-color: #d4af37;
    background: #fffdf5;
    color: #78350f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
}
.preset-btn.active {
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important;
    color: #ffffff !important;
    border-color: #fef08a !important;
    box-shadow: 0 4px 16px rgba(153, 27, 27, 0.35) !important;
}

/* Custom Imperial Gold Range Slider */
#calc-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #b8860b 0%, #d4af37 40%, #fef08a 80%, #e2d6c1 100%);
    outline: none;
}
#calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #991b1b;
    border: 3px solid #fef08a;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
    transition: all 0.2s ease;
}
#calc-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.95);
}
#calc-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #991b1b;
    border: 3px solid #fef08a;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
    transition: all 0.2s ease;
}

/* ==========================================================================
   7. Form Inputs & General Utilities
   ========================================================================== */
input:focus, select:focus, textarea:focus {
    border-color: #b8860b !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18) !important;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}