#basket { position: fixed; top: var(--toolbar-height); right: 0; width: 360px; height: calc(100vh - var(--toolbar-height)); background: #fff; border-left: 1px solid #eee; box-shadow: -2px 0 8px rgba(0,0,0,0.06); z-index: 900; display: none; }
@media (min-width: 1000px) { #basket { display: flex; flex-direction: column; } body { padding-right: 360px; } .to-top-btn { right: calc(16px + 360px); } }
#basket { scrollbar-width: thin; scrollbar-color: #c7c7c7 transparent; }
#basket::-webkit-scrollbar { width: 3px; }
#basket::-webkit-scrollbar-thumb { background-color: #c7c7c7; border-radius: 999px; }
#basket::-webkit-scrollbar-track { background: transparent; }

.delivery-toggle.in-basket { padding: 4px; border-radius: 16px; margin: 0px auto; }
.delivery-toggle.in-basket .toggle-option { padding: 6px 10px; min-width: 150px; gap: 8px; }
.delivery-toggle.in-basket .toggle-option .toggle-icon { width: 34px; height: 34px; }
.delivery-toggle.in-basket .toggle-option .toggle-title { font-size: 14px; }
.delivery-toggle.in-basket .toggle-option .toggle-sub { font-size: 12px; }

#basket .basket-header { position: relative; padding: 14px 10px 8px; text-align: center; font-family: 'Inter'; color:#333; font-size: 24px; }
#basket .basket-header .left-icon { display: none; }
#basket .basket-header .right-icon { color: #666666; cursor: pointer; display: none; font-size: 1.5em; line-height: 1; }
#basket .basket-toggle-host { padding: 0px; }
/* Delivery/Collection toggle — yalnızca mobil sepet popup'ında görünür.
   Masaüstü sağ panelde gizli. JustEat tarzı segmented control. */
#basket .basket-svc-toggle { display: none; }
@media (max-width: 999px) {
    #basket .basket-svc-toggle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        margin: 6px 12px 8px;
        padding: 4px;
        background: #f1f3f5;
        border-radius: 999px;
    }
    #basket .basket-svc-seg {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        border-radius: 999px;
        padding: 11px 12px;
        background: transparent;
        color: #475569;
        font-family: 'Inter', Arial, sans-serif;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        -webkit-appearance: none; appearance: none;
        transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    }
    #basket .basket-svc-seg .basket-svc-icn { width: 20px; height: 20px; opacity: .6; }
    #basket .basket-svc-seg.active {
        background: #ffffff;
        color: #0f172a;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(0,0,0,.14);
    }
    #basket .basket-svc-seg.active .basket-svc-icn { opacity: 1; }
    /* Tek servisli dükkanlarda JS .is-single ekler → toggle gizlenir. */
    #basket .basket-svc-toggle.is-single { display: none; }
}
#basket .basket-empty { text-align: center; padding: 16px; color:#666; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-top: 0; margin-bottom: 10px; }
#basket .basket-empty .icon { font-size: 60px; color:#bdbdbd; line-height: 1; margin-bottom: 4px; }
#basket .basket-empty .icon svg { width: 1em; height: 1em; display: inline-block; }
#basket .basket-empty .title { font-family:'Inter'; font-size: 18px; color:#333; margin-top: 6px; }
#basket .basket-empty .desc { font-family:'Inter'; font-size: 13px; margin-top: 6px; }

