.lost-pets-directory-body{
    background:#f5f8fb;
}

.lost-pets-directory-page{
    min-height:75vh;
    padding-bottom:80px;
}

.lost-pets-directory-hero{
    padding:70px 20px;
    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(21,150,83,.14),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #061b3a,
            #0c3159
        );
    color:#fff;
}

.lost-pets-directory-hero-inner{
    width:min(900px,100%);
    margin:0 auto;
    text-align:center;
}

.lost-pets-directory-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.lost-pets-directory-hero h1{
    margin:19px 0 12px;
    font-size:49px;
    line-height:1.08;
}

.lost-pets-directory-hero p{
    max-width:690px;
    margin:0 auto;
    color:#d4e1ed;
    font-size:18px;
    line-height:1.7;
}

.lost-pets-hero-search{
    display:flex;
    align-items:center;
    width:min(760px,100%);
    margin:29px auto 0;
    padding:8px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 18px 55px rgba(0,0,0,.22);
}

.lost-pets-hero-search > i{
    flex:0 0 auto;
    margin-left:10px;
    color:#71859a;
}

.lost-pets-hero-search input{
    flex:1 1 auto;
    min-width:0;
    padding:13px 12px;
    border:0;
    outline:0;
    background:transparent;
    color:#102b50;
    font:inherit;
}

.lost-pets-hero-search button{
    flex:0 0 auto;
    padding:13px 22px;
    border:0;
    border-radius:11px;
    background:#159653;
    color:#fff;
    font:inherit;
    font-weight:900;
    cursor:pointer;
}

.lost-pets-directory-container{
    width:min(1240px,calc(100% - 32px));
    margin:34px auto 0;
}

.lost-pets-directory-toolbar{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    margin-bottom:22px;
}

.lost-pets-directory-toolbar h2{
    margin:0;
    color:#071d3c;
    font-size:28px;
}

.lost-pets-directory-toolbar p{
    margin:5px 0 0;
    color:#647b91;
}

.lost-pets-filter-toggle{
    display:none;
    align-items:center;
    gap:8px;
    padding:11px 14px;
    border:1px solid #cbd8e4;
    border-radius:10px;
    background:#fff;
    color:#12365d;
    font:inherit;
    font-weight:900;
}

.lost-pets-filter-toggle span{
    min-width:20px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#dc2626;
    color:#fff;
    font-size:10px;
}

.lost-pets-directory-layout{
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    gap:24px;
    align-items:start;
}

.lost-pets-directory-filters{
    position:sticky;
    top:90px;
    padding:20px;
    border:1px solid #dce5ed;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 35px rgba(6,27,58,.055);
}

.lost-pets-filter-heading{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin-bottom:18px;
}

.lost-pets-filter-heading > div{
    display:flex;
    align-items:center;
    gap:8px;
    color:#102b50;
}

.lost-pets-filter-heading > div i{
    color:#159653;
}

.lost-pets-filter-heading a{
    color:#b42318;
    font-size:11px;
    font-weight:900;
    text-decoration:none;
}

.lost-pets-directory-filters form{
    display:grid;
    gap:15px;
}

.lost-pets-directory-filters label{
    display:block;
    color:#12365d;
    font-size:12px;
    font-weight:900;
}

.lost-pets-directory-filters input,
.lost-pets-directory-filters select{
    width:100%;
    box-sizing:border-box;
    margin-top:7px;
    padding:11px 12px;
    border:1px solid #cbd8e4;
    border-radius:9px;
    background:#fff;
    color:#102b50;
    font:inherit;
    font-size:13px;
}

.lost-pets-directory-filters input:focus,
.lost-pets-directory-filters select:focus{
    border-color:#159653;
    outline:0;
    box-shadow:0 0 0 3px rgba(21,150,83,.10);
}

.lost-pets-filter-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:12px;
    border:0;
    border-radius:10px;
    background:#159653;
    color:#fff;
    font:inherit;
    font-weight:900;
    cursor:pointer;
}

.lost-pets-directory-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.lost-pet-directory-card{
    min-width:0;
    overflow:hidden;
    border:1px solid #dce5ed;
    border-radius:19px;
    background:#fff;
    box-shadow:0 14px 38px rgba(6,27,58,.065);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.lost-pet-directory-card:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 48px rgba(6,27,58,.12);
}

.lost-pet-card-photo{
    position:relative;
    display:block;
    aspect-ratio:4 / 3;
    overflow:hidden;
    background:#e8eef4;
}

.lost-pet-card-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center center;
    background:#e8eef4;
    transition:transform .28s ease;
}

.lost-pet-directory-card:hover
.lost-pet-card-photo img{
    transform:scale(1.025);
}

.lost-pet-card-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8fa3b7;
    font-size:54px;
}

