/* ================================================================
   cart-drawer.css — TilbeHome Pro
   ================================================================
   TABLE OF CONTENTS:
   1. Cart Dropdown Container
   2. Dropdown Header
   3. Free Shipping Block
   4. Products Area & Scrollbar
   5. Item Row (Image, Info, Name)
   6. Variants, Price & Remove Button
   7. Empty State
   8. Summary & Totals
   9. Action Buttons
   10. Add-to-Cart Drawer (Overlay, Panel)
   11. Drawer Header, Body & Footer
   ================================================================ */

/* === kaynak: layout.css 3433-3707 - Z-2 sprint === */

/* === legacy.css'ten tasindi: 1E — Cart Dropdown Premium === */
/* ==========================================================
   TILBEHEAD19 — CART DROPDOWN (Premium Minimal / Trendyol vibe)
   Tema inject: .ajax-shopping-cart + .header-cart-summary-1
   SADECE #th-header__header .th-header__cart-dropdown içinde çalışır
========================================================== */

#th-header__header .th-header__cart-dropdown{
  max-width: 360px;
  background:var(--th-color-bg) !important;
  border:1px solid color-mix(in srgb, var(--th-neutral-900) 8%, transparent) !important;
  border-radius: var(--th-radius-xl) !important;
  box-shadow: var(--th-shadow-xl) !important;
  overflow:hidden !important;
  padding:0 !important;
}

/* header */
#th-header__header .th-header__cart-dropdown .tnh-cart-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:var(--th-space-3-5) var(--th-space-4) !important;
  border-bottom:1px solid color-mix(in srgb, var(--th-neutral-900) 6%, transparent) !important;
  background:var(--th-color-bg) !important;
}
#th-header__header .th-header__cart-dropdown .tnh-cart-title{
  font-size:var(--th-text-base) !important;
  font-weight:var(--th-font-bold) !important;
  color: var(--th-color-text) !important;
  letter-spacing:-.2px !important;
}
#th-header__header .th-header__cart-dropdown .tnh-cart-count{
  font-size:var(--th-text-xs-plus) !important;
  color: var(--th-color-text-muted) !important;
  font-weight:var(--th-font-medium) !important;
}

/* free ship block (minimal) */
#th-header__header .th-header__cart-dropdown .tnh-free-ship{
  padding:var(--th-space-2-5) var(--th-space-4) !important;
  border-bottom:1px solid color-mix(in srgb, var(--th-neutral-900) 6%, transparent) !important;
  background:var(--th-color-bg) !important;
}
#th-header__header .th-header__cart-dropdown .tnh-free-ship-text{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:var(--th-space-2-5) !important;
  font-size:var(--th-text-xs-plus) !important;
  color: var(--th-color-text-secondary) !important;
}
#th-header__header .th-header__cart-dropdown .tnh-free-ship-text b{
  color: var(--th-color-text-secondary) !important;
  font-weight:var(--th-font-semibold) !important;
}
#th-header__header .th-header__cart-dropdown .tnh-ship-bar{
  margin-top:var(--th-space-2) !important;
  height:8px !important;
  background: var(--th-color-bg-tertiary) !important;
  border-radius:var(--th-radius-full) !important;
  overflow:hidden !important;
}
#th-header__header .th-header__cart-dropdown .tnh-ship-bar-fill{
  width: var(--bar-w, 0%);
  height:100% !important;
  background: var(--th-color-success) !important;
  border-radius:var(--th-radius-full) !important;
}
.tnh-ship-bar-fill--full { --bar-w: 100%; }

/* products area */
#th-header__header .th-header__cart-dropdown [data-cart-products]{
  max-height: 280px !important;
  overflow:auto !important;
  padding: var(--th-space-1-5) 0 !important;
  background:var(--th-color-bg) !important;
}
#th-header__header .th-header__cart-dropdown [data-cart-products]::-webkit-scrollbar{ width:8px; }
#th-header__header .th-header__cart-dropdown [data-cart-products]::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--th-neutral-900) 18%, transparent);
  border-radius:var(--th-radius-full);
  border:2px solid var(--th-neutral-0);
}
#th-header__header .th-header__cart-dropdown [data-cart-products]::-webkit-scrollbar-track{ background:transparent; }

/* THEME INJECT — list wrapper */
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart{
  padding: 0 !important;
  margin: 0 !important;
}

