html,
body,
.modal-body,
.category-scroll-container,
* {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* ซ่อน Scrollbar สำหรับ Chrome, Safari, Opera */
::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}


/* Base Styles */
:root {
    /* --- Core Colors --- */
    --primary-color: #4285F4;
    --primary-light: #60a5fa;
    --primary-dark: #1e40af;
    --background-color: #ffffff;
    --card-background: #ffffff;
    --text-color: #202124;
    --subtle-text-color: #5f6368;

    /* --- Layout & Shapes --- */
    --border-radius: 25px;
    --border-color: #e5e7eb;

    /* --- Skeleton Loading Colors (Facebook Style) --- */
    --skeleton-base: #e4e6eb;
    /* Facebook Light Gray */
    --skeleton-highlight: #f0f2f5;
    /* Facebook Lighter Gray */

    /* Dark Mode Support (Future proof) */
    --skeleton-dark-base: #3a3b3c;
    --skeleton-dark-highlight: #b0b3b8;

    /* Animation Speed */
    --skeleton-duration: 1.2s;

    /* --- Status & Alerts Colors --- */
    --success-color: #15803d;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --secondary-gradient-start: #10b981;
    --secondary-gradient-end: #34d399;

    /* --- Status Badge Colors --- */
    --status-pending-bg: #fff7ed;
    --status-pending-text: #c2410c;
    --status-success-bg: #f0fdf4;
    --status-success-text: #15803d;
    --status-process-bg: #eff6ff;
    --status-process-text: #1d4ed8;
    --status-wait-bg: #f3e8ff;
    --status-wait-text: #7e22ce;
    --status-gray-bg: #f3f4f6;
    --status-gray-text: #6b7280;

    /* --- Status controls-wrapper --- */
    --max-width-controls-wrapper: 800px;
    --display-width-controls-wrapper: flex;
    --flex-direction-width-controls-wrapper: column;
    --gap-width-controls-wrapper: 12px;
    --padding-width-controls-wrapper: 0 10px;
}

/* =========================================
   SKELETON UTILITIES
   ========================================= */

/* The streaming animation effect */
.skeleton-shimmer {
    background-color: var(--skeleton-base);
    background-image: linear-gradient(90deg,
            var(--skeleton-base) 0%,
            var(--skeleton-highlight) 50%,
            var(--skeleton-base) 100%);
    background-size: 200% 100%;
    animation: skeleton-loading var(--skeleton-duration) infinite linear;
    border-radius: 8px;
    /* Default radius */
    color: transparent !important;
    border-color: transparent !important;
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

/* Specific Shapes */
.skeleton-text {
    height: 1rem;
    width: 100%;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-text.sm {
    height: 0.8rem;
}

.skeleton-text.lg {
    height: 1.5rem;
}

.skeleton-circle {
    border-radius: 50% !important;
}

.skeleton-block {
    display: block;
    width: 100%;
    height: 100%;
}

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

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

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    /* เอาแถบสีเทาเวลาแตะบนมือถือออก */
}

body {
    font-family: 'Noto Sans Thai', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

#app-container {
    width: 100%;
    max-width: 1400px;
    min-height: 100vh;
    padding-bottom: 40px;
}

/* --- Shared Utility Classes --- */
.hidden {
    display: none !important;
}

/* [NEW] Body scroll lock */
body.no-scroll {
    overflow: hidden !important;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.gap-2 {
    gap: 8px;
}

.gap-4 {
    gap: 16px;
}

.w-full {
    width: 100%;
}

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

.opacity-25 {
    opacity: 0.25;
}

.opacity-75 {
    opacity: 0.75;
}

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



/* =========================================
   2. CONTROLS & SEARCH (Unified)
   ========================================= */

.controls-wrapper {
    max-width: var(--max-width-controls-wrapper);
    margin: 10px auto 16px;
    display: var(--display-width-controls-wrapper);
    flex-direction: var(--flex-direction-width-controls-wrapper);
    gap: var(--gap-width-controls-wrapper);
    padding: var(--padding-width-controls-wrapper);
    width: 100%;
    /* Ensure full width if parent allows */
}

/* Search Container: The outer wrapper */
.search-container {
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 50px;
    border: 1px solid #dfe1e5;
    transition: box-shadow 0.2s, border-color 0.2s;
    background-color: #fff;
    padding: 4px;
    width: 100%;
}

.search-container:hover,
.search-container:focus-within {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    border-color: rgba(223, 225, 229, 0);
}

/* Skeleton Loading on Search Container */
.search-container.skeleton-shimmer {
    border-color: transparent;
    overflow: hidden;
    pointer-events: none;
}

.search-container.skeleton-shimmer>* {
    opacity: 0;
    visibility: hidden;
}

/* New Wrapper for Input Elements */
.search-input-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    position: relative;
}

/* Updated to target inputs generally within search-container */
.search-container input[type="text"] {
    width: auto;
    flex: 1;
    min-width: 0;
    padding: 10px 10px 10px 48px;
    font-size: 1rem;
    border: none;
    border-radius: 50px;
    box-sizing: border-box;
    font-family: 'Noto Sans Thai', sans-serif;
    background-color: transparent;
    outline: none;
    color: var(--text-color);
}

.search-container input[type="text"]:disabled {
    cursor: not-allowed;
    color: #aaa;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--subtle-text-color);
    z-index: 1;
    pointer-events: none;
}

.search-clear-btn {
    display: none;
    color: var(--subtle-text-color);
    cursor: pointer;
    padding: 8px;
    margin-right: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
    border: none;
    background: transparent;
}

.search-clear-btn.hidden {
    display: none !important;
}

.search-clear-btn:not(.hidden) {
    display: flex !important;
}

.search-clear-btn:hover {
    background-color: #f1f3f4;
    color: #202124;
}

.search-separator {
    width: 1px;
    height: 24px;
    background-color: #e0e0e0;
    margin: 0 8px;
    flex-shrink: 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--subtle-text-color);
    user-select: none;
    white-space: nowrap;
    padding: 4px 12px 4px 8px;
    border-radius: 20px;
    margin-right: 4px;
    flex-shrink: 0;
    transition: all 0.2s;
}

.checkbox-label:hover {
    background-color: #f1f3f4;
}

.checkbox-label input[type="checkbox"] {
    accent-color: var(--primary-color);
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

/* =========================================
   3. INDEX PAGE COMPONENTS
   ========================================= */

.category-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    margin-bottom: 0px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    padding: 0 4px;
}

.category-scroll-container.active {
    cursor: grabbing;
}

.category-scroll-container::-webkit-scrollbar {
    display: none;
}

.category-chip {
    background-color: #f1f3f4;
    color: #3c4043;
    border: 1px solid transparent;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Noto Sans Thai', sans-serif;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    flex-shrink: 0;
}

.category-chip:hover {
    background-color: #e8eaed;
}

.category-chip.active {
    background-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(66, 133, 244, 0.3);
}

.promo-banner {
    background-color: #ffffff;
    border: 1px solid #f1f3f4;
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.promo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e8f0fe;
    color: var(--primary-color);
    padding: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.promo-icon svg {
    width: 18px;
    height: 18px;
}

.promo-content {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    color: var(--text-color);
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.promo-content>div {
    white-space: nowrap;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.promo-title {
    font-weight: 700;
    color: var(--primary-color);
    margin-right: 4px;
}

.promo-highlight {
    font-weight: 700;
    color: #d93025;
    padding: 0 2px;
}

#product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    align-content: flex-start;
    justify-content: center;
    padding: 0 10px;
}

/* Remove load more styles */
.load-more-container {
    display: none;
}

.load-more-btn {
    display: none;
}

.product-card {
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    border: 1px solid #eeeeee;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.product-card.out-of-stock .product-image {
    filter: grayscale(100%);
    opacity: 0.6;
}

.quantity-k {
    display: none;
}

.quantity-full {
    display: inline;
}

.product-tags-container {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1px;
    margin: 0;
}

.product-tag,
.more-tags-btn,
.more-notes-btn {
    font-size: 0.8rem;
    padding: 1px 6px;
    border-radius: 16px;
    background-color: #e8eaed;
    color: #3c4043;
    font-weight: 500;
    border: none;
    cursor: default;
}

.more-tags-btn {
    cursor: pointer;
    background-color: #d2e3fc;
    color: #1967d2;
    transition: background-color 0.2s;
}

.more-tags-btn:hover {
    background-color: #aecbfa;
}

.more-notes-btn {
    cursor: pointer;
    background-color: #d2e3fc;
    color: #1967d2;
    transition: background-color 0.2s;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 1px 3px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
}

.more-notes-btn:hover {
    background-color: #aecbfa;
}

.free-badge {
    background: #ef4444;
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 8px;
    margin-right: 6px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

/* -----------------------------------------
   SKELETON LOADING
   ----------------------------------------- */

/* @keyframes shimmer merged into skeleton-loading */


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

.spinner-icon {
    animation: spin 1s linear infinite;
}

/* .skeleton-shimmer duplicate removed - using base definition at line 80 */


/* New: Light shimmer for dark/colored backgrounds (Stats Card) */
.skeleton-shimmer-light {
    background: var(--skeleton-light-base);
    background: linear-gradient(90deg,
            var(--skeleton-light-base) 25%,
            var(--skeleton-light-highlight) 37%,
            var(--skeleton-light-base) 63%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite linear;
}

/* Overrides for skeleton elements */
input.skeleton-shimmer {
    border: none !important;
    background-color: var(--skeleton-base) !important;
    color: transparent;
}

.checkbox-label.skeleton-shimmer {
    background-color: var(--skeleton-base);
    color: transparent;
    pointer-events: none;
    width: 120px;
}

.checkbox-label.skeleton-shimmer input {
    opacity: 0;
}

.checkbox-label.skeleton-shimmer span {
    visibility: hidden;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    background-color: var(--skeleton-base);
}

.skeleton-title {
    width: 80%;
    height: 1.2rem;
    margin-bottom: 8px;
}

.skeleton-price {
    width: 40%;
}

.skeleton-tag {
    width: 30%;
    height: 0.8rem;
    margin-left: auto;
}

.skeleton-footer {
    width: 100%;
    height: 0.8rem;
    margin-top: auto;
}

/* SKELETON: Order Card Specific */
.skeleton-order-card {
    background-color: white;
    /* พื้นหลังขาวเหมือนการ์ดปกติ */
    pointer-events: none;
    user-select: none;
}

/* SKELETON: Stats Grid Specific */
.skeleton-stat-val-box {
    width: 60px;
    height: 25px;
    /* Base for Mobile (Matches 25px font) */
    border-radius: 8px;
    margin-top: 0;
}

.skeleton-date {
    width: 50%;
    height: 12px;
    margin-bottom: 6px;
}

.skeleton-order-id {
    width: 60%;
    height: 20px;
    margin-bottom: 0;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Ensure review-thumb skeletons animate properly and don't get overridden by .review-thumb background */
.review-thumb.skeleton-shimmer {
    background-color: var(--skeleton-base) !important;
    background-image: linear-gradient(90deg,
            var(--skeleton-base) 0%,
            var(--skeleton-highlight) 50%,
            var(--skeleton-base) 100%) !important;
    animation: skeleton-loading var(--skeleton-duration) infinite linear !important;
}

/* Avatar shapes */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 5px;
}

.skeleton-game-logo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 8px;
}

.skeleton-game-name {
    width: 40%;
    height: 16px;
    margin: 0;
}

.skeleton-item-count {
    width: 30%;
    height: 16px;
    margin-bottom: 0;
}

.skeleton-price-text {
    width: 25%;
    height: 16px;
    margin-bottom: 0;
}

/* -----------------------------------------
   END SKELETON LOADING
   ----------------------------------------- */


/* Overlays */
.out-of-stock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    pointer-events: none;
}

.out-of-stock-text {
    background-color: #d93025;
    color: white;
    padding: 6px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.popup-overlay,
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* --- OPTIMIZED TRANSITION (Safari-safe) --- */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.popup-overlay.show,
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.popup-content {
    background-color: #fff;
    padding: 25px 30px;
    border-radius: 25px;
    max-width: 450px;
    width: 100%;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    max-height: 80vh;
    overflow-y: auto;
}

.popup-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.2rem;
    color: #202124;
}

#popup-product-name {
    color: var(--primary-color);
}

#tags-popup-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Product Info */
/* [UPDATED] เพิ่ม position relative เพื่อรองรับ Overlays */
.product-image-container {
    margin: 8px;
    width: calc(100% - 16px);
    padding-top: calc(100% - 16px);
    position: relative;
    background-color: #f1f3f4;
    border-radius: 20px;
    overflow: hidden;
}

.product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease-in;
    z-index: 2;
}

