/* cart.css (bag.css) — page specific styles that match index visual language */



/* small variables */
:root {
  --accent: rgb(255, 66, 66);
  --muted: #6b6f76;
  --card-bg: #ffffff;
  --radius: 12px;
  --container: 1100px;
}

/* safe area handling for iPhone notch */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* page layout */
.bag-wrap {
  max-width: var(--container);
  margin: 24px auto;
  padding: 0 16px;
}
.bag-wrap{
  margin-top: 126px;
}
.mobile-meta{
display:none;
}
.product-title{
  color:#c760db;
}
.product-details{
  color:#c760db;
}
.bag-card {
  top: 0px;
  /* translucent base — lets page show through */
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 3px solid rgba(255,255,255,0.08);
  box-shadow: 9px 9px 24px rgba(6,9,27,0.04);
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
  border-radius: 12px;
  padding: 16px;

  box-shadow: 0 12px 30px rgba(2,6,23,0.06);
}

/* horizontal scrolling wrapper for wide tables */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
}
.qty-single{
  display: none;
}
.summary_row{
  align-items:center ;
  margin: 29px;
}
/* table */
.bag-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px; /* keeps layout on desktop but will adapt on very small screens */
  font-family: inherit;
}
.bag-table thead th {
  text-align: left;
  padding: 14px;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px dashed #c760db;
  white-space: nowrap;
}
.bag-row td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  vertical-align: middle;
}

