/* ============================================================
   TND Pro Cart v1.1 — Global Styles
   Tamil Nadu Digital | tamilnadudigital.com
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=DM+Sans:wght@400;500&display=swap');

/* Base defaults (overridden by admin via wp_head CSS vars) */
:root {
  --tnd-primary:         #1a1a2e;
  --tnd-accent:          #ff6b35;
  --tnd-accent2:         #e63946;
  --tnd-success:         #06d6a0;
  --tnd-text:            #2d2d3a;
  --tnd-text-muted:      #7a7a8c;
  --tnd-border:          #e8eaf0;
  --tnd-bg:              #ffffff;
  --tnd-bg-soft:         #f8f9fc;
  --tnd-radius:          14px;
  --tnd-font:            'Sora', sans-serif;
  --tnd-body-font:       'DM Sans', sans-serif;
  --tnd-transition:      cubic-bezier(.4,0,.2,1);

  /* Admin-controlled vars (fallbacks) */
  --tnd-float-bg:        #1a1a2e;
  --tnd-float-icon:      #ffffff;
  --tnd-float-size:      58px;
  --tnd-float-bottom:    32px;
  --tnd-float-top:       auto;
  --tnd-float-right:     32px;
  --tnd-float-left:      auto;
  --tnd-badge-bg:        #ff6b35;
  --tnd-badge-text:      #ffffff;
  --tnd-header-bg:       #1a1a2e;
  --tnd-header-text:     #ffffff;
  --tnd-close-bg:        #ffffff;
  --tnd-close-color:     #1a1a2e;
  --tnd-close-hover-bg:  #1a1a2e;
  --tnd-close-hover-clr: #ffffff;
  --tnd-btn1-bg:         #ff6b35;
  --tnd-btn1-bg2:        #e63946;
  --tnd-btn1-text:       #ffffff;
  --tnd-btn2-bg:         #f8f9fc;
  --tnd-btn2-text:       #2d2d3a;
  --tnd-btn2-border:     #e8eaf0;
  --tnd-qty-bg:          #f8f9fc;
  --tnd-qty-color:       #2d2d3a;
  --tnd-qty-hover-bg:    #e8eaf0;
  --tnd-sidebar-w:       400px;
}

/* ── Shared Buttons ─────────────────────────────────────── */
.tnd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px; border-radius: 10px;
  font-family: var(--tnd-font); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: all .25s var(--tnd-transition);
  cursor: pointer; border: none; letter-spacing: .3px; box-sizing: border-box;
}
.tnd-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.tnd-btn--primary {
  background: linear-gradient(135deg, var(--tnd-btn1-bg), var(--tnd-btn1-bg2));
  color: var(--tnd-btn1-text) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.tnd-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
  text-decoration: none;
}

.tnd-btn--secondary {
  background: var(--tnd-btn2-bg);
  color: var(--tnd-btn2-text) !important;
  border: 1.5px solid var(--tnd-btn2-border);
  margin-top: 10px;
}
.tnd-btn--secondary:hover {
  opacity: .85;
  text-decoration: none;
}
.tnd-btn--lg { padding: 16px 28px; font-size: 15px; }

/* ── Floating Cart Icon ─────────────────────────────────── */
.tnd-float-cart {
  position: fixed;
  bottom: var(--tnd-float-bottom);
  top: var(--tnd-float-top);
  right: var(--tnd-float-right);
  left: var(--tnd-float-left);
  z-index: 9998;
  width: var(--tnd-float-size);
  height: var(--tnd-float-size);
  background: var(--tnd-float-bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  transition: all .3s var(--tnd-transition);
}
.tnd-float-cart:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,.4);
}
.tnd-float-cart__icon { display: flex; align-items: center; justify-content: center; color: var(--tnd-float-icon); }
.tnd-float-cart__icon svg { width: 24px; height: 24px; }

.tnd-float-cart__badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--tnd-badge-bg); color: var(--tnd-badge-text);
  font-family: var(--tnd-font); font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: transform .2s var(--tnd-transition);
}
.tnd-float-cart__badge.tnd-badge-bump { animation: tndBump .35s var(--tnd-transition); }
@keyframes tndBump { 0%{transform:scale(1)} 50%{transform:scale(1.6)} 100%{transform:scale(1)} }

/* ── Sidebar Overlay ────────────────────────────────────── */
.tnd-sidebar-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(10,10,20,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--tnd-transition);
}
.tnd-sidebar-overlay.is-active { opacity: 1; pointer-events: all; }

/* ── Cart Sidebar ───────────────────────────────────────── */
.tnd-cart-sidebar {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 99999; width: var(--tnd-sidebar-w); max-width: 100vw;
  background: var(--tnd-bg); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .4s var(--tnd-transition);
  box-shadow: -12px 0 60px rgba(0,0,0,.15);
}
.tnd-cart-sidebar.is-open { transform: translateX(0); }

