/* =========================================================
   FM HAIRSTYLE - HOMEPAGE TABS
   Palette: coral (#D98C6B) / rose (#D96A8A) / ivory (#F8F1EC)
========================================================= */


/* =========================================================
   STICKY TAB BAR — DESKTOP
========================================================= */

.home-tabs-section {
    position: sticky;
    top: 85px;

    z-index: 900;

    padding: 1rem 0 0;
    background: #F8F1EC;

    box-shadow: 0 6px 18px rgba(18, 15, 16, 0.06);
}


/* =========================================================
   TAB BUTTON CONTAINER — DESKTOP
========================================================= */

.home-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    justify-content: center;
    align-items: center;

    gap: 0.5rem;

    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 0 0 1rem;

    border-bottom: 2px solid rgba(217, 140, 107, 0.15);
}


/* =========================================================
   TAB BUTTONS — DESKTOP
========================================================= */

.home-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    background: transparent;

    border: 1.5px solid rgba(217, 140, 107, 0.55);
    border-radius: 50px;

    color: #24191A;

    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;

    padding: 0.8rem 1.5rem;

    cursor: pointer;

    transition: all 0.3s ease;
}


/* =========================================================
   TAB ICONS
========================================================= */

.home-tab i {
    color: #D98C6B;
}


/* =========================================================
   TAB HOVER
========================================================= */

.home-tab:hover {
    background: rgba(217, 140, 107, 0.15);
    border-color: rgba(217, 140, 107, 0.85);
    color: #D96A8A;
}


/* =========================================================
   ACTIVE TAB
========================================================= */

.home-tab.active,
.home-tab.active:hover {
    background: linear-gradient(
        135deg,
        #D98C6B 0%,
        #D96A8A 100%
    );

    border-color: #D98C6B;
    color: #ffffff;

    box-shadow: 0 4px 12px rgba(217, 140, 107, 0.35);
}

.home-tab.active i {
    color: #ffffff;
}


/* =========================================================
   TAB CONTENT CONTROL
========================================================= */

.home-tab-content {
    display: none;
}

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


/* =========================================================
   TAB CONTENT ANIMATION
========================================================= */

@keyframes fadeInTab {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 991px) {

    /* -----------------------------------------------------
       STICKY TAB BAR
    ----------------------------------------------------- */

    .home-tabs-section {
        top: 65px;

        padding: 0.45rem 0;

        background: #F8F1EC;
    }


    /* -----------------------------------------------------
       FULL-WIDTH CONTAINER
    ----------------------------------------------------- */

    .home-tabs-section .container {
        width: 100%;
        max-width: none;

        margin: 0;

        padding-left: 0;
        padding-right: 0;
    }


    /* -----------------------------------------------------
       CENTERED SINGLE-ROW TAB BAR
    ----------------------------------------------------- */

    .home-tabs {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        justify-content: center;
        align-items: center;

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

        box-sizing: border-box;

        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;
    }


    /* -----------------------------------------------------
       HIDE HORIZONTAL SCROLLBAR
    ----------------------------------------------------- */

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


    /* -----------------------------------------------------
       MOBILE TAB BUTTONS
    ----------------------------------------------------- */

    .home-tab {
        flex: 0 0 auto;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        white-space: nowrap;

        border-width: 1.5px;

        font-size: 0.76rem;

        padding: 0.6rem 0.8rem;

        gap: 5px;
    }


    /* -----------------------------------------------------
       MOBILE TAB ICONS
    ----------------------------------------------------- */

    .home-tab i {
        flex: 0 0 auto;

        font-size: 0.8rem;
    }
}