/* ==========================================
   HEADER
   Ramazan Market
========================================== */

/* ---------- Header ---------- */

.header{
    position:sticky;
    top:0;
    z-index:1000;
    background:var(--color-white);
    box-shadow:var(--shadow-sm);
}

/* ---------- Announcement ---------- */

.header__announcement{
    background:var(--color-primary);
    color:var(--color-white);
    font-size:.9rem;
}

.header__announcement-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:42px;
}

/* ---------- Main Header ---------- */

.header__main{
    background:var(--color-white);
}

.header__main-inner{
    display:grid;
    grid-template-columns:220px 1fr auto;
    align-items:center;
    gap:24px;
    min-height:88px;
}

/* ==========================================
   Logo
========================================== */

.header__logo{
    display:flex;
    align-items:center;
}

.header__logo a{
    display:flex;
    align-items:center;
}

.custom-logo{
    display:block;
    width:auto;
    height:70px;
    max-width:220px;
    object-fit:contain;
}
.header__logo img{
    max-height:90px;
    width:auto;
    display:block;
}

.custom-logo-link{
    display:flex;
    align-items:center;
}

/* ---------- Search ---------- */

.header__search-form{
    display:flex;
    width:100%;
}

.header__search-input{
    flex:1;
    height:52px;

    border:2px solid var(--color-border);
    border-right:none;

    border-radius:12px 0 0 12px;

    padding:0 18px;

    outline:none;

    transition:var(--transition);
}

.header__search-input:focus{
    border-color:var(--color-primary);
}

.header__search-button{
    width:110px;

    border:none;

    background:var(--color-primary);

    color:var(--color-white);

    border-radius:0 12px 12px 0;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);
}

.header__search-button:hover{
    background:var(--color-primary-dark);
}

/* ---------- Actions ---------- */

.header__actions{
    display:flex;
    align-items:center;
    gap:16px;
}

.header__cart{
    display:flex;
    align-items:center;
    gap:8px;

    font-weight:600;
}

.header__cart-count{
    display:flex;
    align-items:center;
    justify-content:center;

    width:26px;
    height:26px;

    border-radius:50%;

    background:var(--color-primary);

    color:#fff;

    font-size:.8rem;
}

.header__whatsapp{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 22px;
    height:48px;

    background:#25D366;

    color:#fff;

    border-radius:12px;

    font-weight:600;

    transition:var(--transition);
}

.header__whatsapp:hover{
    transform:translateY(-2px);
}

/* ---------- Navigation ---------- */

.header__nav{
    border-top:1px solid var(--color-border);
}
.header__nav{
    background:#fff;
}

.header__menu{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:40px;

    min-height:60px;
}

.header__menu li{
    list-style:none;
}

.header__menu a{
    font-weight:600;
    transition:var(--transition);
}

.header__menu a:hover{
    color:var(--color-primary);
}
/* ==========================================
   MODERN ACCOUNT BUTTON
========================================== */

.header__account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 46px;
    padding: 0 16px;

    border: 1px solid rgba(30, 41, 59, 0.10);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.96);

    color: #1e293b;

    text-decoration: none;

    font-size: 16px;
    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 4px 14px rgba(15, 23, 42, 0.07);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}







/* Hover */

.header__account:hover {
    color: #1e293b;
    text-decoration: none;

    background: #ffffff;

    border-color: rgba(197, 138, 22, 0.35);

    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.11);
}





/* Active */

.header__account:active {
    transform: translateY(0);
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .header__account {
        min-height: 42px;
        padding: 0 11px;

        gap: 5px;

        border-radius: 12px;

        font-size: 14px;
    }

    .header__account::before {
        width: 27px;
        height: 27px;

        font-size: 14px;
    }
}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .header__account {
        min-height: 40px;
        padding: 0 9px;

        font-size: 13px;
    }

    .header__account::before {
        width: 25px;
        height: 25px;
    }
}