.product-image.loaded {
    opacity: 1;
}

.product-info {
    padding: 0px 12px 12px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-price {
    font-size: 1rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: auto 0;
}

.product-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

/* =========================================
   [NEW] REDESIGN: Product Card Overlays
   ========================================= */

/* Price Overlay (Top Right) */
.product-price.overlay-price {
    position: absolute;
    top: auto;
    bottom: 8px;
    right: 8px;
    left: auto;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.95);
    color: #333;
    font-weight: bold;
    font-size: 0.95rem;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    margin: 0;
}

/* Tags Container Overlay (Bottom Right) */
.product-tags-overlay-container {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 5;
    display: flex;
    gap: 5px;
}

/* Tags Button Overlay */
.more-tags-btn.overlay-btn {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    padding: 0;
    line-height: 1;
    transition: background 0.2s;
    margin: 0;
}

.more-tags-btn.overlay-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* =========================================
   END REDESIGN
   ========================================= */


/* Empty State & Message */
#message-container {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    color: #dadce0;
}

.empty-state-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.empty-state-subtitle {
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}

/* Scroll Top */
#scroll-to-top-btn {
    display: none;
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1000;
    border: none;
    outline: none;
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    opacity: 0.9;
    align-items: center;
    justify-content: center;
}

#scroll-to-top-btn:hover {
    background-color: #3367d6;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    opacity: 1;
}

/* =========================================
   4. ORDER PAGE COMPONENTS
   ========================================= */

/* Main Container (Order) */
.main-container {
    width: 100%;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card {
    border-radius: 24px;
    padding: 24px;
    color: white;
    position: relative;
    overflow: hidden;;
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, var(--secondary-gradient-start), var(--secondary-gradient-end));
}

.stat-content {
    position: relative;
    z-index: 10;
}

.stat-title {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 25px;
    font-weight: bold;
    line-height: 1;
    min-height: 25px;
    display: flex;
    align-items: center;
}

.stat-bg-icon {
    position: absolute;
    right: -10px;
    bottom: -10px;
    opacity: 0.2;
    transform: rotate(12deg);
    transition: transform 0.3s;
}

.stat-card:hover .stat-bg-icon {
    transform: rotate(12deg) scale(1.1);
}

/* Content Columns */
.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.column-card {
    background: var(--card-background);
    border-radius: 24px;
    padding: 8px 25px 25px 25px;
    border: 1px solid var(--border-color);
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: none;
    margin-bottom: 10px;
}

.column-title {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.text-pending {
    color: var(--status-pending-text);
}

.text-success {
    color: var(--success-color);
}

.badge-count {
    background-color: var(--status-pending-bg);
    color: var(--status-pending-text);
    font-size: 12px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 9999px;
}

.order-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Order Card List Item */
.order-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.order-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.order-date {
    font-size: 12px;
    color: #9ca3af;
    display: block;
    margin-bottom: 2px;
}

.order-id {
    font-size: 18px;
    font-weight: bold;
    color: #1f2937;
    transition: color 0.2s;
}

.order-card:hover .order-id {
    color: var(--primary-color);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
}

.bg-pending {
    background-color: var(--warning-color);
}

.bg-success {
    background-color: var(--success-color);
}

.game-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
    margin-top: 8px;
}

.game-logo-small {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}

.card-footer {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.item-count {
    background: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
}

.price-text {
    font-weight: 600;
    color: #374151;
}

/* Pagination */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding-top: 25px;
    flex: none;
}

.page-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--border-color);
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
    background: #f9fafb;
    color: var(--primary-color);
    border-color: var(--primary-light);
}

.page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.page-info {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
}

/* Modal (Unified) */
.modal-overlay,
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    /* --- OPTIMIZED TRANSITION (Safari-safe) --- */
    transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
    /* Smooth Close */
}

