/* ═══════════════════════════════════════════════════════════

   SASU ABCduWeb - Cart Drawer v2.0

   Les couleurs sont injectees via PHP (customizer) sous forme

   de variables CSS sur :root — voir inc/cart-drawer-customizer.php

   ═══════════════════════════════════════════════════════════ */



/* ── Variables par defaut (fallback si PHP non charge) ─────── */

:root {

  --acd-btn-checkout-bg     : #8ab734;

  --acd-btn-checkout-bg-hover: #009aa0;

  --acd-btn-checkout-color  : #ffffff;

  --acd-btn-cart-color      : #555555;

  --acd-btn-cart-border     : #e0dbd5;

  --acd-accent              : #8ab734;

  --acd-accent-light        : #f0f5e8;

  --acd-accent-dark         : #3B6D11;

  --acd-spinner-color       : #8ab734;

}



/* ── Overlay ────────────────────────────────────────────────── */

#als-cart-overlay {

  position  : fixed;

  inset     : 0;

  background: rgba(0,0,0,0);

  z-index   : 9000;

  pointer-events: none;

  transition: background .35s ease;

}

#als-cart-overlay.open {

  background    : rgba(0,0,0,.45);

  pointer-events: all;

}



/* ── Drawer ─────────────────────────────────────────────────── */

#als-cart-drawer {

  position  : fixed;

  top       : 0;

  right     : 0;

  bottom    : 0;

  width     : 420px;

  max-width : 95vw;

  background: #fff;

  z-index   : 9001;

  display   : flex;

  flex-direction: column;

  transform : translateX(100%);

  transition: transform .38s cubic-bezier(.4,0,.2,1);

  box-shadow: -4px 0 32px rgba(0,0,0,.12);

}

#als-cart-drawer.open {

  transform: translateX(0);

}



/* ── Header ─────────────────────────────────────────────────── */

.acd-header {

  display        : flex;

  align-items    : center;

  justify-content: space-between;

  padding        : 20px 22px 18px;

  border-bottom  : 1px solid #f0ede8;

  flex-shrink    : 0;

}

.acd-title {

  font-size  : 15px;

  font-weight: 600;

  color      : #2b2b2b;

  margin     : 0 0 2px;

  letter-spacing: .01em;

}

.acd-count {

  font-size: 12px;

  color    : #888;

  margin   : 0;

}

.acd-close {

  width     : 34px;

  height    : 34px;

  border    : 1px solid #e8e4df;

  border-radius: 50%;

  background: #fff;

  cursor    : pointer;

  display   : flex;

  align-items: center;

  justify-content: center;

  color     : #555;

  transition: background .15s, border-color .15s;

  flex-shrink: 0;

}

