/* assets/css/fs-navbar.css */
/* Moderniseert de bestaande Unify navbar zonder JS/markup te breken */

:root{
    --nav-hairline: rgba(14,24,39,.08);
    --nav-bg: rgba(255,255,255,.92);
    --nav-bg-solid: #fff;
    --nav-shadow: 0 10px 24px rgba(11,18,32,.06);
    --nav-radius: 18px;
}

/* Header “skin” */
#js-header.u-header{
    background: var(--nav-bg-solid);
}

/* Topbar: minder “legacy randen”, iets meer ruimte */
#js-header .u-header__section{
    border-bottom: 1px solid var(--nav-hairline) !important;
}

#js-header .u-header__section .container{
    position: relative;
}

/* Maak de hele bovenste rij compacter + modern */
#js-header .u-header__section:first-child{
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
}

/* Logo sizing */
#js-header .navbar-logo{
    height: 34px;
    width: auto;
    display: block;
}

/* Searchform: moderne pill + rustige schaduw */
#searchform-1{
    border: 1px solid rgba(14,24,39,.10);
    border-radius: 9999px !important;
    box-shadow: 0 8px 18px rgba(11,18,32,.06) !important;
    overflow: hidden; /* pill clean */
}

#searchform-1 .form-control{
    border: 0 !important;
    box-shadow: none !important;
    background: rgba(255,255,255,.96);
}

#searchform-1 .form-control:focus{
    outline: none !important;
    box-shadow: none !important;
}

/* Search button: cohesion accent */
#searchform-1 button{
    border: 0 !important;
    background: var(--brand) !important;
}
#searchform-1 button:hover{
    background: var(--brand-2) !important;
}

/* User actions: icon buttons als “pills” */
#js-header .u-icon-v1{
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(14,24,39,.10);
    background: rgba(255,255,255,.92);
    color: rgba(61,61,61,.82) !important;
    transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}

#js-header .u-icon-v1:hover,
#js-header .u-icon-v1:focus{
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), .28);
    box-shadow: 0 10px 24px rgba(11,18,32,.08);
    color: var(--ink) !important;
}

/* Snellijsten & basket containers: hou ze inline en netjes */
#snellijsten, #winkelwagentje{
    vertical-align: middle;
}

/* Mijn Feyen.shop knop modern */
#js-header a.u-btn-deeporange{
    background: rgba(var(--accent-rgb), .10) !important;
    border: 1px solid rgba(var(--accent-rgb), .28) !important;
    color: var(--ink) !important;
    font-weight: 950;
    border-radius: 9999px !important;
    padding: 10px 14px !important;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(11,18,32,.06);
}

#js-header a.u-btn-deeporange:hover{
    background: rgba(var(--accent-rgb), .14) !important;
    box-shadow: 0 16px 40px rgba(11,18,32,.10);
    transform: translateY(-1px);
}

/* Admin takeover banner: maak het een “chip” */
#js-header .nav-link.g-color-red{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px !important;
    border-radius: 9999px;
    border: 1px solid rgba(var(--accent-rgb), .25);
    background: rgba(var(--accent-rgb), .10);
    font-weight: 900;
    color: var(--accent) !important;
}

/* Tweede sectie (menu): rustiger, minder unify “druk” */
#js-header .navbar{
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Nav links: modern hover */
#js-header .navbar-nav .nav-link{
    border-radius: 9999px;
    padding: 8px 12px !important;
    font-weight: 900;
    color: rgba(61,61,61,.88) !important;
    transition: background .15s ease, color .15s ease, transform .08s ease;
}

#js-header .navbar-nav .nav-link:hover,
#js-header .navbar-nav .nav-link:focus{
    background: rgba(var(--accent-rgb), .10);
    color: var(--ink) !important;
    transform: translateY(-1px);
}

/* Active state (als Unify active class gebruikt) */
#js-header .navbar-nav .active > .nav-link,
#js-header .navbar-nav .nav-link.active{
    background: rgba(var(--accent-rgb), .12);
    border: 1px solid rgba(var(--accent-rgb), .25);
}

/* Mobile: toggler modern */
#js-header .navbar-toggler{
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(14,24,39,.10);
    background: rgba(255,255,255,.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(11,18,32,.06);
}

#js-header .navbar-toggler:hover{
    border-color: rgba(var(--accent-rgb), .25);
}

/* Autocomplete container (search_section): maak het niet “plomp” */
#search_section{
    border-bottom: 1px solid var(--nav-hairline) !important;
    background: var(--nav-bg-solid) !important;
}

/* ===== Actions right side (modern) ===== */

#js-header .fs-actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
}

/* Slots waar JS content in rendert (snellijsten + basket) */
#js-header .fs-slot{
    display: inline-flex;
    align-items: center;
}

/* Icon button: klein, strak, geen grote circles */
#js-header .fs-iconbtn{
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,.92);
    border: 1px solid rgba(14,24,39,.10);
    color: rgba(61,61,61,.82);
    text-decoration: none;

    transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

#js-header .fs-iconbtn i{
    font-size: 18px;
    line-height: 1;
    opacity: .92;
}