.modal-overlay.active,
.modal-overlay.show,
.popup-overlay.active,
.popup-overlay.show {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.modal-content {
    background: white;
    width: 100%;
    max-width: 672px;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow-y: auto;
}

.modal-overlay.active .modal-content,
.modal-overlay.show .modal-content,
.popup-overlay.active .modal-content,
.popup-overlay.show .modal-content {
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* No Animation Utility */
.modal-overlay.no-anim,
.modal-overlay.no-anim .modal-content {
    transition: none !important;
    transform: none !important;
    /* Optional: Reset scale if needed, but none is clearer */
}

/* Specific overrides for small modals */
.modal-content.small-modal {
    max-width: 450px;
    padding: 24px;
    text-align: left;
}

.modal-header {
    padding: 16px 24px;
    background: #fafafa;
    border-bottom: 1px solid var(--border-color);
    border-radius: 24px 24px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title h3 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    color: #1f2937;
}

.modal-title p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.modal-actions {
    display: flex;
    gap: 8px;
}

.modal-footer-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

.action-btn {
    background: #f3f4f6;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

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

.close-btn:hover {
    color: #4b5563;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.modal-body::-webkit-scrollbar {
    display: none;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.info-box {
    background: #f9fafb;
    padding: 12px;
    border-radius: 12px;
}

.info-label {
    font-size: 12px;
    color: #9ca3af;
    text-transform: uppercase;
    display: block;
}

.info-val {
    font-weight: 600;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.item-row {
    display: flex;
    gap: 16px;
    padding: 12px;
    background: white;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    align-items: center;
}

.item-img-box {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    position: relative;
}

.item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.status-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-weight: 500;
}

.badge-received {
    background: #f3f4f6;
    color: #4b5563;
    border-color: #e5e7eb;
}

.badge-queue {
    background: #ffedd5;
    color: #c2410c;
    border-color: #fed7aa;
}

.badge-working {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.badge-waiting {
    background: #f3e8ff;
    color: #7e22ce;
    border-color: #e9d5ff;
}

.badge-done {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

.text-payment-pending {
    color: var(--warning-color);
}

.text-payment-success {
    color: var(--success-color);
}

.text-primary {
    color: var(--primary-color);
}

/* Product Tag in Modal */
.product-tag {
    display: inline-block;
    padding: 2px 12px;
    background-color: #f1f5f9;
    color: #334155;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

/* --- Toast (Redesigned: Pastel & Floating) --- */
.toast {
    /* Removed fixed positioning as it lives inside a container now */
    position: relative;
    background: white;
    padding: 12px 24px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    /* Softer shadow */
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy enter */
    font-weight: 500;
    pointer-events: auto;
    /* Allow clicking if needed, though container is none */
    border: none;
    min-width: 280px;
    max-width: 350px;
}

.toast.active {
    transform: translateX(0);
}

/* Pastel Success */
.toast.success {
    background-color: #dcfce7;
    /* Mint */
    color: #14532d;
    /* Dark Green */
}

.toast.success svg {
    color: #16a34a;
}

/* Icon color */

/* Pastel Error/Warning */
.toast.error {
    background-color: #fee2e2;
    /* Soft Red */
    color: #7f1d1d;
    /* Dark Red */
}

.toast.error svg {
    color: #dc2626;
}

/* Icon color */


/* Empty States */
.empty-state {
    padding: 40px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.empty-icon {
    width: 80px;
    height: 80px;
    background: #f9fafb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 32px;
}

.empty-text {
    color: #6b7280;
    font-weight: 500;
}

.empty-sub {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 4px;
}

/* --- Like Button Styles --- */
.btn-like {
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
    z-index: 5;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, background-color 0.2s;
    padding: 0;
}

.btn-like:hover {
    background-color: #ffffff;
    transform: scale(1.1);
}

.btn-like svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #94a3b8;
    /* สีเทาตอนยังไม่กด */
    stroke-width: 2;
    transition: all 0.2s;
}

.btn-like.active svg {
    fill: #ef4444;
    /* สีแดงตอนกดแล้ว */
    stroke: #ef4444;
}

/* เพิ่ม icon หัวใจเล็กๆ ใน Dropdown หน้าตะกร้า */
.liked-icon-sm {
    color: #ef4444;
    margin-right: 4px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
}

/* =========================================
   5. SERVICE PAGE STYLES
   ========================================= */

.service-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    align-content: flex-start;
    justify-content: center;
    padding: 0 10px;
    padding-bottom: 40px;
}

.service-card {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 25px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.service-img-wrapper {
    margin: 8px;
    width: calc(100% - 16px);
    padding-top: calc(100% - 16px);
    position: relative;
    background-color: #f1f3f4;
    border-radius: 20px;
    overflow: hidden;
}

.service-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s;
}

.service-img.loaded {
    opacity: 1;
}

/* ราคาบริการ (ขวาล่าง) */
.service-price-overlay {
    position: absolute;
    bottom: 8px;
    /* ชิดล่าง */
    right: 8px;
    /* ชิดขวา */
    top: auto;
    left: auto;

    background-color: rgba(255, 255, 255, 0.95);
    color: #333;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.service-content {
    padding: 0 12px 7px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* =========================================
   6. CART & FORM COMPONENTS
   ========================================= */

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

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

.form-label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: #334155;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 25px;
    font-size: 0.95rem;
    transition: all 0.2s;
    box-sizing: border-box;
    outline: none;
    background: #fff;
    color: #333;
    font-family: inherit;
}

.form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-control:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

/* Custom Select */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

.custom-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 400;
    color: #333;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s;
}

.custom-select-wrapper.open .custom-select-trigger {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.custom-select-options {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #fff;
    z-index: 2200;
    margin-top: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
    max-height: 250px;
    overflow-y: auto;
    pointer-events: none;
}

.custom-select-wrapper.open .custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* [UPDATED] Option styling for horizontal layout */
.custom-option {
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid #f8fafc;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    flex-direction: row;
}

.custom-option:hover,
.custom-option.selected {
    background-color: #eff6ff;
    color: #2563eb;
}

/* [NEW] Flex container for single-line info (Name Price Status) */
.opt-inline-row {
    display: flex;
    align-items: center;
    width: 100%;
    flex: 1;
    min-width: 0;
    /* min-width:0 for truncation */
}

.opt-name {
    font-weight: bold;
    color: #334155;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 8px;
}

.opt-price {
    font-size: 0.85rem;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

.opt-status {
    font-weight: 700;
    font-size: 0.8rem;
    margin-left: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.opt-status.service {
    color: #2563eb;
}

.opt-status.in-stock {
    color: #15803d;
}

.opt-status.out-stock {
    color: #ef4444;
}


.custom-select-search-box {
    padding: 8px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
}

.custom-select-search {
    width: 100%;
    padding: 8px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 25px;
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.option-img-sm {
    width: 25px;
    height: 25px;
    border-radius: 6px;
    object-fit: cover;
    background: transparent;
}

/* Ensure trigger displays content same as options */
.custom-select-trigger .custom-select-content {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    gap: 5px;
}

.custom-select-trigger .custom-select-content .custom-option {
    padding: 0;
    border: none;
    width: 100%;
}

.custom-select-trigger .custom-select-content .opt-inline-row {
    width: 100%;
}


/* Cart Card & Layout */
.cart-card {
    background: #fff;
    border-radius: 25px;
    padding: 25px;
    max-width: 600px;
    margin: 20px auto;
    border: 1px solid #e2e8f0;
}

.cart-header {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
}

.cart-summary-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 25px;
    padding: 15px;
    margin-top: 20px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #475569;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #cbd5e1;
    font-weight: 700;
    font-size: 1.1rem;
    color: #0f172a;
}

.item-summary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: #fff;
    border-radius: 25px;
    margin-bottom: 10px;
}

.item-summary-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
}

.item-summary-info {
    flex: 1;
}

.btn-icon-edit,
.btn-icon-delete {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    cursor: pointer;
    font-size: 1.1rem;
    border: none;
}

.btn-icon-edit {
    background: rgb(240, 240, 240);
    color: #616161;
}

.btn-icon-edit:hover {
    background: #f1f5f9;
}

.btn-icon-delete {
    background-color: #fee2e2;
    color: #ef4444;
}

.btn-icon-delete:hover {
    background-color: #fecaca;
}

/* [NEW] Desktop Default Styles for Cart Actions */
.item-summary-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.qty-status-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 60px;
}

.actions-divider {
    width: 1px;
    height: 36px;
    background: #e2e8f0;
    margin: 0 2px;
}

.action-buttons-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Cart Buttons (Unified) */
.actions-footer {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.btn-submit-cart,
.btn-cancel-cart {
    padding: 10px 24px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    width: auto;
    font-weight: 500;
    font-family: inherit;
}

.btn-submit-cart {
    background: #2563eb;
    color: white;
}

.btn-submit-cart:hover {
    background: #1d4ed8;
}

.btn-cancel-cart {
    background: #fff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.btn-cancel-cart:hover {
    background: #f1f5f9;
    color: #334155;
}

/* [UPDATED] New Button Styles: Solid Pill Shape, Bounce Effect */
.btn-add-char,
.btn-add-cart {
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s;
}

.btn-add-char {
    background: #dcfce7;
    /* Pastel Green */
    color: #15803d;
}

.btn-add-char:hover {
    box-shadow: 0 4px 8px rgba(22, 163, 74, 0.2);
}

.btn-add-cart {
    background: #dbeafe;
    /* Pastel Blue */
    color: #1e40af;
}

.btn-add-cart:hover {
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
}

/* [NEW] Delete Char Button Style (Small trash in dropdown) */
.btn-delete-char {
    background: none;
    border: none;
    cursor: pointer;
    color: #ef4444;
    opacity: 0.6;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-delete-char:hover {
    background: #fee2e2;
    opacity: 1;
}

/* [NEW] Select Arrow Alignment */
.select-arrow {
    display: flex;
    align-items: center;
    /* จัดให้อยู่ตรงกลางแนวตั้ง */
    justify-content: center;
    margin-left: 15px;
    /* เว้นระยะห่างจากข้อความ */
    color: #94a3b8;
    /* สีของลูกศร */
    height: 100%;
    flex-shrink: 0;
    /* ป้องกันลูกศรบีบตัว */
}


/* Game & Extra UI */
.game-display-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f1f5f9;
    padding: 10px 12px;
    border-radius: 25px;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.game-icon-sm {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 50%;
}

.cart-items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cart-items-buttons {
    display: flex;
    gap: 8px;
}

.payment-qr-grid {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.payment-qr-item {
    flex: 1;
    min-width: 130px;
    max-width: 200px;
}

/* =========================================
   7. RESPONSIVE QUERIES (Moved to Bottom)
   ========================================= */

/* -----------------------------------------
   6. RESPONSIVE FOR CART & MENU
   ----------------------------------------- */
@media (max-width: 600px) {
    /* ... existing search container styles ... */

    /* [NEW] Cart Responsive Header */
    .cart-items-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cart-items-buttons {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    /* Make buttons full width on very small screens or just flex grow */
    .btn-add-char,
    .btn-add-cart {
        flex: 1;
        justify-content: center;
    }

    /* [NEW] Cart Item Card Responsive */
    .item-summary-card {
        flex-wrap: wrap;
        position: relative;
        padding-bottom: 12px;
    }

    .item-summary-info {
        min-width: 0;
        width: 100%;
        margin-bottom: 8px;
        /* Space between info and actions */
    }

    /* Mobile: Actions Row Horizontal */
    .item-summary-actions {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: flex-end;
        border-top: 1px dashed #f1f5f9;
        padding-top: 8px;
        padding-left: 10px;
    }

    /* Mobile: Qty & Status in Row */
    .qty-status-group {
        display: flex;
        flex-direction: row;
        /* Override Desktop Column */
        align-items: center;
        gap: 6px;
    }

    /* Mobile: Hide Divider */
    .actions-divider {
        display: none;
    }

    /* Mobile: Buttons in Row */
    .action-buttons-group {
        display: flex;
        flex-direction: row;
        /* Override Desktop Column */
        gap: 8px;
        margin-left: auto;
    }

    .search-container {
        flex-direction: column;
        border: none;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .form-row-force-2col {
        grid-template-columns: 1fr 1fr !important;
    }

    .search-container.skeleton-shimmer {
        background: transparent !important;
        animation: none;
        border: none;
        overflow: visible;
        box-shadow: none;
    }

    .search-container.skeleton-shimmer>* {
        opacity: 1;
        visibility: visible;
    }

    .search-container.skeleton-shimmer .search-input-wrapper {
        background: var(--skeleton-base);
        background: linear-gradient(90deg,
                var(--skeleton-base) 25%,
                var(--skeleton-highlight) 37%,
                var(--skeleton-base) 63%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite linear;
        border: none;
        pointer-events: none;
        min-height: 46px;
    }

    .search-container.skeleton-shimmer .search-input-wrapper>* {
        opacity: 0;
    }

    .search-container.skeleton-shimmer .checkbox-label {
        background: var(--skeleton-base);
        background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 37%, var(--skeleton-base) 63%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite linear;
        color: transparent;
        pointer-events: none;

        width: 140px;
        height: 20px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 16px;
    }

    .search-container.skeleton-shimmer .checkbox-label>* {
        opacity: 0;
    }

    .search-container.skeleton-shimmer .search-separator {
        display: none;
    }

    .search-container:hover,
    .search-container:focus-within {
        box-shadow: none;
        border-color: none;
    }

    .search-input-wrapper {
        border: 1px solid #dfe1e5;
        border-radius: 50px;
        background: #fff;
        padding: 4px;
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
    }

    .search-separator {
        display: none;
    }

    #stock-checkbox-label {
        width: 100%;
        margin-top: 15px;
        margin-bottom: 5px;
        margin-right: 0;
        justify-content: center;
        border: none;
        padding: 0;
    }

    body {
        padding: 0 12px;
    }

    .promo-banner {
        padding: 10px 16px;
        gap: 10px;
        font-size: 0.85rem;
        width: 100%;
        justify-content: flex-start;
    }

    .promo-content {
        display: block;
    }

    .promo-title {
        display: inline-block;
    }

    #product-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .popup-content {
        max-width: 100%;
        padding: 20px 20px;
    }

    #message-container {
        font-size: 0.9rem;
    }

    /* Search Bar Mobile */
    .search-icon {
        left: 15px;
    }

    .search-container input[type="text"] {
        font-size: 16px;
    }

    /* Product Card Mobile */
    .product-image-container {
        margin: 8px;
        width: calc(100% - 15px);
        padding-top: calc(100% - 14px);
    }

    .product-info {
        padding: 0px 12px 7px;
    }

    .product-details {
        font-size: 0.9rem;
    }

    .product-name {
        font-size: 1.1rem;
        margin-bottom: 1px;
    }

    .product-price {
        font-size: 1rem;
        margin: 0;
    }

    .quantity-full {
        display: none;
    }

    .quantity-k {
        display: inline;
    }

    #scroll-to-top-btn {
        width: 44px;
        height: 44px;
        font-size: 20px;
        bottom: 25px;
        right: 20px;
    }

    .stat-bg-icon i {
        font-size: 3em;
    }

    /* Cart Specific Mobile */
    .form-grid-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .form-grid-row.mobile-row {
        grid-template-columns: 1fr 1fr;
    }

    .cart-card {
        margin: 10px;
    }

    .actions-footer {
        gap: 10px;
    }

    .cart-items-header {
        gap: 10px;
    }

    .btn-add-char,
    .btn-add-cart {
        white-space: nowrap;
    }

    .payment-qr-grid {
        gap: 10px;
    }

    .payment-qr-item {
        min-width: 120px;
    }

    /* Service Mobile */
    .service-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .service-img-wrapper {
        margin: 6px;
        width: calc(100% - 12px);
        padding-top: calc(100% - 12px);
    }

    .service-title {
        font-size: 0.95rem;
        margin-bottom: 1px;
    }

    /* Modal Mobile */
    .modal-content {
        padding: 15px;
        max-height: 85vh;
        overflow-y: auto;
    }

    /* --- FIX: Prevent Auto-Zoom on iOS --- */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
    }

    /* [NEW] Adjust button font size for mobile */
    .btn-submit-cart,
    .btn-cancel-cart {
        font-size: 0.9rem;
        padding: 10px 20px;
    }
}

@media (max-width: 992px) and (min-width: 601px) {
    #product-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }

    #message-container {
        font-size: 1rem;
    }

    body {
        padding: 0 12px;
    }

    .product-info {
        padding: 0 12px 12px;
    }

    .product-name {
        font-size: 1.2rem;
    }

    .product-price {
        font-size: 1rem;
    }

    .quantity-full {
        display: none;
    }

    .quantity-k {
        display: inline;
    }

    .controls-wrapper-order {
        margin: 10px 20px 16px 20px;
    }

    .service-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }

    /* [NEW] Adjust button font size for mobile */
    .btn-submit-cart,
    .btn-cancel-cart {
        font-size: 0.85rem;
        padding: 10px 20px;
    }
}

@media (min-width: 768px) {

    /* Order Page Desktop */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    /* FIXED: Skeleton height matching desktop font size to prevent layout shift */
    .skeleton-stat-val-box {
        height: 35px;
        width: 100px;
    }

    .content-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- MOBILE BOTTOM SHEET MODAL --- */
@media (max-width: 768px) {

    .popup-overlay,
    .modal-overlay {
        align-items: flex-end;
        /* Align to bottom */
        padding: 0;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        /* Smooth Fade on Mobile */
    }

    .popup-content,
    .modal-content {
        max-width: 100% !important;
        /* Force full width overriding inline styles */
        width: 100% !important;
        margin: 0;
        border-radius: 25px 25px 0 0 !important;
        /* Only top corners rounded */
        border-bottom: none;
        max-height: 85vh;
        /* Allow tall content but show some backdrop */
        overflow-y: auto;
        padding-bottom: calc(25px + env(safe-area-inset-bottom));
        /* iOS Safe Area */

        /* Animation Logic: Hidden State (Slide Down Close) */
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* Animation Logic: Active State (Smooth Open) */
    .modal-overlay.active .modal-content,
    .modal-overlay.show .modal-content,
    .popup-overlay.active .modal-content,
    .popup-overlay.show .modal-content {
        transform: translateY(0);
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* --- Custom Alert Specific (Mobile Toast) --- */
    #custom-alert-overlay {
        align-items: flex-end !important;
    }

    #custom-alert-overlay .modal-content {
        width: 90% !important;
        max-width: 400px !important;
        border-radius: 20px !important;
        margin: 0 auto 30px auto !important;
        padding-bottom: 0 !important;
        /* Reset safe-area from generic modal-content */
        /* Animation on mobile will use JS scale(1) inline style, overriding translateY */
    }

}

/* =========================================
   PAGE TRANSITION ANIMATION
   ========================================= */
@keyframes viewFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

.view-fade-in {
    animation: viewFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Mobile Promo Banner --- */
@media (max-width: 480px) {
    .promo-banner {
        width: 100%;
        border-radius: 20px;
        padding: 10px 15px;
    }

    .promo-content>div {
        white-space: normal;
        /* Allow text to wrap */
        line-height: 1.4;
    }
}

/* =========================================
   8. PUBLIC ORDERS PAGE
   ========================================= */

.po-summary-card {
    background: linear-gradient(135deg, #1e40af, #2563eb);
    color: white;
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
}

.po-summary-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
}

.po-summary-label {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 4px;
}

.po-summary-val {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* Layout */
.po-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    min-height: 500px;
}

.po-column {
    background: transparent;
}

.po-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.po-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Card */
.public-order-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.public-order-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.po-left {
    display: flex;
    flex-direction: column;
    min-width: 60px;
    text-align: center;
    padding-right: 12px;
    border-right: 1px solid #f1f5f9;
}

.po-date {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 500;
}

.po-id {
    font-size: 0.9rem;
    font-weight: 700;
    color: #4b5563;
}

.po-mid {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.po-game {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.po-game-icon {
    width: 36px;
    height: 36px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #64748b;
    flex-shrink: 0;
}

.po-game-name {
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
}

.po-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 80px;
    margin-right: 12px;
}

.po-items-count {
    font-size: 0.75rem;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
    color: #64748b;
    margin-bottom: 2px;
}

.po-price {
    font-weight: 700;
    color: #2563eb;
    font-size: 0.95rem;
}

.status-badge-public {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-badge-public.orange {
    background: #ffedd5;
    color: #c2410c;
}

.status-badge-public.blue {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge-public.purple {
    background: #f3e8ff;
    color: #7e22ce;
}

.status-badge-public.green {
    background: #dcfce7;
    color: #15803d;
}

.status-badge-public.red {
    background: #fee2e2;
    color: #991b1b;
}

/* Modal Items */
.pm-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.public-modal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
}

.pm-item-img {
    width: 48px;
    height: 48px;
    background: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-item-info {
    flex: 1;
    min-width: 0;
}

.pm-item-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-item-price {
    font-size: 0.85rem;
    color: #64748b;
}

.pm-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.pm-qty {
    font-weight: 700;
    color: #0f172a;
}

.pm-status {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 500;
}

.summary-box {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.1rem;
}

@media (max-width: 900px) {

    /* Mobile Stack */
    .po-layout {
        grid-template-columns: 1fr;
    }

    .public-order-card {
        flex-wrap: wrap;
    }

    .po-left,
    .po-mid,
    .po-right {
        flex: 1;
    }

    .po-right {
        align-items: flex-start;
        margin-right: 0;
        padding-left: 12px;
        border-left: 1px solid #f1f5f9;
        min-width: auto;
    }

    .po-status {
        width: 100%;
        margin-top: 8px;
        /* Force status to new line or just flex end? */
        margin-left: 0 !important;
        justify-content: flex-end;
        display: flex;
    }
}

@media (max-width: 600px) {
    .po-layout {
        display: flex;
        flex-direction: column;
    }

    /* Order: Active Top, History Bottom (Default Flex Column does this) */

    /* Optimize Card for Mobile */
    .public-order-card {
        padding: 12px;
        gap: 8px;
        flex-wrap: nowrap;
        /* Keep horizontal scroll? No, user wants horizontal long card */
        /* Let's try to keep it 1 line if possible, or 2 lines compact */
    }

    .po-left {
        min-width: 50px;
        padding-right: 8px;
    }

    .po-game-name {
        max-width: 100px;
    }

    .status-badge-public span {
        display: none;
        /* Maybe hide label on super small? No, need status */
    }

    .po-right {
        display: none;
        /* Hide Quantity/Price on main view to save space? Or keep compact */
        /* Requirement says: Show ID, Logo, Name, Qty, Price. */
        /* Let's try to fit. */
        display: flex;
        border: none;
        padding: 0;
    }
}


/* [NEW] Input Clear Button Styles */
.input-wrapper-relative {
    position: relative;
    width: 100%;
}

.btn-input-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    border: none;
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    z-index: 5;
    transition: all 0.2s;
}

.btn-input-clear:hover {
    background: #cbd5e1;
    color: #ef4444;
}

.btn-input-clear.show {
    display: flex;
}

.custom-select-trigger .btn-select-clear {
    position: absolute;
    right: 32px;
    /* Left of the arrow */
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    background: transparent;
    border: none;
    z-index: 5;
}

.custom-select-trigger .btn-select-clear:hover {
    color: #ef4444;
}

/* [NEW] Adjust Search Box Clear Button Position */
.custom-select-search-box .btn-input-clear {
    right: 15px !important;
}

/* =========================================
   [NEW] Order Page Styles (Moved from JS)
   ========================================= */

/* Stats Grid */
.frontend-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
    padding: 0 8px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.frontend-stat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    overflow: hidden;
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); */
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100px;
}

.frontend-stat-info {
    z-index: 2;
    position: relative;
}

.frontend-stat-label {
    font-size: 1.1rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Increased from 0.95rem */
.frontend-stat-val {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

/* Decreased from 2.5rem */
.frontend-stat-unit {
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
    margin-left: 4px;
}

.frontend-stat-watermark {
    position: absolute;
    right: -10px;
    bottom: -15px;
    font-size: 5.5rem;
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
    transform: rotate(-10deg);
}

/* Colors */
.stat-blue .frontend-stat-val,
.stat-blue .frontend-stat-watermark {
    color: #3b82f6;
}

.stat-green .frontend-stat-val,
.stat-green .frontend-stat-watermark {
    color: #15803d;
}

.stat-orange .frontend-stat-val,
.stat-orange .frontend-stat-watermark {
    color: #f59e0b;
}

/* Order Sections */
.order-sections-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 8px;
    max-width: 1200px;
    margin: 0 auto 60px auto;
    align-items: stretch;
    /* [FIX] Stretch to match heights */
}

@media (max-width: 900px) {
    .order-sections-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Column Box */
.order-column-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 24px;
    padding: 24px;
    /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03); */
    height: auto;
    /* Allow auto height */
    display: flex;
    flex-direction: column;
    /* Ensure content flows */
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #334155;
}

/* Section Colors */
.section-orange .section-title {
    color: #d97706;
}

.section-green .section-title {
    color: #15803d;
}

.count-badge {
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    min-width: 32px;
    text-align: center;
}

.section-orange .count-badge {
    background: #fff7ed;
    color: #d97706;
}

.section-green .count-badge {
    background: #f0fdf4;
    color: #15803d;
}

/* Order Card - Refined (Compact) */
.fo-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    /* Matched radius */
    padding: 12px 12px 5px 12px;
    margin-bottom: 10px;
    /* Reduced from 16px */
    position: relative;
    /* transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; */
}

.fo-card:last-child {
    margin-bottom: 0;
}

/* Layout Rows (Compact) */
.fo-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

/* Reduced */
.fo-date {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}

/* Slightly smaller */
.fo-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
}

.fo-id {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.5px;
}

.fo-row-game {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f8fafc;
}

/* Reduced margins */
.fo-game-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f8fafc;
    object-fit: cover;
    border: 1px solid #f1f5f9;
}

/* Reduced size, Circle */
.fo-game-name {
    font-weight: 600;
    color: #475569;
    font-size: 0.9rem;
}

.fo-row-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fo-items-badge {
    background: #f8fafc;
    color: #64748b;
    /* border removed */
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

/* [NEW] Review Gallery Button — matches fo-items-badge style */
.fo-review-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.85rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.fo-review-btn:hover {
    background: #e2e8f0;
    color: #475569;
}

.fo-price {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
}

/* Scrollable Area */
.card-list-scroll {
    padding-right: 4px;
    /* Space for scrollbar */
    overflow-y: auto;
}

.card-list-scroll::-webkit-scrollbar {
    width: 5px;
}

.card-list-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.card-list-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.card-list-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.scroll-h-5 {
    max-height: 850px;
}

/* Updated for Compact Cards */

@media (min-width: 900px) {

    /* Fixed height for desktop "In Progress" to show empty space for 5 cards */
    .card-list-scroll.scroll-h-5 {
        min-height: 850px;
    }
}

/* Pagination */
.fo-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    padding-bottom: 10px;
}

.fo-page-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: 0.2s;
}

.fo-page-btn:hover {
    background: #f8fafc;
    color: #334155;
    border-color: #cbd5e1;
}

.fo-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.fo-page-info {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
}

/* =========================================
   [NEW] Menu & Navbar Styles (Moved from JS)
   ========================================= */
/* 1. Navbar Wrapper (กล่องใสครอบทั้งหมด) */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1000;

    /* จัดกึ่งกลางเพื่อให้ตรงกับ app-container */
    display: flex;
    justify-content: center;

    /* ระยะห่างจากขอบบน (รองรับ iOS Safe Area) */
    padding-top: calc(20px + env(safe-area-inset-top));

    /* คลิกทะลุพื้นที่ว่าง */
    pointer-events: none;
    transition: transform 0.3s ease;
}

/* [FIX] ตัวบล็อกเนื้อหาไม่ให้ทะลุขึ้นไปบน Status Bar ของ iOS Safari */
.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(20px + env(safe-area-inset-top));
    background-color: var(--background-color);
    z-index: -1;
    pointer-events: none;
}