.lost-pet-card-status,
.lost-pet-card-reward{
    position:absolute;
    top:12px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:7px 10px;
    border-radius:999px;
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.lost-pet-card-status{
    left:12px;
    background:#dc2626;
}

.lost-pet-card-reward{
    right:12px;
    background:#b77900;
}

.lost-pet-card-content{
    padding:18px;
}

.lost-pet-card-title{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
}

.lost-pet-card-title span{
    display:block;
    color:#dc2626;
    font-size:9px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.lost-pet-card-title h3{
    margin:4px 0 0;
    font-size:23px;
}

.lost-pet-card-title h3 a{
    color:#071d3c;
    text-decoration:none;
}

.lost-pet-card-title > i{
    color:#159653;
    font-size:22px;
}

.lost-pet-card-summary{
    margin:7px 0 0;
    color:#647b91;
    font-size:13px;
    line-height:1.55;
}

.lost-pet-card-location,
.lost-pet-card-time{
    display:flex;
    gap:8px;
    align-items:flex-start;
    color:#506a83;
    font-size:12px;
    line-height:1.5;
}

.lost-pet-card-location{
    margin-top:16px;
}

.lost-pet-card-time{
    margin-top:8px;
}

.lost-pet-card-location i{
    margin-top:2px;
    color:#dc2626;
}

.lost-pet-card-time i{
    margin-top:2px;
    color:#71859a;
}

.lost-pet-card-footer{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin-top:17px;
    padding-top:14px;
    border-top:1px solid #e7edf3;
}

.lost-pet-card-footer > div{
    display:flex;
    gap:11px;
    color:#71859a;
    font-size:11px;
}

.lost-pet-card-footer > div span{
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.lost-pet-card-footer > a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#159653;
    font-size:12px;
    font-weight:900;
    text-decoration:none;
}

.lost-pets-empty-state{
    padding:70px 25px;
    border:1px solid #dce5ed;
    border-radius:20px;
    background:#fff;
    text-align:center;
}

.lost-pets-empty-state > i{
    color:#9db0c2;
    font-size:52px;
}

.lost-pets-empty-state h2{
    margin:16px 0 7px;
    color:#071d3c;
}

.lost-pets-empty-state p{
    color:#647b91;
}

.lost-pets-empty-state a{
    display:inline-flex;
    margin-top:13px;
    padding:11px 16px;
    border-radius:10px;
    background:#159653;
    color:#fff;
    font-weight:900;
    text-decoration:none;
}

.lost-pets-pagination{
    display:flex;
    justify-content:center;
    gap:14px;
    align-items:center;
    margin-top:30px;
}

.lost-pets-pagination > div{
    display:flex;
    gap:6px;
}

.lost-pets-pagination a{
    min-width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    box-sizing:border-box;
    padding:0 10px;
    border:1px solid #cbd8e4;
    border-radius:9px;
    background:#fff;
    color:#12365d;
    font-size:12px;
    font-weight:900;
    text-decoration:none;
}

.lost-pets-pagination a.is-active{
    border-color:#159653;
    background:#159653;
    color:#fff;
}

@media(max-width:1100px){
    .lost-pets-directory-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:850px){
    .lost-pets-filter-toggle{
        display:inline-flex;
    }

    .lost-pets-directory-layout{
        grid-template-columns:1fr;
    }

    .lost-pets-directory-filters{
        position:static;
        display:none;
    }

    .lost-pets-directory-filters.is-open{
        display:block;
    }
}

@media(max-width:620px){
    .lost-pets-directory-hero{
        padding:48px 15px;
    }

    .lost-pets-directory-hero h1{
        font-size:38px;
    }

    .lost-pets-directory-hero p{
        font-size:15px;
    }

    .lost-pets-hero-search{
        align-items:stretch;
        flex-wrap:wrap;
    }

    .lost-pets-hero-search input{
        width:calc(100% - 38px);
    }

    .lost-pets-hero-search button{
        width:100%;
    }

    .lost-pets-directory-container{
        width:min(100% - 22px,1240px);
        margin-top:22px;
    }

    .lost-pets-directory-toolbar{
        align-items:flex-start;
    }

    .lost-pets-directory-toolbar h2{
        font-size:23px;
    }

    .lost-pets-directory-grid{
        grid-template-columns:1fr;
    }

    .lost-pets-pagination{
        flex-wrap:wrap;
    }

    .lost-pets-pagination-arrow{
        order:2;
    }
}

.lost-pets-view-switch{
    display:flex;
    margin-left:auto;
    padding:4px;
    border:1px solid #d5e0e9;
    border-radius:11px;
    background:#fff;
}

.lost-pets-view-switch a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 12px;
    border-radius:8px;
    color:#536b82;
    font-size:11px;
    font-weight:900;
    text-decoration:none;
}

.lost-pets-view-switch a.is-active{
    background:#159653;
    color:#fff;
}

@media(max-width:620px){
    .lost-pets-directory-toolbar{
        flex-wrap:wrap;
    }

    .lost-pets-view-switch{
        order:3;
        width:100%;
        margin-left:0;
    }

    .lost-pets-view-switch a{
        flex:1;
        justify-content:center;
    }
}

/* Lost-pet cards: always display the complete original photograph */
.lost-pet-card img,
.lost-pets-card img,
.lost-pet-photo img,
.lost-pets-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #e8eef4 !important;
}