.cartDetail {
  display:flex;
  flex-direction:column;
  height:100%;
}

.cartDetail__header{
  display:flex;
  align-items:center;
  padding:12px 16px;
  gap:8px;
  border-bottom:1px solid #eceff1;
}

.cartDetail__close{
  width:32px;
  height:32px;
  border-radius:999px;
  border:0;
  background:#f1f2f3;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.cartDetail__title{
  flex:1;
  text-align:center;
  font-size:18px;
  font-weight:600;
}

.cartDetail__avatar{
  width:32px;
  height:32px;
  border-radius:999px;
  object-fit:cover;
}

/* Tip row – match Order Detail green */
.cartRow--tip .cartRow__label--tip,
.cartRow--tip .cartRow__value--tip {
  color: #139342;       /* adjust to your green */
  font-weight: 600;     /* optional, for emphasis */
}

.cartDetail__modeRow{
  display:flex;
  margin:8px clamp(14px, 3vw, 18px);
  background:#eaecee;
  border-radius:12px;
  padding:4px;
}

/* base pill */
.cartModeBtn{
  position:relative;
  flex:1;
  border:0;
  border-radius:10px;
  padding:8px 32px;           /* extra space for icon + arrow */
  font-size:14px;
  background:transparent;
  cursor:pointer;
  font-weight:600;
  color:#666;
}

/* center the text */
.cartModeBtn__label{
  display:block;
  text-align:center;
}

/* icon + arrow – by default hidden */
.cartModeBtn__icon,
.cartModeBtn__chevron{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:none;
}

/* icon stays at the start of the button */
.cartModeBtn__icon{
  left:8px;
}

/* arrow stays at the end of the button */
.cartModeBtn__chevron{
  right:10px;
}

/* active pill */
.cartModeBtn.is-active{
  background:#ffffff;
  color:#000;
}

/* show icon + arrow only on the active side */
.cartModeBtn.is-active .cartModeBtn__icon,
.cartModeBtn.is-active .cartModeBtn__chevron{
  display:flex;
}


.cartDetail__body{
  flex:1;
  overflow-y:auto;
  padding:8px 0px 100px;
}

/* Utensils + Add more row */
.cartDetail__actionsRow{
  display:flex;
  align-items:center;
  padding:18px clamp(14px, 3vw, 18px) 0;
}

.cartDetail__utensils{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 4px;
  border-radius:10px;
  background:#f1f3f5;
  flex:0 0 auto;         /* pill hugs content on the left */
}

.cartDetail__utensilsIcon{
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  margin-left: 5px;
}

.cartDetail__stepper{
  display:flex;
  align-items:center;
  gap:4px;
  background-color: #fff;
  border-radius: 8px;
}

.cartDetail__utensilsLabel{
  font-size:13px;
  font-weight:500;
}

.cartDetail__addMore{
  margin-left:auto;          /* pushes it to the right */
  flex:0 0 auto;             /* or just remove flex entirely */
  border-radius:10px;
  border:0;
  color: #000;
  padding:10px 15px;
  background:#f1f3f5;
  font-size:14px;
  font-weight:400;
  cursor:pointer;
  white-space:nowrap;
  text-transform: capitalize;
}


/* Promo Codes / Rewards button – full width under row */
.cartDetail__promo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:calc(100% - clamp(28px, 6vw, 36px));      /* 18px left/right padding */
  margin:15px clamp(14px, 3vw, 18px) 0;
  padding:12px 6px;
  border-radius:10px;
  border:0;
  background:#f1f3f5;
  font-size:15px;
  cursor:pointer;
}

.cartDetail__promoMain{
  display:flex;
  align-items:center;
  gap:8px;
}

