/* =========================================================
   ADDVIBES — PREMIUM CART DRAWER
   Empty + Filled Cart
   Global Header CSS
========================================================= */

:root{
  --av-cart-navy:#071426;
  --av-cart-navy-2:#0B1C33;
  --av-cart-warm:#F3E5CF;
  --av-cart-muted:rgba(243,229,207,.68);
  --av-cart-line:rgba(243,229,207,.12);
  --av-cart-cyan:#35D6FF;
  --av-cart-violet:#8D63E8;
  --av-cart-pink:#F34FAE;
  --av-cart-orange:#FF7A00;
  --av-cart-danger:#FF6B7D;
}

/* =========================================================
   DRAWER SHELL
========================================================= */

body [data-cart="panel"]{
  width:min(92vw,430px) !important;
  max-width:430px !important;
}

body [data-cart="panel-inner"]{
  position:relative !important;
  isolation:isolate;

  overflow:hidden auto !important;

  border-left:1px solid rgba(243,229,207,.12);
  border-radius:28px 0 0 28px;

  background:
    radial-gradient(circle at 12% 10%,rgba(53,214,255,.13),transparent 28%),
    radial-gradient(circle at 92% 26%,rgba(243,79,174,.11),transparent 30%),
    radial-gradient(circle at 50% 98%,rgba(255,122,0,.09),transparent 34%),
    linear-gradient(160deg,#0A1A30 0%,#071426 52%,#050D19 100%)
    !important;

  color:var(--av-cart-warm) !important;

  box-shadow:
    -24px 0 72px rgba(0,0,0,.52),
    inset 1px 0 0 rgba(255,255,255,.035)
    !important;

  -webkit-backdrop-filter:blur(20px) saturate(125%);
  backdrop-filter:blur(20px) saturate(125%);

  scrollbar-width:thin;
  scrollbar-color:rgba(53,214,255,.40) transparent;
}

/* Logo watermark */
body [data-cart="panel-inner"]::before{
  content:"";

  position:fixed;
  z-index:-1;
  left:50%;
  top:50%;

  width:min(300px,72vw);
  aspect-ratio:900 / 506;

  transform:
    translate(-50%,-50%)
    rotate(-10deg)
    scale(1.08);

  background:
    url("https://files.easy-orders.net/1785801109199502938.png")
    center / contain no-repeat;

  opacity:.042;
  filter:grayscale(1) brightness(2.1);

  pointer-events:none;
}

body [data-cart="content"]{
  padding:26px 18px 20px !important;
}

/* =========================================================
   HEADER
========================================================= */

body [data-cart="header"]{
  position:sticky;
  top:0;
  z-index:5;

  align-items:center !important;

  margin:0 0 18px;
  padding:14px 16px;

  border:1px solid rgba(243,229,207,.12);
  border-radius:18px;

  background:rgba(7,20,38,.72);

  box-shadow:
    0 12px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.05);

  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

body [data-cart="title"]{
  margin:0 !important;

  color:var(--av-cart-warm) !important;

  font-size:18px !important;
  font-weight:800 !important;
  line-height:1.2;

  letter-spacing:.01em;
}

body [data-cart="title"]::before{
  content:"";

  display:inline-block;

  width:9px;
  height:9px;

  margin-inline-end:9px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      var(--av-cart-cyan),
      var(--av-cart-pink),
      var(--av-cart-orange)
    );

  box-shadow:
    0 0 11px rgba(53,214,255,.36),
    0 0 16px rgba(243,79,174,.22);
}

body [data-cart="close-wrapper"]{
  margin-inline-start:10px !important;
}

body [data-cart="close-button"]{
  width:40px;
  height:40px;

  margin:0 !important;
  padding:0 !important;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(243,229,207,.14);
  border-radius:13px;

  background:rgba(255,255,255,.035);

  color:var(--av-cart-warm) !important;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}

body [data-cart="close-button"]:hover{
  border-color:rgba(53,214,255,.28);
  background:rgba(53,214,255,.08);
}

body [data-cart="close-button"]:active{
  transform:scale(.94);
}

/* =========================================================
   EMPTY STATE
========================================================= */

body [data-cart="empty-state"]{
  min-height:calc(100dvh - 210px);
  height:auto !important;

  margin-top:0 !important;
  padding:34px 18px 28px;

  gap:24px !important;

  border:1px solid rgba(243,229,207,.10);
  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.050),
      rgba(255,255,255,.014)
    );

  box-shadow:
    0 18px 38px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.035);

  text-align:center;
}