/* ─ Header ─────────────────────────────────────────────── */
.tnd-sidebar__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  height: 64px;
  background: var(--tnd-header-bg);
  flex-shrink: 0;
}
.tnd-sidebar__title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--tnd-font); font-size: 17px; font-weight: 700;
  color: var(--tnd-header-text);
}
.tnd-sidebar__title svg { width: 20px; height: 20px; stroke: var(--tnd-header-text); }

.tnd-sidebar__count {
  background: var(--tnd-badge-bg); color: var(--tnd-badge-text);
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; min-width: 22px; text-align: center;
}

/* ─ Close Button ────────────────────────────────────────── */
.tnd-sidebar__close {
  background: var(--tnd-close-bg) !important;
  border: 2px solid rgba(255,255,255,.25) !important;
  border-radius: 8px !important;
  width: 38px !important; height: 38px !important;
  min-width: 38px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; padding: 0 !important; margin: 0 !important;
  transition: all .2s !important; flex-shrink: 0;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}
.tnd-sidebar__close svg {
  width: 16px !important; height: 16px !important;
  stroke: var(--tnd-close-color) !important;
  display: block !important;
  pointer-events: none;
}
.tnd-sidebar__close:hover {
  background: var(--tnd-close-hover-bg) !important;
  border-color: transparent !important;
  transform: rotate(90deg) !important;
}
.tnd-sidebar__close:hover svg { stroke: var(--tnd-close-hover-clr) !important; }

/* ─ Free Shipping Progress ──────────────────────────────── */
.tnd-sidebar__progress {
  padding: 12px 20px; background: #f0fdf4;
  border-bottom: 1px solid #c8e6c9; flex-shrink: 0;
}
.tnd-sidebar__progress-text { font-size: 13px; color: #2e7d32; font-weight: 500; margin-bottom: 7px; }
.tnd-sidebar__progress-bar { background: #c8e6c9; border-radius: 20px; height: 6px; overflow: hidden; }
.tnd-sidebar__progress-fill {
  height: 100%; background: linear-gradient(90deg, #43a047, #66bb6a);
  border-radius: 20px; transition: width .6s var(--tnd-transition);
}

/* ─ Items ───────────────────────────────────────────────── */
.tnd-sidebar__items {
  flex: 1; overflow-y: auto; padding: 0;
  scrollbar-width: thin; scrollbar-color: var(--tnd-border) transparent;
}
.tnd-sidebar__items::-webkit-scrollbar { width: 4px; }
.tnd-sidebar__items::-webkit-scrollbar-thumb { background: var(--tnd-border); border-radius: 4px; }

.tnd-sidebar__item {
  display: flex; gap: 14px; padding: 16px 20px;
  border-bottom: 1px solid var(--tnd-border);
  animation: tndFadeIn .3s var(--tnd-transition); position: relative;
}
.tnd-sidebar__item:last-child { border-bottom: none; }
@keyframes tndFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.tnd-sidebar__item-img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 10px; background: var(--tnd-bg-soft);
  flex-shrink: 0; border: 1.5px solid var(--tnd-border);
}
.tnd-sidebar__item-info { flex: 1; min-width: 0; }
.tnd-sidebar__item-name {
  font-family: var(--tnd-font); font-size: 14px; font-weight: 600;
  color: var(--tnd-text); text-decoration: none; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px;
}
.tnd-sidebar__item-name:hover { color: var(--tnd-btn1-bg); }
.tnd-sidebar__item-price { font-size: 12px; color: var(--tnd-text-muted); margin-bottom: 10px; }
.tnd-sidebar__item-variation { font-size: 11px; color: var(--tnd-text-muted); margin-bottom: 6px; }

.tnd-sidebar__item-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Qty Stepper */
.tnd-qty-stepper {
  display: inline-flex; align-items: center;
  background: var(--tnd-qty-bg); border: 1.5px solid var(--tnd-border); border-radius: 8px; overflow: hidden;
}
.tnd-qty-btn {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  font-size: 17px; font-weight: 700; color: var(--tnd-qty-color);
  transition: background .15s; line-height: 1; padding: 0;
}
.tnd-qty-btn:hover { background: var(--tnd-qty-hover-bg); }
.tnd-qty-val {
  min-width: 32px; text-align: center;
  font-family: var(--tnd-font); font-size: 13px; font-weight: 600; color: var(--tnd-text);
}
.tnd-sidebar__item-total { font-family: var(--tnd-font); font-size: 14px; font-weight: 700; color: var(--tnd-primary); }

.tnd-sidebar__remove {
  position: absolute; top: 12px; right: 16px;
  width: 24px; height: 24px; background: none; border: none;
  cursor: pointer; color: var(--tnd-text-muted); opacity: .5;
  transition: all .2s; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; padding: 0;
}
.tnd-sidebar__remove:hover { opacity: 1; color: #e63946; background: #fff0f0; }
.tnd-sidebar__remove svg { width: 14px; height: 14px; }

/* Skeleton */
.tnd-sidebar__loading { padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; }
.tnd-skeleton-row { display: flex; gap: 14px; align-items: center; }
.tnd-skeleton-img, .tnd-skeleton-text {
  background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px;
}
.tnd-skeleton-img { width: 72px; height: 72px; flex-shrink: 0; }
.tnd-skeleton-text { height: 13px; flex: 1; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Footer */
.tnd-sidebar__footer {
  padding: 18px 20px; border-top: 2px solid var(--tnd-border);
  background: var(--tnd-bg); flex-shrink: 0;
}
.tnd-sidebar__subtotal {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--tnd-font); font-size: 16px; font-weight: 700;
  color: var(--tnd-primary); margin-bottom: 4px;
}
.tnd-sidebar__tax-note { font-size: 12px; color: var(--tnd-text-muted); margin-bottom: 16px; }

/* Empty state */
.tnd-sidebar__empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 24px; text-align: center;
}
.tnd-sidebar__empty-icon svg { width: 80px; height: 80px; margin-bottom: 20px; opacity: .3; }
.tnd-sidebar__empty h3 { font-family: var(--tnd-font); font-size: 18px; font-weight: 700; color: var(--tnd-text); margin-bottom: 8px; }
.tnd-sidebar__empty p { font-size: 14px; color: var(--tnd-text-muted); margin-bottom: 24px; }

/* Remove animation */
.tnd-sidebar__item.is-removing { opacity: 0; transform: translateX(30px); transition: all .3s var(--tnd-transition); pointer-events: none; }

/* Body lock */
body.tnd-sidebar-open { overflow: hidden; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --tnd-sidebar-w: 100vw; --tnd-float-size: 52px; }
  .tnd-float-cart { bottom: 20px; right: 20px; }
}

/* ══════════════════════════════════════════════════════════
   GIFT WRAP OPTION  — TND Pro Cart v1.2
   ══════════════════════════════════════════════════════════ */

.tnd-gift-wrap {
  margin: 0 0 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fff8f0 0%, #fff3f8 100%);
  border: 1.5px dashed #e8a87c;
  border-radius: 10px;
  transition: border-color 0.2s, background 0.2s;
}

.tnd-gift-wrap:has(#tndGiftWrapCheck:checked) {
  background: linear-gradient(135deg, #fff3e0 0%, #fce4ec 100%);
  border-color: #ff6b35;
  border-style: solid;
}

.tnd-gift-wrap__label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}

/* Hidden native checkbox */
.tnd-gift-wrap__check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom checkbox box */
.tnd-gift-wrap__checkbox-wrap {
  position: relative;
  flex-shrink: 0;
}

.tnd-gift-wrap__checkmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background: #fff;
  transition: border-color 0.18s, background 0.18s;
}

