/* ===================================================================
   NemuTrip Theme
   File        : coverage.css
   Version     : 5.0.0
   Author      : NemuTrip
   Description : Coverage Area Section
=================================================================== */


/* ===================================================================
   01. CSS Variables
=================================================================== */

:root{

    --coverage-primary:#0D6EFD;

    --coverage-primary-dark:#0B5ED7;

    --coverage-primary-light:#EAF3FF;

    --coverage-success:#22C55E;

    --coverage-heading:#0F172A;

    --coverage-text:#64748B;

    --coverage-border:#E2E8F0;

    --coverage-white:#FFFFFF;

    --coverage-bg:#F8FAFC;

    --coverage-radius:24px;

    --coverage-radius-sm:16px;

    --coverage-shadow:
        0 12px 40px rgba(15,23,42,.08);

    --coverage-shadow-hover:
        0 20px 50px rgba(15,23,42,.12);

    --coverage-transition:.30s ease;

}



/* ===================================================================
   02. Reset
=================================================================== */

.coverage-section *{

    box-sizing:border-box;

}

.coverage-section img{

    display:block;

    max-width:100%;

    height:auto;

}

.coverage-section a{

    text-decoration:none;

    transition:var(--coverage-transition);

}

.coverage-section ul{

    margin:0;

    padding:0;

    list-style:none;

}

.coverage-section h1,
.coverage-section h2,
.coverage-section h3,
.coverage-section h4,
.coverage-section h5,
.coverage-section h6,
.coverage-section p{

    margin:0;

}



/* ===================================================================
   03. Coverage Section
=================================================================== */

.coverage-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:var(--coverage-bg);

}



/* ===================================================================
   04. Container
=================================================================== */

.coverage-container{

    width:100%;

    max-width:1320px;

    margin:0 auto;

    padding:0 16px;

}



/* ===================================================================
   05. Main Wrapper
=================================================================== */

.coverage-wrapper{

    display:flex;

    flex-direction:column;

    gap:70px;

}



/* ===================================================================
   06. Main Grid
=================================================================== */

.coverage-content{

    display:grid;

    grid-template-columns:340px minmax(0,1fr);

    gap:36px;

    align-items:start;

}



/* ===================================================================
   07. Universal Card
=================================================================== */

.coverage-card{

    background:var(--coverage-white);

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

    border-radius:var(--coverage-radius);

    box-shadow:var(--coverage-shadow);

    transition:all var(--coverage-transition);

}

.coverage-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--coverage-shadow-hover);

}

/* ===================================================================
   08. Section Heading
=================================================================== */

.coverage-heading{

    max-width:760px;

    margin:0 auto;

    text-align:center;

}



/* ===================================================================
   09. Badge
=================================================================== */

.coverage-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 24px;

    margin-bottom:22px;

    border-radius:999px;

    background:var(--coverage-primary-light);

    color:var(--coverage-primary);

    font-size:.80rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}



/* ===================================================================
   10. Main Title
=================================================================== */

.coverage-title{

    color:var(--coverage-heading);

    font-size:clamp(2.5rem,4vw,3.8rem);

    font-weight:800;

    line-height:1.18;

    letter-spacing:-.03em;

}



/* ===================================================================
   11. Highlight
=================================================================== */

.coverage-title span{

    display:block;

    color:var(--coverage-primary);

}



/* ===================================================================
   12. Description
=================================================================== */

.coverage-description{

    max-width:700px;

    margin:28px auto 0;

    color:var(--coverage-text);

    font-size:1.05rem;

    line-height:1.9;

}



/* ===================================================================
   13. Decorative Line
=================================================================== */

.coverage-divider{

    width:90px;

    height:4px;

    margin:36px auto 0;

    border-radius:999px;

    background:linear-gradient(

        90deg,

        var(--coverage-primary),

        #60A5FA

    );

}



/* ===================================================================
   14. Main Column
=================================================================== */

.coverage-sidebar{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.coverage-map-panel{

    display:flex;

    flex-direction:column;

}

/* ===================================================================
   15. Services
=================================================================== */

.coverage-services{

    display:flex;

    flex-direction:column;

    gap:18px;

}



/* ===================================================================
   16. Service Card
=================================================================== */

.coverage-service-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:24px;

    background:var(--coverage-white);

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

    border-radius:var(--coverage-radius-sm);

    box-shadow:var(--coverage-shadow);

    transition:var(--coverage-transition);

}

.coverage-service-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--coverage-shadow-hover);

    border-color:rgba(13,110,253,.20);

}



/* ===================================================================
   17. Service Icon
=================================================================== */

.coverage-service-icon{

    width:64px;

    height:64px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--coverage-primary),
        var(--coverage-primary-dark)
    );

    color:#FFFFFF;

    font-size:1.5rem;

}



/* ===================================================================
   18. Service Content
=================================================================== */

.coverage-service-content{

    flex:1;

    min-width:0;

}



/* ===================================================================
   19. Service Title
=================================================================== */

.coverage-service-title{

    margin-bottom:8px;

    color:var(--coverage-heading);

    font-size:1.08rem;

    font-weight:700;

    line-height:1.4;

}