.cartDetail__promoIcon{
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.cartDetail__promoIcon img{
  width:20px;
  height:20px;
  display:block;
}

.cartDetail__promoLabel{
  white-space:nowrap;
}


.cartDetail__promo .chevron{
  font-size:18px;
}

/* Item row */
.cartItem {
  position:relative;
  display:flex;
  align-items:center;       /* center image vs row height */
  padding:8px clamp(14px, 3vw, 18px);
  cursor: pointer;
}

.cartItem::after{
  content:'';
  position:absolute;
  left:92px;
  right:18px;
  bottom:0;
  border-bottom:1px solid #f1f3f5;
}


/* Thumbnail with badge (like ordDetItemThumb + badge) */
/* image container */
.cartItem__thumb{
  position: relative;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  margin-right: 15px;
  border-radius: 9px;
  overflow: hidden;          /* clip badge to rounded corners */
}

/* image itself */
.cartItem__thumb .cartItem__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* badges bar inside the image (discount + daysAdvance) */
.cartItem__thumb .cartItem__badges{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: 18px;
}

/* badge cell (splits 50/50 when there are two) */
.cartItem__thumb .cartItem__badge{
  position: static;
  flex: 1;
  font-size: 10px;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* colors */
.cartItem__thumb .cartItem__badge--discount{
  background: #ea580c;       /* orange */
}

.cartItem__thumb .cartItem__badge--advance{
  background: #139342;       /* green */
}

/* rounded corners only on the outer edges */
.cartItem__thumb .cartItem__badges .cartItem__badge:first-child{
  border-bottom-left-radius: 9px;
}

.cartItem__thumb .cartItem__badges .cartItem__badge:last-child{
  border-bottom-right-radius: 9px;
}

/* middle+right area */
.cartItem__content{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;           /* vertically center vs thumb */
  justify-content:space-between;
  gap:12px;
}


.cartItem__main {
  flex:1;
  min-width:0;
}

/* Top row: name + qty dial */
/* .cartItem__header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
} */

.cartItem__name {
  font-size:16px;
  font-weight:600;
  color: #000;
  line-height: 1.3;
}

.arrowRight{
  width: 7px;
  margin-right: 7px;
  filter: grayscale(1) brightness(1.3);  /* turn to gray & darken */
}

/* Options lines (like ordDetItemSub) */
.cartItem__sub {
  font-size:13px;
  color:#4b5563;
}

/* "Special Instructions" label */
.cartItem__instr {
  margin-top:2px;
  font-size:13px;
  font-weight:500;
  color:#16a34a;
}

/* Price row (like ordDetItemPriceRow) */
.cartItem__priceRow {
  margin-top:2px;
}

.cartItem__priceMain {
  display:flex;
  align-items:baseline;
}

.cartItem__price {
  margin-top:0px;
  color:#0b7af7;
}

.cartItem__price--discount {
  color:#ea580c;
  font-size: 14px;
  font-weight: 600;
}

.cartItem__price--normal {
  color:#333333;
  font-weight: 600;
  font-size: 14px;
}

/* old crossed-out base price */
.cartItem__oldPrice{
  margin-left:8px;
  font-size:12px;
  color:#888888;
  text-decoration:line-through;
}

.cartItem__qty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.cartItem__qtyDial{
  display:flex;
  align-items:center;
  background-color: #f1f3f5;
  border: 0;
  border-radius: 999px;
  gap:4px;
}

.cartItem__min{
  font-size:12px;
  color:#ff0000; /* same orange as Discount */
  line-height:1.2;
  font-weight: 500;
  text-align: center;
}

.stepperBtn--trash{
  /* optional: tweak padding when it's showing the trash icon */
  padding:6px;
}

.stepperBtn__trashIcon{
  width:16px;
  height:16px;
  display:block;
}

.stepperBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width:32px;
  height:32px;
  border-radius:999px;
  border:0;
  background:#f1f2f5;
  cursor:pointer;
  font-size: 17px;
}

/* Muted look when a stepper button is disabled (used for utensils) */
.stepperBtn[disabled]{
  cursor:pointer;
}

.stepperBtn__folk {
  width:28px;
  height:28px;
  border-radius:999px;
  border:0;
  background:#fff;
  cursor:pointer;
  font-size: 16px;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 0;
}

.stepperBtn__folk[disabled]{
  opacity: 0.35;
  cursor: default;
}
.stepperBtn__folk[disabled] img{
  opacity: 0.35;
}


.stepperValue {
  min-width:18px;
  text-align:center;
  font-weight: 500;
}

.cartDetail__summary {
  margin-top:16px;
  padding:12px clamp(14px, 3vw, 18px) 0;
  border-top:1px solid #e1e3e5;
}

.cartRow {
  display:flex;
  justify-content:space-between;
  padding:1px 0;
  font-size:14px;
  color: #555;
}

.cartRow--total{
  margin-top:8px;
  font-size:18px;
  font-weight:600;
  color: #000;
}

/* Tip section */
.cartDetail__tipSection {
  padding: 40px 0px 16px;
}

.schedAddrCard__valueLine2 {
   padding: 0 0  5px 0;
}

.cartDetail__tipTitle{
  font-weight:600;
  margin-bottom:8px;
  padding: 3px clamp(14px, 3vw, 18px);
  background-color: #f1f3f5;
}

.cartDetail__tipOptions{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding: 0 clamp(14px, 3vw, 18px);

	scrollbar-width: none;         /* Firefox */
	-ms-overflow-style: none;      /* IE / old Edge */
}

.tipBtn {
  flex:0 0 80px;
  padding:10px 8px;
  border-radius:8px;
  border:1px solid #e1e3e5;
  text-align:center;
  font-size:15px;
  cursor:pointer;
  background: #fff;
}

.tipBtn.is-active{
  border-color:#000;
  background-color: #f1f3f5;
  box-shadow:0 0 0 2px rgba(17,24,39,.08);
}

.tipBtn__percent{
  display:block;
  font-weight: 600;
  color: #000;

}

.tipBtn__amount{
  display:block;
  margin-top:2px;
  color:#1a7f3b;
  font-size:13px;
}


/* Bottom CTA */
.cartDetail__cta{
   height: 46px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 14px 0;
  background:#000;
  color:#ffffff;
  font-size:15px;
  font-weight:500;
  cursor:pointer;
}


.cartDetail__ctaWrap{
  position: fixed;
  width: 100%;
  bottom: 0;
  padding: 15px clamp(14px, 3vw, 18px) 24px;     /* this gives the “gap” from edges */
  background: #ffffff;         /* same as panel background */
  box-shadow: 0 -1px 10px rgba(0,0,0,0.10); /* soft top shadow, optional */
}




/* =============================
   SCHEDULE SHEET (Delivery / Pickup)
   ============================= */

/* cart panel must be relative so overlays can be positioned inside */
#cartSheet .cartPanel{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden; /* clip overlay to rounded cart panel */
}

