/* ============================================================
   FIND REGISTERED GUIDES
   Explore Sri Lanka
============================================================ */


/* ============================================================
   1. PAGE
============================================================ */

.find-guides-page {

    min-height:
        calc(100vh - 80px);

    background:
        #f6f8fb;

    padding:
        30px 20px 60px;

}


/* ============================================================
   2. HERO
============================================================ */

.find-guides-hero {

    max-width:
        1200px;

    margin:
        0 auto 25px;

    padding:
        30px;

    border-radius:
        18px;

    background:
        linear-gradient(135deg,
            #ffffff,
            #f1f7f4);

    border:
        1px solid #e3e8ed;

    box-shadow:
        0 8px 25px rgba(0,
            0,
            0,
            0.06);

}


.find-guides-hero-content {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

}


.find-guides-hero-icon {

    width:
        70px;

    height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

    background:
        #e8f4ed;

    font-size:
        34px;

}


.find-guides-hero h2 {

    margin:
        0 0 8px;

    font-size:
        28px;

}


.find-guides-hero p {

    margin:
        0;

    color:
        #667085;

}


/* ============================================================
   3. FILTER SECTION
============================================================ */

.guide-filter-section {

    max-width:
        1200px;

    margin:
        0 auto 25px;

    padding:
        25px;

    background:
        #ffffff;

    border:
        1px solid #e3e8ed;

    border-radius:
        16px;

    box-shadow:
        0 5px 18px rgba(0,
            0,
            0,
            0.04);

}


.guide-filter-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    margin-bottom:
        20px;

}


.guide-filter-header h3 {

    margin:
        0 0 5px;

}


.guide-filter-header p {

    margin:
        0;

    color:
        #667085;

}


.guide-result-count {

    padding:
        9px 14px;

    border-radius:
        20px;

    background:
        #edf8f1;

    color:
        #176044;

    font-weight:
        700;

    white-space:
        nowrap;

}


/* ============================================================
   4. FILTER GRID
============================================================ */

.guide-filters {

    display:
        grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1fr auto;

    gap:
        15px;

    align-items:
        end;

}


.guide-filter-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.guide-filter-group label {

    font-size:
        14px;

    font-weight:
        700;

    color:
        #344054;

}


.guide-filter-group input,
.guide-filter-group select {

    width:
        100%;

    min-height:
        44px;

    padding:
        10px 12px;

    border:
        1px solid #d0d5dd;

    border-radius:
        9px;

    background:
        #ffffff;

    font-size:
        14px;

    box-sizing:
        border-box;

}


.guide-filter-group input:focus,
.guide-filter-group select:focus {

    outline:
        none;

    border-color:
        #176044;

    box-shadow:
        0 0 0 3px rgba(23,
            96,
            68,
            0.10);

}


/* ============================================================
   5. CLEAR BUTTON
============================================================ */

.clear-guide-filters {

    min-height:
        44px;

    padding:
        10px 16px;

    border:
        none;

    border-radius:
        9px;

    background:
        #344054;

    color:
        #ffffff;

    font-weight:
        700;

    cursor:
        pointer;

    white-space:
        nowrap;

}


.clear-guide-filters:hover {

    opacity:
        0.9;

}


/* ============================================================
   6. GUIDE LIST
============================================================ */

.guides-list-section {

    max-width:
        1200px;

    margin:
        0 auto;

}


.guides-list {

    display:
        grid;

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

    gap:
        20px;

}


/* ============================================================
   7. GUIDE CARD
============================================================ */

.guide-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    background:
        #ffffff;

    border:
        1px solid #e3e8ed;

    border-radius:
        16px;

    overflow:
        hidden;

    box-shadow:
        0 6px 20px rgba(0,
            0,
            0,
            0.05);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.guide-card:hover {

    transform:
        translateY(-3px);

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

}


/* ============================================================
   8. RANK BADGE
============================================================ */