/* 2. ตัวเมนูจริง (The Bar) */
.navbar-inner {
    /* --- จุดสำคัญ: ปรับกว้างเท่า app-container --- */
    width: 100%;
    max-width: 1400px;
    /* ค่าเดียวกับ max-width ใน style.css */

    /* เว้นระยะขอบซ้ายขวานิดหน่อยให้ดูเป็น Floating */
    margin: 0 16px;

    /* ทำให้คลิกได้ */
    pointer-events: auto;

    /* จัดวาง: Logo ชิดซ้าย, Menu ชิดขวา */
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 8px 12px;
    /* เพิ่มพื้นที่ภายใน */

    /* ดีไซน์กระจกฝ้า (Glassmorphism) */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 24px rgba(0, 0, 0, 0.06);
    border-radius: 50px;
}

/* โลโก้ */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    text-decoration: none;
    cursor: pointer;
    padding-left: 8px;
    /* ขยับออกจากขอบซ้ายนิดนึง */
    white-space: nowrap;
}

.navbar-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* กลุ่มปุ่มเมนู */
.navbar-menu {
    display: flex;
    gap: 4px;
    position: relative;
    background: transparent;
    padding: 0;
    border-radius: 50px;
}

/* แถบสีวิ่งๆ (Indicator) */
.nav-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--primary-color, #4285F4);
    border-radius: 50px;
    z-index: 1;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0;
}

