/* ============================================================
   ErrandPay site fixes — appended after main.css/megamenu.css
   Addresses: mobile menu theme, broken accordion icons, plain
   cards, blog subscribe overflow, scroll-to-top gradient,
   missing/oversized service-tile icons.
   ============================================================ */
:root {
    --ep-blue: #1e3a8a;
    --ep-blue-dark: #172554;
    --ep-blue-light: #3b82f6;
    --ep-blue-soft: #eef2ff;
    --ep-amber: #f59e0b;
    --ep-line: #e5e7eb;
    --ep-ink: #0f172a;
    --ep-slate: #475569;
}

/* ---------- 1. Mobile menu: deep-blue theme + readable links ---------- */
@media (max-width: 1199px) {
    /* Override the dark template overlay on mobile header */
    header .container,
    header .container-fluid {
        background-color: transparent !important;
    }
    .prt-header-style-01 .site-header-menu .site-header-menu-inner,
    .prt-header-style-01 .site-header-menu .prt-container-for-header {
        background-color: var(--ep-blue) !important;
    }
    /* The dropdown panel itself */
    #site-header-menu .main-menu.menu-mobile,
    #site-header-menu .main-menu.menu-mobile.show {
        background-color: var(--ep-blue) !important;
    }
    #site-header-menu .main-menu.menu-mobile.show ul {
        background-color: var(--ep-blue) !important;
    }
    #site-header-menu .main-menu.menu-mobile.show ul > li > a,
    #site-header-menu .main-menu.menu-mobile ul > li > a,
    #site-header-menu .site-navigation ul.menu li > ul.mega-submenu li.mega-menu-item > a {
        color: #ffffff !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(255,255,255,.10) !important;
        padding: 14px 18px !important;
        font-weight: 500 !important;
    }
    #site-header-menu .main-menu.menu-mobile.show ul > li > a:hover,
    #site-header-menu .main-menu.menu-mobile.show ul > li > a.active,
    #site-header-menu .main-menu.menu-mobile.show ul > li.active > a {
        background-color: var(--ep-blue-dark) !important;
        color: #ffffff !important;
    }
    /* Hamburger bars white for visibility */
    .menubar-inner,
    .menubar-inner:before,
    .menubar-inner:after {
        background-color: #ffffff !important;
    }
    .menubar--squeeze.is-active .menubar-inner {
        background-color: transparent !important;
    }
    /* Header CTAs visible on dark blue */
    .prt-header-style-01 .header_extra { display: none !important; }
}

/* ---------- 2. Accordion +/- icons (force visible across pages) ---------- */
.accordion .toggle.prt-toggle_style_classic .toggle-title a:after,
.accordion .toggle.prt-toggle_style_classic .toggle-title a.active:after {
    font-family: inherit !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
}
.accordion .toggle.prt-toggle_style_classic .toggle-title a:after {
    content: "+" !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--ep-blue-soft) !important;
    color: var(--ep-blue) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.accordion .toggle.prt-toggle_style_classic .toggle-title a.active:after {
    /* Use proper minus character (U+2212) instead of broken icon */
    content: "\2212" !important;
    background: var(--ep-blue) !important;
    color: #ffffff !important;
}

/* ---------- 3. Card backgrounds: subtle patterned/gradient feel ---------- */
.ep-service-grid .ep-service-tile,
.ep-usecase {
    background:
        linear-gradient(180deg, #ffffff 0%, #f9fbff 100%) !important;
    border: 1px solid var(--ep-line) !important;
    border-radius: 18px !important;
    padding: 30px 26px !important;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ep-service-grid .ep-service-tile::before,
.ep-usecase::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30,58,138,.07) 0%, transparent 70%);
    pointer-events: none;
}
.ep-service-grid .ep-service-tile::after,
.ep-usecase::after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,.05) 0%, transparent 70%);
    pointer-events: none;
}
.ep-service-grid .ep-service-tile:hover,
.ep-usecase:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(15,23,42,.10) !important;
    border-color: rgba(30,58,138,.25) !important;
}