body [data-cart="empty-animation-wrapper"]{
  position:relative;

  width:150px;
  height:150px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(243,229,207,.10);
  border-radius:32px;

  background:
    radial-gradient(circle at 35% 28%,rgba(53,214,255,.16),transparent 42%),
    radial-gradient(circle at 72% 68%,rgba(243,79,174,.13),transparent 42%),
    rgba(255,255,255,.025);

  box-shadow:
    0 18px 34px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05);
}

body [data-cart="empty-animation-wrapper"]::after{
  content:"";

  position:absolute;
  inset:-1px;

  border-radius:32px;
  padding:1px;

  background:
    linear-gradient(
      135deg,
      rgba(53,214,255,.55),
      rgba(141,99,232,.30),
      rgba(243,79,174,.42),
      rgba(255,122,0,.46)
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;

  pointer-events:none;
}

body [data-cart="empty-animation-wrapper"] svg{
  width:118px !important;
  height:118px !important;

  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.18))
    saturate(.75)
    brightness(1.08);
}

body [data-cart="empty-title"]{
  margin:0 !important;

  color:#FFF2DD !important;

  font-size:26px !important;
  font-weight:850 !important;
  line-height:1.2;

  letter-spacing:-.02em;
}

body [data-cart="empty-subtitle"]{
  max-width:270px;

  margin:0 !important;

  color:var(--av-cart-muted) !important;

  font-size:13px !important;
  line-height:1.7;
}

/* =========================================================
   FILLED CART — ITEMS
========================================================= */

body [data-cart="items-section"]{
  margin-top:0 !important;
}

body [data-cart="items-section"] > div{
  margin-top:0 !important;
}

body [data-cart="items-list"]{
  margin:0 !important;
}

body [data-cart="item"]{
  position:relative;

  gap:14px;

  margin:0 0 14px;
  padding:14px !important;

  border:1px solid rgba(243,229,207,.10) !important;
  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.052),
      rgba(255,255,255,.018)
    );

  box-shadow:
    0 14px 30px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.035);
}

body [data-cart="item"]::before{
  content:"";

  position:absolute;
  inset:0 auto 0 0;

  width:3px;

  border-radius:20px 0 0 20px;

  background:
    linear-gradient(
      180deg,
      var(--av-cart-cyan),
      var(--av-cart-violet),
      var(--av-cart-pink),
      var(--av-cart-orange)
    );
}

body [data-cart="item-image-wrapper"]{
  width:92px !important;
  height:92px !important;

  flex:0 0 92px;

  overflow:hidden;

  border:1px solid rgba(243,229,207,.14) !important;
  border-radius:16px !important;

  background:rgba(255,255,255,.04);

  box-shadow:
    0 10px 22px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04);
}

body [data-cart="item-image"]{
  border-radius:15px;
}

body [data-cart="item-body"]{
  min-width:0;

  margin-inline-start:0 !important;
}

body [data-cart="item-header"]{
  align-items:flex-start;
  gap:12px;

  color:var(--av-cart-warm) !important;
}

body [data-cart="item-name"]{
  margin:0;

  color:#FFF2DD;

  font-size:14px;
  font-weight:750;
  line-height:1.45;
}

body [data-cart="item-price"]{
  margin-inline-start:0 !important;

  color:#F7D9A5;

  font-size:14px;
  font-weight:800;
  white-space:nowrap;
}

body [data-cart="item-footer"]{
  margin-top:8px;
}

body [data-cart="item-total"]{
  color:var(--av-cart-muted) !important;

  font-size:11px;
}

body [data-cart="item-actions"]{
  align-items:center;
  justify-content:space-between;
}

body [data-cart="item-quantity-counter"]{
  align-items:center;

  padding:4px;

  border:1px solid rgba(243,229,207,.10);
  border-radius:13px;

  background:rgba(7,20,38,.52);
}

