/*
Theme Name: Surau Ritel
Theme URI: http://astra.com
Template: astra
Author: Surau Ritel Team
Description: Child Theme Surau Ritel - GLOBAL STYLE (FINAL FIX V2.1 - Mobile Padding Fix)
Version: 1.5.4
*/

/* ==========================================================================
   1. GLOBAL VARIABLES & RESET
   ========================================================================== */
:root {
    --surau-red: #E60002;
    --surau-black: #111827;
    --surau-dark-bg: #1F2937;
    --surau-white: #ffffff;
    --surau-yellow: #FFD600;
    --surau-gray-light: #F3F4F6;
    --surau-gray-border: #E5E7EB;
    --surau-text-gray: #4B5563;
    
    --header-height: 80px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* FIX: Mencegah Overflow Horizontal di Mobile */
html, body {
    width: 100%;
    margin: 0; padding: 0;
    overflow-x: hidden; 
    font-family: 'Inter', sans-serif;
    color: var(--surau-black);
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; }

/* Container Global */
.surau-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ==========================================================================
   2. HEADER CUSTOM STYLES
   ========================================================================== */
.site-header {
    background: var(--surau-white);
    box-shadow: var(--shadow-soft);
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center; /* Vertikal Center Global */
}

/* LAYOUT: Space Between (Logo - Menu - CTA) */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%; /* Mewarisi tinggi 80px */
    width: 100%;
}

/* Logo Area */
.site-branding { 
    flex-shrink: 0; 
    z-index: 1002;
    margin-right: 20px;
    display: flex;
    align-items: center;
}
.custom-logo { max-height: 60px; width: auto; }

/* Navigation Area */
.main-navigation {
    flex-grow: 1;            /* Mengisi ruang kosong tengah */
    display: flex;
    justify-content: center; /* Menu di tengah horizontal */
    align-items: center;    /* FIX: Memaksa tinggi container menu full 80px */
    height: 100%;
}

.menu-items { 
    display: flex;
    align-items: center;
    gap: 30px; /* Jarak antar menu */
    margin: 0; padding: 0;
    height: 100%;
}

.menu-item { 
    position: relative; 
    height: 100%; /* PENTING: Agar dropdown tahu batas bawah header */
    display: flex; 
    align-items: center;
}

/* Style Link Menu Utama */
.menu-item > a {
    font-weight: 500;
    font-size: 0.95rem;
    color: #111827 !important; /* Paksa Hitam */
    text-decoration: none;
    height: 100%; /* Link mengisi tinggi parent */
    display: flex;
    align-items: center; /* Teks vertikal center */
    padding: 0 5px;
    gap: 6px;
    white-space: nowrap; /* Mencegah teks turun baris */
    z-index: 20;
}

.menu-item > a:hover,
.menu-item.current-menu-item > a,
.menu-item:hover > a {
    color: var(--surau-red) !important;
}

/* Ikon Home Fix */
.menu-item > a i.fa-home { font-size: 1.1rem; }

/* --- LOGIKA ARROW MENU --- */

/* 1. Arrow CSS untuk Menu Biasa (Layanan) */
.menu-item-has-children > a:not(.menu-link-arrow)::after {
    content: '\f078'; /* Chevron Down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7em;
    margin-left: 2px;
    transition: transform 0.3s;
}

/* Putar Arrow CSS saat hover */
.menu-item-has-children:hover > a:not(.menu-link-arrow)::after {
    transform: rotate(180deg);
}

/* 2. Arrow HTML <i> untuk Menu Produk */
.menu-link-arrow i { transition: transform 0.3s; font-size: 0.7em; }
.menu-item-has-children:hover .menu-link-arrow i { transform: rotate(180deg); }


/* --- DROPDOWN SUB MENU (Layanan) --- */
/* FIX: Posisi lurus dibawah parent */
.sub-menu {
    /* Wajib Absolute agar keluar dari aliran flex parent */
    position: absolute !important; 
    
    /* Posisi Dropdown: Tepat dibawah */
    top: 100% !important; 
    left: 0 !important;
    
    /* Style Visual */
    background: var(--surau-white);
    min-width: 220px; /* Lebar minimum dropdown */
    width: max-content; /* Lebar mengikuti konten teks terpanjang */
    padding: 10px 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-radius: 0 0 8px 8px;
    border-top: 3px solid var(--surau-red);
    
    /* State Default: Hilang tapi TIDAK memakan tempat */
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(10px);
    transition: all 0.2s ease-in-out;
    z-index: 9999;
}

/* Munculkan Dropdown */
.menu-item-has-children:hover .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* Saat Hover */
.menu-item:hover .sub-menu {
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0);
}

.sub-menu li {
    display: block; /* Pastikan item dropdown turun kebawah (stack) */
    width: 100%;
}