/* ---------- 4. Service-tile icon: bullet-proof rendering ---------- */
.ep-service-grid .ep-service-tile .icon,
.ep-usecase .usecase-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--ep-blue) 0%, var(--ep-blue-dark) 100%) !important;
    color: #ffffff !important;
    margin-bottom: 18px !important;
    box-shadow: 0 8px 18px rgba(30,58,138,.25);
    position: relative;
    z-index: 1;
}
.ep-service-grid .ep-service-tile .icon i,
.ep-usecase .usecase-icon i {
    font-size: 26px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    display: inline-block;
}
/* Fallback: if the flaticon webfont fails to render the glyph, the icon
   tile still shows a coloured square with a generic dot/bullet symbol. */
.ep-service-grid .ep-service-tile .icon::before,
.ep-usecase .usecase-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.15) 100%);
    pointer-events: none;
}

/* ---------- 5. Blog subscribe form overflow ---------- */
.ep-pricing-card form,
.ep-pricing-card.form,
form.ep-pricing-card,
.bg-base-grey form.ep-pricing-card {
    width: 100%;
    box-sizing: border-box;
}
.ep-pricing-card .form-control,
.ep-pricing-card input[type="email"],
.ep-pricing-card input[type="text"] {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    border: 1.5px solid var(--ep-line) !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
    color: var(--ep-ink) !important;
}
.ep-pricing-card .form-control:focus,
.ep-pricing-card input:focus {
    outline: none !important;
    border-color: var(--ep-blue) !important;
    box-shadow: 0 0 0 4px var(--ep-blue-soft) !important;
}
.ep-pricing-card .prt-btn.w-100,
.ep-pricing-card button.w-100 {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    white-space: nowrap;
}

/* ---------- 6. Scroll-to-top: brand gradient ---------- */
#totop.top-visible,
#totop.top-visible {
    background: linear-gradient(135deg, var(--ep-blue-light) 0%, var(--ep-blue) 50%, var(--ep-blue-dark) 100%) !important;
    background-size: 200% auto !important;
    box-shadow: 0 8px 22px rgba(30,58,138,.35) !important;
    transition: all .3s ease-in-out !important;
}
#totop.top-visible:hover {
    background-position: right center !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(30,58,138,.45) !important;
}
#totop.top-visible i {
    color: #ffffff !important;
}

/* ---------- 7. Hero slider: equalize slide 2/3 to slide 1 ---------- */
/* Slide 2 markup is now identical to slide 1 - reset its old offset/right-align rules */
.hero-section .hero-slide.slide-2 .hero-content-block {
    padding: 133px 0 0 !important;
    overflow: visible !important;
}
.hero-section .hero-slide.slide-2 .hero-content-block .hero-content .prt-hero-pre-title,
.hero-section .hero-slide.slide-2 .hero-content-block .hero-content .prt-hero-title,
.hero-section .hero-slide.slide-2 .hero-content-block .hero-content .prt-btn-desc p {
    float: none !important;
    text-align: left !important;
}
/* Replace template slider photos with brand-appropriate images.
   Drop slider_1.png / slider_2.png / slider_3.png into images/slider/.
   Slide 3 also gets a dark gradient overlay so the white hero text
   stays readable over any photo. */
.hero-section .hero-slide.slide-1 {
    background-image:
        linear-gradient(90deg, rgba(15,23,42,.72) 0%, rgba(15,23,42,.45) 55%, rgba(15,23,42,.15) 100%),
        url(../images/slider/slider_1.png) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    background-color: var(--ep-blue-dark) !important;
}
.hero-section .hero-slide.slide-2 {
    background-image:
        linear-gradient(90deg, rgba(15,23,42,.72) 0%, rgba(15,23,42,.45) 55%, rgba(15,23,42,.15) 100%),
        url(../images/slider/slider_2.png) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    background-color: var(--ep-blue-dark) !important;
}
.hero-section .hero-slide.slide-3 {
    background-image:
        linear-gradient(90deg, rgba(15,23,42,.78) 0%, rgba(15,23,42,.50) 55%, rgba(15,23,42,.20) 100%),
        url(../images/slider/slider_3.png) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    background-color: var(--ep-blue-dark) !important;
    position: relative;
    overflow: hidden;
}
.hero-section .hero-slide.slide-3 .hero-content-block {
    padding: 133px 0 0;
    position: relative;
    z-index: 2;
}
/* Equalize H1 across all 3 slides */
.hero-slide .prt-hero-titile h1,
.hero-slide .hero-content h1.title {
    font-size: 56px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}