/* ===================================================================
   20. Service Description
=================================================================== */

.coverage-service-description{

    color:var(--coverage-text);

    font-size:.95rem;

    line-height:1.75;

}

/* ===================================================================
   21. Statistics
=================================================================== */

.coverage-stats{

    display:grid;

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

    gap:16px;

}



/* ===================================================================
   22. Statistic Card
=================================================================== */

.coverage-stat-card{

    padding:22px 16px;

    text-align:center;

    background:var(--coverage-white);

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

    border-radius:var(--coverage-radius-sm);

    box-shadow:var(--coverage-shadow);

    transition:var(--coverage-transition);

}

.coverage-stat-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--coverage-shadow-hover);

}



/* ===================================================================
   23. Statistic Number
=================================================================== */

.coverage-stat-number{

    display:block;

    margin-bottom:8px;

    color:var(--coverage-primary);

    font-size:2rem;

    font-weight:800;

    line-height:1;

}



/* ===================================================================
   24. Statistic Label
=================================================================== */

.coverage-stat-label{

    display:block;

    color:var(--coverage-text);

    font-size:.90rem;

    font-weight:600;

    line-height:1.5;

}



/* ===================================================================
   25. Booking
=================================================================== */

.coverage-booking{

    margin-top:8px;

}



/* ===================================================================
   26. Booking Button
=================================================================== */

.coverage-booking-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    min-height:60px;

    padding:18px 24px;

    border:none;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--coverage-primary),
        var(--coverage-primary-dark)
    );

    color:#FFFFFF;

    font-size:1rem;

    font-weight:700;

    box-shadow:

        0 12px 30px rgba(13,110,253,.25);

    transition:var(--coverage-transition);

}



/* ===================================================================
   27. Booking Hover
=================================================================== */

.coverage-booking-button:hover{

    color:#FFFFFF;

    transform:translateY(-3px);

    box-shadow:

        0 18px 40px rgba(13,110,253,.30);

}

.coverage-booking-button i{

    font-size:1.15rem;

}

/* ===================================================================
   28. Map Card
=================================================================== */

.coverage-map-card{

    background:var(--coverage-white);

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

    border-radius:var(--coverage-radius);

    box-shadow:var(--coverage-shadow);

}



/* ===================================================================
   29. Map Header
=================================================================== */

.coverage-map-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:24px;

    padding:28px 32px;

    border-bottom:1px solid var(--coverage-border);

}



/* ===================================================================
   30. Map Heading
=================================================================== */

.coverage-map-heading{

    flex:1;

}

.coverage-map-title{

    color:var(--coverage-heading);

    font-size:1.50rem;

    font-weight:700;

    line-height:1.3;

}

.coverage-map-subtitle{

    margin-top:10px;

    color:var(--coverage-text);

    font-size:.95rem;

    line-height:1.8;

}



/* ===================================================================
   31. Coverage Status
=================================================================== */

.coverage-map-status{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:#ECFDF5;

    color:var(--coverage-success);

    font-size:.85rem;

    font-weight:700;

}

.coverage-status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--coverage-success);

}



/* ===================================================================
   32. Map Wrapper
=================================================================== */

.coverage-map-wrapper{

    padding:24px;

}



/* ===================================================================
   33. Map Image
=================================================================== */

.coverage-map-image{

    width:100%;

    height:auto;

    border-radius:18px;

    display:block;

}



/* ===================================================================
   34. Map Footer
=================================================================== */

.coverage-map-footer{

    padding:24px 32px;

    border-top:1px solid var(--coverage-border);

}



/* ===================================================================
   35. Tags
=================================================================== */

.coverage-map-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.coverage-map-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:var(--coverage-primary-light);

    color:var(--coverage-primary);

    font-size:.85rem;

    font-weight:600;

}

.coverage-map-tag i{

    font-size:.95rem;

}

/* ===================================================================
   36. Bottom CTA
=================================================================== */

.coverage-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:32px;

    margin-top:48px;

    padding:32px 40px;

    background:var(--coverage-white);

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

    border-radius:var(--coverage-radius);

    box-shadow:var(--coverage-shadow);

}



/* ===================================================================
   37. Bottom Content
=================================================================== */

.coverage-bottom-content{

    display:flex;

    align-items:center;

    gap:20px;

    flex:1;

}



/* ===================================================================
   38. Bottom Icon
=================================================================== */

.coverage-bottom-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    flex-shrink:0;

    border-radius:20px;

    background:linear-gradient(

        135deg,

        var(--coverage-primary),

        var(--coverage-primary-dark)

    );

    color:#FFFFFF;

    font-size:1.8rem;

}



/* ===================================================================
   39. Bottom Text
=================================================================== */

.coverage-bottom-text{

    flex:1;

}

.coverage-bottom-text h3{

    margin-bottom:10px;

    color:var(--coverage-heading);

    font-size:1.35rem;

    font-weight:700;

    line-height:1.3;

}

.coverage-bottom-text p{

    color:var(--coverage-text);

    font-size:.96rem;

    line-height:1.8;

}