/* THEME INJECT — item row */
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .product{
  position:relative !important;
  display:flex !important;
  gap:var(--th-space-3) !important;
  padding:var(--th-space-2-5) var(--th-space-4) !important;
  align-items:flex-start !important;
  border:0 !important;
  background:transparent !important;
}
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .product + .product{
  border-top:1px solid color-mix(in srgb, var(--th-neutral-900) 6%, transparent) !important;
}
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .product:hover{
  background:var(--th-color-bg-secondary) !important;
}

/* image */
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .product .image{
  width:52px !important;
  height:52px !important;
  flex:0 0 auto !important;
}
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .product .image img{
  width:52px !important;
  height:52px !important;
  border-radius: var(--th-radius-xl) !important;
  object-fit:cover !important;
  border:1px solid color-mix(in srgb, var(--th-neutral-900) 6%, transparent) !important;
  display:block !important;
}

/* info */
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .product .info{
  flex:1 !important;
  min-width:0 !important;
  padding-right:26px !important; /* remove btn için yer */
}

/* name */
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .product .info .name{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  font-size:var(--th-text-xs) !important;
  font-weight:var(--th-font-regular) !important;
  color: var(--th-color-text) !important;
  line-height:1.35 !important;
  text-decoration:none !important;
}
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .product .info .name:hover{
  color: var(--th-color-text) !important;
  text-decoration:none !important;
}

/* variants (minimal chips) */
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .variants{
  margin-top:var(--th-space-1) !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:var(--th-space-1-5) !important;
}
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .variant{
  font-size:var(--th-text-xs) !important;
  color: var(--th-color-text-muted) !important;
  background: var(--th-color-bg-secondary) !important;
  border:1px solid color-mix(in srgb, var(--th-neutral-900) 8%, transparent) !important;
  border-radius:var(--th-radius-full) !important;
  padding:var(--th-space-0-5) var(--th-space-2) !important;
}
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .variant span{
  color: var(--th-color-text) !important;
  font-weight:var(--th-font-semibold) !important;
}

/* price line */
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .product .price{
  margin-top:var(--th-space-1-5) !important;
  font-size:var(--th-text-xs-plus) !important;
  color: var(--th-color-text-secondary) !important;
}
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .product .price .value{
  font-weight:var(--th-font-bold) !important;
  color:var(--th-color-accent) !important; /* vurgu */
}

/* remove button (premium minimal) */
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .btn-remove{
  position:absolute !important;
  top:var(--th-space-2-5) !important;
  right:var(--th-space-3) !important;
  width:22px !important;
  height:22px !important;
  border-radius:var(--th-radius-full) !important;
  border:1px solid color-mix(in srgb, var(--th-neutral-900) 10%, transparent) !important;
  background:var(--th-color-bg) !important;
  color: var(--th-color-text-muted) !important;
  line-height:20px !important;
  padding:0 !important;
  font-size:var(--th-text-base) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .btn-remove:hover{
  background: var(--th-color-bg-tertiary) !important;
  color: var(--th-color-text) !important;
}

/* empty state (theme inject) */
#th-header__header .th-header__cart-dropdown .ajax-cart-empty{
  padding: var(--th-space-4) !important;
  color: var(--th-color-text-secondary) !important;
  font-size:var(--th-text-sm) !important;
}
#th-header__header .th-header__cart-dropdown .ajax-cart-empty strong{
  color: var(--th-color-text) !important;
}

/* summary */
#th-header__header .th-header__cart-dropdown [data-cart-summary]{
  border-top:1px solid color-mix(in srgb, var(--th-neutral-900) 6%, transparent) !important;
  padding: var(--th-space-3) var(--th-space-4) var(--th-space-3-5) !important;
  background:var(--th-color-bg) !important;
}
#th-header__header .th-header__cart-dropdown .header-cart-summary-1{
  margin:0 !important;
}
#th-header__header .th-header__cart-dropdown .header-cart-summary-1 .table{
  width:100% !important;
  margin:0 0 var(--th-space-2-5) !important;
}
#th-header__header .th-header__cart-dropdown .header-cart-summary-1 .table tfoot tr th{
  padding:var(--th-space-1-5) 0 !important;
  font-size:var(--th-text-xs-plus) !important;
  color: var(--th-color-text-secondary) !important;
  font-weight:var(--th-font-semibold) !important;
}
#th-header__header .th-header__cart-dropdown .header-cart-summary-1 .table tfoot tr th:last-child{
  text-align:right !important;
  color: var(--th-color-success) !important;
  font-weight:var(--th-font-bold) !important;
}
#th-header__header .th-header__cart-dropdown .header-cart-summary-1 .final{
  font-size:var(--th-text-base) !important;
  font-weight:var(--th-font-semibold) !important;
  color: var(--th-color-text) !important;
}