#cartSheet .cartBody{
  flex:1;
  overflow:auto;
}

/* Full-screen overlay INSIDE the cart panel (dims the cart behind) */
#cartScheduleView.cartScheduleOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,0);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, background .22s ease;
  z-index:50;
}

#cartScheduleView.cartScheduleOverlay.is-open{
  background:rgba(0,5,10,0.20);
  opacity:1;
  pointer-events:auto;
}

/* The white sliding sheet */
#cartScheduleView .cartScheduleSheet{
  width:100%;
  max-height:min(72vh, 560px); /* show ~6 rows, then scroll */
  background:#fff;
  border-radius:24px 24px 0 0;
  box-shadow:0 -12px 28px rgba(0,5,10,0.2);
  display:flex;
  flex-direction:column;
  box-sizing:border-box;

  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.19,1,.22,1);

  padding-bottom:env(safe-area-inset-bottom, 0px);
}

#cartScheduleView.is-open .cartScheduleSheet{
  transform:translateY(0);
}

/* Header */
.cartScheduleHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px 2px 20px;
  background:#f1f3f5;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.cartScheduleHeader h2{
  margin:0;
  font-size:29px;
  font-weight:700;
  letter-spacing:0.02em;
  color: #000;
}

/* Address card */
.cartScheduleAddress{
  margin:13px 18px 13px;
}

.schedAddrCard{
  width:100%;
  border:0;
  background:#f4f5f7;
  border-radius:10px;
  padding:0px 0 0px 10px;
  display:flex;
  gap:12px;
  align-items:center;
  text-align:left;
  overflow: auto;
}

.schedAddrCard__text{ flex:1; }

.schedAddrCard__label{
  font-size:13px;
  font-weight:500;
  color:#086ee3; 
  margin-bottom:3px;
  margin-top: 6px;
}

