/* =========================================================
   EMARKET24
   HOME PAGE CSS
   File: assets/css/home.css
========================================================= */


/* =========================================================
   HERO
========================================================= */

.hero {

    background:
        linear-gradient(
            135deg,
            rgba(121,58,133,.96),
            rgba(94,45,104,.96)
        );

    color:
        #fff;

    padding:
        75px 15px 90px;

    text-align:
        center;

}


.hero h1 {

    font-size:
        clamp(2rem,5vw,3.2rem);

    font-weight:
        800;

    margin-bottom:
        12px;

}


.hero p {

    font-size:
        1rem;

    opacity:
        .9;

    margin-bottom:
        30px;

}


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

.search-wrapper {

    max-width:
        760px;

    margin:
        auto;

    position:
        relative;

}


.search-box {

    background:
        #fff;

    border-radius:
        50px;

    padding:
        7px 7px 7px 22px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.20);

}


.search-icon {

    color:
        #888;

    font-size:
        17px;

}


.search-input {

    flex:
        1;

    border:
        none;

    outline:
        none;

    font-size:
        16px;

    color:
        var(--dark);

    min-width:
        0;

}


.search-button {

    border:
        none;

    background:
        var(--primary);

    color:
        #fff;

    border-radius:
        40px;

    padding:
        13px 25px;

    font-weight:
        700;

    cursor:
        pointer;

}


.search-button:hover {

    background:
        var(--primary-dark);

}


/* =========================================================
   AUTOCOMPLETE
========================================================= */

.autocomplete-box {

    position:
        absolute;

    top:
        calc(100% + 10px);

    left:
        0;

    right:
        0;

    background:
        #fff;

    border-radius:
        15px;

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.18);

    overflow:
        hidden;

    display:
        none;

    text-align:
        left;

    z-index:
        99999;

}


.autocomplete-box.show {

    display:
        block;

}


.autocomplete-item {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        13px 18px;

    cursor:
        pointer;

    border-bottom:
        1px solid #f1f1f1;

    transition:
        background .15s;

}


.autocomplete-item:hover,
.autocomplete-item.active {

    background:
        #f7f1f9;

}


.auto-icon {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        #f1e7f4;

    color:
        var(--primary);

    flex-shrink:
        0;

}


.auto-content {

    min-width:
        0;

}


.auto-title {

    color:
        var(--dark);

    font-weight:
        700;

    font-size:
        14px;

}


.auto-subtitle {

    color:
        var(--gray);

    font-size:
        12px;

}


.auto-badge {

    margin-left:
        auto;

    background:
        var(--secondary);

    color:
        #222;

    font-size:
        10px;

    font-weight:
        700;

    padding:
        4px 9px;

    border-radius:
        20px;

}


/* =========================================================
   SEARCH TIPS
========================================================= */

.search-tips {

    display:
        flex;

    justify-content:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;

    margin-top:
        18px;

}


.search-tip {

    background:
        rgba(255,255,255,.12);

    border:
        1px solid
        rgba(255,255,255,.18);

    padding:
        6px 13px;

    border-radius:
        20px;

    font-size:
        12px;

}


/* =========================================================
   QUICK CATEGORY
========================================================= */

.quick-categories {

    max-width:
        850px;

    margin:
        30px auto 0;

    display:
        flex;

    justify-content:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;

}


.quick-category {

    color:
        #fff;

    text-decoration:
        none;

    border:
        1px solid
        rgba(255,255,255,.25);

    background:
        rgba(255,255,255,.10);

    padding:
        8px 15px;

    border-radius:
        25px;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        .2s;

}


.quick-category:hover {

    background:
        #fff;

    color:
        var(--primary);

}


/* =========================================================
   POST SHOP
========================================================= */

.post-shop {

    margin-top:
        25px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    background:
        var(--secondary);

    color:
        #222;

    padding:
        13px 25px;

    border-radius:
        30px;

    text-decoration:
        none;

    font-weight:
        700;

    transition:
        .2s;

}


.post-shop:hover {

    color:
        #222;

    transform:
        translateY(-2px);

}


/* =========================================================
   FEATURED
========================================================= */

.featured-section {

    background:
        #f5f6fa;

}


.featured-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        30px;

}


.featured-header .section-title {

    margin-bottom:
        0;

}


.featured-subtitle {

    color:
        var(--gray);

    font-size:
        14px;

    margin:
        5px 0 0;

}


.view-all-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    color:
        var(--primary);

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        700;

}