.guide-rank-badge {

    position:
        absolute;

    top:
        15px;

    left:
        15px;

    z-index:
        2;

    padding:
        7px 11px;

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0 3px 10px rgba(0,
            0,
            0,
            0.12);

    font-size:
        13px;

    font-weight:
        800;

}


/* ============================================================
   9. GUIDE CARD TOP
============================================================ */

.guide-card-top {

    display:
        flex;

    gap:
        18px;

    padding:
        24px;

    padding-top:
        30px;

}


.guide-avatar {

    width:
        72px;

    height:
        72px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #e8f4ed;

    font-size:
        32px;

    overflow:
        hidden;

}


.guide-avatar img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.guide-main-info {

    min-width:
        0;

}


.guide-name-row {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.guide-name {

    margin:
        0;

    font-size:
        20px;

}


.verified-badge {

    padding:
        4px 8px;

    border-radius:
        20px;

    background:
        #edf8f1;

    color:
        #176044;

    font-size:
        11px;

    font-weight:
        800;

}


.guide-location {

    margin:
        7px 0 0;

    color:
        #667085;

    font-size:
        14px;

}


/* ============================================================
   10. GUIDE STATS
============================================================ */

.guide-stats {

    display:
        grid;

    grid-template-columns:
        repeat(3,
            1fr);

    border-top:
        1px solid #eaecf0;

    border-bottom:
        1px solid #eaecf0;

}


.guide-stat {

    padding:
        15px 10px;

    text-align:
        center;

    border-right:
        1px solid #eaecf0;

}


.guide-stat:last-child {

    border-right:
        none;

}


.guide-stat strong {

    display:
        block;

    font-size:
        17px;

}


.guide-stat span {

    display:
        block;

    margin-top:
        4px;

    color:
        #667085;

    font-size:
        12px;

}


/* ============================================================
   11. GUIDE DETAILS
============================================================ */

.guide-details {

    padding:
        20px 24px;

}


.guide-detail-row {

    display:
        flex;

    gap:
        10px;

    margin-bottom:
        10px;

    color:
        #475467;

    font-size:
        14px;

}


.guide-detail-row strong {

    color:
        #344054;

}


/* ============================================================
   12. GUIDE ACTIONS
============================================================ */

.guide-card-actions {

    display:
        flex;

    gap:
        10px;

    padding:
        0 24px 24px;

}


.view-guide-button,
.select-guide-button {

    flex:
        1;

    min-height:
        44px;

    border-radius:
        9px;

    font-weight:
        700;

    cursor:
        pointer;

}


.view-guide-button {

    border:
        1px solid #d0d5dd;

    background:
        #ffffff;

    color:
        #344054;

}


.select-guide-button {

    border:
        none;

    background:
        #176044;

    color:
        #ffffff;

}


.select-guide-button:hover {

    background:
        #125038;

}


/* ============================================================
   13. EMPTY STATE
============================================================ */

.guides-empty-state,
.guides-loading {

    padding:
        60px 20px;

    text-align:
        center;

    color:
        #667085;

}


.empty-guide-icon {

    font-size:
        45px;

    margin-bottom:
        15px;

}


.guides-empty-state h3 {

    margin:
        0 0 8px;

    color:
        #344054;

}


.guides-empty-state p {

    margin:
        0 0 20px;

}


/* ============================================================
   14. RESPONSIVE
============================================================ */

@media (max-width: 900px) {

    .guide-filters {

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

    }


    .clear-guide-filters {

        width:
            100%;

    }


    .guides-list {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 600px) {

    .find-guides-page {

        padding:
            20px 12px 40px;

    }


    .find-guides-hero-content {

        align-items:
            flex-start;

    }


    .find-guides-hero {

        padding:
            20px;

    }


    .guide-filter-section {

        padding:
            18px;

    }


    .guide-filter-header {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .guide-filters {

        grid-template-columns:
            1fr;

    }


    .guide-card-top {

        padding:
            20px;

    }


    .guide-details {

        padding:
            18px 20px;

    }


    .guide-card-actions {

        padding:
            0 20px 20px;

        flex-direction:
            column;

    }

}