.schedAddrCard__value{
  font-size:15px;
  line-height:1.25;
  color:#000;
  word-break:break-word;
  margin-bottom: 6px;
}

.schedAddrCard__chev{
  font-size:14px;
  color:#111827;
  opacity:.7;
  transform:translateY(2px);
}

/* Dates row */
.cartScheduleDates{
  display:flex;
  gap:7px;
  padding:14px 18px 12px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  border-top:3px solid #e1e3e5;
}

.cartScheduleDates::-webkit-scrollbar{ display:none; }

.schedDateChip{
  flex:0 0 auto;
  width: auto;
  min-width:120px;
  height:64px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid #e1e3e5;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  scroll-snap-align:center;
  cursor:pointer;
}

.schedDateChip__main{
  font-size:14px;
  font-weight:600;
  margin-bottom:6px;
  color:#000;
}

.schedDateChip__sub{
  font-size:13px;
  font-weight:400;
  color:#444;
}

.schedDateChip.is-active{
  background:#f1f3f5;
  border-color:#000;
}

/* Time slots */
.cartScheduleTimes{
  flex:1;
  overflow:auto;
  padding:8px 18px 12px;
}

.schedTimeRow{
  display:flex;
  align-items:center;
  padding:9px 8px 9px 10px;
  border-radius:10px;
  font-size:15px;
  color:#222;
}

.schedTimeRow__label{ 
   flex:1; 
}

.schedTimeRow input[type="radio"]{
  width:20px;
  height:20px;
  accent-color:#000;
}

.schedTimeRow.is-selected{
  background:#f1f3f5;
}

/* Checkout button */
.cartCheckoutBtn{
  margin:15px 18px 24px;
  border-radius:10px;
  border:0;
  background:#000;
  color:#fff;
  font-size:16px;
  font-weight:500;
  padding:14px 0;
  letter-spacing:0.02em;
  cursor:pointer;
}

/* (kept here because it sits near schedule in markup) */
.cartPaymentBtn{
   height: 46px;
   display:block;
   width:calc(100% - clamp(28px, 6vw, 36px));
   margin:15px clamp(14px, 3vw, 18px) 24px;
   border-radius:10px;
   border:0;
   background:#000;
   color:#fff;
   font-size:16px;
   font-weight:500;
   letter-spacing:0.02em;
   cursor:pointer;
}

.cartPaymentHeader {
  background: #f1f3f5;
  padding: 15px 12px 3px clamp(14px, 3vw, 18px);
  display: flex;
  align-items: center;
}

.cartPaymentTitle {
  font-size: 19px;
  color: #000;
  font-weight: 700;
  flex: 1;
}

.paymentCloseBtn {
   height: 40px;
   width: 40px;
   border: 0;
   background: #f1f3f5;
   padding: 0;
   cursor: pointer;
}

.cartPaymentView {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:0px 0px 0px;
  background:#fff;
  box-shadow:0 -8px 24px rgba(0,5,10,.30);
  border-radius:20px 20px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 9999;
}

/* Full overlay inside cartPanel */
.paymentComplete {
	position:absolute;
	inset:0; /* top:0; right:0; bottom:0; left:0 */
	background:rgba(0,0,0,0.25); /* light dim */
	display:flex;
	align-items:flex-end;   /* slide up from bottom */
	justify-content:center;
	z-index:10000;
	box-sizing:border-box;
}

/* .paymentComplete[hidden]{
  display:none !important;
} */

/* Sliding card */
.paymentCompleteCard {
  width:100%;
  background:#ffffff;
  border-radius:22px 22px 0 0;
  box-shadow:0 -12px 30px rgba(0,0,0,0.15);
  padding:0px 0px 24px;
  text-align:center;
  box-sizing:border-box;
  transform:translateY(100%);
  animation:paymentCompleteSlideUp 260ms cubic-bezier(.19,1,.22,1) forwards;
  overflow: auto;
}

.paymentCompleteTop {
   padding: 20px 20px 2px;
   background: #ecfdf3;
   margin-bottom: 14px;
}