.sub-menu li a {
    display: block;
    padding: 10px 20px;
    white-space: nowrap; /* Teks jangan turun baris */
    color: var(--surau-text-gray);
    font-size: 0.9rem;
    height: auto; /* Reset tinggi */
}

.sub-menu li a:hover {
    background: var(--surau-gray-light);
    color: var(--surau-red);
    padding-left: 25px; /* Efek geser */
}

/* --- MEGA MENU (Produk) --- */
.mega-menu-panel {
    position: absolute;
    top: 100%; 
    left: -150px; 
    width: 900px;
    max-width: 85vw; 
    background: var(--surau-white);
    box-shadow: var(--shadow-hover);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 30px;
    opacity: 0; visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease;
    z-index: 1001;
    border-top: 3px solid var(--surau-red);
}

.has-mega-menu:hover .mega-menu-panel {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.mega-menu-grid {
    display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 40px;
}

.mega-title {
    font-size: 1rem; font-weight: 700; color: var(--surau-black); margin-bottom: 15px;
    border-bottom: 2px solid var(--surau-red); padding-bottom: 5px; display: inline-block;
}

.mega-col ul li a { 
    display: flex; align-items: center; gap: 10px; font-size: 0.9rem; 
    margin-bottom: 10px; color: #4B5563 !important; 
    height: auto; /* Reset tinggi */
}

.mega-col ul li a:hover { color: var(--surau-red) !important; }
.mega-col ul li a:hover i { transform: translateX(3px); color: var(--surau-red); }
.highlight-col { background: var(--surau-gray-light); padding: 20px; border-radius: var(--radius-md); }


/* --- HEADER CTA & SEARCH --- */
.header-cta { display: flex; align-items: center; gap: 20px; position: relative; }

/* 1. Search Logic */
.header-search-wrap { position: relative; }

.search-trigger { 
    font-size: 1.2rem; color: var(--surau-black); 
    cursor: pointer; display: block; padding: 10px; 
}
.search-trigger:hover { color: var(--surau-red); }

/* Hidden Input Form */
.header-search-form {
    position: absolute;
    top: 60px; right: 0;
    background: white;
    padding: 10px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-hover);
    display: flex; gap: 5px;
    width: 280px;
    border: 1px solid #eee;
    
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.header-search-wrap.active .header-search-form {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.search-input-field {
    border: 1px solid #ddd; padding: 8px 12px; border-radius: 4px;
    font-size: 0.9rem; width: 100%; outline: none;
}
.search-input-field:focus { border-color: var(--surau-red); }

.search-submit-btn {
    background: var(--surau-red); color: white; border: none;
    border-radius: 4px; width: 40px; cursor: pointer; font-size: 1rem;
}

/* 2. CTA Button */
.surau-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 24px; border-radius: 50px;
    font-weight: 600; font-size: 0.9rem;
    transition: all 0.4s; border: none; cursor: pointer;
    position: relative; overflow: hidden;
}

.btn-primary {
    background: var(--surau-red); color: var(--surau-white);
    box-shadow: 0 4px 10px rgba(230, 0, 2, 0.3);
}

/* Efek Kilau */
.btn-primary::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: 0.6s;
}

.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(230, 0, 2, 0.4); }
.btn-primary:hover::before { left: 100%; }

/* Mobile Menu Toggle (Default Hidden on Desktop) */
.menu-toggle { display: none; }


/* ==========================================================================
   3. FOOTER STYLES
   ========================================================================== */
.surau-footer-dark {
    background-color: #111827; 
    color: #D1D5DB;
    padding: 80px 0 30px; 
    margin-top: auto; 
    position: relative; z-index: 10;
}

.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr; gap: 50px; }
.footer-logo-img { margin-bottom: 20px; filter: brightness(0) invert(1); }
.footer-desc { font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px; max-width: 350px; }
.footer-social { display: flex; gap: 15px; }

