/* TikTok-style scroll view - Optimized for performance */

/* Toggle button with modern glassmorphism */
/* Removed the old floating toggle button styles */
/* .tiktok-toggle-btn {
    position: fixed;
    bottom: 100px;
    right: 20px;
    ...
}
*/

/* The toggle is now in the navbar, so we don't need the floating button styles */

/* Main container with dark theme */
.tiktok-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available; /* Safari mobile fix */
    min-height: -webkit-fill-available;
    background: #1a0a0a;
    z-index: 999;
    overflow: hidden;
    will-change: transform;
}

/* Scroll wrapper */
.tiktok-scroll-wrapper {
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available; /* Safari mobile fix */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.tiktok-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

/* Individual plate with animated background */
.tiktok-plate-item {
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available; /* Safari mobile fix */
    min-height: -webkit-fill-available;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    will-change: auto; /* Remove will-change to reduce memory usage */
    transform: translateZ(0); /* Force GPU acceleration only when needed */
}

/* Simplified gradient background for better performance - DARK GREY for regular plates */
.tiktok-plate-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); /* Dark grey gradient */
    opacity: 0.9; /* Higher opacity for darker look */
    /* Remove animation for better performance */
}

/* Premium/Sponsored background */
.tiktok-sponsored .tiktok-plate-background {
    background: linear-gradient(135deg, #3b030d 0%, #5e0918 25%, #7c0f23 50%, #5e0918 75%, #3b030d 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

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

/* Floating orbs for visual depth - Qatar themed - adjusted for dark grey background */
.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15; /* Slightly less opacity on dark background */
    animation: float 20s infinite ease-in-out;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #4a4a4a, transparent); /* Grey orbs */
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

.orb-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #5a5a5a, transparent); /* Light grey orb */
    bottom: -15%;
    right: -10%;
    animation-delay: 5s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #3a3a3a, transparent); /* Dark grey orb */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 10s;
}

/* Premium orbs with gold accents */
.tiktok-sponsored .orb-1 {
    background: radial-gradient(circle, rgba(212,175,55,0.5), transparent);
    opacity: 0.4;
}

.tiktok-sponsored .orb-2 {
    background: radial-gradient(circle, rgba(255,215,130,0.3), transparent);
    opacity: 0.3;
}

.tiktok-sponsored .orb-3 {
    background: radial-gradient(circle, rgba(212,175,55,0.4), transparent);
    opacity: 0.35;
}

/* Plate content with glassmorphism */
.tiktok-plate-content {
    position: relative;
    width: 90%;
    max-width: 420px;
    height: 80vh; /* Reduced from 85vh to prevent overlap */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    padding-bottom: 100px; /* Add extra padding at bottom for seller button */
    z-index: 1;
}

/* Main plate card - Regular style */
.tiktok-plate-main {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: 35px 30px; /* Reduced from 45px 35px */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Reduced from 25px */
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
    transform: perspective(1000px) rotateX(2deg);
    animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateX(2deg) translateY(50px);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateX(2deg) translateY(0);
    }
}

/* Glow effect behind plate - Regular */
.plate-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(52, 73, 94, 0.1), transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(40px);
    z-index: -1;
    animation: pulse 3s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.7; }
}