/* ===================================================================
   40. Bottom Action
=================================================================== */

.coverage-bottom-action{

    flex-shrink:0;

}



/* ===================================================================
   41. Bottom Button
=================================================================== */

.coverage-bottom-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:220px;

    height:58px;

    padding:0 28px;

    border-radius:999px;

    background:linear-gradient(

        135deg,

        var(--coverage-primary),

        var(--coverage-primary-dark)

    );

    color:#FFFFFF;

    font-size:1rem;

    font-weight:700;

    box-shadow:

        0 14px 32px rgba(13,110,253,.22);

    transition:var(--coverage-transition);

}

.coverage-bottom-button:hover{

    color:#FFFFFF;

    transform:translateY(-3px);

    box-shadow:

        0 20px 40px rgba(13,110,253,.30);

}

.coverage-bottom-button i{

    font-size:1rem;

}



/* ===================================================================
   42. Bottom Responsive Helper
=================================================================== */

.coverage-bottom > *{

    min-width:0;

}

/* ===================================================================
   43. Responsive - Laptop
=================================================================== */

@media (max-width:1200px){

    .coverage-content{

        grid-template-columns:320px minmax(0,1fr);

        gap:30px;

    }

    .coverage-map-header{

        padding:24px;

    }

    .coverage-map-wrapper{

        padding:20px;

    }

}



/* ===================================================================
   44. Responsive - Tablet
=================================================================== */

@media (max-width:992px){

    .coverage-section{

        padding:90px 0;

    }

    .coverage-content{

        grid-template-columns:1fr;

        gap:30px;

    }

    .coverage-sidebar{

        order:2;

    }

    .coverage-map-panel{

        order:1;

    }

    .coverage-map-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .coverage-map-status{

        align-self:flex-start;

    }

    .coverage-bottom{

        flex-direction:column;

        align-items:flex-start;

    }

    .coverage-bottom-action{

        width:100%;

    }

    .coverage-bottom-button{

        width:100%;

    }

}



/* ===================================================================
   45. Responsive - Mobile
=================================================================== */

@media (max-width:768px){

    .coverage-section{

        padding:80px 0;

    }

    .coverage-content{

        gap:24px;

    }

    .coverage-title{

        font-size:2.2rem;

    }

    .coverage-description{

        font-size:1rem;

    }

    .coverage-service-card{

        padding:20px;

    }

    .coverage-service-icon{

        width:58px;

        height:58px;

        font-size:1.35rem;

    }

    .coverage-stats{

        grid-template-columns:1fr;

    }

    .coverage-map-header,

    .coverage-map-wrapper,

    .coverage-map-footer{

        padding:18px;

    }

    .coverage-map-tags{

        justify-content:center;

    }

    .coverage-bottom{

        padding:24px;

    }

    .coverage-bottom-content{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

}



/* ===================================================================
   46. Responsive - Small Mobile
=================================================================== */

@media (max-width:480px){

    .coverage-title{

        font-size:1.9rem;

    }

    .coverage-badge{

        font-size:.75rem;

        padding:8px 18px;

    }

    .coverage-map-title{

        font-size:1.25rem;

    }

    .coverage-map-subtitle{

        font-size:.90rem;

    }

    .coverage-map-tag{

        width:100%;

        justify-content:center;

    }

}

/* ===================================================================
   47. Focus Accessibility
=================================================================== */

.coverage-section a:focus-visible,
.coverage-section button:focus-visible{

    outline:3px solid rgba(13,110,253,.35);

    outline-offset:4px;

    border-radius:12px;

}



/* ===================================================================
   48. Selection
=================================================================== */

.coverage-section ::selection{

    background:rgba(13,110,253,.18);

    color:var(--coverage-heading);

}



/* ===================================================================
   49. Image Optimization
=================================================================== */

.coverage-map-image{

    backface-visibility:hidden;

    image-rendering:auto;

    -webkit-user-drag:none;

    user-select:none;

}



/* ===================================================================
   50. Smooth Interaction
=================================================================== */

.coverage-service-card,
.coverage-stat-card,
.coverage-booking-button,
.coverage-map-card,
.coverage-map-tag,
.coverage-bottom,
.coverage-bottom-button{

    transition:

        transform .30s ease,

        box-shadow .30s ease,

        border-color .30s ease,

        background-color .30s ease,

        color .30s ease;

}



/* ===================================================================
   51. Reduced Motion
=================================================================== */

@media (prefers-reduced-motion:reduce){

    .coverage-section *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}



/* ===================================================================
   52. Print
=================================================================== */

@media print{

    .coverage-booking,

    .coverage-bottom-action{

        display:none !important;

    }

}



/* ===================================================================
   53. Final Production Notes
=================================================================== */

/*

Theme      : NemuTrip

File       : coverage.css

Version    : 5.0.0

Status     : FINAL PRODUCTION

Compatible :
- WordPress 6.8+
- Bootstrap 5.3.x
- Bootstrap Icons 1.13.x

Optimized :
✔ Responsive
✔ Performance
✔ Accessibility
✔ Maintainability

*/