.nav-indicator.visible {
    opacity: 1;
}

/* ปุ่มเมนู */
.menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: #64748b;
    font-weight: 500;
    padding: 10px 20px;
    /* เพิ่มพื้นที่คลิก */
    border-radius: 50px;
    font-size: 0.95rem;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 0.2s;
    background: transparent !important;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

/* [NEW] Member Button Specific Style (Smaller) */
#nav-btn-guest,
#nav-btn-admin {
    padding: 10px 12px;
    /* Desktop: Reduced side padding */
    min-width: 0;
}

.menu-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.menu-item.active {
    color: #ffffff;
}

/* ดันเนื้อหาเว็บลงมาเพิ่มเพราะเมนูใหญ่ขึ้น */
#app-container {
    padding-top: 100px;
}

/* [NEW] Expanded Breakpoint for "Smaller than PC" */
@media (max-width: 1024px) {

    /* บนมือถือ/Tablet ขยับขึ้นไปนิดหน่อย พร้อมรองรับ iOS Safe Area */
    .navbar {
        padding-top: calc(12px + env(safe-area-inset-top));
    }

    .navbar::before {
        height: calc(12px + env(safe-area-inset-top));
    }

    .navbar-inner {
        /* Logo หาย ให้จัดกึ่งกลาง */
        justify-content: center;
        padding: 6px;
    }

    .navbar-brand {
        display: none;
    }

    .navbar-menu {
        width: 100%;
        display: grid;
        /* [FIX] 4 Menu Items + 1 Profile */
        grid-template-columns: 1fr 1fr 1fr 1fr 50px;
        gap: 2px;
    }

    .menu-item {
        padding: 10px 0;
        justify-content: center;
        font-size: 0.85rem;
        width: 100%;
    }

    /* ซ่อนข้อความเมนูทั้งหมด (เหลือแต่ไอคอน) */
    .menu-text {
        display: none !important;
    }
}

/* [NEW] Small Screen Fix: Hide ALL text if screen is very narrow */
@media (max-width: 375px) {
    .menu-item.active .menu-text {
        display: none !important;
    }

    .menu-item {
        justify-content: center;
        padding: 10px 0;
    }
}


/* [NEW] Mobile Overlay with Blur - REMOVED (Use Global) */


@keyframes fadeIn {
    from {
        opacity: 0;
        width: 0;
        transform: translateX(-5px);
    }

    to {
        opacity: 1;
        width: auto;
        transform: translateX(0);
    }
}

/* --- Popup Styles (Premium Design) --- */
.profile-popup,
.login-popup {
    position: fixed;
    top: 80px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 20px;
    /* Compact padding */
    width: 300px;
    display: none;
    z-index: 10001;
    /* [FIX] Higher than global overlay (10000) */
    flex-direction: column;
    animation: popupFadeIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 600px) {

    .profile-popup,
    .login-popup {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 28px 28px 0 0;
        padding: 20px;
        /* [FIX] Reduced padding for compactness */
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateY(0);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
    }
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
    }

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

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Header: Centered & Clean */
.popup-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-bottom: 16px;
    /* [FIX] Reduced header padding */
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

.popup-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: #f3f4f6;
    padding: 6px 6px;
}