#basket .basket-content { padding: 10px 10px 0; margin-top:0; border-top: 1px solid #eee; font-family: 'Inter', Arial, sans-serif; overflow-y: auto; }
#basket .basket-content { scrollbar-width: thin; scrollbar-color: #c7c7c7 transparent; }
#basket .basket-content::-webkit-scrollbar { width: 1px; }
#basket .basket-content::-webkit-scrollbar-thumb { background-color: #c7c7c7; border-radius: 999px; }
#basket .basket-content::-webkit-scrollbar-track { background: transparent; }
.basket-item { padding: 10px 0px 10px; border-bottom: 1px solid #eee; display: block; }
.basket-item-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; }
.qty-pill { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 8px; background: #efefef; border-radius: 20px; padding: 6px; font-family: 'Inter'; color:#333; grid-area: auto; }
.qty-btn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #d0d0d0; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.qty-btn svg { width: 14px; height: 14px; stroke: #666; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.qty-count { min-width: 22px; height: 24px; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1; font-size: 14px; }
.basket-item-title { font-family: 'Inter'; font-size: 14px; color:#222; text-decoration: underline; cursor: pointer; }
/* Fee items (e.g., Shopping bag): not interactive, no underline, no hand cursor */
#basket .fee-item .basket-item-title { text-decoration: none; cursor: default; pointer-events: none; }
.basket-item-price { font-family: 'Inter'; font-size: 14px; color:#111; }
.basket-options { margin: 4px 0 0 0; display: grid; gap: 3px; padding: 0 10px; }
.basket-option { font-size: 12px; color:#666; padding-left: 10px; }
.options-toggle { margin-top: 6px; font-size: 12px; color: var(--primary-color); cursor: pointer; text-decoration: none; padding-left: 10px; }
.basket-options .basket-option:nth-child(n+4) { display: none; }
.basket-divider { height: 1px; background: #eee; margin: 12px 0100px; }
.basket-summary { padding: 4px 0; }
.summary-row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 4px 10px; font-size: 14px; color:#333; }
.summary-row.discount { color: #1b8a4a; }
.summary-row.service { color: #4a74c9; }
.summary-row.delivery { color: #4a74c9; }
.summary-row.tip { color: #e67e22; }
.summary-row.total { font-family: 'Inter'; font-size: 18px; border-top: 1px solid #eee; margin-top: 6px; padding-top: 10px; }

.mobile-basket-bar { display: none; }
@media (max-width: 1360px) { .mobile-basket-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1700; background: #ffffff; padding: 6px 10px; box-shadow: 0 -1px 3px rgba(0,0,0,0.016), 0 -4px 8px rgba(0,0,0,0.016); } .mobile-basket-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.18), rgba(0,0,0,0)); } body { padding-bottom: 62px; } }
.mobile-basket-bar { cursor: pointer; }
.mobile-basket-btn { max-width: 1000px; margin: 0 auto; background: var(--primary-color); color: #fff; border-radius: 26px; height: 48px; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; box-shadow: 0 6px 20px rgba(0,0,0,0.18); cursor: pointer; user-select: none; -webkit-user-select: none; }
.mobile-basket-btn .basket-left { display: flex; align-items: center; justify-content: flex-start; padding-left: 10px; }
.basket-icon-container { position: relative; width: 28px; height: 28px; display: grid; place-items: center; }
.basket-icon { font-size: 20px; }
.basket-count { position: absolute; top: -3px; right: -15px; background: #ffc107; color: var(--primary-color); border-radius: 999px; font-size: 14px; line-height: 1; padding:2px 5px; }
.mobile-basket-btn .basket-center { text-align: center; font-family:'Inter'; font-size: 18px; }
.mobile-basket-btn .basket-right { text-align: right; padding-right: 16px; font-family:'Inter'; font-size: 16px; }
@media (min-width: 1000px) { .mobile-basket-bar { display: block; position: fixed; bottom: 0; right: 0; left: auto; padding: 8px 12px 12px; background: #ffffff; box-shadow: 0 -1px 3px rgba(0,0,0,0.016), 0 -4px 8px rgba(0,0,0,0.016); width: 360px; box-sizing: border-box; z-index: 1700; } .mobile-basket-bar::before { display: none; } .mobile-basket-bar .mobile-basket-btn { width: 100%; margin: 0; height: 56px; border-radius: 30px; } }

/* Ensure only one label is visible without waiting for inline styles (prevents flash) */
.label-mobile { display: none; }
.label-desktop { display: inline; }
@media (max-width: 1000px) {
  .label-desktop { display: none; }
  .label-mobile { display: inline; }
}


/* Mobilde sepet: bottom sheet davranışı */
@media (max-width: 999px) {
  /* Başlangıç: gizli, aşağıda bekler */
  #basket {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    width: auto;
    /* TAM EKRAN bottom sheet: yukarıda en üste (top:0), altta mobil barın
       üstüne kadar. Geometri açık/kapalıda sabit; sadece transform animasyonu
       slayt yapar (kapanışta yükseklik zıplaması olmaz). */
    top: 0;
    bottom: calc(var(--mobile-bar-height) + 10px + env(safe-area-inset-bottom, 0px));
    height: auto;
    max-height: none;
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(.2,.7,.2,1), border-radius 200ms ease;
    z-index: 1060; /* overlay ve toolbar üstünde, mobile barın altında */
    border-left: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
  }
  /* Açık durum — TAM EKRAN: çekmece ekranın en üstüne (site toolbar'ı dahil)
     kadar açılır, böylece tam sayfa hissi verir. Alttaki mobil "View Basket /
     Checkout" barı görünür kalsın diye alt sınır bar yüksekliği kadar boşluk
     bırakır. Köşeler düzleşir (tam sayfa). */
  body.basket-open #basket {
    transform: translateY(0);
    top: 0;
    bottom: calc(var(--mobile-bar-height) + 10px + env(safe-area-inset-bottom, 0px));
    height: auto;
    max-height: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  /* Tam ekranda header çentiğin (notch) altında kalmasın diye üst güvenli alan payı */
  body.basket-open #basket { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); box-sizing: border-box; }

  /* Mobil header: sabit yükseklik + ikon ile tam hizalı */
  body.basket-open #basket .basket-header {
    display: flex;
    align-items: center;           /* dikey merkez */
    justify-content: center;       /* yatay merkez */
    height: 56px;                  /* desktop görsel yükseklik */
    padding: 0 40px 0 10px;        /* sol: içerik, sağ: close ikon boşluğu */
    line-height: normal;
    box-sizing: border-box;
  }
  body.basket-open #basket .basket-header .right-icon {
    /* Dokunma hedefini büyüt: glyph küçük olduğu için parmak ıskalıyordu,
       kapatmak 4-5 dokunuş sürüyordu. 48x48 görünmez tıklama alanı +
       touch-action ile ilk dokunuşta kapansın. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    z-index: 5;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  body.basket-open #basket .basket-header span { line-height: normal; padding-top: 0; }
  /* İçerik altına bar yüksekliği kadar boşluk ver ki içerik barın altına gizlenmesin */
  /* İçerik alanını kalan yüksekliği kaplayacak şekilde esnet ve kaydırılabilir yap */
  body.basket-open #basket .basket-content {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Tam ekran çekmece artık mobil barın ÜSTÜNDE bitiyor; bar yüksekliği
       kadar padding gereksiz, sadece küçük bir alt boşluk yeterli. */
    padding-bottom: 16px;
    /* Header altında ekstra boşluk oluşturma; varsayılan 6px'e dön */
    margin-top: 6px;
    /* Görünen alanı ~12px kısalt (10-15px aralığında) */
    max-height: calc(100% - 15px);
    /* Görünen alan kısaltma uygulamasını kaldır (boşluk oluşmasın) */
  }
  /* Sepet açıkken mobil barın üst gölgesini kapat (siyah çizgi görünmesin) */
  body.basket-open .mobile-basket-bar::before { display: none !important; }
  body.basket-open .mobile-basket-bar { box-shadow: none !important; border-top: none !important; }

  /* Mobil bar görünür kalır; sheet onun üstünde durur */
}

/* Sepet alt çekmece açıkken arka plan scroll'unu kilitle */
body.basket-open {
  overflow: hidden;
}

/* Backdrop overlay - tüm genişliklerde çalışsın */
.basket-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease;
  z-index: 1050; /* toolbar(1000) üstü, basket(1060) altı, mobile bar(1100) altı */
}
body.basket-open .basket-overlay { opacity: 1; visibility: visible; }

/* Alt tarafta istenmeyen boşluk oluşmasın */
#basket .basket-content { padding-bottom: 0; }

/* Basket item footer: left edit, right controls */
.basket-item-footer { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; }
.basket-item-footer .footer-controls { display: inline-flex; align-items: center; gap: 8px; }
.edit-btn {
  background: #efefef; /* same as qty-pill */
  border: none;        /* no border like the pill */
  color: #444;
  height: 36px;        /* match pill height: 24px inner + 2*6px padding */
  padding: 6px 12px;   /* similar vertical padding to pill, a bit wider horizontally */
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 20px; /* same radius as pill */
  cursor: pointer;
}
.edit-btn i { font-size: 16px; }
.edit-label { font-size: 14px; font-family: 'Inter'; color:#444; line-height: 1; }
.basket-item-footer .qty-pill { padding: 6px 8px; border-radius: 20px; }

/* Ensure FA trash icon inside minus button aligns like SVG */
.qty-btn i.fa-regular.fa-trash-can { font-size: 14px; color: #666; line-height: 1; }


/* Moved from Basket.html inline <style> (scoped under #basket) */
#basket .tax-detail {
  display: grid; /* Match .summary-row layout */
  grid-template-columns: 1fr auto;
  align-items: center;
  font-size: 13px; /* Slightly smaller than summary rows */
}

#basket .tax-detail span:first-child { margin-left: 0; padding-left: 15px; color: #666; }
#basket .tax-detail span:last-child { text-align: right; color: #444; }

/* Taxes header: label + toggle inline in first column */
#basket .taxes-header { display: inline-flex; align-items: center; gap: 6px; }
#basket .taxes-toggle { line-height: 1; }

/* Ensure taxes details container doesn't affect alignment */
#basket .taxes-details {
  width: 100%;
  position: relative;
}

/* Taxes title clickable behavior */
#basket .taxes-header .taxes-title { cursor: pointer; text-decoration: none; }
#basket .taxes-header .taxes-title:hover { text-decoration: none; }

/* Discounts header clickable like taxes */
#basket .discounts-header .discounts-title { cursor: pointer; }

/* Discount details: same layout as tax-detail but green and slightly indented */
#basket .discount-detail {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  font-size: 13px;
  color: #1b8a4a;
}
#basket .discount-detail span:first-child { margin-left: 0; padding-left: 15px; color: #1b8a4a; }
#basket .discount-detail span:last-child { text-align: right; color: #1b8a4a; }

/* Also apply same look outside #basket if summary is rendered inline on pages */
.discount-detail { display: grid; grid-template-columns: 1fr auto; align-items: center; font-size: 13px; color: #1b8a4a; }
.discount-detail span:first-child { margin-left: 0; padding-left: 15px; color: #1b8a4a; }
.discount-detail span:last-child { text-align: right; color: #1b8a4a; }


/* Savings banner — "🎉 You saved £X today". Sits between the Total row
   and the Pay / Checkout button in the basket summary card. Spans the
   full card width with a small side gutter, centred green text, with
   breathing room above (separates from Total) and below (so it doesn't
   crash into the Pay button). Applies in BOTH the basket popup and the
   checkout page. */
.fx-savings-banner {
    display: none;
    align-items: center; justify-content: center;
    gap: 8px;
    margin: 14px 10px 16px;
    padding: 12px 14px;
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 10px;
    color: #166534;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px; font-weight: 600;
    text-align: center;
}
.fx-savings-banner.is-on { display: flex; }
.fx-savings-banner .fx-savings-amt { color: #14532d; font-weight: 700; }