/* Theme Name: 90skick V2
Theme URI: https://90skick.com/version/
Author: Fiki Purnama
Description: Custom theme 90skick.com v2 menggunakan Bootstrap 5.3 dan fokus pada jadwal pertandingan olahraga highschool.
Version: 2.0
Text Domain: 90skick
*/

/* --- 1. Base & Typography --- */
body { font-family: 'Google Sans Flex', sans-serif; }
.ls-2 { letter-spacing: 2px; }
.z-index-1 { position: relative; z-index: 1; }
.text-white-50 { color: rgba(255, 255, 255, 0.8) !important; }

/* --- 2. Navigation & Secondary Header --- */
.secondary-header { position: sticky; top: 0; z-index: 1000; background: #fff; }
.scrolling-wrapper { display: flex; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; position: relative; }
.scrolling-wrapper::-webkit-scrollbar { display: none; }
.sticky-home { position: sticky; left: 0; z-index: 10; margin-right: 10px; box-shadow: 10px 0 15px -5px rgba(255,255,255,1); }
.dynamic-menu-items { display: flex; gap: 8px; }
.secondary-header .container::before { content: ""; position: absolute; top: 0; left: 80px; width: 30px; height: 100%; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); z-index: 5; pointer-events: none; }
.sport-menu-link { padding: 8px 16px; color: #333; text-decoration: none; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; border-radius: 50px; white-space: nowrap; }
.sport-menu-link.active { background-color: #e9ecef; color: #000; }
a.sport-menu-link.btn-home-custom { background-color: #133337 !important; color: #ffffff !important; border: none; display: flex; align-items: center; padding: 8px 20px; }
a.sport-menu-link.btn-home-custom i { color: #ffffff !important; }
a.sport-menu-link.btn-home-custom:hover { background-color: #1a454a !important; color: #ffffff !important; opacity: 0.9; }

/* --- 3. News Article Cards --- */
.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }
.transition-img { transition: transform 0.5s ease; }
.card-hover:hover .transition-img { transform: scale(1.1); }
.object-fit-cover { object-fit: cover; width: 100%; height: 100%; }
.custom-category-link a { text-decoration: none !important; color: #212529; }
.share-icon { transition: all 0.2s ease; opacity: 0.6; text-decoration: none !important; }
.share-icon:hover { opacity: 1; transform: scale(1.1); }

/* --- 4. Accordion Jadwal Main --- */
.match-card { cursor: pointer; transition: none !important; border: none !important; border-bottom: 1px solid #ececec !important; background: transparent !important; }
.match-card:hover { background-color: transparent !important; box-shadow: none !important; }
.match-card:last-child { border-bottom: none !important; }
.num-prefix { font-family: 'Courier New', monospace; font-size: 0.85rem; color: #adb5bd !important; }

/* --- 5. Inner Match Score (Inside Accordion) --- */
.card-body .match-card { border: 1px solid #f0f0f0 !important; border-radius: 12px; margin-bottom: 10px; background: #fff !important; padding: 15px; }
.match-status-col { width: 80px; border-right: 1px solid #f0f0f0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-right: 10px; }
.status-text { font-weight: 800; font-size: 1.1rem; line-height: 1; }
.match-details { display: none; background-color: #f9fbfd; border-top: 1px dashed #eee; padding: 15px; margin-top: 10px; border-radius: 8px; }
.match-card.active .match-details { display: block; animation: fadeIn 0.3s ease; }

/* --- 6. Date Scroller UI --- */
#dateScrollerWrapper { display: block; margin-top: 15px; margin-bottom: 25px; width: 100%; }
.date-scroller { display: flex; overflow-x: auto; gap: 10px; padding: 10px 0; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; position: relative; }
.date-scroller::-webkit-scrollbar { display: none; }
.date-box { flex: 0 0 auto; width: 65px; height: 75px; border: 1px solid #eee; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none; color: #333; background: #fff; transition: all 0.2s ease; }
.date-box.active { background: #212529; color: #fff; border-color: #212529; }

/* --- 7. Calendar Trigger Button --- */
.calendar-trigger-btn { background-color: #fff; color: #212529; border: 1px solid #dee2e6 !important; transition: all 0.2s ease; cursor: pointer; }
.calendar-trigger-btn.active { background-color: #212529 !important; color: #fff !important; }
.calendar-trigger-btn:focus { box-shadow: none !important; }
.current-date-display { font-size: 12px; white-space: nowrap; }
.calendar-trigger-btn:hover { border-color: #212529 !important; background-color: #f8f9fa; }
.calendar-trigger-btn.active:hover { background-color: #000 !important; }

/* --- 8. Popular Matches (Swipe Cards) --- */
.swipeable-wrapper { overflow-x: auto; display: block; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 10px; }
.swipeable-wrapper::-webkit-scrollbar { display: none; }
.match-swipe-container { display: flex; gap: 12px; padding: 5px; width: max-content; }
.swipe-card { transition: transform 0.2s, box-shadow 0.2s; border: 1px solid #f0f0f0 !important; border-radius: 16px; min-width: 280px; position: relative; background: #fff; flex: 0 0 auto; }
.swipe-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; }
.team-logo-mini { width: 25px; height: 25px; object-fit: contain; flex-shrink: 0; }
.team-list-wrapper { display: flex; flex-direction: column; justify-content: center; }
.fw-black { font-weight: 900; color: #133337; }

/* --- 9. Action Buttons --- */
.btn-ticket, .btn-replay { width: 100%; font-weight: 600; border: none; transition: none !important; }
.btn-ticket { background-color: #dc3545 !important; color: white !important; }
.btn-replay { background-color: #212529 !important; color: white !important; }
.btn-ticket:hover, .btn-ticket:focus, .btn-ticket:active { background-color: #dc3545 !important; color: white !important; box-shadow: none !important; opacity: 1 !important; }
.btn-replay:hover, .btn-replay:focus, .btn-replay:active { background-color: #212529 !important; color: white !important; box-shadow: none !important; opacity: 1 !important; }

/* --- 10. Messages & Empty States --- */
.no-schedule-wrapper { background-color: #fcfcfc; border: 2px dashed #e9ecef !important; transition: all 0.3s ease; }
.no-schedule-wrapper h4 { letter-spacing: -0.5px; }
.no-schedule-wrapper i { color: #adb5bd; }

/* --- 11. Back to Top Button --- */
#btn-back-to-top { position: fixed; bottom: 30px; right: 30px; display: none; background-color: #133337; color: #fff; width: 45px; height: 45px; border-radius: 50%; text-align: center; line-height: 45px; font-size: 18px; cursor: pointer; z-index: 9999; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.3s, background-color 0.3s; }
#btn-back-to-top:hover { background-color: #1a454a; transform: translateY(-5px); }
#btn-back-to-top i { line-height: 45px; }

/* --- 12. Animations & Media Queries --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 768px) { .no-schedule-wrapper { padding: 3rem 1rem !important; } }

/* --- 13. Main Banner Slider --- */
.main-banner-slider { border-radius: 20px; overflow: hidden; position: relative; }

.swiper.mainSlider { width: 100%; height: 450px; }
.banner-item { height: 100%; background: #000; transition: transform 0.4s ease; position: relative; }
.banner-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: transform 0.6s ease, opacity 0.4s ease; }

.banner-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); display: flex; align-items: flex-end; }
.banner-content h2 { font-size: 2.5rem; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); margin-bottom: 0; }

.swiper-slide a { display: block; width: 100%; height: 100%; }
.banner-item:hover .banner-img { transform: scale(1.05); opacity: 0.8; }

@media (max-width: 768px) {
    .main-banner-slider { border-radius: 12px; } 
    .swiper.mainSlider { height: 300px; }
    .banner-content { width: 100% !important; padding-left: 15px; }
    .banner-content h2 { font-size: 1.5rem; }
    .banner-overlay { padding: 20px; }
}

/* --- 14. Base & Typography --- */
/* --- Header & SEO Section --- */
.page-title { 
    font-size: 3.5rem; 
    color: #133337; 
    letter-spacing: -1.5px;
}

@media (max-width: 768px) {
    .page-title { 
        font-size: 2rem !important; 
        text-align: left; 
    }
    .seo-text-container p {
        font-size: 0.95rem;
    }
}

/* Badge Komunitas di Atas Judul */
.rounded-pill.border {
    border-color: #eee !important;
    transition: all 0.3s ease;
}

/* --- Tambahkan di Section 2: Navigation & Header --- */
.main-header { background: #fff; }

.social-link { 
    font-size: 1.1rem; 
    transition: color 0.2s ease; 
    color: #133337 !important;
}
.social-link:hover { color: #dc3545 !important; }

.header-menu-link { 
    color: #133337; 
    font-size: 0.9rem; 
    letter-spacing: 1px;
    padding: 5px 0;
    transition: color 0.2s ease;
}
.header-menu-link:hover { color: #dc3545; }

/* Responsive Adjustment */
@media (max-width: 768px) {
    .main-header .container { padding-left: 20px; padding-right: 20px; }
    .main-header .social-link { font-size: 1rem; }
    .header-menu-link { font-size: 0.8rem; }
    .main-header .navbar-brand img { height: 24px; }
}

/* --- 15. Latest News Cards --- */
.latest-news-card { transition: opacity 0.2s ease; }
.latest-news-card:hover { opacity: 0.8; }
.latest-news-card:last-child { border-bottom: none !important; }
.news-info { flex: 1; }
.news-thumb img { box-shadow: 0 4px 8px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; }

@media (max-width: 768px) {
    .news-thumb img { width: 85px !important; height: 85px !important; }
    .latest-news-card h4 { font-size: 1rem !important; }
}

/* --- 15 & 16. Grid & Sidebar Layout --- */
.card-hover { transition: all 0.3s ease; border: 1px solid #f0f0f0 !important; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important; }
.top-story-item { transition: opacity 0.2s ease; }
.top-story-item:hover { opacity: 0.7; }
.top-story-content h6:hover { color: #dc3545 !important; }

@media (max-width: 768px) {
    .card-img-top { height: 180px !important; }
}

/* --- MERCH PAGE STYLES --- */
.merch-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.merch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* Efek Zoom Gambar */
.merch-card .transition-img {
    transition: transform 0.5s ease;
}
.merch-card:hover .transition-img {
    transform: scale(1.1);
}

/* Tombol muncul saat hover (Desktop Only) */
@media (min-width: 992px) {
    .hover-btn-show {
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease;
    }
    .merch-card:hover .hover-btn-show {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Di Mobile tombol selalu muncul */
@media (max-width: 991px) {
    .hover-btn-show {
        opacity: 1;
        margin-top: 10px;
    }
}
    
/* --- Hero Section Styling --- */

/* 1. Judul */
.page-title {
    font-weight: 800;
    color: #133337;
    line-height: 1.2;
    font-size: 1.8rem; /* Mobile size */
}

/* Icon di dalam judul */
.title-icon {
    width: 1.8em;
    height: auto;
    vertical-align: middle;
    position: relative;
    top: -0.1em;
    display: inline-block;
}

/* 2. Pill Community */
.community-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #dee2e6;
    padding: 6px 16px;
    border-radius: 50px;
    background-color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    color: #133337;
}

.community-pill img {
    width: 45px;
    height: auto;
}

/* 3. SEO Text & Border */
.seo-text-container {
    padding-left: 0;
    border-left: none;
}

.seo-text-container p {
    font-size: 1rem;
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    .page-title {
        font-size: 2rem;
        text-align: center;
    }

    .title-icon {
        width: 1.8em;
    }
}
@media (min-width: 768px) {
    .page-title {
        font-size: 3rem;
        text-align: left;
    }

    .title-icon {
        width: 2.2em;
    }
}