.featured-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:
        20px;

}


.featured-card {

    background:
        #fff;

    border-radius:
        16px;

    overflow:
        hidden;

    border:
        1px solid #eeeeee;

    box-shadow:
        0 4px 18px
        rgba(0,0,0,.06);

    transition:
        .2s;

}


.featured-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.12);

}


.featured-image {

    height:
        175px;

    position:
        relative;

    background:
        #f1e7f4;

    overflow:
        hidden;

}


.featured-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.featured-placeholder {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--primary);

    font-size:
        45px;

}


.featured-badge {

    position:
        absolute;

    top:
        12px;

    left:
        12px;

    background:
        var(--secondary);

    color:
        #222;

    padding:
        5px 10px;

    border-radius:
        20px;

    font-size:
        10px;

    font-weight:
        800;

}


.featured-content {

    padding:
        18px;

}


.featured-category {

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        700;

    text-transform:
        uppercase;

    margin-bottom:
        6px;

}


.featured-name {

    color:
        var(--dark);

    font-size:
        17px;

    font-weight:
        800;

    margin:
        0 0 8px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.featured-rating {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    margin-bottom:
        10px;

    font-size:
        12px;

}


.rating-stars {

    color:
        #f5b301;

    letter-spacing:
        1px;

}


.review-count {

    color:
        #888;

    font-size:
        11px;

}


.featured-address {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        7px;

    color:
        #555;

    font-size:
        12px;

    line-height:
        1.5;

    margin-bottom:
        10px;

    min-height:
        36px;

}


.featured-address i {

    color:
        var(--primary);

    margin-top:
        3px;

}


.featured-status {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    font-size:
        12px;

    margin-bottom:
        15px;

}


.status-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

}


.status-dot.open {

    background:
        #22c55e;

}


.status-dot.closed {

    background:
        #ef4444;

}


.status-open {

    color:
        #16a34a;

    font-weight:
        700;

}


.status-closed {

    color:
        #dc2626;

    font-weight:
        700;

}


.status-time {

    color:
        #777;

    font-size:
        11px;

}


.featured-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    padding:
        9px 12px;

    border-radius:
        8px;

    background:
        #f5eef7;

    color:
        var(--primary);

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

}


.featured-button:hover {

    background:
        var(--primary);

    color:
        #fff;

}


/* =========================================================
   CATEGORY
========================================================= */

.category-grid {

    display:
        grid;

    grid-template-columns:
        repeat(auto-fit,minmax(150px,1fr));

    gap:
        18px;

}


.category-card {

    background:
        #fff;

    border-radius:
        15px;

    padding:
        25px 15px;

    text-align:
        center;

    color:
        var(--dark);

    box-shadow:
        0 4px 18px
        rgba(0,0,0,.06);

    transition:
        .2s;

}


.category-card:hover {

    transform:
        translateY(-4px);

    color:
        var(--primary);

}


.category-icon {

    width:
        50px;

    height:
        50px;

    margin:
        0 auto 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        #f1e7f4;

    color:
        var(--primary);

    font-size:
        20px;

}


.category-name {

    font-size:
        14px;

    font-weight:
        700;

}


/* =========================================================
   INFO
========================================================= */

.info-grid {

    display:
        grid;

    grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));

    gap:
        20px;

}


.info-card {

    background:
        #fff;

    border-radius:
        15px;

    padding:
        30px 22px;

    text-align:
        center;

    box-shadow:
        0 4px 18px
        rgba(0,0,0,.06);

}


.info-number {

    width:
        45px;

    height:
        45px;

    margin:
        0 auto 15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--primary);

    color:
        #fff;

    font-weight:
        800;

}


.info-card h4 {

    font-size:
        17px;

    font-weight:
        700;

    margin-bottom:
        8px;

}


.info-card p {

    color:
        var(--gray);

    font-size:
        14px;

    margin:
        0;

}


/* =========================================================
   HOME RESPONSIVE
========================================================= */

@media(max-width:992px) {

    .featured-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

}


@media(max-width:768px) {

    .hero {

        padding:
            55px 12px 65px;

    }


    .search-box {

        flex-direction:
            column;

        border-radius:
            18px;

        padding:
            10px;

    }


    .search-input {

        width:
            100%;

        padding:
            10px;

    }


    .search-button {

        width:
            100%;

    }

}


@media(max-width:576px) {

    .featured-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .featured-grid {

        grid-template-columns:
            1fr;

    }


    .featured-image {

        height:
            190px;

    }

}