/* ================================================================
   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 rgba(17,24,39,.08) !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:14px 16px !important;
  border-bottom:1px solid rgba(17,24,39,.06) !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:700 !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:500 !important;
}

/* free ship block (minimal) */
#th-header__header .th-header__cart-dropdown .tnh-free-ship{
  padding:10px 16px !important;
  border-bottom:1px solid rgba(17,24,39,.06) !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:600 !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:999px !important;
  overflow:hidden !important;
}
#th-header__header .th-header__cart-dropdown .tnh-ship-bar-fill{
  height:100% !important;
  background: var(--th-color-success) !important;
  border-radius:999px !important;
}

/* products area */
#th-header__header .th-header__cart-dropdown [data-cart-products]{
  max-height: 280px !important;
  overflow:auto !important;
  padding: 6px 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: rgba(17,24,39,.18);
  border-radius:999px;
  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:10px 16px !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 rgba(17,24,39,.06) !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 rgba(17,24,39,.06) !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:400 !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 rgba(17,24,39,.08) !important;
  border-radius:999px !important;
  padding:2px 8px !important;
}
#th-header__header .th-header__cart-dropdown .ajax-shopping-cart .variant span{
  color: var(--th-color-text) !important;
  font-weight:600 !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:700 !important;
  color:var(--th-orange-600) !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:999px !important;
  border:1px solid rgba(17,24,39,.10) !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 rgba(17,24,39,.06) !important;
  padding: 12px 16px 14px !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 10px !important;
}
#th-header__header .th-header__cart-dropdown .header-cart-summary-1 .table tfoot tr th{
  padding:6px 0 !important;
  font-size:var(--th-text-xs-plus) !important;
  color: var(--th-color-text-secondary) !important;
  font-weight:600 !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:700 !important;
}
#th-header__header .th-header__cart-dropdown .header-cart-summary-1 .final{
  font-size:var(--th-text-base) !important;
  font-weight:600 !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:700 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  border:1px solid rgba(17,24,39,.10) !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-orange-600) !important;
  border-color:var(--th-orange-600) !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: rgba(0,0,0,.45);
  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: 400px; max-width: 92vw;
  background: var(--th-color-bg);
  z-index: var(--th-z-max);
  display: flex; flex-direction: column;
  box-shadow: var(--th-shadow-xl);
  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: 16px 20px;
  background: var(--th-color-success-subtle);
  border-bottom: 1px solid var(--th-emerald-200);
  flex-shrink: 0;
}
.th-cart-drawer__success {
  font-size: var(--th-text-base); font-weight: 600; 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: 32px; height: 32px; border-radius: var(--th-radius-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--th-color-text-muted); font-size: var(--th-text-md);
  transition: background .2s, color .2s;
}
.th-cart-drawer__close:hover { background: var(--th-color-bg-tertiary); color: var(--th-color-text); }

/* --- 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-border-light); margin-bottom: var(--th-space-4);
}
.th-cart-drawer__product-img {
  width: 80px; height: 80px; object-fit: contain;
  border-radius: var(--th-radius-lg); border: 1px solid var(--th-color-border-light); background: var(--th-color-bg-secondary);
  flex-shrink: 0;
}
.th-cart-drawer__product-name {
  font-size: var(--th-text-base); font-weight: 500; color: var(--th-color-text);
  line-height: 1.4; margin-bottom: var(--th-space-1-5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.th-cart-drawer__product-price {
  font-size: var(--th-text-md); font-weight: 700; color: var(--th-color-accent);
}

/* Shipping */
.th-cart-drawer__ship-ok {
  background: var(--th-color-success-subtle); border-radius: var(--th-radius-lg); padding: 10px 14px;
  font-size: var(--th-text-sm); font-weight: 600; color: var(--th-color-success);
  display: flex; align-items: center; gap: var(--th-space-2); margin-bottom: var(--th-space-4);
}

/* Summary */
.th-cart-drawer__summary {
  background: var(--th-color-bg-secondary); border-radius: var(--th-radius-xl); padding: 14px 16px;
}
.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-secondary);
}
.th-cart-drawer__summary-row strong {
  font-size: var(--th-text-lg); font-weight: 700; color: var(--th-color-text);
}

/* --- Footer --- */
.th-cart-drawer__footer {
  padding: 16px 20px;
  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: 13px 20px; border-radius: var(--th-radius-xl);
  font-size: var(--th-text-base-plus); font-weight: 600;
  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-color-text-inverse);
}
.th-cart-drawer__btn--cart:hover { background: var(--th-color-accent-hover); color: var(--th-color-text-inverse); }
.th-cart-drawer__btn--continue {
  background: var(--th-color-bg-tertiary); 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: 14px 16px; }
  .th-cart-drawer__footer { padding: 14px 16px; }

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