#js-header .fs-iconbtn:hover,
#js-header .fs-iconbtn:focus{
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), .25);
    box-shadow: 0 10px 24px rgba(11,18,32,.08);
    background: #fff;
    color: var(--ink);
}

/* “Mijn Feyen.shop” als premium pill */
#js-header .fs-pillbtn{
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    border-radius: 9999px;

    background: rgba(var(--accent-rgb), .10);
    border: 1px solid rgba(var(--accent-rgb), .28);
    color: var(--ink);
    font-weight: 950;
    text-decoration: none;

    transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

#js-header .fs-pillbtn:hover,
#js-header .fs-pillbtn:focus{
    transform: translateY(-1px);
    background: rgba(var(--accent-rgb), .14);
    border-color: rgba(var(--accent-rgb), .36);
    box-shadow: 0 16px 40px rgba(11,18,32,.10);
}

/* Zorg dat eventuele Unify icon-styling in de JS widgets niet "bubbelt" */
#js-header .fs-actions .u-icon-v1{
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ===== Actions v2: pill-only, no icons ===== */

#js-header .fs-actions2{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* Base pill */
#js-header .fs-actionpill{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    height: 40px;
    padding: 0 14px;
    border-radius: 9999px;

    border: 1px solid rgba(14,24,39,.10);
    background: rgba(255,255,255,.92);
    color: rgba(61,61,61,.90);
    text-decoration:none;

    font-weight: 950;
    letter-spacing: .01em;

    transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

#js-header .fs-actionpill:hover,
#js-header .fs-actionpill:focus{
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), .25);
    box-shadow: 0 10px 24px rgba(11,18,32,.08);
    background:#fff;
    color: var(--ink);
}

/* Primary (winkelwagen) */
#js-header .fs-actionpill--primary{
    background: rgba(var(--accent-rgb), .10);
    border-color: rgba(var(--accent-rgb), .28);
}

#js-header .fs-actionpill--primary:hover{
    background: rgba(var(--accent-rgb), .14);
    border-color: rgba(var(--accent-rgb), .36);
}

/* Account pill */
#js-header .fs-actionpill--account{
    background: rgba(39,93,56,.08);
    border-color: rgba(39,93,56,.18);
}

#js-header .fs-actionpill--account:hover{
    background: rgba(39,93,56,.12);
    border-color: rgba(39,93,56,.24);
}

/* Ghost (uitloggen) */
#js-header .fs-actionpill--ghost{
    background: transparent;
}

/* Badge */
#js-header .fs-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 9999px;

    background: rgba(var(--accent-rgb), .16);
    border: 1px solid rgba(var(--accent-rgb), .22);
    color: var(--ink);
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
}

/* Legacy JS output verbergen (maar laten bestaan) */
#js-header .fs-legacy-hidden{
    position:absolute !important;
    left:-9999px !important;
    top:auto !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}

/* Layout */
#js-header .fs-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap: 10px;
    flex-wrap: nowrap;
}

/* Slots waar JS dropdowns in rendert */
#js-header .fs-slot{
    display:inline-flex;
    align-items:center;
}

/* Onze icon buttons */
#js-header .fs-iconbtn{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    border: 1px solid rgba(14,24,39,.10);
    background: rgba(255,255,255,.92);
    color: rgba(61,61,61,.82);
    text-decoration:none;

    transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

#js-header .fs-iconbtn i{
    font-size: 18px;
    line-height: 1;
}

#js-header .fs-iconbtn:hover,
#js-header .fs-iconbtn:focus{
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), .25);
    box-shadow: 0 10px 24px rgba(11,18,32,.08);
    background: #fff;
    color: var(--ink);
}

/* Mijn Feyen.shop pill */
#js-header .fs-pillbtn{
    display:inline-flex;
    align-items:center;
    height: 40px;
    padding: 0 14px;
    border-radius: 9999px;

    background: rgba(var(--accent-rgb), .10);
    border: 1px solid rgba(var(--accent-rgb), .28);
    color: var(--ink);
    font-weight: 950;
    text-decoration: none;

    transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
#js-header .fs-pillbtn:hover{
    transform: translateY(-1px);
    background: rgba(var(--accent-rgb), .14);
    border-color: rgba(var(--accent-rgb), .36);
    box-shadow: 0 16px 40px rgba(11,18,32,.10);
}

/* ✅ Belangrijk: als JS/Unify binnen #snellijsten/#winkelwagentje "u-icon-v1" gebruikt,
   killen we die mega-rondjes zodat jouw dropdown triggers modern ogen. */
#js-header #snellijsten .u-icon-v1,
#js-header #winkelwagentje .u-icon-v1{
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(14,24,39,.10) !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: none !important;
    padding: 0 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* Hover state voor die legacy triggers */
#js-header #snellijsten .u-icon-v1:hover,
#js-header #winkelwagentje .u-icon-v1:hover{
    border-color: rgba(var(--accent-rgb), .25) !important;
    box-shadow: 0 10px 24px rgba(11,18,32,.08) !important;
    transform: translateY(-1px);
}