.popup-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.popup-name {
    font-weight: 700;
    font-size: 1rem;
    color: #1f2937;
    margin-bottom: 2px;
}

.popup-role {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 20px;
}

/* Close Button: Subtle Top-Right */
.popup-close-btn {
    position: absolute;
    top: 20px;
    /* [FIX] Aligned with padding (20px) */
    right: 20px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9ca3af;
    transition: all 0.2s;
    z-index: 20;
    /* [FIX] Increased z-index */
}

.popup-close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #4b5563;
}

/* Button Group (iOS Style) */
.popup-btn-group {
    display: flex;
    flex-direction: column;
    background: #f9fafb;
    border-radius: 12px;
    overflow: hidden;
}

.popup-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 16px;
    /* [FIX] Reduced vertical padding */
    border: none;
    cursor: pointer;
    font-weight: 500;
    width: 100%;
    text-decoration: none;
    font-size: 0.95rem;
    font-family: inherit;
    background: transparent;
    color: #374151;
    transition: background 0.2s;
    text-align: left;
}

.popup-btn:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.popup-btn:hover {
    background: rgba(0, 0, 0, 0.03);
}

.popup-btn:active {
    background: rgba(0, 0, 0, 0.06);
}

.btn-admin {
    color: #2563eb;
}

.btn-logout {
    color: #ef4444;
}

.btn-login {
    background: #111827;
    color: white;
    justify-content: center;
    border-radius: 12px;
    margin-top: 8px;
}

.btn-login:hover {
    background: #374151;
}

.login-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    outline: none;
    transition: border 0.2s;
    background: #f9fafb;
}

.login-input:focus {
    border-color: #111827;
    background: #fff;
}

.login-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    text-align: center;
    margin-bottom: 8px;
}

/* Overlay for clicking outside */
/* Overlay for clicking outside - REMOVED (Use Global .popup-overlay in style.css) */
/* .popup-overlay { ... } */

/* [NEW] Transparent Overlay for Desktop (No Blur) */
.popup-overlay.transparent-desktop {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* [NEW] Page Redirect Loader */
.page-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.page-loader-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: loaderSpin 0.8s linear infinite;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

@keyframes loaderSpin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================
   [NEW] Menu/Navbar Styles (Moved from JS)
   ========================================= */

/* 1. Navbar Wrapper (กล่องใสครอบทั้งหมด) */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1000;

    /* จัดกึ่งกลางเพื่อให้ตรงกับ app-container */
    display: flex;
    justify-content: center;

    /* ระยะห่างจากขอบบน */
    padding-top: 20px;

    /* พื้นทึบไม่ให้เนื้อหาทะลุ */
    background-color: #fff;

    /* คลิกทะลุพื้นที่ว่าง */
    pointer-events: none;
    transition: transform 0.3s ease;
}

/* 2. ตัวเมนูจริง (The Bar) */
.navbar-inner {
    /* --- จุดสำคัญ: ปรับกว้างเท่า app-container --- */
    width: 100%;
    max-width: 1400px;
    /* ค่าเดียวกับ max-width ใน style.css */

    /* เว้นระยะขอบซ้ายขวานิดหน่อยให้ดูเป็น Floating */
    margin: 0 16px;

    /* ทำให้คลิกได้ */
    pointer-events: auto;

    /* จัดวาง: Logo ชิดซ้าย, Menu ชิดขวา */
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 8px 12px;
    min-height: 56px;
    /* เพิ่มพื้นที่ภายใน */

    /* ดีไซน์กระจกฝ้า (Glassmorphism) */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 24px rgba(0, 0, 0, 0.06);
    border-radius: 50px;
}

/* โลโก้ */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    text-decoration: none;
    cursor: pointer;
    padding-left: 8px;
    /* ขยับออกจากขอบซ้ายนิดนึง */
    white-space: nowrap;
}

.navbar-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* กลุ่มปุ่มเมนู */
.navbar-menu {
    display: flex;
    gap: 4px;
    position: relative;
    background: transparent;
    padding: 0;
    border-radius: 50px;
}

/* แถบสีวิ่งๆ (Indicator) */
.nav-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--primary-color, #4285F4);
    border-radius: 50px;
    z-index: 1;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0;
}

.nav-indicator.visible {
    opacity: 1;
}

/* ปุ่มเมนู */
.menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: #64748b;
    font-weight: 500;
    padding: 10px 20px;
    /* เพิ่มพื้นที่คลิก */
    border-radius: 50px;
    font-size: 0.95rem;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 0.2s;
    background: transparent !important;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

/* [NEW] Member Button Specific Style (Smaller) */
#nav-btn-guest,
#nav-btn-admin {
    padding: 10px 12px;
    /* Desktop: Reduced side padding */
    min-width: 0;
}

.menu-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.menu-item.active {
    color: #ffffff;
}

/* ดันเนื้อหาเว็บลงมาเพิ่มเพราะเมนูใหญ่ขึ้น */
#app-container {
    padding-top: 100px;
}

/* [NEW] Expanded Breakpoint for "Smaller than PC" */
@media (max-width: 1024px) {

    /* บนมือถือ/Tablet ขยับขึ้นไปนิดหน่อย */
    .navbar {
        padding-top: 12px;
    }

    .navbar-inner {
        /* Logo หาย ให้จัดกึ่งกลาง */
        justify-content: center;
        padding: 6px;
    }

    .navbar-brand {
        display: none;
    }

    /* Guide page: show brand on mobile */
    body.guide-page .navbar-brand {
        display: flex;
    }

    body.guide-page .navbar-inner {
        justify-content: space-between;
        padding: 6px 12px;
    }

    body.guide-page .navbar-menu {
        width: auto;
        display: flex;
        grid-template-columns: unset;
        gap: 0;
    }

    .navbar-menu {
        width: 100%;
        display: grid;
        /* [FIX] 4 Menu Items + 1 Profile */
        grid-template-columns: 1fr 1fr 1fr 1fr 50px;
        gap: 2px;
    }

    .menu-item {
        padding: 10px 0;
        justify-content: center;
        font-size: 0.85rem;
        width: 100%;
    }

    /* ซ่อนข้อความเมนูทั้งหมด (เหลือแต่ไอคอน) */
    .menu-text {
        display: none !important;
    }
}

/* [NEW] Small Screen Fix: Hide ALL text if screen is very narrow */
@media (max-width: 375px) {
    .menu-item.active .menu-text {
        display: none !important;
    }

    .menu-item {
        justify-content: center;
        padding: 10px 0;
    }
}


/* [NEW] Mobile Overlay with Blur - REMOVED (Use Global) */


@keyframes fadeIn {
    from {
        opacity: 0;
        width: 0;
        transform: translateX(-5px);
    }

    to {
        opacity: 1;
        width: auto;
        transform: translateX(0);
    }
}

/* --- Popup Styles (Premium Design) --- */
.profile-popup,
.login-popup {
    position: fixed;
    top: 80px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 20px;
    /* Compact padding */
    width: 300px;
    display: none;
    z-index: 10001;
    /* [FIX] Higher than global overlay (10000) */
    flex-direction: column;
    animation: popupFadeIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 600px) {

    .profile-popup,
    .login-popup {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 28px 28px 0 0;
        padding: 20px;
        /* [FIX] Reduced padding for compactness */
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateY(0);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
    }
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
    }

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

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Header: Centered & Clean */
.popup-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-bottom: 16px;
    /* [FIX] Reduced header padding */
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

.popup-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: #f3f4f6;
    padding: 6px 6px;
}

.popup-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.popup-name {
    font-weight: 700;
    font-size: 1rem;
    color: #1f2937;
    margin-bottom: 2px;
}

.popup-role {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 20px;
}

/* Close Button: Subtle Top-Right */
.popup-close-btn {
    position: absolute;
    top: 20px;
    /* [FIX] Aligned with padding (20px) */
    right: 20px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9ca3af;
    transition: all 0.2s;
    z-index: 20;
    /* [FIX] Increased z-index */
}

.popup-close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #4b5563;
}

/* Button Group (iOS Style) */
.popup-btn-group {
    display: flex;
    flex-direction: column;
    background: #f9fafb;
    border-radius: 12px;
    overflow: hidden;
}

.popup-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 16px;
    /* [FIX] Reduced vertical padding */
    border: none;
    cursor: pointer;
    font-weight: 500;
    width: 100%;
    text-decoration: none;
    font-size: 0.95rem;
    font-family: inherit;
    background: transparent;
    color: #374151;
    transition: background 0.2s;
    text-align: left;
}

.popup-btn:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.popup-btn:hover {
    background: rgba(0, 0, 0, 0.03);
}

.popup-btn:active {
    background: rgba(0, 0, 0, 0.06);
}

.btn-admin {
    color: #2563eb;
}

.btn-logout {
    color: #ef4444;
}

.btn-login {
    background: #111827;
    color: white;
    justify-content: center;
    border-radius: 12px;
    margin-top: 8px;
}

.btn-login:hover {
    background: #374151;
}

.login-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    outline: none;
    transition: border 0.2s;
    background: #f9fafb;
}

.login-input:focus {
    border-color: #111827;
    background: #fff;
}

.login-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    text-align: center;
    margin-bottom: 8px;
}

/* Overlay for clicking outside */
/* Overlay for clicking outside - REMOVED (Use Global .popup-overlay in style.css) */
/* .popup-overlay { ... } */

