/* --- 📱 Mobile එකේදී Glass Dock එක හංගමු --- */
@media screen and (max-width: 768px) {
    .glass-dock-container {
        display: none !important;
    }
}

/* --- 💻 PC එකේදී විතරක් පේන්න අවශ්‍ය Styles (Optional) --- */
@media screen and (min-width: 769px) {
    .glass-dock-container {
        display: block; /* නැත්නම් ඔයා කලින් දීපු flex/block එක මෙතන තියෙන්න ඕනේ */
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3000;
    }
}




/* --- 💻 PC එකේදී (769px ට වැඩි) මුළු Main Content එකම හංගන්න --- */
@media screen and (min-width: 769px) {
    .main-container {
        display: none !important;
    }
}

/* --- 📱 Mobile එකේදී විතරක් පෙන්වන්න --- */
@media screen and (max-width: 768px) {
    .main-container {
        display: block !important;
    }
}


/* --- 💻 PC Screens (769px ට වැඩි අයට) --- */
@media screen and (min-width: 769px) {
    .glass-dock-container {
        display: block;
        position: fixed;
        
        /* මැදින් අයින් කර දකුණු පැත්තට ගනිමු */
        left: auto; 
        right: 40px; 
        bottom: 25px;
        
        /* මැදට ගන්න දාපු transform එක අයින් කරන්න */
        transform: none; 
        
        z-index: 3000;
    }

    .glass-dock {
        display: flex;
        flex-direction: column; /* PC එකේදී එක දිගට පේළියට නැතුව උඩ ඉඳන් යටට (Vertical) තියන්න පුළුවන් */
        gap: 15px;
        background: rgba(255, 255, 255, 0.7);
        padding: 15px;
        border-radius: 50px;
        box-shadow: 0 10px 30px rgba(255, 107, 129, 0.1);
        backdrop-filter: blur(10px);
    }
}

/* --- 📱 Mobile එකේදී කලින් විදියමයි --- */
@media screen and (max-width: 768px) {
    .glass-dock-container {
        display: none !important; /* Mobile එකේදී හංගන්න කලින් කිව්වා වගේ */
    }
}

/* Main Container */
.main-container {
    padding: 15px;
    background-color: #fff8f9;
    padding-bottom: 100px; /* Bottom bar එකට ඉඩ */
}

/* Hero Banner */
.hero-banner {
    background: linear-gradient(135deg, #ffeef1 0%, #fff 100%);
    border-radius: 30px;
    padding: 25px;
    display: flex;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(255, 182, 193, 0.2);
}

.hero-content { z-index: 2; width: 60%; }

.badge {
    font-size: 10px;
    color: #ff608c;
    font-weight: 700;
    letter-spacing: 1px;
}

.hero-content h2 {
    font-size: 26px;
    color: #444;
    margin: 10px 0;
}

.hero-content h2 span { color: #ff608c; font-style: italic; }

.hero-content p { font-size: 12px; color: #888; margin-bottom: 15px; }

.scan-btn {
    background: linear-gradient(45deg, #ff6b81, #ff9a9e);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 5px 15px rgba(255, 107, 129, 0.3);
}

.hero-image img {
    position: absolute;
    right: -20px;
    bottom: 0;
    height: 110%;
    z-index: 1;
}

/* Skin Stats Card */
.stat-main-card {
    background: white;
    border-radius: 25px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.score-circle {
    width: 60px;
    height: 60px;
    border: 5px solid #ffccd5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #ff608c;
    font-size: 14px;
}

.glow-details h3 { font-size: 16px; color: #444; }
.glow-details h3 span { color: #ffb1c1; margin-left: 10px; }
.glow-details p { font-size: 11px; color: #aaa; }

/* Video Scroll Section */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-header h3 { font-size: 14px; color: #555; }
.section-header a { font-size: 12px; color: #ff608c; text-decoration: none; }

.video-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.video-scroll::-webkit-scrollbar { display: none; }

.video-card {
    min-width: 140px;
    height: 180px;
    background: #eee;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

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

.v-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.4);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    backdrop-filter: blur(5px);
}

.video-card p {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-size: 11px;
    font-weight: 600;
}



@media screen and (max-width: 768px) {
    /* මුලින්ම වීඩියෝ ග්‍රිඩ් එක හංගමු */
    #mainVideoGrid {
        display: none;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    /* See All එබුවම පෙන්වන්න පාවිච්චි කරන class එක */
    #mainVideoGrid.show-grid {
        display: grid !important;
        opacity: 1;
    }
}


body, html {
    overflow-x: hidden; /* පැත්තට scroll වෙන එක නවත්වන්න */
    width: 100%;
    margin: 0;
    padding: 0;
}

.main-container {
    width: 100% !important;
    max-width: 100vw;
    margin: 0 auto;
}


/* 📱 Mobile CSS - මේක ඇතුළේ ලියන ඒවා විතරයි Phone එකට බලපාන්නේ */
@media screen and (max-width: 768px) {
    .pc-header {
        display: none !important; /* PC Header එක හංගනවා */
    }
    
    .mobile-header {
        display: flex !important; /* Mobile Header එක පෙන්වනවා */
    }

    .sidebar {
        display: none; /* Mobile එකේදී Sidebar එක ඕනේ නැහැ */
    }

    .main-container {
        margin-left: 0 !important; /* Sidebar එකට තියපු ඉඩ අයින් කරන්න */
        padding: 10px;
    }

    .card-grid {
        grid-template-columns: 1fr !important; /* පේළියට එක කාඩ් එකක් පෙන්වන්න */
    }
}