/* =========================================================
   NGUEYE HOTEL - HOMEPAGE TABS
========================================================= */

/* =========================================================
   STICKY TAB BAR (DESKTOP - top: 52px)
========================================================= */
.home-tabs-section {
    position: sticky;
    top: 52px;

    z-index: 900;

    padding: 1rem 0 0;
    background: var(--ngueye-cream);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* =========================================================
   TAB BUTTONS (DESKTOP)
========================================================= */
.home-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;

    margin-bottom: 0;

    border-bottom: 2px solid rgba(212, 175, 55, 0.15);
    padding-bottom: 1rem;
}

/* Base Tab Style - Bold border */
.home-tab {
    background: transparent;
    
    /* Bold, visible gold border */
    border: 1.5px solid rgba(212, 175, 55, 0.55);

    color: var(--ngueye-dark);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    transition: all 0.3s ease;
}

.home-tab i {
    color: var(--ngueye-gold);
}

/* Hover State - Even stronger border */
.home-tab:hover {
    background: rgba(215, 162, 58, 0.15);
    border-color: rgba(212, 175, 55, 0.85);
    color: var(--ngueye-burgundy);
}

/* Active State (Solid Burgundy) */
.home-tab.active {
    background: var(--ngueye-burgundy);
    border-color: var(--ngueye-burgundy);
    color: #ffffff;

    box-shadow: 0 4px 12px rgba(139, 48, 71, 0.25);
}

.home-tab.active i {
    color: var(--ngueye-gold);
}

/* Ensure Active Tab doesn't pick up Hover border */
.home-tab.active,
.home-tab.active:hover {
    background: var(--ngueye-burgundy);
    border-color: var(--ngueye-burgundy);
    color: #ffffff;
}

/* =========================================================
   TAB CONTENT CONTROL
========================================================= */
.home-tab-content {
    display: none;
}

.home-tab-content.active {
    display: block;
    animation: fadeInTab 0.4s ease;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   MOBILE (SINGLE BLOCK - top: 60px)
========================================================= */
@media (max-width: 768px) {

    /* -----------------------------------------------------
       STICKY BAR
    ----------------------------------------------------- */
    .home-tabs-section {
        top: 60px;
        padding: 0.45rem 0;
        background: var(--ngueye-cream);
    }

    /* -----------------------------------------------------
       LET SCROLLER USE FULL SCREEN WIDTH
    ----------------------------------------------------- */
    .home-tabs-section .container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* -----------------------------------------------------
       ONE-LINE HORIZONTAL SCROLLER
    ----------------------------------------------------- */
    .home-tabs {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;

        width: 100%;
        max-width: 100%;

        gap: 0.25rem;
        margin: 0;
        padding: 0.25rem 10px;

        border-bottom: 0;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .home-tabs::-webkit-scrollbar {
        display: none;
    }

    /* -----------------------------------------------------
       TAB BUTTONS (Mobile bold border)
    ----------------------------------------------------- */
    .home-tab {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;

        /* Slightly thicker border on mobile for visibility */
        border-width: 1.5px;
        
        font-size: 0.76rem;
        padding: 0.6rem 0.8rem;
        gap: 5px;
    }

    .home-tab i {
        flex: 0 0 auto;
        font-size: 0.8rem;
    }
}