/*
-----------------------------------------------
Blogger Template Style - Enhanced Cyber-Neon Dark Theme (V2.0 - Attactive)
-----------------------------------------------
New Color Palette:
- Background: #12121e (Deep Dark Blue)
- Accent 1 (Primary Glow/CTA): #00e5ff (Vibrant Cyan)
- Accent 2 (Sale/Price/Highlight): #ff4081 (Hot Pink)
- Secondary Elements: #2a2a4a (Deeper Blue-Violet)
- Text: #f0f0f0 (Off-White)
----------------------------------------------- */
/* Global Fade-In Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

html, body {
  height: 250%;
  margin: 0;
  padding: 0;
  width: 100%;
  scroll-behavior: smooth; /* Smooth scrolling for navigation */
}

body {
  background-color: #12121e; /* Deeper, more attractive background */
  font-family: 'Verdana', Geneva, Tahoma, sans-serif; /* Slightly more modern feel */
  color: #f0f0f0; /* Brighter text color */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-x: hidden;
  line-height: 1.6; /* Improved readability */
  font-size: 15px; /* Slightly larger base font */
  animation: fadeIn 0.5s ease-out; /* Page load animation */
}

.blogger-app-container {
    width: 100%;
    min-height: 140vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* AdsTerra Ad Container Styling - Enhanced Glow */
.adsterra-ad-container {
    width: 350%; /* Full width */
    max-width: 350px; /* Max width for banner ads, adjust as needed */
    height: auto; /* Auto height based on ad content */
    margin: 10px auto; /* Centered with some margin */
    overflow: hidden;
    text-align: center;
    background-color: #1e1e2d; /* Darker placeholder color */
    border: 1px solid #4f4f7a; /* Subtle border */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px; /* Minimum height for smaller ads */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2); /* Subtle Cyan glow */
}
.adsterra-ad-container-top {
    position: sticky; /* Sticky for top ad if desired */
    top: 0;
    z-index: 1001; /* Above header if sticky */
    margin-bottom: 0px; /* Space below top ad */
}
/* Basic Reset & Font - E-commerce */
    * {
        box-sizing: border-box;
        font-family: inherit; /* Inherit from body for consistency */
    }

    .view-section { display: none; min-height: 80vh; padding-bottom: 80px; /* Space for bottom nav */ padding-top: 0; width:100%; max-width:100%; animation: fadeIn 0.4s ease-out; }
    #user-view-main { display: block; }

    .header {
        background-color: #1e1e2d; /* Secondary dark color */
        padding-top: 8px;
        color: #f0f0f0;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 5px #00e5ff70; /* Deep shadow with subtle neon glow */
        transition: background-color 0.3s ease;
    }
    /* Adjusted header top position... (Keep original for logic) */
    .adsterra-ad-container-top + #user-view-main .header,
    .adsterra-ad-container-top + #product-detail-view .image-style-header,
    .adsterra-ad-container-top + #order-form-view .detail-header,
    .adsterra-ad-container-top + #account-view .detail-header,
    .adsterra-ad-container-top + #deposit-view .detail-header,
    .adsterra-ad-container-top + #withdrawal-view .detail-header,
    .adsterra-ad-container-top + #my-orders-view .detail-header,
    .adsterra-ad-container-top + #my-products-view .detail-header,
    .adsterra-ad-container-top + #edit-product-view .detail-header,
    .adsterra-ad-container-top + #seller-application-view .detail-header, /* NEW */
    .adsterra-ad-container-top + #seller-products-view .detail-header,
    .adsterra-ad-container-top + #order-detail-user-view .detail-header,
    .adsterra-ad-container-top + #privacy-policy-view .detail-header,
    .adsterra-ad-container-top + #about-us-view .detail-header,
    .adsterra-ad-container-top + #refund-policy-view .detail-header,
    .adsterra-ad-container-top + #withdrawal-policy-view .detail-header {
        /* top: 60px; */
    }


    .status-bar {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 10px 4px;
        font-size: 0.75em;
        position: relative;
        min-height: 40px;
    }
    .header-menu-container {
        position: relative;
    }
    #header-menu-button {
        background-color: #3a3a5a;
        color: #00e5ff; /* Cyan accent */
        border: 1px solid #00e5ff50;
        padding: 8px 14px; /* Larger padding */
        border-radius: 6px;
        font-size: 0.95em;
        cursor: pointer;
        transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s;
    }
    #header-menu-button:hover {
        background-color: #4a4a6a;
        box-shadow: 0 0 10px #00e5ff; /* Neon glow on hover */
        transform: translateY(-2px);
    }
    #header-menu-button i {
        margin-right: 5px;
    }

    .header-dropdown-menu {
        display: none;
        position: absolute;
        top: 110%; /* Slightly more space */
        right: 0;
        background-color: #1e1e2d; /* Secondary dark color */
        color: #f0f0f0;
        border: 1px solid #00e5ff50;
        border-radius: 8px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.5), 0 0 15px #ff408150; /* Deep shadow with pink edge glow */
        z-index: 1001;
        min-width: 220px;
        overflow: hidden;
    }
    .header-dropdown-menu a {
        display: block;
        padding: 12px 18px;
        text-decoration: none;
        color: #f0f0f0;
        font-size: 0.9em;
        white-space: nowrap;
        border-bottom: 1px solid #3a3a5a;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    .header-dropdown-menu a:last-child {
        border-bottom: none;
    }
    .header-dropdown-menu a:hover {
        background-color: #3a3a5a;
        color: #00e5ff; /* Cyan on hover */
    }
    .header-dropdown-menu a i {
        margin-right: 10px;
        color: #ff4081; /* Pink icon */
        width: 18px;
        text-align: center;
    }

    /* USER JOIN COUNTER STYLES START - Neon Pulse Effect */
    .user-join-counter {
        text-align: center;
        color: #f0f0f0;
        padding: 8px 10px;
        font-size: 0.9em;
        font-weight: 600;
        background-color: #1e1e2d;
        border-bottom: 1px solid #00e5ff30;
    }
    #user-join-count-value {
        color: #ff4081; /* Hot Pink accent for the number */
        font-weight: bold;
        margin-right: 4px;
        text-shadow: 0 0 5px #ff4081; /* Neon glow effect */
    }
    .user-join-counter i.fa-users {
        color: #00e5ff; /* Cyan icon */
        margin-right: 5px;
        animation: pulseUserIcon 1.5s infinite ease-in-out; /* Faster pulse */
    }
    @keyframes pulseUserIcon {
        0% { transform: scale(1); opacity: 0.8;}
        50% { transform: scale(1.15); opacity: 1; text-shadow: 0 0 8px #00e5ff;}
        100% { transform: scale(1); opacity: 0.8;}
    }
    /* USER JOIN COUNTER STYLES END */

    .search-bar-container { display: flex; align-items: center; padding: 8px 10px; }
    .search-bar { background-color: #1e1e2d; border-radius: 25px; display: flex; align-items: center; flex-grow: 1; padding: 8px 15px; color: #f0f0f0; border: 1px solid #3a3a5a; box-shadow: inset 0 1px 3px rgba(0,0,0,0.4); }
    .search-bar input { border: none; outline: none; background: transparent; flex-grow: 1; padding: 0 8px; font-size: 1em; text-align: left; color: #f0f0f0; }
    .search-bar input::placeholder { color: #888; }
    .search-bar .icon { font-size: 1.2em; color: #00e5ff; margin-left: 8px; cursor: pointer; transition: color 0.2s; }
    .search-bar .icon:hover { color: #fff; }
    .search-icon-btn {
        background-color: #ff4081; /* Hot Pink button */
        color: #fff;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        font-size: 1.1em;
        cursor: pointer;
        border: 1px solid #ff4081;
        transition: background-color 0.3s, box-shadow 0.3s, transform 0.2s;
    }
    .search-icon-btn:hover {
        background-color: #e53975;
        box-shadow: 0 0 10px #ff4081;
        transform: scale(1.05);
    }

    .category-tabs { display: flex; justify-content: space-around; padding: 10px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; background-color: #1e1e2d;}
    .category-tabs::-webkit-scrollbar { display: none; }
    .category-tabs a { color: #ccc; text-decoration: none; padding: 5px 15px; white-space: nowrap; font-size: 0.9em; position: relative; transition: color 0.3s ease, transform 0.2s; }
    .category-tabs a:hover { color: #00e5ff; transform: translateY(-2px); }
    .category-tabs a.active { font-weight: bold; color: #00e5ff; } /* Cyan active */
    .category-tabs a.active::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px; /* Wider indicator */
        height: 3px; /* Thicker indicator */
        background-color: #ff4081; /* Hot Pink indicator */
        border-radius: 2px;
        box-shadow: 0 0 5px #ff4081;
        animation: underlineGlow 1s infinite alternate;
    }
    @keyframes underlineGlow {
        from { opacity: 0.7; }
        to { opacity: 1.0; }
    }

    /* Custom style for the download app button - Neon CTA */
    .download-app-button {
        display: block;
        width: calc(100% - 20px);
        padding: 18px 20px;
        margin: 15px auto;
        background: linear-gradient(90deg, #00e5ff, #00b0ff); /* Cyan/Blue gradient */
        color: #12121e; /* Dark text for contrast */
        text-align: center;
        text-decoration: none;
        border-radius: 10px;
        font-size: 1.2em;
        font-weight: 900; /* Extra bold */
        box-shadow: 0 4px 15px rgba(0, 229, 255, 0.5); /* Stronger glow */
        transition: all 0.3s ease, transform 0.2s ease;
        cursor: pointer;
        box-sizing: border-box;
        border: 2px solid #00e5ff;
    }

    .download-app-button:hover {
        background: linear-gradient(90deg, #00b0ff, #00e5ff);
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 6px 20px rgba(0, 229, 255, 0.8);
    }

    /* --- EDITED: FEATURED PRODUCT SLIDER STYLES --- */
    .featured-slider-section {
        margin: 10px 0;
        padding: 15px 0;
        position: relative;
        background-color: #1e1e2d;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }
    .featured-slider-section .section-header {
      padding: 0 15px 10px;
    }
    .featured-slider-section .section-header h3 {
        color: #f0f0f0;
        font-size: 1.3em;
    }
    .featured-slider-section .section-header h3 i {
        color: #ffe000; /* Bright yellow */
        margin-right: 8px;
    }
    .featured-slider-viewport {
        overflow: hidden;
        margin: 0 15px;
    }
    .featured-slider-container {
        display: flex;
        gap: 15px;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition curve */
    }
    .featured-slide {
        min-width: 85%; /* Slightly larger width */
        max-width: 85%;
        flex-shrink: 0;
        background: #1e1e2d;
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        border: 1px solid #3a3a5a;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        position: relative;
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .featured-slide:hover {
        transform: translateY(-8px); /* Deeper lift */
        box-shadow: 0 8px 25px rgba(0,0,0,0.5), 0 0 10px #00e5ff80; /* Neon hover glow */
    }
    .featured-tag {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #ff4081; /* Hot Pink tag */
        color: white;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 0.8em;
        font-weight: bold;
        z-index: 2;
        box-shadow: 0 0 5px #ff4081;
    }
    .featured-slide img {
        width: 100%;
        height: 120px; /* Taller image */
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }
    .featured-slide:hover img {
        transform: scale(1.03); /* Subtle image zoom on hover */
    }
    .featured-slide-info {
        padding: 15px;
    }
    .featured-slide-info h4 {
        margin: 0 0 10px 0;
        font-size: 1.1em;
        color: #00e5ff; /* Cyan title */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .featured-slide-info .price {
        font-size: 1em;
        color: #ccc;
    }
    .featured-slide-info .price .current-price {
        font-weight: bold;
        color: #ff4081; /* Hot Pink accent for price */
        font-size: 1.3em;
        text-shadow: 0 0 3px #ff408150;
    }
    .featured-slide-info .price .original-price {
        text-decoration: line-through;
        margin-left: 8px;
        color: #777;
    }
    .slider-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: #ff4081; /* Hot Pink background */
        color: #ffffff;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        font-size: 1.1em;
        cursor: pointer;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.5);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }
    .slider-arrow:hover:not(:disabled) {
        background-color: #e53975;
        box-shadow: 0 0 15px #ff4081;
    }
    .slider-arrow.prev { left: 5px; }
    .slider-arrow.next { right: 5px; }
    .slider-arrow:disabled {
        background-color: #333;
        opacity: 0.7;
        cursor: not-allowed;
        box-shadow: none;
    }
    @media (min-width: 600px) {
        .featured-slide {
            min-width: 40%;
            max-width: 40%;
        }
    }
    @media (min-width: 900px) {
        .featured-slide {
            min-width: 25%;
            max-width: 25%;
        }
    }

    /* --- EDITED: BONUS BANNER STYLES - High-Impact Pink Gradient --- */
    .bonus-banner-section {
        margin: 10px 0;
        padding: 15px 10px;
    }
    .bonus-banner-content {
        background: linear-gradient(135deg, #ff4081 0%, #e53975 100%); /* Hot Pink gradient */
        border-radius: 15px; /* Larger radius */
        padding: 25px;
        text-align: center;
        color: #fff;
        box-shadow: 0 6px 20px rgba(255, 64, 129, 0.4);
        border: 2px solid #ff99c2;
        transition: transform 0.3s ease;
    }
    .bonus-banner-content:hover {
        transform: scale(1.02);
    }
    .bonus-banner-content .fa-gift {
        font-size: 3em;
        color: #ffe000; /* Bright yellow gift icon */
        margin-bottom: 15px;
        animation: pulseGift 2s infinite ease-in-out;
    }
    @keyframes pulseGift {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); text-shadow: 0 0 10px #ffe000; }
        100% { transform: scale(1); }
    }

    .bonus-banner-content h2 {
        margin: 0;
        font-size: 1.8em;
        font-weight: 900;
        color: #fff;
        text-shadow: 0 0 5px rgba(0,0,0,0.5);
    }
    .bonus-banner-content .bonus-main-text {
        font-size: 1.2em;
        margin: 10px 0;
        color: #f0f0f0;
    }
    .bonus-banner-content .bonus-amount {
        font-weight: extra-bold;
        color: #00e5ff; /* Cyan for bonus amount */
        font-size: 1.4em;
        text-shadow: 0 0 8px #00e5ff;
    }
    .bonus-banner-content .bonus-sub-text {
        font-size: 0.9em;
        margin: 6px 0 20px 0;
        opacity: 0.9;
    }
    #bonus-banner-cta-btn {
        background-color: #00e5ff; /* Cyan button */
        color: #12121e; /* Dark text */
        border: none;
        border-radius: 25px;
        padding: 12px 35px;
        font-size: 1.1em;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    }
    #bonus-banner-cta-btn:hover {
        background-color: #fff;
        color: #e53975;
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 229, 255, 0.5), 0 0 20px #fff;
    }


    .winner-announcement-section, .deals-section, .temu-tcs-banner, .main-categories-nav {
        transition: opacity 0.3s ease-out, max-height 0.3s ease-out;
    }

    .deals-section { padding: 10px 0; background-color: #1e1e2d; margin-top: 10px; display: block; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
    .section-header { display: flex; justify-content: space-between; align-items: center; padding: 0 15px 10px; }
    .section-header h3 { font-size: 1.3em; color: #f0f0f0; }
    .section-header h3 i { color: #ff4081; margin-right: 8px; }
    .section-header a { color: #00e5ff; text-decoration: none; font-size: 0.9em; font-weight: 600; transition: color 0.2s; }
    .section-header a:hover { color: #fff; }
    .product-scroll-container { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 15px; gap: 12px; scrollbar-width: none; min-height: 200px; }
    .product-scroll-container::-webkit-scrollbar { display: none; }
    .product-card-lightning {
        min-width: 140px;
        max-width: 140px;
        background-color: #1e1e2d;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
        overflow: hidden;
        text-align: center;
        padding-bottom: 10px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        border: 1px solid #3a3a5a;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .product-card-lightning:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.6), 0 0 8px #ff408180;
    }
    .product-card-lightning img { width: 100%; height: 130px; object-fit: cover; border-top-left-radius: 8px; border-top-right-radius: 8px; margin-bottom: 6px; }
    .product-card-lightning .only-left {
        position: absolute;
        top: 5px; right: 5px;
        background-color: #ff4081;
        color: white;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 0.7em;
        font-weight: bold;
        white-space: nowrap;
        box-shadow: 0 0 5px #ff4081;
    }
    .product-card-lightning .info-bottom { padding: 0 6px; }
    .product-card-lightning .price { font-size: 1.1em; font-weight: bold; color: #00e5ff; margin-bottom: 4px; text-shadow: 0 0 3px #00e5ff50; }
    .product-card-lightning .sold-count { font-size: 0.8em; color: #aaa; margin-bottom: 4px; }

    .temu-tcs-banner { background-color: #1e1e2d; color: #f0f0f0; padding: 12px 15px; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9em; border-radius: 8px; border: 1px solid #00e5ff50; box-shadow: 0 0 5px #00e5ff20; transition: transform 0.3s ease;}
    .temu-tcs-banner:hover { transform: scale(1.01); }
    .temu-tcs-banner .logo-text { display: flex; align-items: center; font-weight: bold; color: #ff4081;}
    .temu-tcs-banner .logo-text span { margin: 0 4px; color: #f0f0f0;}
    .temu-tcs-banner i { margin-right: 4px; color: #00e5ff;}

    .main-categories-nav { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; background-color: #1e1e2d; margin-top: 10px; padding: 10px 15px; border-bottom: 1px solid #3a3a5a; gap: 20px; scrollbar-width: none; border-radius: 10px 10px 0 0; box-shadow: 0 2px 8px rgba(0,0,0,0.4);}
    .main-categories-nav::-webkit-scrollbar { display: none; }
    .main-categories-nav .category-filter-item { text-decoration: none; color: #ccc; white-space: nowrap; display: flex; align-items: center; font-size: 0.9em; font-weight: 600; padding: 4px 0; position: relative; transition: color 0.3s, transform 0.2s; }
    .main-categories-nav .category-filter-item i { margin-right: 8px; color: #ff4081; }
    .main-categories-nav .category-filter-item:hover { color: #00e5ff; transform: translateY(-2px); }
    .main-categories-nav .category-filter-item.active { color: #00e5ff; }
    .main-categories-nav .category-filter-item.active::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%; /* Full width indicator */
        height: 2px;
        background-color: #ff4081;
        border-radius: 1px;
        box-shadow: 0 0 5px #ff4081;
    }

    .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; padding: 10px 15px 80px; background-color: #12121e; min-height: 250px; }
    .grid-product-card {
        background-color: #1e1e2d;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 8px rgba(0,0,0,0.4);
        display: flex;
        flex-direction: column;
        cursor: pointer;
        border: 1px solid #3a3a5a;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .grid-product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.6), 0 0 10px #00e5ff50;
    }
    .grid-product-card img { width: 100%; height: 160px; object-fit: cover; transition: transform 0.3s ease; }
    .grid-product-card:hover img { transform: scale(1.05); }
    .grid-product-card .info { padding: 10px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
    .grid-product-card .info .name { font-size: 0.9em; margin-bottom: 6px; height: 38px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #f0f0f0; }
    .grid-product-card .info .price { font-weight: bold; color: #ff4081; font-size: 1.1em; margin-top: auto; text-shadow: 0 0 3px #ff408150;}
    /* NEW: Star rating in grid card */
    .grid-product-card .info .rating {
        font-size: 0.85em;
        color: #ffe000; /* Bright Yellow Star color */
        margin-top: 4px;
        display: flex;
        align-items: center;
        gap: 3px;
        text-shadow: 0 0 3px #ffe00050;
    }
    .grid-product-card .info .rating span {
        color: #ccc;
        font-weight: 500;
    }


    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #1e1e2d; /* Secondary dark color */
        display: flex;
        justify-content: space-around;
        padding: 8px 0;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.5), 0 0 8px #00e5ff40;
        z-index: 1000;
        border-top: 1px solid #00e5ff30;
    }
    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #aaa;
        font-size: 0.75em;
        position: relative;
        cursor: pointer;
        flex: 1;
        text-align: center;
        transition: color 0.3s ease, transform 0.2s ease;
    }
    .nav-item:hover {
        color: #00e5ff;
        transform: translateY(-2px);
    }
    .nav-item i { font-size: 1.5em; margin-bottom: 2px; }
    .nav-item.active {
        color: #ff4081; /* Hot Pink active icon */
        font-weight: bold;
        text-shadow: 0 0 5px #ff4081;
    }
    .nav-item.active i {
        animation: pulseIcon 1.5s infinite alternate; /* Pulse active icon */
    }
    @keyframes pulseIcon {
        from { transform: scale(1); opacity: 0.9; }
        to { transform: scale(1.05); opacity: 1; }
    }
    .nav-item .notification-badge {
        position: absolute;
        top: -5px;
        right: 50%;
        margin-right: -25px;
        background-color: #ffe000; /* Yellow badge */
        color: #12121e;
        font-size: 0.6em;
        padding: 2px 5px;
        border-radius: 50%;
        line-height: 1;
        transform: translateX(50%) scale(1.1);
        display: none;
        font-weight: bold;
        box-shadow: 0 0 5px #ffe000;
        animation: neonFlicker 1s infinite alternate;
    }
    @keyframes neonFlicker {
        0% { opacity: 1; }
        50% { opacity: 0.8; }
        100% { opacity: 1; }
    }

    /* START: Product Detail View Styles - Dark/Light Contrast */
    #product-detail-view {
        background-color: #f8f8f8; /* Light background for detail page (kept for contrast) */
        color: #333; /* Darker text for readability */
        padding: 0;
        padding-bottom: 80px;
        animation: fadeIn 0.4s ease-out;
    }

    .image-style-header {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        background-color: #fff;
        box-shadow: 0 1px 5px rgba(0,0,0,0.2);
        position: sticky;
        top: 0;
        z-index: 1005;
        color: #333;
    }
    .image-style-header .fa-arrow-left { font-size: 1.4em; cursor: pointer; margin-right: 15px; color: #ff4081;}
    .image-style-header .product-title-header { font-weight: bold; font-size: 1.1em; }
    .image-style-header .fa-shopping-bag { margin-left: auto; font-size: 1.4em; cursor: pointer; color: #00e5ff; }

    .product-image-slider {
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    #detail-product-image-container {
        display: flex;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Material design curve */
        min-height: 300px; /* Slightly taller */
        background-color: #eee;
    }
    .product-image-slider .slider-image {
        min-width: 100%;
        width: 100%;
        height: auto;
        max-height: 300px;
        object-fit: cover;
        display: block;
    }
    /* NEW: Slider Navigation Buttons */
    .slider-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: #1e1e2d; /* Dark background for controls */
        color: #00e5ff;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        font-size: 1.2em;
        cursor: pointer;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 5px rgba(0, 229, 255, 0.5);
        transition: background-color 0.3s, transform 0.2s;
    }
    .slider-nav:hover {
        background-color: #00e5ff;
        color: #12121e;
        transform: translateY(-50%) scale(1.1);
    }
    .slider-nav.prev { left: 10px; }
    .slider-nav.next { right: 10px; }

    .slider-dots {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
    }
    .slider-dots .dot {
        width: 10px;
        height: 10px;
        background-color: rgba(0,0,0,0.3);
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.2s;
    }
    .slider-dots .dot.active {
        background-color: #ff4081; /* Hot Pink active dot */
        border: 1px solid #fff;
        transform: scale(1.2);
    }
    .product-content-wrapper {
        padding: 15px;
    }
    .top-info-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    .free-delivery-tag {
        background-color: #00e5ff; /* Cyan delivery tag */
        color: #12121e;
        font-size: 0.8em;
        font-weight: 900;
        padding: 5px 10px;
        border-radius: 5px;
        box-shadow: 0 0 8px #00e5ff40;
    }
    .actions-right {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .action-icon {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 1em;
        color: #555;
        cursor: pointer;
        transition: color 0.3s;
    }
    .action-icon:hover { color: #333; }
    .action-icon i { font-size: 1.3em; }
    .action-icon .fa-heart.active { color: #ff4081; animation: heartBeat 1s infinite; } /* Hot Pink liked state with pulse */
    @keyframes heartBeat {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

    .main-price-display {
        font-size: 1.1em;
        font-weight: bold;
        color: #222;
        margin-bottom: 15px;
        line-height: 1.2;
    }

    .discount-banner {
        background-color: #fff0f5; /* Very light pink */
        border: 1px solid #ff408150;
        border-radius: 8px;
        padding: 12px 15px;
        display: flex;
        align-items: center;
        font-size: 0.9em;
        color: #ff4081; /* Hot Pink text */
        margin-bottom: 20px;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(255, 64, 129, 0.2);
        transition: background-color 0.2s;
    }
    .discount-banner:hover { background-color: #ffe8ee; }
    .discount-banner .discount-icon-img {
      width: 20px; height: 20px; margin-right: 10px;
    }
    .discount-banner span { flex-grow: 1; font-weight: 600; }
    .discount-banner .fa-chevron-right { margin-left: auto; color: #ff4081;}

    .product-title-main {
        font-size: 1.5em; /* Larger title */
        font-weight: 700;
        color: #12121e;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .meta-info {
        display: flex;
        align-items: center;
        font-size: 0.95em;
        color: #555;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 15px;
    }
    .star-rating {
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
    }
    .star-rating .fa-star { color: #ffe000; }
    .star-rating #detail-rating-value { font-weight: bold; }

    #interactive-star-rater {
        display: none;
        margin-left: 10px;
        align-items: center;
    }
    #interactive-star-rater .interactive-star {
        color: #ffe000;
        font-size: 1.3em;
        margin-right: 4px;
        cursor: pointer;
        transition: transform 0.2s;
    }
    #interactive-star-rater .interactive-star:hover {
        transform: scale(1.2);
    }
    #interactive-star-rater .interactive-star.fas {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
    }
    #interactive-star-rater .interactive-star.far {
        font-family: "Font Awesome 6 Free";
        font-weight: 400;
    }
    #user-selected-rating-display {
        font-size: 0.9em;
        color: #333;
        margin-left: 8px;
    }

    /* Product Size Display in meta-info */
    .product-size { margin-left: auto; }

    /* Product Sizes Container and Buttons */
    .product-sizes-container {
        margin-top: 5px;
        margin-bottom: 20px;
    }
    .product-sizes-container .size-label {
        font-weight: 600;
        color: #12121e;
        margin-bottom: 10px;
        font-size: 1em;
        display: block;
    }
    .size-options-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .size-option-btn {
        padding: 8px 16px;
        border: 2px solid #ddd;
        background-color: #fff;
        color: #444;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.95em;
        font-weight: 500;
        transition: all 0.2s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .size-option-btn:hover {
        background-color: #f0f0f0;
        border-color: #00e5ff;
        color: #00e5ff;
    }
    .size-option-btn.selected {
        background-color: #00e5ff; /* Cyan selected */
        color: #12121e;
        border-color: #00e5ff;
        font-weight: bold;
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
        transform: scale(1.05);
    }
     .manual-size-input-container {
        margin-top: 15px;
        margin-bottom: 20px;
    }
    .manual-size-input-container label {
        font-weight: 600;
        color: #12121e;
        font-size: 0.95em;
        display: block;
        margin-bottom: 8px;
    }
    #manual-size-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 1em;
        color: #333;
    }
    #manual-size-input::placeholder {
        color: #aaa;
    }

    /* NEW: Product Colors Container and Buttons - Hot Pink Accent */
    .product-colors-container {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .product-colors-container .color-label {
        font-weight: 600;
        color: #12121e;
        margin-bottom: 10px;
        font-size: 1em;
        display: block;
    }
    .color-options-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .color-option-btn {
        padding: 8px 16px;
        border: 2px solid #ddd;
        background-color: #fff;
        color: #444;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.95em;
        font-weight: 500;
        transition: all 0.2s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .color-option-btn:hover {
        background-color: #f0f0f0;
        border-color: #ff4081;
        color: #ff4081;
    }
    .color-option-btn.selected {
        background-color: #ff4081; /* Hot Pink selected color */
        color: white;
        border-color: #ff4081;
        font-weight: bold;
        box-shadow: 0 0 10px rgba(255, 64, 129, 0.5);
        transform: scale(1.05);
    }
    /* END NEW color styles */


    .product-accordions-section {
        margin-bottom: 25px;
        border-top: 1px solid #eee;
    }
    .accordion-item-detail {
        border-bottom: 1px solid #eee;
    }
    .accordion-header-detail {
        padding: 15px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-weight: 600;
        color: #12121e;
        transition: color 0.3s;
    }
    .accordion-header-detail:hover { color: #00e5ff; }
    .accordion-header-detail .icon-prefix { margin-right: 10px; color: #ff4081; }
    .accordion-content-detail {
        padding: 0px 0px 15px 0px;
        font-size: 0.95em;
        color: #555;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
        line-height: 1.6;
    }
    .accordion-content-detail p { margin-bottom: 10px; }
    .accordion-content-detail p:last-child { margin-bottom: 0; }
    .accordion-content-detail a { color: #00e5ff; text-decoration: none; font-weight: 600; }
    .accordion-header-detail .toggle-icon { transition: transform 0.3s ease; }
    .accordion-item-detail.open .accordion-header-detail .toggle-icon { transform: rotate(180deg); color: #00e5ff; }

    /* Custom style for clickable category */
    .clickable-category {
        cursor: pointer;
        color: #00e5ff;
        text-decoration: underline;
        font-weight: bold;
        transition: color 0.2s;
    }
    .clickable-category:hover { color: #12121e; }


    .detail-bottom-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        padding: 12px 15px;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.2);
        z-index: 1005;
    }
    /* Seller Initials Style */
    .seller-initials {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        background-color: #1e1e2d;
        border: 2px solid #00e5ff;
        color: #00e5ff;
        border-radius: 50%;
        font-weight: bold;
        font-size: 1.2em;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 0 8px #00e5ff30;
    }
    .seller-initials:hover {
        background-color: #00e5ff;
        color: #12121e;
        transform: scale(1.05);
    }

    .detail-bottom-actions .action-btn {
        flex-grow: 1;
        padding: 15px 10px;
        border: none;
        border-radius: 30px; /* Fully rounded buttons */
        font-size: 1em;
        font-weight: 800;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .detail-bottom-actions .action-btn:hover:not(:disabled) {
        transform: translateY(-2px);
    }
    .detail-bottom-actions .add-to-cart-btn-detail {
        background-color: #ff9900; /* Orange CTA */
        color: white;
    }
    .detail-bottom-actions .add-to-cart-btn-detail:hover:not(:disabled) {
        background-color: #e68a00;
        box-shadow: 0 4px 10px rgba(255, 153, 0, 0.4);
    }
    .detail-bottom-actions .whatsapp-contact-btn {
        background-color: #ff4081; /* Hot Pink WhatsApp button */
        color: white;
    }
    .detail-bottom-actions .whatsapp-contact-btn:hover:not(:disabled) {
        background-color: #e53975;
        box-shadow: 0 4px 10px rgba(255, 64, 129, 0.4);
    }
    .detail-bottom-actions .place-order-btn {
        background-color: #00e5ff; /* Cyan Place Order CTA */
        color: #12121e;
        border: 1px solid #00e5ff;
    }
    .detail-bottom-actions .place-order-btn:hover:not(:disabled) {
        background-color: #fff;
        color: #00e5ff;
        box-shadow: 0 4px 10px rgba(0, 229, 255, 0.4);
    }
    .detail-bottom-actions .add-to-cart-btn-detail:disabled,
    .detail-bottom-actions .whatsapp-contact-btn:disabled,
    .detail-bottom-actions .place-order-btn:disabled {
        background-color: #444;
        color: #999;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

    /* Common View Styles - Dark Theme Refinement */
    #order-form-view, #account-view, #deposit-view, #my-orders-view, #my-products-view, #edit-product-view, #seller-application-view, #seller-products-view, #order-detail-user-view, #privacy-policy-view, #about-us-view, #withdrawal-view, #refund-policy-view, #withdrawal-policy-view {
        padding: 0; max-width: 500px; margin: 0 auto; background-color: #12121e; border-radius: 0; box-shadow: none; color: #f0f0f0;
    }
    #order-form-view .detail-header, #account-view .detail-header, #deposit-view .detail-header, #my-orders-view .detail-header, #my-products-view .detail-header, #edit-product-view .detail-header, #seller-application-view .detail-header, #seller-products-view .detail-header, #order-detail-user-view .detail-header, #privacy-policy-view .detail-header, #about-us-view .detail-header, #withdrawal-view .detail-header, #refund-policy-view .detail-header, #withdrawal-policy-view .detail-header {
        padding: 15px 15px;
        border-bottom: 1px solid #3a3a5a;
        margin-bottom: 0;
        background-color: #1e1e2d;
        color: #00e5ff; /* Cyan Header title */
        display: flex;
        align-items: center;
        box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    }
    #seller-products-view .detail-header span {
        flex-grow: 1;
        text-align: center;
        margin: 0 10px;
    }
     #product-detail-view .detail-header {
        background-color: #fff;
        color: #333;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 10px 15px;
        margin-bottom: 0;
    }
    .home-button-in-header {
        margin-left: auto;
        background-color: #ff4081; /* Hot Pink Home button */
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.9em;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: background-color 0.2s;
    }
    .home-button-in-header:hover {
        background-color: #e53975;
    }


    .content-padding,
    #order-form-view .content-padding, #account-view #account-content, #deposit-view #deposit-content, #my-orders-view #my-orders-content, #my-products-view .content-padding, #edit-product-view .content-padding, #seller-application-view .content-padding, #seller-products-view .content-padding, #order-detail-user-view .content-padding, #withdrawal-view #withdrawal-content, #refund-policy-view .content-padding, #withdrawal-policy-view .content-padding {
        padding: 15px;
    }
    .card {
        background-color: #1e1e2d;
        border-radius: 8px;
        box-shadow: 0 1px 10px rgba(0,0,0,0.5);
        margin-bottom: 20px;
        padding: 20px;
        color: #f0f0f0;
        border: 1px solid #3a3a5a;
        transition: box-shadow 0.3s ease;
    }
    .card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 5px #00e5ff50; }
    .card-header {
        font-size: 1.3em;
        font-weight: 700;
        color: #00e5ff; /* Cyan Card Header */
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #3a3a5a;
        display: flex;
        align-items: center;
    }
    .card-header i {
        margin-right: 10px;
        color: #ff4081; /* Hot Pink Icon */
    }

    #order-form-view h1, #account-view #account-view-title, #deposit-view h2, #my-orders-view h2, #my-products-view h2, #edit-product-view h2, #seller-application-view h2, #order-detail-user-view h2, #privacy-policy-view h2, #about-us-view h2, #withdrawal-view h2, #refund-policy-view h2, #withdrawal-policy-view h2 { text-align: center; color: #00e5ff; margin-bottom: 25px; }
    #deposit-view #deposit-content h3, #withdrawal-view #withdrawal-content h3, #refund-policy-view .content-padding h3, #withdrawal-policy-view .content-padding h3 { text-align: center; color: #ff4081; margin-top: 20px; margin-bottom: 15px; font-size: 1.4em; }
    #order-form-view h1 { font-size: 1.6em; }
    #account-view #account-view-title, #my-orders-view h2, #my-products-view h2, #edit-product-view h2, #seller-application-view h2, #order-detail-user-view h2, #privacy-policy-view h2, #about-us-view h2, #withdrawal-view h2, #refund-policy-view h2, #withdrawal-policy-view h2 { font-size: 1.5em; }
    #deposit-view h2, #withdrawal-view h2, #refund-policy-view h2, #withdrawal-policy-view h2 { font-size: 1.6em; }
     #privacy-policy-view .content-padding h3,
    #about-us-view .content-padding h3,
    #refund-policy-view .content-padding h3,
    #withdrawal-policy-view .content-padding h3 {
        text-align: left;
        font-size: 1.2em;
        color: #00e5ff;
        margin-top: 1.5em;
        margin-bottom: 0.5em;
    }

    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #ccc; font-size: 1em; }
    .form-group input, .form-group textarea, .form-group select {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #3a3a5a;
        border-radius: 8px;
        font-size: 1em;
        background-color: #1e1e2d;
        color: #f0f0f0;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
        transition: border-color 0.3s;
    }
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
        border-color: #00e5ff;
        outline: none;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 5px #00e5ff50;
    }
    .form-group input:read-only { background-color: #3a3a5a; cursor: not-allowed; color: #aaa;}
    /* MODIFIED: Add margin-bottom for multiple image URL inputs */
    #image-url-inputs-container input, #edit-image-url-inputs-container input {
        margin-bottom: 8px;
    }
    #image-url-inputs-container input:last-child, #edit-image-url-inputs-container input:last-child {
        margin-bottom: 0;
    }

    .message { margin-top: 15px; text-align: center; font-weight: bold; padding: 10px; border-radius: 6px; display:none; font-size: 1em; animation: fadeIn 0.3s ease-out; }
    .message.success { background-color: #1e3a24; color: #70ff70; border: 1px solid #3d7d3d;}
    .message.error { background-color: #3a1e1e; color: #ff7070; border: 1px solid #7d3d3d;}
    .message.warning { background-color: #3a3a1e; color: #ffff70; border: 1px solid #7d7d3d;}

    #order-form-view .order-summary { background-color: #1e1e2d; border: 1px solid #3a3a5a; padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 8px rgba(0,0,0,0.4); }
    #order-form-view .order-summary p { margin-bottom: 6px; font-size: 0.95em; color: #f0f0f0; }
    #order-form-view .order-summary .total-price { font-weight: bold; color: #ff4081; font-size: 1.1em; text-shadow: 0 0 3px #ff408150; }
    .place-order-button, .submit-request-button, .action-button {
        width: 100%;
        padding: 12px 15px;
        color: #12121e;
        border: none;
        border-radius: 8px;
        font-size: 1.1em;
        font-weight: 800;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 10px;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    }
    .action-button i { margin-right: 8px; }

    .place-order-button, .submit-request-button { background-color: #00e5ff; color: #12121e; box-shadow: 0 0 10px #00e5ff50;}
    .place-order-button:hover, .submit-request-button:hover { background-color: #fff; transform: translateY(-2px); box-shadow: 0 4px 15px #00e5ff50;}
    .place-order-button:disabled, .submit-request-button:disabled { background-color: #3a3a5a !important; cursor: not-allowed; transform: none !important; color: #999 !important; box-shadow: none !important;}

    #account-view .action-button { margin-bottom: 10px; color: white; }
    #account-view #logout-button { background-color: #ff4081; }
    #account-view #logout-button:hover { background-color: #e53975; box-shadow: 0 4px 10px #ff408140;}
    #account-view #admin-panel-access-btn { background-color: #ffe000; color: #12121e; }
    #account-view #admin-panel-access-btn:hover { background-color: #e6c800; box-shadow: 0 4px 10px #ffe00040;}
    #account-view #withdraw-funds-btn { background-color: #00e5ff; color: #12121e; }
    #account-view #withdraw-funds-btn:hover { background-color: #00b0ff; box-shadow: 0 4px 10px #00e5ff40;}
    #account-view #daily-claim-button { background-color: #28a745; color: white; }
    #account-view #daily-claim-button:hover { background-color: #218838; box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4);}
    #account-view #daily-claim-button:disabled { background-color: #3a3a5a !important; color: #999 !important; border: 1px solid #666; cursor: not-allowed; box-shadow: none !important;}
    #daily-claim-status { font-size: 0.9em; color: #aaa; margin-top: 6px; text-align: center; }

    #user-info-section p { font-size: 1.1em; color: #f0f0f0; margin-bottom: 10px; text-align: center; }
    #user-info-section span { font-weight: bold; color: #ff4081; }
    #display-user-wallet { color: #00e5ff; font-weight: bold; text-shadow: 0 0 5px #00e5ff50;} /* Total balance - Cyan Accent */
    #display-user-deposit-balance { color: #28a745; font-weight: bold;} /* Deposit Green */
    #display-user-bonus-balance { color: #ffe000; font-weight: bold;} /* Bonus Yellow */

    #seller-status-display {
        font-size: 1em;
        text-align: center;
        margin: -5px 0 15px 0;
        padding: 8px;
        border-radius: 6px;
        font-weight: 600;
        border: 1px dashed #ff4081;
        background-color: #1e1e2d;
    }


    #deposit-view .deposit-method { background-color: #1e1e2d; border: 1px solid #3a3a5a; border-radius: 8px; padding: 15px; margin-bottom: 20px; box-shadow: 0 1px 8px rgba(0,0,0,0.4); }
    #deposit-view .deposit-method h3 { color: #00e5ff; font-size: 1.3em; margin-bottom: 10px; border-bottom: 1px dashed #3a3a5a; padding-bottom: 8px; text-align: left; }
    #deposit-view .deposit-method p { font-size: 1em; color: #ccc; margin-bottom: 6px; line-height: 1.6; }
    #deposit-view .deposit-method p strong { color: #ff4081; }
    #deposit-view hr, #withdrawal-view hr, #refund-policy-view hr, #withdrawal-policy-view hr { border: 0; height: 1px; background-color: #3a3a5a; margin: 30px 0; }
    #user-deposit-requests-list .order-list-item,
    #user-withdrawal-requests-list .order-list-item { margin-top: 10px; border-left-width: 5px !important; border-left-style: solid !important; }

    .order-list-item { background-color: #1e1e2d; border: 1px solid #3a3a5a; border-radius: 8px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.4); color: #f0f0f0; transition: transform 0.2s;}
    .order-list-item:hover { transform: translateY(-2px); }
    .order-list-item p { margin: 5px 0; font-size: 0.95em; color: #ccc; }
    .order-list-item p strong { color: #fff; }
    /* Style for seller's order items list */
    .order-list-item ul {
        list-style-type: none;
        padding-left: 18px;
        margin: 8px 0;
    }
    .order-list-item ul li {
        font-size: 0.9em;
        color: #aaa;
    }

    .order-status { font-weight: bold; padding: 4px 10px; border-radius: 15px; font-size: 0.85em; color: #12121e; display: inline-block; text-transform: uppercase; }
    .order-status.pending { background-color: #ffe000; color: #12121e; }
    .order-status.approved { background-color: #28a745; color: white; }
    .order-status.shipped { background-color: #00e5ff; color: #12121e; }
    .order-status.delivered { background-color: #ff4081; color: white; }
    .order-status.cancelled, .order-status.rejected { background-color: #dc3545; color: white; }

    .view-order-details-btn { background-color: #ff4081; color: white; border:none; padding: 8px 12px; border-radius: 6px; font-size: 0.9em; cursor: pointer; margin-top:10px; transition: background-color 0.2s, transform 0.2s; }
    .view-order-details-btn:hover { background-color: #e53975; transform: scale(1.05); }

    #order-detail-user-view .order-item-card { display: flex; align-items: center; border-bottom: 1px solid #3a3a5a; padding: 10px 0; }
    #order-detail-user-view .order-item-card:last-child { border-bottom: none; }
    #order-detail-user-view .order-item-card img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; margin-right: 15px; }
    #order-detail-user-view .order-item-card .info { flex-grow: 1; }
    #order-detail-user-view .order-item-card .info .name { font-weight: bold; font-size: 1em; color: #00e5ff; }
    #order-detail-user-view .order-item-card .info .qty-price { font-size: 0.9em; color: #ccc; }

    #embedded-cart-section { display: none; background-color: #1e1e2d; margin: 15px 15px; padding: 15px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border: 2px solid #00e5ff50; }
    #embedded-cart-section .cart-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #3a3a5a; font-size: 1.4em; color: #ff4081; font-weight: bold; }
    #embedded-cart-section .cart-header .close-cart-embedded { cursor: pointer; font-size: 1.1em; color: #00e5ff; transition: color 0.2s; }
    #embedded-cart-section .cart-header .close-cart-embedded:hover { color: #fff; }
    #embedded-cart-section .cart-items { max-height: 40vh; overflow-y: auto; margin-bottom: 15px; padding-right: 5px; }
    .cart-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #3a3a5a; font-size: 1em; color: #f0f0f0; }
    .cart-item:last-child { border-bottom: none; }
    .cart-item img { width: 50px; height: 50px; object-fit: cover; margin-right: 10px; border-radius: 4px; }
    .cart-item-details { flex-grow: 1; }
    .cart-item-details .name { font-weight: bold; margin-bottom: 3px; word-break: break-word; color: #00e5ff;}
    .cart-item-details .price { font-size: 0.95em; color: #ccc; margin-bottom: 5px; }
    .cart-item-controls { display: flex; align-items: center; margin-top: 5px; }
    .cart-item-controls button { padding: 4px 8px; margin: 0 4px; border: 1px solid #3a3a5a; background: #3a3a5a; color: #f0f0f0; cursor: pointer; font-size: 0.9em; min-width: 25px; line-height: 1.2; border-radius: 4px; transition: background-color 0.2s; }
    .cart-item-controls button:hover { background-color: #4a4a6a; }
    .cart-item-controls input.item-quantity-input { width: 40px; text-align: center; border: 1px solid #3a3a5a; padding: 4px; font-size: 0.9em; -moz-appearance: textfield; background-color: #12121e; color: #f0f0f0; border-radius: 4px; }
    .cart-item-controls input[type=number]::-webkit-inner-spin-button,
    .cart-item-controls input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .cart-item-controls button.remove-item { background: none; border: none; color: #ff4081; cursor: pointer; font-size: 1.2em; padding: 0 5px; }
    #embedded-cart-section .cart-summary { margin-top: 15px; padding-top: 15px; border-top: 1px solid #3a3a5a; color: #f0f0f0; }
    .cart-summary .total-info { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 1em; font-weight: bold; }
    .cart-summary .checkout-btn { width: 100%; padding: 12px; font-size: 1.1em; border-radius: 8px; background-color: #ff4081; color: white; border: none; cursor: pointer; box-shadow: 0 0 10px #ff408150; transition: background-color 0.3s; }
    .cart-summary .checkout-btn:hover:not(:disabled) { background-color: #e53975; }
    .cart-summary .checkout-btn:disabled { background-color: #3a3a5a !important; color: #999 !important; box-shadow: none !important;}

    .winner-announcement-section { background-color: #1e1e2d; padding: 20px 15px; margin-top: 10px; border: 2px dashed #ffe000; border-radius: 10px; text-align: center; display: block; color: #f0f0f0; box-shadow: 0 0 15px #ffe00030; animation: borderGlow 2s infinite alternate;}
    @keyframes borderGlow {
        from { border-color: #ffe000; box-shadow: 0 0 15px #ffe00030; }
        to { border-color: #ff4081; box-shadow: 0 0 15px #ff408130; }
    }
    .winner-announcement-section h3 { color: #00e5ff; font-size: 1.4em; margin-bottom: 10px; }
    .winner-announcement-section h3 i { margin-right: 8px; color: #ff4081; }
    #winner-list-container .winner-item { background-color: #12121e; border: 1px solid #3a3a5a; padding: 10px; margin-bottom: 10px; border-radius: 6px; font-size: 0.95em; color: #f0f0f0; }
    #winner-list-container .winner-item strong { color: #ffe000; }

    #privacy-policy-view .content-padding p,
    #about-us-view .content-padding p,
    #refund-policy-view .content-padding p,
    #withdrawal-policy-view .content-padding p,
    #privacy-policy-view .content-padding ul,
    #about-us-view .content-padding ul,
    #refund-policy-view .content-padding ul,
    #withdrawal-policy-view .content-padding ul {
        margin-bottom: 1em;
        text-align: left;
        font-size: 1em;
        color: #ccc;
    }
     #privacy-policy-view .content-padding ul li,
     #about-us-view .content-padding ul li,
     #refund-policy-view .content-padding ul li,
     #withdrawal-policy-view .content-padding ul li {
        margin-left: 20px;
        list-style-type: disc;
        color: #ccc;
     }
    #account-view #account-content {
        padding: 0;
    }
    #account-profile-card {
        text-align: center;
        padding-top: 25px;
        padding-bottom: 25px;
        background-color: #1e1e2d;
        border: 1px solid #3a3a5a;
        border-radius: 8px;
        margin: 0 0 20px 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }
    #account-profile-card .profile-pic-placeholder {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background-color: #3a3a5a;
        border: 3px solid #00e5ff;
        margin: 0 auto 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5em;
        color: #00e5ff;
    }
    #account-profile-card #display-user-name-profile {
        font-size: 1.4em;
        font-weight: 700;
        color: #ff4081;
        margin-bottom: 6px;
    }
    #account-profile-card #display-user-email-profile {
        font-size: 1em;
        color: #bbb;
    }
     #auth-forms-section .card { margin: 15px; background-color: #1e1e2d; border: 1px solid #3a3a5a;}
     #auth-forms-section h3 { text-align: center; margin-bottom: 20px; font-size: 1.5em; color: #00e5ff; }

    /* For bonus/deposit balance display on order form */
    #order-form-wallet-balance-details { font-size: 0.9em; color: #bbb; margin-top: 5px; }
    #order-form-bonus-info { font-size: 0.9em; color: #ffe000; margin-top: 10px; display: none; padding: 8px; border-radius: 6px; background-color: #1e1e2d; border: 1px solid #ffe000; box-shadow: 0 0 5px #ffe00040;}

    .my-product-item {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 12px 0;
        border-bottom: 1px solid #3a3a5a;
    }
    .my-product-item:last-child {
        border-bottom: none;
    }
    .my-product-item img {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: 6px;
    }
    .my-product-item-info {
        flex-grow: 1;
    }
    .my-product-item-info .name {
        font-weight: bold;
        color: #00e5ff;
        font-size: 1.1em;
    }
    .my-product-item-info .price-stock {
        font-size: 0.95em;
        color: #ccc;
    }
    .my-product-item .product-actions {
        display: flex;
        gap: 10px;
    }
    .edit-product-btn, .delete-product-btn {
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.9em;
        transition: background-color 0.2s, transform 0.2s;
        font-weight: 600;
    }
    .edit-product-btn {
        background-color: #00e5ff;
        color: #12121e;
    }
    .edit-product-btn:hover {
        background-color: #00b0ff;
        transform: scale(1.05);
    }
    .delete-product-btn {
        background-color: #ff4081;
    }
    .delete-product-btn:hover {
        background-color: #e53975;
        transform: scale(1.05);
    }

    /* Admin Rating Controls */
    .admin-rating-controls {
        background-color: #1e1e2d;
        border: 1px solid #00e5ff50;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 25px;
        color: #f0f0f0;
        box-shadow: 0 0 10px #00e5ff20;
    }
    .admin-rating-controls h3 {
        color: #ff4081;
        margin-bottom: 15px;
        font-size: 1.2em;
        border-bottom: 1px solid #3a3a5a;
        padding-bottom: 8px;
    }
    .admin-rating-controls .form-group {
        margin-bottom: 10px;
    }
    .admin-rating-controls label {
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
        color: #ccc;
        font-size: 0.9em;
    }
    .admin-rating-controls input[type="number"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #3a3a5a;
        border-radius: 6px;
        font-size: 0.95em;
        background-color: #12121e;
        color: #f0f0f0;
    }
    .admin-rating-controls .message {
        margin-top: 15px;
        padding: 10px;
        border-radius: 6px;
        font-size: 0.9em;
        text-align: center;
    }
    .admin-rating-controls .message.success {
        background-color: #1e3a24;
        color: #70ff70;
        border-color: #3d7d3d;
    }
    .admin-rating-controls .message.error {
        background-color: #3a1e1e;
        color: #ff7070;
        border-color: #7d3d3d;
    }
    .admin-rating-controls .action-button {
        width: auto;
        padding: 10px 20px;
        font-size: 1em;
        background-color: #00e5ff;
        color: #12121e;
    }
    .admin-rating-controls .action-button:hover {
        background-color: #fff;
    }
    /* New CSS for YouTube video container */
    .youtube-video-container {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      margin-bottom: 20px;
      background-color: #000;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    }
    .youtube-video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }


    @media (max-width: 768px) {
        .content-padding,
        #order-form-view .content-padding,
        #deposit-view #deposit-content,
        #my-orders-view #my-orders-content,
        #my-products-view .content-padding,
        #edit-product-view .content-padding,
        #seller-application-view .content-padding,
        #seller-products-view .content-padding,
        #order-detail-user-view .content-padding,
        #withdrawal-view #withdrawal-content,
        #refund-policy-view .content-padding,
        #withdrawal-policy-view .content-padding {
             padding: 12px;
        }
        #account-view #account-content { padding: 10px; }
         #auth-forms-section .card { margin: 10px;}
        #product-detail-view .product-content-wrapper { padding: 15px; }
        .detail-bottom-actions { padding: 10px 15px; gap: 8px; }
        .detail-bottom-actions .action-btn { padding: 12px; font-size: 0.9em; gap: 4px; border-radius: 25px; }


        #account-view #account-view-title, #deposit-view h2, #my-orders-view h2, #my-products-view h2, #edit-product-view h2, #seller-application-view h2, #order-detail-user-view h2, #privacy-policy-view h2, #about-us-view h2, #withdrawal-view h2, #refund-policy-view h2, #withdrawal-policy-view h2 {
            font-size: 1.4em;
        }
        .order-list-item { font-size: 0.9em;}
        #embedded-cart-section { margin: 12px 10px; }
        .header-dropdown-menu { min-width: 180px; }
        .header-dropdown-menu a { padding: 12px 15px; }
        .product-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;}
        .featured-slide {
            min-width: 90%;
            max-width: 90%;
        }
    }