.acd-close:hover { background: #f5f2ee; border-color: #ccc; }



/* ── Body scrollable ────────────────────────────────────────── */

.acd-body {

  flex     : 1;

  overflow-y: auto;

  padding  : 0;

  -webkit-overflow-scrolling: touch;

}



/* ── Loader ─────────────────────────────────────────────────── */

.acd-loading {

  display        : flex;

  align-items    : center;

  justify-content: center;

  padding        : 48px 0;

}

.acd-spinner {

  width : 28px;

  height: 28px;

  border: 2.5px solid #e8e4df;

  border-top-color: var(--acd-spinner-color);

  border-radius: 50%;

  animation: acd-spin .7s linear infinite;

}

@keyframes acd-spin { to { transform: rotate(360deg); } }



/* ── Panier vide ────────────────────────────────────────────── */

.acd-empty {

  display        : flex;

  flex-direction : column;

  align-items    : center;

  justify-content: center;

  padding        : 48px 24px;

  text-align     : center;

  color          : #888;

  gap            : 12px;

}

.acd-empty svg { opacity: .25; }

.acd-empty p { font-size: 14px; margin: 0; }

.acd-empty a {

  margin-top     : 8px;

  display        : inline-block;

  padding        : 10px 22px;

  background     : var(--acd-btn-checkout-bg);

  color          : var(--acd-btn-checkout-color) !important;

  text-decoration: none !important;

  border-radius  : 4px;

  font-size      : 13px;

  font-weight    : 500;

  transition     : background .15s;

}

.acd-empty a:hover { background: var(--acd-btn-checkout-bg-hover); }



/* ── Items ──────────────────────────────────────────────────── */

.acd-items { padding: 0; list-style: none; margin: 0; }



.acd-item {

  display      : flex;

  gap          : 14px;

  padding      : 16px 22px;

  border-bottom: 1px solid #f5f2ee;

  align-items  : flex-start;

}

.acd-item:last-child { border-bottom: none; }



.acd-item-img {

  width        : 72px;

  height       : 72px;

  border-radius: 8px;

  object-fit   : cover;

  background   : #f0ede8;

  flex-shrink  : 0;

  display      : block;

}

.acd-item-img-placeholder {

  width         : 72px;

  height        : 72px;

  border-radius : 8px;

  background    : #f0ede8;

  flex-shrink   : 0;

  display       : flex;

  align-items   : center;

  justify-content: center;

}

.acd-item-info { flex: 1; min-width: 0; }

.acd-item-name {

  font-size  : 13px;

  font-weight: 500;

  color      : #2b2b2b;

  margin     : 0 0 3px;

  line-height: 1.4;

  white-space: nowrap;

  overflow   : hidden;

  text-overflow: ellipsis;

}

.acd-item-meta {

  font-size: 11px;

  color    : #999;

  margin   : 0 0 10px;

}

.acd-item-row {

  display    : flex;

  align-items: center;

  justify-content: space-between;

}

.acd-qty {

  display    : flex;

  align-items: center;

  gap        : 8px;

  border     : 1px solid #e8e4df;

  border-radius: 20px;

  padding    : 3px 10px;

}

.acd-qty-btn {

  background: none;

  border    : none;

  cursor    : pointer;

  color     : #555;

  font-size : 16px;

  line-height: 1;

  padding   : 0;

  width     : 18px;

  text-align: center;

  transition: color .15s;

}

.acd-qty-btn:hover { color: var(--acd-accent); }

.acd-qty-btn:disabled { opacity: .3; cursor: default; }

.acd-qty-val {

  font-size  : 13px;

  font-weight: 500;

  color      : #2b2b2b;

  min-width  : 18px;

  text-align : center;

}

.acd-item-price {

  font-size  : 14px;

  font-weight: 600;

  color      : #2b2b2b;

}

.acd-item-remove {

  font-size      : 11px;

  color          : #bbb;

  text-decoration: none;

  cursor         : pointer;

  background     : none;

  border         : none;

  padding        : 4px 0 0;

  display        : block;

  text-align     : left;

  transition     : color .15s;

}

.acd-item-remove:hover { color: #c0392b; }



/* ── Footer ─────────────────────────────────────────────────── */

.acd-footer {

  flex-shrink  : 0;

  border-top   : 1px solid #f0ede8;

  padding      : 16px 22px 24px;

  background   : #fff;

}



/* ── Barre livraison offerte ────────────────────────────────── */

.acd-ship {

  background   : var(--acd-accent-light);

  border-radius: 8px;

  padding      : 10px 14px;

  margin-bottom: 14px;

}

.acd-ship-msg {

  font-size  : 12px;

  color      : var(--acd-accent-dark);

  margin     : 0 0 7px;

  line-height: 1.4;

}

.acd-ship-msg strong { font-weight: 600; }

.acd-ship-ok { color: var(--acd-accent-dark); font-weight: 500; }

.acd-ship-bar-wrap {

  height       : 5px;

  background   : color-mix(in srgb, var(--acd-accent) 25%, white);

  border-radius: 10px;

  overflow     : hidden;

}

.acd-ship-bar {

  height    : 5px;

  background: var(--acd-accent);

  border-radius: 10px;

  transition: width .4s ease;

}



/* ── Sous-total ─────────────────────────────────────────────── */

.acd-totals {

  display        : flex;

  justify-content: space-between;

  align-items    : baseline;

  margin-bottom  : 4px;

}

.acd-totals-label { font-size: 13px; color: #888; }

.acd-totals-val   { font-size: 18px; font-weight: 600; color: #2b2b2b; }

.acd-tax-note     { font-size: 11px; color: #bbb; margin: 0 0 14px; }



/* ── Bouton Commander ───────────────────────────────────────── */

.acd-btn-checkout {

  display        : flex;

  align-items    : center;

  justify-content: center;

  gap            : 8px;

  width          : 100%;

  padding        : 14px;

  background     : var(--acd-btn-checkout-bg);

  color          : var(--acd-btn-checkout-color) !important;

  text-decoration: none !important;

  border-radius  : 6px;

  font-size      : 14px;

  font-weight    : 600;

  letter-spacing : .04em;

  margin-bottom  : 8px;

  transition     : background .15s;

  border         : none;

}

.acd-btn-checkout:hover {

  background: var(--acd-btn-checkout-bg-hover) !important;

  color     : var(--acd-btn-checkout-color) !important;

}



/* ── Bouton Voir le panier ──────────────────────────────────── */

.acd-btn-cart {

  display        : block;

  width          : 100%;

  padding        : 11px;

  background     : #fff;

  color          : var(--acd-btn-cart-color);

  text-decoration: none;

  border         : 1px solid var(--acd-btn-cart-border);

  border-radius  : 6px;

  font-size      : 13px;

  text-align     : center;

  transition     : background .15s, border-color .15s;

}

.acd-btn-cart:hover { background: #f8f5f1; border-color: #ccc; }



/* ── Body no-scroll quand drawer ouvert ─────────────────────── */

body.als-cart-open { overflow: hidden; }



/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 480px) {

  #als-cart-drawer { width: 100vw; max-width: 100vw; }

}



/* ── Toast "produit ajouté" ─────────────────────────────────── */

.acd-toast {

  position        : absolute;

  top             : 0;

  left            : 0;

  right           : 0;

  background      : var(--als-accent, #8ab734);

  color           : #fff;

  text-align      : center;

  font-size       : 13px;

  font-weight     : 600;

  padding         : 10px 16px;

  z-index         : 10;

  opacity         : 0;

  transform       : translateY(-100%);

  transition      : opacity .25s ease, transform .25s ease;

  pointer-events  : none;

}

.acd-toast--in {

  opacity   : 1;

  transform : translateY(0);

}