/* buttons (2'li premium) */
#th-header__header .th-header__cart-dropdown .header-cart-summary-1 .buttons{
  display:flex !important;
  gap:var(--th-space-2-5) !important;
  margin-top:var(--th-space-2-5) !important;
}
#th-header__header .th-header__cart-dropdown .header-cart-summary-1 .buttons .btn{
  flex:1 !important;
  height:40px !important;
  border-radius: var(--th-radius-xl) !important;
  font-size:var(--th-text-sm) !important;
  font-weight:var(--th-font-bold) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  border:1px solid color-mix(in srgb, var(--th-neutral-900) 10%, transparent) !important;
  background:var(--th-color-bg) !important;
  color: var(--th-color-text) !important;
}
#th-header__header .th-header__cart-dropdown .header-cart-summary-1 .buttons .btn-color-2{
  background:var(--th-color-accent) !important;
  border-color:var(--th-color-accent) !important;
  color:var(--th-color-text-inverse) !important;
}
#th-header__header .th-header__cart-dropdown .header-cart-summary-1 .buttons .btn-color-2 i{
  margin-left:var(--th-space-1-5) !important;
  font-size:var(--th-text-xs-plus) !important;
}
#th-header__header .th-header__cart-dropdown .header-cart-summary-1 .buttons .btn:hover{
  filter: none !important;
  transform:none !important;
  opacity: .95 !important;
}



/* === kaynak: components.css 1069-1197 (cart drawer component) - Z-2 sprint === */

   SECTION 34 — C7-5: ADD TO CART DRAWER
   ═══════════════════════════════════════════════════════════════════ */

/* --- Overlay --- */
.th-cart-drawer__overlay {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--th-ink-900) 45%, transparent);
  z-index: var(--th-z-max);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.th-cart-drawer__overlay.th-cart-drawer__open {
  opacity: 1; visibility: visible;
}

/* --- Drawer panel --- */
.th-cd {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 92vw;
  background: color-mix(in srgb, var(--th-neutral-0) 92%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  z-index: var(--th-z-max);
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px color-mix(in srgb, var(--th-ink-900) 12%, transparent);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.th-cd.th-cart-drawer__open {
  transform: translateX(0);
}

/* --- Header --- */
.th-cart-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--th-space-3-5) var(--th-space-5);
  background: var(--th-emerald-50);
  border-bottom: 1px solid var(--th-emerald-100);
  flex-shrink: 0;
}
.th-cart-drawer__success {
  font-size: var(--th-text-base); font-weight: var(--th-font-semibold); color: var(--th-color-success);
  display: flex; align-items: center; gap: var(--th-space-2);
}
.th-cart-drawer__success i { font-size: var(--th-text-lg); }
.th-cart-drawer__close {
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: var(--th-radius-circle);
  display: flex; align-items: center; justify-content: center;
  color: var(--th-neutral-400); font-size: var(--th-text-md);
  transition: background .2s, color .2s;
}
.th-cart-drawer__close:hover { background: var(--th-color-bg-secondary); color: var(--th-color-text-secondary); }

/* --- Body --- */
.th-cart-drawer__body {
  flex: 1; overflow-y: auto; padding: var(--th-space-5);
}