/* product cell */
.product-info { display:flex; gap:12px; align-items:center; }
.product-thumb { width:64px; height:64px; object-fit:cover; border-radius:8px; background:#f3f4f7; display:block; }
.product-title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.product-sku { color:#888; font-size:0.92rem; }

/* price and controls */
.cell-price { color: var(--accent); font-weight:800; }
.cell-subtotal { color: var(--accent); font-weight:800; text-align:left; }

/* qty controls */
.qty-control { display:inline-flex; gap:8px; align-items:center; }
.qty-btn { width:34px; height:34px; border-radius:8px; border:0; background:#c760db; color:#fff; cursor:pointer; font-weight:800; }
.qty-input { width:62px; padding:6px; border-radius:6px; text-align:center; border:1px solid #e6e6ea; }

/* remove button */
.remove-btn { display:none ;background:transparent; border:0; color:rgb(234, 0, 255); cursor:pointer; font-weight:700; }

/* summary area */
.bag-summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:14px;
}
.summary-left { flex:1; }
.summary-right { display:flex; gap:12px; flex-direction:column; align-items:flex-end; min-width:220px; }
.summary-row { font-size: 1.5rem ;display:flex; gap:12px; margin-left: 12.6rem;  margin-top:-0.6rem;padding: 0.9rem;}
.summary-amount { font-weight:900; color:var(--accent); } 
.btn { padding:10px 14px; border-radius:8px; border:0; cursor:pointer; font-weight:800; text-decoration:none; display:inline-block; }
.btn-primary { background:#c760db; color:#fff; }
.btn-ghost {
  margin-left:-100px;
    justify-content: left;
  align-items: left;
  text-align: left; 
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 18px rgba(2,6,23,0.04);
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
  border:1px solid #eee; color:#333;
  font-size:90px;
}
@media (max-width: 720px) {
  .bag-card { padding:px; margin-top:0px; }
  .bag-table { min-width: 100%; }
  .bag-table thead { display: none; }
  .bag-table, .bag-table tbody, .bag-table tr, .bag-table td { display: flex; width: 100%; }
  .bag-row { display: grid; grid-template-columns: 1fr auto; gap:8px 12px; padding:12px; border-radius:10px; background: linear-gradient(180deg,#fff,#fbfbff); margin-bottom:10px; border:1px solid rgba(0,0,0,0.04); }
  .bag-row td { padding: 6px 10px; border-bottom: none; margin-left: -12px; margin-top:-12px;}
  .bag-row td:first-child { grid-column: 3 / -3; display:flex; gap:1px; align-items:center; }
  .bag-row .cell-price { grid-column: 3 / 3; }
  .bag-row .cell-subtotal { grid-column: 3 / 3; text-align:right; }
  .bag-row .qty-cell { display:none;grid-column: 3 / 3; margin-top:6px; }

  .qty-input { width:64px; }
  .product-title {    position: static;  grid-column: 3;      overflow: hidden;
    text-overflow: ellipsis; transform: none !important;                      
    font-size:1.5rem;                                
 margin-top:-5rem; margin-right: 0rem}
  .bag-summary { flex-direction:column; align-items:stretch; gap:10px; }
  .summary-right { align-items:stretch; width:100%; min-width:0; }
  .qty-single{
    position: absolute;
    display:flex;
    font-size: 1.5rem;
    align-items: center;
    margin-top: -10.6rem;
    margin-left: 24rem;
  }
}
@media (max-width: 430px) {

  .qty-input { width:72px; }
}
body { padding-top: var(--nav-h, 64px); }

.floating-cart::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:40px; height:40px;           
  background:
    image-set(
      url("image/cart-check-white.png") 1x,
      url("image/cart-check-white@2x.png") 2x,
      url("image/cart-check-white@3x.png") 3x
    ) center / 70% no-repeat;
  background-color: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
  background-blend-mode: normal !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
/* Optional: same icon in mini-cart header */
.mini-cart-header{
  position: relative;
  padding-left: 40px; /* leaves space for the icon */
}

.mini-cart-header::before{
  content:"";
  position:absolute;
  left:12px; top:50%; transform: translateY(-50%);
  width:18px; height:18px;
  background:
    image-set(
      url("image/cart-check-white.png") 1x,
      url("image/cart-check-white@2x.png") 2x,
      url("image/cart-check-white@3x.png") 3x
    ) center / contain no-repeat;
  -webkit-mask: none !important;
  mask: none !important;
  opacity:.95;
}
/* Hide any inline SVG left inside the button just in case */
.floating-cart > svg { display:none !important; }
.bag-card {margin-top: -39px}

/* ===== Darila Cart Mobile Polish v10 (2025-11-03) ===== */
@media (max-width: 768px){
  .summary-right .summary-row{ display: !important; } /* kill duplicate subtotal */
.qty-control {display: none;}
.remove-btn {display:none;}
.cell-subtotal {font-size: 1.2rem;margin-top:-4rem;position: absolute;display: flex;  justify-content: center; text-align: left;right: 0; margin-right: 1.5rem;}
  .bag-row { text-align:center; }
  .bag-row td{ text-align:inherit; }
  .product-info{ display:flex; flex-direction:column; align-items:center; gap:15px; display: grid;
    grid-template-columns: 120px 1fr; /* thumb width | title */
    align-items: center;
    gap: 12px;
    position: relative;              /* keep for safety */
    min-height: 120px;  
  margin-top: 11.1px; }
  .product-thumb{ width:120px; height:120px; position: relative;margin-top: -14px; margin-left: -9px;}
  .cell-price, .unit-price, .item-price{ display:none !important; }

  /* right-aligned item list + red subtotal */
  #cart-summary{ align-self:flex-end; margin-left:auto; max-width:70%; }
  #cart-summary .cart-summary-lines .line{ text-align:right; color:#b3b3b3; margin:2px 0; font-size:.98rem; }
  #cart-summary .cart-summary-total{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; font-weight:700; color:#8a8a8a; }
  #cart-summary .cart-summary-total .amount{ color: var(--accent, #ff4242); font-weight:900; }

  /* buttons row fallback */
  .actions{ display:flex !important; gap:12px; align-items:stretch; justify-content:left; flex-wrap:nowrap; width:100%; }
  .actions > a, .actions > button{ display:inline-flex; align-items:left; justify-content:left; padding:12px 16px; white-space:nowrap; width:auto !important; max-width:none !important; min-width:0; margin:0 !important; box-sizing:border-box; flex:1 1 0; }
  .actions .btn-primary{ flex:1.6 1 0; border-color: #333;} /* Proceed wider */
  .actions .btn-ghost  { flex:1    1 0; } /* Continue */
}

/* iPhone 14 Pro Max portrait exact width (430px, with 428px fallback) */
@media only screen and (orientation: portrait) and (width: 430px),
       only screen and (orientation: portrait) and (width: 428px) {
  .actions{ display:flex !important; gap:12px; align-items:stretch; justify-content:center; flex-wrap:nowrap; }
  .actions .btn-primary{ flex:1.9 1 0; border-color: #333;}
  .actions .btn-ghost  { flex:1    1 0; }
  
}


/* === v11 Mobile subtotal visibility (2025-11-03) === */
@media (max-width: 768px){
  /* Hide desktop summary row to avoid duplicate subtotals */
  .summary-right .summary-row{ display:!important; }

  /* Show the custom right-aligned mobile summary */
  #cart-summary{ display:block; align-self:flex-end; margin-left:auto; max-width:70%; }
  #cart-summary .cart-summary-lines .line{ text-align:right; color:#b3b3b3; margin:2px 0; font-size:.98rem; }
  #cart-summary .cart-summary-total{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; font-weight:700; color:#8a8a8a; }
  #cart-summary .cart-summary-total .amount{ color: var(--accent, #ff4242); font-weight:900; }
}


/* === Actions row patch (2025-11-08) === */

/* === Desktop: force the two action buttons into one row (next to each other) === */
@media (min-width: 1024px){
  .summary-right{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
  }
  .summary-right .actions{
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
  }
  .summary-right .actions .btn-ghost,
  .summary-right .actions .btn-primary{
    display: flex;
    align-items: left;
    justify-content: left;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap;
    padding: 12px 16px;
    border-radius: 12px;
    border-color: #333;
    font-size:15px;
    font-family:"cal sans";
    
  }
}
/* === Actions buttons: animated sheen + glow (keeps your exact color) === */
/* Scope only to the Cart actions row so other buttons on the site stay unchanged */
.bag-summary .actions .btn{
  /* your mockup */
  background-color: #00BFA6;
  padding: 14px 40px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  border-radius: 10px;
  border: 2px dashed #00BFA6;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
              rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .4s;
  /* upgrades (don’t change the visible color) */
  position: relative;
  overflow: hidden;
  isolation: isolate; /* keep effects inside */
}

/* keep your span behavior the same */
.bag-summary .actions .btn span:last-child { display: none; }

/* Moving light sweep (sheen) — white only, so teal stays the same */
@keyframes den-sheen {
  0%   { left: -40%; }
  60%  { left: 120%; }
  100% { left: 120%; }
}
.bag-summary .actions .btn::before{
  content:"";
  position:absolute; top:0; left:-30%;
  width:40%; height:100%;
  transform: skewX(-20deg);
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: den-sheen 2.6s linear infinite;
  pointer-events:none;
  z-index: 1;
}

/* Soft teal glow outside (same #00BFA6 tone, very subtle) */
@keyframes den-glow {
  0%,100% { opacity: .25; }
  50%     { opacity: .55; }
}
.bag-summary .actions .btn::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(0,191,166,.0),
              0 0 22px 4px rgba(0,191,166,.35); /* #00BFA6 with alpha */
  opacity:.35;
  animation: den-glow 2.8s ease-in-out infinite;
  pointer-events:none;
  z-index: 0;
}

/* Hover: keep your invert exactly the same */
.bag-summary .actions .btn:hover{
  transition: .4s;
  border: 2px dashed #00BFA6;
  background-color: #fff;
  color: #00BFA6;
}

/* Active: keep your pressed color */
.bag-summary .actions .btn:active{
  background-color: #87dbd0;
}

/* Disabled: dampen animation so it feels “off” */
.bag-summary .actions .btn:disabled{
  opacity:.6; cursor:not-allowed;
}
.bag-summary .actions .btn:disabled::before,
.bag-summary .actions .btn:disabled::after{
  animation: none;
  opacity:.2;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .bag-summary .actions .btn::before,
  .bag-summary .actions .btn::after{ animation:none; }
}

/* === Cart actions: White & Pink theme (with sheen + soft glow) === */
:root{
  --den-pink: #c760db;   /* main pink */
  --den-pink-2: #d26fe6; /* lighter pink for gradient depth */
}

/* Sheen + glow animations (unchanged) */
@keyframes den-sheen {
  0%{ left:-40%; } 60%{ left:120%; } 100%{ left:120%; }
}
@keyframes den-glow {
  0%,100%{ opacity:.25; } 50%{ opacity:.55; }
}

/* Base button — used by "Continue shopping" (btn-ghost) */
.bag-summary .actions .btn{
  background-color:#fff;            /* white base */
  padding:14px 40px;
  color:var(--den-pink);            /* pink text */
  text-transform:uppercase;
  letter-spacing:1px;
  cursor:pointer;
  border-radius:10px;
  border:2px dashed var(--den-pink);/* pink dashed border */
  box-shadow: rgba(50,50,93,.25) 0 2px 5px -1px,
              rgba(0,0,0,.3) 0 1px 3px -1px;
  transition:.4s;
  position:relative; overflow:hidden; isolation:isolate;
  font-size: 9px;
  margin-left:120px;
}

/* Keep your span behavior */
.bag-summary .actions .btn span:last-child{ display:none; }

/* Moving light sweep (white only; doesn’t change colors) */
.bag-summary .actions .btn::before{
  content:""; position:absolute; top:0; left:-30%;
  width:40%; height:100%; transform:skewX(-20deg);
  background: linear-gradient(to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.38) 50%,
    rgba(255,255,255,0) 100%);
  animation: den-sheen 2.6s linear infinite;
  pointer-events:none; z-index:1;
}

/* Soft pink glow */
.bag-summary .actions .btn::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  box-shadow: 0 0 22px 4px rgba(255,79,162,.35); /* pink glow */
  opacity:.35; animation: den-glow 2.8s ease-in-out infinite;
  pointer-events:none; z-index:0;
}

/* Hover: invert to pink fill + white text */
.bag-summary .actions .btn:hover{
  background:#c760db;
  color:#fff;
  border-color: #c760db;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255,79,162,.28);
}

/* Active press */
.bag-summary .actions .btn:active{
  transform: translateY(0) scale(.98);
}

/* Disabled feel */
.bag-summary .actions .btn:disabled{
  opacity:.6; cursor:not-allowed;
}
.bag-summary .actions .btn:disabled::before,
.bag-summary .actions .btn:disabled::after{
  animation:none; opacity:.2;
}

/* --- Primary checkout button variant: solid pink by default --- */
.bag-summary .actions .btn.btn-primary,
.bag-summary .actions #checkout-link.btn{
  background: #c760db;
  color:#fff; border-color:#c760db);
  box-shadow: rgba(255, 79, 255, 0.4) 0 10px 24px;
}

/* Hover invert for primary: white fill + pink text */
.bag-summary .actions .btn.btn-primary:hover,
.bag-summary .actions #checkout-link.btn:hover{
  background:#fff; color:#c760db;
  box-shadow: 0 6px 18px rgba(255,79,162,.22);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bag-summary .actions .btn::before,
  .bag-summary .actions .btn::after{ animation:none; }
}
/* === Center labels + bigger text for Cart action buttons === */
.bag-summary .actions .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* readable, scales a touch on large screens */
  font-size: clamp(15px, 0.95rem + 0.2vw, 12px);
  line-height: 1;
  padding: 14px 32px;     /* keep your pill shape */
  margin-left: 0;         /* undo any leftover offsets */
  font-family:"cal sans";
}

/* Ensure both variants are centered even on the desktop-only patch */
.summary-right .actions .btn-ghost,
.summary-right .actions .btn-primary{
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Keep your pink primary border solid (fixes any earlier typo) */
.bag-summary .actions .btn.btn-primary{
  border-color: #c760db;
}