/* [NEW] Transparent Overlay for Desktop (No Blur) */
.popup-overlay.transparent-desktop {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* [NEW] Page Redirect Loader */
.page-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.page-loader-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* @keyframes loaderSpin merged into spin */

/* Keep for backward compatibility or replace usage */

/* =========================================
   [NEW] Login Styles (Moved from JS)
   ========================================= */

@keyframes shake {

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

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

/* =========================================
   [NEW] Refactored Styles (Cart, Product, Serve)
   ========================================= */

/* --- cart.js --- */
#popup-toast-container {
    position: fixed;
    top: 100px;
    right: 24px;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast span:first-child {
    display: flex;
    align-items: center;
}

/* Global Confirm Modal Internals */
.global-confirm-modal-content {
    max-width: 360px;
    text-align: center;
    padding: 20px;
}

.popup-icon-wrapper {
    margin-bottom: 20px;
    width: 80px;
    height: 80px;
    background: #fee2e2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 5px auto;
    color: #ef4444;
}

.popup-title-text {
    margin: 0 0 5px 0 !important;
    font-size: 1.25rem !important;
}

.popup-message-text {
    margin: 0 0 20px 0 !important;
    color: #64748b;
}

.popup-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}


/* --- product.js (Skeleton Extras) --- */
.product-card.skeleton-card {
    pointer-events: none;
}

.skeleton-like-btn {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.6);
}

.skeleton-price-overlay {
    width: 70px;
    height: 24px;
    border-radius: 20px;
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.6);
}

.skeleton-text-container {
    margin-bottom: 4px;
}

.skeleton-text-title {
    width: 85%;
    height: 1.2rem;
}

.skeleton-details-row {
    border-top: none !important;
    padding-top: 0 !important;
    justify-content: space-between !important;
}

.skeleton-stock-badge {
    width: 100px;
    height: 26px;
    border-radius: 15px;
}

.skeleton-tags-btn {
    width: 28px;
    height: 28px;
}


/* --- serve.js (Promo Banner) --- */
.category-chip.skeleton-chip-lg {
    width: 80px;
    color: transparent;
    border: none;
}

.category-chip.skeleton-chip-sm {
    width: 60px;
    color: transparent;
    border: none;
}

.promo-icon-warning {
    background-color: #fff7ed !important;
    color: #ea580c !important;
}

.promo-title-warning {
    color: #ea580c !important;
    font-weight: 600 !important;
}

/* --- Custom Scrollbar for Dropdown (Cart Popup) --- */
.custom-select-options {
    scrollbar-width: thin !important;
    scrollbar-color: var(--primary-color) #f1f5f9 !important;
}

/* Force show scrollbar for Webkit */
.custom-select-options::-webkit-scrollbar {
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    background: transparent !important;
}

.custom-select-options::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 0 12px 12px 0;
}

.custom-select-options::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-color) 0%, #60a5fa 100%);
    border-radius: 6px;
}

.custom-select-options::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #3b82f6 0%, var(--primary-color) 100%);
}

/* =========================================
   GUIDE PAGE SETTINGS
   ========================================= */

.guide-table-container {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
    width: 100%;
    margin-top: 15px;
    box-sizing: border-box;
}

.guide-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.guide-table th,
.guide-table td {
    padding: 8px 16px;
    text-align: left;
    font-size: 0.95rem;
}

.guide-table td {
    border-bottom: 1px solid #f1f5f9;
}

.guide-table th {
    font-weight: 600;
    color: #64748b;
    background-color: #f8fafc;
    padding: 6px 16px;
}

.guide-table th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.guide-table th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.guide-table tr:hover {
    background-color: transparent;
}

.guide-col-action {
    white-space: nowrap;
}

/* Responsive Table */
@media (max-width: 768px) {
    .guide-table-container {
        padding: 5px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* แถบเลื่อนลื่นไหลบน iOS */
    }

    .guide-table {
        min-width: 100%;
        /* ให้ตารางปรับตามจอเลยในเบื้องต้น */
    }

    .guide-table th,
    .guide-table td {
        padding: 8px 4px;
        font-size: 0.85rem;
        /* ไม่บังคับ nowrap ในจอมือถือเผื่อชื่อยาว */
    }
}

/* =========================================
   ADMIN MODAL STYLES REPLICATED FOR FRONTEND
   ========================================= */
.btn-icon-close {
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-close:hover {
    background: #fee2e2;
    color: #ef4444;
}

.modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
    flex-shrink: 0;
}

.action-right {
    display: flex;
    gap: 10px;
}

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

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    color: #475569;
}

.form-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 600px) {
    .form-grid-row {
        grid-template-columns: 1fr;
    }
}

.modal-actions .btn-admin {
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
    font-size: 0.95rem;
    justify-content: center;
}

.btn-admin-primary {
    background: var(--primary-color, #2563eb);
    color: white;
}

.btn-admin-primary:hover {
    background: #1d4ed8;
}

.btn-admin-secondary {
    background: #f1f5f9;
    color: #475569;
}

.btn-admin-secondary:hover {
    background: #e2e8f0;
}

/* =========================================
   CUSTOM WEATHER TOOLTIP STYLES
   ========================================= */
.weather-tooltip {
    position: relative;
    display: inline-block;
}

.weather-tooltip .tooltip-text {
    visibility: hidden;
    background-color: #334155;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 6px 12px;
    position: fixed;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    font-family: inherit;
    font-size: 0.8rem;
    white-space: nowrap;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    pointer-events: none;
    transform: translateX(-50%);
}

.weather-tooltip .tooltip-text.bottom {
    bottom: auto;
    top: 125%;
}

.weather-tooltip .tooltip-text.bottom::after {
    bottom: 100%;
    top: auto;
    border-color: transparent transparent #334155 transparent;
}

.weather-tooltip .tooltip-text::after {
    display: none;
}

.weather-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}


/* =========================================
   GUIDE TIME SCHEDULING UI
   ========================================= */
.btn-time-type {
    flex: 1;
    padding: 8px 16px;
    background: transparent;
    color: #64748b;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 50px;
    cursor: pointer;
    font-family: inherit;
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.btn-time-type:hover {
    color: #334155;
    background: rgba(0, 0, 0, 0.02);
}

.btn-time-type.active {
    background: white;
    color: #2563eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-time-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 0.6rem;
    flex-shrink: 0;
    transition: background 0.15s;
}

.btn-time-type.active:hover .btn-time-plus {
    background: #1d4ed8;
}

.guide-time-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    padding: 6px 6px 6px 12px;
    border-radius: 25px;
    width: 100%;
}

/* Circular + button for adding time range */
.btn-add-time-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(66, 133, 244, 0.3);
}

.btn-add-time-circle:hover {
    background: var(--primary-dark, #1e40af);
    box-shadow: 0 3px 8px rgba(66, 133, 244, 0.4);
    transform: scale(1.05);
}



.guide-time-range-row .btn-remove-range {
    cursor: pointer;
    padding: 0;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: #fee2e2;
    color: #ef4444;
    border: none;
    transition: all 0.15s;
    flex-shrink: 0;
}

.guide-time-range-row .btn-remove-range:hover {
    background: #fecaca;
    color: #dc2626;
}

/* =========================================
   GUIDE FILTER BUTTON & MODAL
   ========================================= */

/* Filter button inside search bar */
.guide-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 8px;
    margin-right: 4px;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.guide-filter-btn:hover {
    background-color: #f1f3f4;
    color: #334155;
}

/* Filter badge */
.guide-filter-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Filter modal sections */
.guide-filter-section {
    margin-bottom: 20px;
}

.guide-filter-section:last-child {
    margin-bottom: 0;
}

.guide-filter-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

/* Filter chips wrap */
.guide-filter-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Filter chip */
.guide-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 500;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    transition: all 0.15s ease;
    user-select: none;
}

.guide-filter-chip:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.guide-filter-chip.active {
    border-color: var(--primary-color);
    background: rgba(66, 133, 244, 0.08);
    color: var(--primary-color);
    font-weight: 600;
}

/* Time custom row */
.guide-filter-time-custom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

/* Time number input group (shared between filter modal & guide modal) */
.guide-time-input-group {
    display: flex;
    align-items: center;
    gap: 0;
    background: #f1f5f9;
    border-radius: 25px;
    padding: 0;
    flex: 1;
    transition: border-color 0.2s;
    overflow: hidden;
}

.guide-time-input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.guide-time-number-input {
    width: 38px;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 600;
    text-align: right;
    color: #1e293b;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
    padding: 8px 0 8px 10px;
}

.guide-time-number-input::-webkit-outer-spin-button,
.guide-time-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.guide-time-number-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.guide-time-number-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.guide-time-suffix {
    font-size: 0.95rem;
    color: #1e293b;
    font-weight: 600;
    flex-shrink: 0;
    padding: 8px 10px 8px 1px;
    line-height: 1;
}

/* =========================================
   RESPONSIVE GUIDE TABLE COLUMNS
   ========================================= */

/* Default Details Button Column (Hidden on Desktop) */
.guide-col-details {
    display: none;
}

/* Stars overlay on image (Hidden on Desktop, shown with details button) */
.guide-image-stars {
    display: none !important;
}

/* Tablet / Small Desktop (< 1024px) */
@media (max-width: 1024px) {

    /* Show Details Button */
    .guide-col-details {
        display: table-cell !important;
    }

    /* Show Stars on Image */
    .guide-image-stars {
        display: block !important;
    }

    /* Hide Shadow & Time */
    .guide-col-shadow,
    .guide-col-time {
        display: none !important;
    }
}

/* Mobile Horizontal (< 768px) */
@media (max-width: 768px) {

    /* Hide Location, Weather, Ingredients, BuyPrice, GrowTime & Obtain */
    .guide-col-location,
    .guide-col-weather,
    .guide-col-ingredients,
    .guide-col-buyprice,
    .guide-col-growtime,
    .guide-col-obtain {
        display: none !important;
    }
}


/* Extra Small Phones (< 400px) */
@media (max-width: 400px) {

    /* Hide Price */
    .guide-col-price {
        display: none !important;
    }

    /* Hide Image */
    .guide-col-image {
        display: none !important;
    }
}

/* =========================================
   SERVICE PAGE — NEW FEATURES
   ========================================= */

/* --- Game Icon on Card (Top-Left) --- */
.service-game-icon-wrapper {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card:hover .service-game-icon-wrapper {
    transform: none;
    box-shadow: none;
}

.service-game-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Game Filter Buttons (in Search Bar) --- */
.serve-game-filter-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    flex-shrink: 0;
}

