:root {
    --primary-color: #28a745;
    --primary-color-rgb: 40, 167, 69;
    --secondary-color: #ffc107;
    --background-color: #f0f2f5;
    --surface-color: #ffffff;
    --text-color: #333;
    --danger-color: #dc3545;
    --border-color: #dee2e6;
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    --success-color: #28a745;
    --info-color: #17a2b8;
    --warning-color: #ffc107;
    --hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --global-font: 'Kanit', sans-serif;

    --global-font-size: 16px;
    --shop-name-font-size: 2.5rem;
    --slogan-font-size: 1.2rem;
    --marquee-duration: 20s;
    --main-menu-font-size: 0.9rem;
    --sub-menu-font-size: 1rem;
    --grid-columns: 6;
    --progress-width: 0%;

    --grid-horizontal-gap: 10px;
    --grid-vertical-gap: 20px;
    --out-of-stock-font-size: 1rem;
    --card-font-size-multiplier: 1;
    --card-level-font-size: calc(0.8rem * var(--card-font-size-multiplier));
    --card-name-font-size: calc(0.9rem * var(--card-font-size-multiplier));
    --card-quantity-font-size: calc(1.1rem * var(--card-font-size-multiplier));
    --card-icon-size: 60%;
    --card-width: 100%;
    --card-height: 100%;

    --card-level-color: #ffffff;
    --card-level-bg-color: rgba(0, 0, 0, 0.6);
    --card-name-color: var(--text-color);
    --card-quantity-color: var(--text-color);

    --card-icon-offset-x: 0px;
    --card-icon-offset-y: -15px;
    --card-level-offset-x: 0px;
    --card-level-offset-y: 0px;
    --card-name-offset-x: 0px;
    --card-name-offset-y: 0px;
    --card-quantity-offset-x: 0px;
    --card-quantity-offset-y: 0px;

    /* New Order Bar Multiplier Variables */
    --order-bar-height-multiplier: 1;
    --order-bar-button-width-multiplier: 1;
    --order-bar-button-height-multiplier: 1;
    --order-bar-font-size-multiplier: 1;
    --order-bar-warning-font-size-multiplier: 1;
    --order-bar-total-font-size-multiplier: 1;
}

/* Dark Mode */
body.dark-mode {
    --background-color: #121212;
    --surface-color: #1e1e1e;
    --text-color: #e0e0e0;
    --border-color: #333;
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    --hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --card-name-color: #e0e0e0;
    --card-quantity-color: #e0e0e0;
}

body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .stat-card,
body.dark-mode .top-selling-list li,
body.dark-mode .reorder-list li,
body.dark-mode .low-stock-list li {
    background-color: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode .btn-secondary {
    color: var(--text-color);
    background-color: #333;
}

body.dark-mode .btn-secondary:hover {
    color: white;
}



body.dark-mode .slider {
    background-color: #555;
}

body.dark-mode .slider:before {
    background-color: #ccc;
}

body.dark-mode input:checked+.slider {
    background-color: var(--primary-color);
}

body.dark-mode #reset-cart-btn {
    background: none;
}

body.dark-mode #order-details,
body.dark-mode #cart-details {
    background-color: #2a2a2a;
}

body.dark-mode #font-preview,
body.dark-mode #global-font-preview,
body.dark-mode #slogan-font-preview {
    color: var(--text-color);
    border-color: #444;
}

body.dark-mode .effect-controls {
    background-color: #2a2a2a;
    border-color: #333;
}

body.dark-mode .stock-search-list li {
    border-bottom-color: var(--border-color);
}

body.dark-mode .stock-search-list li:hover {
    background-color: #2a2a2a;
}

body.dark-mode #message-preview-box-wrapper {
    background-color: transparent;
}

body.dark-mode .low-stock-category-item {
    background-color: #2a2a2a;
    border-color: var(--border-color);
}

body.dark-mode .loader-animation-preview {
    border-color: #444;
    background-color: #2a2a2a;
}

body.dark-mode .loader-animation-preview p {
    color: #e0e0e0;
}

body.dark-mode .radio-group-tabs label span {
    background-color: #333;
    color: #ccc;
}

body.dark-mode .radio-group-tabs input:checked+span {
    background-color: var(--primary-color);
    color: white;
}

body.dark-mode .frame-preview-item {
    background-color: #2a2a2a;
}

body.dark-mode .seasonal-control.active {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .success-animation-preview {
    background-color: #1e1e1e;
}

body.dark-mode .effect-section {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .position-control-preview {
    background-color: #2a2a2a;
}

body.dark-mode .cursor-btn {
    background-color: #333;
}

body.dark-mode .cursor-btn:hover {
    background-color: #444;
}

body.dark-mode .cursor-btn:active {
    background-color: #555;
}

body.dark-mode .pos-btn {
    background-color: #333;
}

body.dark-mode .pos-btn:hover {
    background-color: #444;
}

body.dark-mode .preview-area {
    background-color: #1a1a1a;
}

body.dark-mode .filter-dropdown-content {
    background-color: #333;
    border-color: #444;
}

body.dark-mode .filter-dropdown-content a {
    color: #e0e0e0;
}

body.dark-mode .filter-dropdown-content a:hover {
    background-color: #444;
}

body.dark-mode .effects-preview-box {
    background-color: #2a2a2a;
    border-color: #444;
}

body.dark-mode .category-scroller {
    background-color: #333;
    border-color: #444;
}

body.dark-mode .cat-scroll-btn {
    color: var(--text-color);
}

body.dark-mode .tab {
    border-color: #555;
    background-color: #444;
}

body.dark-mode .theme-preview-item {
    background-color: #2a2a2a;
}

/* ================================================= */
/* ===== START: Seasonal Theme Overrides      ==== */
/* ================================================= */
body.seasonal-theme-active {
    transition: background-color 0.5s, color 0.5s;
}

body.theme-christmas {
    --primary-color: #D62828;
    --primary-color-rgb: 214, 40, 40;
    --secondary-color: #2A9D8F;
}

body.theme-cny {
    --primary-color: #E63946;
    --primary-color-rgb: 230, 57, 70;
    --secondary-color: #FFC300;
}

body.theme-valentine {
    --primary-color: #E53E5E;
    --primary-color-rgb: 229, 62, 94;
    --secondary-color: #FCC2D4;
}

body.theme-halloween {
    --primary-color: #F4A261;
    --primary-color-rgb: 244, 162, 97;
    --secondary-color: #264653;
}

body.theme-vegetarian {
    --primary-color: #FFD700;
    --primary-color-rgb: 255, 215, 0;
    --secondary-color: #333333;
}

body.theme-loykrathong {
    --primary-color: #003366;
    --primary-color-rgb: 0, 51, 102;
    --secondary-color: #FFD700;
}

body.theme-songkran {
    --primary-color: #00BFFF;
    --primary-color-rgb: 0, 191, 255;
    --secondary-color: #FFD700;
}

body.theme-newyear {
    --primary-color: #FFD700;
    --primary-color-rgb: 255, 215, 0;
    --secondary-color: #4B0082;
}

.seasonal-theme-active .btn-primary,
.seasonal-theme-active .tab.active {
    background-color: var(--primary-color);
}

.seasonal-theme-active .btn-secondary {
    background-color: var(--secondary-color);
    color: #333;
}


/* ================================================= */
/* ===== START: Loading Screen Styles         ==== */
/* ================================================= */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ปรับสีท้องฟ้าให้สดใสขึ้น */
    background: linear-gradient(180deg, #BAE6FD 0%, #E0F2FE 40%, #D1FAE5 80%, #86EFAC 100%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Kanit', sans-serif;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

/* --- DECORATION LAYERS (ฉากหลัง/หน้า) --- */
.hayday-decoration-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* --- COMMON IMAGE STYLES --- */
.hayday-decor-img {
    height: auto;
    filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.hayday-decor-img:hover {
    transform: scale(1.05);
    filter: drop-shadow(8px 15px 15px rgba(0, 0, 0, 0.4));
}

/* --- 🛒 LEFT IMAGE (มุมซ้าย - รถเข็น) 🛒 --- */
.hayday-left-img-container {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 20;
    animation: haydayFloatImage 4s ease-in-out infinite alternate;
}

.hayday-left-img-container .hayday-decor-img {
    width: 220px;
}

/* --- 🪨 RIGHT IMAGE (มุมขวา - หินเพ้นท์) 🪨 --- */
.hayday-right-img-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 20;
    animation: haydayFloatImage 4.5s ease-in-out infinite alternate-reverse;
}

.hayday-right-img-container .hayday-decor-img {
    width: 180px;
}

@keyframes haydayFloatImage {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-5px);
    }
}

/* --- ☁️ CLOUDS (เมฆบนฟ้า) ☁️ --- */
.hayday-cloud {
    position: absolute;
    background: white;
    border-radius: 50px;
    opacity: 0.8;
    animation: haydayFloatCloud linear infinite;
}

.hayday-cloud::after {
    content: '';
    position: absolute;
    top: -15px;
    left: 10px;
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 50%;
}

.hayday-cloud::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 30px;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
}

.hayday-cloud.c-1 {
    width: 100px;
    height: 40px;
    top: 10%;
    left: -120px;
    animation-duration: 25s;
}

.hayday-cloud.c-2 {
    width: 80px;
    height: 30px;
    top: 20%;
    left: -100px;
    animation-duration: 18s;
    animation-delay: 5s;
    transform: scale(0.7);
}

@keyframes haydayFloatCloud {
    from {
        left: -150px;
    }

    to {
        left: 100%;
    }
}

/* --- ☀️ CUTE 3D SUN (ดวงอาทิตย์น่ารัก) ☀️ --- */
.hayday-sun {
    position: absolute;
    top: 30px;
    right: 40px;
    width: 100px;
    height: 100px;
    z-index: 15;
    animation: sunFloat 3s ease-in-out infinite;
}

/* ตัวดวงอาทิตย์ - ใบหน้า */
.sun-face {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.6) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, #FFD93D 0%, #FFAC33 60%, #FF8C00 100%);
    border-radius: 50%;
    box-shadow:
        inset -4px -6px 15px rgba(0, 0, 0, 0.15),
        inset 4px 4px 15px rgba(255, 255, 255, 0.6),
        0 0 30px rgba(255, 200, 0, 0.6),
        0 0 60px rgba(255, 150, 0, 0.3);
    z-index: 2;
}

/* ดวงตาดวงอาทิตย์ */
.sun-eyes {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.sun-eye {
    width: 8px;
    height: 10px;
    background: #5C3A0B;
    border-radius: 50%;
    animation: sunBlink 4s infinite;
    position: relative;
}

/* แสงสะท้อนในตา */
.sun-eye::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 1px;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
}

/* รอยยิ้มดวงอาทิตย์ */
.sun-smile {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 10px;
    border: 3px solid #5C3A0B;
    border-top: none;
    border-radius: 0 0 20px 20px;
    background: transparent;
}

/* แก้มแดง */
.sun-cheek {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 6px;
    background: rgba(255, 100, 100, 0.5);
    border-radius: 50%;
}

.sun-cheek.left {
    left: 8px;
}

.sun-cheek.right {
    right: 8px;
}

/* รัศมีดวงอาทิตย์ */
.sun-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    animation: sunRaysRotate 20s linear infinite;
    z-index: 1;
}

.sun-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 6px;
    background: linear-gradient(to right, #FFD93D, #FFAC33);
    border-radius: 3px;
    transform-origin: left center;
    box-shadow: 0 0 5px rgba(255, 200, 0, 0.5);
}

/* 8 รัศมีหมุนรอบดวงอาทิตย์ */
.sun-ray:nth-child(1) {
    transform: rotate(0deg) translateX(35px);
}

.sun-ray:nth-child(2) {
    transform: rotate(45deg) translateX(35px);
}

.sun-ray:nth-child(3) {
    transform: rotate(90deg) translateX(35px);
}

.sun-ray:nth-child(4) {
    transform: rotate(135deg) translateX(35px);
}

.sun-ray:nth-child(5) {
    transform: rotate(180deg) translateX(35px);
}

.sun-ray:nth-child(6) {
    transform: rotate(225deg) translateX(35px);
}

.sun-ray:nth-child(7) {
    transform: rotate(270deg) translateX(35px);
}

.sun-ray:nth-child(8) {
    transform: rotate(315deg) translateX(35px);
}

/* แอนิเมชันดวงอาทิตย์ลอย */
@keyframes sunFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(3deg);
    }
}

/* แอนิเมชันรัศมีหมุน */
@keyframes sunRaysRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* แอนิเมชันกะพริบตา */
@keyframes sunBlink {

    0%,
    45%,
    55%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.1);
    }
}

/* --- การตกแต่งฟอนต์สไตล์ HAYDAY --- */
.hayday-logo-text {
    font-family: 'Kanit', cursive;
    font-size: 8rem;
    font-weight: 900;
    color: #9AD84D;
    letter-spacing: 2px;
    text-shadow:
        -2px -2px 0 #5C3A0B,
        2px -2px 0 #5C3A0B,
        -2px 2px 0 #5C3A0B,
        2px 2px 0 #5C3A0B,
        5px 5px 0 #6FAE2E,
        8px 8px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: baseline;
    justify-content: center;
    z-index: 30;
    position: relative;
}

/* Animation เด้งดึ๋งสำหรับตัวอักษร */
.hayday-char {
    display: inline-block;
    animation: haydayBounceIn 1s ease-in-out infinite alternate;
    position: relative;
}

.hayday-char-relative {
    position: relative;
}

.hayday-char:nth-child(1) {
    animation-delay: 0.0s;
}

.hayday-char:nth-child(2) {
    animation-delay: 0.1s;
}

.hayday-char:nth-child(3) {
    animation-delay: 0.2s;
}

.hayday-char:nth-child(4) {
    animation-delay: 0.3s;
}

.hayday-char:nth-child(5) {
    animation-delay: 0.4s;
}

.hayday-char:nth-child(6) {
    animation-delay: 0.5s;
}

@keyframes haydayBounceIn {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}

/* --- 🐔 CHICKEN CSS ART - IMPROVED & RESPONSIVE 🐔 --- */
/* ใช้ em units เพื่อให้ scale ตามขนาดตัวอักษรโดยอัตโนมัติ */
.chicken-container {
    position: absolute;
    /* ตำแหน่งยืนบนตัว D - ปรับให้ติดกับหัวตัวอักษร */
    top: -0.75em;
    left: 50%;
    transform: translateX(-50%);
    /* ขนาดใช้ em เพื่อ scale อัตโนมัติ */
    width: 1.25em;
    height: 1.25em;
    z-index: 40;
    /* เพิ่ม filter drop-shadow เพื่อความสมจริง */
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
}

.chicken-legs {
    position: absolute;
    bottom: 0.05em;
    width: 100%;
    height: 0.25em;
    z-index: 1;
}

.chicken-container .leg {
    position: absolute;
    bottom: 0;
    width: 0.075em;
    height: 0.32em;
    background: linear-gradient(to bottom, #ffb347, #ff9900);
    border-radius: 0.05em;
    border: 1px solid #cc7a00;
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.2);
}

.chicken-container .leg.left {
    left: 35%;
    transform: rotate(-3deg);
}

.chicken-container .leg.right {
    right: 35%;
    transform: rotate(3deg);
}

.chicken-container .foot {
    position: absolute;
    bottom: -0.02em;
    width: 0.2em;
    height: 0.08em;
    background: linear-gradient(to bottom, #ffb347, #ff9900);
    border-radius: 0.05em;
    border: 1px solid #cc7a00;
}

.chicken-container .leg.left .foot {
    left: -0.06em;
    transform: rotate(5deg);
}

.chicken-container .leg.right .foot {
    left: -0.06em;
    transform: rotate(-5deg);
}

/* ส่วนบนของไก่ */
.chicken-upper-body {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: chickenBreathe 2s ease-in-out infinite;
    z-index: 2;
}

/* ลำตัวไก่ - เพิ่ม gradient และ shadow สมจริง */
.chicken-body {
    position: absolute;
    bottom: 0.2em;
    left: 50%;
    transform: translateX(-50%);
    width: 0.9em;
    height: 0.8em;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.9) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 40%, #ffffff 0%, #f8f8f8 30%, #f0f0f0 60%, #e5e5e5 100%);
    border-radius: 50% 50% 45% 45%;
    box-shadow:
        inset -3px -5px 15px rgba(0, 0, 0, 0.15),
        inset 3px 3px 10px rgba(255, 255, 255, 0.8),
        0 8px 15px rgba(0, 0, 0, 0.2);
}

/* หัวไก่ - ปรับให้สมจริงขึ้น */
.chicken-head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0.65em;
    height: 0.6em;
    background:
        radial-gradient(ellipse at 35% 25%, rgba(255, 255, 255, 0.95) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, #ffffff 0%, #fafafa 40%, #f0f0f0 80%, #e8e8e8 100%);
    border-radius: 50% 50% 45% 45%;
    box-shadow:
        inset -2px -3px 8px rgba(0, 0, 0, 0.1),
        inset 2px 2px 8px rgba(255, 255, 255, 0.9);
    z-index: 5;
}

/* หงอนไก่ - ปรับให้สมจริงขึ้น */
.chicken-comb {
    position: absolute;
    top: -0.1em;
    left: 50%;
    transform: translateX(-50%);
    width: 0.28em;
    height: 0.18em;
    background:
        radial-gradient(ellipse at 30% 20%, #ff6b6b 0%, #e53935 50%, #c62828 100%);
    border-radius: 0.15em 0.15em 0.05em 0.05em;
    box-shadow:
        inset 0 2px 3px rgba(255, 150, 150, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

.chicken-comb::before,
.chicken-comb::after {
    content: '';
    position: absolute;
    bottom: 0.02em;
    width: 0.12em;
    height: 0.12em;
    background: inherit;
    border-radius: 50% 50% 30% 30%;
}

.chicken-comb::before {
    left: -0.08em;
    height: 0.1em;
}

.chicken-comb::after {
    right: -0.08em;
    height: 0.1em;
}

/* ตาไก่ - เพิ่มรายละเอียด */
.chicken-eyes {
    position: absolute;
    top: 0.22em;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.12em;
}

.chicken-container .eye {
    width: 0.1em;
    height: 0.1em;
    background: radial-gradient(circle at 30% 30%, #333 0%, #000 100%);
    border-radius: 50%;
    position: relative;
    animation: chickenBlink 4s infinite;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* แสงสะท้อนในตา */
.chicken-container .eye::after {
    content: '';
    position: absolute;
    top: 0.015em;
    right: 0.015em;
    width: 0.035em;
    height: 0.035em;
    background: white;
    border-radius: 50%;
}

/* ตาขอบสีเหลืองอ่อน (รอบตาดำ) */
.chicken-container .eye::before {
    content: '';
    position: absolute;
    top: -0.02em;
    left: -0.02em;
    width: calc(100% + 0.04em);
    height: calc(100% + 0.04em);
    background: radial-gradient(circle, #fff5d4 0%, #ffe4a0 100%);
    border-radius: 50%;
    z-index: -1;
}

/* จะงอยปากไก่ - ปรับให้สมจริง */
.chicken-beak {
    position: absolute;
    top: 0.32em;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 0.08em solid transparent;
    border-right: 0.08em solid transparent;
    border-top: 0.12em solid #ff9800;
    z-index: 6;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* ส่วนบนของปาก */
.chicken-beak::before {
    content: '';
    position: absolute;
    top: -0.14em;
    left: -0.06em;
    width: 0.12em;
    height: 0.05em;
    background: linear-gradient(to bottom, #ffcc00, #ff9800);
    border-radius: 0.03em 0.03em 0 0;
}

/* เหนียงไก่ - ปรับขนาดและสี */
.chicken-wattle {
    position: absolute;
    top: 0.42em;
    left: 50%;
    transform: translateX(-50%);
    width: 0.1em;
    height: 0.12em;
    background:
        radial-gradient(ellipse at 40% 30%, #ff6b6b 0%, #e53935 60%, #c62828 100%);
    border-radius: 40% 40% 50% 50%;
    z-index: 5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ปีกไก่ - ปรับให้สมจริงขึ้น */
.chicken-container .wing {
    position: absolute;
    top: 0.45em;
    width: 0.32em;
    height: 0.25em;
    background:
        radial-gradient(ellipse at 50% 20%, #ffffff 0%, #f5f5f5 50%, #e8e8e8 100%);
    border-radius: 60% 60% 40% 40%;
    box-shadow:
        inset -1px -2px 4px rgba(0, 0, 0, 0.1),
        1px 2px 4px rgba(0, 0, 0, 0.1);
}

.chicken-container .wing.left {
    left: 0;
    transform: rotate(-25deg);
    transform-origin: top right;
    animation: wingFlap 0.3s ease-in-out infinite alternate;
}

.chicken-container .wing.right {
    right: 0;
    transform: rotate(25deg);
    transform-origin: top left;
    animation: wingFlap 0.3s ease-in-out infinite alternate-reverse;
}

/* แอนิเมชันหายใจ - ปรับให้นุ่มนวล */
@keyframes chickenBreathe {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(0.02em) scale(1.02, 0.98);
    }
}

/* แอนิเมชันกะพริบตา */
@keyframes chickenBlink {

    0%,
    45%,
    55%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.1);
    }
}

/* แอนิเมชันกระพือปีก (เบาๆ) */
@keyframes wingFlap {
    from {
        transform: rotate(-25deg) translateY(0);
    }

    to {
        transform: rotate(-20deg) translateY(-0.01em);
    }
}

/* หางไก่ (เพิ่มใหม่) */
.chicken-body::after {
    content: '';
    position: absolute;
    bottom: 0.3em;
    right: -0.15em;
    width: 0.25em;
    height: 0.35em;
    background:
        linear-gradient(to right, #f5f5f5, #e0e0e0);
    border-radius: 0 80% 80% 0;
    transform: rotate(-30deg);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- แถบโหลด HAYDAY Style --- */
.hayday-loader-container {
    width: 200px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    margin-top: 10px;
    padding: 3px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    border: 3px solid #5C3A0B;
    z-index: 30;
}

.hayday-loader-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #F2C94C 0%, #D9A441 100%);
    border-radius: 50px;
    transition: width 0.1s linear;
    position: relative;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.hayday-loader-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0) 25%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0) 75%);
    background-size: 20px 20px;
    animation: haydayMoveShine 1s linear infinite;
    border-radius: 50px;
}

.hayday-percentage-text {
    font-family: 'Kanit', cursive;
    color: #5C3A0B;
    margin-top: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 1px 1px 0px #fff;
    z-index: 30;
}

@keyframes haydayMoveShine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Animation for Fade Out */
.fade-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

/* ============================================= */
/* Responsive Loading Screen - ปรับให้เหมาะกับทุกขนาดหน้าจอ */
/* ============================================= */

/* Tablet */
@media (max-width: 768px) {
    .hayday-logo-text {
        font-size: 6rem;
    }

    .hayday-left-img-container .hayday-decor-img {
        width: 180px;
    }

    .hayday-right-img-container .hayday-decor-img {
        width: 140px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .hayday-logo-text {
        font-size: 4rem;
    }

    /* ไก่จะ scale ตามอัตโนมัติเพราะใช้ em units */

    .hayday-left-img-container {
        left: 5px;
        bottom: 10px;
    }

    .hayday-left-img-container .hayday-decor-img {
        width: 140px;
    }

    .hayday-right-img-container {
        right: 5px;
        bottom: 10px;
    }

    .hayday-right-img-container .hayday-decor-img {
        width: 110px;
    }

    .hayday-loader-container {
        width: 160px;
        height: 16px;
    }

    .hayday-percentage-text {
        font-size: 1rem;
    }
}

/* Very Small Mobile */
@media (max-width: 400px) {
    .hayday-logo-text {
        font-size: 3rem;
    }

    .hayday-left-img-container .hayday-decor-img {
        width: 100px;
    }

    .hayday-right-img-container .hayday-decor-img {
        width: 80px;
    }

    .hayday-loader-container {
        width: 140px;
        height: 14px;
    }
}

/* ================================================= */
/* ===== END: HAYDAY Farm Loading Screen      ==== */
/* ================================================= */


/* ================================================= */

/* Clean up potential conflict styles */
.progress-bar {
    width: 100%;
    height: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    /* Hide default bar if not specific style */
    display: none;
}

/* Show only when specific style is applied, or override in specific classes */
.progress-bar.hayday-style,
.progress-bar.style-1,
.progress-bar.style-2,
/* ... add other styles if needed, or just let specific classes override display */
.progress-bar[class*="style-"] {
    display: block;
}

/* Ensure hayday-style overrides default props correctly */
.progress-bar.hayday-style {
    display: block !important;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--progress-width);
    height: 100%;
    transition: width 0.2s linear;
    border-radius: 10px;
}

.progress-bar::after {
    content: none;
}

.progress-bar.style-1::before {
    background: linear-gradient(90deg, #ffc107, #dc3545, #6610f2, #007bff, #28a745, #ffc107);
    background-size: 200% 100%;
    animation: running-progress 3s linear infinite;
}

@keyframes running-progress {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.progress-bar.style-2::before {
    background-color: #17a2b8;
}

.progress-bar.style-3::before {
    background: repeating-linear-gradient(-45deg, #20c997, #20c997 10px, #28a745 10px, #28a745 20px);
    animation: barberpole 1s linear infinite;
    background-size: 28px 28px;
}

@keyframes barberpole {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 28px 0;
    }
}

.progress-bar.style-4::before {
    background-color: #e83e8c;
}

.progress-bar.style-5::before {
    background: linear-gradient(90deg, #6c757d 50%, transparent 50%), linear-gradient(90deg, #6c757d 50%, transparent 50%), linear-gradient(0deg, #6c757d 50%, transparent 50%), linear-gradient(0deg, #6c757d 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    animation: marching-ants 1s linear infinite;
}

@keyframes marching-ants {
    to {
        background-position: 100%, 0, 0, 100%;
    }
}

.progress-bar.style-6::before {
    background-color: #fd7e14;
    box-shadow: 0 0 10px #fd7e14, 0 0 20px #fd7e14;
    animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.progress-bar.style-7::before {
    background-color: #fff;
}

.progress-bar.style-8::before {
    background: radial-gradient(circle at center, #6610f2 0%, transparent 70%);
}

.progress-bar.style-9::before {
    background: linear-gradient(to right, #007bff, #fff, #007bff);
    animation: shimmer 2s linear infinite;
    background-size: 200% 100%;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.progress-bar.style-10 {
    background-color: transparent;
    border: 2px solid #fff;
}

.progress-bar.style-10::before {
    background-color: #fff;
}

.progress-bar.style-11::before {
    background: repeating-linear-gradient(45deg, #4caf50, #4caf50 10px, #8BC34A 10px, #8BC34A 20px);
    animation: barberpole 1s linear infinite reverse;
    background-size: 28px 28px;
}

.progress-bar.style-12 {
    background: var(--info-color);
}

.progress-bar.style-12::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 30%, transparent 70%);
    border-radius: 45%;
    animation: wave-anim 4s linear infinite;
    width: 100%;
}

@keyframes wave-anim {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.progress-bar.style-13 {
    background: #333;
    border: 1px solid #ffc107;
    padding: 2px;
}

.progress-bar.style-13::before {
    background: #ffc107;
}

.progress-bar.style-14::before {
    background-image: repeating-linear-gradient(90deg, white, white 5px, transparent 5px, transparent 10px);
    background-size: 10px 100%;
    animation: move-dots 0.5s linear infinite;
}

@keyframes move-dots {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: 10px;
    }
}

.progress-bar.style-15 {
    background: #6f42c1;
}

.progress-bar.style-15::before {
    background: none;
}

.progress-bar.style-16 {
    background: linear-gradient(90deg, #e83e8c, #fd7e14, #ffc107);
}

.progress-bar.style-16::before {
    width: 100%;
    background: transparent;
    filter: brightness(1.2) saturate(1.2);
}

.progress-bar.style-17 {
    background: rgba(220, 53, 69, 0.2);
}

.progress-bar.style-17::before {
    background: var(--danger-color);
    box-shadow: 0 0 10px var(--danger-color);
}

.progress-bar.style-18 {
    background-image: linear-gradient(45deg, #333 25%, transparent 25%, transparent 75%, #333 75%, #333), linear-gradient(45deg, #333 25%, transparent 25%, transparent 75%, #333 75%, #333);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
}

.progress-bar.style-18::before {
    background: var(--primary-color);
    mix-blend-mode: screen;
}

.progress-bar.style-19::before {
    background-color: #fff;
}

.progress-bar.style-20 {
    background: #333;
    padding: 2px;
    border: 2px solid #fff;
    border-radius: 0;
}

.progress-bar.style-20::before {
    background: #0f0;
    border-radius: 0;
    transition: width 0.1s steps(10, end);
}

.progress-bar.style-21::before {
    background: linear-gradient(90deg, #ff4e50, #f9d423);
}

.progress-bar.style-22::before {
    background: linear-gradient(90deg, #1d2b64, #f8cdda);
}

.progress-bar.style-23::before {
    background: #3a1c71;
}

.progress-bar.style-24::before {
    background: #d76d77;
    animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.1);
    }
}

.progress-bar.style-25 {
    border: 1px solid #fff;
}

.progress-bar.style-25::before {
    background-color: #fff;
}

.progress-bar.style-26::before {
    background-image: conic-gradient(from 0deg, red, orange, yellow, green, blue, indigo, violet, red);
    animation: spin 1s linear infinite;
}

.progress-bar.style-27::before {
    background: #fff;
}

.progress-bar.style-28::before {
    background-image: radial-gradient(circle, #fff 10%, transparent 11%), radial-gradient(circle, #fff 10%, transparent 11%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    animation: move-dots-bg 1s linear infinite;
}

@keyframes move-dots-bg {
    to {
        background-position: -20px 0, -10px 10px;
    }
}

.progress-bar.style-29::before {
    background: #ff00ff;
    mix-blend-mode: multiply;
}

.progress-bar.style-30::before {
    background: #0ff;
    box-shadow: 0 0 15px #0ff;
}

.progress-bar.style-31 {
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.progress-bar.style-31::before {
    background: #fff;
    height: 100%;
    top: 0;
}

.progress-bar.style-32::before {
    background: repeating-linear-gradient(135deg, #ffc107, #ffc107 10px, #f9d423 10px, #f9d423 20px);
    animation: barberpole 2s linear infinite;
    background-size: 28px 28px;
}

.progress-bar.style-33 {
    border-radius: 0;
}

.progress-bar.style-33::before {
    background: #1fa2ff;
    border-radius: 0;
}

.progress-bar.style-34::before {
    background-color: #fff;
}

.progress-bar.style-35::before {
    background: #eee;
}

.progress-bar.style-36::before {
    background: #fff;
}

.progress-bar.style-37::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" ><text x="0" y="50" font-size="20" fill="white">LOADING</text></svg>');
    animation: text-scroll 3s linear infinite;
}

@keyframes text-scroll {
    to {
        background-position: -100px 0;
    }
}

.progress-bar.style-38::before {
    background: #fff;
}

.progress-bar.style-39::before {
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: spotlight 2s infinite;
    background-size: 200% 100%;
}

@keyframes spotlight {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 100% 0;
    }
}

.progress-bar.style-40 {
    background: repeating-conic-gradient(#3f87a6 0% 25%, #ebf8e1 0% 50%);
    animation: spin 1s linear infinite;
}

.progress-bar.style-40::before {
    background: transparent;
}

.progress-bar.style-41::before {
    background: #fff;
}

.progress-bar.style-42::before {
    background: #fff;
}

.progress-bar.style-43::before {
    background-image: linear-gradient(to right, #2575fc, #6a11cb);
}

.progress-bar.style-44 {
    background-color: transparent;
    border: 2px solid white;
    animation: border-flicker 1s infinite;
}

.progress-bar.style-44::before {
    background-color: #fff;
}

@keyframes border-flicker {
    50% {
        border-color: transparent;
    }
}

.progress-bar.style-45::before {
    background: #fff;
}

.progress-bar.style-46::before {
    background: #fff;
}

.progress-bar.style-47::before {
    background-color: lime;
}

.progress-bar.style-48::before {
    background: radial-gradient(#28a745, #20c997);
}

.progress-bar.style-49::before {
    background-image: linear-gradient(90deg, #fad0c4 0%, #ff9a9e 99%, #fad0c4 100%);
    animation: running-progress 2s infinite;
    background-size: 200% 100%;
}

.progress-bar.style-50 {
    background: #000;
}

.progress-bar.style-50::before {
    background: #fff;
    mix-blend-mode: difference;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--global-font);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
    font-size: var(--global-font-size);
}

#background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.5s ease, filter 0.5s ease, background-image 0.5s ease;
}

#festival-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
    pointer-events: none;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    padding: 5px 0;
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
}

.marquee-content-wrapper {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 12px;
    overflow: hidden;
    white-space: nowrap;
    /* ===== START: Festival Marquee Fix ===== */
    max-width: 100%;
    /* ===== END: Festival Marquee Fix ===== */
}

.marquee-text {
    display: inline-block;
    white-space: nowrap;
    animation: marquee-scroll linear infinite;
    animation-duration: var(--marquee-duration);
    padding-left: 100%;
    font-size: 1.2rem;
    font-weight: 500;
}

@keyframes marquee-scroll {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

.container.loaded {
    visibility: visible;
    opacity: 1;
}


h1,
h2,
h3,
h4 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--primary-color);
    transition: color 0.5s ease;
}

h1 {
    font-size: var(--shop-name-font-size);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    transition: font-size 0.3s ease;
}

#slogan {
    text-align: center;
    font-size: var(--slogan-font-size);
    margin-top: -15px;
    margin-bottom: 20px;
    color: #6c757d;
    transition: font-size 0.3s ease;
}

.view {
    display: none;
}

.view.active {
    display: block;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    color: white;
    font-family: var(--global-font);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: #333;
}

.btn-secondary:hover {
    background-color: #e0a800;
}

.btn-danger {
    background-color: var(--danger-color);
}

.btn-danger:hover {
    background-color: #c82333;
}

.btn-info {
    background-color: var(--info-color);
}

.btn-info:hover {
    background-color: #138496;
}

.btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    color: white;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-success:hover::before {
    left: 100%;
}

.btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
}

.btn-success:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.btn-orange {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border: none;
    color: white;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
    position: relative;
    overflow: hidden;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-orange::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn-orange:hover::before {
    left: 100%;
}

.btn-orange:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
    background: linear-gradient(135deg, #e55a2b 0%, #e8851a 100%);
}

.btn-orange:active {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}

.btn-small {
    padding: 5px 10px;
    font-size: 0.9rem;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="email"],
select,
input[type="file"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--global-font);
    margin-bottom: 10px;
    background-color: var(--surface-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.card {
    background-color: var(--surface-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 20px;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

#product-controls-wrapper {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.category-scroller {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 5px;
    overflow: hidden;
}

.cat-scroll-btn {
    background-color: transparent;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 10px;
    z-index: 2;
    flex-shrink: 0;
    line-height: 1;
}

.cat-scroll-btn:hover {
    color: var(--primary-color);
}

#category-tabs-container {
    flex-grow: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

#category-tabs-container::-webkit-scrollbar {
    display: none;
}

#category-tabs {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 5px;
}

.tab-group-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

.tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: var(--sub-menu-font-size);
}

.tab:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
    border-color: var(--primary-color);
}

.tab.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
    border-color: var(--primary-color);
}

.tab img {
    width: 24px;
    height: 24px;
}

#admin-product-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--surface-color);
}

#admin-product-tabs::-webkit-scrollbar {
    height: 5px;
}

#admin-product-tabs::-webkit-scrollbar-track {
    background: var(--surface-color);
}

#admin-product-tabs::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 10px;
}


.table-wrapper {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    transition: border-color 0.3s;
}

td:last-child {
    display: flex;
    align-items: center;
    gap: 5px;
}

td .btn+.btn {
    margin-left: 5px;
}

th {
    background-color: #f8f9fa;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
    transition: background-color 0.3s;
}

body.dark-mode th {
    background-color: #2a2a2a;
}

td img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 10px;
}

#order-summary {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    /* <-- UPDATED */
    gap: 15px;
    background-color: var(--surface-color);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.05);
    z-index: 100;
    margin-top: 20px;
    justify-content: center;
    transition: height 0.3s ease;
    height: calc(180px * var(--order-bar-height-multiplier));
}

/* ===== START: Order Bar Position Update ===== */
#order-summary[data-layout="buttons-top"] {
    flex-direction: column-reverse;
}

/* ===== END: Order Bar Position Update ===== */

#order-validation-message {
    font-weight: 500;
    min-height: 24px;
}

#order-validation-message .category-total {
    color: var(--text-color);
    font-size: 0.9rem;
    display: block;
}

body.dark-mode #order-validation-message .category-total {
    color: #ccc;
}

#order-validation-message .grand-total {
    color: var(--primary-color);
    font-weight: bold;
    font-size: calc(1.2rem * var(--order-bar-total-font-size-multiplier));
    display: block;
    margin-top: 5px;
    transition: font-size 0.3s ease;
}


.validation-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    transition: background-color 0.2s, font-size 0.3s ease;
    color: var(--danger-color);
    font-size: calc(0.9rem * var(--order-bar-warning-font-size-multiplier));
}

.validation-link:hover {
    background-color: rgba(220, 53, 69, 0.1);
}

.order-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.order-buttons .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease, height 0.3s ease, font-size 0.3s ease;
    width: calc(100% * var(--order-bar-button-width-multiplier));
    height: calc(50px * var(--order-bar-button-height-multiplier));
    font-size: calc(1rem * var(--order-bar-font-size-multiplier));
}

.copyright-footer {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #6c757d;
    transition: opacity 0.3s;
    text-align: center;
    /* <-- UPDATED */
}

body.dark-mode .copyright-footer {
    color: #888;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--surface-color);
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
}

.modal-content h2 {
    margin-bottom: 15px;
    text-align: left;
}

.no-copy {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#order-details,
#cart-details {
    white-space: pre-wrap;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    text-align: left;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, font-size 0.3s ease;
}

.order-summary-section {
    padding: 10px 0;
    border-bottom: 1px dashed var(--border-color);
}

.order-summary-section:last-of-type {
    border-bottom: none;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.95em;
    /* Use em for scaling */
    margin-bottom: 5px;
}

.summary-line.total-items {
    font-weight: bold;
    margin-top: 10px;
}

.summary-line.grand-total {
    font-weight: bold;
    font-size: 1.2em;
    /* Use em for scaling */
    color: var(--primary-color);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}


#cart-details .cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

#cart-details .cart-item:last-child {
    border-bottom: none;
}

#cart-details .cart-item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#cart-details .cart-item-info span {
    display: block;
}

#cart-details .cart-item-info .cart-item-name {
    font-weight: 500;
}

#cart-details .cart-item-info .cart-item-price {
    font-size: 0.9em;
    color: #6c757d;
}

body.dark-mode #cart-details .cart-item-info .cart-item-price {
    color: #aaa;
}

#cart-details .cart-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#cart-details .cart-item-controls .btn-op {
    padding: 2px 8px;
    font-size: 1rem;
    font-weight: bold;
    width: 30px;
    height: 30px;
    min-width: 30px;
    line-height: 1;
}

#cart-details .cart-item-quantity {
    font-weight: bold;
    min-width: 25px;
    text-align: center;
}

#cart-details .cart-item-controls .btn-delete {
    background: none;
    border: none;
    color: var(--danger-color);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0 5px;
    transition: transform 0.2s, color 0.2s;
    line-height: 1;
}

#cart-details .cart-item-controls .btn-delete:hover {
    transform: scale(1.1);
    color: #a0232f;
}


.modal-actions {
    text-align: center;
}

.copy-success-content {
    background-color: transparent;
    padding: 0;
    width: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
}

#success-animation-container {
    position: relative;
    width: 150px;
    height: 150px;
    transform: scale(var(--sa-size, 1));
    --sa-primary-color: #28a745;
    --sa-secondary-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#success-message-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    position: absolute;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
    /* บังคับแสดง 1 บรรทัดเท่านั้น */
}

/* === SUCCESS ANIMATION PREVIEW CARD STYLES === */
#success-animation-preview-container {
    width: 300px;
    height: 250px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 10px auto;
}

#success-animation-preview-container:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* Preview text styling - force single line */
#success-animation-preview-container #success-message-text {
    font-size: 1rem;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.success-preview-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.success-preview-column label {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

.success-anim-1 svg {
    width: 80px;
    height: 80px;
}

.success-anim-1 .sa-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke: var(--sa-primary-color);
    fill: none;
    animation: sa-stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-anim-1 .sa-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 4;
    stroke: var(--sa-secondary-color);
    animation: sa-stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .5s forwards;
}

@keyframes sa-stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

.success-anim-2 .sa-confetti {
    position: absolute;
    width: 8px;
    height: 15px;
    background: var(--sa-primary-color);
    top: 50%;
    left: 50%;
    opacity: 0;
    animation: sa-confetti-blast 1s ease-out forwards;
}

@keyframes sa-confetti-blast {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--x), var(--y)) rotate(360deg) scale(0);
        opacity: 0;
    }
}

.success-anim-3 svg {
    width: 60px;
    height: 120px;
    animation: sa-rocket-launch 1.2s ease-in-out forwards;
}

@keyframes sa-rocket-launch {
    0% {
        transform: translateY(50%) rotate(0);
    }

    20% {
        transform: translateY(50%) rotate(-5deg);
    }

    40% {
        transform: translateY(50%) rotate(5deg);
    }

    100% {
        transform: translateY(-150%) rotate(0);
        opacity: 0;
    }
}

.success-anim-4 svg {
    width: 100px;
    height: 100px;
    filter: drop-shadow(0 0 5px var(--sa-primary-color));
}

.success-anim-4 .sa-shine {
    animation: sa-shine-pass 1.5s infinite linear;
}

@keyframes sa-shine-pass {
    0% {
        transform: translateX(-150%);
    }

    100% {
        transform: translateX(150%);
    }
}

.success-anim-5 svg {
    width: 90px;
    height: 90px;
    animation: sa-heart-beat 0.8s ease-in-out 3;
}

@keyframes sa-heart-beat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.success-anim-6 .sa-box {
    width: 80px;
    height: 80px;
    position: relative;
    perspective: 400px;
}

.success-anim-6 .sa-lid {
    width: 80px;
    height: 20px;
    background: var(--sa-primary-color);
    position: absolute;
    top: 0;
    z-index: 1;
    animation: sa-lid-open 1s forwards .2s;
    transform-origin: top;
}

.success-anim-6 .sa-box-bottom {
    width: 80px;
    height: 60px;
    background: var(--sa-secondary-color);
    position: absolute;
    top: 20px;
}

.success-anim-6 .sa-check {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    font-size: 40px;
    color: var(--sa-primary-color);
    animation: sa-check-pop 0.5s forwards 1.2s;
}

@keyframes sa-lid-open {
    100% {
        transform: rotateX(-120deg);
    }
}

@keyframes sa-check-pop {
    100% {
        transform: translateX(-50%) scale(1);
    }
}

.success-anim-7 .sa-stamp {
    width: 120px;
    height: 60px;
    border: 4px solid var(--sa-primary-color);
    color: var(--sa-primary-color);
    font-weight: bold;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    transform: scale(3) rotate(15deg);
    opacity: 0;
    animation: sa-stamp-it 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes sa-stamp-it {
    100% {
        transform: scale(1) rotate(-10deg);
        opacity: 1;
    }
}

.success-anim-8 .sa-check {
    font-size: 80px;
    color: var(--sa-primary-color);
    animation: sa-bounce-in 1s forwards;
}

@keyframes sa-bounce-in {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
    }

    80% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-anim-9 .sa-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 10px;
    background: var(--sa-primary-color);
    transform-origin: top center;
    animation: sa-radial-burst 1s forwards;
}

@keyframes sa-radial-burst {
    0% {
        transform: rotate(var(--r)) translateY(0) scaleY(0);
    }

    100% {
        transform: rotate(var(--r)) translateY(50px) scaleY(1);
        opacity: 0;
    }
}

.success-anim-10 .sa-stem {
    width: 5px;
    height: 0;
    background: var(--sa-primary-color);
    animation: sa-grow-stem 0.5s forwards;
}

.success-anim-10 .sa-petal {
    width: 30px;
    height: 30px;
    background: var(--sa-secondary-color);
    border-radius: 50% 0;
    position: absolute;
    transform: scale(0);
    animation: sa-bloom 0.8s forwards 0.5s;
}

@keyframes sa-grow-stem {
    100% {
        height: 60px;
    }
}

@keyframes sa-bloom {
    100% {
        transform: scale(1);
    }
}

.success-anim-11 .sa-thumb {
    font-size: 80px;
    color: var(--sa-primary-color);
    animation: sa-thumb-up 0.5s forwards;
    transform: translateY(100%);
}

@keyframes sa-thumb-up {
    100% {
        transform: translateY(0);
    }
}

.success-anim-12 .sa-wand {
    width: 100px;
    height: 10px;
    background: linear-gradient(90deg, var(--sa-primary-color), var(--sa-secondary-color));
    border-radius: 5px;
    transform: rotate(-45deg);
    animation: sa-wand-wave 1.5s infinite;
}

.success-anim-12 .sa-sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 5px white;
    animation: sa-sparkle-fly 1s forwards;
}

@keyframes sa-wand-wave {

    0%,
    100% {
        transform: rotate(-45deg);
    }

    50% {
        transform: rotate(-35deg);
    }
}

@keyframes sa-sparkle-fly {
    from {
        transform: translate(0, 0);
        opacity: 1;
    }

    to {
        transform: translate(-40px, -40px);
        opacity: 0;
    }
}

.success-anim-13 svg {
    width: 80px;
    height: 80px;
}

.success-anim-13 .sa-shackle {
    animation: sa-shackle-unlock 0.5s forwards .2s;
}

@keyframes sa-shackle-unlock {
    100% {
        transform: translateY(-15px) rotate(15deg);
    }
}

.success-anim-14 svg {
    width: 100px;
    height: 100px;
}

.success-anim-14 .sa-ribbon {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: sa-stroke 1s forwards;
}

.success-anim-15 .sa-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--sa-secondary-color);
    position: absolute;
    transform: scale(0);
    animation: sa-target-ring 0.5s forwards;
}

.success-anim-15 .sa-check {
    font-size: 50px;
    color: var(--sa-primary-color);
    transform: scale(0);
    animation: sa-check-pop 0.3s forwards 0.5s;
}

@keyframes sa-target-ring {
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.success-anim-16 svg {
    width: 100px;
    height: 100px;
    animation: sa-paper-plane 1.5s ease-in-out forwards;
}

@keyframes sa-paper-plane {
    0% {
        transform: translate(-100px, 100px) rotate(-20deg);
    }

    100% {
        transform: translate(150px, -150px) rotate(20deg);
        opacity: 0;
    }
}

.success-anim-17 .sa-check {
    font-size: 100px;
    color: var(--sa-primary-color);
    animation: sa-glow 1.5s infinite alternate;
}

@keyframes sa-glow {
    to {
        text-shadow: 0 0 20px var(--sa-primary-color);
    }
}

.success-anim-18 .sa-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid var(--sa-primary-color);
    position: relative;
}

.success-anim-18 .sa-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--sa-primary-color);
    border-radius: 50%;
    transform: scale(0);
    animation: sa-fill-circle 0.8s forwards;
}

@keyframes sa-fill-circle {
    100% {
        transform: scale(1);
    }
}

.success-anim-19 .sa-pole {
    width: 5px;
    height: 120px;
    background: #999;
}

.success-anim-19 .sa-flag {
    width: 80px;
    height: 50px;
    background: var(--sa-primary-color);
    color: var(--sa-secondary-color);
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    top: 0;
    left: 5px;
    transform-origin: 0 0;
    animation: sa-wave-flag 2s infinite ease-in-out;
}

@keyframes sa-wave-flag {

    0%,
    100% {
        transform: rotateY(0);
    }

    50% {
        transform: rotateY(40deg);
    }
}

.success-anim-20 .sa-bar {
    width: 120px;
    height: 20px;
    border: 2px solid var(--sa-primary-color);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.success-anim-20 .sa-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: var(--sa-primary-color);
    animation: sa-fill-bar 1s forwards;
}

.success-anim-20 .sa-text {
    margin-top: 10px;
    font-weight: bold;
    color: var(--sa-primary-color);
    opacity: 0;
    animation: sa-fade-in 0.5s forwards 1s;
}

@keyframes sa-fill-bar {
    100% {
        width: 100%;
    }
}

@keyframes sa-fade-in {
    100% {
        opacity: 1;
    }
}

/* ===== WARISHAYDAY Success Animations - 20 Styles ===== */

/* 🌾 Base styles - ใช้ร่วมกันทุกแบบ */
.wh-success {
    width: 220px;
    height: 220px;
    background: linear-gradient(#e9f7ef, #ffffff);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Arial Rounded MT', sans-serif;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    transform: scale(var(--sa-size, 1));
}

.wh-icon {
    font-size: 72px;
    color: var(--sa-primary-color, #27AE60);
}

.wh-text {
    margin-top: 12px;
    font-size: 15px;
    color: #2D572C;
    font-weight: bold;
}

/* ===== 🌱 ANIM 01–05 | ฟาร์มเรียบหรู (Recommended) ===== */

/* 01: Hay Pop */
.wh-anim-01 .wh-icon {
    animation: hay-pop .6s ease;
}

@keyframes hay-pop {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

/* 02: Hay Bounce */
.wh-anim-02 .wh-icon {
    animation: hay-bounce .8s;
}

@keyframes hay-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

/* 03: Hay Glow */
.wh-anim-03 .wh-icon {
    animation: hay-glow .9s forwards;
}

@keyframes hay-glow {
    to {
        text-shadow: 0 0 14px #6FCF97;
    }
}

/* 04: Hay Spin */
.wh-anim-04 .wh-icon {
    animation: hay-spin .7s;
}

@keyframes hay-spin {
    from {
        transform: rotate(-180deg);
    }

    to {
        transform: rotate(0);
    }
}

/* 05: Hay Drop */
.wh-anim-05 .wh-icon {
    animation: hay-drop .6s;
}

@keyframes hay-drop {
    from {
        transform: translateY(-40px);
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== 🐔 ANIM 06–10 | Hay Day Friendly ===== */

/* 06: Chicken Hop */
.wh-anim-06 .wh-icon {
    animation: chicken-hop .7s;
}

@keyframes chicken-hop {
    50% {
        transform: translateY(-10px);
    }
}

/* 07: Cart Arrive */
.wh-anim-07 .wh-icon {
    animation: cart-arrive .6s;
}

@keyframes cart-arrive {
    from {
        transform: translateX(-40px);
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 08: Coin Ping */
.wh-anim-08 .wh-icon {
    animation: coin-ping .5s;
}

@keyframes coin-ping {
    50% {
        transform: scale(1.15);
    }
}

/* 09: Leaf Fade */
.wh-anim-09 .wh-icon {
    animation: leaf-fade .7s;
}

@keyframes leaf-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 10: Field Wave */
.wh-anim-10 .wh-icon {
    animation: field-wave .8s;
}

@keyframes field-wave {
    50% {
        transform: rotate(6deg);
    }
}

/* ===== 🌾 ANIM 11–15 | ระบบร้าน / น่าเชื่อถือ ===== */

/* 11: Stamp OK */
.wh-anim-11 .wh-icon {
    animation: stamp-ok .6s;
}

@keyframes stamp-ok {
    from {
        transform: scale(1.3);
    }

    to {
        transform: scale(1);
    }
}

/* 12: Ring Grow */
.wh-anim-12 .wh-icon {
    animation: ring-grow .7s;
}

@keyframes ring-grow {
    from {
        transform: scale(.6);
    }

    to {
        transform: scale(1);
    }
}

/* 13: Secure Pulse */
.wh-anim-13 .wh-icon {
    animation: secure-pulse .8s;
}

@keyframes secure-pulse {
    50% {
        box-shadow: 0 0 20px #27AE60;
    }
}

/* 14: Approve Flash */
.wh-anim-14 .wh-icon {
    animation: approve-flash .5s;
}

@keyframes approve-flash {
    50% {
        opacity: .6;
    }
}

/* 15: Check Draw */
.wh-anim-15 .wh-icon {
    animation: check-draw .8s;
}

@keyframes check-draw {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0);
    }
}

/* ===== 🌟 ANIM 16–20 | โมเดิร์น + UX ดี ===== */

/* 16: Micro Joy */
.wh-anim-16 .wh-icon {
    animation: micro-joy .4s;
}

@keyframes micro-joy {
    50% {
        transform: scale(1.05);
    }
}

/* 17: Fade Soft */
.wh-anim-17 .wh-icon {
    animation: fade-soft .6s;
}

@keyframes fade-soft {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 18: Pulse Green */
.wh-anim-18 .wh-icon {
    animation: pulse-green .9s;
}

@keyframes pulse-green {
    50% {
        transform: scale(1.2);
    }
}

/* 19: Slide Center */
.wh-anim-19 .wh-icon {
    animation: slide-center .6s;
}

@keyframes slide-center {
    from {
        transform: translateY(30px);
    }

    to {
        transform: translateY(0);
    }
}

/* 20: Final Success */
.wh-anim-20 .wh-icon {
    animation: final-success .8s;
}

@keyframes final-success {
    0% {
        transform: scale(.8);
        opacity: 0;
    }

    60% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}



/* 02: Fade Glow */
.anim-02 .checkmark {
    animation: fadeGlow .8s ease;
}

@keyframes fadeGlow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 12px var(--sa-primary-color, #2ECC71);
    }
}

/* 03: Rotate In */
.anim-03 .checkmark {
    animation: rotateIn .8s;
}

@keyframes rotateIn {
    from {
        transform: rotate(-180deg);
        opacity: 0;
    }

    to {
        transform: rotate(0);
        opacity: 1;
    }
}

/* 04: Drop */
.anim-04 .checkmark {
    animation: drop .6s ease;
}

@keyframes drop {
    0% {
        transform: translateY(-40px);
    }

    100% {
        transform: translateY(0);
    }
}

/* 05: Draw */
.anim-05 .checkmark {
    animation: draw .8s ease;
}

@keyframes draw {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* ===== Category B: ธีมอีคอมเมิร์ซ (Shop / Order) ===== */

/* 06: Pop */
.anim-06 {
    animation: pop .5s;
}

@keyframes pop {
    0% {
        transform: scale(.8);
    }

    100% {
        transform: scale(1);
    }
}

/* 07: Bounce */
.anim-07 .checkmark {
    animation: bounce .7s;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* 08: Slide Up */
.anim-08 .checkmark {
    animation: slideUp .6s;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 09: Pulse */
.anim-09 .checkmark {
    animation: pulse .8s;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* 10: Flip */
.anim-10 .checkmark {
    animation: flip .8s;
}

@keyframes flip {
    from {
        transform: rotateX(90deg);
    }

    to {
        transform: rotateX(0);
    }
}

/* ===== Category C: พรีเมียม / เทคโนโลยี ===== */

/* 11: Hologram */
.anim-11 .checkmark {
    animation: holo 1s;
}

@keyframes holo {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 20px cyan;
    }
}

/* 12: Neon */
.anim-12 .checkmark {
    animation: neon .8s forwards;
}

@keyframes neon {
    to {
        text-shadow: 0 0 15px #00ff9d;
    }
}

/* 13: Lock */
.anim-13 .checkmark {
    animation: lock .6s;
}

@keyframes lock {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

/* 14: Circuit */
.anim-14 .checkmark {
    animation: circuit .7s;
}

@keyframes circuit {
    0% {
        letter-spacing: 10px;
    }

    100% {
        letter-spacing: 0;
    }
}

/* 15: Ring */
.anim-15 .checkmark {
    animation: ring .9s;
}

@keyframes ring {
    0% {
        transform: scale(.5);
    }

    100% {
        transform: scale(1);
    }
}

/* ===== Category D: เรียบง่าย ดูแพง โหลดเร็ว ===== */

/* 16: Line */
.anim-16 .checkmark {
    animation: line .6s;
}

@keyframes line {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 17: Micro */
.anim-17 .checkmark {
    animation: micro .4s;
}

@keyframes micro {
    50% {
        transform: scale(1.05);
    }
}

/* 18: Soft Glow */
.anim-18 .checkmark {
    animation: softGlow .7s forwards;
}

@keyframes softGlow {
    to {
        text-shadow: 0 0 8px var(--sa-primary-color, #2ECC71);
    }
}

/* 19: Expand */
.anim-19 .checkmark {
    animation: expand .6s;
}

@keyframes expand {
    from {
        transform: scale(.6);
    }

    to {
        transform: scale(1);
    }
}

/* 20: Tick */
.anim-20 .checkmark {
    animation: tick .5s;
}

@keyframes tick {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ===== Category E: ความมั่นใจ / ความสำเร็จ ===== */

/* 21: Trophy */
.anim-21 .checkmark {
    animation: trophy .7s;
}

@keyframes trophy {
    50% {
        transform: translateY(-10px);
    }
}

/* 22: Star */
.anim-22 .checkmark {
    animation: star .8s;
}

@keyframes star {
    from {
        transform: rotate(180deg);
    }

    to {
        transform: rotate(0);
    }
}

/* 23: Flag */
.anim-23 .checkmark {
    animation: flag .6s;
}

@keyframes flag {
    50% {
        transform: skewX(10deg);
    }
}

/* 24: Medal */
.anim-24 .checkmark {
    animation: medal .8s;
}

@keyframes medal {
    from {
        transform: scale(.7);
    }

    to {
        transform: scale(1);
    }
}

/* 25: Crown */
.anim-25 .checkmark {
    animation: crown .6s;
}

@keyframes crown {
    50% {
        transform: translateY(-8px);
    }
}

/* ===== Category F: โมเดิร์น / อนิเมชันต่อเนื่อง ===== */

/* 26: Particle */
.anim-26 .checkmark {
    animation: particle .8s;
}

@keyframes particle {
    from {
        filter: blur(6px);
    }

    to {
        filter: none;
    }
}

/* 27: Orbit */
.anim-27 .checkmark {
    animation: orbit .9s;
}

@keyframes orbit {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0);
    }
}

/* 28: Swipe */
.anim-28 .checkmark {
    animation: swipe .6s;
}

@keyframes swipe {
    from {
        transform: translateX(-30px);
    }

    to {
        transform: translateX(0);
    }
}

/* 29: Progress */
.anim-29 .checkmark {
    animation: progress .7s;
}

@keyframes progress {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}

/* 30: Pulse 2 */
.anim-30 .checkmark {
    animation: pulse2 .9s;
}

@keyframes pulse2 {
    50% {
        transform: scale(1.2);
    }
}



.sa-floating-seal .sa-check {
    color: var(--sa-secondary-color);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    animation: sa-check-appear 0.5s ease-out forwards;
}

@keyframes sa-seal-rotate {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

@keyframes sa-seal-float {

    0%,
    100% {
        transform: translateY(0) rotateY(0deg);
    }

    50% {
        transform: translateY(-10px) rotateY(180deg);
    }
}

@keyframes sa-check-appear {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* A2: Glass Checkmark */
.sa-glass-check {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.sa-glass-check .sa-check {
    animation: sa-glass-fade 0.8s ease-out forwards;
    text-shadow: 0 0 20px var(--sa-primary-color);
}

.sa-glass-check .sa-light-sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: sa-light-sweep 1.5s ease-in-out infinite;
}

@keyframes sa-glass-fade {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sa-light-sweep {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

/* A3: Shield Confirmation */
.sa-shield {
    flex-direction: column;
}

.sa-shield .sa-shield-body {
    font-size: 70px;
    animation: sa-shield-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}

.sa-shield .sa-check {
    position: absolute;
    font-size: 35px;
    color: var(--sa-secondary-color);
    animation: sa-check-stamp 0.4s ease-out 0.5s forwards;
    opacity: 0;
}

@keyframes sa-shield-pop {
    0% {
        transform: scale(0) translateY(50px);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes sa-check-stamp {
    0% {
        transform: scale(2);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* A4: Stamp Approved */
.sa-stamp-approved .sa-stamp-body {
    padding: 15px 25px;
    border: 4px solid var(--sa-primary-color);
    color: var(--sa-primary-color);
    font-weight: bold;
    font-size: 18px;
    border-radius: 8px;
    transform: scale(3) rotate(15deg);
    opacity: 0;
    animation: sa-stamp-press 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.sa-stamp-approved .sa-dust {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(200, 200, 200, 0.3) 0%, transparent 70%);
    animation: sa-dust-puff 0.5s ease-out 0.3s forwards;
    opacity: 0;
}

@keyframes sa-stamp-press {
    0% {
        transform: scale(3) rotate(15deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(-5deg);
        opacity: 1;
    }
}

@keyframes sa-dust-puff {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* A5: Minimal Ring Check */
.sa-minimal-ring .sa-ring {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 3px solid var(--sa-primary-color);
    border-radius: 50%;
    animation: sa-ring-spin 1.5s ease-in-out infinite;
}

.sa-minimal-ring .sa-check {
    font-size: 40px;
    animation: sa-check-draw 0.8s ease-out 0.3s forwards;
    opacity: 0;
}

@keyframes sa-ring-spin {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: rotate(180deg) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.5;
    }
}

@keyframes sa-check-draw {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Category B: ธีมอีคอมเมิร์ซ (Shop / Order) ===== */

/* B1: Box Closing */
.sa-box-closing .sa-box {
    width: 70px;
    height: 50px;
    position: relative;
    perspective: 200px;
}

.sa-box-closing .sa-box-lid {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 80px;
    height: 15px;
    background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
    transform-origin: bottom;
    animation: sa-lid-close 0.6s ease-out forwards;
    border-radius: 3px;
}

.sa-box-closing .sa-box-body {
    width: 70px;
    height: 50px;
    background: linear-gradient(135deg, #D2691E 0%, #CD853F 100%);
    border-radius: 3px;
}

.sa-box-closing .sa-check {
    position: absolute;
    top: -30px;
    font-size: 35px;
    animation: sa-check-float-up 0.5s ease-out 0.6s forwards;
    opacity: 0;
}

@keyframes sa-lid-close {
    0% {
        transform: rotateX(-90deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

@keyframes sa-check-float-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* B2: Cart Success */
.sa-cart-success .sa-cart {
    font-size: 60px;
    animation: sa-cart-slide 0.8s ease-out forwards;
}

.sa-cart-success .sa-check {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    background: var(--sa-primary-color);
    border-radius: 50%;
    padding: 5px;
    color: white;
    animation: sa-badge-pop 0.4s ease-out 0.5s forwards;
    opacity: 0;
    transform: scale(0);
}

@keyframes sa-cart-slide {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes sa-badge-pop {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* B3: Receipt Confirm */
.sa-receipt {
    flex-direction: column;
}

.sa-receipt .sa-receipt-body {
    font-size: 60px;
    animation: sa-receipt-slide 0.6s ease-out forwards;
}

.sa-receipt .sa-check {
    position: absolute;
    bottom: 15px;
    font-size: 25px;
    color: var(--sa-primary-color);
    animation: sa-stamp-appear 0.4s ease-out 0.5s forwards;
    opacity: 0;
}

@keyframes sa-receipt-slide {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes sa-stamp-appear {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* B4: Payment Pulse */
.sa-payment-pulse .sa-pulse-ring {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 3px solid var(--sa-primary-color);
    border-radius: 50%;
    opacity: 0;
}

.sa-payment-pulse .sa-pulse-ring.r1 {
    animation: sa-pulse-wave 1.5s ease-out infinite;
}

.sa-payment-pulse .sa-pulse-ring.r2 {
    animation: sa-pulse-wave 1.5s ease-out 0.5s infinite;
}

.sa-payment-pulse .sa-check {
    font-size: 45px;
    animation: sa-check-pulse 0.6s ease-out forwards;
}

@keyframes sa-pulse-wave {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes sa-check-pulse {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* B5: Package Scan */
.sa-package-scan {
    flex-direction: column;
}

.sa-package-scan .sa-package {
    font-size: 60px;
}

.sa-package-scan .sa-laser {
    position: absolute;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ff0000, #ff0000, transparent);
    animation: sa-laser-scan 1s ease-in-out infinite;
}

.sa-package-scan .sa-check {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 25px;
    color: var(--sa-primary-color);
    animation: sa-check-blink 0.3s ease-out 0.8s forwards;
    opacity: 0;
}

@keyframes sa-laser-scan {
    0% {
        top: 10%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        top: 90%;
        opacity: 0;
    }
}

@keyframes sa-check-blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ===== Category C: พรีเมียม / เทคโนโลยี ===== */

/* C1: Hologram Check */
.sa-hologram .sa-check {
    font-size: 60px;
    background: linear-gradient(45deg, #00ffff, #ff00ff, #00ff00, #ffff00);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: sa-holo-gradient 2s ease infinite;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
}

.sa-hologram .sa-scan-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, cyan, transparent);
    animation: sa-scan-move 1.5s ease-in-out infinite;
}

@keyframes sa-holo-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes sa-scan-move {
    0% {
        left: 10%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        left: 90%;
        opacity: 0;
    }
}

/* C2: Neon Confirm */
.sa-neon .sa-check {
    font-size: 70px;
    color: var(--sa-primary-color);
    text-shadow:
        0 0 5px var(--sa-primary-color),
        0 0 10px var(--sa-primary-color),
        0 0 20px var(--sa-primary-color),
        0 0 40px var(--sa-primary-color);
    animation: sa-neon-glow 1.5s ease-in-out infinite alternate;
}

@keyframes sa-neon-glow {
    0% {
        text-shadow:
            0 0 5px var(--sa-primary-color),
            0 0 10px var(--sa-primary-color);
    }

    100% {
        text-shadow:
            0 0 10px var(--sa-primary-color),
            0 0 20px var(--sa-primary-color),
            0 0 40px var(--sa-primary-color),
            0 0 80px var(--sa-primary-color);
    }
}

/* C3: Data Lock */
.sa-data-lock .sa-lock {
    font-size: 60px;
    animation: sa-lock-shake 0.5s ease-out forwards;
}

.sa-data-lock .sa-check {
    position: absolute;
    font-size: 35px;
    color: var(--sa-primary-color);
    animation: sa-lock-break 0.4s ease-out 0.5s forwards;
    opacity: 0;
}

@keyframes sa-lock-shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }
}

@keyframes sa-lock-break {
    0% {
        opacity: 0;
        transform: scale(2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* C4: Circuit Approval */
.sa-circuit .sa-circuit-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(90deg, transparent 48%, var(--sa-primary-color) 49%, var(--sa-primary-color) 51%, transparent 52%),
        linear-gradient(0deg, transparent 48%, var(--sa-primary-color) 49%, var(--sa-primary-color) 51%, transparent 52%);
    opacity: 0.3;
    animation: sa-circuit-pulse 1s ease-in-out infinite;
}

.sa-circuit .sa-check {
    font-size: 50px;
    animation: sa-circuit-assemble 1s ease-out forwards;
}

@keyframes sa-circuit-pulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes sa-circuit-assemble {
    0% {
        opacity: 0;
        transform: scale(0);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* C5: Digital Seal */
.sa-digital-seal .sa-digi-ring {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 3px dashed var(--sa-primary-color);
    border-radius: 50%;
    animation: sa-digi-spin 3s linear infinite;
}

.sa-digital-seal .sa-text {
    font-size: 16px;
    font-weight: bold;
    color: var(--sa-primary-color);
    letter-spacing: 2px;
    animation: sa-text-appear 0.5s ease-out 0.3s forwards;
    opacity: 0;
}

@keyframes sa-digi-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes sa-text-appear {
    0% {
        opacity: 0;
        letter-spacing: 10px;
    }

    100% {
        opacity: 1;
        letter-spacing: 2px;
    }
}

/* ===== Category D: เรียบง่าย ดูแพง โหลดเร็ว ===== */

/* D1: Line Draw Check */
.sa-line-draw svg {
    width: 80px;
    height: 80px;
}

.sa-line-draw .sa-checkmark {
    stroke: var(--sa-primary-color);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: sa-line-draw-anim 0.8s ease-out forwards;
}

@keyframes sa-line-draw-anim {
    to {
        stroke-dashoffset: 0;
    }
}

/* D2: Soft Bounce */
.sa-soft-bounce .sa-check {
    font-size: 70px;
    animation: sa-soft-bounce-anim 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes sa-soft-bounce-anim {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* D3: Fade & Glow */
.sa-fade-glow .sa-check {
    font-size: 70px;
    opacity: 0;
    animation: sa-fade-glow-anim 1s ease-out forwards;
}

@keyframes sa-fade-glow-anim {
    0% {
        opacity: 0;
        filter: blur(5px);
    }

    50% {
        opacity: 1;
        filter: blur(0);
        text-shadow: 0 0 30px var(--sa-primary-color);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        text-shadow: 0 0 10px var(--sa-primary-color);
    }
}

/* D4: Circle Expand */
.sa-circle-expand .sa-circle {
    position: absolute;
    width: 0;
    height: 0;
    background: var(--sa-primary-color);
    border-radius: 50%;
    opacity: 0.3;
    animation: sa-circle-expand-anim 0.6s ease-out forwards;
}

.sa-circle-expand .sa-check {
    font-size: 50px;
    color: var(--sa-secondary-color);
    animation: sa-check-appear-d4 0.4s ease-out 0.3s forwards;
    opacity: 0;
}

@keyframes sa-circle-expand-anim {
    to {
        width: 100px;
        height: 100px;
    }
}

@keyframes sa-check-appear-d4 {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* D5: Micro Motion */
.sa-micro-motion .sa-check {
    font-size: 60px;
    animation: sa-micro-motion-anim 0.4s ease-out forwards;
}

@keyframes sa-micro-motion-anim {
    0% {
        transform: translateY(-5px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== Category E: ความมั่นใจ / ความสำเร็จ ===== */

/* E1: Trophy Check */
.sa-trophy .sa-trophy-icon {
    font-size: 60px;
    animation: sa-trophy-bounce 0.6s ease-out forwards;
}

.sa-trophy .sa-check {
    position: absolute;
    bottom: 25px;
    font-size: 25px;
    color: var(--sa-primary-color);
    animation: sa-check-appear 0.4s ease-out 0.4s forwards;
    opacity: 0;
}

@keyframes sa-trophy-bounce {
    0% {
        transform: translateY(30px) scale(0);
    }

    60% {
        transform: translateY(-10px) scale(1.1);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

/* E2: Star Approval */
.sa-star .sa-star-icon {
    font-size: 70px;
    animation: sa-star-spin 0.8s ease-out forwards;
}

.sa-star .sa-check {
    position: absolute;
    font-size: 30px;
    color: var(--sa-primary-color);
    animation: sa-check-overlay 0.4s ease-out 0.5s forwards;
    opacity: 0;
}

@keyframes sa-star-spin {
    0% {
        transform: rotate(0deg) scale(0);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes sa-check-overlay {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* E3: Flag Success */
.sa-flag .sa-flag-icon {
    font-size: 60px;
    color: var(--sa-primary-color);
    animation: sa-flag-plant 0.6s ease-out forwards;
    transform-origin: bottom center;
}

@keyframes sa-flag-plant {
    0% {
        transform: translateY(50px) scale(0);
    }

    60% {
        transform: translateY(-10px) scale(1.1);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

/* E4: Medal Confirm */
.sa-medal .sa-medal-icon {
    font-size: 60px;
    animation: sa-medal-swing 1s ease-out forwards;
    transform-origin: top center;
}

.sa-medal .sa-check {
    position: absolute;
    bottom: 20px;
    font-size: 25px;
    color: var(--sa-primary-color);
    animation: sa-check-appear 0.3s ease-out 0.7s forwards;
    opacity: 0;
}

@keyframes sa-medal-swing {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 0;
    }

    30% {
        transform: translateY(0) rotate(15deg);
        opacity: 1;
    }

    60% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* E5: Crown Check */
.sa-crown .sa-crown-icon {
    font-size: 60px;
    animation: sa-crown-drop 0.6s ease-out forwards;
}

.sa-crown .sa-check {
    position: absolute;
    bottom: 15px;
    font-size: 25px;
    color: var(--sa-primary-color);
    animation: sa-check-appear 0.3s ease-out 0.5s forwards;
    opacity: 0;
}

@keyframes sa-crown-drop {
    0% {
        transform: translateY(-50px) scale(1.3);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ===== Category F: โมเดิร์น / อนิเมชันต่อเนื่อง ===== */

/* F1: Particle Assemble */
.sa-particle .sa-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.sa-particle .sa-particles span {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--sa-primary-color);
    border-radius: 50%;
    animation: sa-particle-assemble 0.8s ease-out forwards;
}

.sa-particle .sa-particles span:nth-child(1) {
    top: 0;
    left: 50%;
    animation-delay: 0s;
}

.sa-particle .sa-particles span:nth-child(2) {
    top: 25%;
    right: 0;
    animation-delay: 0.1s;
}

.sa-particle .sa-particles span:nth-child(3) {
    bottom: 25%;
    right: 0;
    animation-delay: 0.2s;
}

.sa-particle .sa-particles span:nth-child(4) {
    bottom: 0;
    left: 50%;
    animation-delay: 0.3s;
}

.sa-particle .sa-particles span:nth-child(5) {
    bottom: 25%;
    left: 0;
    animation-delay: 0.4s;
}

.sa-particle .sa-particles span:nth-child(6) {
    top: 25%;
    left: 0;
    animation-delay: 0.5s;
}

.sa-particle .sa-check {
    font-size: 50px;
    animation: sa-check-materialize 0.4s ease-out 0.8s forwards;
    opacity: 0;
}

@keyframes sa-particle-assemble {
    0% {
        opacity: 1;
    }

    100% {
        transform: translate(calc(50% - 50px), calc(50% - 50px));
        opacity: 0;
    }
}

@keyframes sa-check-materialize {
    0% {
        opacity: 0;
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

/* F2: Orbit Check */
.sa-orbit .sa-orbit-ring {
    position: absolute;
    border: 2px solid var(--sa-primary-color);
    border-radius: 50%;
    opacity: 0.5;
}

.sa-orbit .sa-orbit-ring.o1 {
    width: 80px;
    height: 80px;
    animation: sa-orbit-spin1 2s linear infinite;
}

.sa-orbit .sa-orbit-ring.o2 {
    width: 100px;
    height: 100px;
    animation: sa-orbit-spin2 3s linear infinite reverse;
}

.sa-orbit .sa-check {
    font-size: 40px;
    animation: sa-check-appear 0.5s ease-out forwards;
}

@keyframes sa-orbit-spin1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes sa-orbit-spin2 {
    from {
        transform: rotate(0deg) rotateX(60deg);
    }

    to {
        transform: rotate(360deg) rotateX(60deg);
    }
}

/* F3: Swipe Confirm */
.sa-swipe .sa-swipe-bar {
    position: absolute;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--sa-primary-color), transparent);
    animation: sa-swipe-across 0.6s ease-out forwards;
}

.sa-swipe .sa-check {
    font-size: 60px;
    animation: sa-check-reveal 0.4s ease-out 0.5s forwards;
    opacity: 0;
}

@keyframes sa-swipe-across {
    0% {
        left: 0;
        width: 0;
    }

    50% {
        width: 100%;
    }

    100% {
        left: 100%;
        width: 0;
    }
}

@keyframes sa-check-reveal {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* F4: Progress → Check */
.sa-progress-check {
    flex-direction: column;
    gap: 15px;
}

.sa-progress-check .sa-progress-bar {
    width: 100px;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.sa-progress-check .sa-progress-fill {
    width: 0;
    height: 100%;
    background: var(--sa-primary-color);
    animation: sa-progress-fill 1s ease-out forwards;
}

.sa-progress-check .sa-check {
    font-size: 50px;
    animation: sa-check-transform 0.4s ease-out 1s forwards;
    opacity: 0;
}

@keyframes sa-progress-fill {
    to {
        width: 100%;
    }
}

@keyframes sa-check-transform {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* F5: Pulse Success */
.sa-pulse-success .sa-pulse {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid var(--sa-primary-color);
    border-radius: 50%;
    opacity: 0;
}

.sa-pulse-success .sa-pulse.p1 {
    animation: sa-pulse-expand 1s ease-out infinite;
}

.sa-pulse-success .sa-pulse.p2 {
    animation: sa-pulse-expand 1s ease-out 0.5s infinite;
}

.sa-pulse-success .sa-check {
    font-size: 50px;
    animation: sa-check-stable 0.5s ease-out forwards;
}

@keyframes sa-pulse-expand {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes sa-check-stable {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

#admin-login-view {
    max-width: 400px;
    margin: 50px auto;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.admin-header h2 {
    margin-bottom: 0;
    flex-grow: 1;
}

.admin-main-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-main-controls .toggle-switch-container {
    margin-bottom: 0;
}

.admin-main-controls .btn {
    width: auto;
    flex-shrink: 0;
}

.admin-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.admin-menu .btn {
    width: 100%;
    padding: 12px 10px;
    font-size: var(--main-menu-font-size);
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid transparent;
    background-color: var(--surface-color);
    color: var(--text-color);
    box-shadow: var(--shadow);
    position: relative;
    padding-right: 25px;
}

.admin-menu .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--hover-shadow);
    border-color: var(--primary-color);
}

.admin-menu .btn.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.admin-menu .btn.reorder-btn {
    background-color: var(--danger-color);
    color: white;
    width: auto;
    padding: 10px 20px;
}

body.dark-mode .admin-menu .btn {
    background-color: var(--surface-color);
    color: var(--text-color);
}

body.dark-mode .admin-menu .btn.active {
    background-color: var(--primary-color);
    color: white;
}

.admin-section {
    margin-bottom: 30px;
}

.admin-section h2 {
    text-align: left;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

.admin-section h3 {
    text-align: left;
}

.admin-sub-content {
    display: none;
}

.admin-sub-content.active {
    display: block;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.range-value-display {
    font-weight: normal;
    color: #6c757d;
    margin-left: 8px;
    font-size: 0.9em;
}

body.dark-mode .range-value-display {
    color: #aaa;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: #ddd;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
    border-radius: 5px;
}

input[type="range"]:hover {
    opacity: 1;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    cursor: pointer;
    border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    cursor: pointer;
    border-radius: 50%;
}


.icon-preview,
.bg-preview {
    display: block;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border-color);
}

.bg-preview {
    width: 150px;
    height: 80px;
}

.logo-preview-container {
    width: 150px;
    height: 150px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 10px;
}

#logo-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.toggle-switch-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    flex-shrink: 0;
}

.toggle-switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--primary-color);
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.floating-buttons-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 999;
    gap: 8px;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

.floating-buttons-container.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    pointer-events: none;
}

/* ===== Premium Modern Floating Buttons ===== */
#admin-gear-icon,
#back-to-admin-btn,
#theme-toggle-btn,
#lang-toggle-btn {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 1rem;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#admin-gear-icon:hover,
#back-to-admin-btn:hover,
#theme-toggle-btn:hover,
#lang-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.05);
    color: var(--primary-color);
}

#admin-gear-icon {
    display: none;
}

#admin-gear-icon svg,
#back-to-admin-btn svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
}

#admin-gear-icon:hover svg,
#back-to-admin-btn:hover svg {
    transform: scale(1.1);
}

#admin-gear-icon:active,
#back-to-admin-btn:active,
#theme-toggle-btn:active,
#lang-toggle-btn:active {
    transform: scale(0.95) translateY(0);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#back-to-admin-btn {
    display: none;
}

#theme-toggle-btn {
    font-size: 1rem;
    color: #f59e0b;
    display: none;
}

#theme-toggle-btn:hover {
    color: #d97706;
}

body.dark-mode #theme-toggle-btn {
    color: #fbbf24;
}

body.dark-mode #theme-toggle-btn:hover {
    color: #fcd34d;
}

#lang-toggle-btn svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
}

/* Dark Mode Floating Buttons */
body.dark-mode #admin-gear-icon,
body.dark-mode #back-to-admin-btn,
body.dark-mode #theme-toggle-btn,
body.dark-mode #lang-toggle-btn {
    background: rgba(30, 30, 30, 0.02);
    border-color: rgba(255, 255, 255, 0.04);
    color: var(--primary-color);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.08);
}

body.dark-mode #admin-gear-icon:hover,
body.dark-mode #back-to-admin-btn:hover,
body.dark-mode #theme-toggle-btn:hover,
body.dark-mode #lang-toggle-btn:hover {
    background: rgba(50, 50, 50, 0.1);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===== START: Back to Top Button ===== */
#back-to-top-btn {
    position: fixed;
    bottom: 200px;
    /* Position above order bar */
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.25);
    color: #666;
    cursor: pointer;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 0 15px rgba(255, 255, 255, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#back-to-top-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
    pointer-events: none;
}

#back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    animation: pulse-glow-soft 2.5s ease-in-out infinite;
}

@keyframes pulse-glow-soft {

    0%,
    100% {
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.08),
            0 0 15px rgba(255, 255, 255, 0.3),
            inset 0 1px 2px rgba(255, 255, 255, 0.5);
    }

    50% {
        box-shadow:
            0 6px 25px rgba(0, 0, 0, 0.12),
            0 0 25px rgba(255, 255, 255, 0.5),
            inset 0 1px 2px rgba(255, 255, 255, 0.6);
    }
}

#back-to-top-btn:hover {
    background: rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.15),
        0 0 30px rgba(255, 255, 255, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.7);
    transform: translateY(-5px) scale(1.1);
    animation: none;
}

#back-to-top-btn:active {
    transform: translateY(-2px) scale(0.98);
    background: rgba(255, 255, 255, 0.35);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.1),
        0 0 15px rgba(255, 255, 255, 0.4);
}

#back-to-top-btn svg {
    width: 20px;
    height: 20px;
    stroke: #555;
    stroke-width: 2.5;
    transition: transform 0.3s ease, stroke 0.3s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

#back-to-top-btn:hover svg {
    stroke: #333;
    transform: translateY(-3px);
    animation: bounce-up 0.6s ease infinite;
}

@keyframes bounce-up {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Dark Mode for Back to Top Button */
body.dark-mode #back-to-top-btn {
    background: rgba(60, 60, 60, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(255, 255, 255, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

body.dark-mode #back-to-top-btn svg {
    stroke: #aaa;
}

body.dark-mode #back-to-top-btn:hover svg {
    stroke: #fff;
}

body.dark-mode #back-to-top-btn.visible {
    animation: pulse-glow-dark 2.5s ease-in-out infinite;
}

@keyframes pulse-glow-dark {

    0%,
    100% {
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.2),
            0 0 15px rgba(255, 255, 255, 0.1),
            inset 0 1px 2px rgba(255, 255, 255, 0.1);
    }

    50% {
        box-shadow:
            0 6px 25px rgba(0, 0, 0, 0.3),
            0 0 25px rgba(255, 255, 255, 0.15),
            inset 0 1px 2px rgba(255, 255, 255, 0.15);
    }
}

body.dark-mode #back-to-top-btn:hover {
    background: rgba(80, 80, 80, 0.5);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(255, 255, 255, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
    animation: none;
}



/* Responsive adjustments */
@media (max-width: 768px) {
    #back-to-top-btn {
        bottom: 180px;
        /* Slightly higher on mobile due to order bar */
        right: 15px;
        width: 45px;
        height: 45px;
    }

    #back-to-top-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* ===== END: Back to Top Button ===== */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.stat-card {
    background-color: var(--surface-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 20px;
    text-align: center;
}

.stat-card h3 {
    font-size: 1.2rem;
    color: #6c757d;
    margin-bottom: 5px;
}

.stat-card .value {
    font-size: 2rem;
    font-weight: 600;
}

#monthly-profit,
#daily-orders,
#monthly-orders,
#yearly-sales {
    font-size: 2.5rem;
    font-weight: 700;
}

.chart-container {
    height: 300px;
    width: 100%;
}

.top-selling-list {
    list-style: none;
    padding: 0;
    text-align: left;
}

.top-selling-list li {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-selling-list li:last-child {
    border-bottom: none;
}

.top-selling-list li span:first-child {
    font-weight: 600;
}

#product-list-container {
    position: relative;
}

.customer-reset-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.03);
}

.customer-reset-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.05);
}

.customer-price-tag-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.03);
}

.customer-price-tag-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Dark Mode for Product Buttons */
body.dark-mode .customer-reset-btn,
body.dark-mode .customer-price-tag-btn {
    background: rgba(30, 30, 30, 0.02);
    border-color: rgba(255, 255, 255, 0.04);
    color: var(--primary-color);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.08);
}

body.dark-mode .customer-reset-btn:hover,
body.dark-mode .customer-price-tag-btn:hover {
    background: rgba(50, 50, 50, 0.1);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-view-price {
    background-color: var(--info-color);
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
}

.btn-view-price:hover {
    background-color: #138496;
}

.reorder-list {
    list-style-type: none;
    padding: 0;
}

.reorder-list li {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    cursor: grab;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s, border-color 0.3s;
}

.reorder-list li.dragging {
    opacity: 0.5;
    border-style: dashed;
}

.effect-controls {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    align-items: center;
}

.effect-controls label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.effect-controls input[type="range"] {
    margin: 0;
}

.effect-control-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.low-stock-list {
    list-style: none;
    padding: 0;
}

.low-stock-list li {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blinking-warning::before {
    content: '🔴';
    margin-right: 8px;
    animation: blink 1.2s linear infinite;
    text-shadow: 0 0 8px red;
}

.blinking-warning {
    color: var(--danger-color);
    font-weight: bold;
}

.view-more-link {
    display: block;
    text-align: right;
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: underline;
}

.view-more-link:hover {
    color: #218838;
}

#top-items-controls .btn.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

#top-items-controls .btn {
    background-color: #e9ecef;
    color: var(--text-color);
}

.radio-group-tabs {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.radio-group-tabs label {
    flex: 1;
    text-align: center;
}

.radio-group-tabs input[type="radio"] {
    display: none;
}

.radio-group-tabs span {
    display: block;
    padding: 10px;
    cursor: pointer;
    background-color: #e9ecef;
    color: #495057;
    transition: background-color 0.3s;
}

.radio-group-tabs input:checked+span {
    background-color: var(--primary-color);
    color: white;
    font-weight: 500;
}

.frame-previews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    padding: 5px;
}

.frame-preview-item {
    width: 100%;
    height: 50px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--surface-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.frame-preview-item.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px var(--primary-color);
}

.marquee-content-wrapper.style-1 {
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid #fff;
}

.marquee-content-wrapper.style-2 {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border: none;
}

.marquee-content-wrapper.style-3 {
    background-color: #fff;
    border: 3px dashed var(--primary-color);
}

.marquee-content-wrapper.style-4 {
    background-color: rgba(20, 20, 20, 0.7);
    border-radius: 50px;
    border: 1px solid var(--secondary-color);
}

.marquee-content-wrapper.style-5 {
    background-color: transparent;
    border: 2px solid transparent;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
}

.marquee-content-wrapper.style-6 {
    background-color: #333;
    box-shadow: 0 0 10px #fff, inset 0 0 5px #fff;
    border: none;
}

.marquee-content-wrapper.style-7 {
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 10px, transparent 10px, transparent 20px);
    background-color: var(--danger-color);
}

.marquee-content-wrapper.style-8 {
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 0;
    box-shadow: 5px 5px 0 #333;
}

.marquee-content-wrapper.style-9 {
    background-color: var(--info-color);
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}

.marquee-content-wrapper.style-10 {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: #4a0e63;
}

.marquee-content-wrapper.style-11 {
    background-color: #f0e68c;
    border: 5px double #8b4513;
}

.marquee-content-wrapper.style-12 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.2'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
}

.marquee-content-wrapper.style-13 {
    background: #333;
    border: 2px solid;
    border-image-source: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    border-image-slice: 1;
    animation: spin-border 4s linear infinite;
}

@keyframes spin-border {
    to {
        --angle: 360deg;
    }
}

@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.marquee-content-wrapper.style-14 {
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
}

.marquee-content-wrapper.style-15 {
    background-color: #111;
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 5px var(--primary-color), inset 0 0 3px var(--primary-color);
}

.marquee-content-wrapper.style-16 {
    border: 4px ridge #c0c0c0;
    background: #e0e0e0;
}

.marquee-content-wrapper.style-17 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.marquee-content-wrapper.style-18 {
    border: 2px solid #333;
    padding: 10px;
    position: relative;
}

.marquee-content-wrapper.style-18::before {
    content: '★';
    position: absolute;
    top: -10px;
    left: -10px;
    color: gold;
}

.marquee-content-wrapper.style-18::after {
    content: '★';
    position: absolute;
    bottom: -10px;
    right: -10px;
    color: gold;
}

.marquee-content-wrapper.style-19 {
    background-color: #ffc0cb;
    border: 2px dotted deeppink;
}

.marquee-content-wrapper.style-20 {
    background-color: #222;
    border-left: 5px solid var(--secondary-color);
    border-right: 5px solid var(--secondary-color);
}

/* ===== NEW MESSAGE FRAME STYLES 21-50 ===== */
.marquee-content-wrapper.style-21 {
    background: linear-gradient(90deg, #ff6b6b, #feca57);
    border: none;
    border-radius: 25px;
}

.marquee-content-wrapper.style-22 {
    background-color: #1a1a2e;
    border: 2px solid #16213e;
    box-shadow: 0 0 10px rgba(0, 150, 255, 0.5);
}

.marquee-content-wrapper.style-23 {
    background-color: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
}

.marquee-content-wrapper.style-24 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.marquee-content-wrapper.style-25 {
    background-color: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
}

.marquee-content-wrapper.style-26 {
    background-color: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 10px;
}

.marquee-content-wrapper.style-27 {
    background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
    border: none;
}

.marquee-content-wrapper.style-28 {
    background-color: #d4edda;
    border: 2px solid #28a745;
    border-radius: 8px;
}

.marquee-content-wrapper.style-29 {
    background-color: #2d3436;
    border-top: 4px solid #e84393;
    border-bottom: 4px solid #e84393;
}

.marquee-content-wrapper.style-30 {
    background: linear-gradient(to right, #fc5c7d, #6a82fb);
    border-radius: 30px;
}

.marquee-content-wrapper.style-31 {
    background-color: #fff;
    border: 3px solid #333;
    box-shadow: 8px 8px 0 #333;
}

.marquee-content-wrapper.style-32 {
    background-color: #1e3c72;
    border: none;
    border-radius: 12px;
}

.marquee-content-wrapper.style-33 {
    background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
    border: none;
}

.marquee-content-wrapper.style-34 {
    background-color: #f5f6fa;
    border-left: 6px solid var(--primary-color);
}

.marquee-content-wrapper.style-35 {
    background-color: #2f3640;
    border: 2px solid #f5f6fa;
    border-radius: 20px;
}

.marquee-content-wrapper.style-36 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-radius: 50px;
}

.marquee-content-wrapper.style-37 {
    background-color: #e8f4f8;
    border: 2px dotted #17a2b8;
    border-radius: 12px;
}

.marquee-content-wrapper.style-38 {
    background-color: #353535;
    border: 1px solid #555;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.marquee-content-wrapper.style-39 {
    background: linear-gradient(to right, #8e2de2, #4a00e0);
    border: none;
    border-radius: 8px;
}

.marquee-content-wrapper.style-40 {
    background-color: #f8d7da;
    border: 2px solid #dc3545;
    border-radius: 8px;
}

.marquee-content-wrapper.style-41 {
    background-color: #343a40;
    border-top: 3px solid #ffc107;
}

.marquee-content-wrapper.style-42 {
    background: linear-gradient(to right, #56ab2f, #a8e063);
    border: none;
    border-radius: 10px;
}

.marquee-content-wrapper.style-43 {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.marquee-content-wrapper.style-44 {
    background-color: #2c2c54;
    border: 2px solid #706fd3;
    border-radius: 15px;
}

.marquee-content-wrapper.style-45 {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    border: none;
    border-radius: 20px;
}

.marquee-content-wrapper.style-46 {
    background-color: #1b1b1b;
    border: 2px solid #ffcc00;
}

.marquee-content-wrapper.style-47 {
    background-color: #e3f2fd;
    border: 2px solid #2196f3;
    border-radius: 12px;
}

.marquee-content-wrapper.style-48 {
    background: linear-gradient(to right, #ff416c, #ff4b2b);
    border: none;
    border-radius: 5px;
}

.marquee-content-wrapper.style-49 {
    background-color: #f5f5f5;
    border: 3px double #aaa;
    border-radius: 8px;
}

.marquee-content-wrapper.style-50 {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3);
}


/* Message Frame Preview Container */
.message-frame-preview-container {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.message-frame-preview-container #message-frame-live-preview {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 25px;
    transition: all 0.3s ease;
}

/* ===== Order Bar Settings Modern UI ===== */
.order-bar-settings-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-header-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 25px;
    border-radius: 16px;
    text-align: center;
}

.settings-header-card h2 {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
}

.settings-description {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.order-bar-preview-section {
    padding: 20px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.section-icon {
    font-size: 1.3rem;
}

.section-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

#order-bar-preview-container {
    background: var(--bg-color);
    border-radius: 12px;
    padding: 15px;
    border: 1px dashed var(--border-color);
}

.order-bar-preview-mock {
    background: var(--surface-color);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.preview-validation-message {
    text-align: center;
    color: var(--warning-color);
    font-size: 0.85rem;
    padding: 8px;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 8px;
    margin-bottom: 10px;
}

.preview-order-buttons {
    display: flex;
    gap: 10px;
}

.preview-order-buttons .preview-btn {
    flex: 1;
    padding: 12px 16px;
    font-size: 0.9rem;
    border-radius: 8px;
    transition: all 0.2s;
}

.order-bar-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.settings-card {
    padding: 20px;
}

.settings-card .form-group {
    margin-bottom: 15px;
}

.settings-card .form-group:last-child {
    margin-bottom: 0;
}

.settings-card label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.position-selector-modern {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.position-option {
    cursor: pointer;
    margin: 0;
}

.position-option input[type="radio"] {
    display: none;
}

.position-option-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.2s ease;
    background: var(--surface-color);
}

.position-option input[type="radio"]:checked+.position-option-content {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.1);
}

.position-icon {
    font-size: 1.2rem;
}

.position-text {
    font-size: 0.85rem;
    font-weight: 500;
}

.settings-actions {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.settings-actions .btn-lg {
    padding: 14px 40px;
    font-size: 1rem;
    border-radius: 12px;
}

/* Order Bar Preview Layout Switching */
.order-bar-preview-mock[data-layout="buttons-top"] {
    display: flex;
    flex-direction: column-reverse;
}

.order-bar-preview-mock[data-layout="buttons-top"] .preview-validation-message {
    margin-bottom: 0;
    margin-top: 10px;
}

/* ===== System Fonts Modern UI ===== */
.system-fonts-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fonts-preview-card {
    padding: 20px;
}

.fonts-preview-box-large {
    min-height: 120px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.system-fonts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.color-picker-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.color-picker-group input[type="color"] {
    width: 50px;
    height: 35px;
    padding: 2px;
    border-radius: 6px;
    cursor: pointer;
}

.shadow-effects-card {
    padding: 20px;
}

.shadow-effects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.shadow-effect-item {
    background: var(--bg-color);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid var(--border-color);
}

.effect-sliders-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.effect-sliders-row label {
    flex: 1;
    min-width: 80px;
    font-size: 0.8rem;
}

.effect-sliders-row input[type="range"] {
    width: 100%;
    margin-top: 4px;
}

/* Global Font Preview Box */
.global-font-preview-box {
    margin-top: 12px;
    padding: 15px;
    background: linear-gradient(135deg, var(--bg-color), var(--surface-color));
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.global-font-preview-box .preview-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.global-font-preview-box .preview-text {
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-color);
    transition: font-family 0.3s ease;
}

.success-animation-preview {
    position: relative;
    width: 100%;
    max-width: 200px;
    height: 200px;
    margin: 15px auto;
    background-color: #333;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.effects-sub-content {
    display: none;
}

.effects-sub-content.active {
    display: block;
}

#general-effects-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.effect-section {
    background-color: rgba(0, 0, 0, 0.03);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.effect-section h3 {
    margin: 0;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.effect-controls-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    align-items: center;
}

.effect-controls-grid .toggle-switch-container {
    justify-content: flex-start;
}

.effect-controls-grid>label {
    display: flex;
    flex-direction: column;
}

.effect-section .btn {
    align-self: flex-end;
    width: auto;
    margin-top: 10px;
}

.seasonal-control {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "label preview"
        "controls preview"
        "button preview";
    gap: 10px 20px;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.seasonal-control:last-of-type {
    border-bottom: none;
}

.seasonal-control.active {
    background-color: rgba(var(--primary-color-rgb), 0.1);
}

.seasonal-control>label {
    grid-area: label;
    font-weight: 500;
    font-size: 1.1rem;
}

.seasonal-control .control-group {
    grid-area: controls;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.seasonal-control .range-controls {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.seasonal-control .btn {
    grid-area: button;
    justify-self: start;
    width: auto;
}

.seasonal-preview {
    grid-area: preview;
    width: 150px;
    height: 100px;
    background-color: #333;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.position-control-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.position-control-preview {
    width: 120px;
    height: 120px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    position: relative;
    background-color: #f0f2f5;
    overflow: hidden;
}

#position-preview-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--primary-color);
    color: white;
    padding: 10px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: bold;
}

#position-preview-text {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    transition: top 0.1s, left 0.1s;
}

.position-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.position-inputs {
    display: flex;
    gap: 10px;
}

.position-inputs label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
}

.position-input {
    width: 60px;
    padding: 5px;
    margin-bottom: 0;
    text-align: center;
}

.position-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
    width: 120px;
    height: 120px;
}

.cursor-btn {
    background-color: #e9ecef;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.2s;
    color: var(--text-color);
    padding: 0;
}

.cursor-btn:hover {
    background-color: #ddd;
}

.cursor-btn:active {
    background-color: #ccc;
}

#pos-btn-up {
    grid-column: 2;
    grid-row: 1;
}

#pos-btn-left {
    grid-column: 1;
    grid-row: 2;
}

#pos-btn-reset {
    grid-column: 2;
    grid-row: 2;
    font-size: 1.5rem;
}

#pos-btn-right {
    grid-column: 3;
    grid-row: 2;
}

#pos-btn-down {
    grid-column: 2;
    grid-row: 3;
}

#per-piece-price-modal .modal-content {
    max-width: 450px;
}

#per-piece-price-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 20px;
    margin-top: 15px;
}

#per-piece-price-form .form-group {
    margin-bottom: 0;
}

#per-piece-price-form label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

#per-piece-price-form input {
    margin-bottom: 0;
    flex-grow: 1;
    text-align: center;
}

.bg-preview-vertical {
    width: 150px;
    height: 250px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    margin: 10px auto;
}

.btn-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-group .btn {
    flex: 1;
}

.success-animation-editor {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.success-animation-editor h2 {
    text-align: left;
    border: none;
    padding: 0;
    margin-top: 0;
}

.editor-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.editor-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.editor-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.grid-layout-editor {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
}

.grid-layout-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.control-group {
    background: rgba(0, 0, 0, 0.02);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.control-group h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.grid-layout-controls .form-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.grid-layout-controls .value-display {
    font-weight: normal;
    color: #6c757d;
    background-color: #e9ecef;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.8em;
}

.grid-layout-preview-and-position {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.grid-layout-preview-container {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
}

.preview-area {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f2f5;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 20px;
    min-height: 300px;
}

#grid-layout-preview-card {
    width: 200px;
    max-width: 100%;
    max-height: 100%;
}

.position-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    width: 120px;
    height: 120px;
    margin: 10px auto;
}

.pos-btn {
    background-color: #e9ecef;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
    color: var(--text-color);
    padding: 0;
    line-height: 1;
}

.pos-btn:hover {
    background-color: #ddd;
}

.pos-btn:active {
    background-color: #ccc;
}

.pos-btn[data-axis="y"][data-value="-1"] {
    grid-area: 1 / 2 / 2 / 3;
}

.pos-btn[data-axis="x"][data-value="-1"] {
    grid-area: 2 / 1 / 3 / 2;
}

.pos-btn[data-axis="reset"] {
    grid-area: 2 / 2 / 3 / 3;
}

.pos-btn[data-axis="x"][data-value="1"] {
    grid-area: 2 / 3 / 3 / 4;
}

.pos-btn[data-axis="y"][data-value="1"] {
    grid-area: 3 / 2 / 4 / 3;
}


.product-grid-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 6), 1fr);
    gap: var(--grid-vertical-gap) var(--grid-horizontal-gap);
    padding-top: 10px;
}

.product-card-placeholder {
    aspect-ratio: 3 / 4;
    background-color: #e9ecef;
    border-radius: 12px;
}

body.dark-mode .product-card-placeholder {
    background-color: #2a2a2a;
}


.product-card {
    position: relative;
    aspect-ratio: 3 / 4;
    background-color: var(--surface-color);
    border-radius: 12px;
    padding: 10px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid transparent;
    width: calc(var(--card-width, 100%));
    height: calc(var(--card-height, 100%));
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hover-shadow);
}

.product-card.unavailable {
    pointer-events: none;
}

.product-card.unavailable::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    z-index: 3;
    backdrop-filter: blur(2px);
}

body.dark-mode .product-card.unavailable::after {
    background: rgba(0, 0, 0, 0.5);
}

.product-card-level,
.product-card-icon,
.product-card-name,
.product-card-controls,
.product-card-out-of-stock {
    position: absolute;
    transition: all 0.2s ease-in-out;
}

.product-card-level {
    top: calc(5% + var(--card-level-offset-y));
    left: calc(5% + var(--card-level-offset-x));
    background-color: var(--card-level-bg-color);
    color: var(--card-level-color);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--card-level-font-size);
    font-weight: 600;
    z-index: 2;
}

.product-card-icon {
    top: 50%;
    left: 50%;
    width: var(--card-icon-size);
    height: auto;
    object-fit: contain;
    cursor: pointer;
    z-index: 1;
    transform: translate(calc(-50% + var(--card-icon-offset-x)), calc(-50% + var(--card-icon-offset-y)));
}

.product-card-icon:active {
    transform: translate(calc(-50% + var(--card-icon-offset-x)), calc(-50% + var(--card-icon-offset-y))) scale(0.9);
}

.product-card-name {
    bottom: calc(30% + var(--card-name-offset-y));
    left: 50%;
    width: calc(100% - 16px);
    font-size: var(--card-name-font-size);
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
    transform: translateX(calc(-50% + var(--card-name-offset-x)));
    color: var(--card-name-color);
}

.product-card-controls {
    bottom: calc(10% + var(--card-quantity-offset-y));
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transform: translateX(calc(-50% + var(--card-quantity-offset-x)));
}

.product-card-controls .btn-op {
    display: none;
}

.product-card-quantity {
    font-weight: bold;
    min-width: 25px;
    text-align: center;
    font-size: var(--card-quantity-font-size);
    color: var(--card-quantity-color);
}

.product-card-out-of-stock {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: var(--danger-color);
    font-weight: bold;
    font-size: var(--out-of-stock-font-size);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 4;
    animation: blink-slow 2s infinite;
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}


@keyframes blink {
    50% {
        opacity: 0.2;
    }
}

@keyframes blink-slow {
    50% {
        opacity: 0.4;
    }
}

.menu-lock-icon {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.2s, transform 0.2s, color 0.2s;
}

.menu-lock-icon:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.admin-menu .btn.locked .menu-lock-icon {
    color: var(--danger-color);
    opacity: 1;
}

.admin-menu-content.locked {
    pointer-events: none;
    opacity: 0.4;
    filter: grayscale(50%);
}

/* Frame Styles Display */
.frame-style-current-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 10px;
}

.current-frame-badge {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}


#card-frame-previews .product-card {
    min-height: 80px;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 10px;
}

#card-frame-previews .product-card.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5);
    transform: scale(1.05);
}

.product-card.frame-style-1 {
    border: 2px solid var(--primary-color);
}

.product-card.frame-style-2 {
    border: 2px dashed var(--secondary-color);
}

.product-card.frame-style-3 {
    box-shadow: 0 0 10px var(--info-color), inset 0 0 5px var(--info-color);
}

.product-card.frame-style-4 {
    border: 3px double var(--danger-color);
}

.product-card.frame-style-5 {
    border-radius: 25px;
    border: 2px solid #ccc;
}

.product-card.frame-style-6 {
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    border-width: 3px;
    border-style: solid;
}

.product-card.frame-style-7 {
    box-shadow: 5px 5px 0px var(--text-color);
    border-radius: 0;
}

body.dark-mode .product-card.frame-style-7 {
    box-shadow: 5px 5px 0px var(--border-color);
}

.product-card.frame-style-8 {
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    border-top-width: 5px;
    border-bottom-width: 5px;
}

.product-card.frame-style-9 {
    background: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(var(--primary-color-rgb), 0.1) 10px, rgba(var(--primary-color-rgb), 0.1) 20px);
}

.product-card.frame-style-10 {
    border: 2px solid var(--primary-color);
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);
}

.product-card.frame-style-11 {
    border: 1px solid var(--border-color);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.product-card.frame-style-12 {
    border: 4px ridge #c0c0c0;
}

.product-card.frame-style-13 {
    border-left: 5px solid var(--primary-color);
    border-right: 5px solid var(--secondary-color);
}

.product-card.frame-style-14 {
    background: radial-gradient(circle, transparent 50%, var(--surface-color) 70%), linear-gradient(var(--primary-color), var(--secondary-color));
}

.product-card.frame-style-15 {
    border: 3px solid transparent;
    background: linear-gradient(var(--surface-color), var(--surface-color)) padding-box, linear-gradient(180deg, var(--primary-color), var(--secondary-color)) border-box;
}

.product-card.frame-style-16 {
    border: 2px dotted var(--primary-color);
}

.product-card.frame-style-17 {
    position: relative;
}

.product-card.frame-style-17::before,
.product-card.frame-style-17::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-style: solid;
    border-color: var(--primary-color);
}

.product-card.frame-style-17::before {
    top: 0;
    left: 0;
    border-width: 3px 0 0 3px;
}

.product-card.frame-style-17::after {
    bottom: 0;
    right: 0;
    border-width: 0 3px 3px 0;
}

.product-card.frame-style-18 {
    transform: skew(-5deg);
}

.product-card.frame-style-19 {
    border-radius: 12px 50px;
    border: 2px solid var(--primary-color);
}

.product-card.frame-style-20 {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.product-card.frame-style-21 {
    border: 2px solid #333;
    box-shadow: 0 0 0 2px var(--primary-color);
}

.product-card.frame-style-22 {
    border: 2px solid transparent;
    background: linear-gradient(var(--surface-color), var(--surface-color)) padding-box, linear-gradient(to right, #e83e8c, #6f42c1) border-box;
}

.product-card.frame-style-23 {
    border: 1px solid #ccc;
    border-top-width: 5px;
    border-bottom-width: 5px;
}

.product-card.frame-style-24 {
    border: 1px solid #ccc;
    border-left-width: 5px;
    border-right-width: 5px;
}

.product-card.frame-style-25 {
    border: 1px solid #ccc;
    border-radius: 0;
}

.product-card.frame-style-26 {
    border: none;
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.product-card.frame-style-27 {
    border: 1px dashed #aaa;
    padding: 5px;
    background-clip: content-box;
    background-color: #f9f9f9;
}

.product-card.frame-style-28 {
    border: 5px groove lightgray;
}

.product-card.frame-style-29 {
    border: 2px solid var(--primary-color);
    border-radius: 50% 10%;
}

.product-card.frame-style-30 {
    border: 1px solid #ccc;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
}

.product-card.frame-style-31 {
    border: 2px solid #ccc;
    background: linear-gradient(to right, rgba(var(--primary-color-rgb), 0.05), rgba(var(--secondary-color-rgb), 0.05));
}

.product-card.frame-style-32 {
    border-top: 5px solid var(--primary-color);
    border-bottom: 5px solid var(--primary-color);
    background: #fafafa;
}

.product-card.frame-style-33 {
    border-left: 5px solid var(--secondary-color);
    border-right: 5px solid var(--secondary-color);
    background: #fafafa;
}

.product-card.frame-style-34 {
    border: 1px solid #ccc;
    background: repeating-radial-gradient(circle, #f5f5f5, #f5f5f5 10px, #fff 10px, #fff 20px);
}

.product-card.frame-style-35 {
    border: 2px solid var(--primary-color);
    background: #fff;
    box-shadow: inset 0 0 10px rgba(var(--primary-color-rgb), 0.3);
}

.product-card.frame-style-36 {
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to left, var(--primary-color), var(--secondary-color));
}

.product-card.frame-style-37 {
    border-radius: 0;
    border-top: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--secondary-color);
}

.product-card.frame-style-38 {
    border-radius: 0;
    border-right: 2px solid var(--primary-color);
    border-left: 2px solid var(--secondary-color);
}

.product-card.frame-style-39 {
    border: 2px solid #333;
    background: repeating-conic-gradient(#f5f5f5 0% 25%, white 0% 50%) 50% / 20px 20px;
}

.product-card.frame-style-40 {
    border: 2px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.product-card.frame-style-41 {
    border: 2px solid var(--primary-color);
    border-top-width: 4px;
    border-bottom-width: 4px;
}

.product-card.frame-style-42 {
    border: 2px solid var(--secondary-color);
    border-left-width: 4px;
    border-right-width: 4px;
}

.product-card.frame-style-43 {
    border: 2px solid #ccc;
    border-radius: 20px 0 20px 0;
}

.product-card.frame-style-44 {
    border: 2px solid #ccc;
    border-radius: 0 20px 0 20px;
}

.product-card.frame-style-45 {
    border: 1px solid #ccc;
    box-shadow: 0 0 0 3px white, 0 0 0 5px var(--primary-color);
}

.product-card.frame-style-46 {
    border: 1px solid #ddd;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    box-shadow: 3px 3px 6px #d1d1d1, -3px -3px 6px #ffffff;
}

.product-card.frame-style-47 {
    border: 2px solid #ccc;
    background: linear-gradient(135deg, white 50%, #f5f5f5 50%);
}

.product-card.frame-style-48 {
    border: 2px solid #ccc;
    background: radial-gradient(ellipse at top, #f5f5f5, white);
}

.product-card.frame-style-49 {
    border: 2px solid #ccc;
    background: radial-gradient(ellipse at bottom, #f5f5f5, white);
}

.product-card.frame-style-50 {
    border: 1px solid #aaa;
    border-radius: 10px;
    background: #e9e9e9;
    box-shadow: inset 2px 2px 5px #c8c8c8, inset -2px -2px 5px #fff;
}

/* ===== NEW FRAMES 51-60 ===== */
.product-card.frame-style-51 {
    border: 2px solid var(--primary-color);
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05) 0%, transparent 100%);
}

.product-card.frame-style-52 {
    border: 1px solid #ddd;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.product-card.frame-style-53 {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box, linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3) border-box;
}

.product-card.frame-style-54 {
    border: 3px solid #333;
    border-radius: 8px;
    box-shadow: 4px 4px 0 #333;
}

.product-card.frame-style-55 {
    border: 1px solid rgba(var(--primary-color-rgb), 0.3);
    background: rgba(var(--primary-color-rgb), 0.03);
    box-shadow: 0 0 20px rgba(var(--primary-color-rgb), 0.15);
}

.product-card.frame-style-56 {
    border: 2px dashed var(--primary-color);
    background: repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(var(--primary-color-rgb), 0.02) 10px, rgba(var(--primary-color-rgb), 0.02) 20px);
}

.product-card.frame-style-57 {
    border: 1px solid #ccc;
    border-left: 4px solid var(--primary-color);
    background: linear-gradient(90deg, rgba(var(--primary-color-rgb), 0.05) 0%, transparent 30%);
}

.product-card.frame-style-58 {
    border: 1px solid #ccc;
    border-top: 4px solid var(--secondary-color);
    background: linear-gradient(180deg, rgba(var(--secondary-color-rgb), 0.05) 0%, transparent 30%);
}

.product-card.frame-style-59 {
    border: 2px solid #e0e0e0;
    border-radius: 15px;
    background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.product-card.frame-style-60 {
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.1), 0 0 0 8px rgba(var(--primary-color-rgb), 0.05);
}

.search-and-filter-container {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
    align-items: center;
}

#search-box,
#admin-product-search {
    flex-grow: 1;
    margin: 0;
}

.filter-container {
    position: relative;
    display: inline-block;
}

.filter-container .btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
}

.filter-dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--surface-color);
    min-width: 160px;
    box-shadow: var(--shadow);
    z-index: 10;
    border-radius: 8px;
    overflow: hidden;
    right: 0;
    border: 1px solid var(--border-color);
}

.filter-dropdown-content a {
    color: var(--text-color);
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    font-size: 0.75rem;
    white-space: nowrap;
}

.filter-dropdown-content a:hover {
    background-color: #f1f1f1;
}

#customer-view header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#header-title-container,
#slogan {
    width: 100%;
    text-align: center;
}

.effects-preview-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.effects-preview-box {
    background-color: #f0f2f5;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#font-preview-logo {
    max-width: 100px;
    max-height: 100px;
    filter: drop-shadow(var(--logo-effect-offset-x, 0px) var(--logo-effect-offset-y, 0px) var(--logo-effect-blur, 0px) var(--logo-effect-color, transparent));
}

#font-preview {
    margin: 0;
    border: none;
    padding: 0;
}

#slogan-font-preview {
    margin: 0;
    border: none;
    padding: 0;
}

#theme-selection-grid,
#store-login-theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 10px;
    padding: 15px;
    border-radius: 12px;
    max-height: 55vh;
    overflow-y: auto;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    background: rgba(var(--primary-color-rgb), 0.02);
    border: 1px solid var(--border-color);
}

.theme-count-badge {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.theme-preview-item {
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    background-color: var(--surface-color);
    position: relative;
    overflow: hidden;
}

.theme-preview-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.theme-preview-item:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.theme-preview-item:hover::before {
    opacity: 1;
}

.theme-preview-item.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.3), 0 6px 15px rgba(var(--primary-color-rgb), 0.3);
    font-weight: bold;
}

.theme-preview-item.active::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--primary-color);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
}

.theme-preview-item p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.color-swatches {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.theme-preview-item:hover .swatch {
    transform: scale(1.1);
}

@media (min-width: 992px) {
    .stock-db-grid {
        grid-template-columns: 1fr 1fr;
    }

    .grid-layout-editor {
        grid-template-columns: 350px 1fr;
    }

    .editor-layout {
        grid-template-columns: 1fr 1fr;
    }

    .effects-preview-section {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --grid-horizontal-gap: 15px;
        --grid-vertical-gap: 15px;
    }

    .container {
        padding: 10px;
    }

    h1 {
        font-size: calc(var(--shop-name-font-size) * 0.8);
    }

    .btn {
        width: 100%;
        box-sizing: border-box;
    }

    .order-buttons .btn {
        flex: 1 1 0;
    }

    .admin-main-controls .btn,
    .btn-small,
    .btn-op,
    .btn-delete {
        width: auto;
    }

    .admin-header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-main-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .admin-main-controls .btn {
        width: 100%;
    }

    .order-buttons {
        flex-direction: row;
    }

    .floating-buttons-container {
        top: 10px;
        right: 10px;
        gap: 5px;
    }

    #admin-gear-icon,
    #back-to-admin-btn,
    #theme-toggle-btn,
    #lang-toggle-btn {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
        border-radius: 6px;
    }

    #admin-gear-icon svg,
    #back-to-admin-btn svg,
    #lang-toggle-btn svg {
        width: 13px;
        height: 13px;
    }

    th,
    td {
        padding: 8px 10px;
        font-size: 0.9rem;
    }

    td img {
        width: 24px;
        height: 24px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-menu {
        grid-template-columns: 1fr 1fr;
    }

    #order-summary {
        padding: 15px;
    }

    .seasonal-control {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "preview"
            "controls"
            "button";
        justify-items: center;
    }

    .seasonal-control>label,
    .seasonal-control .btn {
        justify-self: stretch;
    }

    .seasonal-preview {
        width: 100%;
        height: 150px;
    }

    .stock-db-section {
        padding: 15px;
    }

    .grid-layout-editor {
        grid-template-columns: 1fr;
    }

    /* ===== START: Login Button Fix (Mobile) ===== */
    .login-page-buttons {
        grid-template-columns: 1fr;
    }

    /* ===== END: Login Button Fix (Mobile) ===== */
}

@media (max-width: 576px) {
    :root {
        --grid-horizontal-gap: 10px;
        --grid-vertical-gap: 10px;
    }

    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* START: Update Final */

/* Login Page Buttons */
.login-page-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
    align-items: center;
}

.login-buttons-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
    max-width: 400px;
}

.register-button-center {
    display: flex;
    justify-content: center;
    width: 100%;
}

.register-button-center .btn {
    max-width: 250px;
    width: 100%;
}

.login-page-buttons .btn {
    margin-top: 0;
}

/* Price Tag Modal Styles */
#price-tag-modal .modal-content {
    max-width: 500px;
}

.price-tag-info h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-align: center;
}

.price-tag-info h4 {
    color: var(--text-color);
    font-size: 1.1rem;
    margin-top: 20px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
}

.price-tag-message {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
    margin: 15px 0;
}

.price-tag-message p {
    margin: 0;
    font-style: italic;
    font-size: 1.1rem;
    color: #666;
}

.price-tag-image {
    text-align: center;
    margin: 15px 0;
}

.price-tag-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.price-tag-emoji {
    text-align: center;
    font-size: 3rem;
    margin: 20px 0;
}

.price-tag-category {
    background-color: var(--secondary-color);
    color: #333;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    text-align: center;
    margin: 10px 0;
    display: inline-block;
}

/* Admin Menu Edit Buttons */
.menu-btn-wrapper {
    position: relative;
    display: flex;
}

.menu-btn-wrapper .menu-btn {
    flex-grow: 1;
}

/* ================================================= */
/* ===== START: Notification System (Glassmorphism) ===== */
/* ================================================= */

/* Container สำหรับ Notifications - มุมบนขวา */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    width: calc(100% - 40px);
    pointer-events: none;
}

/* Notification Item */
.notification {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    padding-right: 45px;
    border-radius: 16px;
    overflow: hidden;
    pointer-events: auto;

    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);

    /* Animation */
    animation: notification-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform: translateX(120%);
    opacity: 0;
}

.notification.hiding {
    animation: notification-slide-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes notification-slide-in {
    0% {
        transform: translateX(120%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes notification-slide-out {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* Icon Container */
.notification-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
}

.notification-icon svg {
    width: 16px;
    height: 16px;
}

/* Content */
.notification-content {
    flex-grow: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 2px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.notification-message {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    word-wrap: break-word;
}

/* Close Button */
.notification-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.notification-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.notification-close svg {
    width: 12px;
    height: 12px;
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 2.5;
}

/* Progress Bar */
.notification-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 0 0 16px 16px;
    animation: notification-progress-shrink 5s linear forwards;
}

@keyframes notification-progress-shrink {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

/* ===== Notification Types ===== */

/* Success - Green */
.notification.notification-success {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.85) 0%, rgba(32, 201, 151, 0.85) 100%);
    border-color: rgba(40, 167, 69, 0.3);
}

.notification.notification-success .notification-icon {
    background: rgba(255, 255, 255, 0.25);
}

.notification.notification-success .notification-icon svg {
    stroke: #fff;
}

.notification.notification-success .notification-progress {
    background: rgba(255, 255, 255, 0.5);
}

/* Error - Red */
.notification.notification-error {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.85) 0%, rgba(232, 62, 140, 0.85) 100%);
    border-color: rgba(220, 53, 69, 0.3);
}

.notification.notification-error .notification-icon {
    background: rgba(255, 255, 255, 0.25);
}

.notification.notification-error .notification-icon svg {
    stroke: #fff;
}

.notification.notification-error .notification-progress {
    background: rgba(255, 255, 255, 0.5);
}

/* Warning - Yellow/Orange */
.notification.notification-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.9) 0%, rgba(253, 126, 20, 0.9) 100%);
    border-color: rgba(255, 193, 7, 0.3);
}

.notification.notification-warning .notification-title,
.notification.notification-warning .notification-message {
    color: #333;
    text-shadow: none;
}

.notification.notification-warning .notification-message {
    color: rgba(51, 51, 51, 0.85);
}

.notification.notification-warning .notification-icon {
    background: rgba(0, 0, 0, 0.15);
}

.notification.notification-warning .notification-icon svg {
    stroke: #333;
}

.notification.notification-warning .notification-close svg {
    stroke: rgba(51, 51, 51, 0.7);
}

.notification.notification-warning .notification-progress {
    background: rgba(51, 51, 51, 0.3);
}

/* Info - Blue */
.notification.notification-info {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.85) 0%, rgba(102, 126, 234, 0.85) 100%);
    border-color: rgba(23, 162, 184, 0.3);
}

.notification.notification-info .notification-icon {
    background: rgba(255, 255, 255, 0.25);
}

.notification.notification-info .notification-icon svg {
    stroke: #fff;
}

.notification.notification-info .notification-progress {
    background: rgba(255, 255, 255, 0.5);
}

/* Default - Gray */
.notification.notification-default {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.85) 0%, rgba(73, 80, 87, 0.85) 100%);
    border-color: rgba(108, 117, 125, 0.3);
}

.notification.notification-default .notification-icon {
    background: rgba(255, 255, 255, 0.2);
}

.notification.notification-default .notification-icon svg {
    stroke: #fff;
}

.notification.notification-default .notification-progress {
    background: rgba(255, 255, 255, 0.4);
}

/* ===== Dark Mode Adjustments ===== */
body.dark-mode .notification {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

body.dark-mode .notification.notification-success {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.75) 0%, rgba(32, 201, 151, 0.75) 100%);
}

body.dark-mode .notification.notification-error {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.75) 0%, rgba(232, 62, 140, 0.75) 100%);
}

body.dark-mode .notification.notification-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.8) 0%, rgba(253, 126, 20, 0.8) 100%);
}

body.dark-mode .notification.notification-info {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.75) 0%, rgba(102, 126, 234, 0.75) 100%);
}

body.dark-mode .notification.notification-default {
    background: linear-gradient(135deg, rgba(73, 80, 87, 0.85) 0%, rgba(52, 58, 64, 0.85) 100%);
}

/* ===== Hover Effect ===== */
.notification:hover {
    transform: translateX(-5px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.notification:hover .notification-progress {
    animation-play-state: paused;
}

/* ===== Mobile Responsive ===== */
@media (max-width: 480px) {
    #notification-container {
        top: 10px;
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
    }

    .notification {
        padding: 14px 16px;
        padding-right: 40px;
        border-radius: 12px;
    }

    .notification-icon {
        width: 24px;
        height: 24px;
    }

    .notification-icon svg {
        width: 14px;
        height: 14px;
    }

    .notification-title {
        font-size: 0.9rem;
    }

    .notification-message {
        font-size: 0.8rem;
    }
}

/* ================================================= */
/* ===== END: Notification System ===== */
/* ================================================= */

/* ================================================= */
/* ===== START: Confirm Modal (Glassmorphism) ===== */
/* ================================================= */

#confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#confirm-modal-overlay.active {
    display: flex;
    opacity: 1;
}

#confirm-modal-overlay.hiding {
    opacity: 0;
}

.confirm-modal {
    position: relative;
    max-width: 420px;
    width: calc(100% - 40px);
    padding: 28px;
    border-radius: 20px;

    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.15);

    /* Animation */
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

#confirm-modal-overlay.active .confirm-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

#confirm-modal-overlay.hiding .confirm-modal {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
}

/* Confirm Modal Icon */
.confirm-modal-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.9) 0%, rgba(253, 126, 20, 0.9) 100%);
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3);
}

.confirm-modal-icon svg {
    width: 32px;
    height: 32px;
    stroke: #333;
    stroke-width: 2;
}

/* Confirm Modal Content */
.confirm-modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.confirm-modal-message {
    font-size: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Confirm Modal Buttons */
.confirm-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirm-modal-btn {
    flex: 1;
    max-width: 140px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--global-font);
}

/* Cancel Button */
.confirm-modal-btn.btn-cancel {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.confirm-modal-btn.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Confirm Button */
.confirm-modal-btn.btn-confirm {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.9) 0%, rgba(232, 62, 140, 0.9) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.confirm-modal-btn.btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

/* Confirm Button - Success Type */
.confirm-modal-btn.btn-confirm.confirm-success {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.9) 0%, rgba(32, 201, 151, 0.9) 100%);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.confirm-modal-btn.btn-confirm.confirm-success:hover {
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

/* Confirm Button - Info Type */
.confirm-modal-btn.btn-confirm.confirm-info {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.9) 0%, rgba(102, 126, 234, 0.9) 100%);
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
}

.confirm-modal-btn.btn-confirm.confirm-info:hover {
    box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
}

/* Icon Types */
.confirm-modal-icon.icon-danger {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.9) 0%, rgba(232, 62, 140, 0.9) 100%);
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
}

.confirm-modal-icon.icon-danger svg {
    stroke: #fff;
}

.confirm-modal-icon.icon-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.9) 0%, rgba(253, 126, 20, 0.9) 100%);
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3);
}

.confirm-modal-icon.icon-warning svg {
    stroke: #333;
}

.confirm-modal-icon.icon-info {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.9) 0%, rgba(102, 126, 234, 0.9) 100%);
    box-shadow: 0 8px 20px rgba(23, 162, 184, 0.3);
}

.confirm-modal-icon.icon-info svg {
    stroke: #fff;
}

/* Dark Mode */
body.dark-mode .confirm-modal {
    background: rgba(30, 30, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

body.dark-mode .confirm-modal-btn.btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .confirm-modal-btn.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .confirm-modal {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .confirm-modal-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 16px;
    }

    .confirm-modal-icon svg {
        width: 26px;
        height: 26px;
    }

    .confirm-modal-title {
        font-size: 1.15rem;
    }

    .confirm-modal-message {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }

    .confirm-modal-buttons {
        flex-direction: column-reverse;
    }

    .confirm-modal-btn {
        max-width: none;
        width: 100%;
    }
}

/* ================================================= */
/* ===== END: Confirm Modal ===== */
/* ================================================= */

/* ================================================= */
/* ===== START: Manager Store Menu Styles ===== */
/* ================================================= */

/* ===== Package Badges ===== */
.package-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.package-badge.standard {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgba(108, 117, 125, 0.3);
}

.package-badge.premium {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: #333;
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.3);
}

/* ===== Status Badges ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-badge.active {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-badge.paused {
    background: rgba(255, 193, 7, 0.15);
    color: #d39e00;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-badge.expired {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.status-badge.pending {
    background: rgba(23, 162, 184, 0.15);
    color: #17a2b8;
    border: 1px solid rgba(23, 162, 184, 0.3);
}

/* ===== Countdown Display ===== */
.countdown-display {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 15px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    margin: 10px 0;
}

.countdown-display.large {
    gap: 15px;
    padding: 20px;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: 10px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.countdown-display.large .countdown-unit {
    min-width: 65px;
    padding: 12px 15px;
}

.countdown-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.countdown-display.large .countdown-value {
    font-size: 2rem;
}

.countdown-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    margin-top: 4px;
}

.countdown-display.large .countdown-label {
    font-size: 0.75rem;
}

/* Countdown Pulse Animation */
.countdown-unit.animate-pulse .countdown-value {
    animation: countdown-pulse 1s ease-in-out infinite;
}

@keyframes countdown-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* ===== Serial Key Generator ===== */
.serial-key-generator-section {
    padding: 20px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    margin-bottom: 20px;
}

.serial-key-generator-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.range-with-value {
    display: flex;
    align-items: center;
    gap: 15px;
}

.range-with-value input[type="range"] {
    flex: 1;
}

.duration-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.duration-btn {
    padding: 15px 20px;
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    text-align: center;
    font-weight: 600;
}

.duration-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.duration-btn.active {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border-width: 3px;
    animation: pulse-glow 2s ease-in-out infinite;
}

/* สีแตกต่างกันสำหรับแต่ละระยะเวลา */
.duration-btn[data-duration="15days"] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-color: #28a745;
    color: #fff;
}

.duration-btn[data-duration="15days"]:hover {
    background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
}

.duration-btn[data-duration="1month"] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    border-color: #17a2b8;
    color: #fff;
}

.duration-btn[data-duration="1month"]:hover {
    background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
}

.duration-btn[data-duration="3months"] {
    background: linear-gradient(135deg, #fd7e14 0%, #e8650e 100%);
    border-color: #fd7e14;
    color: #fff;
}

.duration-btn[data-duration="3months"]:hover {
    background: linear-gradient(135deg, #e8650e 0%, #d63384 100%);
}

.duration-btn[data-duration="5months"] {
    background: linear-gradient(135deg, #6f42c1 0%, #5a2d91 100%);
    border-color: #6f42c1;
    color: #fff;
}

.duration-btn[data-duration="5months"]:hover {
    background: linear-gradient(135deg, #5a2d91 0%, #4a1e7a 100%);
}

.duration-btn[data-duration="1year"] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border-color: #dc3545;
    color: #fff;
}

.duration-btn[data-duration="1year"]:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.3);
    }

    50% {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 0 30px rgba(255, 255, 255, 0.5);
    }

    100% {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.3);
    }
}

/* Generated Serial Key Display */
.generated-serial-key-display {
    margin-top: 25px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(32, 201, 151, 0.1));
    border-radius: 12px;
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.serial-key-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: #fff;
    border-radius: 10px;
    margin: 10px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.serial-key-box span {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--primary-color);
    word-break: break-all;
}

.serial-key-expiry-info {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ===== Store Tracking Filters ===== */
.store-tracking-filters {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
}

/* ===== Online Status Grid ===== */
.manager-online-status-section {
    margin: 20px 0;
}

.online-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.online-status-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.online-status-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.online-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.online-indicator.online {
    background: #28a745;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
    animation: online-pulse 2s ease-in-out infinite;
}

.online-indicator.offline {
    background: #dc3545;
}

@keyframes online-pulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(40, 167, 69, 0.8);
    }
}

.online-status-card .store-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.online-status-card .store-package {
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
}

/* ===== Payment Channel Settings ===== */
.payment-channel-settings {
    padding: 20px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    margin-bottom: 20px;
}

.saved-payment-channels {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.payment-channel-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: var(--card-bg);
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
}

.payment-channel-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.payment-channel-bank {
    font-weight: 600;
    color: var(--text-primary);
}

.payment-channel-account {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ===== Store Payment Dashboard ===== */
.store-payment-dashboard {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
}

.store-payment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.store-status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
}

.store-status-badge .status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.store-status-badge.active {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.store-status-badge.active .status-indicator {
    background: #28a745;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
}

.store-status-badge.paused {
    background: rgba(255, 193, 7, 0.15);
    color: #d39e00;
}

.store-status-badge.paused .status-indicator {
    background: #ffc107;
}

.store-status-badge.expired {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

.store-status-badge.expired .status-indicator {
    background: #dc3545;
    animation: blink-red 1s ease-in-out infinite;
}

.system-countdown-section {
    text-align: center;
    margin: 25px 0;
}

.store-payment-info {
    margin: 25px 0;
}

.store-payment-info .info-card {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.1), rgba(102, 126, 234, 0.1));
    border: 1px solid rgba(23, 162, 184, 0.2);
}

.store-payment-info .info-card h4 {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.store-payment-info .info-card .value {
    color: var(--text-primary);
}

.payment-channels-display {
    padding: 20px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    margin-bottom: 20px;
}

.proof-preview {
    margin-top: 10px;
    padding: 10px;
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    text-align: center;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proof-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
}

/* ===== System Lock Overlay ===== */
#system-lock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.95), rgba(139, 0, 0, 0.95));
    backdrop-filter: blur(10px);
}

.system-lock-message {
    text-align: center;
    padding: 50px;
    max-width: 500px;
}

.lock-icon {
    font-size: 80px;
    margin-bottom: 30px;
}

.lock-icon.blink-red {
    animation: blink-red 1s ease-in-out infinite;
}

@keyframes blink-red {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.system-lock-message h2 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.system-lock-message p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    margin-bottom: 25px;
}

.lock-contact-info {
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    color: #fff;
}

/* ===== Manager Dashboard Stats ===== */
.manager-dashboard-stats {
    margin-bottom: 30px;
}

.manager-dashboard-stats .stat-card {
    color: #fff;
    border: none;
}

.manager-dashboard-stats .stat-card h3 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.manager-dashboard-stats .stat-card .value {
    font-size: 1.8rem;
    font-weight: 700;
}

/* ===== Store Dashboard Modal ===== */
.store-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

/* ===== Payment Proof Modal ===== */
.payment-proof-info {
    padding: 15px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    margin-bottom: 20px;
}

.payment-proof-info p {
    margin: 8px 0;
}

.payment-proof-image {
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    margin-bottom: 20px;
}

.payment-proof-image img {
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ===== Action Buttons in Tables ===== */
.action-btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.action-btn.view {
    background: rgba(23, 162, 184, 0.15);
    color: #17a2b8;
}

.action-btn.view:hover {
    background: #17a2b8;
    color: #fff;
}

.action-btn.edit {
    background: rgba(255, 193, 7, 0.15);
    color: #d39e00;
}

.action-btn.edit:hover {
    background: #ffc107;
    color: #333;
}

.action-btn.delete {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

.action-btn.delete:hover {
    background: #dc3545;
    color: #fff;
}

.action-btn.approve {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.action-btn.approve:hover {
    background: #28a745;
    color: #fff;
}

.action-btn.pause {
    background: rgba(255, 193, 7, 0.15);
    color: #d39e00;
}

.action-btn.pause:hover {
    background: #ffc107;
    color: #333;
}

.action-btn.resume {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.action-btn.resume:hover {
    background: #28a745;
    color: #fff;
}

/* ===== Copy Button Styling ===== */
.copy-btn {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.copy-btn:hover {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.copy-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===== Inline Countdown in Tables ===== */
.inline-countdown {
    display: inline-flex;
    gap: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.inline-countdown.warning {
    background: rgba(255, 193, 7, 0.2);
    color: #d39e00;
}

.inline-countdown.danger {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    animation: blink-red 1s ease-in-out infinite;
}

/* ===== Serial Key in Tables ===== */
.serial-key-cell {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(32, 201, 151, 0.1));
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(40, 167, 69, 0.3);
    color: #28a745;
    text-shadow: 0 1px 2px rgba(40, 167, 69, 0.2);
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.serial-key-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.serial-key-cell:hover::before {
    left: 100%;
}

.serial-key-cell:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
}

/* ===== User/Pass Display ===== */
.user-pass-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
}

.user-pass-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-pass-label {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 35px;
}

.user-pass-value {
    font-family: 'Courier New', monospace;
    color: var(--text-primary);
    font-weight: 600;
}

/* Legacy support */
.user-pass-display {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.user-pass-display .username {
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== Dark Mode Adjustments ===== */
body.dark-mode .countdown-display {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .serial-key-generator-section,
body.dark-mode .payment-channel-settings,
body.dark-mode .store-tracking-filters {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .serial-key-box {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .online-status-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .payment-channel-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .store-payment-dashboard {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.9), rgba(20, 20, 20, 0.9));
}

body.dark-mode .duration-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .duration-btn:hover {
    background: rgba(var(--primary-color-rgb), 0.2);
}

body.dark-mode .serial-key-cell {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .inline-countdown {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .proof-preview {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .payment-channels-display,
body.dark-mode .payment-proof-info,
body.dark-mode .payment-proof-image {
    background: rgba(255, 255, 255, 0.03);
}

/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {
    .countdown-display {
        gap: 8px;
        padding: 12px;
    }

    .countdown-unit {
        min-width: 40px;
        padding: 8px;
    }

    .countdown-value {
        font-size: 1.2rem;
    }

    .countdown-display.large .countdown-value {
        font-size: 1.5rem;
    }

    .countdown-display.large .countdown-unit {
        min-width: 50px;
    }

    .duration-buttons-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .serial-key-box {
        flex-direction: column;
        text-align: center;
    }

    .serial-key-box span {
        font-size: 1rem;
    }

    .store-payment-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .online-status-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .manager-dashboard-stats .stat-card .value {
        font-size: 1.4rem;
    }

    .action-btn-group {
        flex-direction: column;
    }

    .system-lock-message {
        padding: 30px 20px;
    }

    .lock-icon {
        font-size: 60px;
    }

    .system-lock-message h2 {
        font-size: 1.5rem;
    }

    .system-lock-message p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .duration-buttons-grid {
        grid-template-columns: 1fr;
    }

    .countdown-display.large {
        gap: 6px;
        padding: 15px 10px;
    }

    .countdown-display.large .countdown-unit {
        min-width: 45px;
        padding: 8px 10px;
    }

    .countdown-display.large .countdown-value {
        font-size: 1.3rem;
    }

    .countdown-display.large .countdown-label {
        font-size: 0.65rem;
    }
}

/* ===== Store Link Display ===== */
.ms-storelink-compact {
    display: flex;
    align-items: center;
    gap: 6px;
}

.store-link-code {
    font-family: 'Consolas', monospace;
    font-size: 0.75rem;
    background: var(--bg-color);
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--info-color);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.store-link-code:hover {
    background: var(--info-color);
    color: white;
    text-decoration: none;
}

.btn-copy-sm {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: 0.9rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.btn-copy-sm:hover {
    opacity: 1;
}

/* ===== Set Credentials Button ===== */
.btn-set-cred {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-set-cred:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-set-cred-sm {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.7rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.btn-set-cred-sm:hover {
    opacity: 1;
}

.ms-userpass-compact.no-cred {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.no-cred-text {
    color: var(--warning-color);
    font-size: 0.75rem;
}

/* ===== Password Input Group ===== */
.password-input-group {
    display: flex;
    gap: 8px;
}

.password-input-group input {
    flex: 1;
}

.btn-toggle-pass {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-toggle-pass:hover {
    background: var(--surface-color);
}

/* ================================================= */
/* ===== END: Manager Store Menu Styles ===== */
/* ================================================= */

/* ================================================= */
/* ===== START: New Feature Styles ===== */
/* ================================================= */

/* ===== Register Button Styles ===== */
.btn-register {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.3);
    font-family: var(--global-font);
}

.btn-register::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-register:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(var(--primary-color-rgb), 0.4);
}

.btn-register:hover::before {
    left: 100%;
}

.btn-register:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3);
}

.btn-register .icon {
    font-size: 1.2rem;
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* ===== Register Modal Styles (Glassmorphism) ===== */
.register-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.register-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.register-modal-overlay.hiding {
    opacity: 0;
}

.register-modal {
    position: relative;
    max-width: 600px;
    width: calc(100% - 40px);
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
    border-radius: 20px;

    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.15);

    /* Animation */
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.register-modal-overlay.active .register-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.register-modal-overlay.hiding .register-modal {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
}

.register-modal-header {
    position: relative;
    padding: 30px 30px 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1), rgba(var(--secondary-color-rgb), 0.1));
    border-radius: 20px 20px 0 0;
}

.register-modal-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.register-modal-subtitle {
    font-size: 1rem;
    color: rgba(var(--text-color-rgb, 51, 51, 51), 0.8);
    margin: 0;
}

.register-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1.2rem;
    color: var(--text-color);
}

.register-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.register-modal-body {
    padding: 30px;
}

.register-form-section {
    margin-bottom: 30px;
}

.register-form-section:last-child {
    margin-bottom: 0;
}

.register-section-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(var(--primary-color-rgb), 0.2);
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.form-group {
    flex: 1;
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(var(--border-color-rgb, 222, 226, 230), 0.5);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    font-size: 1rem;
    font-family: var(--global-font);
    color: var(--text-color);
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.form-input::placeholder {
    color: rgba(var(--text-color-rgb, 51, 51, 51), 0.6);
}

/* ===== Package Selection Radio Buttons ===== */
.package-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.package-option {
    position: relative;
    display: block;
    cursor: pointer;
}

.package-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.package-card {
    position: relative;
    padding: 25px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(var(--border-color-rgb, 222, 226, 230), 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    overflow: hidden;
}

.package-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1), rgba(var(--secondary-color-rgb), 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.package-option input[type="radio"]:checked+.package-card::before {
    opacity: 1;
}

.package-option input[type="radio"]:checked+.package-card {
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(var(--primary-color-rgb), 0.2);
}

.package-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.package-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 10px;
}

.package-price {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0 0 15px;
}

.package-price .currency {
    font-size: 1rem;
    vertical-align: top;
}

.package-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.package-features li {
    padding: 5px 0;
    color: var(--text-color);
    font-size: 0.9rem;
    position: relative;
    padding-left: 25px;
}

.package-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* ===== Duration Selection Buttons ===== */
.duration-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.duration-btn-option {
    position: relative;
    display: block;
    cursor: pointer;
}

.duration-btn-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.duration-btn-card {
    padding: 20px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(var(--border-color-rgb, 222, 226, 230), 0.3);
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.duration-btn-option input[type="radio"]:checked+.duration-btn-card {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.3);
}

.duration-btn-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.duration-text {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0 0 5px;
}

.duration-discount {
    font-size: 0.85rem;
    opacity: 0.8;
    margin: 0;
}

/* ===== Form Validation Styles ===== */
.form-input.error {
    border-color: var(--danger-color);
    background: rgba(220, 53, 69, 0.05);
}

.form-input.valid {
    border-color: var(--success-color);
    background: rgba(40, 167, 69, 0.05);
}

.error-message {
    color: var(--danger-color);
    font-size: 0.85rem;
    margin-top: 5px;
    display: none;
}

.error-message.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.register-form-footer {
    padding: 25px 30px 30px;
    border-top: 1px solid rgba(var(--border-color-rgb, 222, 226, 230), 0.3);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 20px 20px;
}

.register-submit-btn {
    width: 100%;
    padding: 18px 30px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--global-font);
    position: relative;
    overflow: hidden;
}

.register-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(var(--primary-color-rgb), 0.4);
}

.register-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.register-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.register-submit-btn:hover:not(:disabled)::before {
    left: 100%;
}

/* ===== New Menu: Applied Stores ===== */
.applied-stores-menu {
    position: relative;
}

.applied-stores-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.15), rgba(102, 126, 234, 0.15));
    color: #17a2b8;
    border: 1px solid rgba(23, 162, 184, 0.3);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: var(--global-font);
}

.applied-stores-btn:hover {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.25), rgba(102, 126, 234, 0.25));
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(23, 162, 184, 0.2);
}

.applied-stores-btn .icon {
    font-size: 1.1rem;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-3px);
    }

    60% {
        transform: translateY(-1px);
    }
}

.applied-stores-badge {
    background: var(--danger-color);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 5px;
}

/* ===== Eye Icon and Toggle Password ===== */
.password-input-wrapper {
    position: relative;
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.password-toggle-btn:hover {
    opacity: 1;
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
}

.password-toggle-btn .eye-icon {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.password-toggle-btn.eye-open .eye-icon {
    transform: rotate(180deg);
}

/* ===== Open New Store Button ===== */
.btn-open-new-store {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
    font-family: var(--global-font);
    text-decoration: none;
}

.btn-open-new-store:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(40, 167, 69, 0.4);
    background: linear-gradient(135deg, #218838, #1e9e90);
}

.btn-open-new-store:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.btn-open-new-store .icon {
    font-size: 1.2rem;
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ===== Applied Stores Table Styles ===== */
.applied-stores-table {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.applied-stores-table .table-wrapper {
    max-height: 600px;
}

.applied-stores-table th {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1), rgba(var(--secondary-color-rgb), 0.1));
    color: var(--text-color);
    font-weight: 600;
    padding: 15px 12px;
    text-align: center;
}

.applied-stores-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid rgba(var(--border-color-rgb, 222, 226, 230), 0.2);
}

.applied-stores-table .store-name {
    font-weight: 600;
    color: var(--primary-color);
}

.applied-stores-table .owner-name {
    font-weight: 500;
}

.applied-stores-table .package-badge {
    margin: 0 auto;
}

/* ===== Dark Mode Adjustments for New Features ===== */
body.dark-mode .register-modal {
    background: rgba(30, 30, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

body.dark-mode .register-modal-header {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15), rgba(var(--secondary-color-rgb), 0.15));
}

body.dark-mode .form-input {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-color);
}

body.dark-mode .form-input:focus {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .package-card,
body.dark-mode .duration-btn-card {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .register-form-footer {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .applied-stores-table {
    background: rgba(30, 30, 30, 0.9);
}

body.dark-mode .applied-stores-table th {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.2), rgba(var(--secondary-color-rgb), 0.2));
}

body.dark-mode .registration-header h2 {
    color: #ffffff;
}

body.dark-mode .close-btn {
    color: #cccccc;
}

body.dark-mode .close-btn:hover {
    background-color: rgba(220, 53, 69, 0.2);
    color: #ff6b6b;
}

/* ===== Mobile Responsive for New Features ===== */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .package-selection {
        grid-template-columns: 1fr;
    }

    .duration-selection {
        grid-template-columns: repeat(2, 1fr);
    }

    .register-modal {
        width: calc(100% - 20px);
        max-height: 95vh;
    }

    .register-modal-header {
        padding: 25px 20px 15px;
    }

    .register-modal-title {
        font-size: 1.5rem;
    }

    .register-modal-body {
        padding: 25px 20px;
    }

    .register-form-footer {
        padding: 20px;
    }

    .applied-stores-table .table-wrapper {
        overflow-x: auto;
    }

    .applied-stores-table {
        min-width: 600px;
    }
}

@media (max-width: 480px) {
    .duration-selection {
        grid-template-columns: 1fr;
    }

    .btn-register {
        padding: 12px 25px;
        font-size: 1rem;
    }

    .btn-open-new-store {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .applied-stores-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .package-price {
        font-size: 1.5rem;
    }

    .duration-text {
        font-size: 1rem;
    }
}

/* ===== Loading States ===== */
.register-loading {
    position: relative;
    pointer-events: none;
}

.register-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===== Success/Error Messages ===== */
.form-message {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 500;
    display: none;
}

.form-message.success {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.form-message.error {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.form-message.show {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================= */
/* ===== END: New Feature Styles ===== */
/* ================================================= */

/* ===== Registration Modal Styles ===== */
#registration-modal .modal-content {
    max-width: 600px;
    max-height: 90vh;
}

#registration-form {
    max-height: calc(90vh - 120px);
    overflow-y: auto;
    padding-right: 10px;
}

.form-section {
    margin-bottom: 25px;
    padding: 20px;
    background: var(--background-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.form-section h3 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
    font-size: 1.1rem;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
    text-align: left;
}

.required {
    color: var(--danger-color);
    font-weight: bold;
}

.contact-info-text {
    font-size: 0.9rem;
    color: var(--text-color);
    margin-bottom: 10px;
    font-style: italic;
}

.registration-error,
.registration-success {
    padding: 12px 16px;
    border-radius: 8px;
    margin: 15px 0;
    font-weight: 500;
    display: none;
}

.registration-error {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.registration-success {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.registration-error.show,
.registration-success.show {
    display: block;
    animation: slideDown 0.3s ease;
}

#reg-package-selector {
    margin-top: 10px;
}

#reg-package-selector label {
    margin-bottom: 15px;
    padding: 20px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    background: rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

#reg-package-selector label:hover {
    border-color: #ff6b35;
    background: rgba(255, 107, 53, 0.1);
    transform: translateY(-2px);
}

#reg-package-selector label::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

#reg-package-selector label:hover::before {
    left: 100%;
}

/* Standard Package Styling */
#reg-package-selector label:nth-child(1) {
    background: linear-gradient(135deg,
            rgba(192, 192, 192, 0.15) 0%,
            rgba(169, 169, 169, 0.1) 50%,
            rgba(128, 128, 128, 0.15) 100%);
    border-color: rgba(192, 192, 192, 0.3);
}

#reg-package-selector label:nth-child(1):hover {
    border-color: #c0c0c0;
    box-shadow: 0 8px 25px rgba(192, 192, 192, 0.3);
}

/* Premium Package Styling - Enhanced Metallic Gold Effect */
#reg-package-selector label:nth-child(3) {
    background: linear-gradient(135deg,
            #b67b28 0%,
            #f3c876 30%,
            #ffd700 50%,
            #f3c876 70%,
            #b67b28 100%);
    border-color: #ffd700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
    position: relative;
}

#reg-package-selector label:nth-child(3)::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ffd700, #ffb347, #ffd700, #ffed4e, #ffd700);
    border-radius: 14px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#reg-package-selector label:nth-child(3):hover {
    border-color: #ffd700;
    box-shadow:
        0 8px 25px rgba(255, 215, 0, 0.4),
        0 0 20px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-3px) scale(1.02);
}

#reg-package-selector label:nth-child(3):hover::after {
    opacity: 1;
}

/* Checked State for Standard */
#reg-package-selector input[type="radio"][value="standard"]:checked+span {
    color: #c0c0c0;
    font-weight: 600;
}

#reg-package-selector input[type="radio"][value="standard"]:checked~span {
    color: #c0c0c0;
}

#reg-package-selector input[type="radio"][value="standard"]:checked+label {
    border-color: #c0c0c0;
    background: linear-gradient(135deg,
            rgba(192, 192, 192, 0.25) 0%,
            rgba(169, 169, 169, 0.2) 50%,
            rgba(128, 128, 128, 0.25) 100%);
    box-shadow: 0 0 0 3px rgba(192, 192, 192, 0.3), 0 6px 20px rgba(192, 192, 192, 0.2);
    transform: translateY(-2px);
}

/* Checked State for Premium - Enhanced Gold Effect */
#reg-package-selector input[type="radio"][value="premium"]:checked+span {
    color: #8b4513;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#reg-package-selector input[type="radio"][value="premium"]:checked~span {
    color: #8b4513;
}

#reg-package-selector input[type="radio"][value="premium"]:checked+label {
    border-color: #ffd700;
    background: linear-gradient(135deg,
            #8b6914 0%,
            #daa520 25%,
            #ffd700 50%,
            #daa520 75%,
            #8b6914 100%);
    box-shadow:
        0 0 0 3px rgba(255, 215, 0, 0.4),
        0 10px 30px rgba(255, 215, 0, 0.5),
        0 0 25px rgba(255, 215, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-4px) scale(1.03);
    animation: premiumGlow 2s ease-in-out infinite alternate;
}

#reg-package-selector input[type="radio"][value="premium"]:checked+label::after {
    opacity: 1;
    animation: premiumBorderGlow 1.5s ease-in-out infinite alternate;
}

/* Premium Animation Keyframes */
@keyframes premiumGlow {
    0% {
        box-shadow:
            0 0 0 3px rgba(255, 215, 0, 0.4),
            0 10px 30px rgba(255, 215, 0, 0.5),
            0 0 25px rgba(255, 215, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    100% {
        box-shadow:
            0 0 0 3px rgba(255, 215, 0, 0.6),
            0 10px 30px rgba(255, 215, 0, 0.7),
            0 0 35px rgba(255, 215, 0, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
}

@keyframes premiumBorderGlow {
    0% {
        background: linear-gradient(45deg, #ffd700, #ffb347, #ffd700, #ffed4e, #ffd700);
    }

    100% {
        background: linear-gradient(45deg, #ffed4e, #ffd700, #ffb347, #ffd700, #ffed4e);
    }
}

/* Fix radio button styling */
#reg-package-selector input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.3);
    accent-color: #ff6b35;
}

#reg-package-selector input[type="radio"]:checked+span {
    color: #ff6b35 !important;
    font-weight: 600;
}

#reg-package-selector input[type="radio"]:checked~span {
    color: #ff6b35 !important;
}

/* Override any conflicting styles */
#reg-package-selector input[type="radio"]:checked+span,
#reg-package-selector input[type="radio"]:checked~span {
    color: #ff6b35 !important;
    text-shadow: none !important;
}

/* Ensure no green color bleeds through */
#reg-package-selector * {
    accent-color: #ff6b35;
}

/* Override any global radio styles that might affect our selector */
#reg-package-selector input[type="radio"]:checked {
    accent-color: #ff6b35 !important;
}

#reg-package-selector input[type="radio"]:checked::before {
    color: #ff6b35 !important;
}

/* CRITICAL: Force override all potential conflicting green styles */
#reg-package-selector input[type="radio"]:checked+span,
#reg-package-selector input[type="radio"]:checked+span *,
#reg-package-selector input[type="radio"]:checked~span,
#reg-package-selector input[type="radio"]:checked~span * {
    color: #ff6b35 !important;
    background-color: transparent !important;
    border-color: #ff6b35 !important;
}

/* Remove any form-control or similar classes that might add green */
#reg-package-selector .form-control:checked,
#reg-package-selector .btn:checked,
#reg-package-selector label input:checked+span {
    color: #ff6b35 !important;
}

/* FINAL OVERRIDE: Target all possible selectors that could add green */
#reg-package-selector [name="regPackage"]:checked+span,
#reg-package-selector [name="regPackage"]:checked~span {
    color: #ff6b35 !important;
    background: transparent !important;
}

/* Override any checkbox/radio pseudo elements */
#reg-package-selector input[type="radio"]:checked::before,
#reg-package-selector input[type="radio"]:checked::after {
    color: #ff6b35 !important;
}

/* Force remove any green background or text from selected state */
#reg-package-selector input:checked~span,
#reg-package-selector input:checked+span {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Target the specific radio group for packages */
div[id="reg-package-selector"] input[type="radio"]:checked+span,
div[id="reg-package-selector"] input[type="radio"]:checked~span {
    color: #ff6b35 !important;
    background: none !important;
}

#registration-form .form-group {
    margin-bottom: 15px;
}

#registration-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

#registration-form input[type="text"],
#registration-form input[type="password"],
#registration-form input[type="url"],
#registration-form input[type="tel"],
#registration-form select,
#registration-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#registration-form input:focus,
#registration-form select:focus,
#registration-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1);
}

#registration-modal .modal-actions {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

.registration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 10px;
}

.registration-header h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);
    flex: 1;
    text-align: left;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
    padding: 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.close-btn:hover {
    background-color: rgba(var(--danger-color-rgb, 220, 53, 69), 0.1);
    color: var(--danger-color);
    transform: scale(1.1);
}

.close-btn:active {
    transform: scale(0.95);
}

.submit-single-btn {
    min-width: 250px;
    font-size: 1.1rem;
    padding: 15px 30px;
    display: block;
    margin: 0 auto;
}

/* ===== Package Settings Styles ===== */
.package-settings-container {
    max-width: 800px;
}

.package-settings-item {
    background: var(--card-bg, #ffffff);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #dee2e6);
    box-shadow: var(--shadow, 0 4px 8px rgba(0, 0, 0, 0.1));
    margin-bottom: 20px;
}

.package-settings-item h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--primary-color, #28a745);
    font-size: 1.4rem;
    font-weight: 600;
}

/* ===== Product Visibility Button Styles ===== */
.toggle-product-visibility {
    background: none;
    border: 2px solid transparent;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 40px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-product-visibility.btn-info {
    background-color: rgba(var(--info-color-rgb, 23, 162, 184), 0.1);
    color: var(--info-color, #17a2b8);
    border-color: var(--info-color, #17a2b8);
}

.toggle-product-visibility.btn-info:hover {
    background-color: var(--info-color, #17a2b8);
    color: white;
    transform: scale(1.1);
}

.toggle-product-visibility.btn-warning {
    background-color: rgba(var(--warning-color-rgb, 255, 193, 7), 0.1);
    color: var(--warning-color, #ffc107);
    border-color: var(--warning-color, #ffc107);
}

.toggle-product-visibility.btn-warning:hover {
    background-color: var(--warning-color, #ffc107);
    color: white;
    transform: scale(1.1);
}

.toggle-product-visibility:active {
    transform: scale(0.95);
}

/* ===== Responsive Design for Package Settings ===== */
@media (max-width: 768px) {
    .package-settings-item {
        padding: 20px;
        margin-bottom: 15px;
    }

    .package-settings-item h3 {
        font-size: 1.2rem;
    }

    .toggle-product-visibility {
        font-size: 1rem;
        padding: 6px 8px;
        min-width: 36px;
        height: 32px;
    }
}

/* ===== END: Registration Modal Styles ===== */


/* ===== START: Advanced Dashboard Styles ===== */

/* Dashboard Section Headers */
.card.admin-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

/* Sales Period Controls */
#sales-period-controls {
    flex-wrap: wrap;
    gap: 8px;
}

#sales-period-controls .btn.active,
#top10-items-controls .btn.active,
#bottom3-items-controls .btn.active,
#busiest-days-controls .btn.active,
#top-items-controls .btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Dashboard Tables */
#category-sales-table,
#popular-categories-table,
#top10-products-table,
#bottom3-products-table,
#repeat-products-table,
#busiest-days-table,
#peak-hours-table,
#no-orders-7days-table,
#no-orders-30days-table {
    width: 100%;
    border-collapse: collapse;
}

#category-sales-table th,
#popular-categories-table th,
#top10-products-table th,
#bottom3-products-table th,
#repeat-products-table th,
#busiest-days-table th,
#peak-hours-table th,
#no-orders-7days-table th,
#no-orders-30days-table th {
    background-color: var(--primary-color);
    color: white;
    padding: 10px;
    text-align: left;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 1;
}

#category-sales-table td,
#popular-categories-table td,
#top10-products-table td,
#bottom3-products-table td,
#repeat-products-table td,
#busiest-days-table td,
#peak-hours-table td,
#no-orders-7days-table td,
#no-orders-30days-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

#category-sales-table tbody tr:hover,
#popular-categories-table tbody tr:hover,
#top10-products-table tbody tr:hover,
#bottom3-products-table tbody tr:hover,
#repeat-products-table tbody tr:hover,
#busiest-days-table tbody tr:hover,
#peak-hours-table tbody tr:hover,
#no-orders-7days-table tbody tr:hover,
#no-orders-30days-table tbody tr:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
}

/* Rank Badges */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.85rem;
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333;
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
    color: #333;
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #CD7F32, #8B4513);
    color: white;
}

.rank-badge.rank-default {
    background-color: var(--surface-color);
    border: 2px solid var(--border-color);
    color: var(--text-color);
}

/* No Orders Warning */
#no-orders-7days-count,
#no-orders-30days-count {
    font-size: 1.8rem;
    font-weight: 600;
}

/* Peak Hours Table */
#peak-hours-table .time-slot {
    background-color: rgba(var(--info-color-rgb, 23, 162, 184), 0.1);
    padding: 5px 10px;
    border-radius: 15px;
    font-weight: 500;
}

/* Product Select Dropdown */
#product-sales-select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--surface-color);
    color: var(--text-color);
    font-size: 1rem;
}

/* Chart Container Enhanced */
.chart-container {
    position: relative;
    min-height: 250px;
}

/* Dashboard Grid Improvements */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* Stat Card Enhancements */
.stat-card {
    padding: 20px;
    border-radius: 12px;
    background-color: var(--surface-color);
    box-shadow: var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hover-shadow);
}

.stat-card h3 {
    font-size: 0.9rem;
    margin-bottom: 8px;
    opacity: 0.9;
}

.stat-card .value {
    font-size: 1.5rem;
    font-weight: 600;
}

/* Empty State for Tables */
.empty-state {
    text-align: center;
    padding: 30px;
    color: var(--text-muted, #6c757d);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 10px;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 1rem;
}

/* Bottom 3 Candlestick Style */
.bottom-product-item {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background-color: var(--surface-color);
    border-radius: 10px;
    border-left: 4px solid var(--danger-color);
    box-shadow: var(--shadow);
}

.bottom-product-item .product-info {
    flex: 1;
}

.bottom-product-item .product-name {
    font-weight: 500;
    margin-bottom: 5px;
}

.bottom-product-item .product-stats {
    font-size: 0.85rem;
    color: var(--text-muted, #6c757d);
}

/* Responsive Dashboard */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    #sales-period-controls .btn,
    #top10-items-controls .btn,
    #bottom3-items-controls .btn,
    #busiest-days-controls .btn {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    .stat-card .value {
        font-size: 1.3rem;
    }

    .chart-container {
        min-height: 200px;
    }
}

/* Dark Mode Support for Dashboard */
[data-theme="dark"] .rank-badge.rank-default {
    background-color: var(--surface-color);
    border-color: var(--border-color);
}

[data-theme="dark"] #product-sales-select {
    background-color: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .bottom-product-item {
    background-color: var(--surface-color);
}

/* ===== END: Advanced Dashboard Styles ===== */

/* ============================================================= */
/* ===== START: Manager Store Modern Design System ===== */
/* ============================================================= */

/* --- Manager Store Card Design --- */
.ms-card {
    background-color: var(--surface-color);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.ms-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.ms-card h2 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ms-card p {
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 20px;
}

/* --- Floating Table Design --- */
.ms-floating-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
}

.ms-floating-table thead th {
    background: transparent;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-color);
    opacity: 0.7;
    border: none;
}

.ms-floating-table tbody tr {
    background-color: var(--surface-color);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.ms-floating-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.ms-floating-table tbody td {
    padding: 16px;
    border: none;
    vertical-align: middle;
}

.ms-floating-table tbody td:first-child {
    border-radius: 12px 0 0 12px;
}

.ms-floating-table tbody td:last-child {
    border-radius: 0 12px 12px 0;
}

body.dark-mode .ms-floating-table tbody tr {
    background-color: #2a2a2a;
}

/* --- Status Badges (Pill Shape) --- */
.ms-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.ms-status-badge.pending {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe8a3 100%);
    color: #856404;
}

.ms-status-badge.approved {
    background: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%);
    color: #0f5132;
}

.ms-status-badge.rejected {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c2c7 100%);
    color: #842029;
}

.ms-status-badge.active {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
}

.ms-status-badge.paused {
    background: linear-gradient(135deg, #ffeeba 0%, #ffe69c 100%);
    color: #856404;
}

.ms-status-badge.expired {
    background: linear-gradient(135deg, #f5c6cb 0%, #f1aeb5 100%);
    color: #721c24;
}

.ms-status-badge.locked {
    background: linear-gradient(135deg, #d6d8db 0%, #c6c8ca 100%);
    color: #383d41;
}

.ms-status-badge.unused {
    background: linear-gradient(135deg, #cce5ff 0%, #b8daff 100%);
    color: #004085;
}

.ms-status-badge.used {
    background: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%);
    color: #0f5132;
}

body.dark-mode .ms-status-badge.pending {
    background: linear-gradient(135deg, #5c4a1e 0%, #4a3c15 100%);
    color: #ffc107;
}

body.dark-mode .ms-status-badge.approved,
body.dark-mode .ms-status-badge.active {
    background: linear-gradient(135deg, #1e4d2b 0%, #153d22 100%);
    color: #28a745;
}

body.dark-mode .ms-status-badge.rejected,
body.dark-mode .ms-status-badge.expired {
    background: linear-gradient(135deg, #4d1e24 0%, #3d151a 100%);
    color: #dc3545;
}

body.dark-mode .ms-status-badge.paused {
    background: linear-gradient(135deg, #4a3c15 0%, #3d320f 100%);
    color: #ffc107;
}

/* --- Package Badges --- */
.ms-package-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

.ms-package-badge.standard {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
}

.ms-package-badge.premium {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #333;
}

/* --- Gradient Stat Cards --- */
.ms-stat-card {
    padding: 24px;
    border-radius: 16px;
    color: white;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.ms-stat-card:hover {
    transform: translateY(-5px);
}

.ms-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(30%, -30%);
}

.ms-stat-card.primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #20c997 100%);
}

.ms-stat-card.info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.ms-stat-card.warning {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: #333;
}

.ms-stat-card.danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.ms-stat-card.purple {
    background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
}

.ms-stat-card h4 {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 8px;
    text-align: left;
    color: inherit;
}

.ms-stat-card .value {
    font-size: 2rem;
    font-weight: 700;
}

.ms-stat-card .icon {
    position: absolute;
    right: 20px;
    bottom: 15px;
    font-size: 3rem;
    opacity: 0.3;
}

/* --- Stats Grid --- */
.ms-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* --- Stat Cards with Colorful Gradients (No White) --- */
.ms-stat-card {
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    min-height: 110px;
}

.ms-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ms-stat-card.success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.ms-stat-card.warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #1a1a1a;
}

.ms-stat-card.danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.ms-stat-card.primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
}

.ms-stat-card.info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
}

.ms-stat-card.secondary {
    background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
    color: white;
}

.ms-stat-card h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.95;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.ms-stat-card .ms-stat-value {
    font-size: 2rem;
    font-weight: 800;
    margin: 5px 0;
    line-height: 1;
}

.ms-stat-card .ms-stat-label {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* --- Action Buttons --- */
.ms-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.ms-action-btn.view {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
}

.ms-action-btn.approve {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
}

.ms-action-btn.reject,
.ms-action-btn.delete {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.ms-action-btn.pause {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #333;
}

.ms-action-btn.resume {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.ms-action-btn.dashboard {
    background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
    color: white;
}

.ms-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ms-action-btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Online/Offline Indicator --- */
.ms-online-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.ms-online-indicator.online {
    background-color: #28a745;
    box-shadow: 0 0 8px #28a745;
    animation: ms-pulse 1.5s infinite;
}

.ms-online-indicator.offline {
    background-color: #6c757d;
}

@keyframes ms-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* --- Countdown Display --- */
.ms-countdown {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ms-countdown-unit {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1) 0%, rgba(var(--primary-color-rgb), 0.05) 100%);
    padding: 8px 12px;
    border-radius: 10px;
    text-align: center;
    min-width: 50px;
}

.ms-countdown-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.ms-countdown-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.ms-countdown.expired .ms-countdown-unit {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
}

.ms-countdown.expired .ms-countdown-value {
    color: var(--danger-color);
}

/* --- Serial Key Display --- */
.ms-serial-key {
    font-family: 'Consolas', 'Monaco', monospace;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.dark-mode .ms-serial-key {
    background: linear-gradient(135deg, #333 0%, #2a2a2a 100%);
}

/* --- User/Pass Container --- */
.ms-userpass {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ms-userpass-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.ms-userpass-label {
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.7;
    min-width: 45px;
}

.ms-userpass-value {
    font-family: 'Consolas', 'Monaco', monospace;
}

/* --- Empty State --- */
.ms-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-color);
    opacity: 0.6;
}

.ms-empty-state-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.ms-empty-state-text {
    font-size: 1rem;
}

/* --- Section Divider --- */
.ms-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin: 30px 0;
}

/* --- Serial Key Generator --- */
.ms-generator {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05) 0%, rgba(var(--primary-color-rgb), 0.02) 100%);
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 24px;
}

.ms-duration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.ms-duration-btn {
    padding: 14px 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.ms-duration-btn:hover {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.1);
}

.ms-duration-btn.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color) 0%, #20c997 100%);
    color: white;
}

.ms-duration-btn .duration-time {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.ms-duration-btn .duration-label {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* --- Generated Key Box --- */
.ms-key-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

body.dark-mode .ms-key-box {
    background: linear-gradient(135deg, #333 0%, #2a2a2a 100%);
}

.ms-key-box .key-text {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 2px;
}

/* --- Payment Channel Card --- */
.ms-payment-channel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--surface-color);
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ms-payment-channel-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ms-payment-channel-bank {
    font-weight: 600;
    font-size: 1rem;
}

.ms-payment-channel-account {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* --- Dashboard Charts --- */
.ms-chart-card {
    background-color: var(--surface-color);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 24px;
}

.ms-chart-card h3 {
    text-align: left;
    margin-bottom: 16px;
    font-size: 1.1rem;
}

/* --- Online Status Grid --- */
.ms-online-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.ms-online-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--surface-color);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ms-online-card .store-name {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Filter Bar --- */
.ms-filter-bar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(var(--primary-color-rgb), 0.05);
    border-radius: 12px;
}

.ms-filter-bar .form-group {
    margin-bottom: 0;
}

.ms-filter-bar select {
    min-width: 150px;
    margin-bottom: 0;
}

/* --- Modal Enhancements --- */
#admin-menu-manager-store .modal-content {
    border-radius: 16px;
    max-width: 600px;
}

#admin-menu-manager-store .modal-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* --- Responsive Manager Store --- */
@media (max-width: 1024px) {
    .ms-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ms-card {
        padding: 16px;
        border-radius: 12px;
    }

    .ms-stats-grid {
        grid-template-columns: 1fr;
    }

    .ms-stat-card {
        padding: 16px;
    }

    .ms-stat-card .value {
        font-size: 1.5rem;
    }

    .ms-floating-table {
        display: block;
    }

    .ms-floating-table thead {
        display: none;
    }

    .ms-floating-table tbody tr {
        display: block;
        margin-bottom: 16px;
        padding: 16px;
        border-radius: 12px;
    }

    .ms-floating-table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .ms-floating-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 16px;
    }

    .ms-floating-table tbody td:first-child,
    .ms-floating-table tbody td:last-child {
        border-radius: 0;
    }

    .ms-floating-table tbody td:last-child {
        border-bottom: none;
        justify-content: center;
    }

    .ms-action-btn-group {
        justify-content: center;
    }

    .ms-countdown {
        justify-content: center;
    }

    .ms-filter-bar {
        flex-direction: column;
    }

    .ms-filter-bar select {
        width: 100%;
    }

    .ms-duration-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ms-online-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .ms-action-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .ms-countdown-unit {
        padding: 6px 8px;
        min-width: 40px;
    }

    .ms-countdown-value {
        font-size: 1rem;
    }

    .ms-duration-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================= */
/* ===== END: Manager Store Modern Design System ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Modern Package Cards Design ===== */
/* ============================================================= */

.ms-package-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.ms-package-card-option {
    cursor: pointer;
    display: block;
}

.ms-package-card-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ms-package-card {
    position: relative;
    padding: 25px 20px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border: 3px solid transparent;
}

.ms-package-card.silver {
    background: linear-gradient(145deg, #e8e8e8 0%, #c0c0c0 25%, #d8d8d8 50%, #a8a8a8 75%, #c0c0c0 100%);
    box-shadow: 0 10px 30px rgba(128, 128, 128, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ms-package-card.silver:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(128, 128, 128, 0.4);
}

.ms-package-card.gold {
    background: linear-gradient(145deg, #ffd700 0%, #b8860b 20%, #ffd700 40%, #daa520 60%, #ffd700 80%, #b8860b 100%);
    box-shadow: 0 10px 30px rgba(218, 165, 32, 0.4);
}

.ms-package-card.gold:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 25px 50px rgba(255, 215, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.3);
}

.ms-package-card-option input[type="radio"]:checked+.ms-package-card {
    border-color: var(--primary-color);
    transform: translateY(-5px) scale(1.02);
}

.ms-package-card-option input[type="radio"]:checked+.ms-package-card.silver {
    border-color: #6c757d;
    box-shadow: 0 0 0 4px rgba(108, 117, 125, 0.3), 0 15px 35px rgba(128, 128, 128, 0.4);
}

.ms-package-card-option input[type="radio"]:checked+.ms-package-card.gold {
    border-color: #b8860b;
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.4), 0 20px 40px rgba(255, 215, 0, 0.5);
}

.ms-package-card .card-ribbon {
    position: absolute;
    top: 15px;
    right: -35px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 40px;
    font-size: 0.75rem;
    font-weight: 600;
    transform: rotate(45deg);
}

.ms-package-card .card-ribbon.hot {
    background: linear-gradient(90deg, #ff4444, #ff6b35);
}

.ms-package-card .card-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.ms-package-card .card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 15px 0;
}

.ms-package-card .card-price {
    margin-bottom: 20px;
}

.ms-package-card .card-price .amount {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1a1a1a;
}

.ms-package-card .card-price .period {
    font-size: 0.9rem;
    color: #555;
}

.ms-package-card .card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.ms-package-card .card-features li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    color: #333;
}

.ms-package-card .card-features li:last-child {
    border-bottom: none;
}

body.dark-mode .ms-package-card.silver {
    background: linear-gradient(145deg, #4a4a4a, #6b6b6b, #5a5a5a);
}

body.dark-mode .ms-package-card.gold {
    background: linear-gradient(145deg, #b8860b, #8b6914, #daa520);
}

body.dark-mode .ms-package-card .card-title,
body.dark-mode .ms-package-card .card-price .amount {
    color: #fff;
}

body.dark-mode .ms-package-card .card-features li {
    color: #eee;
}

@media (max-width: 600px) {
    .ms-package-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================= */
/* ===== END: Modern Package Cards Design ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Modern Radio Group Tabs ===== */
/* ============================================================= */

.radio-group-tabs {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

.radio-group-tabs label {
    position: relative;
    cursor: pointer;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    user-select: none;
}

.radio-group-tabs input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-group-tabs label:hover {
    background: rgba(0, 0, 0, 0.08);
}

.radio-group-tabs input[type="radio"]:checked+span {
    color: white;
}

.radio-group-tabs label:has(input[type="radio"]:checked) {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

body.dark-mode .radio-group-tabs {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .radio-group-tabs label:hover {
    background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 600px) {
    .radio-group-tabs {
        width: 100%;
    }

    .radio-group-tabs label {
        flex: 1;
        text-align: center;
    }
}

/* ============================================================= */
/* ===== END: Modern Radio Group Tabs ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Compact Message Target Tabs ===== */
/* ============================================================= */

.message-target-tabs {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.message-target-tabs .msg-tab {
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.message-target-tabs .msg-tab:hover {
    background: rgba(var(--primary-color-rgb), 0.1);
    border-color: var(--primary-color);
}

.message-target-tabs .msg-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

body.dark-mode .message-target-tabs .msg-tab {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .message-target-tabs .msg-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* ============================================================= */
/* ===== END: Compact Message Target Tabs ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Compact Serial Key Generator ===== */
/* ============================================================= */

.sk-generator-compact {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 15px;
}

.sk-gen-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.sk-gen-icon {
    font-size: 1.2rem;
}

.sk-gen-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
}

.sk-gen-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sk-duration-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

.sk-dur-btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.sk-dur-btn input {
    display: none;
}

.sk-dur-btn span {
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sk-dur-btn:hover span {
    border-color: var(--primary-color);
}

.sk-dur-btn input:checked+span,
.sk-dur-btn.active span {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.sk-dur-btn.free span {
    border-color: #28a745;
}

.sk-dur-btn.free input:checked+span {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.sk-dur-btn.premium span {
    border-color: #ffc107;
}

.sk-dur-btn.premium input:checked+span {
    background: linear-gradient(135deg, #ffc107, #ff9500);
    color: #000;
}

.sk-generate-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--primary-color), #0056b3);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sk-generate-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* Compact Result Display */
.sk-result-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(32, 201, 151, 0.1));
    border: 1px solid rgba(40, 167, 69, 0.3);
    border-radius: 8px;
}

.sk-result-label {
    font-weight: 600;
    color: #28a745;
    font-size: 0.85rem;
}

.sk-key-code {
    padding: 4px 10px;
    background: #000;
    color: #00ff88;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: 600;
}

.sk-copy-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.sk-copy-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.sk-result-info {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    margin-left: auto;
}

/* Serial Keys List - Compact Card Style */
.sk-list-container {
    max-height: 35vh;
    overflow-y: auto;
}

.sk-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sk-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    flex-wrap: wrap;
}

.sk-item-key {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.08);
    padding: 3px 8px;
    border-radius: 4px;
    min-width: 120px;
}

.sk-item-store {
    font-size: 0.8rem;
    color: var(--text-color);
    flex: 1;
    min-width: 100px;
}

.sk-item-duration {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: var(--primary-color);
    color: white;
    border-radius: 10px;
}

.sk-item-countdown {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    min-width: 80px;
    text-align: center;
}

.sk-item-status {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
}

.sk-item-status.active {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.sk-item-status.used {
    background: rgba(0, 123, 255, 0.2);
    color: #007bff;
}

.sk-item-status.expired {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

.sk-item-actions {
    display: flex;
    gap: 4px;
}

.sk-item-actions button {
    padding: 4px 8px;
    font-size: 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.sk-item-actions button:hover {
    background: rgba(0, 0, 0, 0.1);
}

.sk-empty-state {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary-color);
    font-size: 0.9rem;
}

/* Dark mode */
body.dark-mode .sk-generator-compact {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .sk-dur-btn span {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .sk-list-item {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .sk-item-key {
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive - Small devices */
@media (max-width: 600px) {
    .sk-gen-row {
        flex-direction: column;
        align-items: stretch;
    }

    .sk-duration-btns {
        justify-content: center;
    }

    .sk-generate-btn {
        width: 100%;
        text-align: center;
    }

    .sk-result-compact {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .sk-result-info {
        margin-left: 0;
        margin-top: 5px;
    }

    .sk-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .sk-item-row {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }
}

/* ============================================================= */
/* ===== END: Compact Serial Key Generator ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: New Product Dashboard Styles ===== */
/* ============================================================= */

.pd-dashboard-new {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.pd-header-new {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pd-icon {
    font-size: 2rem;
}

.pd-header-left h2 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-color);
}

.pd-header-left p {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary-color);
}

.pd-header-actions {
    display: flex;
    gap: 8px;
}

.pd-refresh-btn,
.pd-settings-btn {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pd-refresh-btn:hover,
.pd-settings-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.05);
}

/* Category Filters */
.pd-category-filters {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 15px;
}

.pd-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.pd-filter-header span {
    font-weight: 600;
    font-size: 0.9rem;
}

.pd-filter-toggle {
    padding: 4px 10px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 0.75rem;
    cursor: pointer;
}

.pd-filter-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pd-filter-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.pd-filter-item:hover {
    background: rgba(0, 123, 255, 0.1);
}

.pd-filter-item input {
    margin: 0;
    cursor: pointer;
}

.pd-filter-item.checked {
    background: var(--primary-color);
    color: white;
}

/* Stats Row */
.pd-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.pd-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 10px;
    background: var(--surface-color);
    border-radius: 10px;
    border-left: 4px solid;
}

.pd-stat.total {
    border-color: #6c757d;
}

.pd-stat.warning {
    border-color: #ffc107;
}

.pd-stat.danger {
    border-color: #dc3545;
}

.pd-stat.success {
    border-color: #28a745;
}

.pd-stat .stat-icon {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.pd-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.pd-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
}

/* Sections */
.pd-section {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
}

.pd-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-section-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-color);
}

.pd-section-desc {
    margin: 0 0 12px;
    font-size: 0.8rem;
    color: var(--text-secondary-color);
}

.pd-badge {
    padding: 2px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.pd-badge.danger {
    background: #dc3545;
    color: white;
}

/* Sort Buttons */
.pd-sort-btns {
    display: flex;
    gap: 5px;
}

.pd-sort-btn {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pd-sort-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Alerts List */
.pd-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.pd-alert-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 8px;
}

.pd-alert-item .alert-name {
    flex: 1;
    font-weight: 500;
    font-size: 0.9rem;
}

.pd-alert-item .alert-stock {
    font-weight: 600;
    color: #dc3545;
    animation: blink-red 1s infinite;
}

@keyframes blink-red {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.pd-alert-item .alert-cat {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.pd-empty-state {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary-color);
    font-size: 0.9rem;
}

/* Table */
.pd-table-wrapper {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

.pd-table-new {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.pd-table-new th,
.pd-table-new td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.pd-table-new th {
    background: rgba(0, 0, 0, 0.03);
    font-weight: 600;
    position: sticky;
    top: 0;
}

.pd-table-new .pd-empty {
    text-align: center;
    color: var(--text-secondary-color);
    padding: 30px;
}

.pd-stock-critical {
    color: #dc3545;
    font-weight: 600;
    animation: blink-red 1s infinite;
}

.pd-stock-warning {
    color: #ffc107;
    font-weight: 600;
}

.pd-stock-ok {
    color: #28a745;
}

/* Settings Modal */
.pd-settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.pd-settings-content {
    background: var(--bg-color);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pd-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-color);
}

.pd-settings-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.pd-close-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--text-secondary-color);
}

.pd-settings-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.pd-settings-section {
    margin-bottom: 20px;
}

.pd-settings-section h4 {
    margin: 0 0 5px;
    font-size: 0.95rem;
}

.pd-settings-section p {
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: var(--text-secondary-color);
}

.pd-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-input-group input {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    width: 100px;
}

.pd-category-thresholds {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.pd-cat-threshold-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.pd-cat-threshold-item .cat-name {
    flex: 1;
    font-size: 0.85rem;
}

.pd-cat-threshold-item input {
    width: 70px;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.85rem;
}

.pd-settings-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
}

.pd-save-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--primary-color), #0056b3);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pd-save-btn:hover {
    transform: scale(1.02);
}

/* Responsive */
@media (max-width: 600px) {
    .pd-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .pd-header-new {
        flex-direction: column;
        align-items: flex-start;
    }

    .pd-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Dark mode */
body.dark-mode .pd-dashboard-new .pd-section,
body.dark-mode .pd-dashboard-new .pd-category-filters,
body.dark-mode .pd-dashboard-new .pd-stat {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .pd-filter-item {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================================= */
/* ===== END: New Product Dashboard Styles ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Manager Stores Updates - Compact Styles ===== */
/* ============================================================= */

/* --- Package Cards Responsive (Side-by-side on small screens) --- */
@media (max-width: 480px) {
    .ms-package-cards-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .ms-package-card {
        padding: 12px 8px !important;
    }

    .ms-package-card .card-icon {
        font-size: 1.5rem !important;
    }

    .ms-package-card .card-title {
        font-size: 0.9rem !important;
        margin-bottom: 8px !important;
    }

    .ms-package-card .card-price .amount {
        font-size: 1.2rem !important;
    }

    .ms-package-card .card-features li {
        font-size: 0.7rem !important;
        padding: 4px 0 !important;
    }

    /* Registration modal package cards */
    .package-selection {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .package-card {
        padding: 15px 10px !important;
    }

    .package-name {
        font-size: 1rem !important;
    }

    .package-price {
        font-size: 1.3rem !important;
        margin-bottom: 10px !important;
    }

    .package-features li {
        font-size: 0.75rem !important;
        padding: 3px 0 !important;
        padding-left: 18px !important;
    }
}

/* --- Compact Countdown Timer (Single Line) --- */
.ms-countdown-compact {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    white-space: nowrap;
    font-family: 'Consolas', 'Monaco', monospace;
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.08) 0%, rgba(var(--primary-color-rgb), 0.03) 100%);
    padding: 4px 8px;
    border-radius: 6px;
}

.ms-countdown-compact .cd-unit {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}

.ms-countdown-compact .cd-value {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.75rem;
}

.ms-countdown-compact .cd-label {
    font-size: 0.6rem;
    opacity: 0.7;
    margin-right: 3px;
}

.ms-countdown-compact.expired {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
}

.ms-countdown-compact.expired .cd-value {
    color: var(--danger-color);
}

/* --- Compact User/Pass Display with Real-time Toggle --- */
.ms-userpass-compact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.75rem;
    white-space: nowrap;
}

.ms-userpass-compact .user-row,
.ms-userpass-compact .pass-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ms-userpass-compact .label {
    font-weight: 600;
    opacity: 0.7;
    min-width: 35px;
    font-size: 0.65rem;
}

.ms-userpass-compact .value {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.7rem;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
}

.ms-userpass-compact .btn-toggle-pass {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.ms-userpass-compact .btn-toggle-pass:hover {
    background: rgba(var(--primary-color-rgb), 0.1);
    opacity: 1;
}

body.dark-mode .ms-userpass-compact .value {
    background: rgba(255, 255, 255, 0.1);
}

/* --- Compact Action Buttons (Single Line) --- */
.ms-action-compact {
    display: inline-flex;
    gap: 3px;
    flex-wrap: nowrap;
}

.ms-action-compact .ms-action-btn {
    padding: 4px 8px !important;
    font-size: 0.65rem !important;
    border-radius: 5px !important;
    white-space: nowrap;
}

.ms-action-compact .ms-action-btn.icon-only {
    padding: 4px 6px !important;
    font-size: 0.8rem !important;
}

/* --- Modern Serial Key Generator --- */
.ms-serial-generator-hero {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1) 0%, rgba(var(--secondary-color-rgb), 0.1) 100%);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

.ms-serial-generator-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.ms-serial-generator-hero h3 {
    font-size: 1.5rem;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ms-serial-generator-hero h3 .icon {
    font-size: 2rem;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(var(--primary-color-rgb), 0.3));
    }

    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px rgba(var(--primary-color-rgb), 0.6));
    }
}

.ms-create-btn-hero {
    width: 100%;
    padding: 18px 30px;
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color) 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.ms-create-btn-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.ms-create-btn-hero:hover::before {
    left: 100%;
}

.ms-create-btn-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(var(--primary-color-rgb), 0.45);
}

.ms-create-btn-hero:active {
    transform: translateY(-1px);
}

.ms-create-btn-hero .btn-icon {
    font-size: 1.5rem;
}

/* --- Serial Key Creation Info Box --- */
.ms-serial-creation-info {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.dark-mode .ms-serial-creation-info {
    background: linear-gradient(135deg, #2a2a2a 0%, #333 100%);
}

.ms-serial-creation-info .info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.ms-serial-creation-info .info-icon {
    font-size: 1.2rem;
}

.ms-serial-creation-info .info-label {
    font-weight: 600;
    min-width: 100px;
}

.ms-serial-creation-info .info-value {
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--primary-color);
}

/* --- Compact Serial Key Table on Mobile --- */
@media (max-width: 768px) {
    .ms-floating-table {
        font-size: 0.8rem;
    }

    .ms-floating-table th,
    .ms-floating-table td {
        padding: 8px 6px;
    }

    .ms-serial-key {
        font-size: 0.7rem !important;
        padding: 4px 6px !important;
        letter-spacing: 0.5px !important;
    }

    .action-btn-group {
        flex-direction: column;
        gap: 4px;
    }

    .action-btn-group .ms-action-btn {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
    }
}

/* History Filter Buttons - Compact Style */
.ms-history-filter-btns {
    display: flex;
    gap: 8px;
}

.ms-filter-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 20px;
    background: var(--surface-color, #fff);
    color: var(--text-color, #333);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ms-filter-btn:hover {
    background: var(--primary-color, #28a745);
    color: white;
    border-color: var(--primary-color, #28a745);
}

.ms-filter-btn.active {
    background: var(--primary-color, #28a745);
    color: white;
    border-color: var(--primary-color, #28a745);
}

body.dark-mode .ms-filter-btn {
    background: var(--surface-color, #2d2d2d);
    border-color: var(--border-color, #444);
    color: var(--text-color, #e0e0e0);
}

body.dark-mode .ms-filter-btn:hover,
body.dark-mode .ms-filter-btn.active {
    background: var(--primary-color, #28a745);
    color: white;
}

/* ============================================================= */
/* ===== Serial Key Generator - Modern UI Styles ===== */
/* ============================================================= */

.serial-generator-modern {
    background: linear-gradient(145deg, var(--surface-color, #fff), var(--background-color, #f8f9fa));
    border-radius: 20px;
    padding: 30px;
    border: 1px solid var(--border-color, #e0e0e0);
}

.sg-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.sg-icon {
    font-size: 2.5rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.sg-title h3 {
    margin: 0 0 5px 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
}

.sg-title p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Duration Cards Grid */
.sg-duration-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}

.sg-duration-card {
    position: relative;
    cursor: pointer;
}

.sg-duration-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sg-card-content {
    background: var(--surface-color, #fff);
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 16px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sg-duration-card:hover .sg-card-content {
    border-color: var(--primary-color, #28a745);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.sg-duration-card input:checked+.sg-card-content {
    border-color: var(--primary-color, #28a745);
    background: linear-gradient(145deg, rgba(40, 167, 69, 0.08), rgba(40, 167, 69, 0.03));
    box-shadow: 0 4px 20px rgba(40, 167, 69, 0.2);
}

.sg-duration-card input:checked+.sg-card-content::before {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: var(--primary-color, #28a745);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sg-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
    font-size: 0.65rem;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.sg-badge.gold {
    background: linear-gradient(135deg, #f0ad4e, #ec971f);
}

.sg-days {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
    margin-top: 8px;
}

.sg-unit {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.8;
    margin-top: 2px;
}

.sg-sub {
    font-size: 0.75rem;
    opacity: 0.5;
    margin-top: 5px;
    display: block;
}

/* Free Card Special Style */
.sg-duration-card.free .sg-card-content {
    border-color: #17a2b8;
    background: linear-gradient(145deg, rgba(23, 162, 184, 0.05), rgba(23, 162, 184, 0.02));
}

.sg-duration-card.free input:checked+.sg-card-content {
    border-color: #17a2b8;
    box-shadow: 0 4px 20px rgba(23, 162, 184, 0.2);
}

.sg-duration-card.free input:checked+.sg-card-content::before {
    background: #17a2b8;
}

/* Premium Card Special Style */
.sg-duration-card.premium .sg-card-content {
    border-color: #f0ad4e;
    background: linear-gradient(145deg, rgba(240, 173, 78, 0.05), rgba(240, 173, 78, 0.02));
}

.sg-duration-card.premium input:checked+.sg-card-content {
    border-color: #f0ad4e;
    box-shadow: 0 4px 20px rgba(240, 173, 78, 0.2);
}

.sg-duration-card.premium input:checked+.sg-card-content::before {
    background: #f0ad4e;
}

/* Generate Button */
.sg-generate-btn {
    width: 100%;
    padding: 16px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-color, #28a745), #20c997);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.sg-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
}

.sg-generate-btn:active {
    transform: translateY(0);
}

.sg-btn-icon {
    font-size: 1.3rem;
}

/* Result Display */
.sg-result {
    margin-top: 25px;
    background: linear-gradient(145deg, rgba(40, 167, 69, 0.08), rgba(40, 167, 69, 0.03));
    border: 1px solid rgba(40, 167, 69, 0.3);
    border-radius: 16px;
    padding: 25px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sg-result-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color, #28a745);
    margin-bottom: 15px;
}

.sg-result-icon {
    font-size: 1.3rem;
}

.sg-key-display {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-color, #fff);
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.sg-key-display code {
    flex: 1;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--text-color);
}

.sg-copy-btn {
    padding: 10px 15px;
    background: var(--primary-color, #28a745);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.sg-copy-btn:hover {
    transform: scale(1.05);
}

.sg-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.sg-info-item {
    text-align: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}

.sg-info-item.highlight {
    background: linear-gradient(145deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.05));
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.sg-info-label {
    display: block;
    font-size: 0.8rem;
    opacity: 0.7;
    margin-bottom: 5px;
}

.sg-info-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Responsive */
@media (max-width: 768px) {
    .sg-duration-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .sg-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .sg-duration-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .sg-days {
        font-size: 1.5rem;
    }

    .sg-key-display code {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }
}

/* Dark Mode */
body.dark-mode .serial-generator-modern {
    background: linear-gradient(145deg, var(--surface-color, #2d2d2d), var(--background-color, #1a1a1a));
}

body.dark-mode .sg-card-content {
    background: var(--surface-color, #2d2d2d);
    border-color: var(--border-color, #444);
}

body.dark-mode .sg-key-display {
    background: var(--surface-color, #2d2d2d);
}

body.dark-mode .sg-info-item {
    background: rgba(0, 0, 0, 0.2);
}

/* ============================================================= */
/* ===== END: Manager Stores Updates - Compact Styles ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Product Dashboard - Modern UI Styles ===== */
/* ============================================================= */

.product-dashboard-modern {
    padding: 25px;
    background: var(--background-color, #f8f9fa);
    min-height: 100vh;
}

/* Header */
.pd-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding: 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    color: white;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}

.pd-header-icon {
    font-size: 3rem;
    background: rgba(255, 255, 255, 0.2);
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-header-text h2 {
    margin: 0 0 5px 0;
    font-size: 1.8rem;
    font-weight: 700;
}

.pd-header-text p {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
}

.pd-refresh-btn {
    margin-left: auto;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pd-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* Stats Grid */
.pd-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.pd-stat-card {
    background: var(--surface-color, #fff);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.pd-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.pd-stat-card.total {
    border-left-color: #667eea;
}

.pd-stat-card.warning {
    border-left-color: #ffc107;
}

.pd-stat-card.danger {
    border-left-color: #dc3545;
}

.pd-stat-card.success {
    border-left-color: #28a745;
}

.pd-stat-icon {
    font-size: 2.5rem;
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-stat-card.total .pd-stat-icon {
    background: rgba(102, 126, 234, 0.1);
}

.pd-stat-card.warning .pd-stat-icon {
    background: rgba(255, 193, 7, 0.1);
}

.pd-stat-card.danger .pd-stat-icon {
    background: rgba(220, 53, 69, 0.1);
}

.pd-stat-card.success .pd-stat-icon {
    background: rgba(40, 167, 69, 0.1);
}

.pd-stat-info {
    display: flex;
    flex-direction: column;
}

.pd-stat-label {
    font-size: 0.9rem;
    color: var(--text-color);
    opacity: 0.7;
}

.pd-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
}

/* Alert Section */
.pd-alert-section {
    background: var(--surface-color, #fff);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.pd-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pd-section-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
}

.pd-alert-badge {
    background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.pd-section-desc {
    margin: 0 0 20px 0;
    font-size: 0.9rem;
    color: var(--text-color);
    opacity: 0.7;
}

/* Table */
.pd-table-container {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.pd-table {
    width: 100%;
    border-collapse: collapse;
}

.pd-table thead {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.pd-table th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
}

.pd-table td {
    padding: 15px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.pd-table tbody tr:hover {
    background: rgba(102, 126, 234, 0.05);
}

.pd-table .pd-empty {
    text-align: center;
    padding: 40px;
    color: #28a745;
    font-weight: 500;
}

/* Stock Status Badges */
.pd-stock-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.pd-stock-badge.critical {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.pd-stock-badge.low {
    background: rgba(255, 193, 7, 0.1);
    color: #e0a800;
}

.pd-stock-badge.out {
    background: #dc3545;
    color: white;
}

/* Category Section */
.pd-category-section {
    background: var(--surface-color, #fff);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.pd-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.pd-category-card {
    background: linear-gradient(145deg, var(--background-color, #f8f9fa), var(--surface-color, #fff));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
}

.pd-category-card .cat-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.pd-category-card .cat-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 5px;
}

.pd-category-card .cat-stock {
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.7;
}

.pd-category-card .cat-stock strong {
    color: var(--primary-color, #28a745);
}

/* Responsive */
@media (max-width: 1024px) {
    .pd-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .pd-stats-grid {
        grid-template-columns: 1fr;
    }

    .pd-header {
        flex-direction: column;
        text-align: center;
    }

    .pd-refresh-btn {
        margin-left: 0;
        width: 100%;
    }
}

/* Dark Mode */
body.dark-mode .product-dashboard-modern {
    background: var(--background-color, #121212);
}

body.dark-mode .pd-stat-card,
body.dark-mode .pd-alert-section,
body.dark-mode .pd-category-section {
    background: var(--surface-color, #1e1e1e);
}

body.dark-mode .pd-table thead {
    background: linear-gradient(135deg, #2d2d2d, #252525);
}

body.dark-mode .pd-category-card {
    background: linear-gradient(145deg, #252525, #1e1e1e);
}

/* ============================================================= */
/* ===== END: Product Dashboard - Modern UI Styles ===== */
/* ============================================================= */


/* ============================================================= */
/* ===== START: Modern Registration Form Redesign ===== */
/* ============================================================= */

/* --- Modal Container Modernization --- */
#registration-modal .modal-content {
    max-width: 650px;
    max-height: 92vh;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.98) 50%,
            rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: regModalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes regModalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(30px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* --- Header Modernization --- */
#registration-modal .registration-header {
    position: relative;
    padding: 30px 35px 25px;
    background: linear-gradient(135deg,
            rgba(255, 107, 53, 0.12) 0%,
            rgba(255, 159, 64, 0.08) 50%,
            rgba(255, 193, 7, 0.06) 100%);
    border-bottom: 1px solid rgba(255, 107, 53, 0.15);
    margin-bottom: 0;
}

#registration-modal .registration-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b35, #f7931e, #ffc107);
    border-radius: 24px 24px 0 0;
}

#registration-modal .registration-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

#registration-modal .registration-header h2::before {
    content: '📋';
    font-size: 1.4rem;
    -webkit-text-fill-color: initial;
}

#registration-modal .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 1.2rem;
    color: #666;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#registration-modal .close-btn:hover {
    background: #ff6b35;
    color: #fff;
    transform: rotate(90deg);
    border-color: #ff6b35;
}

/* --- Form Container --- */
#registration-form {
    max-height: calc(92vh - 180px);
    overflow-y: auto;
    padding: 25px 35px 30px;
    scroll-behavior: smooth;
}

#registration-form::-webkit-scrollbar {
    width: 6px;
}

#registration-form::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 3px;
}

#registration-form::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff6b35, #f7931e);
    border-radius: 3px;
}

/* --- Form Sections --- */
#registration-modal .form-section {
    position: relative;
    margin-bottom: 25px;
    padding: 25px;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(248, 250, 252, 0.6) 100%);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

#registration-modal .form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #ff6b35, #f7931e);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#registration-modal .form-section:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(255, 107, 53, 0.1),
        0 4px 15px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 107, 53, 0.15);
}

#registration-modal .form-section:hover::before {
    opacity: 1;
}

#registration-modal .form-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px dashed rgba(255, 107, 53, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- Form Groups & Labels --- */
#registration-modal .form-group {
    margin-bottom: 18px;
    position: relative;
}

#registration-modal .form-group:last-child {
    margin-bottom: 0;
}

#registration-modal .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
    transition: color 0.2s ease;
}

#registration-modal .form-group label .required {
    color: #ff6b35;
    font-weight: 700;
    margin-left: 2px;
}

/* --- Input Styling --- */
#registration-modal input[type="text"],
#registration-modal input[type="password"],
#registration-modal input[type="url"],
#registration-modal input[type="tel"],
#registration-modal input[type="email"],
#registration-modal select,
#registration-modal textarea {
    width: 100%;
    padding: 14px 18px;
    font-size: 0.95rem;
    font-family: inherit;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

#registration-modal input::placeholder,
#registration-modal textarea::placeholder {
    color: #aaa;
    font-weight: 400;
}

#registration-modal input:hover,
#registration-modal select:hover,
#registration-modal textarea:hover {
    border-color: rgba(255, 107, 53, 0.3);
    background: #fff;
}

#registration-modal input:focus,
#registration-modal select:focus,
#registration-modal textarea:focus {
    outline: none;
    border-color: #ff6b35;
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(255, 107, 53, 0.12),
        0 4px 12px rgba(255, 107, 53, 0.08);
}

/* --- Contact Info Text --- */
#registration-modal .contact-info-text {
    font-size: 0.85rem;
    color: #888;
    margin-top: -8px;
    margin-bottom: 15px;
    font-style: italic;
}

/* --- Error/Success Messages --- */
#registration-modal .registration-error,
#registration-modal .registration-success {
    margin: 20px 0;
    padding: 16px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.95rem;
    display: none;
    animation: regMsgSlide 0.3s ease;
}

@keyframes regMsgSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#registration-modal .registration-error {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05));
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

#registration-modal .registration-success {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05));
    border: 1px solid rgba(40, 167, 69, 0.2);
    color: #28a745;
}

#registration-modal .registration-error.show,
#registration-modal .registration-success.show {
    display: block;
}

/* --- Submit Button --- */
#registration-modal .modal-actions {
    margin-top: 10px;
    padding: 25px 0 0;
    border-top: none;
}

#registration-modal #submit-registration-btn {
    width: 100%;
    padding: 18px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: inherit;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ffc107 100%);
    background-size: 200% 200%;
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:
        0 8px 25px rgba(255, 107, 53, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

#registration-modal #submit-registration-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

#registration-modal #submit-registration-btn:hover {
    transform: translateY(-3px);
    background-position: 100% 0;
    box-shadow:
        0 12px 35px rgba(255, 107, 53, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#registration-modal #submit-registration-btn:hover::before {
    left: 100%;
}

#registration-modal #submit-registration-btn:active {
    transform: translateY(-1px);
}

#registration-modal #submit-registration-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* --- Package Cards Enhancement for Reg Modal --- */
#registration-modal .ms-package-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

#registration-modal .ms-package-card-option {
    cursor: pointer;
}

#registration-modal .ms-package-card-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#registration-modal .ms-package-card-option input[type="radio"]:checked+.ms-package-card {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.25);
}

#registration-modal .ms-package-card-option input[type="radio"]:checked+.ms-package-card.silver {
    border: 3px solid #8a8a8a;
}

#registration-modal .ms-package-card-option input[type="radio"]:checked+.ms-package-card.gold {
    border: 3px solid #d4a017;
}

/* --- Package Card Features List & Auto-Expand --- */
#registration-modal .ms-package-card {
    display: flex;
    flex-direction: column;
    min-height: 200px;
    height: auto;
    /* Auto-expand when content is long */
    transition: all 0.3s ease;
}

#registration-modal .card-features {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
    flex-grow: 1;
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-color);
    opacity: 0.9;
}

#registration-modal .card-features li {
    padding: 5px 0;
    padding-left: 5px;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#registration-modal .ms-package-card.silver .card-features li {
    color: #555;
}

#registration-modal .ms-package-card.gold .card-features li {
    color: #5a4520;
    font-weight: 500;
}

body.dark-mode #registration-modal .ms-package-card.silver .card-features li {
    color: #ccc;
}

body.dark-mode #registration-modal .ms-package-card.gold .card-features li {
    color: #f5e6c8;
}

/* Auto-expand grid when cards have different heights */
#registration-modal .ms-package-cards-grid {
    align-items: start;
    /* Allow cards to have different heights */
}

/* Responsive - stack cards on mobile for better display */
@media (max-width: 600px) {
    #registration-modal .ms-package-cards-grid {
        grid-template-columns: 1fr;
    }

    #registration-modal .ms-package-card {
        min-height: 180px;
    }
}

/* --- Dark Mode Support --- */
body.dark-mode #registration-modal .modal-content {
    background: linear-gradient(145deg,
            rgba(30, 30, 35, 0.98) 0%,
            rgba(25, 25, 30, 0.99) 50%,
            rgba(30, 30, 35, 0.98) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode #registration-modal .registration-header {
    background: linear-gradient(135deg,
            rgba(255, 107, 53, 0.15) 0%,
            rgba(255, 159, 64, 0.1) 100%);
    border-bottom-color: rgba(255, 107, 53, 0.2);
}

body.dark-mode #registration-modal .form-section {
    background: linear-gradient(145deg,
            rgba(40, 40, 45, 0.8) 0%,
            rgba(35, 35, 40, 0.6) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode #registration-modal .form-section h3 {
    color: #fff;
}

body.dark-mode #registration-modal .form-group label {
    color: #ddd;
}

body.dark-mode #registration-modal input,
body.dark-mode #registration-modal select,
body.dark-mode #registration-modal textarea {
    background: rgba(50, 50, 55, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

body.dark-mode #registration-modal input::placeholder {
    color: #888;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    #registration-modal .modal-content {
        max-width: calc(100% - 30px);
        max-height: 95vh;
        border-radius: 20px;
    }

    #registration-modal .registration-header {
        padding: 25px 25px 20px;
    }

    #registration-modal .registration-header h2 {
        font-size: 1.3rem;
    }

    #registration-form {
        padding: 20px 25px 25px;
    }

    #registration-modal .form-section {
        padding: 20px;
    }

    #registration-modal .ms-package-cards-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    #registration-modal .modal-content {
        max-width: calc(100% - 16px);
        border-radius: 16px;
    }

    #registration-modal .registration-header {
        padding: 20px 20px 16px;
    }

    #registration-modal .registration-header h2 {
        font-size: 1.15rem;
    }

    #registration-form {
        padding: 16px 20px 20px;
    }

    #registration-modal .form-section {
        padding: 16px;
        margin-bottom: 18px;
    }

    #registration-modal .form-section h3 {
        font-size: 1rem;
    }

    #registration-modal input,
    #registration-modal select,
    #registration-modal textarea {
        padding: 12px 14px;
        font-size: 0.9rem;
    }

    #registration-modal #submit-registration-btn {
        padding: 16px 24px;
        font-size: 1rem;
    }
}

/* ============================================================= */
/* ===== END: Modern Registration Form Redesign ===== */
/* =============================================================*/

/* ============================================================= */
/* ===== START: Package Card Checkmark Indicator ===== */
/* ============================================================= */

/* --- Checkmark Element --- */
.ms-package-card .card-check {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: transparent;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

/* --- Checkmark when selected --- */
.ms-package-card-option input[type="radio"]:checked+.ms-package-card .card-check {
    background: linear-gradient(135deg, #28a745, #20c997);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
    transform: scale(1.1);
}

/* --- Animation on selection --- */
@keyframes checkPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1.1);
    }
}

.ms-package-card-option input[type="radio"]:checked+.ms-package-card .card-check {
    animation: checkPulse 0.4s ease;
}

/* --- Hover effect --- */
.ms-package-card:hover .card-check {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.8);
}

.ms-package-card-option input[type="radio"]:checked+.ms-package-card:hover .card-check {
    background: linear-gradient(135deg, #28a745, #20c997);
    transform: scale(1.15);
}

/* --- Dark mode support --- */
body.dark-mode .ms-package-card .card-check {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .ms-package-card:hover .card-check {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ============================================================= */
/* ===== END: Package Card Checkmark Indicator ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Dashboard Redesign Styles ===== */
/* ============================================================= */

.dashboard-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.dashboard-section {
    background: var(--surface-color);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.dashboard-section-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ============================================================= */
/* ===== NEW: Dashboard Overview Section - Modern Design ===== */
/* ============================================================= */

.dashboard-overview-section {
    background: var(--surface-color);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
}

/* Overview Header */
.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(var(--primary-color-rgb), 0.1);
}

.overview-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.overview-main-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.5px;
}

.overview-subtitle {
    font-size: 0.95rem;
    margin: 0;
    color: var(--text-color);
    opacity: 0.65;
}

/* Date Picker Wrapper */
.overview-date-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(var(--primary-color-rgb), 0.08);
    padding: 8px 16px;
    border-radius: 12px;
}

.date-picker-label {
    font-size: 0.9rem;
    color: var(--text-color);
    opacity: 0.8;
    font-weight: 500;
}

.overview-date-input {
    padding: 10px 16px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 160px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.overview-date-input:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.15);
}

.overview-date-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.12);
}

/* Stats Row */
.overview-stats-row {
    margin-bottom: 24px;
}

.overview-stats-row:last-child {
    margin-bottom: 0;
}

.stats-row-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 8px 0;
}

.stats-row-header .row-icon {
    font-size: 1.5rem;
}

.stats-row-header .row-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-color);
    letter-spacing: 0.5px;
}

/* Stats Cards Grid */
.stats-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Individual Stat Card - Modern Glassmorphism */
.overview-stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    border-radius: 20px;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    cursor: default;
}

.overview-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
}

.overview-stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* Card Glow Effect */
.card-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.overview-stat-card:hover .card-glow {
    opacity: 1;
}

/* Card Icon */
.card-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.overview-stat-card:hover .card-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 255, 255, 0.3);
}

.card-icon {
    font-size: 2.2rem;
    line-height: 1;
}

/* Card Content */
.card-content {
    flex: 1;
    min-width: 0;
}

.card-value-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.card-value {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.card-unit {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.85;
}

.card-label {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.95;
    margin-top: 6px;
    letter-spacing: 0.3px;
}

.card-period {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* ===== Card Color Variations - Premium Gradients ===== */

/* Sales Cards */
.sales-today-card {
    background: linear-gradient(135deg, #00c853 0%, #1de9b6 50%, #00bfa5 100%);
}

.sales-month-card {
    background: linear-gradient(135deg, #2196f3 0%, #03a9f4 50%, #00bcd4 100%);
}

.sales-year-card {
    background: linear-gradient(135deg, #ff9800 0%, #ffb300 50%, #ffc107 100%);
    color: #1a1a1a;
}

.sales-year-card .card-value {
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}

/* Orders Cards */
.orders-today-card {
    background: linear-gradient(135deg, #7c4dff 0%, #b388ff 50%, #ea80fc 100%);
}

.orders-month-card {
    background: linear-gradient(135deg, #f50057 0%, #ff4081 50%, #ff80ab 100%);
}

.orders-year-card {
    background: linear-gradient(135deg, #ff5252 0%, #ff1744 50%, #d50000 100%);
}

/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
    .stats-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .overview-stat-card {
        padding: 20px;
    }

    .card-value {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .dashboard-overview-section {
        padding: 20px;
        border-radius: 20px;
    }

    .overview-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .overview-date-picker-wrapper {
        width: 100%;
        justify-content: space-between;
    }

    .overview-date-input {
        flex: 1;
    }

    .stats-cards-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .overview-stat-card {
        padding: 18px;
        border-radius: 16px;
    }

    .card-icon-wrapper {
        width: 56px;
        height: 56px;
    }

    .card-icon {
        font-size: 1.8rem;
    }

    .card-value {
        font-size: 1.8rem;
    }

    .card-label {
        font-size: 0.92rem;
    }
}

@media (max-width: 480px) {
    .dashboard-overview-section {
        padding: 16px;
        border-radius: 16px;
    }

    .overview-main-title {
        font-size: 1.3rem;
    }

    .overview-stat-card {
        gap: 14px;
        padding: 16px;
    }

    .card-icon-wrapper {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .card-icon {
        font-size: 1.5rem;
    }

    .card-value {
        font-size: 1.6rem;
    }

    .card-unit {
        font-size: 0.85rem;
    }
}

/* ===== Dark Mode Support ===== */
body.dark-mode .dashboard-overview-section {
    background: var(--surface-color);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

body.dark-mode .overview-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .overview-date-picker-wrapper {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .overview-date-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .overview-date-input:hover {
    border-color: var(--primary-color);
}

body.dark-mode .overview-stat-card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.dark-mode .overview-stat-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* ===== End Dashboard Overview Section ===== */

/* ============================================================= */
/* ===== NEW: Dashboard 3D Sections - Charts & Tables ===== */
/* ============================================================= */

/* 3D Section Base */
.dashboard-section-3d {
    position: relative;
    background: var(--surface-color);
    border-radius: 24px;
    padding: 28px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(var(--primary-color-rgb), 0.08);
    overflow: hidden;
}

.dashboard-section-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dashboard-section-3d:hover::before {
    opacity: 1;
}

/* Modern Section Header */
.section-header-modern {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(var(--primary-color-rgb), 0.08);
}

.section-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 1.8rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-icon-wrapper:hover {
    transform: scale(1.1) rotate(5deg);
}

.section-icon-wrapper.category-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.section-icon-wrapper.fire-icon {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.section-icon-wrapper.repeat-icon {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.section-title-group {
    flex: 1;
}

.section-title-modern {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
    letter-spacing: -0.3px;
}

.section-desc {
    font-size: 0.9rem;
    margin: 4px 0 0 0;
    color: var(--text-color);
    opacity: 0.6;
}

/* Chart + Table Layout 3D */
.chart-table-layout-3d {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* 3D Chart Card */
.chart-card-3d {
    perspective: 1000px;
}

.chart-card-inner {
    position: relative;
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05), rgba(var(--secondary-color-rgb, 255, 193, 7), 0.03));
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
}

.chart-card-inner:hover {
    transform: translateY(-5px) rotateX(2deg);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.chart-glow-effect {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.chart-card-inner:hover .chart-glow-effect {
    opacity: 1;
}

.chart-container-3d {
    position: relative;
    width: 100%;
    min-height: 300px;
    max-height: 350px;
}

/* 3D Table Card */
.table-card-3d {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.03), transparent);
    border-radius: 20px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.08);
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.table-card-3d:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.table-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1), rgba(var(--primary-color-rgb), 0.05));
    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
}

.table-icon {
    font-size: 1.2rem;
}

.table-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
}

.table-wrapper-3d {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
}

.table-wrapper-3d.scrollable {
    max-height: 420px;
}

/* Modern Table */
.modern-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.modern-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.modern-table thead tr {
    background: linear-gradient(135deg, var(--primary-color), rgba(var(--primary-color-rgb), 0.85));
}

.modern-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: white;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modern-table th.rank-col {
    width: 80px;
    text-align: center;
}

.modern-table th.value-col {
    width: 120px;
    text-align: right;
}

.modern-table tbody tr {
    transition: background-color 0.2s ease;
    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.06);
}

.modern-table tbody tr:hover {
    background-color: rgba(var(--primary-color-rgb), 0.04);
}

.modern-table tbody tr:last-child {
    border-bottom: none;
}

.modern-table td {
    padding: 14px 16px;
    color: var(--text-color);
}

.modern-table td.rank-col {
    text-align: center;
}

.modern-table td.value-col {
    text-align: right;
    font-weight: 600;
    color: var(--primary-color);
}

/* No Data State */
.no-data-modern {
    text-align: center;
    padding: 40px 20px !important;
    color: var(--text-color);
    opacity: 0.5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.no-data-icon {
    font-size: 2rem;
    opacity: 0.5;
}

/* Ranking Table Specific */
.ranking-table .rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.ranking-table .rank-badge.rank-1 {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #5d4e00;
}

.ranking-table .rank-badge.rank-2 {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    color: #333;
}

.ranking-table .rank-badge.rank-3 {
    background: linear-gradient(135deg, #cd7f32, #a0522d);
    color: white;
}

.ranking-table .rank-badge.rank-default {
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--text-color);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
}

/* Top 10 Grid Layout */
.top10-grid-3d {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.top10-card {
    min-height: 400px;
}

/* Value with Bar Indicator */
.value-with-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.value-bar {
    flex: 1;
    height: 8px;
    background: rgba(var(--primary-color-rgb), 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.value-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.value-text {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary-color);
    min-width: 60px;
    text-align: right;
}

/* Responsive */
@media (max-width: 1024px) {
    .chart-table-layout-3d {
        grid-template-columns: 1fr;
    }

    .top10-grid-3d {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-section-3d {
        padding: 20px;
        border-radius: 20px;
    }

    .section-header-modern {
        flex-wrap: wrap;
    }

    .section-icon-wrapper {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .section-title-modern {
        font-size: 1.2rem;
    }

    .chart-container-3d {
        min-height: 250px;
    }

    .table-wrapper-3d.scrollable {
        max-height: 350px;
    }
}

@media (max-width: 480px) {
    .dashboard-section-3d {
        padding: 16px;
        border-radius: 16px;
    }

    .section-icon-wrapper {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
        border-radius: 12px;
    }

    .section-title-modern {
        font-size: 1.1rem;
    }

    .modern-table th,
    .modern-table td {
        padding: 12px 10px;
        font-size: 0.85rem;
    }
}

/* Dark Mode Support */
body.dark-mode .dashboard-section-3d {
    background: var(--surface-color);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

body.dark-mode .section-header-modern {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .chart-card-inner {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .table-card-3d {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), transparent);
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .table-card-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .modern-table thead tr {
    background: linear-gradient(135deg, var(--primary-color), rgba(var(--primary-color-rgb), 0.7));
}

body.dark-mode .modern-table tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .modern-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

body.dark-mode .ranking-table .rank-badge.rank-default {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .value-bar {
    background: rgba(255, 255, 255, 0.1);
}

/* ===== End Dashboard 3D Sections ===== */

/* ============================================================= */
/* ===== NEW: Dashboard V2 - Reference Design Matching ===== */
/* ============================================================= */

.dashboard-v2 {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: #e8ecf3;
    min-height: 100vh;
}

body.dark-mode .dashboard-v2 {
    background: #1a1a2e;
}

/* ===== Row 1: Stats Cards ===== */
.stats-row-v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-card-v2 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    padding: 24px 28px;
    text-align: center;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.stat-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.stat-card-v2.gradient-green {
    background: linear-gradient(135deg, #00c853 0%, #1de9b6 100%);
}

.stat-card-v2.gradient-purple {
    background: linear-gradient(135deg, #7c4dff 0%, #b388ff 100%);
}

.stat-card-v2.gradient-orange {
    background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
}

.stat-card-v2.gradient-pink {
    background: linear-gradient(135deg, #f50057 0%, #ff4081 100%);
}

.stat-label-v2 {
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 8px;
}

.stat-value-v2 {
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.stat-unit-v2 {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.8;
    margin-top: 6px;
}

/* ===== Row 2: Chart + Lists ===== */
.content-row-v2 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

/* Chart Panel */
.chart-panel-v2 {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

body.dark-mode .chart-panel-v2 {
    background: #252542;
}

.panel-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.panel-title-v2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

.date-picker-v2 {
    padding: 8px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-size: 0.85rem;
    background: #f5f5f5;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.dark-mode .date-picker-v2 {
    background: #333;
    border-color: #444;
    color: white;
}

.date-picker-v2:hover {
    border-color: var(--primary-color);
}

.chart-area-v2 {
    position: relative;
    height: 280px;
    margin-bottom: 16px;
}

.chart-stats-v2 {
    display: flex;
    gap: 24px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body.dark-mode .chart-stats-v2 {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.chart-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.stat-dot.green {
    background: #00c853;
}

.stat-dot.orange {
    background: #ff9800;
}

.stat-dot.red {
    background: #ef4444;
}

.stat-dot.blue {
    background: #3b82f6;
}

.stat-dot.purple {
    background: #8b5cf6;
}

.stat-text {
    font-size: 0.9rem;
    color: var(--text-color);
}

/* Side Panels Stack */
.side-panels-v2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* List Panel */
.list-panel-v2 {
    background: white;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    flex: 1;
}

body.dark-mode .list-panel-v2 {
    background: #252542;
}

.list-items-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 180px;
    overflow-y: auto;
}

.list-item-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

body.dark-mode .list-item-v2 {
    background: rgba(255, 255, 255, 0.05);
}

.list-item-v2:hover {
    background: rgba(var(--primary-color-rgb), 0.1);
    transform: translateX(4px);
}

.list-item-v2.no-data {
    justify-content: center;
    opacity: 0.5;
}

.item-icon {
    font-size: 1.2rem;
}

.item-text {
    flex: 1;
    color: var(--text-color);
}

.item-value {
    font-weight: 700;
    color: var(--primary-color);
}

.item-btn {
    padding: 4px 12px;
    background: #ff5252;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

/* Growth Panel */
.growth-panel-v2 {
    background: white;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

body.dark-mode .growth-panel-v2 {
    background: #252542;
}

.growth-bars-v2 {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 80px;
    gap: 8px;
    padding-top: 10px;
}

.growth-bar {
    width: 20px;
    border-radius: 6px;
    min-height: 10px;
    transition: height 0.5s ease;
}

/* ===== Row 3: Category + Repeat ===== */
.bottom-row-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Category Panel */
.category-panel-v2 {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

body.dark-mode .category-panel-v2 {
    background: #252542;
}

.category-circles-v2 {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.category-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.circle-progress {
    position: relative;
    width: 80px;
    height: 80px;
}

.circle-progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 3.5;
}

body.dark-mode .circle-bg {
    stroke: #333;
}

.circle-fill {
    fill: none;
    stroke: var(--color, #667eea);
    stroke-width: 3.5;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
}

.circle-label {
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.7;
}

.category-table-v2 {
    max-height: 200px;
    overflow-y: auto;
}

.category-table-v2 table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.category-table-v2 th {
    padding: 10px 12px;
    background: var(--primary-color);
    color: white;
    text-align: left;
    font-weight: 600;
}

.category-table-v2 th:first-child {
    border-radius: 10px 0 0 0;
}

.category-table-v2 th:last-child {
    border-radius: 0 10px 0 0;
}

.category-table-v2 td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--text-color);
}

body.dark-mode .category-table-v2 td {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.category-table-v2 .no-data {
    text-align: center;
    padding: 20px;
    opacity: 0.5;
}

/* Messages Panel (Repeat Products) */
.messages-panel {
    min-height: 280px;
}

/* ===== Row 4: Additional Stats ===== */
.additional-row-v2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
}

/* Mini Stats */
.mini-stats-v2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mini-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

body.dark-mode .mini-stat-card {
    background: #252542;
}

.mini-icon {
    font-size: 2rem;
}

.mini-content {
    display: flex;
    flex-direction: column;
}

.mini-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);
}

.mini-label {
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.6;
}

/* Peak Panel */
.peak-panel-v2 {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

body.dark-mode .peak-panel-v2 {
    background: #252542;
}

.peak-chart-v2 {
    height: 150px;
    margin-bottom: 16px;
}

.peak-stats-v2 {
    display: flex;
    gap: 24px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body.dark-mode .peak-stats-v2 {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.peak-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-color);
}

.peak-stat strong {
    color: var(--primary-color);
}

/* ===== Row 5: Warning Panel ===== */
.warning-panel-v2 {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

body.dark-mode .warning-panel-v2 {
    background: #252542;
}

.warning-panel-v2 .panel-header-v2 {
    flex-wrap: wrap;
    gap: 16px;
}

.filter-btns-v2 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 6px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    background: white;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
}

body.dark-mode .filter-btn {
    background: #333;
    border-color: #444;
    color: white;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.warning-info-v2 {
    margin-bottom: 16px;
    font-size: 0.95rem;
    color: var(--text-color);
}

.warning-info-v2 strong {
    color: #ff5252;
}

.warning-table-v2 {
    max-height: 300px;
    overflow-y: auto;
}

.warning-table-v2 table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.warning-table-v2 th {
    padding: 12px;
    background: #ff5252;
    color: white;
    text-align: left;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.warning-table-v2 th:first-child {
    border-radius: 10px 0 0 0;
}

.warning-table-v2 th:last-child {
    border-radius: 0 10px 0 0;
}

.warning-table-v2 td {
    padding: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--text-color);
}

body.dark-mode .warning-table-v2 td {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.warning-table-v2 .no-data {
    text-align: center;
    padding: 24px;
    opacity: 0.5;
}

/* ===== Responsive Design ===== */
@media (max-width: 1200px) {
    .stats-row-v2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-row-v2 {
        grid-template-columns: 1fr;
    }

    .additional-row-v2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-v2 {
        padding: 16px;
        gap: 16px;
    }

    .stats-row-v2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card-v2 {
        padding: 20px;
        border-radius: 20px;
    }

    .stat-value-v2 {
        font-size: 2.2rem;
    }

    .bottom-row-v2 {
        grid-template-columns: 1fr;
    }

    .mini-stats-v2 {
        flex-direction: row;
    }

    .mini-stat-card {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .stat-card-v2 {
        border-radius: 16px;
        padding: 16px;
    }

    .stat-value-v2 {
        font-size: 1.8rem;
    }

    .chart-panel-v2,
    .list-panel-v2,
    .growth-panel-v2,
    .category-panel-v2,
    .peak-panel-v2,
    .warning-panel-v2 {
        border-radius: 20px;
        padding: 16px;
    }

    .mini-stats-v2 {
        flex-direction: column;
    }

    .filter-btns-v2 {
        width: 100%;
        justify-content: center;
    }
}

/* ===== 3D Chart Sections ===== */

/* Full Width Chart Panel */
.chart-panel-v2.full-width {
    width: 100%;
}

/* Charts Grid - 2 columns */
.charts-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* 3D Chart Section Card */
.chart-section-3d {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.chart-section-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), #f093fb, #00f2fe);
    opacity: 0.8;
}

.chart-section-3d:hover {
    transform: translateY(-5px);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.08);
}

body.dark-mode .chart-section-3d {
    background: #252542;
}

/* Chart Section Header */
.chart-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.dark-mode .chart-section-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.6rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.section-icon.fire {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24, #fd9644);
}

.section-icon.category {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.section-info {
    flex: 1;
}

.section-info .section-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

.section-info .section-desc {
    font-size: 0.85rem;
    margin: 4px 0 0 0;
    color: var(--text-color);
    opacity: 0.6;
}

/* 3D Chart Container */
.chart-container-3d-v2 {
    perspective: 1000px;
    margin-bottom: 16px;
}

.chart-3d-wrapper {
    position: relative;
    height: 280px;
    background: linear-gradient(145deg, rgba(var(--primary-color-rgb), 0.03), transparent);
    border-radius: 16px;
    padding: 16px;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.chart-3d-wrapper:hover {
    transform: rotateX(2deg) rotateY(-2deg);
}

.chart-3d-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent);
    pointer-events: none;
}

/* Chart Legend */
.chart-legend-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body.dark-mode .chart-legend-v2 {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-color);
    padding: 6px 12px;
    background: rgba(var(--primary-color-rgb), 0.05);
    border-radius: 20px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

/* Responsive for 3D Charts */
@media (max-width: 1024px) {
    .charts-grid-v2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .chart-section-3d {
        padding: 20px;
        border-radius: 20px;
    }

    .section-icon {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }

    .section-info .section-title {
        font-size: 1rem;
    }

    .chart-3d-wrapper {
        height: 240px;
    }
}

@media (max-width: 480px) {
    .chart-section-3d {
        padding: 16px;
    }

    .chart-section-header {
        flex-wrap: wrap;
    }

    .chart-3d-wrapper {
        height: 200px;
    }
}

/* ===== Chart Data Tables & Summary Stats ===== */

/* Table Section inside Chart */
.chart-table-section {
    margin-top: 16px;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

body.dark-mode .chart-table-section {
    border-color: rgba(255, 255, 255, 0.08);
}

.chart-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.chart-data-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.chart-data-table th {
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--primary-color), rgba(var(--primary-color-rgb), 0.85));
    color: white;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
}

.chart-data-table th:first-child {
    border-radius: 12px 0 0 0;
}

.chart-data-table th:last-child {
    border-radius: 0 12px 0 0;
}

.chart-data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--text-color);
}

body.dark-mode .chart-data-table td {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.chart-data-table tbody tr:hover {
    background-color: rgba(var(--primary-color-rgb), 0.04);
}

.chart-data-table .no-data {
    text-align: center;
    padding: 20px;
    opacity: 0.5;
}

/* Rank Badge in Table */
.rank-badge-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8rem;
}

.rank-badge-sm.rank-1 {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #5d4e00;
}

.rank-badge-sm.rank-2 {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    color: #333;
}

.rank-badge-sm.rank-3 {
    background: linear-gradient(135deg, #cd7f32, #a0522d);
    color: white;
}

.rank-badge-sm.rank-default {
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--text-color);
}

/* Summary Stats Below Chart */
.chart-summary-stats {
    display: flex;
    justify-content: space-around;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05), rgba(var(--primary-color-rgb), 0.02));
    border-radius: 12px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
}

body.dark-mode .chart-summary-stats {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent);
    border-color: rgba(255, 255, 255, 0.08);
}

.summary-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.summary-label {
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.7;
}

.summary-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color);
}

.summary-value.highlight {
    color: var(--primary-color);
    font-size: 1.5rem;
}

/* Full Width Panel */
.peak-panel-v2.full-width {
    width: 100%;
}

@media (max-width: 768px) {
    .chart-summary-stats {
        flex-direction: column;
        gap: 12px;
    }

    .summary-stat-item {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }
}

/* ===== End Dashboard V2 ===== */

/* Section Header with Calendar */
.dashboard-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.dashboard-section-header .dashboard-section-title {
    margin: 0;
}

/* Date Picker Styling (Legacy) */
.dashboard-date-picker {
    padding: 10px 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 150px;
}

.dashboard-date-picker:hover {
    border-color: var(--primary-color);
}

.dashboard-date-picker:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15);
}

/* Chart + Table Grid Layout */
.dashboard-chart-table-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Sticky Header for Tables */
.table-wrapper.sticky-header {
    overflow-y: auto;
    overflow-x: auto;
    /* Allow horizontal scroll */
}

.table-wrapper.sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--primary-color);
    color: white;
}

body.dark-mode .table-wrapper.sticky-header thead th {
    background: rgba(var(--primary-color-rgb), 0.8);
}

@media (max-width: 992px) {
    .dashboard-chart-table-grid {
        grid-template-columns: 1fr;
    }
}


.dashboard-section-desc {
    margin: -15px 0 15px 0;
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Stats Grid (Legacy) */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.dashboard-stats-grid:last-child {
    margin-bottom: 0;
}

/* Stat Cards (Legacy) */
.dashboard-stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-color), rgba(var(--primary-color-rgb), 0.7));
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dashboard-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.dashboard-stat-card .stat-icon {
    font-size: 2.5rem;
    opacity: 0.9;
}

.dashboard-stat-card .stat-content {
    flex: 1;
}

.dashboard-stat-card .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
}

.dashboard-stat-card .stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Card Color Variations (Legacy) */
.dashboard-stat-card.sales-today {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.dashboard-stat-card.sales-month {
    background: linear-gradient(135deg, #17a2b8, #38bdf8);
}

.dashboard-stat-card.sales-year {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #333;
}

.dashboard-stat-card.orders-today {
    background: linear-gradient(135deg, #6f42c1, #a855f7);
}

.dashboard-stat-card.orders-month {
    background: linear-gradient(135deg, #e83e8c, #f472b6);
}

.dashboard-stat-card.orders-year {
    background: linear-gradient(135deg, #dc3545, #f87171);
}

/* Chart Cards */
.dashboard-chart-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.dashboard-chart-card .chart-container {
    position: relative;
    width: 100%;
    min-height: 280px;
}

.chart-summary {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-top: 20px;
    padding: 15px;
    background: rgba(var(--primary-color-rgb), 0.05);
    border-radius: 12px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    flex-wrap: wrap;
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.summary-item:hover {
    background: rgba(var(--primary-color-rgb), 0.1);
}

.summary-label {
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.summary-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

/* Two Column Grid */
.dashboard-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Filter Buttons */
.dashboard-filter-btns {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.dashboard-filter-btn {
    padding: 10px 20px;
    border: 2px solid var(--border-color);
    border-radius: 25px;
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.dashboard-filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.dashboard-filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
}

/* Table Cards */
.dashboard-table-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.dashboard-table-card .table-info {
    padding: 15px 20px;
    background: rgba(var(--primary-color-rgb), 0.1);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.dashboard-table {
    width: 100%;
    border-collapse: separate;
    /* Better for sticky headers */
    border-spacing: 0;
}

.dashboard-table th,
.dashboard-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    /* Prevent line breaks */
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    /* Prevent overly wide columns */
}

.dashboard-table th {
    background: rgba(var(--primary-color-rgb), 0.1);
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
    position: sticky;
    top: 0;
    z-index: 10;
    /* Ensure header stays on top */
}

.dashboard-table tbody tr:hover {
    background: rgba(var(--primary-color-rgb), 0.05);
}

.dashboard-table tbody tr:last-child td {
    border-bottom: none;
}

.dashboard-table .no-data {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-color);
    opacity: 0.5;
    font-size: 0.95rem;
}

/* Responsive Design */
@media (max-width: 992px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid-2col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .dashboard-container {
        padding: 10px;
        gap: 20px;
    }

    .dashboard-stats-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-stat-card {
        padding: 15px;
    }

    .dashboard-stat-card .stat-icon {
        font-size: 2rem;
    }

    .dashboard-stat-card .stat-value {
        font-size: 1.5rem;
    }

    .dashboard-section {
        padding: 15px;
    }

    .dashboard-section-title {
        font-size: 1.1rem;
    }

    .dashboard-filter-btns {
        justify-content: flex-start;
    }

    .dashboard-filter-btn {
        padding: 8px 15px;
        font-size: 0.85rem;
    }

    .chart-summary {
        flex-direction: column;
        gap: 10px;
    }
}

/* Dark Mode Support */
body.dark-mode .dashboard-section {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

body.dark-mode .dashboard-chart-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
}

body.dark-mode .dashboard-table-card {
    background: var(--surface-color);
}

body.dark-mode .dashboard-filter-btn {
    background: var(--surface-color);
    border-color: var(--border-color);
}

body.dark-mode .dashboard-filter-btn:hover {
    border-color: var(--primary-color);
}

body.dark-mode .dashboard-filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

body.dark-mode .dashboard-table th {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .dashboard-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* ============================================================= */
/* ===== END: Dashboard Redesign Styles ===== */
/* ============================================================= */
/* Flashing Red Animation for Low Stock Alerts */
@keyframes flash-red {
    0% {
        color: var(--text-color);
    }

    50% {
        color: white;
        background-color: var(--danger-color);
    }

    100% {
        color: var(--text-color);
    }
}

.flash-red {
    animation: flash-red 1s infinite;
    padding: 2px 5px;
    border-radius: 4px;
}


/* ===== NEW: 3-Card Grid Layout ===== */
.pd-stats-cards-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.pd-card-blue {
    border-left: 4px solid #3498db;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0));
}

.pd-card-red {
    border-left: 4px solid #e74c3c;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(231, 76, 60, 0));
}

.pd-card-green {
    border-left: 4px solid #2ecc71;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(46, 204, 113, 0));
}

.pd-card-icon {
    font-size: 2rem;
}

.pd-card-info h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-color);
    opacity: 0.8;
}

.pd-card-info span {
    font-size: 1.8rem;
    font-weight: bold;
    display: block;
    margin-top: 5px;
}

.pd-header-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

/* ===== FILTER TOGGLE ===== */
.pd-toggle-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.pd-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* ===== SETTINGS MODAL REDESIGN ===== */
#pd-settings-modal .modal-content {
    background: var(--card-bg);
    /* Use theme bg */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 30px;
    max-width: 500px;
    width: 90%;
}

#pd-settings-modal h3 {
    font-size: 1.5rem;
    margin-bottom: 25px;
    text-align: center;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    display: inline-block;
    width: 100%;
}

.pd-settings-group {
    margin-bottom: 25px;
}

.pd-settings-group label {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.pd-settings-group input {
    width: 100%;
    padding: 10px;
    font-size: 1.2rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
}

.pd-category-thresholds {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.02);
}

.pd-cat-threshold-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.pd-cat-threshold-item:last-child {
    border-bottom: none;
}

.pd-cat-threshold-item .cat-name {
    font-size: 1rem;
    font-weight: 500;
}

.pd-cat-threshold-item input {
    width: 80px;
    padding: 5px;
    font-size: 1rem;
    margin: 0 10px;
}

.pd-save-btn {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.1s;
}

.pd-save-btn:hover {
    transform: scale(1.02);
}

.pd-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.2rem;
    cursor: pointer;
    background: none;
    border: none;
}

/* ===== Sales Mode Button Styles ===== */
.sales-mode-button-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 10px;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(0, 123, 255, 0.05) 100%);
    border-radius: 12px;
    border: 2px solid rgba(40, 167, 69, 0.1);
}

.sales-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-size: 0.95rem;
    font-weight: 600;
    color: #495057;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.sales-mode-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.sales-mode-btn:hover::before {
    left: 100%;
}

.sales-mode-btn svg {
    width: 28px;
    height: 28px;
    transition: all 0.3s ease;
}

.sales-mode-btn span {
    font-size: 0.95rem;
    text-align: center;
    line-height: 1.3;
}

.sales-mode-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 16px rgba(40, 167, 69, 0.2);
    border-color: var(--primary-color);
}

.sales-mode-btn:hover svg {
    transform: scale(1.15);
    color: var(--primary-color);
}

.sales-mode-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, #20c997 100%);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    transform: translateY(-2px);
}

.sales-mode-btn.active svg {
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Special styling for left and right buttons */
.sales-mode-left.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.sales-mode-right.active {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-color: #f093fb;
    box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
}

/* Active state pulse animation */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    }

    50% {
        box-shadow: 0 6px 30px rgba(40, 167, 69, 0.6);
    }
}

.sales-mode-btn.active {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Dark mode support */
body.dark-mode .sales-mode-button-container {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(0, 123, 255, 0.15) 100%);
    border-color: rgba(40, 167, 69, 0.3);
}

body.dark-mode .sales-mode-btn {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
    border-color: #444;
    color: #e0e0e0;
}

body.dark-mode .sales-mode-btn:hover {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, #333 0%, #2a2a2a 100%);
}

body.dark-mode .sales-mode-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, #20c997 100%);
}

/* Responsive Design */
@media (max-width: 768px) {
    .sales-mode-button-container {
        gap: 10px;
        padding: 8px;
    }

    .sales-mode-btn {
        padding: 15px 10px;
        gap: 8px;
    }

    .sales-mode-btn svg {
        width: 24px;
        height: 24px;
    }

    .sales-mode-btn span {
        font-size: 0.85rem;
    }
}

/* ===== Admin Product Tabs (Horizontal Category List) ===== */
#admin-product-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding: 15px 5px;
    margin-bottom: 25px;
    background: transparent;
    border: none;
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) #f1f1f1;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
    align-items: center;
}

/* Custom Scrollbar */
#admin-product-tabs::-webkit-scrollbar {
    height: 6px;
}

#admin-product-tabs::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#admin-product-tabs::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

#admin-product-tabs::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Tab/Button Styling */
#admin-product-tabs .tab {
    flex: 0 0 auto;
    padding: 10px 20px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    /* Fully rounded pills */
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: #555;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
    /* Minimum width for consistency */
    justify-content: center;
}

#admin-product-tabs .tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

#admin-product-tabs .tab.active {
    background: linear-gradient(135deg, var(--primary-color), #20c997);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    font-weight: 600;
    transform: scale(1.05);
}

/* Dark Mode Support */
body.dark-mode #admin-product-tabs {
    scrollbar-color: var(--primary-color) #333;
}

body.dark-mode #admin-product-tabs::-webkit-scrollbar-track {
    background: #333;
}

body.dark-mode #admin-product-tabs .tab {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode #admin-product-tabs .tab:hover {
    border-color: var(--primary-color);
    background: rgba(40, 167, 69, 0.1);
}

body.dark-mode #admin-product-tabs .tab.active {
    background: linear-gradient(135deg, var(--primary-color), #20c997);
    color: white;
    border-color: transparent;
}

/* ===== Admin Product Tabs & Settings Wrapper (Override) ===== */
.product-tabs-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    width: 100%;
}

#admin-product-tabs {
    flex: 1;
    /* Take remaining space */
    margin-bottom: 0 !important;
    /* Remove bottom margin inside wrapper */
    min-width: 0;
    /* Prevent flex overflow */
}

/* Settings Icon Button - Circle Style */
.btn-icon-settings {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    background: white;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.btn-icon-settings:hover {
    background: white;
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: rotate(90deg);
    box-shadow: 0 6px 12px rgba(40, 167, 69, 0.2);
}

.btn-icon-settings svg {
    width: 24px;
    height: 24px;
}

/* Dark Mode for Settings Button */
body.dark-mode .btn-icon-settings {
    background: var(--surface-color);
    border-color: #444;
    color: var(--text-color);
}

body.dark-mode .btn-icon-settings:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(40, 167, 69, 0.1);
}

/* ===== Product Form Collapse Animation ===== */
#product-form {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 2500px;
    /* Arbitrary large height covering typical form size */
    opacity: 1;
    overflow: hidden;
    transform-origin: top;
}

#product-form.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    pointer-events: none;
}

/* ============================================================= */
/* ===== START: Direct Open Store Form Styles ===== */
/* ============================================================= */

/* Card Header with Action Button */
.ms-card-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.ms-card-header-with-action h2 {
    margin: 0 0 8px 0;
}

.ms-card-header-with-action p {
    margin: 0;
    opacity: 0.8;
}

/* Add Store Button (+) */
.ms-add-store-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    white-space: nowrap;
}

.ms-add-store-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
}

.ms-add-store-btn .plus-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
}

.ms-add-store-btn .btn-text {
    display: inline;
}

@media (max-width: 600px) {
    .ms-add-store-btn .btn-text {
        display: none;
    }

    .ms-add-store-btn {
        padding: 12px;
        border-radius: 50%;
    }

    .ms-add-store-btn .plus-icon {
        width: 32px;
        height: 32px;
        background: transparent;
        font-size: 1.8rem;
    }
}

/* Modal Large Size */
.modal-lg {
    max-width: 800px !important;
    width: 95%;
}

/* Direct Open Store Form */
.direct-open-store-form {
    background: var(--surface-color);
    border-radius: 20px;
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
}

/* Modal Header Gradient */
.modal-header-gradient {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.modal-header-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.modal-header-text {
    flex: 1;
}

.modal-header-text h2 {
    margin: 0 0 4px 0;
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-header-text p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.modal-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg);
}

/* Modern Form */
.modern-form {
    padding: 24px 30px 30px;
}

/* Form Section */
.form-section {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.03) 0%, rgba(var(--primary-color-rgb), 0.01) 100%);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.form-section:hover {
    border-color: rgba(var(--primary-color-rgb), 0.3);
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), 0.08);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.section-icon {
    font-size: 1.4rem;
}

.section-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}

.section-badge {
    margin-left: auto;
    padding: 4px 12px;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #000;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
}

/* Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-grid.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

.form-grid .full-width {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {

    .form-grid,
    .form-grid.three-cols {
        grid-template-columns: 1fr;
    }
}

/* Enhanced Form Group */
.modern-form .form-group {
    margin-bottom: 0;
}

.modern-form .form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
}

.modern-form .form-group .label-icon {
    font-size: 1rem;
}

.modern-form .form-group .required {
    color: #dc3545;
    font-weight: 700;
}

.modern-form .form-group input,
.modern-form .form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.95rem;
    background: var(--surface-color);
    color: var(--text-color);
    transition: all 0.2s ease;
}

.modern-form .form-group input:focus,
.modern-form .form-group select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.1);
}

.modern-form .form-group input:hover,
.modern-form .form-group select:hover {
    border-color: rgba(var(--primary-color-rgb), 0.5);
}

.input-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-color);
    opacity: 0.65;
}

/* Input Group Inline */
.input-group-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.input-group-inline input {
    flex: 0 0 auto;
}

.input-suffix {
    font-size: 0.9rem;
    color: var(--text-color);
    opacity: 0.7;
}

/* Password Input Wrapper */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input {
    padding-right: 50px;
}

.toggle-password-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.toggle-password-btn:hover {
    opacity: 1;
}

/* Password Match Hint */
.password-match-hint {
    transition: all 0.2s ease;
}

.password-match-hint.match {
    color: #28a745;
}

.password-match-hint.no-match {
    color: #dc3545;
}

/* Contact Validation Hint */
.contact-validation-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #856404;
}

.contact-validation-hint.valid {
    background: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.3);
    color: #28a745;
}

body.dark-mode .contact-validation-hint {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

body.dark-mode .contact-validation-hint.valid {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

/* Serial Key Section */
.serial-key-section .form-group select {
    font-family: 'Consolas', 'Monaco', monospace;
}

.serial-key-info {
    margin-top: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 10px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.key-info-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.key-info-label {
    font-size: 0.85rem;
    opacity: 0.8;
}

.key-info-value {
    font-weight: 600;
    font-size: 0.9rem;
}

/* Package Selection Grid */
.package-selection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.package-option {
    cursor: pointer;
    display: block;
}

.package-option input[type="radio"] {
    display: none;
}

.package-option .package-card {
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    border: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.package-option .package-card.standard {
    background: linear-gradient(145deg, #e8e8e8 0%, #c0c0c0 50%, #d8d8d8 100%);
}

.package-option .package-card.premium {
    background: linear-gradient(145deg, #ffd700 0%, #b8860b 40%, #ffd700 80%, #daa520 100%);
}

.package-option .package-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.package-option input[type="radio"]:checked+.package-card {
    border-color: var(--primary-color);
    transform: translateY(-4px) scale(1.02);
}

.package-option input[type="radio"]:checked+.package-card.standard {
    box-shadow: 0 0 0 4px rgba(108, 117, 125, 0.3), 0 10px 30px rgba(0, 0, 0, 0.2);
}

.package-option input[type="radio"]:checked+.package-card.premium {
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.4), 0 10px 30px rgba(255, 215, 0, 0.3);
}

.package-card .package-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.package-card .package-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.package-card .package-price {
    font-size: 0.95rem;
    font-weight: 600;
    color: #555;
}

body.dark-mode .package-card .package-name {
    color: #fff;
}

body.dark-mode .package-card .package-price {
    color: #eee;
}

@media (max-width: 500px) {
    .package-selection-grid {
        grid-template-columns: 1fr;
    }
}

/* Form Actions */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.btn-lg {
    padding: 14px 28px !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
}

.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-glow:hover::before {
    left: 100%;
}

.btn-icon {
    margin-right: 8px;
}

@media (max-width: 500px) {
    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

    .modal-header-gradient {
        padding: 16px 20px;
    }

    .modal-header-icon {
        font-size: 2rem;
    }

    .modal-header-text h2 {
        font-size: 1.2rem;
    }

    .modern-form {
        padding: 16px 20px 24px;
    }

    .form-section {
        padding: 16px;
    }
}

/* ============================================================= */
/* ===== END: Direct Open Store Form Styles ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Permissions Grid Styles ===== */
/* ============================================================= */

.section-badge-info {
    margin-left: auto;
    padding: 4px 12px;
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .permissions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .permissions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.permission-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.permission-checkbox:hover {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.05);
}

.permission-checkbox input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.permission-checkbox input[type="checkbox"]:checked+.checkbox-custom {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-color: #28a745;
}

.permission-checkbox input[type="checkbox"]:checked+.checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.perm-label {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.permissions-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: flex-start;
}

.btn-sm {
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

.package-desc {
    font-size: 0.85rem;
    color: #666;
    margin-top: 4px;
}

body.dark-mode .package-desc {
    color: #bbb;
}

/* ============================================================= */
/* ===== END: Permissions Grid Styles ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Track Operations Enhanced Styles ===== */
/* ============================================================= */

/* Compact Filter Bar */
.ms-filter-bar.compact {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 12px 16px;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-item label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.8;
}

.filter-item select,
.filter-item input {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.85rem;
    min-width: 120px;
}

.filter-item.search {
    flex: 1;
    min-width: 150px;
}

.filter-item.search input {
    width: 100%;
}

@media (max-width: 600px) {
    .ms-filter-bar.compact {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-item {
        width: 100%;
    }

    .filter-item select,
    .filter-item input {
        width: 100%;
    }
}

/* Desktop only table */
.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
}

/* Store Cards Container (Mobile) */
.store-cards-container {
    display: none;
}

@media (max-width: 768px) {
    .store-cards-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
}

/* Store Card (Mobile View) */
.store-card-item {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.store-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.store-card-name {
    font-weight: 600;
    font-size: 1rem;
}

.store-card-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.store-card-status.active {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.store-card-status.paused {
    background: rgba(255, 193, 7, 0.15);
    color: #c69500;
}

.store-card-status.expired {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

.store-card-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.store-card-info-item {
    font-size: 0.85rem;
}

.store-card-info-item label {
    display: block;
    font-size: 0.7rem;
    opacity: 0.7;
    margin-bottom: 2px;
}

.store-card-countdown {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.store-card-countdown .cd-unit {
    background: rgba(var(--primary-color-rgb), 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    text-align: center;
    min-width: 40px;
}

.store-card-countdown .cd-val {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
}

.store-card-countdown .cd-lbl {
    display: block;
    font-size: 0.6rem;
    opacity: 0.7;
}

.store-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.store-card-actions .btn {
    flex: 1;
    min-width: 80px;
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
}

/* ============================================================= */
/* ===== Store Detail Modal Styles ===== */
/* ============================================================= */

.store-detail-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.store-detail-content {
    padding: 24px;
}

.detail-section {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.detail-section h3 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Big Countdown */
.countdown-section {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: rgba(102, 126, 234, 0.3);
}

.big-countdown {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.countdown-item {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: center;
    min-width: 60px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.countdown-number {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
}

.countdown-unit-label {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
    text-transform: uppercase;
}

/* Credentials Display */
.credentials-display {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cred-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(var(--primary-color-rgb), 0.05);
    padding: 12px 16px;
    border-radius: 10px;
}

.cred-item label {
    font-weight: 600;
    min-width: 80px;
}

.cred-value {
    flex: 1;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 1rem;
}

.cred-value.password-hidden {
    letter-spacing: 2px;
}

.btn-copy-sm,
.btn-show-pass {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy-sm:hover,
.btn-show-pass:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* Serial Key Management */
.serial-key-management {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 600px) {
    .serial-key-management {
        grid-template-columns: 1fr;
    }
}

.key-display-row {
    display: flex;
    gap: 8px;
}

.key-display-row input {
    flex: 1;
}

.mono-input {
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 1px;
}

/* Store Link Section */
.store-link-section .link-display {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.store-link-section .link-display input {
    flex: 1;
    min-width: 200px;
}

.link-note {
    margin-top: 12px;
    font-size: 0.85rem;
    color: #856404;
    background: rgba(255, 193, 7, 0.15);
    padding: 8px 12px;
    border-radius: 8px;
}

/* Detail Actions */
.detail-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.detail-actions .btn {
    flex: 1;
    min-width: 120px;
}

@media (max-width: 600px) {
    .detail-actions {
        flex-direction: column;
    }

    .detail-actions .btn {
        width: 100%;
    }

    .store-detail-content {
        padding: 16px;
    }

    .detail-section {
        padding: 14px;
    }

    .countdown-item {
        min-width: 50px;
        padding: 8px 12px;
    }

    .countdown-number {
        font-size: 1.4rem;
    }
}

/* ============================================================= */
/* ===== System Lock Overlay ===== */
/* ============================================================= */

.system-lock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.95) 0%, rgba(108, 15, 35, 0.98) 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.lock-content {
    text-align: center;
    color: white;
    padding: 40px;
    max-width: 500px;
}

.lock-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.lock-content h2 {
    font-size: 2rem;
    margin-bottom: 16px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.lock-message {
    font-size: 1.2rem;
    margin-bottom: 8px;
    opacity: 0.95;
}

.lock-contact {
    font-size: 1.1rem;
    margin-bottom: 24px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    display: inline-block;
}

.lock-store-info {
    font-size: 0.9rem;
    opacity: 0.8;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    margin-top: 20px;
}

/* ============================================================= */
/* ===== END: Track Operations Enhanced Styles ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Package Simple Styles (No Circle) ===== */
/* ============================================================= */

.package-simple-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.package-simple-option {
    display: block;
    cursor: pointer;
}

.package-simple-option input[type="radio"] {
    display: none;
}

.package-simple-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.package-simple-option input[type="radio"]:checked+.package-simple-card {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.08);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.15);
}

.package-simple-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.pkg-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.pkg-name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 4px;
    color: var(--text-color);
}

.pkg-desc {
    font-size: 0.85rem;
    color: #666;
}

body.dark-mode .pkg-desc {
    color: #aaa;
}

@media (max-width: 500px) {
    .package-simple-grid {
        grid-template-columns: 1fr;
    }

    .package-simple-card {
        padding: 16px 12px;
    }

    .pkg-icon {
        font-size: 2rem;
    }
}

/* ============================================================= */
/* ===== END: Package Simple Styles ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Permissions Accordion Styles ===== */
/* ============================================================= */

.permissions-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Show all menus expanded - no max-height limit */
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
}

.permissions-accordion::-webkit-scrollbar {
    width: 6px;
}

.permissions-accordion::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.permissions-accordion::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-color-rgb), 0.3);
    border-radius: 3px;
}

.perm-menu-group {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.perm-menu-group.single .perm-main-menu {
    border-bottom: none;
}

/* Main Menu Row */
.perm-main-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05) 0%, rgba(var(--primary-color-rgb), 0.02) 100%);
    border-bottom: 1px solid var(--border-color);
}

.perm-menu-group.single .perm-main-menu {
    border-bottom: none;
}

.perm-main-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1;
}

.perm-main-checkbox input[type="checkbox"] {
    display: none;
}

.checkbox-box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background: white;
}

body.dark-mode .checkbox-box {
    background: var(--surface-color);
}

.perm-main-checkbox input[type="checkbox"]:checked+.checkbox-box {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-color: #28a745;
}

.perm-main-checkbox input[type="checkbox"]:checked+.checkbox-box::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.perm-main-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
}

.perm-toggle-btn {
    /* Hide toggle button - show all menus by default */
    display: none;
}

.perm-toggle-btn.collapsed {
    transform: rotate(-90deg);
}

/* Sub Menus Container */
.perm-sub-menus {
    display: flex;
    flex-direction: column;
    padding: 8px 16px 12px 48px;
    gap: 6px;
    background: rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

body.dark-mode .perm-sub-menus {
    background: rgba(255, 255, 255, 0.02);
}

.perm-sub-menus.collapsed {
    display: none;
}

.perm-sub-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.perm-sub-checkbox:hover {
    background: rgba(var(--primary-color-rgb), 0.08);
}

.perm-sub-checkbox input[type="checkbox"] {
    display: none;
}

.checkbox-box-sm {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background: white;
}

body.dark-mode .checkbox-box-sm {
    background: var(--surface-color);
}

.perm-sub-checkbox input[type="checkbox"]:checked+.checkbox-box-sm {
    background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
    border-color: #17a2b8;
}

.perm-sub-checkbox input[type="checkbox"]:checked+.checkbox-box-sm::after {
    content: '✓';
    color: white;
    font-size: 11px;
    font-weight: bold;
}

.perm-sub-label {
    font-size: 0.85rem;
    color: var(--text-color);
}

/* Permissions Actions */
.permissions-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.permissions-actions .btn {
    flex: 1;
    min-width: 100px;
}

@media (max-width: 600px) {
    .permissions-accordion {
        max-height: 350px;
    }

    .perm-main-menu {
        padding: 10px 12px;
    }

    .perm-main-label {
        font-size: 0.9rem;
    }

    .perm-sub-menus {
        padding: 8px 12px 12px 36px;
    }

    .perm-sub-label {
        font-size: 0.8rem;
    }

    .permissions-actions {
        flex-direction: column;
    }

    .permissions-actions .btn {
        width: 100%;
    }
}

/* ============================================================= */
/* ===== END: Permissions Accordion Styles ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Category Management Table Styles ===== */
/* ============================================================= */

/* Category Management Table */
.category-management-table {
    width: 100%;
    border-collapse: collapse;
}

.category-management-table thead th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 10px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
}

.category-management-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.category-management-table tbody tr:hover {
    background: rgba(var(--primary-color-rgb), 0.05);
}

.category-management-table tbody td {
    padding: 12px 10px;
}

/* Badge Styles */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}

.badge-info {
    background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
    color: white;
}

.badge-warning {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: #333;
}

.badge-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.badge-danger {
    background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);
    color: white;
}

.badge-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
}

/* Action Button Group */
.action-btn-group {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

/* Edit Button Style */
.btn.btn-edit {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: #333;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn.btn-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

/* Success/Save Button Style */
.btn.btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

/* Danger/Delete Button Style - Enhanced for visibility */
.btn.btn-danger.btn-small.btn-cat-delete {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn.btn-danger.btn-small.btn-cat-delete:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5);
    background: linear-gradient(135deg, #e04453 0%, #d93548 100%);
}

/* Category Icon Thumbnail */
.cat-icon-thumbnail {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cat-icon-placeholder {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Toggle Switch Size Adjustment for Table */
.category-management-table .toggle-switch {
    transform: scale(0.85);
}

/* Tooltip for Delete Button Confirmation */
.btn-cat-delete[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    font-size: 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease forwards;
}

@keyframes tooltipFadeIn {
    to {
        opacity: 1;
    }
}

/* Status Badge - Active/Inactive */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-badge.active {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.status-badge.inactive {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

.status-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Dark Mode Adaptations */
body.dark-mode .category-management-table thead th {
    background: linear-gradient(135deg, #4f5b93 0%, #5a4870 100%);
}

body.dark-mode .category-management-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .cat-icon-thumbnail {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .badge-warning {
    color: #1a1a1a;
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    .category-management-table thead th,
    .category-management-table tbody td {
        padding: 8px 6px;
        font-size: 0.85rem;
    }

    .action-btn-group {
        flex-direction: column;
        gap: 4px;
    }

    .badge {
        padding: 3px 8px;
        font-size: 0.75rem;
    }

    .cat-icon-thumbnail,
    .cat-icon-placeholder {
        width: 32px;
        height: 32px;
    }
}

/* ============================================================= */
/* ===== END: Category Management Table Styles ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Background Settings Styles ===== */
/* ============================================================= */

/* Background Settings Section Layout */
.bg-settings-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.bg-settings-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.bg-settings-card h3 {
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    color: var(--text-color);
}

/* File Upload Label */
.file-upload-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05));
    border: 2px dashed var(--primary-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: var(--primary-color);
}

.file-upload-label:hover {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1));
    border-style: solid;
    transform: translateY(-2px);
}

.file-upload-label .upload-icon {
    font-size: 1.5rem;
}

.file-name-display {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--text-color);
    opacity: 0.7;
}

body.dark-mode .file-name-display {
    background: rgba(255, 255, 255, 0.05);
}

/* URL Input */
.url-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
}

/* Preview Container */
.bg-preview-container {
    margin-bottom: 25px;
}

.bg-preview-container h3 {
    margin: 0 0 15px 0;
    font-size: 1rem;
    color: var(--text-color);
    opacity: 0.8;
}

.bg-preview-thumbnail {
    width: 100%;
    max-width: 400px;
    height: 200px;
    background: var(--surface-color);
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
}

.bg-preview-thumbnail .no-image-text {
    color: var(--text-color);
    opacity: 0.5;
    font-size: 0.95rem;
}

.bg-preview-thumbnail.has-image {
    border-style: solid;
    border-color: var(--primary-color);
}

.bg-preview-thumbnail.has-image .no-image-text {
    display: none;
}

/* Adjustments Section */
.bg-adjustments-section {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bg-slider-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bg-slider-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

.bg-slider-group .slider-label {
    color: var(--text-color);
}

.bg-slider-group .slider-value {
    background: linear-gradient(135deg, var(--primary-color), #20c997);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 50px;
    text-align: center;
}

.bg-slider-group input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary-color) var(--progress-width, 50%), #ddd var(--progress-width, 50%));
    outline: none;
    -webkit-appearance: none;
}

.bg-slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.bg-slider-group input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* Action Buttons */
.bg-action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.bg-action-buttons .btn {
    flex: 1;
    min-width: 120px;
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Preview Modal */
.modal-fullscreen {
    width: 90vw;
    max-width: 1200px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.bg-preview-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-color);
}

.bg-preview-modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
    padding: 5px 10px;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

body.dark-mode .modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.bg-preview-frame {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: var(--background-color);
}

.bg-preview-frame-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.bg-preview-frame-content .preview-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.bg-preview-frame-content .preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-color);
    z-index: 1;
}

.bg-preview-frame-content .preview-content {
    position: relative;
    z-index: 2;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.bg-preview-frame-content .preview-header {
    text-align: center;
}

.bg-preview-frame-content .preview-header h3 {
    font-size: 2rem;
    margin: 0 0 10px 0;
    color: var(--text-color);
}

.bg-preview-frame-content .preview-header p {
    margin: 0;
    color: var(--text-color);
    opacity: 0.7;
}

.bg-preview-frame-content .preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
    max-width: 600px;
}

.bg-preview-frame-content .preview-card {
    background: var(--surface-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
}

.bg-preview-frame-content .preview-card-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.bg-preview-frame-content .preview-card-name {
    font-size: 0.85rem;
    color: var(--text-color);
}

.bg-preview-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--surface-color);
    display: flex;
    justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
    .bg-settings-section {
        grid-template-columns: 1fr;
    }

    .bg-action-buttons {
        flex-direction: column;
    }

    .bg-action-buttons .btn {
        width: 100%;
    }

    .modal-fullscreen {
        width: 95vw;
        height: 90vh;
    }

    .bg-preview-frame-content .preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================= */
/* ===== END: Background Settings Styles ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Success Animation Settings (Hay Day 3D) ===== */
/* ============================================================= */

/* Layout */
.success-settings-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 25px;
}

@media (max-width: 900px) {
    .success-settings-layout {
        grid-template-columns: 1fr;
    }
}

.success-controls-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.success-preview-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.success-preview-column label {
    font-weight: 600;
    color: var(--text-color);
}

/* Styled Select */
.styled-select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-color);
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.styled-select:hover {
    border-color: var(--primary-color);
}

/* Color Row */
.color-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.color-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 80px;
}

.color-item label {
    font-size: 0.85rem;
}

.color-item input[type="color"] {
    width: 100%;
    height: 40px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

/* Position Section */
.position-section {
    background: rgba(0, 0, 0, 0.03);
    padding: 15px;
    border-radius: 12px;
}

body.dark-mode .position-section {
    background: rgba(255, 255, 255, 0.05);
}

.position-controls-grid {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.position-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.position-row input[type="number"] {
    width: 70px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-align: center;
}

.position-buttons-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.pos-btn-row {
    display: flex;
    gap: 3px;
}

.pos-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: var(--primary-color);
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.pos-btn:hover {
    transform: scale(1.1);
    background: #218838;
}

.pos-btn.reset {
    background: #6c757d;
}

.pos-btn.reset:hover {
    background: #5a6268;
}

/* Preview Container */
.success-animation-preview {
    width: 100%;
    min-height: 250px;
    background: linear-gradient(135deg, #4a4a4a 0%, #2d2d2d 100%);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.success-animation-preview:hover {
    transform: scale(1.02);
}

.success-animation-preview #success-animation-container {
    position: relative;
    z-index: 1;
}

.success-animation-preview #success-message-text {
    position: absolute;
    color: white;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    white-space: pre-line;
    text-align: center;
    line-height: 1.4;
}

/* Save Button Large */
.btn-large {
    padding: 15px 30px;
    font-size: 1.1rem;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ===== 10 UNIQUE 3D SUCCESS ANIMATIONS ===== */

/* Base 3D Container */
.sa-3d {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 500px;
    transform-style: preserve-3d;
}

.sa-3d .sa-check {
    font-size: 50px;
    font-weight: bold;
    color: var(--sa-primary-color, #4CAF50);
    z-index: 10;
}

/* 1. 3D Flip */
.sa-3d-flip .sa-cube {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, var(--sa-primary-color), var(--sa-secondary-color, #fff));
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: sa-3d-flip-anim 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes sa-3d-flip-anim {
    0% {
        transform: rotateY(-180deg) scale(0);
        opacity: 0;
    }

    100% {
        transform: rotateY(0) scale(1);
        opacity: 1;
    }
}

/* 2. 3D Bounce Sphere */
.sa-3d-sphere {
    flex-direction: column;
}

.sa-3d-sphere .sa-sphere {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 30% 30%, var(--sa-secondary-color, #fff), var(--sa-primary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), inset -5px -5px 15px rgba(0, 0, 0, 0.2);
    animation: sa-3d-bounce-anim 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.sa-3d-sphere .sa-shadow {
    position: absolute;
    bottom: -10px;
    width: 60px;
    height: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    filter: blur(5px);
    animation: sa-shadow-pulse 0.6s ease forwards;
}

@keyframes sa-3d-bounce-anim {
    0% {
        transform: translateY(-80px) scale(0.5);
        opacity: 0;
    }

    60% {
        transform: translateY(10px) scale(1.1);
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes sa-shadow-pulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
        opacity: 0.4;
    }

    100% {
        transform: scale(1);
        opacity: 0.3;
    }
}

/* 3. 3D Rotate Ring */
.sa-3d-ring .sa-ring-3d {
    position: absolute;
    width: 90px;
    height: 90px;
    border: 4px solid var(--sa-primary-color);
    border-radius: 50%;
    animation: sa-ring-rotate 1s ease forwards;
}

@keyframes sa-ring-rotate {
    0% {
        transform: rotateX(90deg) scale(0);
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg) scale(1);
        opacity: 1;
    }
}

.sa-3d-ring .sa-check {
    animation: sa-check-pop-3d 0.5s ease 0.3s forwards;
    opacity: 0;
    transform: scale(0);
}

@keyframes sa-check-pop-3d {
    0% {
        opacity: 0;
        transform: scale(0) rotateZ(-45deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotateZ(0deg);
    }
}

/* 4. 3D Pop Box */
.sa-3d-box {
    transform-style: preserve-3d;
}

.sa-3d-box .sa-box-face {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-3d-box .sa-box-face.front {
    width: 70px;
    height: 70px;
    background: linear-gradient(145deg, var(--sa-primary-color), var(--sa-secondary-color, #fff));
    border-radius: 12px;
    transform: translateZ(35px);
    animation: sa-box-pop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.sa-3d-box .sa-box-face.top {
    width: 70px;
    height: 20px;
    background: linear-gradient(145deg, var(--sa-secondary-color, #fff), var(--sa-primary-color));
    transform: rotateX(90deg) translateZ(35px);
    border-radius: 6px;
    animation: sa-box-pop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s forwards;
    opacity: 0;
}

.sa-3d-box .sa-box-face.right {
    width: 20px;
    height: 70px;
    background: linear-gradient(145deg, var(--sa-primary-color), rgba(0, 0, 0, 0.2));
    transform: rotateY(90deg) translateZ(35px);
    border-radius: 6px;
    animation: sa-box-pop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s forwards;
    opacity: 0;
}

@keyframes sa-box-pop {
    0% {
        opacity: 0;
        transform: translateZ(0) scale(0);
    }

    100% {
        opacity: 1;
        transform: translateZ(35px) scale(1);
    }
}

/* 5. 3D Wave Pulse */
.sa-3d-wave .sa-wave-circle {
    position: absolute;
    border: 3px solid var(--sa-primary-color);
    border-radius: 50%;
    animation: sa-wave-3d 1s ease-out forwards;
}

.sa-3d-wave .sa-wave-circle.c1 {
    width: 50px;
    height: 50px;
    animation-delay: 0s;
}

.sa-3d-wave .sa-wave-circle.c2 {
    width: 50px;
    height: 50px;
    animation-delay: 0.2s;
}

.sa-3d-wave .sa-wave-circle.c3 {
    width: 50px;
    height: 50px;
    animation-delay: 0.4s;
}

.sa-3d-wave .sa-check {
    animation: sa-check-pop-3d 0.5s ease forwards;
}

@keyframes sa-wave-3d {
    0% {
        transform: rotateX(60deg) scale(0.5);
        opacity: 1;
    }

    100% {
        transform: rotateX(0deg) scale(2);
        opacity: 0;
    }
}

/* 6. 3D Shine Burst */
.sa-3d-shine .sa-check {
    animation: sa-shine-check 0.5s ease forwards;
    text-shadow: 0 0 20px var(--sa-primary-color);
}

.sa-3d-shine .sa-shine-rays span {
    position: absolute;
    width: 4px;
    height: 30px;
    background: linear-gradient(to top, transparent, var(--sa-primary-color));
    transform-origin: bottom center;
    animation: sa-shine-ray 0.8s ease forwards;
    opacity: 0;
}

.sa-3d-shine .sa-shine-rays span:nth-child(1) {
    transform: rotate(0deg) translateY(-40px);
    animation-delay: 0s;
}

.sa-3d-shine .sa-shine-rays span:nth-child(2) {
    transform: rotate(60deg) translateY(-40px);
    animation-delay: 0.1s;
}

.sa-3d-shine .sa-shine-rays span:nth-child(3) {
    transform: rotate(120deg) translateY(-40px);
    animation-delay: 0.05s;
}

.sa-3d-shine .sa-shine-rays span:nth-child(4) {
    transform: rotate(180deg) translateY(-40px);
    animation-delay: 0.15s;
}

.sa-3d-shine .sa-shine-rays span:nth-child(5) {
    transform: rotate(240deg) translateY(-40px);
    animation-delay: 0.08s;
}

.sa-3d-shine .sa-shine-rays span:nth-child(6) {
    transform: rotate(300deg) translateY(-40px);
    animation-delay: 0.12s;
}

@keyframes sa-shine-check {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes sa-shine-ray {
    0% {
        height: 0;
        opacity: 0;
    }

    50% {
        height: 30px;
        opacity: 1;
    }

    100% {
        height: 40px;
        opacity: 0;
    }
}

/* 7. 3D Float Drop */
.sa-3d-float {
    flex-direction: column;
}

.sa-3d-float .sa-float-check {
    width: 70px;
    height: 70px;
    background: linear-gradient(145deg, var(--sa-primary-color), var(--sa-secondary-color, #fff));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    animation: sa-float-drop-anim 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.sa-3d-float .sa-float-shadow {
    position: absolute;
    bottom: 5px;
    width: 50px;
    height: 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    filter: blur(4px);
    animation: sa-float-shadow-anim 0.7s ease forwards;
}

@keyframes sa-float-drop-anim {
    0% {
        transform: translateY(-60px) rotateX(40deg);
        opacity: 0;
    }

    60% {
        transform: translateY(8px) rotateX(-10deg);
    }

    100% {
        transform: translateY(0) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes sa-float-shadow-anim {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    60% {
        transform: scale(1.1);
        opacity: 0.3;
    }

    100% {
        transform: scale(1);
        opacity: 0.25;
    }
}

/* 8. 3D Stamp Press */
.sa-3d-stamp .sa-stamp-body {
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, var(--sa-primary-color), var(--sa-secondary-color, #fff));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    animation: sa-stamp-press-anim 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sa-stamp-press-anim {
    0% {
        transform: scale(2) rotateZ(15deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotateZ(-3deg);
        opacity: 1;
    }
}

/* 9. 3D Glow Orbit */
.sa-3d-orbit .sa-orbit-ring {
    position: absolute;
    width: 90px;
    height: 90px;
    border: 2px dashed var(--sa-primary-color);
    border-radius: 50%;
    animation: sa-orbit-spin 2s linear infinite;
}

.sa-3d-orbit .sa-orbit-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--sa-primary-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--sa-primary-color);
    animation: sa-orbit-dot-move 2s linear infinite;
}

.sa-3d-orbit .sa-check {
    animation: sa-check-pop-3d 0.5s ease forwards;
}

@keyframes sa-orbit-spin {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}

@keyframes sa-orbit-dot-move {
    0% {
        transform: rotate(0deg) translateX(45px);
    }

    100% {
        transform: rotate(360deg) translateX(45px);
    }
}

/* 10. 3D Success Explosion */
.sa-3d-explode .sa-check {
    animation: sa-explode-check 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.sa-3d-explode .sa-explode-particles span {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--sa-primary-color);
    border-radius: 50%;
    animation: sa-particle-explode 0.8s ease forwards;
}

.sa-3d-explode .sa-explode-particles span:nth-child(1) {
    animation-delay: 0s;
    --angle: 0deg;
}

.sa-3d-explode .sa-explode-particles span:nth-child(2) {
    animation-delay: 0.05s;
    --angle: 45deg;
}

.sa-3d-explode .sa-explode-particles span:nth-child(3) {
    animation-delay: 0.1s;
    --angle: 90deg;
}

.sa-3d-explode .sa-explode-particles span:nth-child(4) {
    animation-delay: 0.05s;
    --angle: 135deg;
}

.sa-3d-explode .sa-explode-particles span:nth-child(5) {
    animation-delay: 0.1s;
    --angle: 180deg;
}

.sa-3d-explode .sa-explode-particles span:nth-child(6) {
    animation-delay: 0.05s;
    --angle: 225deg;
}

.sa-3d-explode .sa-explode-particles span:nth-child(7) {
    animation-delay: 0.1s;
    --angle: 270deg;
}

.sa-3d-explode .sa-explode-particles span:nth-child(8) {
    animation-delay: 0.05s;
    --angle: 315deg;
}

@keyframes sa-explode-check {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes sa-particle-explode {
    0% {
        transform: rotate(var(--angle)) translateX(0);
        opacity: 1;
    }

    100% {
        transform: rotate(var(--angle)) translateX(60px);
        opacity: 0;
    }
}


@keyframes sa-fade-in-glow {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sa-soft-glow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
}

/* 2. Scale Pop Soft */
.sa-scale-pop .sa-check {
    animation: sa-scale-pop-soft 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sa-scale-pop-soft {
    0% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* 3. Pulse Once */
.sa-pulse-once .sa-check {
    animation: sa-pulse-one 0.8s ease forwards;
}

@keyframes sa-pulse-one {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    40% {
        transform: scale(1.2);
        opacity: 1;
    }

    60% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

/* 4. Soft Check Draw */
.sa-check-draw .sa-draw-path {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: sa-draw-check 0.8s ease forwards;
}

@keyframes sa-draw-check {
    100% {
        stroke-dashoffset: 0;
    }
}

/* 5. Blur → Sharp */
.sa-blur-sharp .sa-check {
    animation: sa-blur-to-sharp 0.6s ease forwards;
}

@keyframes sa-blur-to-sharp {
    0% {
        filter: blur(8px);
        opacity: 0;
        transform: scale(1.2);
    }

    100% {
        filter: blur(0);
        opacity: 1;
        transform: scale(1);
    }
}

/* 6. Floating Glow */
.sa-floating-glow .sa-check {
    animation: sa-float-check 2s ease-in-out infinite;
}

.sa-floating-glow .sa-aura {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sa-primary-color) 0%, transparent 60%);
    opacity: 0.4;
    animation: sa-aura-pulse 2s ease-in-out infinite;
}

@keyframes sa-float-check {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes sa-aura-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.6;
    }
}

/* === กลุ่ม 7-12: สดใส / น่ารัก === */

/* 7. Confetti */
.sa-confetti .sa-check {
    animation: sa-scale-pop-soft 0.5s ease forwards;
}

.sa-confetti .sa-confetti-wrap::before,
.sa-confetti .sa-confetti-wrap::after {
    content: '🎊';
    position: absolute;
    font-size: 20px;
    animation: sa-confetti-fall 1s ease forwards;
}

.sa-confetti .sa-confetti-wrap::before {
    top: -20px;
    left: 10px;
    animation-delay: 0.1s;
}

.sa-confetti .sa-confetti-wrap::after {
    top: -15px;
    right: 10px;
    animation-delay: 0.2s;
}

@keyframes sa-confetti-fall {
    0% {
        opacity: 0;
        transform: translateY(-20px) rotate(0deg);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(30px) rotate(180deg);
    }
}

/* 8. Sparkle Burst */
.sa-sparkle-burst .sa-check {
    animation: sa-scale-pop-soft 0.5s ease forwards;
}

.sa-sparkle-burst .sa-sparkles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.sa-sparkle-burst .sa-sparkles span {
    position: absolute;
    color: var(--sa-secondary-color, #FFD700);
    font-size: 16px;
    animation: sa-sparkle-fly 0.8s ease forwards;
}

.sa-sparkle-burst .sa-sparkles span:nth-child(1) {
    top: 10%;
    left: 50%;
}

.sa-sparkle-burst .sa-sparkles span:nth-child(2) {
    top: 30%;
    right: 5%;
    animation-delay: 0.1s;
}

.sa-sparkle-burst .sa-sparkles span:nth-child(3) {
    bottom: 30%;
    right: 10%;
    animation-delay: 0.15s;
}

.sa-sparkle-burst .sa-sparkles span:nth-child(4) {
    bottom: 10%;
    left: 50%;
    animation-delay: 0.2s;
}

.sa-sparkle-burst .sa-sparkles span:nth-child(5) {
    bottom: 30%;
    left: 10%;
    animation-delay: 0.1s;
}

.sa-sparkle-burst .sa-sparkles span:nth-child(6) {
    top: 30%;
    left: 5%;
    animation-delay: 0.15s;
}

@keyframes sa-sparkle-fly {
    0% {
        opacity: 0;
        transform: scale(0) translate(0, 0);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 0;
        transform: scale(0.8) translate(var(--x, 10px), var(--y, -10px));
    }
}

/* 9. Star Pop */
.sa-star-pop .sa-check {
    animation: sa-scale-pop-soft 0.5s ease forwards;
}

.sa-star-pop .sa-stars span {
    position: absolute;
    color: var(--sa-secondary-color, #FFEB3B);
    font-size: 18px;
    animation: sa-star-fly 0.8s ease forwards;
}

.sa-star-pop .sa-stars span:nth-child(1) {
    top: 5%;
    left: 50%;
}

.sa-star-pop .sa-stars span:nth-child(2) {
    top: 40%;
    right: 5%;
    animation-delay: 0.1s;
}

.sa-star-pop .sa-stars span:nth-child(3) {
    top: 40%;
    left: 5%;
    animation-delay: 0.15s;
}

@keyframes sa-star-fly {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }

    100% {
        opacity: 0.6;
        transform: scale(1);
    }
}

/* 10. Bubble Rise */
.sa-bubble-rise .sa-check {
    animation: sa-scale-pop-soft 0.5s ease forwards;
}

.sa-bubble-rise .sa-bubbles span {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--sa-secondary-color, rgba(3, 169, 244, 0.5));
    border-radius: 50%;
    animation: sa-bubble-up 1.2s ease forwards;
}

.sa-bubble-rise .sa-bubbles span:nth-child(1) {
    bottom: 20%;
    left: 20%;
    animation-delay: 0s;
}

.sa-bubble-rise .sa-bubbles span:nth-child(2) {
    bottom: 25%;
    left: 40%;
    animation-delay: 0.15s;
    width: 8px;
    height: 8px;
}

.sa-bubble-rise .sa-bubbles span:nth-child(3) {
    bottom: 15%;
    right: 30%;
    animation-delay: 0.25s;
    width: 12px;
    height: 12px;
}

.sa-bubble-rise .sa-bubbles span:nth-child(4) {
    bottom: 30%;
    right: 20%;
    animation-delay: 0.1s;
    width: 6px;
    height: 6px;
}

.sa-bubble-rise .sa-bubbles span:nth-child(5) {
    bottom: 20%;
    right: 40%;
    animation-delay: 0.2s;
}

@keyframes sa-bubble-up {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }

    30% {
        opacity: 0.8;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.5);
    }
}

/* 11. Heart Mini Pop */
.sa-heart-pop .sa-check {
    animation: sa-scale-pop-soft 0.5s ease forwards;
}

.sa-heart-pop .sa-hearts span {
    position: absolute;
    color: var(--sa-secondary-color, #F44336);
    font-size: 14px;
    animation: sa-heart-fly 0.9s ease forwards;
}

.sa-heart-pop .sa-hearts span:nth-child(1) {
    top: 15%;
    left: 25%;
}

.sa-heart-pop .sa-hearts span:nth-child(2) {
    top: 10%;
    right: 25%;
    animation-delay: 0.1s;
}

.sa-heart-pop .sa-hearts span:nth-child(3) {
    top: 25%;
    left: 50%;
    animation-delay: 0.15s;
}

@keyframes sa-heart-fly {
    0% {
        opacity: 0;
        transform: scale(0) translateY(0);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) translateY(-5px);
    }

    100% {
        opacity: 0;
        transform: scale(0.8) translateY(-15px);
    }
}

/* 12. Candy Glow */
.sa-candy-glow .sa-check {
    animation: sa-scale-pop-soft 0.5s ease forwards;
}

.sa-candy-glow .sa-candy-aura {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #FF69B4, #FFB6C1, #FF69B4, #FFC0CB, #FF69B4);
    opacity: 0.4;
    animation: sa-candy-rotate 3s linear infinite;
    z-index: 0;
}

@keyframes sa-candy-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* === กลุ่ม 13-18: มั่นใจ / Professional === */

/* 13. Slide-in Center */
.sa-slide-center .sa-check {
    animation: sa-slide-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes sa-slide-in {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 14. Ring Expand */
.sa-ring-expand .sa-check {
    animation: sa-scale-pop-soft 0.4s ease forwards;
}

.sa-ring-expand .sa-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid var(--sa-primary-color);
    border-radius: 50%;
    animation: sa-ring-out 0.8s ease forwards;
}

.sa-ring-expand .sa-ring.r2 {
    animation-delay: 0.15s;
}

@keyframes sa-ring-out {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* 15. Line Sweep */
.sa-line-sweep .sa-check {
    animation: sa-scale-pop-soft 0.4s ease forwards;
}

.sa-line-sweep .sa-sweep {
    position: absolute;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--sa-secondary-color, white), transparent);
    animation: sa-sweep-across 0.6s ease 0.3s forwards;
    opacity: 0;
}

@keyframes sa-sweep-across {
    0% {
        left: -100%;
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

/* 16. Solid Lock */
.sa-solid-lock .sa-check {
    animation: sa-solid-lock-in 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes sa-solid-lock-in {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/* 17. Focus Flash */
.sa-focus-flash .sa-check {
    animation: sa-scale-pop-soft 0.4s ease forwards;
}

.sa-focus-flash .sa-flash {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--sa-secondary-color, white);
    border-radius: 50%;
    animation: sa-flash-once 0.3s ease forwards;
}

@keyframes sa-flash-once {
    0% {
        opacity: 0.8;
        transform: scale(0.5);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* 18. Shadow Drop */
.sa-shadow-drop .sa-check {
    animation: sa-shadow-drop-in 0.5s ease forwards;
    text-shadow: 0 0 0 transparent;
}

@keyframes sa-shadow-drop-in {
    0% {
        transform: translateY(-20px);
        opacity: 0;
        text-shadow: 0 0 0 transparent;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        text-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    }
}

/* === กลุ่ม 19-24: เร็ว / ทันใจ === */

/* 19. Instant Pop */
.sa-instant-pop .sa-check {
    animation: sa-instant 0.2s ease forwards;
}

.sa-instant-pop .sa-flash-ring {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 3px solid var(--sa-secondary-color, white);
    border-radius: 50%;
    animation: sa-flash-ring 0.3s ease forwards;
}

@keyframes sa-instant {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes sa-flash-ring {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* 20. Check Stamp */
.sa-check-stamp .sa-check {
    animation: sa-stamp-drop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sa-stamp-drop {
    0% {
        transform: scale(2) rotate(15deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(-3deg);
        opacity: 1;
    }
}

/* 21. Speed Line */
.sa-speed-line .sa-check {
    animation: sa-speed-enter 0.25s ease forwards;
}

.sa-speed-line .sa-speed-lines span {
    position: absolute;
    left: -20px;
    width: 30px;
    height: 3px;
    background: var(--sa-secondary-color, rgba(255, 255, 255, 0.7));
    border-radius: 2px;
    animation: sa-speed-fade 0.4s ease forwards;
}

.sa-speed-line .sa-speed-lines span:nth-child(1) {
    top: 35%;
}

.sa-speed-line .sa-speed-lines span:nth-child(2) {
    top: 50%;
    animation-delay: 0.05s;
}

.sa-speed-line .sa-speed-lines span:nth-child(3) {
    top: 65%;
    animation-delay: 0.1s;
}

@keyframes sa-speed-enter {
    0% {
        transform: translateX(-40px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes sa-speed-fade {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}

/* 22. Micro Shake */
.sa-micro-shake .sa-check {
    animation: sa-micro-shake 0.4s ease forwards;
}

@keyframes sa-micro-shake {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }

    60% {
        transform: translateX(-3px);
    }

    70% {
        transform: translateX(3px);
    }

    80% {
        transform: translateX(-2px);
    }

    90% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
    }
}

/* 23. Snap Glow */
.sa-snap-glow .sa-check {
    animation: sa-snap-glow-in 0.25s ease forwards;
}

@keyframes sa-snap-glow-in {
    0% {
        transform: scale(0);
        filter: brightness(2);
    }

    50% {
        transform: scale(1.1);
        filter: brightness(1.5);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* 24. Quick Bounce */
.sa-quick-bounce .sa-check {
    animation: sa-quick-bounce-in 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes sa-quick-bounce-in {
    0% {
        transform: scale(0) translateY(10px);
    }

    70% {
        transform: scale(1.1) translateY(-5px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

/* === กลุ่ม 25-30: อลังการ / ว้าว === */

/* 25. Light Ray Burst */
.sa-light-ray .sa-check {
    animation: sa-scale-pop-soft 0.5s ease forwards;
    z-index: 10;
}

.sa-light-ray .sa-rays {
    position: absolute;
    width: 100%;
    height: 100%;
}

.sa-light-ray .sa-rays span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 50px;
    background: linear-gradient(to top, transparent, var(--sa-secondary-color, #FFC107));
    transform-origin: bottom center;
    animation: sa-ray-burst 0.8s ease forwards;
    opacity: 0;
}

.sa-light-ray .sa-rays span:nth-child(1) {
    transform: rotate(0deg) translateY(-30px);
    animation-delay: 0s;
}

.sa-light-ray .sa-rays span:nth-child(2) {
    transform: rotate(45deg) translateY(-30px);
    animation-delay: 0.05s;
}

.sa-light-ray .sa-rays span:nth-child(3) {
    transform: rotate(90deg) translateY(-30px);
    animation-delay: 0.1s;
}

.sa-light-ray .sa-rays span:nth-child(4) {
    transform: rotate(135deg) translateY(-30px);
    animation-delay: 0.15s;
}

.sa-light-ray .sa-rays span:nth-child(5) {
    transform: rotate(180deg) translateY(-30px);
    animation-delay: 0.05s;
}

.sa-light-ray .sa-rays span:nth-child(6) {
    transform: rotate(225deg) translateY(-30px);
    animation-delay: 0.1s;
}

.sa-light-ray .sa-rays span:nth-child(7) {
    transform: rotate(270deg) translateY(-30px);
    animation-delay: 0.15s;
}

.sa-light-ray .sa-rays span:nth-child(8) {
    transform: rotate(315deg) translateY(-30px);
    animation-delay: 0.2s;
}

@keyframes sa-ray-burst {
    0% {
        height: 0;
        opacity: 0;
    }

    50% {
        height: 50px;
        opacity: 1;
    }

    100% {
        height: 60px;
        opacity: 0;
    }
}

/* 26. Circle Magic */
.sa-circle-magic .sa-check {
    animation: sa-scale-pop-soft 0.5s ease forwards;
}

.sa-circle-magic .sa-magic-ring {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px dashed var(--sa-secondary-color, #7C4DFF);
    border-radius: 50%;
    animation: sa-magic-spin 2s linear infinite;
}

.sa-circle-magic .sa-magic-ring.r2 {
    width: 100px;
    height: 100px;
    animation-direction: reverse;
    animation-duration: 3s;
}

@keyframes sa-magic-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 27. Success Wave */
.sa-success-wave .sa-check {
    animation: sa-scale-pop-soft 0.4s ease forwards;
}

.sa-success-wave .sa-wave {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 3px solid var(--sa-primary-color);
    border-radius: 50%;
    animation: sa-wave-out 1s ease forwards;
}

.sa-success-wave .sa-wave.w2 {
    animation-delay: 0.2s;
}

.sa-success-wave .sa-wave.w3 {
    animation-delay: 0.4s;
}

@keyframes sa-wave-out {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* 28. Gold Shine Sweep */
.sa-gold-shine .sa-check {
    animation: sa-scale-pop-soft 0.4s ease forwards;
}

.sa-gold-shine .sa-gold-sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.6), transparent);
    animation: sa-gold-sweep-across 0.8s ease 0.3s forwards;
}

@keyframes sa-gold-sweep-across {
    0% {
        left: -50%;
    }

    100% {
        left: 150%;
    }
}

/* 29. Particle Trail */
.sa-particle-trail .sa-trail-path {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: sa-draw-check 0.8s ease forwards;
}

.sa-particle-trail .sa-particles span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--sa-secondary-color, #18FFFF);
    border-radius: 50%;
    animation: sa-particle-fly 1s ease forwards;
}

.sa-particle-trail .sa-particles span:nth-child(1) {
    top: 45%;
    left: 20%;
    animation-delay: 0.1s;
}

.sa-particle-trail .sa-particles span:nth-child(2) {
    top: 55%;
    left: 30%;
    animation-delay: 0.2s;
}

.sa-particle-trail .sa-particles span:nth-child(3) {
    top: 65%;
    left: 40%;
    animation-delay: 0.3s;
}

.sa-particle-trail .sa-particles span:nth-child(4) {
    top: 55%;
    left: 50%;
    animation-delay: 0.4s;
}

.sa-particle-trail .sa-particles span:nth-child(5) {
    top: 40%;
    left: 60%;
    animation-delay: 0.5s;
}

.sa-particle-trail .sa-particles span:nth-child(6) {
    top: 25%;
    left: 75%;
    animation-delay: 0.6s;
}

@keyframes sa-particle-fly {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    30% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.5) translateY(-20px);
    }
}

/* 30. Final Glow Hold */
.sa-final-glow .sa-check {
    animation: sa-final-appear 0.6s ease forwards;
}

.sa-final-glow .sa-final-aura {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sa-primary-color) 0%, transparent 70%);
    animation: sa-final-glow-hold 2s ease forwards;
}

@keyframes sa-final-appear {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sa-final-glow-hold {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    30% {
        opacity: 0.6;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* ============================================================= */
/* ===== END: Success Animation Settings (Checkmark Effects) ===== */
/* ============================================================= */

@keyframes sa-hayday-bounce {
    0% {
        transform: scale(0) rotateY(-180deg);
    }

    50% {
        transform: scale(1.2) rotateY(0deg);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* Sparkles Animation */
.sa-sparkles {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.sa-sparkles span {
    animation: sa-sparkle-pop 1s ease infinite;
    font-size: 1.2rem;
}

.sa-sparkles span:nth-child(2) {
    animation-delay: 0.2s;
}

.sa-sparkles span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes sa-sparkle-pop {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8) translateY(0);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) translateY(-10px);
    }
}

/* 1. Pig Animation */
.sa-pig .sa-pig-body {
    width: 80px;
    height: 70px;
    background: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 100%);
    border-radius: 50%;
    position: relative;
    box-shadow: inset -5px -5px 15px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(255, 105, 180, 0.3);
}

.sa-pig .sa-pig-ear {
    width: 25px;
    height: 25px;
    background: #FF69B4;
    border-radius: 50% 50% 0 50%;
    position: absolute;
    top: -10px;
}

.sa-pig .sa-pig-ear.left {
    left: 10px;
    transform: rotate(-30deg);
}

.sa-pig .sa-pig-ear.right {
    right: 10px;
    transform: rotate(30deg) scaleX(-1);
}

.sa-pig .sa-pig-snout {
    width: 35px;
    height: 25px;
    background: #FFB6C1;
    border-radius: 50%;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.1);
}

.sa-pig .sa-pig-snout::before,
.sa-pig .sa-pig-snout::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #FF69B4;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.sa-pig .sa-pig-snout::before {
    left: 5px;
}

.sa-pig .sa-pig-snout::after {
    right: 5px;
}

.sa-pig .sa-pig-eyes {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

.sa-pig .sa-pig-eyes span {
    width: 12px;
    height: 12px;
    background: #333;
    border-radius: 50%;
    position: relative;
}

.sa-pig .sa-pig-eyes span::before {
    content: '';
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    right: 2px;
}

/* 2. Golden Egg */
.sa-golden-egg .sa-egg {
    width: 70px;
    height: 90px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5),
        inset -10px -10px 20px rgba(0, 0, 0, 0.1),
        inset 10px 10px 20px rgba(255, 255, 255, 0.5);
    animation: sa-egg-glow 1.5s ease infinite;
}

@keyframes sa-egg-glow {

    0%,
    100% {
        box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5);
    }

    50% {
        box-shadow: 0 10px 50px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.6);
    }
}

.sa-golden-egg .sa-shine {
    position: absolute;
    width: 15px;
    height: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, transparent 100%);
    border-radius: 50%;
    top: 20px;
    left: 35%;
    transform: rotate(-20deg);
}

/* 3. Sunflower */
.sa-sunflower {
    animation: sa-sunflower-sway 2s ease-in-out infinite;
}

@keyframes sa-sunflower-sway {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

.sa-sunflower .sa-petals {
    width: 90px;
    height: 90px;
    background: #FFD700;
    border-radius: 50%;
    position: relative;
    box-shadow:
        30px 0 0 #FFD700, -30px 0 0 #FFD700,
        0 30px 0 #FFD700, 0 -30px 0 #FFD700,
        21px 21px 0 #FFD700, -21px 21px 0 #FFD700,
        21px -21px 0 #FFD700, -21px -21px 0 #FFD700;
}

.sa-sunflower .sa-center {
    position: absolute;
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, #8B4513 0%, #5D3A1A 100%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.sa-sunflower .sa-stem {
    position: absolute;
    width: 8px;
    height: 40px;
    background: linear-gradient(180deg, #4CAF50, #2E7D32);
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
}

/* 4. Cow */
.sa-cow .sa-cow-body {
    width: 80px;
    height: 60px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.sa-cow .sa-cow-spots {
    position: absolute;
    width: 80px;
    height: 60px;
}

.sa-cow .sa-cow-spots::before,
.sa-cow .sa-cow-spots::after {
    content: '';
    background: #333;
    border-radius: 50%;
    position: absolute;
}

.sa-cow .sa-cow-spots::before {
    width: 20px;
    height: 15px;
    top: 10px;
    left: 10px;
}

.sa-cow .sa-cow-spots::after {
    width: 15px;
    height: 18px;
    top: 25px;
    right: 15px;
}

.sa-cow .sa-cow-face span.eye {
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
    position: absolute;
    top: 15px;
}

.sa-cow .sa-cow-face span.eye:first-child {
    left: 20px;
}

.sa-cow .sa-cow-face span.eye:nth-child(2) {
    right: 20px;
}

.sa-cow .sa-cow-face span.nose {
    width: 20px;
    height: 15px;
    background: #FFB6C1;
    border-radius: 50%;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

/* 5. Sheep */
.sa-sheep .sa-wool {
    width: 80px;
    height: 70px;
    background: radial-gradient(circle at 30% 30%, #FFF 0%, #E8E8E8 100%);
    border-radius: 50%;
    position: relative;
    box-shadow:
        15px 0 0 #FFF, -15px 0 0 #FFF,
        0 15px 0 #FFF, 0 -15px 0 #FFF,
        0 10px 20px rgba(0, 0, 0, 0.15);
    animation: sa-sheep-bounce 0.5s ease infinite alternate;
}

@keyframes sa-sheep-bounce {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-5px);
    }
}

.sa-sheep .sa-sheep-face {
    position: absolute;
    width: 30px;
    height: 35px;
    background: #333;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sa-sheep .sa-sheep-face::before,
.sa-sheep .sa-sheep-face::after {
    content: '';
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 8px;
}

.sa-sheep .sa-sheep-face::before {
    left: 6px;
}

.sa-sheep .sa-sheep-face::after {
    right: 6px;
}

/* 6. Chicken */
.sa-chicken {
    animation: sa-chicken-peck 0.5s ease infinite;
}

@keyframes sa-chicken-peck {

    0%,
    100% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(-10deg) translateY(5px);
    }
}

.sa-chicken .sa-chicken-body {
    width: 70px;
    height: 60px;
    background: linear-gradient(135deg, #FFD54F 0%, #FFB300 100%);
    border-radius: 50%;
    position: relative;
}

.sa-chicken .sa-chicken-comb {
    width: 20px;
    height: 25px;
    background: #E53935;
    border-radius: 50% 50% 0 0;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.sa-chicken .sa-chicken-beak {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #FF5722;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

/* 7. Carrot */
.sa-carrot {
    animation: sa-carrot-bounce 0.6s ease infinite alternate;
}

@keyframes sa-carrot-bounce {
    0% {
        transform: translateY(0) rotate(-10deg);
    }

    100% {
        transform: translateY(-15px) rotate(10deg);
    }
}

.sa-carrot .sa-carrot-body {
    width: 35px;
    height: 90px;
    background: linear-gradient(180deg, #FF9800 0%, #E65100 100%);
    border-radius: 10px 10px 50% 50%;
    position: relative;
}

.sa-carrot .sa-carrot-leaves {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 25px;
}

.sa-carrot .sa-carrot-leaves::before,
.sa-carrot .sa-carrot-leaves::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 25px;
    background: #4CAF50;
    border-radius: 50%;
}

.sa-carrot .sa-carrot-leaves::before {
    left: 10px;
    transform: rotate(-15deg);
}

.sa-carrot .sa-carrot-leaves::after {
    right: 10px;
    transform: rotate(15deg);
}

/* 8. Apple */
.sa-apple .sa-apple-body {
    width: 70px;
    height: 75px;
    background: linear-gradient(135deg, #E53935 0%, #B71C1C 100%);
    border-radius: 50%;
    position: relative;
    box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.2);
}

.sa-apple .sa-apple-leaf {
    position: absolute;
    width: 20px;
    height: 15px;
    background: #4CAF50;
    border-radius: 50%;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(30deg);
}

.sa-apple .sa-apple-shine {
    position: absolute;
    width: 15px;
    height: 20px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    top: 15px;
    left: 15px;
}

/* 9. Sun */
.sa-sun .sa-sun-face {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #FFEB3B 0%, #FFC107 100%);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 40px rgba(255, 235, 59, 0.6);
}

.sa-sun .sa-sun-face::before {
    content: '◡';
    font-size: 30px;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sa-sun .sa-sun-rays {
    position: absolute;
    width: 100px;
    height: 100px;
    animation: sa-sun-rotate 8s linear infinite;
}

@keyframes sa-sun-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 10. Rainbow */
.sa-rainbow .sa-rainbow-arc {
    width: 100px;
    height: 50px;
    border-radius: 100px 100px 0 0;
    background: linear-gradient(180deg,
            #E53935 0%, #FF9800 16%, #FFEB3B 32%,
            #4CAF50 48%, #2196F3 64%, #9C27B0 80%);
    position: relative;
}

.sa-rainbow .sa-rainbow-arc::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10px;
    width: 80px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 100px 100px 0 0;
}

.sa-rainbow .sa-clouds span {
    position: absolute;
    width: 30px;
    height: 20px;
    background: white;
    border-radius: 50%;
    bottom: 0;
    box-shadow: 10px 5px 0 white, -10px 5px 0 white;
}

.sa-rainbow .sa-clouds span:first-child {
    left: -15px;
}

.sa-rainbow .sa-clouds span:last-child {
    right: -15px;
}

/* 11. Trophy */
.sa-trophy .sa-trophy-cup {
    width: 60px;
    height: 50px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 0 0 50% 50%;
    position: relative;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

.sa-trophy .sa-trophy-cup::before,
.sa-trophy .sa-trophy-cup::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 25px;
    border: 4px solid #FFD700;
    border-radius: 50%;
    top: 10px;
}

.sa-trophy .sa-trophy-cup::before {
    left: -15px;
}

.sa-trophy .sa-trophy-cup::after {
    right: -15px;
}

.sa-trophy .sa-trophy-base {
    width: 30px;
    height: 20px;
    background: #8B4513;
    margin-top: -5px;
    border-radius: 5px;
}

.sa-trophy .sa-trophy-star {
    position: absolute;
    top: -20px;
    font-size: 25px;
    animation: sa-star-pulse 0.5s ease infinite alternate;
}

@keyframes sa-star-pulse {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.3);
    }
}

/* 12. Star Burst */
.sa-star-burst .sa-big-star {
    font-size: 80px;
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    animation: sa-star-spin 1s ease;
}

@keyframes sa-star-spin {
    0% {
        transform: scale(0) rotate(-180deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.sa-star-burst .sa-small-stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.sa-star-burst .sa-small-stars span {
    position: absolute;
    color: #FF9800;
    font-size: 20px;
    animation: sa-small-star-fly 1s ease forwards;
}

.sa-star-burst .sa-small-stars span:nth-child(1) {
    top: 0;
    left: 50%;
}

.sa-star-burst .sa-small-stars span:nth-child(2) {
    top: 20%;
    right: 0;
}

.sa-star-burst .sa-small-stars span:nth-child(3) {
    bottom: 20%;
    right: 10%;
}

.sa-star-burst .sa-small-stars span:nth-child(4) {
    bottom: 20%;
    left: 10%;
}

.sa-star-burst .sa-small-stars span:nth-child(5) {
    top: 20%;
    left: 0;
}

@keyframes sa-small-star-fly {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
        transform: scale(1) translateY(-10px);
    }
}

/* 13. Gift Box */
.sa-gift .sa-gift-box {
    width: 60px;
    height: 50px;
    background: linear-gradient(135deg, #E53935 0%, #C62828 100%);
    border-radius: 5px;
    position: relative;
}

.sa-gift .sa-gift-lid {
    width: 70px;
    height: 15px;
    background: #E53935;
    border-radius: 3px;
    position: absolute;
    top: -20px;
    left: -5px;
    animation: sa-lid-jump 0.8s ease forwards;
}

@keyframes sa-lid-jump {

    0%,
    20% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px) rotate(-10deg);
    }

    60% {
        transform: translateY(-20px) rotate(5deg);
    }

    100% {
        transform: translateY(-25px) rotate(0deg);
    }
}

.sa-gift .sa-gift-ribbon {
    position: absolute;
    width: 10px;
    height: 100%;
    background: #FFD700;
    left: 50%;
    transform: translateX(-50%);
}

.sa-gift .sa-pop-out {
    position: absolute;
    top: -50px;
    font-size: 30px;
    animation: sa-pop 0.8s ease forwards;
}

@keyframes sa-pop {

    0%,
    30% {
        opacity: 0;
        transform: translateY(20px) scale(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 14. Coins */
.sa-coins .sa-coin {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 50%;
    position: absolute;
    border: 3px solid #B8860B;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

.sa-coins .sa-coin::before {
    content: '฿';
    font-size: 24px;
    font-weight: bold;
    color: #B8860B;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sa-coins .sa-coin.c1 {
    animation: sa-coin-drop1 0.6s ease forwards;
}

.sa-coins .sa-coin.c2 {
    animation: sa-coin-drop2 0.6s ease 0.1s forwards;
    top: 10px;
    left: -20px;
}

.sa-coins .sa-coin.c3 {
    animation: sa-coin-drop3 0.6s ease 0.2s forwards;
    top: 10px;
    right: -20px;
}

@keyframes sa-coin-drop1 {
    from {
        transform: translateY(-50px) rotate(0deg);
    }

    to {
        transform: translateY(0) rotate(360deg);
    }
}

@keyframes sa-coin-drop2 {
    from {
        transform: translateY(-50px) rotate(0deg);
        opacity: 0;
    }

    to {
        transform: translateY(0) rotate(-360deg);
        opacity: 1;
    }
}

@keyframes sa-coin-drop3 {
    from {
        transform: translateY(-50px) rotate(0deg);
        opacity: 0;
    }

    to {
        transform: translateY(0) rotate(360deg);
        opacity: 1;
    }
}

/* 15. Balloon */
.sa-balloon {
    animation: sa-balloon-float 2s ease-in-out infinite;
}

@keyframes sa-balloon-float {

    0%,
    100% {
        transform: translateY(0) rotate(-5deg);
    }

    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

.sa-balloon .sa-balloon-body {
    width: 60px;
    height: 75px;
    background: linear-gradient(135deg, #E53935 0%, #B71C1C 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
}

.sa-balloon .sa-balloon-string {
    width: 2px;
    height: 40px;
    background: #999;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
}

.sa-balloon .sa-balloon-shine {
    width: 15px;
    height: 20px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    position: absolute;
    top: 15px;
    left: 12px;
}

/* 16. Barn */
.sa-barn .sa-barn-body {
    width: 80px;
    height: 60px;
    background: linear-gradient(135deg, #E53935 0%, #B71C1C 100%);
    position: relative;
}

.sa-barn .sa-barn-roof {
    width: 100px;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 40px solid #8B4513;
    position: absolute;
    top: -40px;
    left: -10px;
}

.sa-barn .sa-barn-door {
    width: 30px;
    height: 45px;
    background: #5D4037;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 15px 15px 0 0;
}

/* 17. Tractor */
.sa-tractor {
    animation: sa-tractor-move 1.5s ease-in-out infinite;
}

@keyframes sa-tractor-move {

    0%,
    100% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }
}

.sa-tractor .sa-tractor-body {
    width: 70px;
    height: 40px;
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    border-radius: 5px;
    position: relative;
}

.sa-tractor .sa-tractor-wheel {
    width: 30px;
    height: 30px;
    background: #333;
    border-radius: 50%;
    position: absolute;
    bottom: -15px;
    border: 3px solid #666;
    animation: sa-wheel-spin 0.5s linear infinite;
}

.sa-tractor .sa-tractor-wheel.front {
    left: 5px;
    width: 25px;
    height: 25px;
}

.sa-tractor .sa-tractor-wheel.back {
    right: 5px;
}

@keyframes sa-wheel-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 18-30: Additional animations with similar style patterns */
/* Bee */
.sa-bee .sa-bee-body {
    width: 50px;
    height: 40px;
    background: linear-gradient(90deg, #FFEB3B 0%, #333 25%, #FFEB3B 50%, #333 75%, #FFEB3B 100%);
    border-radius: 50%;
    animation: sa-bee-fly 0.3s ease infinite alternate;
}

@keyframes sa-bee-fly {
    0% {
        transform: translateY(-5px) rotate(-5deg);
    }

    100% {
        transform: translateY(5px) rotate(5deg);
    }
}

.sa-bee .sa-bee-wings {
    position: absolute;
    width: 30px;
    height: 20px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    top: -10px;
    animation: sa-wing-flap 0.1s linear infinite alternate;
}

@keyframes sa-wing-flap {
    0% {
        transform: rotate(-20deg);
    }

    100% {
        transform: rotate(20deg);
    }
}

/* 19. Butterfly */
.sa-butterfly .sa-butterfly-body {
    width: 8px;
    height: 40px;
    background: #8B4513;
    border-radius: 4px;
}

.sa-butterfly .sa-butterfly-wings {
    position: absolute;
    width: 35px;
    height: 45px;
    background: linear-gradient(135deg, #E91E63 0%, #9C27B0 100%);
    border-radius: 50%;
    animation: sa-butterfly-flap 0.3s ease infinite alternate;
}

.sa-butterfly .sa-butterfly-wings.left {
    left: -30px;
    transform-origin: right;
}

.sa-butterfly .sa-butterfly-wings.right {
    right: -30px;
    transform-origin: left;
}

@keyframes sa-butterfly-flap {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(60deg);
    }
}

/* 23. Heart */
.sa-heart .sa-heart-shape {
    width: 80px;
    height: 70px;
    background: linear-gradient(135deg, #E53935 0%, #C62828 100%);
    position: relative;
    transform: rotate(-45deg);
    animation: sa-heart-beat 0.8s ease infinite;
}

.sa-heart .sa-heart-shape::before,
.sa-heart .sa-heart-shape::after {
    content: '';
    width: 80px;
    height: 70px;
    background: inherit;
    border-radius: 50%;
    position: absolute;
}

.sa-heart .sa-heart-shape::before {
    top: -35px;
    left: 0;
}

.sa-heart .sa-heart-shape::after {
    left: 35px;
    top: 0;
}

@keyframes sa-heart-beat {

    0%,
    100% {
        transform: rotate(-45deg) scale(1);
    }

    50% {
        transform: rotate(-45deg) scale(1.15);
    }
}

/* 24. Check 3D */
.sa-check3d .sa-check-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4);
}

.sa-check3d .sa-check-mark {
    position: absolute;
    font-size: 50px;
    color: white;
    font-weight: bold;
    animation: sa-check-appear 0.5s ease forwards;
}

@keyframes sa-check-appear {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* 25. Banner */
.sa-banner .sa-banner-scroll {
    width: 120px;
    height: 50px;
    background: linear-gradient(135deg, #F5DEB3 0%, #DEB887 100%);
    border-radius: 5px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.sa-banner .sa-banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #8B4513;
    font-size: 18px;
}

/* 26. Letter */
.sa-letter .sa-envelope {
    width: 80px;
    height: 55px;
    background: linear-gradient(135deg, #FFF 0%, #F5F5F5 100%);
    position: relative;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.sa-letter .sa-envelope-flap {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 30px solid #E8E8E8;
    position: absolute;
    top: 0;
    animation: sa-envelope-open 0.8s ease forwards;
}

@keyframes sa-envelope-open {
    0% {
        transform: rotateX(0deg);
    }

    100% {
        transform: rotateX(180deg);
    }
}

.sa-letter .sa-hearts {
    position: absolute;
    top: -25px;
    font-size: 20px;
    animation: sa-hearts-float 1s ease forwards;
}

@keyframes sa-hearts-float {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 27. Flower */
.sa-flower .sa-flower-petals {
    width: 70px;
    height: 70px;
    position: relative;
    animation: sa-flower-bloom 0.8s ease forwards;
}

@keyframes sa-flower-bloom {
    0% {
        transform: scale(0) rotate(-180deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.sa-flower .sa-flower-petals::before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: #FF69B4;
    border-radius: 50%;
    box-shadow:
        20px 0 0 #FF69B4, -20px 0 0 #FF69B4,
        0 20px 0 #FF69B4, 0 -20px 0 #FF69B4,
        14px 14px 0 #FF69B4, -14px 14px 0 #FF69B4,
        14px -14px 0 #FF69B4, -14px -14px 0 #FF69B4;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sa-flower .sa-flower-center {
    position: absolute;
    width: 25px;
    height: 25px;
    background: #FFEB3B;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* 28. Coffee Beans */
.sa-coffee .sa-coffee-beans {
    display: flex;
    gap: 10px;
}

.sa-coffee .sa-coffee-beans span {
    width: 25px;
    height: 35px;
    background: linear-gradient(135deg, #6D4C41 0%, #4E342E 100%);
    border-radius: 50%;
    position: relative;
    animation: sa-bean-bounce 0.5s ease infinite;
}

.sa-coffee .sa-coffee-beans span:nth-child(2) {
    animation-delay: 0.1s;
}

.sa-coffee .sa-coffee-beans span:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes sa-bean-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.sa-coffee .sa-steam {
    position: absolute;
    top: -30px;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.6);
    animation: sa-steam-rise 1s ease infinite;
}

@keyframes sa-steam-rise {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* 29. Target */
.sa-target .sa-target-rings {
    width: 80px;
    height: 80px;
    border: 8px solid #E53935;
    border-radius: 50%;
    position: relative;
}

.sa-target .sa-target-rings::before {
    content: '';
    width: 50px;
    height: 50px;
    border: 8px solid #FFF;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sa-target .sa-bullseye {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #E53935;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sa-target .sa-arrow {
    position: absolute;
    font-size: 40px;
    color: #4CAF50;
    right: -40px;
    animation: sa-arrow-hit 0.5s ease forwards;
}

@keyframes sa-arrow-hit {
    0% {
        transform: translateX(50px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 30. Stamp */
.sa-stamp {
    animation: sa-stamp-drop 0.5s ease forwards;
}

@keyframes sa-stamp-drop {
    0% {
        transform: scale(3) rotate(30deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(-5deg);
        opacity: 1;
    }
}

.sa-stamp .sa-stamp-circle {
    width: 100px;
    height: 100px;
    border: 6px solid #4CAF50;
    border-radius: 50%;
    position: relative;
}

.sa-stamp .sa-stamp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 16px;
    color: #4CAF50;
    text-transform: uppercase;
}

/* ============================================================= */
/* ===== END: Success Animation Settings (Hay Day 3D) ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Background Preview Modal Styles ===== */
/* ============================================================= */

.modal-fullscreen {
    width: 90vw;
    max-width: 800px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.bg-preview-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
}

.bg-preview-modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
}

.modal-close-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

.bg-preview-frame {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.bg-preview-modal-footer {
    padding: 15px 20px;
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* Shop View Preview */
.bg-preview-shop-view {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.bg-preview-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.bg-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.bg-preview-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.bg-preview-content .preview-header {
    text-align: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.bg-preview-content .preview-header h2 {
    margin: 0;
    font-size: 1.4rem;
    color: var(--primary-color);
}

.bg-preview-content .preview-products {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 10px;
    overflow-y: auto;
}

.bg-preview-content .preview-product-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    min-height: 100px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.bg-preview-content .preview-product-card::before {
    content: '📦 สินค้า';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #aaa;
    font-size: 0.9rem;
}

.bg-preview-content .preview-cart {
    background: var(--primary-color);
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    text-align: center;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ============================================================= */
/* ===== END: Background Preview Modal Styles ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Logo + Shop Name Header Styles ===== */
/* ============================================================= */

#header-title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

#header-title-container.with-logo {
    flex-direction: row;
    gap: 15px;
}

#shop-logo-display {
    max-height: 60px;
    max-width: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    transition: all 0.3s ease;
}

#header-title-container.with-logo #shop-logo-display {
    max-height: 50px;
    max-width: 50px;
}

#header-title-container.with-logo #shop-name-display {
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    #header-title-container.with-logo {
        flex-direction: row;
        gap: 10px;
    }

    #header-title-container.with-logo #shop-logo-display {
        max-height: 40px;
        max-width: 40px;
    }
}

/* ============================================================= */
/* ===== END: Logo + Shop Name Header Styles ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Hay Day Themed Effects Styles ===== */
/* ============================================================= */

.hayday-effect-card {
    transition: all 0.3s ease;
    border: 2px solid var(--border-color);
}

.hayday-effect-card.active {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05) 0%, transparent 100%);
    box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.2);
}

.hayday-effect-preview {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10px;
    min-height: 80px;
}

.hayday-particle {
    position: absolute;
    pointer-events: none;
}

/* Fall animations for each effect */
@keyframes hayday-fall-wheat {
    0% {
        top: -20px;
        transform: translateX(0) rotate(0deg);
    }

    100% {
        top: 100%;
        transform: translateX(20px) rotate(360deg);
    }
}

@keyframes hayday-fall-chicken {
    0% {
        left: -20px;
        top: 80%;
    }

    50% {
        top: 75%;
    }

    100% {
        left: 110%;
        top: 80%;
    }
}

@keyframes hayday-fall-coins {
    0% {
        top: -20px;
        transform: scale(0.8) rotateY(0deg) rotateX(0deg);
        filter: brightness(1);
    }

    15% {
        transform: scale(1.1) rotateY(90deg) rotateX(10deg);
        filter: brightness(1.3);
    }

    30% {
        transform: scale(1) rotateY(180deg) rotateX(-5deg);
        filter: brightness(1);
    }

    45% {
        transform: scale(1.15) rotateY(270deg) rotateX(8deg);
        filter: brightness(1.4);
    }

    60% {
        transform: scale(1) rotateY(360deg) rotateX(-3deg);
        filter: brightness(1.1);
    }

    75% {
        transform: scale(1.08) rotateY(450deg) rotateX(5deg);
        filter: brightness(1.3);
    }

    100% {
        top: 100%;
        transform: scale(0.9) rotateY(540deg) rotateX(0deg);
        filter: brightness(1);
    }
}

@keyframes hayday-fall-stars {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes hayday-fall-bubbles {
    0% {
        bottom: -20px;
        transform: translateX(0) scale(0.3);
        opacity: 0.4;
        filter: blur(0px);
    }

    10% {
        transform: translateX(8px) scale(0.5);
        opacity: 0.7;
    }

    25% {
        transform: translateX(-5px) scale(0.7);
        opacity: 0.9;
    }

    40% {
        transform: translateX(12px) scale(0.85);
        opacity: 1;
    }

    55% {
        transform: translateX(-8px) scale(1);
        opacity: 0.95;
    }

    70% {
        transform: translateX(10px) scale(1.1);
        opacity: 0.85;
    }

    85% {
        transform: translateX(-6px) scale(1);
        opacity: 0.6;
    }

    95% {
        transform: translateX(3px) scale(0.9);
        opacity: 0.3;
        filter: blur(1px);
    }

    100% {
        bottom: 100%;
        transform: translateX(0) scale(0.7);
        opacity: 0;
        filter: blur(2px);
    }
}

@keyframes hayday-fall-flowers {
    0% {
        top: -20px;
        transform: translateX(0) rotate(0deg);
    }

    25% {
        transform: translateX(15px) rotate(90deg);
    }

    50% {
        transform: translateX(-15px) rotate(180deg);
    }

    75% {
        transform: translateX(10px) rotate(270deg);
    }

    100% {
        top: 100%;
        transform: translateX(0) rotate(360deg);
    }
}

@keyframes hayday-fall-butterflies {
    0% {
        left: -20px;
        top: 50%;
        transform: scale(1);
    }

    25% {
        top: 30%;
        transform: scale(1.1);
    }

    50% {
        top: 60%;
        transform: scale(0.9);
    }

    75% {
        top: 40%;
        transform: scale(1.1);
    }

    100% {
        left: 110%;
        top: 50%;
        transform: scale(1);
    }
}

@keyframes hayday-fall-apples {
    0% {
        top: -20px;
        transform: rotate(0deg);
    }

    100% {
        top: 100%;
        transform: rotate(45deg);
    }
}

@keyframes hayday-fall-hay {
    0% {
        top: -20px;
        transform: translateX(0) rotate(0deg);
    }

    33% {
        transform: translateX(30px) rotate(120deg);
    }

    66% {
        transform: translateX(-20px) rotate(240deg);
    }

    100% {
        top: 100%;
        transform: translateX(10px) rotate(360deg);
    }
}

@keyframes hayday-fall-sparkles {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }

    25% {
        opacity: 1;
        transform: scale(1.5);
    }

    50% {
        opacity: 0.7;
        transform: scale(1);
    }

    75% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* Particle animations */
.hayday-particle-wheat,
.hayday-particle-coins,
.hayday-particle-flowers,
.hayday-particle-apples,
.hayday-particle-hay {
    animation-timing-function: ease-in-out !important;
}

.hayday-particle-chicken,
.hayday-particle-butterflies {
    animation-timing-function: linear !important;
}

.hayday-particle-bubbles {
    bottom: -20px;
    animation-timing-function: ease-out !important;
}

.hayday-particle-stars,
.hayday-particle-sparkles {
    top: 50%;
    animation-iteration-count: infinite !important;
}

#hayday-effects-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

#hayday-effects-container .effect-section {
    margin-bottom: 0;
}

/* ============================================================= */
/* ===== END: Hay Day Themed Effects Styles ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Seasonal & General Effects Preview Styles ===== */
/* ============================================================= */

/* Seasonal effect card styles */
.seasonal-effect-card {
    transition: all 0.3s ease;
    border: 2px solid var(--border-color);
}

.seasonal-effect-card.active {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05) 0%, transparent 100%);
    box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.2);
}

.seasonal-effect-preview {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10px;
}

.seasonal-particle {
    position: absolute;
    pointer-events: none;
}

/* General effect card styles */
.general-effect-card {
    transition: all 0.3s ease;
    border: 2px solid var(--border-color);
}

.general-effect-card.active {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05) 0%, transparent 100%);
    box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.2);
}

.general-effect-preview {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10px;
}

.general-particle {
    position: absolute;
    pointer-events: none;
}

/* Grid layout for effects containers */
#seasonal-effects-container,
#general-effects-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

#seasonal-effects-container .effect-section,
#general-effects-container .effect-section {
    margin-bottom: 0;
}

/* Seasonal effects animations */
@keyframes seasonal-fall-snow {
    0% {
        top: -20px;
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        top: 100%;
        transform: translateX(-10px);
    }
}

@keyframes seasonal-fall-lantern {
    0% {
        top: -20px;
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(10px) scale(1.1);
    }

    100% {
        top: 100%;
        transform: translateY(0) scale(1);
    }
}

@keyframes seasonal-fall-heart {
    0% {
        top: -20px;
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        top: 100%;
        transform: scale(0.8);
    }
}

@keyframes seasonal-fall-bat {
    0% {
        left: -20px;
        top: 50%;
        transform: scaleX(1);
    }

    25% {
        transform: scaleX(-1);
        top: 30%;
    }

    50% {
        top: 60%;
        transform: scaleX(1);
    }

    75% {
        top: 40%;
        transform: scaleX(-1);
    }

    100% {
        left: 110%;
        top: 50%;
        transform: scaleX(1);
    }
}

@keyframes seasonal-fall-flag {
    0% {
        top: -20px;
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }

    100% {
        top: 100%;
        transform: rotate(-5deg);
    }
}

@keyframes seasonal-fall-krathong {
    0% {
        bottom: -20px;
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }

    100% {
        bottom: 100%;
        transform: translateX(-5px);
    }
}

@keyframes seasonal-fall-water {
    0% {
        top: -20px;
        transform: scale(1);
    }

    100% {
        top: 100%;
        transform: scale(0.5);
    }
}

@keyframes seasonal-fall-firework {
    0% {
        bottom: -20px;
        transform: scale(0.5);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        bottom: 100%;
        transform: scale(0.3);
        opacity: 0;
    }
}

/* General effects animations */
@keyframes general-fall-rain {
    0% {
        top: -20px;
    }

    100% {
        top: 100%;
    }
}

@keyframes general-fall-snow {
    0% {
        top: -20px;
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        top: 100%;
        transform: translateX(-10px);
    }
}

@keyframes general-fall-fireworks {
    0% {
        bottom: -20px;
        transform: scale(0.5);
        opacity: 1;
    }

    50% {
        transform: scale(1.8);
    }

    100% {
        bottom: 100%;
        transform: scale(0.3);
        opacity: 0;
    }
}

@keyframes general-fall-autumn {
    0% {
        top: -20px;
        transform: rotate(0deg) translateX(0);
    }

    25% {
        transform: rotate(90deg) translateX(15px);
    }

    50% {
        transform: rotate(180deg) translateX(-15px);
    }

    75% {
        transform: rotate(270deg) translateX(10px);
    }

    100% {
        top: 100%;
        transform: rotate(360deg) translateX(0);
    }
}

/* ============================================================= */
/* ===== END: Seasonal & General Effects Preview Styles ===== */
/* ============================================================= */

/* ============================================================= */
/* ===== START: Seasonal/Festival Theme Text Protection ===== */
/* ============================================================= */
/* Ensure text remains readable on all festival theme backgrounds */

/* Base seasonal theme protection - applies to all seasonal themes */
.seasonal-theme-active {
    /* Ensure proper text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.seasonal-theme-active #shop-name-display,
.seasonal-theme-active #shop-slogan-display,
.seasonal-theme-active .category-name,
.seasonal-theme-active .product-card *,
.seasonal-theme-active .marquee-content,
.seasonal-theme-active .order-bar-btn,
.seasonal-theme-active .cart-count,
.seasonal-theme-active h1,
.seasonal-theme-active h2,
.seasonal-theme-active h3,
.seasonal-theme-active p,
.seasonal-theme-active span:not(.slider),
.seasonal-theme-active label,
.seasonal-theme-active button {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.6),
        0 0 4px rgba(0, 0, 0, 0.4);
}

/* Christmas theme - blue gradient, needs white/light text with shadow */
.theme-christmas #shop-name-display,
.theme-christmas #shop-slogan-display,
.theme-christmas .category-name,
.theme-christmas .marquee-content {
    color: #ffffff !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(0, 0, 50, 0.6);
}

/* Chinese New Year theme - red/gold gradient */
.theme-cny #shop-name-display,
.theme-cny #shop-slogan-display,
.theme-cny .category-name,
.theme-cny .marquee-content {
    color: #FFD700 !important;
    text-shadow:
        0 2px 4px rgba(100, 0, 0, 0.9),
        0 0 8px rgba(0, 0, 0, 0.7);
}

/* Valentine theme - pink gradient */
.theme-valentine #shop-name-display,
.theme-valentine #shop-slogan-display,
.theme-valentine .category-name,
.theme-valentine .marquee-content {
    color: #ffffff !important;
    text-shadow:
        0 2px 4px rgba(150, 0, 50, 0.8),
        0 0 8px rgba(0, 0, 0, 0.5);
}

/* Halloween theme - dark orange gradient */
.theme-halloween #shop-name-display,
.theme-halloween #shop-slogan-display,
.theme-halloween .category-name,
.theme-halloween .marquee-content {
    color: #FF8C00 !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 0 8px rgba(0, 0, 0, 0.7);
}

/* Vegetarian theme - yellow gradient */
.theme-vegetarian #shop-name-display,
.theme-vegetarian #shop-slogan-display,
.theme-vegetarian .category-name,
.theme-vegetarian .marquee-content {
    color: #6B4226 !important;
    text-shadow:
        0 2px 4px rgba(255, 255, 200, 0.8),
        0 0 8px rgba(255, 255, 255, 0.5);
}

/* Loy Krathong theme - dark blue night gradient */
.theme-loykrathong #shop-name-display,
.theme-loykrathong #shop-slogan-display,
.theme-loykrathong .category-name,
.theme-loykrathong .marquee-content {
    color: #FFD700 !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 30, 0.9),
        0 0 8px rgba(0, 0, 0, 0.7);
}

/* Songkran theme - blue water gradient */
.theme-songkran #shop-name-display,
.theme-songkran #shop-slogan-display,
.theme-songkran .category-name,
.theme-songkran .marquee-content {
    color: #ffffff !important;
    text-shadow:
        0 2px 4px rgba(0, 50, 100, 0.8),
        0 0 8px rgba(0, 0, 80, 0.5);
}

/* New Year theme - dark blue/purple gradient */
.theme-newyear #shop-name-display,
.theme-newyear #shop-slogan-display,
.theme-newyear .category-name,
.theme-newyear .marquee-content {
    color: #FFD700 !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 30, 0.9),
        0 0 8px rgba(0, 0, 0, 0.7);
}

/* Product cards need background for readability on any theme */
.seasonal-theme-active .product-card {
    background: rgba(var(--card-background-rgb, 255, 255, 255), 0.95) !important;
    backdrop-filter: blur(5px);
}

.seasonal-theme-active.dark-mode .product-card {
    background: rgba(30, 30, 40, 0.95) !important;
}

/* Category nav bar background protection */
.seasonal-theme-active .category-nav {
    background: rgba(var(--card-background-rgb, 255, 255, 255), 0.85) !important;
    backdrop-filter: blur(8px);
}

.seasonal-theme-active.dark-mode .category-nav {
    background: rgba(20, 20, 30, 0.85) !important;
}

/* Order bar protection */
.seasonal-theme-active .order-bar {
    background: rgba(var(--card-background-rgb, 255, 255, 255), 0.9) !important;
    backdrop-filter: blur(8px);
}

.seasonal-theme-active.dark-mode .order-bar {
    background: rgba(25, 25, 35, 0.9) !important;
}

/* Marquee container protection */
.seasonal-theme-active .marquee-content-wrapper {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(4px);
    padding: 8px 20px;
    border-radius: 20px;
}

/* ============================================================= */
/* ===== END: Seasonal/Festival Theme Text Protection ===== */
/* ============================================================= */

/* ========================================= */
/* ===== START: Admin Panel Title Styling ===== */
.admin-header h2 {
    font-size: 1.5rem !important;
    /* Reduced to 1.5rem */
    font-weight: 800 !important;
    margin: 0;
    padding: 5px 0;
    /* Premium Solid Silver/Metallic Gradient */
    background: linear-gradient(to right,
            #4a5568 0%,
            /* Deep Grey - High Contrast */
            #a0aec0 20%,
            /* Medium Silver */
            #ffffff 45%,
            /* White highlight */
            #ffffff 55%,
            /* White highlight */
            #a0aec0 80%,
            /* Medium Silver */
            #4a5568 100%
            /* Deep Grey - High Contrast */
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    /* Stronger shadow for solidity */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
    position: relative;
    display: inline-block;
    animation: shine-glossy 6s infinite linear;
    background-size: 200% auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

@keyframes shine-glossy {
    to {
        background-position: 200% center;
    }
}

/* ===== END: Admin Panel Title Styling ===== */