@keyframes paymentCompleteSlideUp{
  from{
    transform:translateY(100%);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}

.checkCircle{
   width:66px;
   height:66px;
   margin:10px auto 15px;
   border-radius:50%;
   background:transparent;
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:40px;
   font-weight:700;
   filter: invert(44%) sepia(75%) saturate(641%) hue-rotate(63deg) brightness(98%) contrast(94%);
}

.paymentCompleteCard h2{
  margin:4px 0 10px;
  font-size:19px;
  font-weight:700;
  color:#0f6732;
}

.paymentCompleteCard p {
  margin:0 23px 18px;
  font-size:14px;
  line-height:1.5;
  color:#4b5563;
}

/* MY ORDERS button */
.paymentCompleteCard button{
   width: calc(100% - 44px);
   height: 44px;
  margin:4px 22px 0;
  padding:0 30px;
  border-radius:10px;
  border:0;
  background:#020617;  /* same as cartCheckoutBtn */
  color:#ffffff;
  font-size:16px;
  font-weight:500;
  cursor:pointer;
}

.paymentCompleteCard button:hover{
  opacity:0.9;
}

.tipBtn--zero{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#000;
}

.tipBtn__zero{
  font-size:16px;
  font-weight:600;
}

.cartRow__label{
  display:flex;
  align-items:center;
  gap:6px;
}

.cartRow__value{
  font-weight:500;
}

.cartRow__totalValue{
  font-weight:600;
  font-size: 18px;
  color: #000;
}


/* Discount = orange, like app */
.cartRow--discount .cartRow__label,
.cartRow--discount .cartRow__value{
  color:#ea580c;
  font-weight:600;
}

/* Delivery = blue, like app */
.cartRow--delivery .cartRow__label,
.cartRow--delivery .cartRow__value{
  color:#0b7af7;
  font-weight:600;
}

/* Taxes & Other Fees icon */
.cartRow__infoIcon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ===== Promo / Rewards sheets ===== */

.cartPromoOverlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 5, 10, 0.20);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease-out;
}

.cartPromoOverlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cartPromoSheet {
  width: min(500px, 100vw);
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 40px rgba(0, 5, 10, 0.3);
  transform: translateY(24px);
  transition: transform 0.22s ease-out;
}

.cartPromoOverlay.is-open .cartPromoSheet {
  transform: translateY(0);
}

.cartPromoSheet--full {
  max-height: 90vh;
  overflow-y: auto;
}

.cartPromoHeader {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 12px 15px 5px 22px;
  background: #f1f3f5;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.cartPromoHeaderTitle {
  flex: 1;
  font-size: 19px;
  font-weight: 700;
}

.cartPromoCloseBtn,
.cartPromoBackBtn {
  border: 0;
  background: transparent;
  font-size: 25px;
  padding: 6px 6px;
  cursor: pointer;
}

.cartPromoBackBtn {
  font-size: 22px;
}

.cartPromoText {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 10px;
}

.cartPromoActionBtn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 0;
  background: #f1f3f5;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  /* smooth hover */
  transition: background-color 0.18s ease-out;
}

.cartPromoActionBtn + .cartPromoActionBtn {
  margin-top: 8px;
}

.cartPromoActionBtn:hover {
  background: #e1e3e5;
}

.cartPromoFieldWrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 10px 12px;
  background: #fff;
  margin-bottom: 16px;
}

.cartPromoFieldIcon img {
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 0;
}

.cartPromoInput {
  flex: 1;
  border: 0;
  font-size: 16px;
  outline: none;text-transform: uppercase;
}

.cartPromoPrimaryBtn {
   height: 46px;
  width: 100%;
  border-radius: 10px;
  border: 0;
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  margin-top: 8px;
  cursor: pointer;
  /* smooth hover */
  transition: background-color 0.18s ease-out;
}

.cartPromoPrimaryBtn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Redeem rewards dial */

.cartRewardsRow {
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 20px 0 16px;
}

.cartRewardsBalance {
  min-width: 90px;
  height: 46px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #e5e7e9;
  color: #0e863a;
  font-weight: 600;
  font-size: 21px;
  text-align: center;
}

.cartRewardsDial {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background: #f1f3f5;
  border: 1px solid #e1e3e5;
  height: 46px;
  overflow: auto;
}