.serve-game-filter-sep {
    width: 1px;
    height: 20px;
    background: #e2e8f0;
    margin: 0 2px;
    flex-shrink: 0;
}

.serve-game-filter-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: #f1f5f9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.15s, background 0.2s;
    flex-shrink: 0;
    padding: 0;
    color: #64748b;
}

.serve-game-filter-btn:hover {
    border-color: #94a3b8;
    transform: scale(1.08);
    background: #e2e8f0;
}

.serve-game-filter-btn.active {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    color: #2563eb;
}

.serve-game-filter-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.serve-game-filter-fallback {
    font-size: 0.75rem;
    font-weight: 700;
    color: inherit;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Admin Panel for Service Page --- */
.serve-admin-panel {
    margin: 0 0 12px 0;
    border-radius: 16px;
    border: 1.5px solid #fbbf24;
    background: #fffbeb;
    overflow: hidden;
    transition: all 0.2s ease;
}

.serve-admin-panel.hidden {
    display: none !important;
}

.serve-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    gap: 8px;
}

.serve-admin-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #92400e;
}

.serve-admin-gear {
    color: #d97706;
    font-size: 1rem;
    animation: spin-slow 6s linear infinite;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.serve-admin-badge {
    background: #d97706;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.serve-admin-chevron {
    color: #92400e;
    font-size: 0.8rem;
    transition: transform 0.25s ease;
}

.serve-admin-panel.expanded .serve-admin-chevron {
    transform: rotate(180deg);
}

.serve-admin-body {
    display: none;
    padding: 0 16px 16px;
    border-top: 1px solid #fde68a;
}

.serve-admin-panel.expanded .serve-admin-body {
    display: block;
}

.serve-admin-hint {
    font-size: 0.82rem;
    color: #92400e;
    margin: 10px 0 12px;
    display: flex;
    align-items: center;
}

.serve-admin-type-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.serve-admin-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #fde68a;
    gap: 12px;
    transition: border-color 0.2s;
}

.serve-admin-type-row:hover {
    border-color: #fbbf24;
}

.serve-admin-type-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.serve-admin-type-game-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid #e2e8f0;
}

.serve-admin-type-game-icon-placeholder {
    background: #f1f5f9;
}

.serve-admin-type-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.serve-admin-type-game {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 1px;
}

/* Toggle Switch */
.serve-admin-toggle-wrap {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.serve-admin-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.serve-admin-toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 24px;
    transition: background 0.25s ease;
}

.serve-admin-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.serve-admin-toggle-input:checked + .serve-admin-toggle-slider {
    background: #22c55e;
}

.serve-admin-toggle-input:checked + .serve-admin-toggle-slider::before {
    transform: translateX(20px);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .serve-game-filter-btn {
        width: 28px;
        height: 28px;
    }

    .serve-admin-panel {
        border-radius: 12px;
    }

    .serve-admin-type-name {
        font-size: 0.84rem;
    }
}

/* Tooltip สำหรับปุ่มเลือกเกม — ใช้ absolute แทน fixed
   เพื่อให้ทำงานถูกต้องแม้อยู่ระหว่าง SPA animation */
.serve-game-filter-group .weather-tooltip {
    position: relative;
}

.serve-game-filter-group .tooltip-text {
    position: absolute !important;
    bottom: calc(100% + 6px) !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* ซ่อน tooltip บน touch device */
@media (hover: none), (pointer: coarse) {
    .serve-game-filter-group .tooltip-text {
        display: none !important;
    }
}

/* =============================================
   [NEW] Review Gallery Modal — Custom
   ============================================= */
.review-gallery-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    padding: 16px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.review-gallery-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.review-gallery-panel {
    background: white;
    border-radius: 20px;
    width: fit-content;
    min-width: 240px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s ease, min-width 0.3s ease;
}

.review-gallery-panel.is-loading {
    min-width: 320px;
}

.review-gallery-overlay.active .review-gallery-panel {
    transform: scale(1) translateY(0);
}

.review-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: none;
    flex-shrink: 0;
    min-height: 57px;
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
    gap: 12px;
}

.review-gallery-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.review-gallery-counter {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 500;
    background: #f8fafc;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.review-gallery-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    margin-left: 8px;
}

.review-gallery-close:hover {
    background: #fee2e2;
    color: #ef4444;
}

.review-gallery-main {
    position: relative;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    flex: 1;
    overflow: hidden;
}

.review-gallery-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 55vh;
    display: block;
    transition: opacity 0.15s ease-in-out;
}

.review-gallery-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #64748b;
    padding: 40px;
    font-size: 0.9rem;
}

.review-gallery-error i { font-size: 2.5rem; }

.review-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    backdrop-filter: blur(4px);
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.review-gallery-nav::before {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
}

.review-gallery-nav:hover { background: rgba(0, 0, 0, 0.6); }
.review-gallery-nav-prev { left: 10px; }
.review-gallery-nav-next { right: 10px; }

.review-gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 16px 16px 16px;
    flex-shrink: 0;
    background: #f8fafc;
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
    cursor: grab;
    scrollbar-color: #3b82f6 transparent;
    scrollbar-width: thin;
}

.review-gallery-thumbs:active {
    cursor: grabbing;
}

/* Custom Scrollbar for Thumbnails - force override global hide */
.review-gallery-thumbs::-webkit-scrollbar {
    display: block !important;
    height: 8px !important;
    width: auto !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}
.review-gallery-thumbs::-webkit-scrollbar-track {
    background: #e2e8f0 !important;
    margin: 0 16px !important;
    border-radius: 4px !important;
}
.review-gallery-thumbs::-webkit-scrollbar-thumb {
    background-color: #3b82f6 !important;
    border-radius: 4px !important;
    border: 2px solid #f8fafc !important;
}
.review-gallery-thumbs::-webkit-scrollbar-thumb:hover {
    background-color: #2563eb !important;
}

.review-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    border: 2.5px solid transparent;
    background: #e2e8f0;
    transition: border-color 0.15s, transform 0.15s;
}

.review-thumb:hover { transform: scale(1.05); }

.review-thumb.active {
    border-color: #3b82f6;
}

.review-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-gallery-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    width: 100%;
    color: #64748b;
}

@keyframes reviewSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.review-spinner {
    font-size: 1.8rem;
    color: #6366f1;
    animation: reviewSpin 0.9s linear infinite;
    display: inline-block;
}

@media (max-width: 480px) {
    .review-gallery-img { max-height: 50vh; }
    .review-gallery-panel { 
        border-radius: 16px; 
        min-width: 240px;
    }
    .review-gallery-nav {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }
    .review-gallery-nav-prev { left: 6px; }
    .review-gallery-nav-next { right: 6px; }
    
    .review-gallery-header {
        padding: 12px 16px;
        gap: 8px;
    }
    .review-gallery-title { font-size: 0.95rem; }
}

@keyframes gallery-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.gallery-ring-spinner {
    width: 40px;
    height: 40px;
    border: 3.5px solid #e2e8f0;
    border-top-color: var(--primary-color, #4285F4);
    border-radius: 50%;
    animation: gallery-spin 0.75s linear infinite;
}

/* =============================================
   Guide Table — Image Skeleton Shimmer
   ============================================= */

/* Wrapper แสดง shimmer ขณะรูปยังไม่โหลด */
.img-wrap-loading {
    background: linear-gradient(
        90deg,
        #f0f2f5 25%,
        #e4e8ed 50%,
        #f0f2f5 75%
    );
    background-size: 200% 100%;
    animation: guide-img-shimmer 1.4s ease-in-out infinite;
}

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

/* รูปภาพจะซ่อนไว้ก่อน แล้ว fade-in เมื่อโหลดเสร็จ */
.guide-item-img {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.guide-item-img.loaded {
    opacity: 1;
}

/* =============================================
   [NEW] Order Detail Popup (od-*)
   ============================================= */

/* Panel — same pattern as review-gallery-panel */
.od-panel {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 440px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s ease;
    will-change: transform;
}

.od-overlay.active .od-panel {
    transform: scale(1) translateY(0);
}

/* Header */
.od-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    flex-shrink: 0;
    gap: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.od-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Body — scrollable */
.od-body {
    overflow-y: auto;
    padding: 16px 30px 25px;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.od-body::-webkit-scrollbar {
    width: 4px;
}

.od-body::-webkit-scrollbar-track {
    background: transparent;
}

.od-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.od-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Info section rows */
.od-info-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.od-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.od-info-icon {
    width: 18px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.od-info-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
    min-width: 0;
}

.od-info-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    margin-left: auto;
    text-align: right;
    flex-shrink: 0;
}

/* Game row */
.od-game-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.od-game-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #f1f5f9;
}

.od-game-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
}

/* Payment status badge */
.od-payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

/* Price summary */
.od-price-box {
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.od-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #475569;
}

.od-price-row.discount {
    color: #ef4444;
}

.od-price-row.net {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b;
    border-top: 1px dashed #e2e8f0;
    padding-top: 8px;
    margin-top: 2px;
}

/* Divider */
.od-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0 12px;
}

/* Section title (Items header) */
.od-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

/* Item cards */
.od-items-list {
    display: flex;
    flex-direction: column;
}

.od-item-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed #e2e8f0;
}
.od-item-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.od-item-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: transparent;
}

.od-item-img-fallback {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    flex-shrink: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.2rem;
}

.od-item-info-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 48px;
}

.od-item-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
    word-break: break-word;
}

.od-item-cat {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.2;
}

.od-item-type {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.2;
}

.od-item-char {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.2;
    font-weight: 500;
}

.od-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    min-height: 48px;
}

.od-item-qty {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

.od-item-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mobile responsive */
@media (max-width: 480px) {

    .od-header {
        padding: 14px 16px 12px;
    }

    .od-body {
        padding: 14px 25px 20px;
    }

    .od-title {
        font-size: 0.95rem;
    }
}