/* ========== HEADER SECTION ========== */

.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 100;
    padding: 10px 0;
}

/* ------------ Tulisan Berjalan ---------- */

.marquee-container {
    position: fixed;
    top: 110px; /* Sama dengan tinggi header */
    left: 0;
    right: 0;
    width: 100%;
    background: #7e68c0;    overflow: hidden;
    white-space: nowrap;
    z-index: 101;
    height: 25px;
    border-top: 2px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.marquee-text {
    display: inline-flex;
    animation: marqueeScroll 15s linear infinite;
    will-change: transform;
}

.marquee-content {
    display: flex;
    white-space: nowrap;
}

.marquee-content span {
    margin-right: 200px;
    font-size: 12px;
    color: yellow;
    font-weight: bold;
    white-space: nowrap;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Hover pause - opsional */
.marquee-container:hover .marquee-text {
    animation-play-state: paused;
}

/* Smooth rendering */
.marquee-text {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ========== RUPA-RUPA CAROUSEL ========== */
.ruparupa-carousel {
    padding: 10px 8px;
    width: 100%;
    box-sizing: border-box;
}

.carousel-container {
    position: relative;
    min-height: 45px;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.carousel-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.carousel-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 kolom sama lebar */
    gap: 8px;
    text-align: center;
    width: 100%;
}

.carousel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.carousel-item:hover {
    transform: translateY(-5px);
}

.carousel-item img {
    width: 100%;           /* Lebar penuh sesuai container */
    max-width: 100%;
    aspect-ratio: 1 / 1;   /* Membuat gambar persegi */
    object-fit: cover;      /* Gambar menutupi area tanpa distorsi */
    border-radius: 12px;
    background: white;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

.carousel-item span {
    display: block;
    font-size: 11px;
    color: white;
    font-weight: 500;
    text-align: center;
    margin-top: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}



/* Animasi untuk gambar bergerak (opsional) */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.carousel-item img {
    animation: float 3s ease-in-out infinite;
}

.carousel-item:nth-child(1) img { animation-delay: 0s; }
.carousel-item:nth-child(2) img { animation-delay: 0.5s; }
.carousel-item:nth-child(3) img { animation-delay: 1s; }
.carousel-item:nth-child(4) img { animation-delay: 1.5s; }


/* ========== NAVIGATION TABS ========== */

.brand-tabs { 
position: fixed; 
top: 70px; left: 0; 
right: 0; height: 45px; 
background: white; 
border-bottom: 1px solid #ddd;
z-index: 9; 
overflow-x: auto; 
-webkit-overflow-scrolling: touch; 
display: flex; 
align-items: center; 
touch-action: pan-x; 
}

.tabs-container { 
display: flex; 
height: 100%; padding: 0 10px; 
align-items: center; 
gap: 5px; 
min-width: fit-content;
touch-action: pan-x; 
}

.tab { 
padding: 8px 12px; 
font-size: 13px; 
color: #666; 
border-radius: 15px; 
cursor: pointer; 
white-space: nowrap;
text-transform: uppercase; 
font-weight: 600; letter-spacing: 0.5px; 
}

.tab.active { 
background: #1976d2; 
color: white; 
font-weight: bold; 
}


/* ========== SEARCH SECTION ========== */

.search-section { 
position: relative; 
top: 135px; 
left: 0; 
right: 0; 
background: white; 
z-index: 8;
border-bottom: 1px solid #e0e0e0; 
box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
padding: 8px 10px; 
}

.search-container { 
display: flex; align-items: center; 
gap: 8px; 
}

.search-box { 
flex: 1; 
position: relative; 
display: flex; 
align-items: center; 
background: #f5f5f5; 
border-radius: 20px;
padding: 0 12px; 
height: 36px; 
}

.search-icon { 
color: #666; 
font-size: 14px; 
margin-right: 8px; 
}

.search-input { 
flex: 1; 
border: none; 
background: transparent; 
outline: none; 
font-size: 14px; 
color: #333;
height: 100%; 
width: 100%; 
}

.search-input::placeholder { color: #999; }

.clear-btn { 
background: none; 
border: none; color: #999; 
font-size: 18px; 
width: 24px; 
height: 24px; 
display: flex;
align-items: center; 
justify-content: center; 
cursor: pointer; 
padding: 0; margin: 0; 
}

.filter-btn { 
position: relative; 
background: #1976d2; 
color: white; 
border: none; 
border-radius: 8px; 
width: 36px;
height: 36px; 
display: flex; 
align-items: center; 
justify-content: center; 
font-size: 24px; 
cursor: pointer;
flex-shrink: 0; 
padding: 0; 
}

.filter-badge { 
position: absolute; 
top: -3px; right: -3px; 
background: #ff5722; color: white; 
font-size: 8px; font-weight: bold;
width: 16px; 
height: 16px; 
border-radius: 50%; 
display: flex; 
align-items: center; 
justify-content: center; 
border: 1px solid white; 
}


/* ========== SEARCH SUGGESTIONS ( Dropdown) ========== */

.search-suggestions { 
position: absolute; 
top: 100%; left: 10px; 
right: 10px; 
background: white; 
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
max-height: 300px; 
overflow-y: auto; 
display: none; z-index: 1000;
margin-top: 4px; 
-webkit-overflow-scrolling: touch; 
overscroll-behavior: contain; 
}

.search-suggestions.active { 
display: block; 
animation: fadeIn 0.2s ease; 
}

.search-suggestions::-webkit-scrollbar { width: 6px; }

.search-suggestions::-webkit-scrollbar-track { 
background: #f1f1f1; 
border-radius: 3px;
margin: 4px 0; 
}

.search-suggestions::-webkit-scrollbar-thumb { 
background: #c1c1c1; 
border-radius: 3px; 
}

.suggestion-item {
padding: 12px 15px; 
border-bottom: 1px solid #f0f0f0; 
cursor: pointer; 
font-size: 14px; color: #333;
display: flex; 
align-items: center; 
justify-content: space-between; 
min-height: 44px; 
box-sizing: border-box; 
}

.suggestion-item:hover,
.suggestion-item.highlighted { background: #f8f8f8; }

.suggestion-item:last-child { border-bottom: none; }

.suggestion-text { flex: 1; }

.suggestion-type { 
font-size: 10px; 
color: #666; background: #e0e0e0;
padding: 2px 6px; 
border-radius: 10px;
margin-left: 8px; 
text-transform: uppercase; 
}

.suggestion-type.filter { background: #4CAF50; color: white; }
.suggestion-type.sparepart { background: #2196F3; color: white; }
.suggestion-type.brand { background: #FF9800; color: white; }
.suggestion-type.ai_synonym { background: #9C27B0; color: white; }
.suggestion-type.search { background: #607D8B; color: white; }

.suggestion-hint { font-size: 11px; 
color: #999; 
text-align: center; 
padding: 8px; 
border-top: 1px solid #f0f0f0; 
}


/* ------ Simple suggestions (ALTERNATIVE STYLE) ------ */

.simple-suggestion { 
padding: 12px 15px; 
font-size: 14px; 
color: #333; 
cursor: pointer; 
border-bottom: 1px solid #f0f0f0;
font-family: monospace; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
transition: background 0.2s;
min-height: 44px; 
box-sizing: border-box; 
display: flex; 
align-items: center; 
gap: 8px; 
}

.simple-suggestion:hover { background: #f5f5f5; }

.simple-suggestion:last-child { border-bottom: none; }

/* Style untuk selected suggestion */
.simple-suggestion.selected { 
background-color: #e3f2fd; 
border-left: 4px solid #1976d2; 
}

/* Touch-friendly suggestions */
@media (hover: none) and (pointer: coarse) {
    .simple-suggestion { padding: 14px 16px; min-height: 44px; }
    
    .simple-suggestion:active { background-color: #f0f0f0; }
}