.cartRewardsStepper {
  width: 44px;
  height: 44px;
  border-radius: 0px;
  border: 0;
  background: #f1f3f5;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 0;
}

.cartRewardsValue {
  font-weight: 600;
  font-size: 16px;
}

/* Common overlay */
.cartPromoOverlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease-out;
}

.cartPromoOverlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cartPromoOverlay[hidden] {
  display: none !important;
}

.cartPromoOverlay--center {
  align-items: center;
}

.cartPromoBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}


.cartPromoOverlay.is-open .cartPromoSheet {
  transform: translateY(0);
}

.cartPromoSheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 14px 22px 3px;
  background: #f1f3f5;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.cartPromoSheet__title {
  font-size: 20px;
  font-weight: 700;
}

.cartPromoSheet__close {
   width: 38px;
   height: 38px;
   border: 0;
   background: transparent;
   padding: 0;
   cursor: pointer;
   border-radius: 8px;
   border: 0;
   align-items: center;
   justify-content: center;
   display: flex;

   /* smooth hover */
   transition: background-color 0.18s ease-out;
}

.cartPromoSheet__body {
  padding: 0 22px;
}

.cartPromoCodeLabel {
  font-size: 26px;
  font-weight: 700;
  color: #dc5f00; /* your orange */
  margin-bottom: 12px;
  border-bottom: 1px solid #e1e3e5;
}

.cartPromoInfoRow {
  font-size: 14px;
  color: #555;
  margin-bottom: 4px;
}

.cartPromoInfoText {
  font-size: 14px;
  color: #555;
  margin-top: 10px;
}

.cartPromoSheet__footer {
  margin: 20px 22px 25px;
}

.cartPromoRemoveBtn {
   height: 42px;
  width: auto;
  border: 0;
  border-radius: 8px;
  padding: 0 26px;
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

/* Centered confirm dialog */
.cartAlertSheet {
  position: relative;
  z-index: 1;
  width: min(420px, 92vw);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 5, 10, 0.1);
  padding: 0 0 12px;
  overflow: auto;
}

.cartAlertTitle {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  padding: 14px 18px 7px;
  background: #f1f3f5;
  color: #000;
}

.cartAlertText {
  font-size: 14px;
  color: #444;
  margin-bottom: 14px;
   padding: 0 18px;
}

.cartAlertActions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 18px;
}

.cartAlertBtn {
   height: 40px;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 0;
}

.cartAlertBtn--secondary {
  background: #eceef0;
  color: #000;
}

.cartAlertBtn--secondary:hover {
  background: #e1e3e5;
}

.cartAlertBtn--primary {
  background: #000; /* pink like native REMOVE */
  color: #fff;
}

/* Row = label on left, pill on right */
.cartDetail__customTipRow{
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;              /* prevent horizontal overflow */
  box-sizing: border-box;
}

/* "Custom Tip" button */
.cartDetail__customTip{
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

/* Pill with $ + input + checkmark */
.cartDetail__customTipBox{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #f9fafb;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  padding: 8px 12px;
}

.cartDetail__customTipBox[hidden]{
  display: none;
}

.cartDetail__customTipCurrency{
  margin-right: 4px;
}


/* Full-width custom tip pill */
.cartCustomTipPill{
  margin: 12px clamp(14px, 3vw, 18px) 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 4px 4px 15px;
  border-radius: 10px;
  background: #f1f3f5;
  cursor: pointer;
  height: 46px;
}

/* When active → label left, input on right */
.cartCustomTipPill.cartCustomTipPill--active{
  justify-content: space-between;
}

.cartCustomTipLabel{
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

/* Right-side input block */
.cartCustomTipInputWrap{
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 0;
  border-radius: 6px;
  padding: 0px 0px 0px 13px;
  height: 38p;
}

.cartCustomTipInputWrap[hidden]{
  display: none;
}

.cartCustomTipCurrency{
  font-size: 15px;
}

#customTipInput{
  width: 80px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  text-align: left;
  appearance: textfield;
}

#customTipInput::-webkit-outer-spin-button,
#customTipInput::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.cartCustomTipApply{
  border: 0;
  background: #07c;
  color: #fff;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  width: 40px;
  height: 38px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 0;
}

