:root {
    /* Primary Brand Colors - Overriding Yemeksepeti Pink with a Premium Indigo/Violet */
    --colorBrandPrimary: #e82c33 !important;
    --colorBrandPrimaryDark: #4f46e5 !important;
    --colorInteractionPrimary: #e82c33 !important;
    --colorInteractionPrimaryHover: #ce0009 !important;
    --colorLinearGradient1: #e82c33 !important;
    --colorLinearGradient2: #4338ca !important;
    --colorBrandHighlight: #f5f3ff !important;
    --colorBrandHighlightLvl1: #ede9fe !important;
    --colorGradientBrand: linear-gradient(90deg, #e82c33 0%, #a855f7 100%) !important;
    /* Resetting some background variables if needed */
    --bdsColorSurfacePromobanner: #e82c33 !important;
    --bdsColorIconSupervendor: #e82c33 !important;
    --bdsColorTextNotificationReversed: #e82c33 !important;
    /* Rating highlights - Green looks fine but let's make it a bit more modern emerald */
    --colorBrandPrimaryDark: #10b981 !important;
    --colorRatingHighlight: #34d399 !important;
    /* Typography - If the user wants a different font, we can add it here. */
}

/* Custom Branding Overrides */
[data-testid="brand-icon-yemeksepeti"] svg {
    display: none !important;
}

[data-testid="brand-icon-yemeksepeti"]::after {
    content: "EYemekPazar�";
    font-family: var(--bdsTypographyTitleLargeFontFamily), sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #e82c33;
    letter-spacing: -1px;
}

/* Removal of specific Yemeksepeti labels in UI if any remain */
footer div[style*="text-align: center"] {
    display: none !important;
}

/* Hide original KVKK banner and use our own if needed, or just style the one I found */
#kvkk-cookie-banner button[style*="background: #fa0050"] {
    background: #e82c33 !important;
}

#kvkk-cookie-banner a[style*="color: #fa0050"] {
    color: #e82c33 !important;
}

/* ============================================================
   REFINED RESPONSIVE / MOBILE FIXES
   ============================================================ */

/* Global protection */
html {
    width: 100%;
    height: 100%;
}

body {
    /*f;*/
    width: 100%;
    position: relative;
    min-height: 100%;
    -webkit-overflow-scrolling: touch; /* Better mobile momentum scroll */
}

