/* Sepet yenilenirken (+/-, kupon vb.) içeriği silmek yerine hafifçe soldururuz;
   böylece "kaybolup geri gelme" titremesi olmaz. .load() biten anda kaldırılır. */
.basket-container.is-basket-refreshing { opacity: .55; transition: opacity .12s ease; pointer-events: none; }

#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; }

    /* Aktif segmenti, ana sayfadaki pill gibi dükkanın servis durumuna göre
       renklendir: açık → yeşil, ön-sipariş → turuncu, kapalı → kırmızı.
       data-state, ana sayfadaki pill'den JS (syncBasketToggle) ile kopyalanır.
       Aynı degrade'ler home pill ile birebir aynı (FoodX.css). */
    #basket .basket-svc-seg.active[data-state="open"] {
        background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
        color: #fff;
        box-shadow: none;
    }
    #basket .basket-svc-seg.active[data-state="preorder"] {
        background: linear-gradient(180deg, #fb923c 0%, #c2410c 100%);
        color: #fff;
        box-shadow: none;
    }
    #basket .basket-svc-seg.active[data-state="closed"] {
        background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
        color: #fff;
        box-shadow: none;
    }
    /* Renkli zeminde SVG ikon beyaz olsun. */
    #basket .basket-svc-seg.active[data-state="open"] .basket-svc-icn,
    #basket .basket-svc-seg.active[data-state="preorder"] .basket-svc-icn,
    #basket .basket-svc-seg.active[data-state="closed"] .basket-svc-icn {
        filter: brightness(0) invert(1);
        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-btn.is-disabled, .qty-btn:disabled { opacity: .4; cursor: not-allowed; background: #f5f5f5; border-color: #e2e2e2; }
.qty-btn.is-disabled svg, .qty-btn:disabled svg { stroke: #b9b9b9; }
.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; font-weight: 600; color:#111; text-decoration: none; cursor: default; }
/* 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; font-weight: 600; 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; }
.discount-source { margin-left: 6px; font-size: 11px; font-weight: 400; color: #9aa0a6; white-space: nowrap; }
.summary-row.service { color: #4a74c9; }
.summary-row.delivery { color: #4a74c9; }
.summary-row.tip { color: #e67e22; }
.summary-row.total { font-family: 'Inter'; font-size: 20px; font-weight: 700; color: #111; border-top: 2px solid #ddd; margin-top: 8px; padding-top: 12px; }

.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 calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -1px 3px rgba(0,0,0,0.016), 0 -4px 8px rgba(0,0,0,0.016); } .mobile-basket-bar::before { display: none; } 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; } }

/* Task 3 — Delivery minimum uyarı şeridi: "Go to Checkout" butonunun hemen üstünde. */
.basket-min-warning { max-width: 1000px; margin: 0 auto 8px; display: flex; align-items: center; gap: 8px; background: #fff4e5; color: #8a5300; border: 1px solid #ffd9a8; border-radius: 14px; padding: 9px 12px; font-family: 'Inter'; font-size: 13.5px; line-height: 1.3; }
.basket-min-warning i { font-size: 15px; flex: 0 0 auto; color: #d98300; }
@media (min-width: 1000px) { .basket-min-warning { max-width: 100%; } }
/* Blokeliyken CTA görsel olarak pasif görünür ama tıklanıp sepeti açabilir. */
.mobile-basket-btn.is-disabled { opacity: .55; filter: grayscale(0.25); }

/* Minimum delivery altında "Go to Checkout" görsel olarak PASİF görünür
   (gri + not-allowed) ama native disabled DEĞİL: tıklama JS'te yakalanır.
   Yalnızca "Go to Checkout" bağlamlarında uygulanır; ana menüdeki
   "View Basket" (mobil, sepet kapalı) tam aktif kalır. */
@media (min-width: 1000px) {
  .mobile-basket-bar.is-blocked .mobile-basket-btn {
    background: #c4c9cf; color: #fff; box-shadow: none; cursor: not-allowed;
  }
}
@media (max-width: 1000px) {
  body.basket-open .mobile-basket-bar.is-blocked .mobile-basket-btn {
    background: #c4c9cf; color: #fff; box-shadow: none; cursor: not-allowed;
  }
}

/* Uyarı şeridi: normalde SABİT durur, asla otomatik yanıp sönmez.
   Yalnızca pasif butona tıklama denemesinde .is-flash ile bir kez vurgulanır. */
@keyframes fxWarnFlash {
  0%   { transform: translateX(0);   box-shadow: 0 0 0 0 rgba(217,131,0,0); background: #fff4e5; }
  20%  { transform: translateX(-4px); box-shadow: 0 0 0 4px rgba(217,131,0,.28); background: #ffe9cc; }
  40%  { transform: translateX(4px); }
  60%  { transform: translateX(-3px); background: #ffe9cc; }
  80%  { transform: translateX(3px); }
  100% { transform: translateX(0);   box-shadow: 0 0 0 0 rgba(217,131,0,0); background: #fff4e5; }
}
.basket-min-warning.is-flash { animation: fxWarnFlash 300ms ease; }
@media (prefers-reduced-motion: reduce) {
  .basket-min-warning.is-flash { animation: none; }
}

/* Minimum delivery pop-up (erişilebilir modal) */
/* ÖNEMLİ: author `display` kuralı, tarayıcının `[hidden]{display:none}` kuralını
   ezdiği için pop-up `hidden` olsa bile görünür kalıyordu (publish sonrası otomatik
   açılma + kapat butonlarının çalışmaması). Bu kural `hidden`'ı gerçekten uygular:
   pop-up YALNIZCA JS `hidden`'ı kaldırınca (Go to Checkout tıklaması) görünür. */
.fx-minpop[hidden], .fx-minpop-overlay[hidden] { display: none !important; }
.fx-minpop-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(17, 24, 39, .45);
}
.fx-minpop {
  position: fixed; inset: 0; z-index: 2001;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.fx-minpop-card {
  position: relative; box-sizing: border-box;
  width: 100%; max-width: 360px;
  background: #fff; border-radius: 18px;
  padding: 26px 22px 22px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  text-align: center; font-family: 'Inter';
}
.fx-minpop-icon { font-size: 30px; color: #d98300; line-height: 1; margin-bottom: 12px; }
.fx-minpop-msg { margin: 0 0 18px; font-size: 15.5px; line-height: 1.45; color: #1f2937; }
.fx-minpop-actions { display: flex; flex-direction: column; gap: 10px; }
.fx-minpop-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  background: var(--primary-color); color: #fff;
  border: none; border-radius: 26px;
  font-family: 'Inter'; font-size: 16px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fx-minpop-add:hover { filter: brightness(1.05); }
.fx-minpop-add:focus-visible { outline: 2px solid #1f2937; outline-offset: 2px; }
.fx-minpop-close {
  position: absolute; top: 8px; right: 10px;
  display: grid; place-items: center;
  width: 36px; height: 36px; min-width: 36px;
  border: none; background: none; color: #9ca3af;
  font-size: 26px; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fx-minpop-close:hover { color: #4b5563; }
.fx-minpop-close:focus-visible { outline: 2px solid #9ca3af; outline-offset: 2px; border-radius: 8px; }

/* 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; }
  /* Sepet sheet açıkken (kullanıcı zaten sepette) "Go to Checkout" göster */
  body.basket-open .mobile-basket-btn .label-desktop { display: inline; }
  body.basket-open .mobile-basket-btn .label-mobile { display: none; }
}


/* 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;
    /* Sheet'in BEYAZ zemini ekranın en altına kadar uzansın (bottom:0).
       Opak beyaz mobil bar (z-index 1700) bu zeminin üstünde oturduğundan,
       içerik ile buton arasında karanlık overlay (gri/siyah şerit) GÖRÜNMEZ.
       Son ürünün barın altında kalmaması için .basket-content alt padding'i
       bar yüksekliği kadar artırılır. */
    bottom: 0;
    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: 0;
    height: auto;
    max-height: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  /* Üst boşluğu kaldır: mavi header en üst kenara kadar uzansın (eski 8px'lik
     padding, header'ın üstünde beyaz şerit bırakıyordu). Çentik/safe-area payı
     artık header'ın kendi üst padding'inde. */
  body.basket-open #basket { padding-top: 0; box-sizing: border-box; }

  /* Mobil header: "Restaurant Info" pop-up'ının mavi üst barını referans
     alan görünüm — marka rengi (mavi) zemin, beyaz başlık ve sağda yuvarlak,
     ince beyaz çerçeveli kapatma butonu. */
  body.basket-open #basket .basket-header {
    display: flex;
    align-items: center;           /* dikey merkez */
    justify-content: center;       /* yatay merkez */
    box-sizing: border-box;
    /* Görünür bar 56px; çentikli cihazda üstüne safe-area payı eklenir ve bu
       pay header'ın MAVİ alanına dahildir (üstte beyaz şerit kalmaz). */
    min-height: 56px;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 48px 0 48px;
    line-height: normal;
    background: var(--primary-color);
    color: #fff;
    border-top-left-radius: 0;     /* tam ekran çekmece: köşe yuvarlaması yok */
    border-top-right-radius: 0;
  }
  body.basket-open #basket .basket-header span {
    line-height: normal;
    padding-top: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Inter', Arial, sans-serif;
  }
  body.basket-open #basket .basket-header .right-icon {
    /* GERÇEK tıklama hedefi = elemanın kendisi (44x44). Böylece her dokunuş
       güvenilir yakalanır; eski yöntemde görünmez ::after üzerine basınca
       tıklama bazen ıskalanıyordu. Görünür çember ise ::after ile çizilir ve
       pointer-events:none olduğundan tıklamayı engellemez. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 8px;
    bottom: 6px;                   /* 56px bar içinde 44px kutuyu ortala (56-44)/2 = 6 */
    top: auto;
    margin: 0;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 15px;               /* beyaz X (fa-xmark, ::before) boyutu */
    line-height: 1;
    z-index: 5;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  body.basket-open #basket .basket-header .right-icon::after {
    /* Görünür çember — yalnızca görsel; küçültüldü (30px) ve tıklamayı
       engellememesi için pointer-events:none. */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
    transition: background 0.2s ease;
  }
  body.basket-open #basket .basket-header .right-icon:hover::after {
    background: rgba(255, 255, 255, 0.12);
  }
  /* İç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;
    /* Sheet zemini bottom:0'a kadar uzandığından, son ürün opak barın altında
       kalmasın diye alt padding'i bar yüksekliği kadar artır. */
    padding-bottom: calc(var(--mobile-bar-height) + 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;
  /* Yalnızca sepet açıkken: aşağı fazla kaydırınca tarayıcının
     "pull-to-refresh" (sayfayı yenile) jesti TETİKLENMESİN; aksi halde
     dolu sepetin sonunu görmek için kaydırırken sepet kapanıp ana sayfa
     yenileniyordu. Sepet kapanınca kural kalkar, normal davranış döner. */
  overscroll-behavior: none;
}
/* Pull-to-refresh kök kaydırma öğesinden (html) tetiklenir; sepet açıkken
   onu da sabitle. :has desteklenen tarayıcılarda devreye girer. */
html:has(body.basket-open) {
  overscroll-behavior-y: none;
}
/* Sepet içeriğinin kendi kaydırması da zinciri dışarı taşımasın */
body.basket-open #basket .basket-content {
  overscroll-behavior-y: contain;
}

/* 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; }

/* Left-side row actions: Edit + dedicated Remove, grouped together and
   kept clearly separate from the qty (−/+) control on the right. */
.basket-item-footer .footer-actions { display: inline-flex; align-items: center; gap: 8px; }
.trash-btn {
  background: #efefef;
  border: none;
  width: 36px;
  height: 36px;        /* match edit-btn / pill height */
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 20px;
  cursor: pointer;
  color: #9aa0a6;      /* nötr gri varsayılan; sadece basınca kırmızı */
  transition: color .12s ease, background .12s ease;
}
.trash-btn i { font-size: 16px; line-height: 1; }
.trash-btn:hover { background: #f0f0f0; color: #6b7075; }
.trash-btn:active { background: #fde8e6; color: #c0392b; }
.trash-btn.is-confirming { background: #fde8e6; color: #c0392b; }

/* 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: 6px 10px 10px;
    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; }