.cartCustomTipApply img {
  filter: invert(1) brightness(2);
}


/* Keep DAYS visible + let TIMES be the scroll area */
#cartScheduleView .cartScheduleDates{
  flex: 0 0 auto;     /* don’t shrink the days row */
}

#cartScheduleView .cartScheduleTimes{
  flex: 1 1 auto;     /* this is the flexible area */
  min-height: 0;      /* CRITICAL: allows it to shrink + scroll */
}

/* Optional: make the sheet a stable fixed-height flex container */
#cartScheduleView .cartScheduleSheet{
  height: min(72vh, 560px);
  max-height: none;
}


.schedAddrCard__text{
  flex:1;
  min-width:0;
}

.schedAddrCard__chevBtn{
  flex:0 0 auto;
  width:36px;              /* clickable target */
  align-self:stretch;          /* fill the card height (not the viewport) */
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:#e1e3e5;
  cursor:pointer;
}

.schedAddrCard__chevBtn:focus-visible{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:2px;
}
/* --- Schedule sheet: show more time rows on mobile --- */

/* Use a taller sheet on phones */
@media (max-width: 520px){
  #cartScheduleView .cartScheduleSheet{
    height: min(92vh, 680px);
    max-height: min(92vh, 680px);
  }
}

/* Better viewport unit for mobile browsers (Chrome/Safari toolbars) */
@supports (height: 100dvh){
  @media (max-width: 520px){
    #cartScheduleView .cartScheduleSheet{
      height: min(92dvh, 680px);
      max-height: min(92dvh, 680px);
    }
  }
}
/* =============================
   REMOVE ITEM CONFIRM (trash icon)
   ============================= */

#cartItemDeleteConfirm.cartConfirmOverlay{
  background: transparent;
  transition: opacity .22s ease;
}

#cartItemDeleteConfirm.cartConfirmOverlay.is-open{
  background: transparent; /* keep explicit */
}

#cartItemDeleteConfirm .cartConfirmBackdrop{
  position:absolute;
  inset:0;
}

/* dialog card */
#cartItemDeleteConfirm .cartConfirmCard{
  position:relative;
  z-index:1;
  width:min(400px, 85vw);
  background:#fff;
  border-radius:10px;
  box-shadow:0 18px 40px rgba(0,5,10,.20);
  padding:0px 0px 18px;
  overflow: hidden;
}

#cartItemDeleteConfirm .cartConfirmTitle{
  font-size:18px;
  font-weight:700;
  margin-bottom:10px;
}

#cartItemDeleteConfirm .cartConfirmMsg{
  font-size:14px;
  color:#374151;
  margin-bottom:14px;
}

#cartItemDeleteConfirm .cartConfirmBtns{
  display:flex;
  justify-content:flex-end;
  gap:12px;
}

#cartItemDeleteConfirm .cartConfirmBtn{
  border:0;
  border-radius:8px;
  padding:10px 16px;
  font-weight: 500;
  font-size:14px;
  cursor:pointer;
   transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}


#cartItemDeleteConfirm .cartConfirmNo{
  background:#f1f3f5;
  color:#000;
}

#cartItemDeleteConfirm .cartConfirmNo:hover{ 
   background:#e1e3e5; 
}

#cartItemDeleteConfirm .cartConfirmYes{
  background:#000;
  color:#fff;
}


/* Payment overlay INSIDE the cart panel (same pattern as schedule) */
#cartSheet .cartPanel .cartPaymentBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,5,10,.2);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  z-index:60;
}

#cartSheet .cartPanel .cartPaymentBackdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

/* Ensure payment sheet is ABOVE the backdrop */
#cartPaymentView.cartPaymentView{
  z-index:61;
}

/* Prevent Stripe internal -4px / focus ring from creating horizontal scroll */
.stripeClip{
  overflow:hidden;
  padding:10px clamp(14px, 3vw, 18px) 5px;           /* compensates for Stripe's internal negative margin */
  box-sizing:border-box;
  width:100%;
}

/* Make sure the mount point never exceeds the sheet width */
#payment-element{
  width:100%;
  max-width:100%;
}


#cartScheduleView .cartScheduleTimes{
  -webkit-overflow-scrolling: touch;
}