body [data-cart="item-increase"],
body [data-cart="item-decrease"]{
  width:32px;
  height:32px;

  padding:0 !important;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(243,229,207,.12) !important;
  border-radius:10px !important;

  background:rgba(255,255,255,.04);

  color:var(--av-cart-warm) !important;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

body [data-cart="item-increase"]:hover,
body [data-cart="item-decrease"]:hover{
  border-color:rgba(53,214,255,.28) !important;
  background:rgba(53,214,255,.07);
}

body [data-cart="item-increase"]:active,
body [data-cart="item-decrease"]:active{
  transform:scale(.93);
}

body [data-cart="item-increase"] svg,
body [data-cart="item-decrease"] svg{
  color:var(--av-cart-warm) !important;
}

body [data-cart="item-quantity"]{
  width:34px !important;

  color:#FFF2DD !important;

  font-size:13px;
  font-weight:800;
}

body [data-cart="item-remove"]{
  width:34px;
  height:34px;

  margin-inline-start:8px !important;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,107,125,.16);
  border-radius:11px;

  background:rgba(255,107,125,.06);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

body [data-cart="item-remove"]:hover{
  border-color:rgba(255,107,125,.34);
  background:rgba(255,107,125,.11);
}

body [data-cart="item-remove"]:active{
  transform:scale(.93);
}

body [data-cart="item-remove"] svg{
  width:17px !important;
  height:17px !important;

  color:var(--av-cart-danger) !important;
}

/* =========================================================
   FOOTER / SUMMARY / CHECKOUT
========================================================= */

body [data-cart="footer"]{
  position:sticky;
  bottom:0;
  z-index:6;

  padding:16px 18px calc(18px + env(safe-area-inset-bottom)) !important;

  border-top:1px solid rgba(243,229,207,.10);

  background:
    linear-gradient(
      180deg,
      rgba(7,20,38,.72),
      rgba(5,13,25,.96) 30%
    );

  box-shadow:
    0 -16px 34px rgba(0,0,0,.22);

  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}

body [data-invoice="invoice"]{
  margin:0 !important;
  padding:14px 15px !important;

  border:1px solid rgba(243,229,207,.10) !important;
  border-radius:17px;

  background:rgba(255,255,255,.035);

  color:var(--av-cart-warm) !important;
}

body [data-invoice="invoice-subtotal"] dt{
  color:var(--av-cart-muted) !important;

  font-size:12px;
}

body [data-invoice="invoice-subtotal-value"]{
  color:#FFF0D3 !important;

  font-size:16px;
  font-weight:850;
}

body [data-cart="checkout-wrapper"]{
  margin-top:13px !important;
}

body [data-cart="checkout-wrapper"] button{
  position:relative;

  min-height:50px;

  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;

  background:
    linear-gradient(
      100deg,
      #2FA8D9 0%,
      #8D63E8 33%,
      #D63E9C 66%,
      #FF7A00 100%
    ) !important;

  color:white !important;

  font-size:14px !important;
  font-weight:850 !important;

  box-shadow:
    0 12px 26px rgba(47,168,217,.18),
    0 10px 24px rgba(214,62,156,.14),
    inset 0 1px 0 rgba(255,255,255,.20);

  overflow:hidden;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

body [data-cart="checkout-wrapper"] button::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,.20) 48%,
      transparent 62%
    );

  transform:translateX(-120%);

  transition:transform .55s ease;
}

body [data-cart="checkout-wrapper"] button:hover::before{
  transform:translateX(120%);
}

body [data-cart="checkout-wrapper"] button:hover{
  filter:brightness(1.06);
}

body [data-cart="checkout-wrapper"] button:active{
  transform:scale(.985);
}

body [data-cart="continue-wrapper"]{
  margin-top:12px !important;

  color:var(--av-cart-muted) !important;

  font-size:12px !important;
}

body [data-cart="continue-shopping"]{
  color:#F5DDB7 !important;

  text-decoration:none !important;
  font-weight:800 !important;
}

body [data-cart="continue-shopping"]:hover{
  color:white !important;
}

/* =========================================================
   SCROLLBAR
========================================================= */

body [data-cart="panel-inner"]::-webkit-scrollbar,
body [data-cart="content"]::-webkit-scrollbar{
  width:5px;
}

body [data-cart="panel-inner"]::-webkit-scrollbar-track,
body [data-cart="content"]::-webkit-scrollbar-track{
  background:transparent;
}

body [data-cart="panel-inner"]::-webkit-scrollbar-thumb,
body [data-cart="content"]::-webkit-scrollbar-thumb{
  border-radius:999px;

  background:
    linear-gradient(
      var(--av-cart-cyan),
      var(--av-cart-pink),
      var(--av-cart-orange)
    );
}

/* =========================================================
   SMALL SCREENS
========================================================= */

@media (max-width:390px){
  body [data-cart="panel"]{
    width:94vw !important;
  }

  body [data-cart="content"]{
    padding-inline:14px !important;
  }

  body [data-cart="item"]{
    padding:12px !important;
  }

  body [data-cart="item-image-wrapper"]{
    width:82px !important;
    height:82px !important;
    flex-basis:82px;
  }

  body [data-cart="item-name"]{
    font-size:13px;
  }

  body [data-cart="item-price"]{
    font-size:13px;
  }

  body [data-cart="footer"]{
    padding-inline:14px !important;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){
  body [data-cart="panel-inner"] *,
  body [data-cart="panel-inner"] *::before,
  body [data-cart="panel-inner"] *::after{
    transition:none !important;
    animation:none !important;
  }
}