/* ==========================================================
   SYLFOW MARKET DESIGN SYSTEM
   Foundation Components
========================================================== */

/* ===========
   Cards
=========== */

.sf-card-base{
    background:#fff;
    border-radius:var(--sf-radius-lg);
    box-shadow:var(--sf-shadow);
    transition:all .25s ease;
    border:1px solid var(--sf-border);
}

.sf-card-base:hover{
    transform:translateY(-5px);
    box-shadow:var(--sf-shadow-lg);
}

/* ===========
   Buttons
=========== */

.sf-btn{

    border:none;

    border-radius:12px;

    padding:.70rem 1.2rem;

    font-weight:600;

    transition:.25s;

}

.sf-btn-primary{

    background:var(--sf-primary);

    color:#fff;

}

.sf-btn-primary:hover{

    background:var(--sf-primary-dark);

    color:#fff;

}

.sf-btn-outline{

    background:#fff;

    border:1px solid var(--sf-border);

}

.sf-btn-outline:hover{

    background:var(--sf-light);

}

/* ===========
   Images
=========== */

.sf-cover{

    width:100%;

    display:block;

    object-fit:cover;

}

/* ===========
   Sections
=========== */

.sf-section{

    margin-top:70px;

    margin-bottom:70px;

}

/* ===========
   Title
=========== */

.sf-section-title{

    font-weight:800;

    color:var(--sf-text);

    margin-bottom:8px;

}

.sf-section-subtitle{

    color:var(--sf-text-light);

}

/* ===========
   Badge
=========== */

.sf-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 12px;

    border-radius:30px;

    font-size:.80rem;

    font-weight:700;

}

/* ======================================================
   QUICK ACTIONS
====================================================== */

.sf-quick-actions{

    padding:90px 0;

}

.sf-action-card{

    display:block;

    text-decoration:none;

    color:inherit;

    background:#fff;

    padding:35px;

    border-radius:22px;

    transition:.30s;

    border:1px solid #ececec;

    height:100%;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

}

.sf-action-card:hover{

    transform:translateY(-10px);

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

}

.sf-action-icon{

    width:75px;

    height:75px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:20px;

    background:var(--sf-primary);

    color:#fff;

    font-size:34px;

    margin-bottom:22px;

}

.sf-action-card h4{

    font-weight:700;

    margin-bottom:15px;

}

.sf-action-card p{

    color:var(--sf-text-light);

    margin:0;

    line-height:1.7;

}

.sf-section-subtitle{

    color:var(--sf-primary);

    font-weight:700;

    letter-spacing:2px;

}

.sf-section-title{

    font-size:2.4rem;

    font-weight:800;

    margin-top:12px;

}

.sf-section-description{

    color:var(--sf-text-light);

    max-width:700px;

    margin:20px auto 0;

}

/* ==========================================================
   CATEGORIES
========================================================== */

.sf-categories{

    padding:90px 0;

}

.sf-category-card{

    display:block;

    text-align:center;

    text-decoration:none;

    color:inherit;

    background:#fff;

    border-radius:22px;

    padding:30px 20px;

    border:1px solid #edf0f3;

    transition:.30s;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

    height:100%;

}

.sf-category-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 45px rgba(0,0,0,.10);

}

.sf-category-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(22,163,74,.10);

    color:var(--sf-primary);

    font-size:34px;

}

.sf-category-card h6{

    font-weight:700;

    margin-bottom:10px;

}

.sf-category-card span{

    color:var(--sf-text-light);

    font-size:.90rem;

}

/* ==========================================================
   PREMIUM SECTION
========================================================== */

.sf-premium{

    padding:90px 0;

    background:#fffdf6;

}

.sf-premium .sf-section-title{

    color:#222;

}

.sf-premium .sf-section-description{

    max-width:650px;

}

.sf-premium .sf-btn-primary{

    padding:16px 34px;

}

.sf-premium .sf-btn-secondary{

    border-width:2px;

}

.sf-premium .sf-btn-secondary:hover{

    background:#FFC107;

    border-color:#FFC107;

    color:#222;

}

/* ==========================================================
   LATEST
========================================================== */

.sf-latest{

    padding:90px 0;

    background:#fafbfc;

}

.sf-latest .alert{

    border:none;

    border-radius:24px;

    background:#fff;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

}

/* ==========================================================
   HOME MAP
========================================================== */

.sf-map-section{

    padding:90px 0;

    background:#fff;

}

.sf-map-wrapper{

    overflow:hidden;

    border-radius:24px;

    border:1px solid #edf0f3;

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

}

#home-map{

    width:100%;

    height:620px;

}

.leaflet-popup-content{

    margin:12px;

}

.leaflet-popup-content img{

    border-radius:12px;

}

.leaflet-popup-content-wrapper{

    border-radius:18px;

}

@media(max-width:768px){

    #home-map{

        height:420px;

    }

}

/* ===================================================
   MAP MARKER
=================================================== */

.sf-marker-pin{

    width:34px;

    height:34px;

    border-radius:50%;

    background:var(--sf-primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    border:3px solid #fff;

    box-shadow:0 6px 15px rgba(0,0,0,.25);

    transition:.30s;

}

.sf-marker-pin:hover{

    transform:scale(1.15);

}

.sf-popup{

    width:220px;

}

.sf-popup img{

    width:100%;

    height:130px;

    object-fit:cover;

    border-radius:12px;

}

/* ==========================================================
   NAVBAR
========================================================== */

.sf-logo-circle{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--sf-primary);

    color:#fff;

    font-weight:800;

    font-size:18px;

    box-shadow:0 8px 20px rgba(22,163,74,.25);

}