/* ==========================
   English FAN — Global Brand Theme
   Loaded on every page from master.blade.php
   Blue #0B10F5 / Red #F11414 (from logo)
========================== */

:root{

    --ef-blue:#1414E8;

    --ef-blue-dark:#0B0DB0;

    --ef-red:#F11414;

    --ef-red-dark:#D40F0F;

    --ef-navy:#0B0F2E;

}

/* Buttons (site-wide) */

.btn.v1{

    background:var(--ef-red) !important;

    border-color:var(--ef-red) !important;

}

.btn.v1:hover{

    background:var(--ef-red-dark) !important;

    border-color:var(--ef-red-dark) !important;

}

.btn.v2{

    border-color:var(--ef-blue) !important;

    color:var(--ef-blue) !important;

}

.btn.v2:hover{

    background:var(--ef-blue) !important;

    color:#fff !important;

}

/* Section titles (site-wide) */

.section-title span{

    color:var(--ef-red) !important;

}

.section-title h2{

    color:var(--ef-navy) !important;

}

/* Header */

.main-menu > li > a:hover,
.main-menu > li.active > a{

    color:var(--ef-red) !important;

}

.header-auth-area{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:14px;

    margin-right:16px;

}

.btn.v1.btn-sm{

    padding:8px 18px;

    font-size:14px;

    display:inline-flex;

    align-items:center;

    gap:6px;

    border-radius:8px;

}

/* Header — account dropdown (logged in) */

.header-account-menu{

    position:relative;

    display:inline-block;

}

.header-account-toggle{

    display:inline-flex;

    align-items:center;

    gap:6px;

    background:transparent;

    border:none;

    color:var(--ef-navy);

    font-size:14px;

    cursor:pointer;

    padding:8px 4px;

}

.header-account-toggle:hover{

    color:var(--ef-red);

}

.header-account-dropdown{

    position:absolute;

    top:calc(100% + 10px);

    left:0;

    min-width:190px;

    background:#fff;

    border-radius:12px;

    box-shadow:0 15px 40px rgba(11,15,46,.18);

    padding:8px;

    opacity:0;

    visibility:hidden;

    transform:translateY(8px);

    transition:.25s;

    z-index:50;

}

.header-account-menu:hover .header-account-dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.header-account-dropdown a,
.header-account-dropdown button{

    display:flex;

    align-items:center;

    gap:8px;

    width:100%;

    background:transparent;

    border:none;

    text-align:right;

    padding:10px 12px;

    border-radius:8px;

    color:var(--ef-navy);

    font-size:14px;

}

.header-account-dropdown a:hover,
.header-account-dropdown button:hover{

    background:#f5f4ff;

    color:var(--ef-red);

}

/* Header — mobile account icon button (inside mobile-bar-wrap) */

.mobile-account-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

    background:var(--ef-red);

    color:#fff !important;

    font-size:16px;

}

/* Auth item inside the mobile slide-out menu */

.main-menu li.xl-none a{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--ef-red) !important;

    font-weight:600;

}

/* Footer */

.footer-wrap .link-title:after,
.footer-wrap .widget-title:after{

    background:var(--ef-red) !important;

}

.footer-wrap a:hover{

    color:var(--ef-red) !important;

}












/* ==========================================================
   English FAN — Header / Hero spacing
   A small intentional breathing space between header and hero
========================================================== */

.header-wrap.style1 {
    margin-bottom: 18px !important;
}

/* Tablet */
@media (max-width: 991px) {
    .header-wrap.style1 {
        margin-bottom: 14px !important;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .header-wrap.style1 {
        margin-bottom: 10px !important;
    }
}






/* ==========================================================
   ENGLISH FAN — FIX INTERNAL PAGE HEADER GAP
   Header is relative, so old theme's 127px offset is not needed.
========================================================== */

.ef-header + main .breadcrumb-wrap {
    margin-top: 0 !important;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .ef-header + main .breadcrumb-wrap {
        margin-top: 0 !important;
    }

}

@media (max-width: 576px) {

    .ef-header + main .breadcrumb-wrap {
        margin-top: 0 !important;
    }

}