.tnd-gift-wrap__checkmark svg {
  width: 12px;
  height: 10px;
  stroke: #fff;
  opacity: 0;
  transition: opacity 0.15s;
}

.tnd-gift-wrap__check:checked + .tnd-gift-wrap__checkmark {
  background: #ff6b35;
  border-color: #ff6b35;
}

.tnd-gift-wrap__check:checked + .tnd-gift-wrap__checkmark svg {
  opacity: 1;
}

.tnd-gift-wrap__check:focus-visible + .tnd-gift-wrap__checkmark {
  outline: 2px solid #ff6b35;
  outline-offset: 2px;
}

.tnd-gift-wrap__check:disabled + .tnd-gift-wrap__checkmark {
  opacity: 0.5;
}

/* Text side */
.tnd-gift-wrap__text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #2d2d3a;
  line-height: 1.4;
  flex-wrap: wrap;
}

.tnd-gift-wrap__icon {
  display: flex;
  align-items: center;
}

.tnd-gift-wrap__icon svg {
  width: 18px;
  height: 18px;
  stroke: #ff6b35;
  flex-shrink: 0;
}

.tnd-gift-wrap__price {
  font-size: 12px;
  font-weight: 600;
  color: #ff6b35;
  background: rgba(255, 107, 53, 0.10);
  padding: 1px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Gift Message Textarea ────────────────────────────── */
.tnd-gift-message {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
  opacity: 0;
  margin-top: 0;
}

.tnd-gift-message.is-visible {
  max-height: 120px;
  opacity: 1;
  margin-top: 10px;
}

.tnd-gift-message__input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  color: #2d2d3a;
  background: #fff;
  resize: none;
  outline: none;
  line-height: 1.5;
  transition: border-color 0.18s;
  box-sizing: border-box;
}

.tnd-gift-message__input::placeholder {
  color: #bbb;
  font-style: italic;
}

.tnd-gift-message__input:focus {
  border-color: #ff6b35;
  box-shadow: 0 0 0 3px rgba(255,107,53,0.10);
}