/* Enhanced plate number - Regular style */
.tiktok-plate-number {
    font-size: 60px;
    font-weight: 700;
    color: #31302c;
    letter-spacing: 1px;
    padding: 20px 30px;
    background: linear-gradient(to bottom, #ffffff, #f8f8f8);
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-width: 70%;
    position: relative;
    z-index: 1;
}

/* Removed the maroon top bar */

/* Category with modern style */
.tiktok-plate-category {
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    opacity: 0.8;
    display: flex; /* Make it flex container */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center horizontally */
}

/* Feature badges - Regular style */
.tiktok-feature-badge {
    background: #31302c;
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Price - Regular style */
.tiktok-plate-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 15px 0; /* Reduced from 20px 0 */
}

.tiktok-plate-price .currency {
    font-size: 20px;
    font-weight: 600;
    color: #666;
    opacity: 0.8;
}

.tiktok-plate-price .amount {
    font-size: 42px;
    font-weight: 900;
    color: #8B0000;
}

/* Modern action buttons */
.tiktok-plate-actions {
    display: flex;
    gap: 60px; /* Increased gap since we only have 2 buttons now */
    margin-top: 20px; /* Reduced from 25px */
    justify-content: center; /* Center the buttons */
}

.tiktok-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.tiktok-action-btn:active {
    transform: scale(0.85);
}

.action-icon {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tiktok-action-btn svg {
    width: 60px;
    height: 60px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    stroke: white;
    transition: all 0.3s ease;
}

/* Better visibility for unfavorited state on normal plates */
.tiktok-action-btn.tiktok-favorite:not(.active) svg {
    background: rgba(139, 0, 0, 0.15); /* Light red background */
    border: 1.5px solid rgba(139, 0, 0, 0.3); /* Red border */
    stroke: #ff4458; /* Bright red stroke */
    stroke-width: 2;
}

.tiktok-action-btn.tiktok-favorite:not(.active):hover svg {
    background: rgba(139, 0, 0, 0.25);
    border-color: rgba(139, 0, 0, 0.4);
    transform: scale(1.1);
}

/* Sponsored plates - ensure good contrast */
.tiktok-sponsored .tiktok-action-btn.tiktok-favorite:not(.active) svg {
    background: rgba(255, 255, 255, 0.2); /* White background instead of gold */
    border: 1.5px solid rgba(255, 255, 255, 0.3); /* White border */
    stroke: white; /* White stroke for the heart outline */
    stroke-width: 2;
}

.tiktok-sponsored .tiktok-action-btn.tiktok-favorite:not(.active):hover svg {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

/* Sponsored plates - active state override (keep as is) */
.tiktok-sponsored .tiktok-action-btn.tiktok-favorite.active svg {
    background: linear-gradient(135deg, #d4af37, #b88d10) !important;
    fill: white !important;
    stroke: white !important;
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
}

/* Contact button styling for consistency */
.tiktok-action-btn.tiktok-contact svg {
    background: rgba(37, 211, 102, 0.15); /* Light green background */
    border: 1.5px solid rgba(37, 211, 102, 0.3); /* Green border */
    stroke: #25D366; /* WhatsApp green */
    stroke-width: 2;
}

.tiktok-action-btn.tiktok-contact:hover svg {
    background: rgba(37, 211, 102, 0.25);
    border-color: rgba(37, 211, 102, 0.4);
    transform: scale(1.1);
}

/* Active favorite state - ensure it's very clear */
.tiktok-action-btn.tiktok-favorite.active svg {
    background: linear-gradient(135deg, #ff4458, #e63946) !important;
    fill: white !important;
    stroke: white !important;
    border: 1px solid rgba(255, 68, 88, 0.5) !important;
}

/* Ensure the transition is smooth */
.tiktok-action-btn.tiktok-favorite svg {
    transition: all 0.2s ease;
}

/* Active favorite state remains the same */
.tiktok-action-btn.active svg {
    background: linear-gradient(135deg, #8B0000, #5c0000);
    fill: white;
    stroke: white;
    border: 1px solid rgba(139, 0, 0, 0.5);
}

/* Pulse animation for favorite */
.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

.tiktok-favorite.active .pulse-ring {
    animation: pulseRing 0.8s ease-out;
}

@keyframes pulseRing {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

.tiktok-action-btn.active svg {
    background: linear-gradient(135deg, #8B0000, #5c0000);
    fill: white;
}

.tiktok-action-btn span {
    font-size: 14px;
    color: white;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Update favorite button to show count */
.tiktok-action-btn.tiktok-favorite {
    position: relative;
}

.tiktok-favorite-count {
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.tiktok-favorite.active .tiktok-favorite-count {
    color: #ff4458;
    font-weight: 700;
}

/* Animate count changes */
@keyframes countBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.tiktok-favorite-count.updating {
    animation: countBounce 0.3s ease;
}

/* View seller button - improved for mobile compatibility */
.tiktok-seller-info {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 20;
    
    /* Proper button resets */
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 15px;
    color: #333;
    font-weight: 600;
    
    /* Mobile optimization */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    
    /* Fix for iOS Safari */
    -webkit-touch-callout: none;
    
    /* Performance optimization */
    transform: translateX(-50%) translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    .tiktok-seller-info {
        bottom: 40px; /* Position higher on mobile */
        padding: 10px 20px; /* Slightly smaller on mobile */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* More visible shadow */
        
        /* Fix for iOS bottom spacing */
        bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    }
}

/* Active state for touch devices */
.tiktok-seller-info.touch-active,
.tiktok-seller-info:active {
    transform: translateX(-50%) scale(0.96);
    background: rgba(255, 255, 255, 1);
}

/* Hover state only for non-touch devices */
@media (hover: hover) {
    .tiktok-seller-info:hover {
        transform: translateX(-50%) translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }
    
    .tiktok-seller-info:hover .arrow-icon {
        transform: translateX(4px);
    }
}

.tiktok-seller-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px; /* Prevent shrinking */
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tiktok-seller-avatar svg {
    width: 18px;
    height: 18px;
    stroke: #555;
}

.tiktok-seller-info span {
    white-space: nowrap;
}

.tiktok-seller-info .arrow-icon {
    width: 16px;
    height: 16px;
    stroke: #666;
    transition: transform 0.2s ease;
    margin-left: 4px;
}

/* Remove glow effect on mobile for performance */
@media (max-width: 768px) {
    .seller-info-glow {
        display: none !important;
    }
}

/* Improve scroll performance on mobile */
@media (max-width: 768px) {
    .tiktok-scroll-wrapper {
        /* Enable hardware acceleration */
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000;
    }
    
    .tiktok-plate-item {
        /* Reduce complexity for mobile */
        transform: translateZ(0);
        will-change: auto;
    }
    
    /* Disable complex animations on scroll for performance */
    .tiktok-plate-background {
        animation: none !important;
    }
    
    .gradient-orb {
        animation: none !important;
    }
}

/* Sponsored plate special effects - Qatar Gold */
.tiktok-sponsored .tiktok-plate-main {
    background: linear-gradient(145deg, #3b030d 0%, #5e0918 45%, #7c0f23 70%, #3b030d 100%);
    border: 1px solid rgba(212,175,55,0.9);
    box-shadow: 
        0 8px 22px -6px rgba(0,0,0,0.55), 
        0 0 0 1px rgba(212,175,55,0.35),
        0 0 18px -4px rgba(212,175,55,0.55);
    position: relative;
    overflow: hidden;
}

/* Soft inner glow frame for premium */
.tiktok-sponsored .tiktok-plate-main::before {
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(130deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 40%),
        radial-gradient(circle at 85% 15%, rgba(255,215,130,0.18), transparent 60%);
    pointer-events:none;
    mix-blend-mode:screen;
    border-radius: 30px;
}

/* Premium plate glow */
.tiktok-sponsored .plate-glow {
    background: radial-gradient(circle, rgba(212,175,55,0.3), transparent 70%);
}

/* Premium plate number styling */
.tiktok-sponsored .tiktok-plate-number {
    background: linear-gradient(to bottom, #fffdf7, #f4e7c4);
    border: 2px solid #d4af37;
    color: #3b030d;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.35), 
        0 0 0 1px rgba(212,175,55,0.25);
}

/* Premium plate number accent */
.tiktok-sponsored .tiktok-plate-number::before {
    background: linear-gradient(90deg, #d4af37, #b88d10, #d4af37);
    height: 12px;
}

/* Premium category styling */
.tiktok-sponsored .tiktok-plate-category {
    color: #f1d79b;
    font-weight: 600;
}

/* Premium feature badges */
.tiktok-sponsored .tiktok-feature-badge {
    background: linear-gradient(135deg, #d4af37, #b88d10);
    color: #2a1500;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

/* Premium price styling */
.tiktok-sponsored .tiktok-plate-price .currency {
    color: #f1d79b;
}

.tiktok-sponsored .tiktok-plate-price .amount {
    color: #f1d79b;
    font-size: 42px;
    font-weight: 900;
}

/* Premium action buttons */
.tiktok-sponsored .tiktok-action-btn svg {
    background: linear-gradient(135deg, rgba(212,175,55,0.3), rgba(212,175,55,0.2));
    border: 1px solid rgba(212,175,55,0.5);
}

.tiktok-sponsored .tiktok-action-btn:hover svg {
    background: linear-gradient(135deg, rgba(212,175,55,0.5), rgba(212,175,55,0.3));
}

/* Premium seller button - Override for sponsored plates */
.tiktok-sponsored ~ .tiktok-seller-info {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #D4AF37; /* Gold border for premium */
}

.tiktok-sponsored ~ .tiktok-seller-info:hover {
    background: #D4AF37; /* Gold background on hover */
    border-color: white; /* White border on hover for premium too */
    color: #2a1500; /* Dark text on gold */
}

/* Premium badge styling */
.tiktok-sponsored-badge {
    position: absolute;
    top: -20px;
    right: 30px;
    background: linear-gradient(135deg, #d4af37, #b88d10);
    color: #2a1500;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    border: 1px solid rgba(110,70,0,0.25);
    box-shadow: 
        0 6px 20px rgba(212, 175, 55, 0.4),
        0 0 40px rgba(212, 175, 55, 0.2);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    50% { transform: scale(1.05) rotate(2deg); }
}

/* Close button (now with grid icon) */
.tiktok-close {
    position: fixed;
    top: 20px;
    left: 20px;  /* Changed from right to left */
    z-index: 1001;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tiktok-close svg {
    width: 20px;
    height: 20px;
    color: white;
}

.tiktok-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

.tiktok-close:active {
    transform: scale(0.95);
}

/* Show toggle button only on mobile */
@media (max-width: 768px) {
    .tiktok-toggle-btn {
        display: flex;
    }
}

/* Mobile optimizations */
@media (max-width: 480px) {
    .tiktok-plate-content {
        padding-bottom: 80px; /* Ensure space for seller button on mobile */
    }
    
    .tiktok-plate-main {
        padding: 30px 25px; /* Reduced from 35px 25px */
        gap: 18px; /* Reduced gap on mobile */
    }
    
    .tiktok-plate-number {
        font-size: 46px;
        padding: 20px 30px; /* Reduced from 25px 35px */
    }
    
    .tiktok-plate-price .amount {
        font-size: 36px;
    }
    
    .tiktok-plate-actions {
        gap: 50px; /* Adjusted gap for mobile with 2 buttons */
        margin-top: 15px; /* Reduced from 20px */
    }
    
    .tiktok-action-btn svg {
        width: 55px;
        height: 55px;
    }
    
    .tiktok-seller-info {
        bottom: 20px; /* Closer to bottom on mobile */
    }
    
    .tiktok-feature-emojis {
        font-size: 18px; /* Smaller on mobile */
        margin-left: 8px;
        gap: 6px;
    }
}

/* iPhone notch handling */
@supports (padding-top: env(safe-area-inset-top)) {
    .tiktok-container {
        padding-top: env(safe-area-inset-top);
    }
    
    .tiktok-close {
        top: calc(30px + env(safe-area-inset-top));
    }
    
    .tiktok-toggle-btn {
        top: calc(20px + env(safe-area-inset-top));
    }
}

/* Error message styling */
.tiktok-error {
    color: white;
    font-size: 18px;
    text-align: center;
    padding: 20px;
}

/* Optimize animations and reduce GPU load */
.tiktok-container {
    will-change: transform;
}

.tiktok-scroll-wrapper {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.tiktok-plate-item {
    will-change: auto; /* Remove will-change to reduce memory usage */
    transform: translateZ(0); /* Force GPU acceleration only when needed */
}

/* Simplify background animations */
.tiktok-plate-background {
    opacity: 0.3; /* Reduce opacity for better performance */
}

/* Disable gradient orb animations on mobile */
@media (max-width: 768px) {
    .gradient-orb {
        animation: none !important;
        opacity: 0.2;
    }
    
    /* Simplify glow effects */
    .plate-glow,
    .seller-info-glow {
        display: none;
    }
    
    /* Reduce pulse animation complexity */
    .pulse-ring {
        animation: none;
    }
}

/* Optimize pulse animation */
@keyframes simplePulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1;
    }
    50% { 
        transform: scale(1.1); 
        opacity: 0.7;
    }
}

.tiktok-action-btn:active .action-icon {
    animation: simplePulse 0.3s ease;
}

/* Remove complex animations on low-end devices */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Golden (champagne) card design for TikTok scroll */
.tiktok-champagne {
    background: linear-gradient(135deg, #fdf6e3 0%, #fbeec1 100%);
    border: 2px solid #ffe066;
    box-shadow: 0 4px 18px -6px rgba(255, 224, 102, 0.13), 0 0 0 1px #ffe066;
    position: relative;
    overflow: hidden;
}

.tiktok-champagne .tiktok-plate-background {
    /* Light creamy background for champagne tier */
    background: linear-gradient(135deg, #faf8f3 0%, #f5f1e8 25%, #faf8f3 50%, #f5f1e8 75%, #faf8f3 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    opacity: 0.8; /* Higher opacity for light background */
}

.tiktok-champagne .tiktok-plate-content {
    /* Remove the background color - keep it transparent */
    background: none;
}

.tiktok-champagne .tiktok-plate-main {
    background: linear-gradient(135deg, #fdf6e3 0%, #fbeec1 100%);
    border: 1.5px solid #ffe066;
    box-shadow: 0 4px 18px -6px rgba(255, 224, 102, 0.13), 0 0 0 1px #ffe066;
}

.tiktok-champagne .plate-glow {
    background: radial-gradient(circle, rgba(255, 224, 102, 0.2), transparent 70%);
}

.tiktok-champagne .tiktok-plate-number {
    background: linear-gradient(to bottom, #ffffff, #f8f8f8);
    border: 2px solid #e0e0e0;
    color: #31302c;
}

.tiktok-champagne .tiktok-plate-category {
    color: #222 !important;
    font-weight: 600;
}

.tiktok-champagne .tiktok-plate-price .currency {
    color: #222 !important;
}

.tiktok-champagne .tiktok-plate-price .amount {
    color: #222 !important;
}

.tiktok-champagne-badge {
    position: absolute;
    top: -20px;
    right: 30px;
    background: linear-gradient(135deg, #ffe066 0%, #fff066 100%);
    color: #222;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    border: 1px solid #ffe066;
    box-shadow: 0 6px 20px rgba(255, 224, 102, 0.4);
    animation: shimmer 2s infinite;
}

.tiktok-champagne .tiktok-action-btn svg {
    background: rgba(139, 0, 0, 0.1);
    border: 1px solid #ffe066;
    stroke: #8b0000;
}

.tiktok-champagne .tiktok-action-btn span {
    color: white;
}

.tiktok-champagne .tiktok-favorite.active svg {
    background: linear-gradient(135deg, #ffe066, #ffd700) !important;
    fill: #8b0000 !important;
    stroke: #8b0000 !important;
    border: 1px solid #ffe066 !important;
}

/* Feature emojis styling for TikTok view - positioned inline with category */
.tiktok-feature-emojis {
    font-size: 20px; /* Reduced from 24px */
    margin: 0; /* Removed margin */
    display: inline-flex; /* Changed to inline-flex */
    justify-content: center;
    gap: 8px; /* Reduced from 10px */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    vertical-align: middle; /* Align with text */
    margin-left: 10px; /* Add some space from category text */
}

/* Remove the gap adjustment when emojis are present */
.tiktok-plate-main:has(.tiktok-feature-emojis) {
    gap: 20px; /* Keep the same gap */
}

/* Mobile adjustments for emojis */
@media (max-width: 480px) {
    .tiktok-feature-emojis {
        font-size: 18px; /* Smaller on mobile */
        margin-left: 8px;
        gap: 6px;
    }
}

/* Scroll hint animation for first plate */
.tiktok-scroll-hint {
    position: absolute;
    bottom: 120px; /* Position above seller button */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.tiktok-scroll-hint.hidden {
    opacity: 0;
    pointer-events: none;
}

.scroll-arrow-container {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    animation: bounceDown 1.5s ease-in-out infinite;
}

.scroll-arrow {
    width: 100%;
    height: 100%;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 2.5;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.tiktok-scroll-hint p {
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
    opacity: 0.9;
}

/* Bounce animation for scroll arrow */
@keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(10px);
    }
    60% {
        transform: translateY(5px);
    }
}

/* Adjust for mobile */
@media (max-width: 768px) {
    .tiktok-scroll-hint {
        bottom: 100px; /* Ensure it's visible on smaller screens */
    }
    
    .scroll-arrow-container {
        width: 35px;
        height: 35px;
    }
    
    .tiktok-scroll-hint p {
        font-size: 13px;
    }
}

/* For sponsored plates, adjust the hint color for better contrast */
.tiktok-sponsored .tiktok-scroll-hint .scroll-arrow {
    stroke: rgba(255, 255, 255, 0.95);
}

.tiktok-sponsored .tiktok-scroll-hint p {
    color: rgba(255, 255, 255, 0.95);
}

/* Remove or comment out the desktop toggle button styles */
/*
.desktop-tiktok-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    background: rgba(139, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.desktop-tiktok-toggle svg {
    width: 24px;
    height: 24px;
    color: white;
}

.desktop-tiktok-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    background: rgba(139, 0, 0, 1);
}

.desktop-tiktok-toggle:active {
    transform: translateY(0);
}

@media (min-width: 769px) {
    .desktop-tiktok-toggle {
        display: flex;
    }
}
*/

/* Golden/Champagne plates in TikTok scroll */
.tiktok-plate.golden-plate {
    background: linear-gradient(135deg, #f9f4e6 0%, #f0e68c 30%, #daa520 70%, #b8860b 100%);
    border: 2px solid #d4af37;
    box-shadow: 
        0 8px 22px -6px rgba(139, 105, 20, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 20px rgba(212, 175, 55, 0.2);
}

.tiktok-plate.golden-plate .tiktok-plate-number {
    background: linear-gradient(to bottom, #fffef7 0%, #f4e7c4 100%);
    border: 2px solid #d4af37;
    color: #5a4a0d;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(212, 175, 55, 0.25);
}

.tiktok-plate.golden-plate .tiktok-plate-number:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(139, 105, 20, 0.4), 0 0 0 1px rgba(212, 175, 55, 0.45);
}

.tiktok-plate.golden-plate .tiktok-plate-price {
    color: #5a4a0d;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.tiktok-plate.golden-plate .tiktok-actions {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.tiktok-plate.golden-plate .tiktok-favorite {
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #5a4a0d;
}

.tiktok-plate.golden-plate .tiktok-favorite:hover {
    background: rgba(212, 175, 55, 0.3);
    transform: scale(1.05);
}

.tiktok-plate.golden-plate .tiktok-favorite.active {
    background: linear-gradient(135deg, #d4af37, #b8860b);
    color: #2a1500;
    border-color: #d4af37;
}

.tiktok-plate.golden-plate .tiktok-favorite-count {
    color: #5a4a0d;
    font-weight: 600;
}