/* Added product */
.th-cart-drawer__product-inner {
  display: flex; gap: var(--th-space-3-5); padding-bottom: var(--th-space-4);
  border-bottom: 1px solid var(--th-color-bg-secondary); margin-bottom: var(--th-space-4);
}
.th-cart-drawer__product-img {
  width: 72px; height: 90px; object-fit: cover;
  border-radius: var(--th-radius-lg); border: 1px solid var(--th-color-bg-secondary); background: var(--th-neutral-50);
  flex-shrink: 0;
}
.th-cart-drawer__product-info {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--th-space-1-5);
}
.th-cart-drawer__product-name {
  font-size: var(--th-text-base); font-weight: var(--th-font-regular); color: var(--th-color-text-secondary);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.th-cart-drawer__product-meta {
  display: flex; align-items: center; gap: var(--th-space-3); flex-wrap: wrap;
}
.th-cart-drawer__product-price {
  font-size: var(--th-text-md); font-weight: var(--th-font-bold); color: var(--th-color-accent);
}
.th-cart-drawer__product-qty {
  font-size: var(--th-text-xs-plus); font-weight: var(--th-font-medium); color: var(--th-color-text-muted);
  background: var(--th-color-bg-secondary); border-radius: var(--th-radius-sm); padding: var(--th-space-0-5) var(--th-space-2);
}

/* Shipping */
.th-cart-drawer__ship-ok {
  background: var(--th-emerald-50); border-radius: var(--th-radius-lg); padding: var(--th-space-2-5) var(--th-space-3-5);
  font-size: var(--th-text-sm); font-weight: var(--th-font-semibold); color: var(--th-color-success);
  display: flex; align-items: center; gap: var(--th-space-2); margin-bottom: var(--th-space-4);
}

/* Motivation banner */
.th-cart-drawer__motivation {
  display: flex; align-items: center; gap: var(--th-space-2);
  padding: var(--th-space-2-5) var(--th-space-3-5); border-radius: var(--th-radius-lg); margin-bottom: var(--th-space-3-5);
  font-size: var(--th-text-sm); font-weight: var(--th-font-medium); color: var(--th-amber-800);
  background: var(--th-orange-50); border: 1px solid var(--th-orange-200);
  line-height: 1.4;
}
.th-cart-drawer__motivation i {
  color: var(--th-color-accent); font-size: var(--th-text-base); flex-shrink: 0;
}
.th-cart-drawer__motivation strong {
  color: var(--th-color-accent); font-weight: var(--th-font-bold);
}
.th-cart-drawer__motivation--success {
  background: var(--th-emerald-50); border-color: var(--th-emerald-200); color: var(--th-emerald-800);
}
.th-cart-drawer__motivation--success i { color: var(--th-color-success); }
.th-cart-drawer__motivation--success strong { color: var(--th-color-success); }

/* Summary */
.th-cart-drawer__summary {
  background: var(--th-neutral-50); border-radius: var(--th-radius-xl); padding: var(--th-space-3-5) var(--th-space-4);
  display: flex; flex-direction: column; gap: var(--th-space-2-5);
}
.th-cart-drawer__summary-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--th-text-base); color: var(--th-color-text-muted);
}
.th-cart-drawer__summary-row strong {
  font-size: var(--th-text-lg); font-weight: var(--th-font-bold); color: var(--th-color-text);
}
.th-cart-drawer__count {
  font-size: var(--th-text-base); font-weight: var(--th-font-semibold); color: var(--th-color-accent);
}
.th-cart-drawer__summary-row--count {
  padding-bottom: var(--th-space-2-5); border-bottom: 1px solid var(--th-color-border);
}

/* --- Footer --- */
.th-cart-drawer__footer {
  padding: var(--th-space-3-5) var(--th-space-5);
  border-top: 1px solid var(--th-color-border);
  display: flex; flex-direction: column; gap: var(--th-space-2-5);
  flex-shrink: 0;
}
.th-cart-drawer__btn {
  display: flex; align-items: center; justify-content: center; gap: var(--th-space-2);
  padding: var(--th-space-3) var(--th-space-5); border-radius: var(--th-radius-lg);
  font-size: var(--th-text-base-plus); font-weight: var(--th-font-semibold);
  cursor: pointer; border: none;
  transition: background .2s, transform .1s;
  text-decoration: none; text-align: center;
}
.th-cart-drawer__btn:active { transform: scale(.98); }
.th-cart-drawer__btn--cart {
  background: var(--th-color-accent); color: var(--th-neutral-0);
}
.th-cart-drawer__btn--cart:hover { background: var(--th-orange-700); color: var(--th-neutral-0); }
.th-cart-drawer__btn-count {
  font-size: var(--th-text-sm); font-weight: var(--th-font-medium); opacity: .85;
}
.th-cart-drawer__btn--continue {
  background: var(--th-color-bg-secondary); color: var(--th-color-text-secondary);
}
.th-cart-drawer__btn--continue:hover { background: var(--th-color-border); }

/* --- Mobile (≤768px) --- */
@media (max-width: 768px) {
  /* Cart drawer: full-width on mobile/tablet */
  .th-cd { width: 100%; max-width: 100%; }

  /* Cart drawer body: tighter padding on small screens */
  .th-cart-drawer__body { padding: var(--th-space-4); }
  .th-cart-drawer__header { padding: var(--th-space-3-5) var(--th-space-4); }
  .th-cart-drawer__footer { padding: var(--th-space-3-5) var(--th-space-4); }

  /* Cart dropdown: full-width on mobile */
  #th-header__header .th-header__cart-dropdown {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 0 var(--th-radius-xl) var(--th-radius-xl) !important;
  }
}