/* ---- TABLET & PHONE (max-width: 768px) ---- */
@media screen and (max-width: 768px) {

    /* Header / Navbar container style on mobile */
    #global-navbar, .bds-c-navbar {
        height: auto !important;
        min-height: unset !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
        background-color: #ffffff !important;
        z-index: 1040 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .navbar-slot {
        height: auto !important;
    }

    .container.body-content {
        margin-top: 125px !important; /* pushed down to prevent 105px header overlapping cards */
    }

    /* Outer header wrapper */
    .bds-c-navbar__header {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 10px 16px 4px 16px !important;
        gap: 0 !important;
        border-bottom: none !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    /* HIDE logo, right profile dropdown, and right cart icon on mobile navbar */
    .bds-c-navbar__brand,
    .bds-c-navbar__right,
    .bds-c-navbar__right-icons,
    .bds-c-navbar__center--filler,
    #header-login-button,
    #teslimat-butonu,
    #menu-selector,
    #userMenuButton,
    .user-dropdown-menu,
    .bds-c-btn-circular-cursor,
    .dropdown,
    #global-navbar .dropdown,
    #global-navbar .bds-c-btn-circular-cursor {
        display: none !important;
    }

    /* Address container (where) - occupies full row on top */
    .bds-c-navbar__center--top {
        order: 1 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        margin: 0 0 6px 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    .bds-c-navbar__center,
    .where-wrapper,
    [data-testid="where-component-refactored"],
    .where-wrapper > div,
    .location-header-display,
    .bds-c-btn-cursor--layout-default,
    .location-search-button,
    .bds-c-btn__idle-content,
    .bds-c-btn__idle-content__label,
    .bds-c-btn__idle-content__label > span {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* Address Search Button style customization */
    .address-content {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        background: #f8fafc !important;
        border: 1px solid #f1f5f9 !important;
        border-radius: 12px !important;
        padding: 8px 12px !important;
    }

    #navbar-address-container {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: calc(100% - 30px) !important;
        display: block !important;
        text-align: left !important;
    }

    #navbar-address-label {
        font-weight: 700 !important;
        color: #e82c33 !important;
    }

    /* --- Bottom Navbar Row (Tabs + Search) --- */
    .vertical-switcher-container {
        display: none !important;
    }

    .bottom-content-container {
        padding: 0 16px 10px 16px !important;
        margin: 0 !important;
        width: 100% !important;
        gap: 0 !important;
        flex-direction: row !important;
    }

    /* Search bar container */
    .layout-search-container {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        visibility: visible !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .layout-search-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .bds-c-search-input {
        width: 100% !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 20px !important;
        background-color: #f8fafc !important;
        overflow: hidden !important;
        height: 42px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
        transition: all 0.2s ease-in-out !important;
    }
    .bds-c-search-input:focus-within {
        border-color: #e82c33 !important;
        background-color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(232, 44, 51, 0.08) !important;
    }

    .layout-search-box.inactive {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .bds-c-search-input__search-control {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        padding: 0 !important;
        position: relative !important;
    }

    .bds-c-search-input__search-icon {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #e82c33 !important;
        z-index: 5 !important;
        margin: 0 !important;
        pointer-events: none !important;
    }

    .bds-c-search-input__search-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .layout-search-input {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        background: transparent !important;
        font-size: 13px !important;
        padding: 0 12px 0 38px !important;
        color: #1e293b !important;
        outline: none !important;
        box-sizing: border-box !important;
    }

    /* --- Grid & Content --- */
    .bds-c-grid {
        grid-template-columns: 1fr !important;
        padding: 0 16px !important;
        gap: 20px !important;
    }

    /* Vendor Cards */
    .vendor-list-revamp {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    .vendor-tile-new-l {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Banner adjustments */
    .rlp-nc-banner__content {
        padding: 20px !important;
    }

    .rlp-nc-banner-image-container {
        display: none !important;
    }

    /* Sections with fixed horizontal padding */
    [style*="padding: 0px 64px"],
    [style*="padding:0px 64px"] {
        padding: 0 16px !important;
    }
}

/* ---- SMALL PHONE (max-width: 480px) ---- */
@media screen and (max-width: 480px) {
    .vendor-list-revamp {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .bds-c-navbar__header {
        padding: 6px 8px !important;
    }

    .address-content span {
        max-width: 160px !important;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================================
   GLOBAL LAYOUT OVERRIDES (2 COLUMNS ON DESKTOP, 1 ON MOBILE)
   ============================================================ */
ul.vendor-list-revamp,
ul[data-testid="vendor-list-revamped-section"],
body ul.vendor-list-revamp,
div.body-content ul.vendor-list-revamp,
body div.body-content ul.vendor-list-revamp,
body .organic-list .vendor-list-section ul.vendor-list-revamp,
body div.body-content .organic-list .vendor-list-section ul.vendor-list-revamp {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 wider proportional columns */
    column-gap: 24px !important;
    row-gap: 24px !important;
    list-style: none !important;
    padding: 0 24px 24px 24px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: stretch !important;
}

@media (max-width: 768px) {
    ul.vendor-list-revamp,
    ul[data-testid="vendor-list-revamped-section"],
    body ul.vendor-list-revamp,
    div.body-content ul.vendor-list-revamp,
    body div.body-content ul.vendor-list-revamp,
    body .organic-list .vendor-list-section ul.vendor-list-revamp,
    body div.body-content .organic-list .vendor-list-section ul.vendor-list-revamp {
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
        row-gap: 16px !important;
        padding: 0 16px 16px 16px !important;
    }
}

/* Getiryemek Style Card Adjustments */
ul.vendor-list-revamp li.vendor-tile-new-l,
ul.vendor-list-revamp li.vendor-tile-revamp,
ul[data-testid="vendor-list-revamped-section"] li.vendor-tile-new-l,
ul[data-testid="vendor-list-revamped-section"] li.vendor-tile-revamp,
body ul.vendor-list-revamp li.vendor-tile-new-l,
body ul.vendor-list-revamp li.vendor-tile-revamp,
div.body-content ul.vendor-list-revamp li.vendor-tile-new-l,
div.body-content ul.vendor-list-revamp li.vendor-tile-revamp,
body div.body-content ul.vendor-list-revamp li.vendor-tile-new-l,
body div.body-content ul.vendor-list-revamp li.vendor-tile-revamp,
body .organic-list .vendor-list-section ul.vendor-list-revamp li.vendor-tile-new-l,
body .organic-list .vendor-list-section ul.vendor-list-revamp li.vendor-tile-revamp,
body div.body-content .organic-list .vendor-list-section ul.vendor-list-revamp li.vendor-tile-new-l,
body div.body-content .organic-list .vendor-list-section ul.vendor-list-revamp li.vendor-tile-revamp {
    grid-column: auto !important; /* Reset forced column positioning from Webpack/microfrontend styles */
    grid-row: auto !important; /* Reset forced row positioning */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
}

ul.vendor-list-revamp li.vendor-tile-new-l:hover,
ul.vendor-list-revamp li.vendor-tile-revamp:hover,
ul[data-testid="vendor-list-revamped-section"] li.vendor-tile-new-l:hover,
ul[data-testid="vendor-list-revamped-section"] li.vendor-tile-revamp:hover,
body ul.vendor-list-revamp li.vendor-tile-new-l:hover,
body ul.vendor-list-revamp li.vendor-tile-revamp:hover,
body div.body-content ul.vendor-list-revamp li.vendor-tile-new-l:hover,
body div.body-content ul.vendor-list-revamp li.vendor-tile-revamp:hover,
body .organic-list .vendor-list-section ul.vendor-list-revamp li.vendor-tile-new-l:hover,
body .organic-list .vendor-list-section ul.vendor-list-revamp li.vendor-tile-revamp:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
    border-color: #d1d5db !important;
}

.vendor-tile-revamp .tile-image-wrapper,
.vendor-tile-new-l .tile-image-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 152px !important;
    flex: 0 0 152px !important;
    aspect-ratio: unset !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
    border-radius: 10px 10px 0 0 !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.vendor-image-container,
.vendor-tile-revamp .vendor-image-container,
.vendor-tile-new-l .vendor-image-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
}

.vendor-placeholder-image,
.vendor-image-container img.vendor-placeholder-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    object-fit: cover !important;
    object-position: center 62% !important;
    display: block !important;
    image-rendering: -webkit-optimize-contrast;
    filter: contrast(1.03) saturate(1.06);
}

/* ============================================================
   MOBILE FILTER SIDEBAR DRAWER AND BACKDROP (INDEX PAGE)
   ============================================================ */
@media (max-width: 992px) {
    .sidebar-filters {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 60px !important; /* Alt nav barın (60px) hemen üstünde biter */
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        z-index: 1040 !important; /* Alt nav barın (1045) arkasında kalır */
        background: #ffffff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        transition: none !important;
        padding: 20px 20px 80px 20px !important;
        overflow-y: auto !important;
        visibility: visible !important;
    }
    .sidebar-filters.open {
        display: block !important;
        z-index: 1040 !important;
    }
    .filters-backdrop {
        display: none !important;
    }
}

/* ============================================================
   MENU DETAIL PAGE RESPONSIVE IMPROVEMENTS (MENU PAGE)
   ============================================================ */
@media (max-width: 768px) {
    .menu-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .menu-item-card {
        height: auto !important;
        min-height: 110px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }
    .menu-item-info h3 {
        font-size: 14px !important;
        font-weight: 700 !important;
    }
    .menu-item-info p {
        font-size: 12px !important;
        margin-bottom: 8px !important;
        -webkit-line-clamp: 2 !important;
    }
    .menu-item-price {
        font-size: 14px !important;
    }
    .menu-item-image-container {
        width: 85px !important;
        height: 85px !important;
    }
    .menu-item-image {
        width: 85px !important;
        height: 85px !important;
        border-radius: 8px !important;
    }
    .add-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 18px !important;
        border-radius: 6px !important;
        bottom: -4px !important;
        right: -4px !important;
    }
    
    /* Category scroll tab header adjustment */
    .menu-search-sticky-container {
        top: 0 !important; /* sticks perfectly at screen top on mobile */
        padding: 8px 0 !important;
    }
    .category-tab {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   MOBILE BOTTOM NAVIGATION BAR STYLING
   ============================================================ */
.mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    z-index: 1045 !important;
    padding: 4px 8px !important;
}

/* Hide on desktop and larger screens */
@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

.mobile-bottom-nav .nav-item {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    flex: 1 !important;
    height: 100% !important;
    gap: 3px !important;
    transition: color 0.15s ease !important;
}

.mobile-bottom-nav .nav-item:hover,
.mobile-bottom-nav .nav-item.active {
    color: #e82c33 !important;
}

.mobile-bottom-nav .nav-item svg {
    stroke: currentColor !important;
    transition: transform 0.15s ease !important;
}

.mobile-bottom-nav .nav-item:active svg {
    transform: scale(0.9) !important;
}

/* Push page content up to avoid bottom nav overlay clipping */
@media (max-width: 768px) {
    body {
        padding-bottom: 75px !important;
    }
    #mobile-cart-bar {
        display: none !important; /* hide the previous floating cart button in favor of the new bottom nav tab */
    }
}