/* =========================================================
   AF_Recent v1.0.0
   Developed by Ilyas Benayad
   Isolated afr-* namespace
   ========================================================= */

.afr-section{
    --afr-orange:#ef531c;
    --afr-navy:#172238;
    --afr-text:#4c525b;
    width:100%;
    padding:30px 0 40px;
    background:#fff;
    color:var(--afr-navy);
    font-family:Arial,Helvetica,sans-serif;
    overflow:hidden;
}

.afr-section *,
.afr-section *::before,
.afr-section *::after{
    box-sizing:border-box;
}

.afr-container{
    width:calc(100% - 80px);
    max-width:1500px;
    margin:0 auto;
    min-width:0;
}

/* HEADING */
.afr-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-bottom:20px;
}

.afr-heading h2{
    min-width:0;
    margin:0;
    color:var(--afr-navy);
    font-size:25px;
    line-height:1.2;
    letter-spacing:-.5px;
    overflow-wrap:anywhere;
}

.afr-heading h2 span{
    color:var(--afr-orange);
}

/* FILTERS */
.afr-filters{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.afr-filter{
    flex:0 0 auto;
    border:1px solid transparent;
    background:transparent;
    color:#737982;
    padding:8px 14px;
    border-radius:20px;
    font-size:11px;
    line-height:1.2;
    cursor:pointer;
    white-space:nowrap;
    transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease;
}

.afr-filter.is-active{
    color:#ed511b;
    border-color:#edb59e;
    background:#fff;
}

@media (hover:hover) and (pointer:fine){
    .afr-filter:hover{
        color:var(--afr-orange);
        transform:translateY(-1px);
    }
}

/* OPERATION */
.afr-operation{
    display:grid;
    grid-template-columns:minmax(0,43%) minmax(0,57%);
    min-height:300px;
    margin-bottom:18px;

    background:#fff;
    border:1px solid #eee9e6;
    border-radius:10px;
    overflow:hidden;

    opacity:1;
    transform:none;
    transition:
        opacity .25s ease,
        transform .25s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.afr-operation.is-hidden{
    display:none!important;
}

@media (hover:hover) and (pointer:fine){
    .afr-operation:hover{
        border-color:rgba(239,83,28,.16);
        box-shadow:0 14px 34px rgba(23,34,56,.08);
        transform:translateY(-2px);
    }
}

/* MEDIA */
.afr-media{
    position:relative;
    min-width:0;
    min-height:300px;
    background:#eee;
    overflow:hidden;
    isolation:isolate;
}

.afr-main-image{
    display:block;
    width:100%;
    height:100%;
    min-height:300px;
    max-width:none;
    object-fit:cover;
    object-position:center;
    transition:opacity .18s ease,transform .5s ease;
}

.afr-main-image.is-changing{
    opacity:.35;
}

@media (hover:hover) and (pointer:fine){
    .afr-operation:hover .afr-main-image{
        transform:scale(1.018);
    }
}

/* THUMBS */
.afr-thumbs{
    position:absolute;
    left:15px;
    right:15px;
    bottom:12px;
    z-index:5;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    min-width:0;
}

.afr-thumb-strip{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    overflow:hidden;
}

.afr-thumb{
    flex:0 0 auto;
    padding:0;
    border:0;
    background:transparent;
    border-radius:5px;
    cursor:pointer;
    opacity:.82;
    transition:opacity .2s ease,transform .2s ease;
}

.afr-thumb.is-active{
    opacity:1;
}

.afr-thumb img{
    display:block;
    width:60px;
    height:45px;
    object-fit:cover;
    border-radius:5px;
    border:2px solid #fff;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.afr-thumb.is-active img{
    border-color:var(--afr-orange);
}

.afr-nav{
    flex:0 0 27px;
    width:27px;
    height:27px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#60666d;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 2px 7px rgba(0,0,0,.15);
}

/* CONTENT */
.afr-content{
    min-width:0;
    padding:25px 28px;
}

.afr-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.afr-top span{
    min-width:0;
    color:var(--afr-orange);
    font-size:10px;
    line-height:1.2;
    font-weight:700;
    overflow-wrap:anywhere;
}

.afr-top b{
    flex:0 0 auto;
    padding:5px 12px;
    border-radius:15px;
    background:#fff0e9;
    color:var(--afr-orange);
    font-size:10px;
    line-height:1;
}

.afr-content h3{
    width:100%;
    margin:8px 0 6px;
    color:var(--afr-navy);
    font-size:23px;
    line-height:1.25;
    overflow-wrap:anywhere;
    word-break:normal;
}

.afr-route{
    width:100%;
    margin-bottom:17px;
    color:#555d68;
    font-size:12px;
    line-height:1.35;
    overflow-wrap:anywhere;
}

.afr-route span{
    color:var(--afr-orange);
}

/* DESCRIPTION */
.afr-description{
    min-width:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    padding:12px 14px;
    background:#fff8f4;
    border-radius:6px;
}

.afr-description > div{
    min-width:0;
}

.afr-description strong{
    display:block;
    margin-bottom:4px;
    color:var(--afr-orange);
    font-size:10px;
    line-height:1.2;
}

.afr-description p{
    width:100%;
    margin:0;
    color:#4c525b;
    font-size:10px;
    line-height:1.5;
    overflow-wrap:anywhere;
    word-break:normal;
}

/* DETAILS */
.afr-details{
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    margin:17px 0 14px;
}

.afr-details span{
    min-width:0;
    max-width:100%;
    color:#4b525c;
    font-size:10px;
    line-height:1.35;
    overflow-wrap:anywhere;
}

/* LINK */
.afr-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    max-width:100%;
    padding:7px 13px;
    border:1px solid #edb099;
    border-radius:5px;
    color:var(--afr-orange);
    font-size:10px;
    line-height:1.2;
    text-decoration:none!important;
    transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}

.afr-link:hover{
    background:var(--afr-orange);
    color:#fff;
    transform:translateY(-1px);
}

/* TABLET */
@media (max-width:1100px){
    .afr-container{
        width:calc(100% - 50px);
    }

    .afr-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .afr-filters{
        width:100%;
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        scrollbar-width:thin;
        padding-bottom:5px;
    }

    .afr-operation{
        grid-template-columns:minmax(0,45%) minmax(0,55%);
    }

    .afr-content{
        padding:20px;
    }
}

/* MOBILE */
@media (max-width:768px){
    .afr-container{
        width:calc(100% - 32px);
    }

    .afr-heading{
        gap:16px;
    }

    .afr-operation{
        grid-template-columns:1fr;
        min-height:0;
    }

    .afr-media{
        min-height:260px;
        height:260px;
    }

    .afr-main-image{
        min-height:260px;
        height:260px;
    }

    .afr-content{
        padding:20px 18px;
    }

    .afr-content h3{
        font-size:21px;
    }

    .afr-description{
        grid-template-columns:1fr;
        gap:12px;
    }

    .afr-thumbs{
        left:10px;
        right:10px;
        gap:5px;
    }

    .afr-thumb-strip{
        justify-content:flex-start;
        overflow-x:auto;
        scrollbar-width:none;
    }

    .afr-thumb-strip::-webkit-scrollbar{
        display:none;
    }
}

/* SMALL MOBILE */
@media (max-width:480px){
    .afr-container{
        width:calc(100% - 24px);
    }

    .afr-heading h2{
        font-size:22px;
    }

    .afr-media,
    .afr-main-image{
        min-height:220px;
        height:220px;
    }

    .afr-thumb img{
        width:50px;
        height:38px;
    }

    .afr-details{
        flex-direction:column;
        gap:8px;
    }

    .afr-content{
        padding:18px 15px;
    }
}

/* HARD SAFETY */
.elementor-widget-af_recent,
.elementor-widget-af_recent .elementor-widget-container,
.afr-section,
.afr-container,
.afr-heading,
.afr-filters,
.afr-list,
.afr-operation,
.afr-media,
.afr-content,
.afr-description{
    max-width:100%;
}

@media (prefers-reduced-motion:reduce){
    .afr-section *,
    .afr-section *::before,
    .afr-section *::after{
        animation:none!important;
        transition:none!important;
    }
}