/* Social Icons */
.social-link {
    width: 40px; height: 40px; background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--surau-white); transition: 0.3s;
    font-size: 1.1rem;
}
.social-link[aria-label="Facebook"]:hover { background: #1877F2; transform: translateY(-5px); box-shadow: 0 5px 15px rgba(24, 119, 242, 0.4); }
.social-link[aria-label="Instagram"]:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); transform: translateY(-5px); box-shadow: 0 5px 15px rgba(225, 48, 108, 0.4); }
.social-link[aria-label="TikTok"]:hover { background: #000; border: 1px solid #333; transform: translateY(-5px); }
.social-link[aria-label="YouTube"]:hover { background: #FF0000; transform: translateY(-5px); box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4); }

.footer-title { color: white; font-size: 1.1rem; margin-bottom: 25px; font-weight: 700; }
.contact-list li { display: flex; gap: 15px; margin-bottom: 15px; font-size: 0.95rem; }
.contact-list i { color: var(--surau-red); margin-top: 4px; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: #D1D5DB; transition: 0.2s; }
.footer-links a:hover { color: var(--surau-red); padding-left: 5px; }


/* ==========================================================================
   4. FLOATING CUSTOMER SERVICE
   ========================================================================== */
#surau-floating-cs {
    position: fixed; bottom: 30px; right: 30px; z-index: 9999;
    display: flex; align-items: center; gap: 12px;
}
.cs-avatar-frame {
    width: 60px; height: 60px; border-radius: 50%; border: 3px solid #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); overflow: hidden; background: #ffffff;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.cs-avatar-frame img { width: 100%; height: 100%; object-fit: cover; }
.cs-avatar-frame::after {
    content: ''; position: absolute; bottom: 5px; right: 5px;
    width: 12px; height: 12px; background: #ffffff;
    border: 2px solid #fff; border-radius: 50%; animation: blink-online 2s infinite;
}
@keyframes blink-online { 50% { opacity: 0.5; } }

.cs-tooltip {
    background: #fff; color: var(--surau-black);
    padding: 8px 16px; border-radius: 50px;
    font-size: 0.9rem; font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-right: 5px; opacity: 0; visibility: hidden; transform: translateX(10px);
    transition: all 0.3s ease; position: relative;
}
.cs-tooltip::after {
    content: ''; position: absolute; top: 50%; right: -6px; transform: translateY(-50%);
    border-left: 6px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
#surau-floating-cs:hover .cs-tooltip { opacity: 1; visibility: visible; transform: translateX(0); }
#surau-floating-cs:hover .cs-avatar-frame { transform: scale(1.1); }


/* ==========================================================================
   5. POPUP PROMO & TIMER (FIXED VIDEO SIZE & HIERARCHY)
   ========================================================================== */

/* --- A. Container Overlay & Card --- */
.surau-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}
.surau-popup-overlay.active { opacity: 1; visibility: visible; }

.surau-popup-card {
    position: relative; width: 90%; max-width: 600px;
    border-radius: var(--radius-lg); transform: scale(0.9);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: transparent; /* Transparan karena media punya background sendiri */
}
.surau-popup-overlay.active .surau-popup-card { transform: scale(1); }

/* --- B. Tombol Close & Badge --- */
.popup-close-btn {
    position: absolute; top: -15px; right: -15px;
    width: 36px; height: 36px;
    background: white; border: 2px solid #333;
    border-radius: 50%; font-size: 1.2rem; line-height: 1;
    cursor: pointer; z-index: 102; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    color: #333; transition: 0.2s;
}
.popup-close-btn:hover { background: var(--surau-red); color: white; border-color: var(--surau-red); }

.popup-badge {
    position: absolute; top: 15px; left: 15px;
    background: var(--surau-red); color: white;
    padding: 4px 12px; border-radius: 50px; font-weight: 700;
    font-size: 0.75rem; z-index: 100; text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* --- C. Media Frame (IMAGE DEFAULT) --- */
.popup-media-frame {
    position: relative; 
    border-radius: 12px; 
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); 
    background: #000;
}

/* Aturan khusus Image (Biar tidak terlalu tinggi di layar HP) */
.popup-media-frame img {
    display: block; width: 100%; height: auto; 
    max-height: 65vh; object-fit: contain;
}

/* --- D. Media Frame (VIDEO MODE FIX) --- */
/* Class .video-mode ditambahkan via JS revisi sebelumnya */

.popup-media-frame.video-mode {
    position: relative;
    width: 100%;
    height: 0;
    /* KUNCI UTAMA: Aspect Ratio 16:9 */
    padding-bottom: 56.25%; 
    background: #000;
}

/* Paksa Wrapper Link agar tidak menghalangi tinggi iframe */
.popup-media-frame.video-mode .promo-link-wrapper, 
.popup-media-frame.video-mode .video-link {
    position: absolute; 
    top: 0; left: 0; 
    width: 100% !important; height: 100% !important;
    display: block; z-index: 5;
}

/* Paksa Iframe Video mengisi penuh wrapper */
.popup-media-frame.video-mode iframe {
    position: absolute; 
    top: 0; left: 0; 
    width: 100% !important; height: 100% !important;
    border: none;
    z-index: 1;
}

/* --- E. Timer Container --- */
.hurry-timer-container {
    background: white;
    margin-top: -8px; /* Overlap sedikit ke atas */
    padding: 15px; 
    border-radius: 0 0 12px 12px;
    position: relative; z-index: 1;
}

.hurry-timer-card {
    background: #FFFBEB; border: 1px solid #FCD34D;
    color: var(--surau-black);
    padding: 10px 20px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; gap: 15px;
    width: 100%; box-sizing: border-box;
}

.timer-countdown { 
    font-family: 'Courier New', monospace; 
    font-size: 1.4rem; font-weight: 800; 
    color: var(--surau-red); 
}
.timer-icon { 
    font-size: 1.2rem; color: #D97706; 
    animation: pulseIcon 1.5s infinite; 
}

@keyframes pulseIcon { 50% { transform: scale(1.1); } }

/* Responsive Mobile untuk Timer */
@media (max-width: 600px) {
    .hurry-timer-card {
        flex-direction: column; 
        gap: 5px; text-align: center;
    }
    .timer-countdown { font-size: 1.2rem; }
}


/* ==========================================================================
   6. RESPONSIVE DESIGN (MOBILE FIX FINAL)
   ========================================================================== */
@media (max-width: 992px) {
    
    /* --- A. HEADER & MENU --- */
    /* Sembunyikan elemen desktop yang tidak perlu */
    .header-cta, .mega-menu-panel, .header-search-wrap { display: none !important; }
    
    /* Tombol Hamburger: Paksa Tampil */
    .menu-toggle { 
        display: flex !important;
        align-items: center; justify-content: center;
        margin-left: auto;
        width: 44px; height: 44px;
        background: transparent; border: 2px solid #E5E7EB; border-radius: 8px;
        color: var(--surau-black); font-size: 1.5rem;
        cursor: pointer; z-index: 1002; /* Z-index tinggi agar bisa diklik */
    }

    /* Container Menu Mobile (Default: Hidden) */
    .menu-items {
        display: none !important;
        flex-direction: column;
        position: absolute;
        top: 100%; left: 0; width: 100%;
        background: var(--surau-white);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        padding: 0 !important;
        border-top: 2px solid var(--surau-red);
        max-height: 80vh; overflow-y: auto; /* Scroll jika menu panjang */
    }

    /* CLASS .ACTIVE (Dipicu JS): Munculkan Menu */
    .menu-items.active {
        display: flex !important;
        animation: slideDown 0.3s ease forwards;
    }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

    /* Item Menu Mobile */
    .menu-item {
        width: 100%; height: auto;
        border-bottom: 1px solid #f0f0f0;
        display: block; /* Block agar anak elemen turun */
    }

    .menu-item > a {
        padding: 15px 20px;
        width: 100%;
        justify-content: space-between; /* Teks kiri, panah kanan */
        color: var(--surau-black) !important;
        font-weight: 600;
    }

    /* Fix Icon Home Mobile */
    .menu-item > a i { color: var(--surau-black); display: inline-block; font-size: 1.1rem; }
    .menu-item > a:hover i { color: var(--surau-red); }

    /* --- MEGA MENU & DROPDOWN MOBILE (Reset jadi List) --- */
    .mega-menu-panel, .sub-menu {
        position: static !important; width: 100% !important; max-width: 100% !important;
        box-shadow: none !important; border: none !important;
        background: #f9fafb !important; /* Warna beda dikit */
        padding: 0 !important;
        display: none; /* Hide default */
        opacity: 1 !important; visibility: visible !important;
        transform: none !important;
    }
    
    /* Tampilkan submenu saat hover/focus di mobile */
    .menu-item:hover .sub-menu,
    .menu-item:hover .mega-menu-panel,
    .menu-item:focus-within .sub-menu,
    .menu-item:focus-within .mega-menu-panel {
        display: block !important; 
    }

    /* Style Content Mega Menu Mobile */
    .mega-menu-grid { display: block !important; padding: 10px 20px !important; }
    .mega-col { margin-bottom: 20px; }
    .mega-title { font-size: 0.9rem; margin-bottom: 10px; color: var(--surau-red); border: none; }
    .highlight-col { display: none; } /* Hide box promo besar */

    /* REVISI PADDING: Tambah indentasi kiri (40px) agar tidak menempel */
    .mega-col ul li a, .sub-menu li a {
        padding: 12px 20px 12px 40px !important; /* Indentasi 40px */
        font-size: 0.9rem;
        color: #555 !important;
        border-bottom: 1px dashed #eee; justify-content: flex-start;
    }

    /* --- B. FOOTER (SOLUSI POSISI KACAU) --- */
    /* Menggunakan Flex Column untuk memaksa tumpuk ke bawah */
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    .footer-col {
        width: 100% !important; /* Lebar penuh */
        margin: 0 !important;
    }

    /* Fix Peta agar tidak melebar */
    .footer-map iframe { width: 100% !important; }
}

@media (max-width: 600px) {
    #surau-floating-cs { bottom: 20px; right: 20px; }
    .hurry-timer-card { bottom: 10px; left: 10px; right: 10px; width: auto; justify-content: center; }
}