@media (max-width: 991px) {
    .hero-slide .prt-hero-titile h1,
    .hero-slide .hero-content h1.title { font-size: 38px !important; }
    .hero-section .hero-slide.slide-2 .hero-content-block,
    .hero-section .hero-slide.slide-3 .hero-content-block { padding-top: 90px !important; }
}
@media (max-width: 575px) {
    .hero-slide .prt-hero-titile h1,
    .hero-slide .hero-content h1.title { font-size: 28px !important; }
}

/* ============================================================
   FINAL OVERRIDES — replace earlier rules where template /
   inline-style specificity was winning.
   ============================================================ */

/* --- Cards: solid light-blue tint (replaces white + gradient blobs) ---
   Target .ep-service-tile directly so cards on pages that don't wrap
   them in .ep-service-grid (about-us, team, faq, service, contact-us,
   partner-with-us, etc.) also pick up the home-page light-blue style. */
.ep-service-tile,
.ep-service-grid .ep-service-tile,
.ep-usecase {
    background: var(--ep-blue-soft) !important;
    background-image: none !important;
    border: 1px solid #dbe4ff !important;
    border-radius: 16px !important;
}
.ep-service-tile::before,
.ep-service-tile::after,
.ep-service-grid .ep-service-tile::before,
.ep-service-grid .ep-service-tile::after,
.ep-usecase::before,
.ep-usecase::after {
    content: none !important;
    background: none !important;
}
.ep-service-tile:hover,
.ep-service-grid .ep-service-tile:hover,
.ep-usecase:hover {
    background: #e0e7ff !important;
    border-color: #c7d2fe !important;
}
/* Match the home-page icon styling (light-blue chip, brand-blue glyph)
   so other pages don't show the dark gradient tile from earlier rules. */
.ep-service-tile .icon,
.ep-service-grid .ep-service-tile .icon,
.ep-usecase .usecase-icon {
    background: rgba(30, 58, 138, 0.10) !important;
    background-image: none !important;
    color: var(--ep-blue) !important;
    box-shadow: none !important;
}
.ep-service-tile .icon i,
.ep-service-grid .ep-service-tile .icon i,
.ep-usecase .usecase-icon i {
    color: var(--ep-blue) !important;
}

/* --- Accordion: target .style1 selector used in faq.html so we beat
       the template rule at css/shortcodes.css line 3340 which uses
       themify font + chevron rotation. Force ASCII +/- glyphs. --- */
.accordion .toggle.prt-toggle_style_classic .toggle-title a:after,
.accordion.style1 .toggle.prt-toggle_style_classic .toggle-title a:after,
.accordion.style2 .toggle.prt-toggle_style_classic .toggle-title a:after {
    font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
    content: "+" !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--ep-blue-soft) !important;
    color: var(--ep-blue) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    left: auto !important;
    transform: translateY(-50%) rotate(0deg) !important;
    border: none !important;
}
.accordion .toggle.prt-toggle_style_classic .toggle-title a.active:after,
.accordion.style1 .toggle.prt-toggle_style_classic .toggle-title a.active:after,
.accordion.style2 .toggle.prt-toggle_style_classic .toggle-title a.active:after {
    content: "\2212" !important; /* unicode minus */
    background: var(--ep-blue) !important;
    color: #ffffff !important;
    transform: translateY(-50%) rotate(0deg) !important;
}
/* Make sure title link reserves room for the icon */
.accordion.style1 .toggle.prt-toggle_style_classic .toggle-title a,
.accordion.style2 .toggle.prt-toggle_style_classic .toggle-title a {
    padding-right: 60px !important;
    position: relative !important;
}

/* --- Subscribe form: the .ep-pricing-card form has padding 36px 28px
       with default content-box, so the form itself overflows its
       column by 56px. Force border-box on the form and all children. --- */
form.ep-pricing-card,
.ep-pricing-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
}
.ep-pricing-card,
.ep-pricing-card * {
    box-sizing: border-box !important;
}
.ep-pricing-card .form-control,
.ep-pricing-card input[type="email"],
.ep-pricing-card input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}
.ep-pricing-card .prt-btn,
.ep-pricing-card .prt-btn.w-100,
.ep-pricing-card button.prt-btn,
.ep-pricing-card button[type="submit"] {
    display: block !important;
    /* width: 100% !important; */
    max-width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
}
.add-width{
    width: 25% !important;
}