/* --- Global: Prevent horizontal overflow --- */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}



/* --- Page Container: Centered, not full-width --- */
#vue-feed.container-fluid {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* --- Filter Sidebar --- */
.feed-filter-sidebar {
  position: sticky;
  top: 70px;
  background: #fafaf8;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.feed-filter-sidebar .section-filter {
  border: none !important;
}
.feed-filter-sidebar .filter-row {
  border-color: #f0f0f0 !important;
}
.feed-filter-sidebar .filter-row h5 a {
  color: #333;
  font-size: 0.88rem;
}


.filter-v2 {
  font-family: inherit;
}

/* --- Sections --- */
.fv2-section {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #f0ede8;
}
.fv2-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.fv2-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 12px 0;
}

/* --- Toggle Switches --- */
.fv2-toggles {
  padding-bottom: 16px;
}
.fv2-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s;
}
.fv2-toggle-row:hover {
  opacity: 0.85;
}
.fv2-toggle-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: #333;
}
.fv2-switch {
  position: relative;
  width: 42px;
  height: 24px;
  background: #ddd;
  border-radius: 12px;
  transition: background 0.25s ease;
  flex-shrink: 0;
}
.fv2-switch.active {
  background: #FF6B00;
}
.fv2-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.25s ease;
}
.fv2-switch.active .fv2-knob {
  transform: translateX(18px);
}

/* --- Radio Pills (Mindestbestellbetrag) --- */
.fv2-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fv2-radio-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #555;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  margin: 0;
}
.fv2-radio-pill input[type="radio"] {
  display: none;
}
.fv2-radio-pill:hover {
  border-color: #bbb;
  background: #fafafa;
}
.fv2-radio-pill.active {
  background: #FF6B00;
  border-color: #FF6B00;
  color: #fff;
}
.fv2-radio-pill.active small {
  color: rgba(255,255,255,0.75);
}
.fv2-radio-pill small {
  color: #aaa;
  margin-left: 2px;
  font-weight: 400;
}

/* --- Rating Buttons --- */
.fv2-rating-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fv2-rating-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #555;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}
.fv2-rating-btn:hover {
  border-color: #fbbf24;
  background: #fffbeb;
}
.fv2-rating-btn .fa-star {
  color: #ddd;
  font-size: 0.72rem;
  transition: color 0.2s;
}
.fv2-rating-btn:hover .fa-star {
  color: #fbbf24;
}
.fv2-rating-btn.active {
  background: #fffbeb;
  border-color: #fbbf24;
  color: #92400e;
}
.fv2-rating-btn.active .fa-star {
  color: #fbbf24;
}

/* --- Cuisine List --- */
.fv2-cuisine-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fv2-cuisine-item {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  margin: 0;
  user-select: none;
}
.fv2-cuisine-item:hover {
  background: #f9f9f7;
}
.fv2-cuisine-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  margin-right: 10px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
}
.fv2-cuisine-item input[type="checkbox"]:checked {
  background: #FF6B00;
  border-color: #FF6B00;
}
.fv2-cuisine-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.fv2-cuisine-item span {
  font-size: 0.84rem;
  font-weight: 450;
  color: #444;
}
.fv2-cuisine-item.active {
  background: #FFF5EB;
}
.fv2-cuisine-item.active span {
  color: #C45200;
  font-weight: 600;
}

/* --- Show More Link --- */
.fv2-show-more {
  display: inline-block;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #FF6B00;
  cursor: pointer;
  transition: color 0.15s;
  text-decoration: none !important;
}
.fv2-show-more:hover {
  color: #E05E00;
  text-decoration: underline !important;
}

/* --- Featured Section --- */
.featured-sections-wrap {
  margin-bottom: 0.75rem;
}
.featured-section {
  margin-bottom: 1.1rem;
}
.featured-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.6rem;
  padding-bottom: 0;
  border-bottom: none;
}
.featured-section-header h4 {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  color: #1a1a1a;
  flex: 1;
  min-width: 0;
}
.featured-section-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
}
.featured-section-emoji {
  display: block;
  line-height: 1;
}
.fsb-new        { background: #E8F5E9; }
.fsb-popular    { background: #FFF3E0; }
.fsb-best_seller { background: #FFF8E1; }
.fsb-recommended { background: #F3E5F5; }
.featured-scroll-wrap {
  position: relative;
}
.fsa-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #e0ddd8;
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 0.85rem;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  padding: 0;
  line-height: 1;
}
.fsa-prev {
  left: -8px;
}
.fsa-next {
  right: -8px;
}
.fsa-btn:hover {
  background: #fff;
  border-color: #ccc;
  color: #1a1a1a;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
}
.featured-scroll-row {
  display: flex;
  overflow-x: auto;
  gap: 14px;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  touch-action: pan-x;
}
.featured-scroll-row::-webkit-scrollbar {
  display: none;
}
/* =============================================
   VERTICAL CARD (Featured / Square) — Premium
   ============================================= */
.card-featured {
  flex: 0 0 calc(33.333% - 10px);
  min-width: 220px;
  max-width: 320px;
  border-radius: 16px;
  overflow: visible;
  background: #f9f8f6;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  position: relative;
  scroll-snap-align: start;
}
.card-featured:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.07);
}
.card-featured .card-f-img-wrap {
  position: relative;
  width: 100%;
  height: 140px;
  overflow: hidden;
  background: #f0ede8;
  border-radius: 16px 16px 0 0;
}
.card-featured .card-f-img-wrap .el-image,
.card-featured .card-f-img-wrap .el-image img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.card-featured .card-f-logo-small {
  position: absolute;
  top: 122px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 2px solid #fff;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  overflow: hidden;
  z-index: 8;
}
.card-featured .card-f-logo-small img,
.card-featured .card-f-logo-small .el-image,
.card-featured .card-f-logo-small .el-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-featured .card-f-rating {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 5;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.card-featured .card-f-rating .fa-star {
  color: #fbbf24;
  font-size: 0.58rem;
}
.card-featured .card-f-body .card-f-weekly-deal {
  margin: 1px 0 3px;
}
.card-featured .card-f-body .card-f-weekly-deal .weekly-deal-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 600;
  color: #d35400;
  background: #fef3e2;
  border: 1px solid #fde0b0;
  padding: 1px 8px;
  border-radius: 20px;
  letter-spacing: 0.2px;
}
.card-featured .card-f-body .card-f-weekly-deal .weekly-deal-chip i {
  font-size: 0.66rem;
  color: #e67e22;
}
.card-featured .card-f-closed-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(245,243,240,0.75);
  -webkit-backdrop-filter: blur(3px) saturate(0.5);
  backdrop-filter: blur(3px) saturate(0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 7;
  border-radius: 16px 16px 0 0;
}
.card-featured .card-f-closed-overlay span {
  color: #888;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(255,255,255,0.85);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.06);
  letter-spacing: 0.2px;
}
.card-featured .card-f-body {
  padding: 14px 10px 10px;
  border-radius: 0 0 16px 16px;
}
.card-featured .card-f-body h6 {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.card-featured .card-f-body .card-f-cuisine {
  font-size: 0.73rem;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
  line-height: 1.3;
}
.card-featured .card-f-body .card-f-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: #888;
}
.card-featured .card-f-body .card-f-meta i {
  margin-right: 2px;
  font-size: 0.66rem;
}

/* --- Featured Card: Mini Info Badges (Delivery, Min, Free) --- */
.card-featured .card-f-info-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0ede8;
}
.card-featured .card-f-info-badges .info-badge-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fff;
  border: 1px solid #eceae5;
  border-radius: 14px;
  padding: 3px 8px;
  font-size: 0.65rem;
  line-height: 1.3;
}
.card-featured .card-f-info-badges .info-badge-mini i {
  font-size: 0.7rem;
  color: #bbb;
  flex-shrink: 0;
}
.card-featured .card-f-info-badges .info-badge-mini-label {
  color: #aaa;
  font-weight: 400;
}
.card-featured .card-f-info-badges .info-badge-mini-value {
  color: #333;
  font-weight: 600;
}
.card-featured .card-f-info-badges .info-badge-mini-green {
  background: #FFF5EB;
  border-color: #FFD9B3;
}
.card-featured .card-f-info-badges .info-badge-mini-green i {
  color: #FF8C33;
}
.card-featured .card-f-info-badges .info-badge-mini-green .info-badge-mini-value {
  color: #E05E00;
}
.card-featured .card-f-info-badges .info-badge-mini-free {
  background: #E8F5E9;
  border-color: #A5D6A7;
}
.card-featured .card-f-info-badges .info-badge-mini-free i {
  color: #2E7D32;
}
.card-featured .card-f-info-badges .info-badge-mini-free .info-badge-mini-value {
  color: #2E7D32;
  font-weight: 600;
}

/* --- Featured Card: Service Badges (bottom-right of card body) --- */
.card-featured .card-f-services {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.card-featured .card-f-svc {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.58rem;
  font-weight: 500;
  color: #999;
  letter-spacing: 0.1px;
  line-height: 1;
}
.card-featured .card-f-svc i {
  font-size: 0.6rem;
  line-height: 1;
  color: #bbb;
}

.card-featured.make-grey .card-f-img-wrap {
  filter: grayscale(0.6) brightness(0.95);
}
.card-featured.make-grey .card-f-body {
  opacity: 0.55;
}

/* =============================================
   HORIZONTAL CARD (Regular / Rectangle) — Premium
   ============================================= */
.card-horizontal {
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8e5e0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
  text-decoration: none !important;
  color: inherit !important;
  margin-bottom: 16px;
}
.card-horizontal:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  border-color: #ddd8d2;
}

/* --- Image Area --- */
.card-horizontal .card-h-img-wrap {
  position: relative;
  flex: 0 0 380px;
  width: 380px;
  min-height: 180px;
  align-self: stretch;
  overflow: hidden;
  background: #f0ede8;
}
.card-horizontal .card-h-img-wrap > .el-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.card-horizontal .card-h-img-wrap > .el-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-horizontal .card-h-logo-small {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 2.5px solid #fff;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  overflow: hidden;
  z-index: 6;
}
.card-horizontal .card-h-logo-small img,
.card-horizontal .card-h-logo-small .el-image,
.card-horizontal .card-h-logo-small .el-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  min-height: auto !important;
  display: block;
}
.card-horizontal .card-h-img-wrap .card-h-promo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
.card-horizontal .card-h-img-wrap .card-h-promo .badge {
  font-size: 0.64rem;
  padding: 4px 12px;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  letter-spacing: 0.3px;
}
.card-horizontal .card-h-body .card-h-weekly-deal {
  margin: 2px 0 4px;
}
.card-horizontal .card-h-body .card-h-weekly-deal .weekly-deal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #d35400;
  background: #fef3e2;
  border: 1px solid #fde0b0;
  padding: 2px 10px;
  border-radius: 20px;
  letter-spacing: 0.2px;
}
.card-horizontal .card-h-body .card-h-weekly-deal .weekly-deal-chip i {
  font-size: 0.74rem;
  color: #e67e22;
}
/* ═══ Unified Fav Button (heart + count) ═══ */
.card-horizontal .card-h-body .card-h-fav-btn {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  line-height: 1;
}
.card-horizontal .card-h-fav-btn:hover {
  background: #fafafa;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-decoration: none;
}
.card-horizontal .card-h-fav-btn .zmdi {
  font-size: 0.9rem;
  color: #bbb;
  transition: color 0.2s ease, transform 0.2s ease;
}
.card-horizontal .card-h-fav-btn--active .zmdi {
  color: #e74c3c;
}
.card-horizontal .card-h-fav-btn:hover .zmdi {
  transform: scale(1.15);
}
.card-horizontal .card-h-fav-btn__count {
  font-size: 0.7rem;
  font-weight: 700;
  color: #777;
  line-height: 1;
}
.card-horizontal .card-h-fav-btn--active .card-h-fav-btn__count {
  color: #555;
}
.card-horizontal .card-h-fav-btn__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  white-space: nowrap;
  background: #1a1a1a;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  z-index: 100;
  animation: sdTipIn 0.12s ease-out;
  pointer-events: none;
}
.card-horizontal .card-h-fav-btn__tip::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: 12px;
  width: 8px;
  height: 8px;
  background: #1a1a1a;
  transform: rotate(45deg);
  border-radius: 0 0 2px 0;
}
@keyframes sdTipIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ Gallery Slider (sd-gslider) ═══ */
.sd-gslider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.sd-gslider:active {
  cursor: grabbing;
}
.sd-gslider__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}
.sd-gslider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}
.sd-gslider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sd-gslider__dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 8;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(0,0,0,0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sd-gslider__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}
.sd-gslider__dot--active {
  background: #fff;
  transform: scale(1.25);
  box-shadow: 0 0 4px rgba(255,255,255,0.5);
}
.sd-gslider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.2s ease, background 0.2s ease;
  color: #333;
  font-size: 1.1rem;
  padding: 0;
}
.sd-gslider:hover .sd-gslider__arrow {
  opacity: 1;
}
.sd-gslider__arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.1);
}
.sd-gslider__arrow:active {
  transform: translateY(-50%) scale(0.95);
}
.sd-gslider__arrow--prev {
  left: 8px;
}
.sd-gslider__arrow--next {
  right: 8px;
}

/* --- Closed Overlay (elegant, soft) --- */
.card-horizontal .card-h-closed-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(245,243,240,0.75);
  -webkit-backdrop-filter: blur(3px) saturate(0.5);
  backdrop-filter: blur(3px) saturate(0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 7;
}
.card-horizontal .card-h-closed-overlay span {
  color: #888;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(255,255,255,0.85);
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.06);
  letter-spacing: 0.2px;
}

/* --- Horizontal Card: Service Badges (top-right of body, with text) --- */
.card-horizontal .card-h-body .card-h-services {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 3;
}
.card-horizontal .card-h-body .card-h-svc {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 500;
  color: #999;
  letter-spacing: 0.1px;
  line-height: 1;
}
.card-horizontal .card-h-body .card-h-svc i {
  font-size: 0.64rem;
  line-height: 1;
  color: #bbb;
}

/* --- Card Body --- */
.card-horizontal .card-h-body {
  flex: 1;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 4px;
  position: relative;
}
.card-horizontal .card-h-body h5 {
  margin: 0;
  font-weight: 700;
  font-size: 1.08rem;
  padding-right: 120px;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.card-horizontal .card-h-body .card-h-rating-line {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: #777;
  margin-top: 4px;
  flex-wrap: wrap;
}
.card-horizontal .card-h-body .card-h-rating-line .fa-star {
  color: #fbbf24;
  font-size: 0.7rem;
}
.card-horizontal .card-h-body .card-h-rating-line .rating-val {
  font-weight: 700;
  color: #1a1a1a;
}
.card-horizontal .card-h-body .card-h-rating-line .rating-count {
  color: #aaa;
  font-size: 0.74rem;
}
.card-horizontal .card-h-body .card-h-rating-line .separator {
  color: #ddd;
}
.card-horizontal .card-h-body .card-h-cuisine {
  font-size: 0.8rem;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.card-horizontal .card-h-body .card-h-next-open {
  font-weight: 600;
  font-size: 0.78rem;
  color: #E05E00;
  margin-top: 2px;
}
.card-horizontal .card-h-body .card-h-delivery-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: #888;
}
.card-horizontal .card-h-body .card-h-delivery-line i {
  font-size: 0.72rem;
  color: #aaa;
  margin-right: 3px;
}

/* --- Delivery Info Badges — Soft Pill Style with Icons --- */
.card-horizontal .card-h-body .card-h-info-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.card-horizontal .card-h-body .card-h-info-badges .info-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid #eeebe5;
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 0.73rem;
  line-height: 1.3;
}
.card-horizontal .card-h-body .card-h-info-badges .info-badge i {
  font-size: 0.82rem;
  color: #bbb;
  flex-shrink: 0;
}
.card-horizontal .card-h-body .card-h-info-badges .info-badge-label {
  color: #aaa;
  font-weight: 400;
}
.card-horizontal .card-h-body .card-h-info-badges .info-badge-value {
  color: #333;
  font-weight: 600;
}
.card-horizontal .card-h-body .card-h-info-badges .info-badge-green {
  background: #FFF5EB;
  border-color: #FFD9B3;
}
.card-horizontal .card-h-body .card-h-info-badges .info-badge-green i {
  color: #FF8C33;
}
.card-horizontal .card-h-body .card-h-info-badges .info-badge-green .info-badge-value {
  color: #E05E00;
}
.card-horizontal .card-h-body .card-h-info-badges .info-badge-free {
  background: #E8F5E9;
  border-color: #A5D6A7;
}
.card-horizontal .card-h-body .card-h-info-badges .info-badge-free i {
  color: #2E7D32;
}
.card-horizontal .card-h-body .card-h-info-badges .info-badge-free .info-badge-label {
  color: #2E7D32;
  font-weight: 600;
}

/* --- Promos — Compact Chip --- */
.card-horizontal .card-h-body .card-h-promos {
  margin-top: 6px;
}
.card-horizontal .card-h-body .promo-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #fff1f0 0%, #ffe8e4 100%);
  border: 1px solid #fdd;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #d63031;
  max-width: 100%;
  overflow: hidden;
}
.card-horizontal .card-h-body .promo-chip i {
  font-size: 0.78rem;
  color: #e74c3c;
  flex-shrink: 0;
}
.card-horizontal .card-h-body .promo-chip .promo-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-horizontal .card-h-body .promo-chip .promo-chip-pct {
  flex-shrink: 0;
  background: #e74c3c;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
  line-height: 1.5;
  letter-spacing: 0.2px;
}
.card-horizontal .card-h-body .promo-chip .promo-chip-more {
  flex-shrink: 0;
  background: #c0392b;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 6px;
  line-height: 1.4;
}

/* --- Card connected to food slide below --- */
.card-horizontal.card-h-has-food {
  border-radius: 16px 16px 0 0;
  margin-bottom: 0;
  border-bottom: none;
}

/* --- Food Search Results Slide (under restaurant card) --- */
.card-h-food-slide {
  margin-top: -1px;
  margin-bottom: 16px;
  background: #faf9f7;
  border: 1px solid #e8e5e0;
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 10px 14px 12px;
  animation: sdFadeIn 0.3s ease-out both;
}
.card-h-food-slide-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #999;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}
.card-h-food-slide-header i {
  font-size: 0.8rem;
  color: #bbb;
}
.card-h-food-slide-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  cursor: grab;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  touch-action: pan-x;
}
.card-h-food-slide-row::-webkit-scrollbar {
  display: none;
}
.card-h-food-slide-row.food-slide-grabbing {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
  -webkit-user-select: none;
}
.card-h-food-slide-row.food-slide-grabbing .card-h-food-item {
  pointer-events: none;
}
.card-h-food-item {
  flex: 0 0 120px;
  min-width: 120px;
  background: #fff;
  border: 1px solid #eceae5;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.card-h-food-item:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  border-color: #ddd;
}
.card-h-food-img {
  width: 100%;
  height: 80px;
  overflow: hidden;
  background: #f0ede8;
}
.card-h-food-img .el-image,
.card-h-food-img .el-image img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}
.card-h-food-noimg {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
}
.card-h-food-noimg i {
  font-size: 1.6rem;
  color: #FF8C00;
  opacity: 0.55;
}
.card-h-food-info {
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-h-food-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-h-food-price {
  font-size: 0.65rem;
  font-weight: 600;
  color: #FF6B00;
}

/* --- Closed / Unavailable State --- */
.card-horizontal.make-grey {
  opacity: 1;
}
.card-horizontal.make-grey .card-h-img-wrap {
  filter: grayscale(0.6) brightness(0.95);
}
.card-horizontal.make-grey .card-h-body {
  opacity: 0.55;
}

/* --- Results header --- */
.feed-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #fff8f3 0%, #fff5ee 100%);
  border: 1px solid #ffe0c8;
  border-radius: 12px;
}
.feed-results-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.feed-results-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.feed-results-header h5 {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1a1a;
}
.feed-results-reset {
  font-size: 0.75rem;
  font-weight: 600;
  color: #FF6B00;
  text-decoration: none !important;
  background: rgba(255,107,0,0.08);
  border: 1px solid rgba(255,107,0,0.2);
  border-radius: 20px;
  padding: 3px 10px;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.feed-results-reset:hover {
  background: #FF6B00;
  border-color: #FF6B00;
  color: #fff !important;
}

/* --- Trust Card --- */
.sd-trust-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: box-shadow 0.25s, border-color 0.25s;
}
.sd-trust-card:hover {
  border-color: #ffe0c8;
  box-shadow: 0 2px 12px rgba(255,107,0,0.07);
}
.sd-trust-card--skeleton {
  box-shadow: none;
  border-color: #f0f0f0;
}
.sd-trust-card__main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.sd-trust-card__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFF3E8 0%, #FFE8D4 100%);
  color: #FF6B00;
  flex-shrink: 0;
}
.sd-trust-card__body {
  min-width: 0;
}
.sd-trust-card__title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}
.sd-trust-card__count {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FF6B00;
}
.sd-trust-card__sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: #999;
  margin-top: 2px;
  line-height: 1.3;
}
.sd-trust-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sd-trust-card__info-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8e8e8;
  border-radius: 50%;
  background: #fafafa;
  color: #999;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}
.sd-trust-card__info-btn:hover {
  border-color: #FF6B00;
  color: #FF6B00;
  background: #FFF8F3;
}

/* --- Trust Popup Overlay --- */
.sd-trust-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (min-width: 768px) {
  .sd-trust-overlay {
    align-items: center;
  }
}
.sd-trust-popup {
  background: #fff;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 40px rgba(0,0,0,0.15);
}
@media (min-width: 768px) {
  .sd-trust-popup {
    border-radius: 20px;
    box-shadow: 0 8px 60px rgba(0,0,0,0.18);
    max-height: 80vh;
  }
}
.sd-trust-popup__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.sd-trust-popup__header-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF6B00, #FF8C3A);
  color: #fff;
  flex-shrink: 0;
}
.sd-trust-popup__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}
.sd-trust-popup__subtitle {
  font-size: 0.75rem;
  color: #999;
  font-weight: 500;
  margin-top: 2px;
}
.sd-trust-popup__close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #f5f5f5;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.sd-trust-popup__close:hover {
  background: #eee;
  color: #333;
}
.sd-trust-popup__body {
  padding: 16px 22px 8px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.sd-trust-popup__item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #f5f5f5;
}
.sd-trust-popup__item:last-child {
  border-bottom: none;
}
.sd-trust-popup__item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}
.sd-trust-popup__item-icon--orange {
  background: #FFF3E8;
  color: #FF6B00;
}
.sd-trust-popup__item-icon--green {
  background: #E8F8ED;
  color: #22A652;
}
.sd-trust-popup__item-icon--blue {
  background: #E8F0FF;
  color: #3B82F6;
}
.sd-trust-popup__item-icon--purple {
  background: #F0E8FF;
  color: #8B5CF6;
}
.sd-trust-popup__item-icon--red {
  background: #FFECE8;
  color: #EF4444;
}
.sd-trust-popup__item-body {
  min-width: 0;
  flex: 1;
}
.sd-trust-popup__item-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
  line-height: 1.3;
}
.sd-trust-popup__item-desc {
  font-size: 0.78rem;
  color: #666;
  line-height: 1.55;
}
.sd-trust-popup__footer {
  padding: 12px 22px 18px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.sd-trust-popup__footer-btn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF6B00, #FF8C3A);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.sd-trust-popup__footer-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,107,0,0.3);
}

/* Body scroll lock when trust popup is open */
body:has(.sd-trust-overlay) {
  overflow: hidden;
}
.sd-trust-popup__body {
  overscroll-behavior: contain;
}

/* Trust popup transitions */
.sd-trust-popup-enter-active {
  transition: opacity 0.3s ease;
}
.sd-trust-popup-enter-active .sd-trust-popup {
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.sd-trust-popup-leave-active {
  transition: opacity 0.22s ease;
}
.sd-trust-popup-leave-active .sd-trust-popup {
  transition: transform 0.22s ease-in;
}
.sd-trust-popup-enter-from {
  opacity: 0;
}
.sd-trust-popup-enter-from .sd-trust-popup {
  transform: translateY(100%);
}
@media (min-width: 768px) {
  .sd-trust-popup-enter-from .sd-trust-popup {
    transform: translateY(30px) scale(0.95);
  }
}
.sd-trust-popup-leave-to {
  opacity: 0;
}
.sd-trust-popup-leave-to .sd-trust-popup {
  transform: translateY(100%);
}
@media (min-width: 768px) {
  .sd-trust-popup-leave-to .sd-trust-popup {
    transform: translateY(20px) scale(0.97);
  }
}

/* =============================================
   SKELETON & FADE-IN — Smooth Page Load UX
   ============================================= */

/* Fade-in animation for content replacing skeletons */
@keyframes sdFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sd-fade-in {
  animation: sdFadeIn 0.4s ease-out both;
}

/* --- Checkout Page Skeleton --- */
@keyframes sdShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sd-skel-shimmer {
  background: #f0ede8;
  background: linear-gradient(90deg, #f0ede8 25%, #e8e4dd 37%, #f0ede8 63%);
  background-size: 200% 100%;
  animation: sdShimmer 1.6s ease-in-out infinite;
}
#checkout-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: #f7f6f3;
  transition: opacity 0.35s ease;
}
#checkout-skeleton.sd-hide {
  opacity: 0;
  pointer-events: none;
}
.sd-skel-section {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #eceae5;
  margin-bottom: 16px;
  padding: 18px 22px;
}
.sd-skel-section-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sd-skel-circle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
}
.sd-skel-summary {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #eceae5;
  padding: 22px;
}
@media (max-width: 991px) {
  .sd-skel-section { border-radius: 12px; padding: 14px 16px; }
  .sd-skel-circle { width: 34px; height: 34px; }
  .sd-skel-summary { border-radius: 12px; padding: 16px; }
}

/* Skeleton featured card placeholder */
.skel-card-featured {
  flex: 0 0 calc(33.333% - 10px);
  min-width: 220px;
  max-width: 320px;
  border-radius: 16px;
  overflow: hidden;
  background: #f9f8f6;
  border: 1px solid rgba(0,0,0,0.04);
}

/* Skeleton results header */
.skel-results-header {
  background: #f9f8f6 !important;
  border-color: #f0ede8 !important;
}

/* El-skeleton shimmer override for consistency */
.featured-sections-wrap .el-skeleton.is-animated .el-skeleton__item {
  background: linear-gradient(90deg, #f0ede8 25%, #e8e5df 37%, #f0ede8 63%);
  background-size: 400% 100%;
}

@media (max-width: 991.98px) {
  .skel-card-featured {
    flex: 0 0 180px;
    min-width: 180px;
    max-width: 180px;
  }
}
@media (max-width: 575.98px) {
  .skel-card-featured {
    flex: 0 0 200px;
    min-width: 200px;
    max-width: 200px;
  }
  .skel-card-featured .el-skeleton__image {
    height: 110px !important;
  }
}

/* =============================================
   UNIFIED SEARCH BAR — Premium Food Delivery
   ============================================= */
.feed-search-bar {
  margin-bottom: 16px;
}
.feed-search-inner {
  position: relative;
  display: flex;
  align-items: center;
  background: #f9f8f6;
  border: 1.5px solid #e8e5df;
  border-radius: 14px;
  padding: 0 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.feed-search-inner:focus-within {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.10);
  background: #fff;
}
.feed-search-icon {
  font-size: 1.1rem;
  color: #bbb;
  flex-shrink: 0;
  margin-right: 10px;
  transition: color 0.25s;
}
.feed-search-inner:focus-within .feed-search-icon {
  color: #FF6B00;
}
.feed-search-field {
  flex: 1;
  position: relative;
  min-width: 0;
}
.feed-search-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 450;
  color: #1a1a1a;
  padding: 12px 0;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.feed-search-input::placeholder {
  color: transparent;
}
.feed-search-ph {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  z-index: 1;
  font-size: 0.9rem;
  font-weight: 400;
  color: #b5b0a8;
  white-space: nowrap;
  overflow: hidden;
}
.feed-search-ph-static {
  flex-shrink: 0;
}
.feed-search-ph-sep {
  flex-shrink: 0;
  color: #ccc;
}
.feed-search-ph-word {
  font-weight: 700;
  color: #FF6B00;
  display: inline-block;
  animation: phWordIn 0.4s ease-out both;
  flex-shrink: 0;
}
.feed-search-ph-word-b {
  color: #1a1a1a;
  opacity: 0.45;
}
@keyframes phWordIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.feed-ph-slide-enter-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.feed-ph-slide-leave-active {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.feed-ph-slide-enter-from {
  opacity: 0;
  transform: translateX(-12px);
}
.feed-ph-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.feed-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eee;
  color: #888;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-left: 8px;
  transition: background 0.2s, color 0.2s;
  text-decoration: none !important;
}
.feed-search-clear:hover {
  background: #ddd;
  color: #333;
}
.feed-search-count {
  margin-top: 6px;
  padding-left: 4px;
  font-size: 0.76rem;
  font-weight: 500;
  color: #FF6B00;
}
.feed-search-count .text-muted {
  color: #aaa !important;
}

/* --- Search Highlight on matching card --- */
.card-horizontal.card-search-highlight {
  border-color: #FF6B00;
  box-shadow: 0 0 0 2px rgba(255,107,0,0.15), 0 4px 16px rgba(0,0,0,0.08);
}

/* --- Mobile Filter Button --- */
.feed-mobile-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  background: #f5f5f5;
  border: 1px solid #e8e5df;
  color: #555;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.2s;
}
.feed-mobile-filter-btn:hover,
.feed-mobile-filter-btn:active {
  background: #eee;
  border-color: #d5d0c8;
  color: #333;
}
.feed-mobile-filter-btn i {
  font-size: 0.82rem;
}
.feed-mobile-btn-active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.feed-mobile-btn-active:hover,
.feed-mobile-btn-active:active {
  background: #333;
  border-color: #333;
  color: #fff;
}

/* --- Mobile Action Bar --- */
.feed-mobile-action-bar {
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 0;
}
.feed-mobile-action-bar::-webkit-scrollbar {
  display: none;
}
.feed-mobile-cuisine-btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.feed-mobile-active-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #FF6B00;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0 5px;
  flex-shrink: 0;
  line-height: 1;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 991.98px) {
  #vue-feed.container-fluid {
    max-width: 100%;
  }
  .feed-search-bar {
    display: block !important;
    margin-bottom: 12px;
  }
  .feed-filter-sidebar {
    position: static;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .card-horizontal .card-h-img-wrap {
    flex: 0 0 280px;
    width: 280px;
  }
  .sd-gslider__arrow {
    width: 26px;
    height: 26px;
    font-size: 0.95rem;
  }
  .card-horizontal .card-h-body {
    padding: 14px 16px;
    gap: 3px;
  }
  .card-horizontal .card-h-body h5 {
    font-size: 0.98rem;
    padding-right: 110px;
  }
  .card-horizontal .card-h-logo-small {
    width: 38px;
    height: 38px;
  }
  .card-featured {
    flex: 0 0 180px;
    min-width: 180px;
    max-width: 180px;
  }
  .card-featured .card-f-img-wrap {
    height: 110px;
    border-radius: 16px 16px 0 0;
  }
  .card-featured .card-f-img-wrap .el-image,
  .card-featured .card-f-img-wrap .el-image img {
    height: 110px;
  }
  .card-featured .card-f-logo-small {
    width: 32px;
    height: 32px;
    top: 94px;
  }
}

@media (max-width: 575.98px) {

  /* --- Horizontal card becomes VERTICAL on mobile --- */
  .card-horizontal {
    flex-direction: column;
    border-radius: 16px;
    position: relative;
    margin-bottom: 18px;
  }
  .card-horizontal .card-h-img-wrap {
    flex: none;
    width: 100%;
    height: 200px;
    border-radius: 16px 16px 0 0;
  }
  .card-horizontal .card-h-img-wrap > .el-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
  }
  .card-horizontal .card-h-img-wrap > .el-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .card-horizontal .card-h-logo-small {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    bottom: 12px;
    left: 12px;
  }
  .sd-gslider__arrow {
    opacity: 0.7;
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
  }
  .sd-gslider__dots {
    bottom: 6px;
    padding: 2px 6px;
    gap: 4px;
  }
  .sd-gslider__dot {
    width: 6px;
    height: 6px;
  }
  .card-horizontal .card-h-body {
    padding: 14px 16px 16px;
    gap: 3px;
  }
  .card-horizontal .card-h-body h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 2px;
    padding-right: 110px;
  }
  .card-horizontal .card-h-body .card-h-fav-btn {
    padding: 4px 8px;
    gap: 4px;
    bottom: 8px;
    right: 10px;
  }
  .card-horizontal .card-h-fav-btn .zmdi { font-size: 0.8rem; }
  .card-horizontal .card-h-fav-btn__count { font-size: 0.65rem; }
  .card-horizontal .card-h-fav-btn__tip { font-size: 0.65rem; padding: 5px 9px; }
  .card-horizontal .card-h-body .card-h-rating-line {
    font-size: 0.82rem;
    margin-top: 3px;
  }
  .card-horizontal .card-h-body .card-h-delivery-line {
    gap: 8px;
    font-size: 0.78rem;
    margin-top: 4px;
  }
  .card-horizontal .card-h-body .card-h-info-badges {
    gap: 6px;
    margin-top: 8px;
    flex-wrap: nowrap;
  }
  .card-horizontal .card-h-body .card-h-info-badges .info-badge {
    padding: 4px 10px;
    font-size: 0.7rem;
    border-radius: 16px;
    gap: 4px;
  }
  .card-horizontal .card-h-body .card-h-info-badges .info-badge .info-badge-label {
    display: none;
  }
  .card-horizontal .card-h-body .card-h-info-badges .info-badge-free .info-badge-label {
    display: inline;
  }
  .card-horizontal .card-h-body .card-h-promos {
    margin-top: 6px;
  }
  .card-horizontal .card-h-body .promo-chip {
    padding: 4px 10px;
    font-size: 0.68rem;
    gap: 4px;
  }
  .card-horizontal .card-h-body .promo-chip i {
    font-size: 0.72rem;
  }
  .card-horizontal .card-h-body .card-h-info-badges .info-badge i {
    font-size: 0.8rem;
  }
  .card-horizontal .card-h-body .card-h-services {
    top: 10px;
    right: 12px;
    gap: 5px;
  }
  .card-horizontal .card-h-body .card-h-svc {
    font-size: 0.6rem;
  }
  .card-horizontal .card-h-body .card-h-svc i {
    font-size: 0.6rem;
  }

  /* --- Food slide on mobile --- */
  .card-h-food-slide {
    padding: 8px 10px 10px;
    border-radius: 0 0 14px 14px;
  }
  .card-h-food-slide-header {
    font-size: 0.66rem;
    margin-bottom: 6px;
  }
  .card-h-food-slide-row {
    gap: 8px;
  }
  .card-h-food-item {
    flex: 0 0 105px;
    min-width: 105px;
    border-radius: 10px;
  }
  .card-h-food-img,
  .card-h-food-img .el-image,
  .card-h-food-img .el-image img {
    height: 65px;
  }
  .card-h-food-noimg {
    height: 65px;
  }
  .card-h-food-noimg i {
    font-size: 1.3rem;
  }
  .card-h-food-name {
    font-size: 0.64rem;
  }
  .card-h-food-price {
    font-size: 0.6rem;
  }
  .card-horizontal.card-h-has-food {
    border-radius: 16px 16px 0 0;
  }

  /* --- Featured cards on mobile --- */
  .card-featured {
    flex: 0 0 200px;
    min-width: 200px;
    max-width: 200px;
    border-radius: 14px;
  }
  .card-featured .card-f-img-wrap {
    height: 110px;
    border-radius: 14px 14px 0 0;
  }
  .card-featured .card-f-img-wrap .el-image,
  .card-featured .card-f-img-wrap .el-image img {
    height: 110px;
  }
  .card-featured .card-f-body {
    padding: 12px 8px 8px;
    border-radius: 0 0 14px 14px;
  }
  .card-featured .card-f-logo-small {
    width: 28px;
    height: 28px;
    top: 93px;
    border-radius: 7px;
  }
  .card-featured .card-f-info-badges {
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
  }
  .card-featured .card-f-info-badges .info-badge-mini {
    padding: 2px 6px;
    font-size: 0.6rem;
    border-radius: 12px;
  }
  .card-featured .card-f-services {
    gap: 3px;
    margin-top: 4px;
  }
  .card-featured .card-f-svc {
    font-size: 0.52rem;
  }
  .card-featured .card-f-svc i {
    font-size: 0.54rem;
  }
  .featured-section-header h4 {
    font-size: 0.95rem;
  }

  /* --- Search bar mobile adjustments --- */
  .feed-search-inner {
    border-radius: 12px;
    padding: 0 12px;
  }
  .feed-search-input {
    font-size: 0.85rem;
    padding: 10px 0;
  }
  .feed-search-icon {
    font-size: 1rem;
    margin-right: 8px;
  }
}

/* [DISABLED] Search nav icon removed — /search page no longer used.
@media (max-width: 991.98px) {
  body.action-restaurants #top-navigation .zmdi-search {
    display: none;
  }
}
*/

/* =============================================
   ITEM MODAL V2 — Modern Accordion UX
   ============================================= */

/* --- Modal Content Wrapper --- */
.item-modal-v2 {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.modal-full .item-modal-v2 {
  border-radius: 0;
  max-height: 100vh;
}
.modal-full {
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* --- Smooth entrance animation for item modal --- */
#itemModal.modal.fade .modal-dialog {
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1), opacity 0.25s ease;
  transform: scale(0.95);
  opacity: 0;
}
#itemModal.modal.show .modal-dialog {
  transform: scale(1);
  opacity: 1;
}
#itemModal.modal.fade .modal-backdrop,
#itemModal.modal.fade + .modal-backdrop {
  transition: opacity 0.3s ease;
}
@media (max-width: 575.98px) {
  #itemModal.modal.fade .modal-dialog {
    transform: translateY(40px);
    opacity: 0;
  }
  #itemModal.modal.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- Header (close button) --- */
.item-modal-v2-header {
  border-bottom: none;
  padding: 8px 12px 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background: transparent;
}
.item-modal-v2-header--noimg {
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px 12px 0;
}
.item-modal-v2-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
  opacity: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: background 0.2s, transform 0.15s;
  padding: 0;
  float: none;
}
.item-modal-v2-close:hover {
  background: #fff;
  transform: scale(1.08);
}

/* --- Body (scrollable area) --- */
.item-modal-v2-body {
  padding: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px !important;
}

/* --- Product Image --- */
.item-modal-v2-img {
  width: 100%;
  overflow: hidden;
  background: #f0ede8;
  position: relative;
}
.item-modal-v2-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, rgba(255,255,255,0.6) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.item-modal-v2-img-el {
  width: 100%;
  height: 280px;
  display: block;
}
.item-modal-v2-img-el img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

/* --- No-Image Hero Header --- */
.item-modal-v2-noimg-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 180px;
  background: linear-gradient(160deg, #FFF5EB 0%, #FFE8D5 40%, #FFF0E0 70%, #FFF8F0 100%);
  border-bottom: 1px solid #f0e6d6;
  position: relative;
}
.item-modal-v2-noimg-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(255,107,0,0.12);
}
.item-modal-v2-noimg-icon i {
  font-size: 32px;
  color: #FF6B00;
}

/* --- Product Info Block --- */
.item-modal-v2-info {
  padding: 16px 18px 8px;
}
.item-modal-v2-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 1.15rem;
  color: #1a1a1a;
  line-height: 1.35;
}
.item-modal-v2-info .readmore,
.item-modal-v2-info p {
  font-size: 0.84rem;
  color: #777;
  line-height: 1.5;
}

/* Allergen link */
.item-modal-v2-allergen-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 5px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #555;
  background: #fafafa;
  transition: all 0.2s;
  text-decoration: none !important;
}
.item-modal-v2-allergen-link:hover {
  border-color: #FF6B00;
  color: #FF6B00;
  background: #FFF5EB;
}
.item-modal-v2-allergen-link i {
  font-size: 14px;
}

/* --- Sections --- */
.item-modal-v2-section {
  padding: 0 18px;
  margin-bottom: 0;
}
.item-modal-v2-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
  padding-top: 14px;
}

/* --- Size Selection (Radio Cards) --- */
.item-modal-v2-sizes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 6px;
}
.item-modal-v2-size-option {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border: 1.5px solid #e8e5df;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
  margin: 0;
  user-select: none;
}
.item-modal-v2-size-option:hover {
  border-color: #ccc;
  background: #fafaf8;
}
.item-modal-v2-size-option:active {
  transform: scale(0.98);
}
.item-modal-v2-size-option.active {
  border-color: #FF6B00;
  background: #FFF5EB;
  box-shadow: 0 0 0 2px rgba(255,107,0,0.12);
}
.item-modal-v2-size-option input[type="radio"] {
  display: none;
}
.item-modal-v2-size-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  margin-right: 12px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s;
}
.item-modal-v2-size-option.active .item-modal-v2-size-radio {
  border-color: #FF6B00;
}
.item-modal-v2-size-option.active .item-modal-v2-size-radio::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF6B00;
  animation: sdSizeRadioFill 0.2s ease;
}
@keyframes sdSizeRadioFill {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
.item-modal-v2-size-name {
  flex: 1;
  font-weight: 600;
  font-size: 0.88rem;
  color: #1a1a1a;
}
.item-modal-v2-size-price {
  font-weight: 600;
  font-size: 0.85rem;
  color: #333;
}
.item-modal-v2-size-price del {
  color: #bbb;
  font-weight: 400;
  margin-right: 4px;
}
.item-modal-v2-size-option.active .item-modal-v2-size-price:has(del) {
  color: #FF6B00;
}

/* --- Accordion --- */
.item-modal-v2-accordion {
  border: 1.5px solid #e8e5df;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.item-modal-v2-accordion.is-open {
  border-color: #FF6B00;
  box-shadow: 0 0 0 2px rgba(255,107,0,0.10);
}
.item-modal-v2-accordion-header {
  display: flex;
  align-items: center;
  padding: 13px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.item-modal-v2-accordion-header:hover {
  background: #fafaf8;
}
.item-modal-v2-accordion-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.item-modal-v2-accordion-title > span:first-child {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1a1a1a;
}
.item-modal-v2-accordion-subtitle {
  font-size: 0.75rem;
  color: #999;
  margin-top: 2px;
  width: 100%;
}
.item-modal-v2-accordion-icon {
  font-size: 20px;
  color: #aaa;
  flex-shrink: 0;
  margin-left: 8px;
  transition: color 0.2s;
}
.item-modal-v2-accordion.is-open .item-modal-v2-accordion-icon {
  color: #FF6B00;
}

/* Badges */
.item-modal-v2-badge-required {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  background: #fef9c3;
  color: #92400e;
  letter-spacing: 0.2px;
}
.item-modal-v2-badge-optional {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 500;
  background: #f3f4f6;
  color: #999;
}

/* Accordion Body */
.item-modal-v2-accordion-body {
  padding: 4px 14px 14px;
  border-top: 1px solid #f0ede8;
}

/* Addon Items inside accordion */
.item-modal-v2-addon-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f5f3f0;
  transition: background 0.15s;
}
.item-modal-v2-addon-item.sd-addon-row-click {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.item-modal-v2-addon-item.sd-addon-row-click:active {
  background: #f9f7f5;
}
.item-modal-v2-addon-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
/* Selected radio/checkbox addon row — subtle highlight */
.item-modal-v2-addon-item:has(.custom-control-input:checked) {
  background: #FFF9F3;
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -8px;
  margin-right: -8px;
}
/* Disabled addon item */
.item-modal-v2-addon-item:has(.custom-control-input:disabled) {
  opacity: 0.45;
}
/* Addon: make label + info link sit on same line */
.item-modal-v2-addon-item .custom-control {
  display: flex;
  align-items: center;
  position: relative;
}

/* Addon allergen "Info" text link (inline right of name) */
.sd-addon-pinfo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.65rem;
  font-weight: 500;
  color: #b0b0b0;
  text-decoration: none;
  padding: 2px 4px;
  margin-left: 2px;
  transition: color .15s;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}
.sd-addon-pinfo:hover {
  color: #FF6B00;
  text-decoration: none;
}
.sd-addon-pinfo i {
  font-size: 11px;
}

/* Floating allergen tooltip (positioned via JS, replaces old inline popover) */
.sd-alg-tooltip {
  width: 260px;
  background: #fdfbf8;
  border: 1px solid #f0ede8;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  animation: sdAlgTipIn .22s cubic-bezier(.22,1,.36,1);
  pointer-events: auto;
}
@keyframes sdAlgTipIn {
  from { opacity: 0; transform: scale(.96) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.sd-alg-tooltip__arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fdfbf8;
  border: 1px solid #f0ede8;
  transform: rotate(45deg);
  pointer-events: none;
}
.sd-alg-tooltip__arrow--left {
  left: -6px;
  top: 18px;
  border-right: none;
  border-top: none;
}
.sd-alg-tooltip__arrow--right {
  right: -6px;
  top: 18px;
  border-left: none;
  border-bottom: none;
}
.sd-alg-tooltip__arrow--above {
  top: -6px;
  left: 50%;
  margin-left: -5px;
  border-bottom: none;
  border-right: none;
}
.sd-alg-tooltip__arrow--below {
  bottom: -6px;
  left: 50%;
  margin-left: -5px;
  border-top: none;
  border-left: none;
}
.sd-alg-tooltip__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #faf8f5;
  border-bottom: 1px solid #f0ede8;
}
.sd-alg-tooltip__head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, #fff3cd, #fde68a);
  flex-shrink: 0;
}
.sd-alg-tooltip__head-icon i {
  font-size: 12px;
  color: #b8860b;
}
.sd-alg-tooltip__head-title {
  flex: 1;
  font-size: 0.76rem;
  font-weight: 700;
  color: #1a1a1a;
}
.sd-alg-tooltip__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #aaa;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.sd-alg-tooltip__close:hover {
  background: #f0ede8;
  color: #555;
}
.sd-alg-tooltip__body {
  padding: 8px 12px;
  max-height: 180px;
  overflow-y: auto;
}
.sd-alg-tooltip__body .sd-allergen-item {
  gap: 8px;
  padding: 5px 0;
}
.sd-alg-tooltip__body .sd-allergen-item__icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.sd-alg-tooltip__body .sd-allergen-item__name {
  font-size: 0.78rem;
}
.sd-alg-tooltip__group {
  margin-bottom: 6px;
}
.sd-alg-tooltip__group:last-child {
  margin-bottom: 0;
}
.sd-alg-tooltip__group-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #f5f2ee;
}
.sd-alg-tooltip__notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 12px;
  background: #faf8f5;
  border-top: 1px solid #f0ede8;
}
.sd-alg-tooltip__notice i {
  font-size: 12px;
  color: #b8860b;
  flex-shrink: 0;
  margin-top: 1px;
}
.sd-alg-tooltip__notice span {
  font-size: 0.66rem;
  color: #888;
  line-height: 1.4;
  font-style: italic;
}
/* Dark mode */
html[data-theme="dark"] .sd-alg-tooltip {
  background: #252525;
  border-color: #3a3a3a;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .sd-alg-tooltip__arrow {
  background: #252525;
  border-color: #3a3a3a;
}
html[data-theme="dark"] .sd-alg-tooltip__head {
  background: #2a2a2a;
  border-bottom-color: #3a3a3a;
}
html[data-theme="dark"] .sd-alg-tooltip__head-icon {
  background: linear-gradient(135deg, #4a3d1a, #5c4a1e);
}
html[data-theme="dark"] .sd-alg-tooltip__head-icon i {
  color: #e6c44d;
}
html[data-theme="dark"] .sd-alg-tooltip__head-title {
  color: #ddd;
}
html[data-theme="dark"] .sd-alg-tooltip__close {
  color: #777;
}
html[data-theme="dark"] .sd-alg-tooltip__close:hover {
  background: #3a3a3a;
  color: #bbb;
}
html[data-theme="dark"] .sd-alg-tooltip__group-title {
  color: #777;
  border-bottom-color: #333;
}
html[data-theme="dark"] .sd-alg-tooltip__body .sd-allergen-item__name {
  color: #ccc;
}
html[data-theme="dark"] .sd-alg-tooltip__body .sd-allergen-item__icon--placeholder {
  background: #333;
}
html[data-theme="dark"] .sd-alg-tooltip__notice {
  background: #2a2a2a;
  border-top-color: #3a3a3a;
}
html[data-theme="dark"] .sd-alg-tooltip__notice i {
  color: #e6c44d;
}
html[data-theme="dark"] .sd-alg-tooltip__notice span {
  color: #888;
}
/* Mobile: full-width tooltip */
@media (max-width: 575px) {
  .sd-alg-tooltip {
    width: calc(100vw - 16px);
    max-width: 320px;
  }
}

/* Addon item no longer needs wrap since popover is now floating */
.item-modal-v2-addon-item {
  flex-wrap: nowrap;
}
.item-modal-v2-addon-price {
  font-weight: 600;
  font-size: 0.82rem;
  color: #555;
  white-space: nowrap;
  margin-left: 8px;
}

/* Multiple addon: clickable label area */
.addon-multiple-label {
  cursor: pointer;
  flex-grow: 1;
  -webkit-user-select: none;
  user-select: none;
}
/* Reduce spacing for multiple addon type items (v2) */
.item-modal-v2-addon-item:has(.quantity-wrapper) {
  padding: 6px 0;
}
/* Reduce spacing for multiple addon type items (older view) */
.list-addon li:has(.quantity-wrapper) {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Addon show more / less button */
.addon-show-more-wrap {
  text-align: center;
  padding: 6px 0 2px;
}
.addon-show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #FF6B00;
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 16px;
  background: #fff5ee;
  transition: background 0.2s;
}
.addon-show-more-btn:hover {
  background: #ffe8d6;
  color: #FF6B00;
  text-decoration: none;
}
.addon-show-more-btn .zmdi {
  font-size: 14px;
}

/* =============================================
   Q&A ADDON ENHANCEMENTS (sd-qa-*)
   Builds on item-modal-v2-accordion — minimal additions only
   ============================================= */

/* Header override: add gap for step indicator */
.sd-qa-header {
  align-items: flex-start;
  gap: 10px;
}
.sd-qa-header__body {
  flex: 1;
  min-width: 0;
}
.sd-qa-header__body .item-modal-v2-accordion-title {
  flex-wrap: wrap;
}
.sd-qa-header__body .item-modal-v2-accordion-title > span:first-child {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Step indicator — small, subtle */
.sd-qa-step {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  background: #f0ede8;
  color: #aaa;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.3s ease;
}
.sd-qa-step--active {
  background: #FFF5EB;
  color: #FF6B00;
}
.sd-qa-step--done {
  background: #eee;
  color: #888;
}
.sd-qa-step--done .zmdi {
  font-size: 11px;
}

/* Subtitle row: hint · badge */
.sd-qa-subtitle {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 0.75rem;
  color: #999;
  line-height: 1.4;
  flex-wrap: wrap;
}
.sd-qa-subtitle__hint {
  color: #999;
}
.sd-qa-subtitle__dot {
  color: #ccc;
  font-weight: 700;
  font-size: 0.65rem;
}
.sd-qa-subtitle__badge {
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.sd-qa-subtitle__badge--req {
  color: #b45309;
}
.sd-qa-subtitle__badge--opt {
  color: #aaa;
}

/* Selected summary — neutral, subtle */
.sd-qa-summary {
  margin-top: 4px;
  font-size: 0.72rem;
  color: #999;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Staggered option animation */
.sd-qa-option-anim {
  animation: sdQaOptIn 0.25s ease both;
}
@keyframes sdQaOptIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =============================================
   END Q&A ADDON ENHANCEMENTS
   ============================================= */

/* Notes accordion special style */
.item-modal-v2-accordion-notes .item-modal-v2-accordion-title > span:first-child {
  color: #777;
  font-weight: 500;
}
.item-modal-v2-accordion-notes {
  border-style: dashed;
  border-color: #e0ddd8;
  background: #fafaf8;
}
.item-modal-v2-accordion-notes.is-open {
  border-color: #ccc;
  border-style: solid;
  background: #fff;
  box-shadow: none;
}

/* Field labels inside notes */
.item-modal-v2-field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
}
.item-modal-v2-textarea {
  font-size: 13px !important;
  border-radius: 10px;
  border-color: #e5e7eb;
  min-height: 70px;
  resize: vertical;
  transition: border-color 0.2s;
}
.item-modal-v2-textarea:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 2px rgba(255,107,0,0.10);
}
.item-modal-v2-select {
  font-size: 13px !important;
  border-radius: 10px;
  border-color: #e5e7eb;
  transition: border-color 0.2s;
}
.item-modal-v2-select:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 2px rgba(255,107,0,0.10);
}

/* Allergen accordion special style */
.item-modal-v2-accordion-allergen {
  border-color: #f0e6d6;
  background: #fffcf7;
}
.item-modal-v2-accordion-allergen .item-modal-v2-accordion-title > span:first-child {
  color: #b8860b;
  font-weight: 600;
}
.item-modal-v2-accordion-allergen .item-modal-v2-accordion-title > span:first-child .zmdi {
  color: #d4a017;
}
.item-modal-v2-accordion-allergen.is-open {
  border-color: #e8d5a8;
  background: #fff;
  box-shadow: 0 2px 8px rgba(184,134,11,0.08);
}
.item-modal-v2-badge-info {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fff3cd;
  color: #856404;
  line-height: 1.4;
}
.item-modal-v2-allergen-group {
  margin-bottom: 4px;
}
.item-modal-v2-allergen-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.item-modal-v2-badge-confirmed {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e8f5e9;
  color: #2e7d32;
}
.item-modal-v2-badge-unconfirmed {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f5f5f5;
  color: #888;
}
.item-modal-v2-allergen-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #f5f0e8;
  font-size: 14px;
}
.item-modal-v2-allergen-row:last-child {
  border-bottom: none;
}
.item-modal-v2-allergen-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}
.item-modal-v2-allergen-icon-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f0ede8;
  color: #aaa;
  font-size: 10px;
  flex-shrink: 0;
}
.item-modal-v2-allergen-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4a017;
  flex-shrink: 0;
}

/* =====================================================
   SD INLINE ALLERGEN — Inside Item Details Popup
   Matches the standalone sd-allergen popup design
   ===================================================== */
.sd-inline-allergen {
  border-color: #f0ede8 !important;
  background: #fafaf8 !important;
}
.sd-inline-allergen.is-open {
  border-color: #e8d5a8 !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(184,134,11,0.06);
}
.sd-inline-allergen__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  margin-right: 6px;
  vertical-align: middle;
}
.sd-inline-allergen__icon--warn {
  background: #fff3cd;
}
.sd-inline-allergen__icon--warn i {
  font-size: 14px;
  color: #d4a017;
}
.sd-inline-allergen__group {
  margin-bottom: 4px;
}
.sd-inline-allergen__group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0ede8;
}
.sd-inline-allergen__group-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: #1a1a1a;
}
.sd-inline-allergen__shimmer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.sd-inline-allergen__shimmer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.sd-inline-allergen__empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: #888;
  font-size: 0.85rem;
}
.sd-inline-allergen__empty i {
  font-size: 18px;
  color: #4caf50;
}

/* Dark mode */
html[data-theme="dark"] .sd-inline-allergen {
  background: #252525 !important;
  border-color: #333 !important;
}
html[data-theme="dark"] .sd-inline-allergen.is-open {
  background: #1e1e1e !important;
  border-color: #4a3d20 !important;
  box-shadow: none;
}
html[data-theme="dark"] .sd-inline-allergen__icon--warn {
  background: #3e3520;
}
html[data-theme="dark"] .sd-inline-allergen__group-head {
  border-bottom-color: #333;
}
html[data-theme="dark"] .sd-inline-allergen__group-title {
  color: #eee;
}
html[data-theme="dark"] .sd-inline-allergen__empty {
  color: #888;
}

/* =====================================================
   SD ALLERGEN POPUP — Modern Overlay / Bottom-Sheet
   ===================================================== */
.sd-allergen-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: sdAllergenFadeIn 0.25s ease;
}
.sd-allergen-overlay--closing {
  animation: sdAllergenFadeOut 0.28s ease forwards;
}
@keyframes sdAllergenFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sdAllergenFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Sheet panel */
.sd-allergen-sheet {
  width: 100%;
  max-width: 100%;
  max-height: 88vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  animation: sdAllergenSlideUp 0.32s cubic-bezier(0.32,0.72,0,1);
  overflow: hidden;
}
.sd-allergen-sheet--closing {
  animation: sdAllergenSlideDown 0.28s cubic-bezier(0.32,0.72,0,1) forwards;
}
@keyframes sdAllergenSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes sdAllergenSlideDown {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

/* Desktop: centered card */
@media (min-width: 768px) {
  .sd-allergen-overlay {
    align-items: center;
  }
  .sd-allergen-sheet {
    max-width: 480px;
    max-height: 80vh;
    border-radius: 20px;
    animation-name: sdAllergenScaleIn;
  }
  .sd-allergen-sheet--closing {
    animation-name: sdAllergenScaleOut;
  }
  @keyframes sdAllergenScaleIn {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
  @keyframes sdAllergenScaleOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.92); opacity: 0; }
  }
  .sd-allergen-handle { display: none !important; }
}

/* Drag handle (mobile only) */
.sd-allergen-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
  flex-shrink: 0;
}
.sd-allergen-handle span {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #d9d9d9;
}

/* Header */
.sd-allergen-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid #f0ede8;
  flex-shrink: 0;
}
.sd-allergen-header__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sd-allergen-header__icon i {
  font-size: 18px;
  color: #d4a017;
}
.sd-allergen-header__title {
  flex: 1;
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: #1a1a1a;
  line-height: 1.3;
}
.sd-allergen-header__close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s;
}
.sd-allergen-header__close:hover {
  background: #e8e8e8;
  transform: scale(1.05);
}
.sd-allergen-header__close i {
  font-size: 18px;
  color: #666;
}

/* Scrollable body */
.sd-allergen-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 8px;
  overscroll-behavior: contain;
}
.sd-allergen-body::-webkit-scrollbar {
  width: 4px;
}
.sd-allergen-body::-webkit-scrollbar-track {
  background: transparent;
}
.sd-allergen-body::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
.sd-allergen-body::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

/* Section (Allergens / Additives) */
.sd-allergen-section {
  background: #fafaf8;
  border: 1.5px solid #f0ede8;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.sd-allergen-section__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.sd-allergen-section__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sd-allergen-section__icon--warn {
  background: #fff3cd;
}
.sd-allergen-section__icon--warn i {
  font-size: 15px;
  color: #d4a017;
}
.sd-allergen-section__icon--info {
  background: #e8f4fd;
}
.sd-allergen-section__icon--info i {
  font-size: 15px;
  color: #2196F3;
}
.sd-allergen-section__title {
  font-weight: 700;
  font-size: 0.92rem;
  color: #1a1a1a;
  flex: 1;
}

/* Confirmed / unconfirmed badges */
.sd-allergen-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.sd-allergen-badge--confirmed {
  background: #e8f5e9;
  color: #2e7d32;
}
.sd-allergen-badge--confirmed i {
  font-size: 12px;
}
.sd-allergen-badge--unconfirmed {
  background: #f5f5f5;
  color: #888;
}

/* List of allergen/additive items */
.sd-allergen-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sd-allergen-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #f0ede8;
}
.sd-allergen-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.sd-allergen-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f3f0;
}
.sd-allergen-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sd-allergen-item__icon--placeholder {
  background: #f0ede8;
}
.sd-allergen-item__icon--placeholder i {
  font-size: 14px;
  color: #bbb;
}
.sd-allergen-item__name {
  font-size: 0.88rem;
  font-weight: 500;
  color: #333;
  line-height: 1.35;
}
.sd-allergen-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2196F3, #1976D2);
  flex-shrink: 0;
  margin-left: 4px;
}

/* Empty state */
.sd-allergen-empty {
  text-align: center;
  padding: 30px 20px;
}
.sd-allergen-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e8f5e9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.sd-allergen-empty__icon i {
  font-size: 22px;
  color: #4caf50;
}
.sd-allergen-empty p {
  margin: 0;
  font-size: 0.9rem;
  color: #888;
}

/* Disclaimer */
.sd-allergen-disclaimer {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  margin-top: 4px;
  background: #f9f9f7;
  border-radius: 10px;
  border: 1px solid #f0ede8;
}
.sd-allergen-disclaimer > i {
  font-size: 14px;
  color: #bbb;
  flex-shrink: 0;
  margin-top: 1px;
}
.sd-allergen-disclaimer p {
  margin: 0;
  font-size: 0.72rem;
  color: #999;
  line-height: 1.55;
}

/* Contact area (chat + phone) */
.sd-allergen-contact {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Chat button — primary CTA */
.sd-allergen-chat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  background: linear-gradient(135deg, #fff5ee 0%, #fff0e6 100%);
  border: 1.5px solid #ffd6b3;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.sd-allergen-chat:hover {
  background: linear-gradient(135deg, #ffe8d6 0%, #ffdcc4 100%);
  border-color: #ffb380;
}
.sd-allergen-chat:active {
  transform: scale(0.98);
}
.sd-allergen-chat > i:first-child {
  font-size: 18px;
  color: #FF6B00;
  flex-shrink: 0;
}
.sd-allergen-chat > span {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: #c75400;
  text-align: left;
}
.sd-allergen-chat > i:last-child {
  font-size: 16px;
  color: #FF6B00;
  opacity: 0.5;
  flex-shrink: 0;
}

/* Shimmer skeleton loading */
.sd-allergen-shimmer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sd-allergen-shimmer__section {
  background: #fafaf8;
  border: 1.5px solid #f0ede8;
  border-radius: 14px;
  padding: 14px 16px;
}
.sd-allergen-shimmer__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.sd-allergen-shimmer__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.sd-shimmer {
  background: linear-gradient(90deg, #f0ede8 25%, #e8e4de 50%, #f0ede8 75%);
  background-size: 200% 100%;
  animation: sdShimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}
.sd-shimmer--circle {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}
.sd-shimmer--text {
  height: 14px;
  border-radius: 7px;
}
.sd-shimmer--badge {
  width: 80px;
  height: 20px;
  border-radius: 10px;
  margin-left: auto;
}
.sd-shimmer--icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
.sd-shimmer--dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 4px;
}
@keyframes sdShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Content fade-in after load */
.sd-allergen-fadein {
  animation: sdAllergenContentFade 0.4s ease both;
}
.sd-allergen-section.sd-allergen-fadein:nth-child(2) { animation-delay: 0.06s; }
.sd-allergen-disclaimer.sd-allergen-fadein { animation-delay: 0.12s; }
.sd-allergen-contact.sd-allergen-fadein { animation-delay: 0.18s; }
@keyframes sdAllergenContentFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Footer */
.sd-allergen-footer {
  padding: 12px 20px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  border-top: 1px solid #f0ede8;
  flex-shrink: 0;
  background: #fff;
}
.sd-allergen-footer__btn {
  display: block;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 12px;
  background: #FF6B00;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.sd-allergen-footer__btn:hover {
  background: #e65f00;
}
.sd-allergen-footer__btn:active {
  transform: scale(0.98);
}

/* ---- Dark mode ---- */
html[data-theme="dark"] .sd-allergen-overlay {
  background: rgba(0,0,0,0.65);
}
html[data-theme="dark"] .sd-allergen-sheet {
  background: #1e1e1e;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .sd-allergen-handle span {
  background: #444;
}
html[data-theme="dark"] .sd-allergen-header {
  border-bottom-color: #333;
}
html[data-theme="dark"] .sd-allergen-header__icon {
  background: linear-gradient(135deg, #3e3520 0%, #4a3d20 100%);
}
html[data-theme="dark"] .sd-allergen-header__title {
  color: #eee;
}
html[data-theme="dark"] .sd-allergen-header__close {
  background: #333;
}
html[data-theme="dark"] .sd-allergen-header__close:hover {
  background: #444;
}
html[data-theme="dark"] .sd-allergen-header__close i {
  color: #ccc;
}
html[data-theme="dark"] .sd-allergen-section {
  background: #252525;
  border-color: #333;
}
html[data-theme="dark"] .sd-allergen-section__head {
  border-bottom-color: #333;
}
html[data-theme="dark"] .sd-allergen-section__title {
  color: #eee;
}
html[data-theme="dark"] .sd-allergen-section__icon--warn {
  background: #3e3520;
}
html[data-theme="dark"] .sd-allergen-section__icon--info {
  background: #1a2c3e;
}
html[data-theme="dark"] .sd-allergen-badge--confirmed {
  background: #1b3a1b;
  color: #66bb6a;
}
html[data-theme="dark"] .sd-allergen-badge--unconfirmed {
  background: #2a2a2a;
  color: #888;
}
html[data-theme="dark"] .sd-allergen-item {
  border-bottom-color: #333;
}
html[data-theme="dark"] .sd-allergen-item__icon {
  background: #2a2a2a;
}
html[data-theme="dark"] .sd-allergen-item__icon--placeholder {
  background: #333;
}
html[data-theme="dark"] .sd-allergen-item__name {
  color: #ddd;
}
html[data-theme="dark"] .sd-allergen-empty__icon {
  background: #1b3a1b;
}
html[data-theme="dark"] .sd-allergen-empty p {
  color: #888;
}
html[data-theme="dark"] .sd-allergen-disclaimer {
  background: #252525;
  border-color: #333;
}
html[data-theme="dark"] .sd-allergen-disclaimer p {
  color: #777;
}
html[data-theme="dark"] .sd-allergen-chat {
  background: linear-gradient(135deg, #2a1f14 0%, #3a2a18 100%);
  border-color: #4a3520;
}
html[data-theme="dark"] .sd-allergen-chat:hover {
  background: linear-gradient(135deg, #3a2a18 0%, #4a3520 100%);
  border-color: #5a4530;
}
html[data-theme="dark"] .sd-allergen-chat > i:first-child {
  color: #ff8c3a;
}
html[data-theme="dark"] .sd-allergen-chat > span {
  color: #ff8c3a;
}
html[data-theme="dark"] .sd-allergen-chat > i:last-child {
  color: #ff8c3a;
}
html[data-theme="dark"] .sd-allergen-shimmer__section {
  background: #252525;
  border-color: #333;
}
html[data-theme="dark"] .sd-allergen-shimmer__head {
  border-bottom-color: #333;
}
html[data-theme="dark"] .sd-shimmer {
  background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}
html[data-theme="dark"] .sd-allergen-footer {
  border-top-color: #333;
  background: #1e1e1e;
}
html[data-theme="dark"] .sd-allergen-footer__btn {
  background: #FF6B00;
}

/* --- Item Modal Shimmer Skeleton --- */
.sd-item-shimmer {
  animation: sdAllergenContentFade 0.3s ease both;
}
.sd-item-shimmer__img {
  width: 100%;
  height: 220px;
  border-radius: 0;
}
.sd-item-shimmer__info {
  padding: 16px 18px 6px;
}
.sd-item-shimmer__section {
  padding: 10px 18px;
}
.sd-item-shimmer__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1.5px solid #f0ede8;
  border-radius: 12px;
  margin-bottom: 8px;
}
.sd-item-shimmer__accordion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid #f0ede8;
  border-radius: 12px;
}
html[data-theme="dark"] .sd-item-shimmer__option,
html[data-theme="dark"] .sd-item-shimmer__accordion {
  border-color: #333;
}

/* Content fade-in when item data loads */
.item-modal-v2-body > div:not(.sd-item-shimmer) {
  animation: sdItemContentFade 0.35s ease both;
}
@keyframes sdItemContentFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Sticky Footer --- */
.item-modal-v2-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid #f0ede8;
  background: #fff;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}

/* Quantity control */
.item-modal-v2-qty {
  display: flex;
  align-items: center;
  gap: 0;
  background: #f5f3f0;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.item-modal-v2-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 16px;
  color: #555;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none !important;
}
.item-modal-v2-qty-btn:hover {
  background: #e8e5df;
  color: #1a1a1a;
}
.item-modal-v2-qty-btn-plus {
  color: #FF6B00;
}
.item-modal-v2-qty-btn-plus:hover {
  background: #FFF0E0;
  color: #E05E00;
}
.item-modal-v2-qty-val {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  font-weight: 700;
  font-size: 0.92rem;
  color: #1a1a1a;
  padding: 0 2px;
}

/* Add to Cart Button */
.item-modal-v2-cart-btn-wrap {
  flex: 1;
}
.item-modal-v2-cart-btn {
  width: 100%;
  padding: 11px 16px !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  font-weight: 700;
  background: #FF6B00 !important;
  color: #fff !important;
  border: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
}
.item-modal-v2-cart-btn:hover:not(:disabled) {
  background: #E05E00 !important;
  box-shadow: 0 4px 14px rgba(255,107,0,0.35);
  transform: translateY(-1px);
}
.item-modal-v2-cart-btn:disabled {
  background: #ccc !important;
  cursor: not-allowed;
}
.item-modal-v2-cart-btn .label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.item-modal-v2-cart-btn.loading .label {
  visibility: hidden;
}
.item-modal-v2-cart-btn.loading .circle-loader {
  display: block;
}

/* --- Scrollbar styling for modal body --- */
.item-modal-v2-body::-webkit-scrollbar {
  width: 4px;
}
.item-modal-v2-body::-webkit-scrollbar-track {
  background: transparent;
}
.item-modal-v2-body::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
.item-modal-v2-body::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

/* --- Mobile Responsive --- */
@media (max-width: 575.98px) {
  /* Fix: override modal-dialog-centered conflict with modal-full.
     Bootstrap's centered mode uses a ::before pseudo + flex centering
     that pushes full-height modals out of bounds from the top. */
  #itemModal.modal {
    padding: 0 !important;
    margin: 0 !important;
  }
  #itemModal .modal-full.modal-dialog-centered {
    min-height: 100%;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch;
  }
  #itemModal .modal-full {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
  #itemModal .modal-full.modal-dialog-centered::before {
    display: none;
  }
  #itemModal .modal-full .modal-content.item-modal-v2 {
    border-radius: 0;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .item-modal-v2-header {
    padding: 10px 10px 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
  }
  .item-modal-v2-header--noimg {
    position: absolute;
    top: 0;
    right: 0;
    padding: 12px 12px 0;
  }
  .item-modal-v2-close {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .item-modal-v2-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .item-modal-v2-img-el,
  .item-modal-v2-img-el img {
    height: 240px;
  }
  .item-modal-v2-noimg-hero {
    height: 160px;
  }
  .item-modal-v2-noimg-icon {
    width: 64px;
    height: 64px;
  }
  .item-modal-v2-noimg-icon i {
    font-size: 28px;
  }
  .item-modal-v2-info {
    padding: 14px 14px 8px;
  }
  .item-modal-v2-title {
    font-size: 1.05rem;
  }
  .item-modal-v2-section {
    padding: 0 14px;
  }
  .item-modal-v2-footer {
    padding: 12px 14px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    bottom: auto;
  }
  .item-modal-v2-qty-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .item-modal-v2-cart-btn {
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
    border-radius: 10px !important;
  }
  .item-modal-v2-size-option {
    padding: 10px 12px;
    border-radius: 10px;
  }
  .item-modal-v2-accordion {
    border-radius: 10px;
  }
  .item-modal-v2-accordion-header {
    padding: 11px 12px;
  }
  .item-modal-v2-accordion-body {
    padding: 4px 12px 12px;
  }
  .sd-item-shimmer__img {
    height: 180px;
  }
  .sd-item-shimmer__info {
    padding: 14px 14px 6px;
  }
  .sd-item-shimmer__section {
    padding: 8px 14px;
  }
}

/* =============================================
   ORDERING ALERTS POPUP (oa-* classes)
   Uses sd-modal shell — these style the inner content
   ============================================= */

/* --- Body wrapper --- */
.oa-body {
  padding: 4px 0 0;
}

/* --- Status badge (icon + label inline) --- */
.oa-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  margin-bottom: 14px;
  animation: oaFadeIn 0.3s ease;
}
@keyframes oaFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.oa-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 20px;
  flex-shrink: 0;
}
.oa-status-label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
/* --- Status color variants --- */
.oa-status--outside_hours,
.oa-status--close_store {
  background: #fff5f0;
}
.oa-status--outside_hours .oa-status-icon,
.oa-status--close_store .oa-status-icon {
  background: #FF6B00;
  color: #fff;
}
.oa-status--outside_hours .oa-status-label,
.oa-status--close_store .oa-status-label {
  color: #c2410c;
}
.oa-status--holiday {
  background: #fffbeb;
}
.oa-status--holiday .oa-status-icon {
  background: #f59e0b;
  color: #fff;
}
.oa-status--holiday .oa-status-label {
  color: #92400e;
}
.oa-status--pause_ordering {
  background: #fff7ed;
}
.oa-status--pause_ordering .oa-status-icon {
  background: #fb923c;
  color: #fff;
}
.oa-status--pause_ordering .oa-status-label {
  color: #9a3412;
}
.oa-status--website_disabled {
  background: #fef2f2;
}
.oa-status--website_disabled .oa-status-icon {
  background: #ef4444;
  color: #fff;
}
.oa-status--website_disabled .oa-status-label {
  color: #991b1b;
}
.oa-status--cart_other_store {
  background: #fff7ed;
}
.oa-status--cart_other_store .oa-status-icon {
  background: #f97316;
  color: #fff;
}
.oa-status--cart_other_store .oa-status-label {
  color: #9a3412;
}
.oa-status--out_of_range {
  background: #fef2f2;
}
.oa-status--out_of_range .oa-status-icon {
  background: #ef4444;
  color: #fff;
}
.oa-status--out_of_range .oa-status-label {
  color: #991b1b;
}
.oa-status--time_required {
  background: #eff6ff;
}
.oa-status--time_required .oa-status-icon {
  background: #3b82f6;
  color: #fff;
}
.oa-status--time_required .oa-status-label {
  color: #1e40af;
}
.oa-status--address_needed {
  background: #f0fdf4;
}
.oa-status--address_needed .oa-status-icon {
  background: #22c55e;
  color: #fff;
}
.oa-status--address_needed .oa-status-label {
  color: #166534;
}

/* --- Message text --- */
.oa-message {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0 0 4px;
  padding: 0 2px;
}

/* --- Next opening pill --- */
.oa-next-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #FF6B00;
  background: #fff5f0;
  border-radius: 20px;
  padding: 6px 14px;
  margin: 8px 0 4px;
}
.oa-next-open i {
  font-size: 15px;
}

/* --- Opening hours block --- */
.oa-hours {
  background: #f8f8f6;
  border: 1px solid #f0ede8;
  border-radius: 14px;
  padding: 0;
  text-align: left;
  margin-top: 12px;
  overflow: hidden;
}
.oa-hours-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #f0ede8;
}
.oa-hours-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.oa-hours-title i {
  font-size: 15px;
  color: #9ca3af;
}
.oa-hours-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  border: none;
  background: none;
  color: #FF6B00;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.oa-hours-toggle:hover {
  color: #E05E00;
}
.oa-hours-toggle i {
  font-size: 16px;
}

/* --- Hours rows --- */
.oa-hours-rows {
  padding: 4px 14px;
  max-height: 220px;
  overflow-y: auto;
}
.oa-hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #f0ede8;
  font-size: 13px;
}
.oa-hours-row:last-child {
  border-bottom: none;
}
.oa-hours-day {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.oa-hours-day-name {
  font-weight: 600;
  color: #374151;
}
.oa-hours-today {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: #FF6B00;
  border-radius: 4px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.oa-hours-time {
  text-align: right;
  color: #6b7280;
}
.oa-hours-slot {
  line-height: 1.5;
}
.oa-hours-sep {
  font-size: 11px;
  color: #9ca3af;
  margin: 0 2px;
}
.oa-hours-slot--svc {
  margin-top: 1px;
}
.oa-hours-svc-label {
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  background: #eef0f2;
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 3px;
}
.oa-hours-closed {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #ef4444;
  background: #fef2f2;
  border-radius: 4px;
  padding: 1px 6px;
}
/* Today row highlight */
.oa-hours-row--today {
  background: #fffaf5;
  margin: 0 -14px;
  padding: 6px 14px;
  border-radius: 0;
}
.oa-hours-row--today .oa-hours-day-name {
  color: #FF6B00;
}
/* Closed row dim */
.oa-hours-row--closed .oa-hours-day-name {
  color: #9ca3af;
}

/* --- Footer actions --- */
.oa-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* --- Unified button base --- */
.oa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 20px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.oa-btn:hover { text-decoration: none; }
.oa-btn:disabled { cursor: not-allowed; opacity: 0.65; }

/* Primary (filled orange) */
.oa-btn--primary {
  background: #FF6B00;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,107,0,0.2);
}
.oa-btn--primary:hover:not(:disabled) {
  background: #E05E00;
  box-shadow: 0 4px 14px rgba(255,107,0,0.28);
  transform: translateY(-1px);
}
.oa-btn--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(255,107,0,0.15);
}

/* Outline (orange border) */
.oa-btn--outline {
  background: transparent;
  color: #FF6B00;
  border: 1.5px solid #FF6B00;
}
.oa-btn--outline:hover:not(:disabled) {
  background: #FF6B00;
  color: #fff;
}

/* Ghost (subtle) */
.oa-btn--ghost {
  background: #f5f5f3;
  color: #555;
  border: 1px solid #e8e6e1;
}
.oa-btn--ghost:hover:not(:disabled) {
  background: #eeedea;
  color: #333;
  border-color: #d5d3ce;
}

/* Loading state */
.oa-btn--loading .oa-btn__label { visibility: hidden; }
.oa-btn--loading .oa-btn__spinner { display: block; }
.oa-btn__spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: oaSpin 0.6s linear infinite;
  position: absolute;
}
@keyframes oaSpin {
  to { transform: rotate(360deg); }
}

/* --- Dismiss link --- */
.oa-dismiss {
  display: inline-block;
  font-size: 13px;
  color: #9ca3af;
  text-decoration: none;
  margin-top: 4px;
  transition: color 0.15s ease;
}
.oa-dismiss:hover {
  color: #6b7280;
  text-decoration: underline;
}

/* =============================================
   SD ALERTS — Unified Inline Alert Cards
   Modern card-based alerts for merchant page
   (address needed, out of range, store closed, time required)
   ============================================= */
.sd-alerts {
  padding: 12px 0 4px 0;
}
.sd-alerts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 768px) {
  .sd-alerts__grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
  }
}
.sd-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  border-left: 4px solid transparent;
  animation: sdAlertSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sd-alert:hover {
  transform: translateY(-1px);
}
@keyframes sdAlertSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sd-alert__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 17px;
  flex-shrink: 0;
}
.sd-alert__body {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}
.sd-alert__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
.sd-alert__msg {
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.82;
}
.sd-alert__btn {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.sd-alert__btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

/* --- Error variant (red — out of range, critical) --- */
.sd-alert--error {
  background: #fef2f2;
  border-left-color: #ef4444;
  color: #7f1d1d;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.08);
}
.sd-alert--error .sd-alert__icon {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25);
}
.sd-alert--error .sd-alert__btn {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}
.sd-alert--error .sd-alert__btn:hover {
  background: rgba(239, 68, 68, 0.18);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

/* --- Warning variant (amber — time required, cart errors) --- */
.sd-alert--warn {
  background: #fffbeb;
  border-left-color: #f59e0b;
  color: #78350f;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08);
}
.sd-alert--warn .sd-alert__icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}
.sd-alert--warn .sd-alert__btn {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.sd-alert--warn .sd-alert__btn:hover {
  background: rgba(245, 158, 11, 0.22);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

/* --- Info variant (blue — address needed, neutral) --- */
.sd-alert--info {
  background: #eff6ff;
  border-left-color: #3b82f6;
  color: #1e3a5f;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.08);
}
.sd-alert--info .sd-alert__icon {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}
.sd-alert--info .sd-alert__btn {
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}
.sd-alert--info .sd-alert__btn:hover {
  background: rgba(59, 130, 246, 0.18);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

/* --- Closed variant (neutral grey/purple — store closed) --- */
.sd-alert--closed {
  background: #f5f3ff;
  border-left-color: #7c3aed;
  color: #3b1f6e;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.08);
}
.sd-alert--closed .sd-alert__icon {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}
.sd-alert--closed .sd-alert__btn {
  background: rgba(124, 58, 237, 0.1);
  color: #6d28d9;
}
.sd-alert--closed .sd-alert__btn:hover {
  background: rgba(124, 58, 237, 0.18);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
}

/* --- Mobile responsive --- */
@media (max-width: 575px) {
  .sd-alert {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 12px;
  }
  .sd-alert__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 15px;
  }
  .sd-alert__title {
    font-size: 12.5px;
  }
  .sd-alert__msg {
    font-size: 11.5px;
  }
  .sd-alert__btn {
    padding: 6px 12px;
    font-size: 11.5px;
  }
}

/* Legacy oa-banner compatibility (keep for any remaining references) */
.oa-banner { display: none; }

/* =============================================
   CHECKOUT PAGE V2 — Premium Classic UX
   ============================================= */

/* --- Page Background & Container --- */
/* Note: background was moved from inline style in checkout_layout.php to here */
.checkout-v2-page {
  background: #f7f6f3;
  min-height: 100vh;
  padding-top: 24px;
  padding-bottom: 40px;
}
.checkout-v2-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}

/* --- Progress Stepper --- */
.checkout-v2-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 28px;
  padding: 0 20px;
}
.checkout-v2-step {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.checkout-v2-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.3s ease;
  border: 2px solid #ddd;
  background: #fff;
  color: #bbb;
}
.checkout-v2-step.active .checkout-v2-step-circle {
  border-color: #FF6B00;
  background: #FF6B00;
  color: #fff;
  box-shadow: 0 2px 10px rgba(255,107,0,0.3);
}
.checkout-v2-step.completed .checkout-v2-step-circle {
  border-color: #FF6B00;
  background: #FF6B00;
  color: #fff;
}
.checkout-v2-step-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #bbb;
  white-space: nowrap;
  transition: color 0.3s;
}
.checkout-v2-step.active .checkout-v2-step-label {
  color: #1a1a1a;
}
.checkout-v2-step.completed .checkout-v2-step-label {
  color: #FF6B00;
}
.checkout-v2-step-line {
  width: 60px;
  height: 2px;
  background: #e5e5e5;
  margin: 0 12px;
  border-radius: 2px;
  transition: background 0.3s;
}
.checkout-v2-step-line.completed {
  background: #FF6B00;
}

/* --- Section Cards --- */
.checkout-v2-section {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #eceae5;
  margin-bottom: 16px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.checkout-v2-section:hover {
  border-color: #ddd;
}
.checkout-v2-section.section-completed {
  border-color: #FFD9B3;
}
.checkout-v2-section.section-error {
  border-color: #fecaca;
}

/* --- Section Header --- */
.checkout-v2-section-header {
  display: flex;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid #f5f3f0;
  gap: 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 16px 16px 0 0;
}
.checkout-v2-section-header:hover {
  background: #fdfcfa;
}
.checkout-v2-section-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: #fff;
  color: #FF6B00;
  transition: all 0.3s;
}
.checkout-v2-section.section-completed .checkout-v2-section-icon {
  background: #fff;
  color: #FF6B00;
}
.checkout-v2-section.section-error .checkout-v2-section-icon {
  background: #fef2f2;
  color: #ef4444;
}
.checkout-v2-section-title {
  flex: 1;
  min-width: 0;
}
.checkout-v2-section-title h6 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}
.checkout-v2-section-title p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: #999;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.checkout-v2-section-title .text-success {
  color: #FF6B00 !important;
}
.checkout-v2-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: all 0.3s;
}
.checkout-v2-badge-done {
  background: #f0f1f3;
  color: #4a5568;
}
.checkout-v2-badge-pending {
  background: #fff7ed;
  color: #ea580c;
}
.checkout-v2-badge-error {
  background: #fef2f2;
  color: #dc2626;
}
.checkout-v2-section-arrow {
  font-size: 13px;
  color: #ccc;
  flex-shrink: 0;
  transition: color 0.2s, transform 0.2s;
}
.checkout-v2-section-header:hover .checkout-v2-section-arrow {
  color: #999;
}

/* --- Section Body --- */
.checkout-v2-section-body {
  padding: 20px 22px;
}
.checkout-v2-section-body-compact {
  padding: 14px 22px;
}

/* --- Chevron sections override for checkout --- */
.checkout-v2-section .chevron-section {
  border-radius: 12px;
  border-color: #eceae5;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.checkout-v2-section .chevron-section:hover {
  border-color: #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.checkout-v2-section .chevron-section.selected {
  border-color: #FF6B00;
  border-left-width: 3px;
  background: #FFFAF5;
}

/* --- Delivery/Transaction Type Selector --- */
.checkout-v2-type-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.checkout-v2-type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: 2px solid #eceae5;
  border-radius: 12px;
  background: #fff;
  color: #666;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none !important;
}
.checkout-v2-type-btn:hover {
  border-color: #ccc;
  background: #fafaf8;
  color: #333;
}
.checkout-v2-type-btn.active {
  border-color: #FF6B00;
  background: #FFF5EB;
  color: #E05E00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1);
}
.checkout-v2-type-btn i {
  font-size: 20px;
}

/* --- Delivery Time Selector --- */
.checkout-v2-time-options {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.checkout-v2-time-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1.5px solid #eceae5;
  border-radius: 10px;
  background: #fff;
  color: #666;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.checkout-v2-time-btn:hover {
  border-color: #ccc;
}
.checkout-v2-time-btn.active {
  border-color: #FF6B00;
  background: #FFF5EB;
  color: #E05E00;
}

/* --- Info Row (Address, phone, etc.) --- */
.checkout-v2-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border: 1.5px solid #eceae5;
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none !important;
  color: inherit !important;
}
.checkout-v2-info-row:hover {
  border-color: #ddd;
  background: #fdfcfa;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.checkout-v2-info-row.completed {
  border-color: #FFD9B3;
  background: #FFFAF5;
}
.checkout-v2-info-row.has-error {
  border-color: #fecaca;
  background: #fff5f5;
}
.checkout-v2-info-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: #fff;
  color: #FF6B00;
}
.checkout-v2-info-row.completed .checkout-v2-info-icon {
  background: #fff;
  color: #FF6B00;
}
.checkout-v2-info-row.has-error .checkout-v2-info-icon {
  background: #fef2f2;
  color: #ef4444;
}
.checkout-v2-info-content {
  flex: 1;
  min-width: 0;
}
.checkout-v2-info-content .info-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.checkout-v2-info-content .info-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
}
.checkout-v2-info-content .info-sub {
  font-size: 0.76rem;
  color: #999;
  margin-top: 1px;
}
.checkout-v2-info-action {
  font-size: 0.78rem;
  font-weight: 600;
  color: #FF6B00;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background 0.2s;
}
.checkout-v2-info-row:hover .checkout-v2-info-action {
  background: #FFF0E0;
}

/* --- Address Form --- */
.checkout-v2-address-form .form-label-group {
  margin-bottom: 14px;
}
.checkout-v2-address-form .form-control {
  border-radius: 10px;
  border-color: #e5e5e5;
  padding: 10px 14px;
  font-size: 0.88rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.checkout-v2-address-form .form-control:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1);
}
.checkout-v2-address-form .custom-select {
  border-radius: 10px;
  border-color: #e5e5e5;
  padding: 10px 14px;
  font-size: 0.88rem;
}
.checkout-v2-address-form .custom-select:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1);
}

/* --- Address Label Pills --- */
.checkout-v2-label-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.checkout-v2-label-pills .btn {
  border-radius: 20px !important;
  padding: 6px 16px !important;
  font-size: 0.8rem !important;
  font-weight: 500;
  border: 1.5px solid #e5e5e5;
  background: #fff;
  color: #666;
  transition: all 0.2s;
}
.checkout-v2-label-pills .btn.active {
  border-color: #FF6B00;
  background: #FFF5EB;
  color: #E05E00;
}

/* =============================================
   SD Checkout Address — Modern Redesign (sd-co-addr-*)
   ============================================= */
/* --- Needs-Confirm section pulse border --- */
.sd-addr-needs-confirm {
  border-color: #FF6B00 !important;
  animation: sdAddrPulseBorder 2s ease-in-out infinite;
}
@keyframes sdAddrPulseBorder {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,0,0.25); }
  50% { box-shadow: 0 0 0 4px rgba(255,107,0,0.12); }
}

/* --- Confirm Banner --- */
.sd-co-addr-confirm-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFFAF5 100%);
  border: 1px solid #FFD9B3;
  margin-bottom: 16px;
}
.sd-co-addr-confirm-banner__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #FF6B00;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.sd-co-addr-confirm-banner__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 2px;
}
.sd-co-addr-confirm-banner__text {
  font-size: 0.78rem;
  color: #b45309;
  line-height: 1.45;
}

/* --- Toolbar --- */
.sd-co-addr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sd-co-addr-toolbar__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sd-co-addr-toolbar__actions {
  display: flex;
  gap: 8px;
}
.sd-co-addr-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: transparent;
  color: #666;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.sd-co-addr-toolbar__btn:hover {
  border-color: #bbb;
  color: #333;
  background: #fafafa;
}
.sd-co-addr-toolbar__btn--saved {
  border-color: #FF6B00;
  color: #FF6B00;
}
.sd-co-addr-toolbar__btn--saved:hover {
  background: #FFF5EB;
  border-color: #FF6B00;
  color: #E05E00;
}

/* --- Current Address Bar --- */
.sd-co-addr-current {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f9f8f6;
  border: 1px solid #eceae5;
  margin-bottom: 16px;
}
.sd-co-addr-current__pin {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #FFF5EB;
  color: #FF6B00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.sd-co-addr-current__text {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-co-addr-current__change {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid #FF6B00;
  background: transparent;
  color: #FF6B00;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.sd-co-addr-current__change:hover {
  background: #FFF5EB;
}

/* --- Saved Address Card --- */
.sd-co-addr-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f9f8f6;
  border: 1px solid #eceae5;
  margin-bottom: 10px;
}
.sd-co-addr-card__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #FFF5EB;
  color: #FF6B00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.sd-co-addr-card__body {
  flex: 1;
  min-width: 0;
}
.sd-co-addr-card__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #FF6B00;
  background: #FFF5EB;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 5px;
}
.sd-co-addr-card__label i { font-size: 8px; }
.sd-co-addr-card__text {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
  margin-bottom: 2px;
}
.sd-co-addr-card__sub {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.35;
}
.sd-co-addr-card__sub i {
  font-size: 10px;
  margin-right: 3px;
  color: #aaa;
}
.sd-co-addr-card__actions {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
}

/* --- Action Buttons (edit/delete) --- */
.sd-co-addr-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
  color: #777;
}
.sd-co-addr-btn:hover {
  border-color: #ccc;
  background: #fafafa;
}
.sd-co-addr-btn--edit:hover {
  border-color: #FF6B00;
  color: #FF6B00;
  background: #FFF5EB;
}
.sd-co-addr-btn--delete:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fef2f2;
}

/* --- Links row --- */
.sd-co-addr-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}
.sd-co-addr-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  border: none;
  background: none;
  color: #FF6B00;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s;
}
.sd-co-addr-link:hover {
  color: #E05E00;
}
.sd-co-addr-link i {
  font-size: 11px;
}

/* --- Form --- */
.sd-co-addr-form {
  margin-top: 4px;
}
.sd-co-addr-form__row {
  margin-bottom: 14px;
}
.sd-co-addr-form__row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* --- Field --- */
.sd-co-addr-field__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sd-co-addr-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.sd-co-addr-field__req {
  color: #FF6B00;
  font-weight: 700;
}
.sd-co-addr-field__info {
  border: none;
  background: none;
  color: #aaa;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  transition: color 0.2s;
}
.sd-co-addr-field__info:hover {
  color: #FF6B00;
}

/* --- Input --- */
.sd-co-addr-field__input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  color: #1a1a1a;
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.sd-co-addr-field__input::placeholder {
  color: #bbb;
}
.sd-co-addr-field__input:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1);
}

/* --- Street + Number row --- */
.sd-co-addr-field__row {
  display: flex;
  gap: 10px;
}
.sd-co-addr-field__input--street {
  flex: 3;
}
.sd-co-addr-field__input--nr {
  flex: 1;
  min-width: 70px;
  max-width: 100px;
}

/* --- Select --- */
.sd-co-addr-field__select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid #e0e0e0;
  background-color: #fff;
  color: #1a1a1a;
  font-size: 0.88rem;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  padding-right: 40px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.sd-co-addr-field__select:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1);
}

/* --- Textarea --- */
.sd-co-addr-field__textarea {
  width: 100%;
  min-height: 70px;
  max-height: 150px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  color: #1a1a1a;
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.sd-co-addr-field__textarea::placeholder {
  color: #bbb;
}
.sd-co-addr-field__textarea:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1);
}

/* --- Address Label Pills --- */
.sd-co-addr-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sd-co-addr-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  color: #666;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  margin: 0;
}
.sd-co-addr-pill i {
  font-size: 12px;
}
.sd-co-addr-pill input[type="radio"] { display: none; }
.sd-co-addr-pill:hover {
  border-color: #ccc;
  background: #fafafa;
}
.sd-co-addr-pill--active {
  border-color: #FF6B00 !important;
  background: #FFF5EB !important;
  color: #E05E00 !important;
}

/* --- Save Button --- */
.sd-co-addr-save {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: #FF6B00;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  margin-top: 6px;
  overflow: hidden;
}
.sd-co-addr-save:hover {
  background: #E05E00;
  box-shadow: 0 4px 14px rgba(255,107,0,0.3);
  transform: translateY(-1px);
}
.sd-co-addr-save__label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sd-co-addr-save__loader {
  display: none;
}
.sd-co-addr-save--loading .sd-co-addr-save__label {
  visibility: hidden;
}
.sd-co-addr-save--loading .sd-co-addr-save__loader {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}
.sd-co-addr-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sdAddrSpin 0.7s linear infinite;
}
@keyframes sdAddrSpin {
  to { transform: rotate(360deg); }
}

/* --- Pulse animation for save button --- */
.sd-co-addr-save--pulse {
  animation: sdAddrSavePulse 1.8s ease-in-out infinite;
}
@keyframes sdAddrSavePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,0,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(255,107,0,0); }
}
.sd-co-addr-save--pulse:hover {
  animation: none;
}

/* --- Mobile responsive --- */
@media (max-width: 575.98px) {
  .sd-co-addr-form__row--half {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sd-co-addr-card {
    padding: 12px;
  }
  .sd-co-addr-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* --- Autocomplete Dropdown --- */
.sd-co-addr-autocomplete {
  position: relative;
}
.sd-co-addr-ac {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 10px 10px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.sd-co-addr-ac__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.84rem;
  color: #333;
}
.sd-co-addr-ac__item:hover,
.sd-co-addr-ac__item--active {
  background: #FFF5EB;
}
.sd-co-addr-ac__icon {
  color: #FF6B00;
  font-size: 12px;
  flex-shrink: 0;
}
.sd-co-addr-ac__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-co-addr-ac-loading {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* --- END SD Checkout Address --- */

/* --- Payment Methods --- */
.checkout-v2-payment-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid #eceae5;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.checkout-v2-payment-item:hover {
  border-color: #ddd;
  background: #fdfcfa;
}
.checkout-v2-payment-item.selected {
  border-color: #FF6B00;
  background: #FFFAF5;
  box-shadow: 0 0 0 2px rgba(255,107,0,0.08);
}
.checkout-v2-payment-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f8f6;
  flex-shrink: 0;
  overflow: hidden;
}
.checkout-v2-payment-logo img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.checkout-v2-payment-info {
  flex: 1;
  min-width: 0;
}
.checkout-v2-payment-info .payment-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1a1a;
}
.checkout-v2-payment-info .payment-detail {
  font-size: 0.76rem;
  color: #999;
}
.checkout-v2-payment-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.checkout-v2-payment-item.selected .checkout-v2-payment-check {
  border-color: #FF6B00;
  background: #FF6B00;
  color: #fff;
}

/* --- Promo Section --- */
.checkout-v2-promo-applied {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #FFF5EB;
  border: 1.5px solid #FFD9B3;
  border-radius: 10px;
  margin-bottom: 8px;
}
.checkout-v2-promo-applied .promo-icon {
  color: #FF6B00;
  font-size: 18px;
}
.checkout-v2-promo-applied .promo-text {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: #E05E00;
}
.checkout-v2-promo-applied .promo-remove {
  font-size: 0.75rem;
  font-weight: 600;
  color: #ef4444;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}
.checkout-v2-promo-applied .promo-remove:hover {
  background: #fef2f2;
}

/* --- Tips Section — Card + Chips + Custom Input --- */
.sd-tip-card {
  position: relative;
  overflow: hidden;
  padding: 12px 14px;
  border: 1.5px solid #eceae5;
  border-radius: 12px;
  margin-bottom: 10px;
  background: #fff;
  transition: border-color 0.3s ease;
}
.sd-tip-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sd-tip-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFF5EB 0%, #FFECE0 100%);
  color: #FF6B00;
  flex-shrink: 0;
}
.sd-tip-icon-wrap svg {
  width: 14px;
  height: 14px;
}
.sd-tip-header-text {
  display: flex;
  flex-direction: column;
}
.sd-tip-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
}
.sd-tip-subtitle {
  font-size: 0.72rem;
  color: #999;
  line-height: 1.3;
}
.sd-tip-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sd-tip-chip {
  position: relative;
  cursor: pointer;
  margin: 0;
}
.sd-tip-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sd-tip-chip__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1.5px solid #e5e5e5;
  background: #fafafa;
  color: #555;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  white-space: nowrap;
}
.sd-tip-chip__label:hover {
  border-color: #ccc;
  background: #f5f5f5;
}
.sd-tip-chip--active .sd-tip-chip__label {
  border-color: #FF6B00;
  background: #FFF5EB;
  color: #E05E00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08);
  transform: scale(1.04);
}
.sd-tip-chip--active.sd-tip-chip--zero .sd-tip-chip__label {
  border-color: #d0d0d0;
  background: #f5f5f5;
  color: #888;
  box-shadow: none;
  transform: scale(1);
}
.sd-tip-custom {
  margin-top: 10px;
  animation: sdTipCustomIn 0.3s ease-out;
}
@keyframes sdTipCustomIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sd-tip-custom__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sd-tip-custom__input-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid #e5e5e5;
  border-radius: 10px;
  background: #fafafa;
  padding: 0 10px;
  height: 34px;
  flex: 1;
  max-width: 140px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-tip-custom__input-wrap:focus-within {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08);
  background: #fff;
}
.sd-tip-custom__currency {
  font-size: 0.78rem;
  font-weight: 600;
  color: #999;
  margin-right: 4px;
  flex-shrink: 0;
}
.sd-tip-custom__input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a1a1a;
  width: 100%;
  text-align: center;
}
.sd-tip-custom__input::placeholder {
  color: #ccc;
  font-weight: 400;
}
.sd-tip-custom__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: #FF6B00;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.sd-tip-custom__btn:hover {
  background: #e86000;
}
.sd-tip-custom__btn:active {
  transform: scale(0.97);
}
.sd-tip-custom__btn--loading .sd-tip-custom__btn-label {
  visibility: hidden;
}
.sd-tip-custom__btn--loading .sd-tip-custom__btn-spinner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sdTipSpin 0.6s linear infinite;
}
@keyframes sdTipSpin {
  to { transform: rotate(360deg); }
}
/* Hearts animation */
.sd-tip-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.sd-tip-heart {
  position: absolute;
  bottom: -10px;
  font-size: 18px;
  color: #FF6B00;
  opacity: 0;
  animation: sdTipHeartFloat 2s ease-out forwards;
  animation-delay: calc(var(--i) * 0.12s);
}
.sd-tip-heart:nth-child(odd) { color: #ff4d6d; }
.sd-tip-heart:nth-child(1)  { left: 8%; }
.sd-tip-heart:nth-child(2)  { left: 18%; font-size: 14px; }
.sd-tip-heart:nth-child(3)  { left: 30%; font-size: 22px; }
.sd-tip-heart:nth-child(4)  { left: 42%; }
.sd-tip-heart:nth-child(5)  { left: 55%; font-size: 16px; }
.sd-tip-heart:nth-child(6)  { left: 65%; font-size: 20px; }
.sd-tip-heart:nth-child(7)  { left: 75%; }
.sd-tip-heart:nth-child(8)  { left: 85%; font-size: 14px; }
.sd-tip-heart:nth-child(9)  { left: 12%; font-size: 12px; }
.sd-tip-heart:nth-child(10) { left: 50%; font-size: 24px; }
.sd-tip-heart:nth-child(11) { left: 35%; font-size: 15px; }
.sd-tip-heart:nth-child(12) { left: 90%; font-size: 13px; }
@keyframes sdTipHeartFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0.5) rotate(0deg); }
  20%  { opacity: 1; transform: translateY(-30px) scale(1) rotate(-10deg); }
  60%  { opacity: 0.8; transform: translateY(-80px) scale(1.1) rotate(15deg); }
  100% { opacity: 0; transform: translateY(-140px) scale(0.6) rotate(-5deg); }
}
/* Danke message */
.sd-tip-thankyou {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 12px;
  background: linear-gradient(135deg, #fff0e6 0%, #fff8f0 100%);
  border: 1.5px solid #fde0c2;
  border-radius: 10px;
  width: 100%;
}
.sd-tip-thankyou-icon {
  font-size: 14px;
  color: #FF6B00;
  animation: sdTipPulse 0.6s ease-in-out infinite alternate;
}
.sd-tip-thankyou-text {
  font-size: 0.76rem;
  font-weight: 600;
  color: #E05E00;
}
@keyframes sdTipPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.2); }
}
.sd-tip-thankyou-enter-active {
  animation: sdTipThankIn 0.4s ease-out;
}
.sd-tip-thankyou-leave-active {
  animation: sdTipThankOut 0.3s ease-in;
}
@keyframes sdTipThankIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sdTipThankOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

/* --- Digital Wallet --- */
.sd-wallet {
  padding: 12px 14px;
  border: 1.5px solid #eceae5;
  border-radius: 12px;
  margin-bottom: 12px;
  background: #fff;
}
.sd-wallet__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sd-wallet__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0fdf4;
  color: #22c55e;
  flex-shrink: 0;
}
.sd-wallet__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sd-wallet__balance {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}
.sd-wallet__label {
  font-size: 0.72rem;
  color: #999;
  line-height: 1.3;
}
.sd-wallet__toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
}
.sd-wallet__toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sd-wallet__toggle-track {
  width: 40px;
  height: 22px;
  border-radius: 12px;
  background: #ddd;
  position: relative;
  transition: background 0.25s;
}
.sd-wallet__toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.25s;
}
.sd-wallet__toggle input:checked + .sd-wallet__toggle-track {
  background: #22c55e;
}
.sd-wallet__toggle input:checked + .sd-wallet__toggle-track::after {
  transform: translateX(18px);
}
.sd-wallet__toggle--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sd-wallet__msg {
  margin-top: 8px;
  padding: 6px 10px;
  background: #fafafa;
  border-radius: 8px;
  font-size: 0.75rem;
  color: #666;
  line-height: 1.4;
}

/* --- COD Change Section --- */
.sd-cod-section {
  margin-top: 14px;
  padding: 12px 14px;
  background: #fafafa;
  border-radius: 12px;
  border: 1.5px solid #eceae5;
}
.sd-cod-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.sd-cod-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1.5px solid #e5e5e5;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
}
.sd-cod-chip:hover {
  border-color: #ccc;
  background: #f5f5f5;
}
.sd-cod-chip--active {
  border-color: #FF6B00;
  background: #FFF5EB;
  color: #E05E00;
}
.sd-cod-input {
  border-radius: 10px !important;
  border: 1.5px solid #e5e5e5 !important;
  font-size: 0.82rem;
  padding: 8px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-cod-input:focus {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08);
}

/* --- Phone Change Modal --- */
#changephoneModal .modal-content,
#verifyCodeModal .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}
#changephoneModal .modal-header,
#verifyCodeModal .modal-header {
  border-bottom: 1px solid #f0ede8;
  padding: 14px 20px;
}
#changephoneModal .modal-header .modal-title,
#verifyCodeModal .modal-header .modal-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1a1a;
}
#changephoneModal .modal-body,
#verifyCodeModal .modal-body {
  padding: 20px;
}
#changephoneModal .modal-body h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1a1a;
}
#changephoneModal .modal-body h6,
#verifyCodeModal .modal-body h6 {
  font-size: 0.8rem;
  font-weight: 400;
  color: #777;
  line-height: 1.5;
}
#verifyCodeModal .modal-body p.bold {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}
#changephoneModal .modal-body .form-control,
#verifyCodeModal .modal-body .form-control {
  border-radius: 10px;
  border: 1.5px solid #e5e5e5;
  padding: 10px 14px;
  font-size: 0.86rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#changephoneModal .modal-body .form-control:focus,
#verifyCodeModal .modal-body .form-control:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08);
}
#changephoneModal .alert-warning,
#verifyCodeModal .alert-warning {
  background: #fff5f5;
  border: 1.5px solid #fecaca;
  border-radius: 10px;
  color: #dc2626;
  font-size: 0.78rem;
}
#changephoneModal .alert-warning p,
#verifyCodeModal .alert-warning p {
  font-size: 0.78rem;
}
#changephoneModal .modal-footer,
#verifyCodeModal .modal-footer {
  border-top: 1px solid #f0ede8;
  padding: 12px 20px;
  gap: 8px;
}
#changephoneModal .modal-footer .btn,
#verifyCodeModal .modal-footer .btn {
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 16px;
}
#changephoneModal .modal-footer .btn-black,
#verifyCodeModal .modal-footer .btn-black {
  background: #f5f5f5;
  color: #555;
  border: 1.5px solid #e5e5e5;
}
#changephoneModal .modal-footer .btn-black:hover {
  background: #eee;
}
#changephoneModal .modal-footer .btn-green,
#verifyCodeModal .modal-footer .btn-green {
  background: #FF6B00;
  color: #fff;
  border: none;
}
#changephoneModal .modal-footer .btn-green:hover,
#verifyCodeModal .modal-footer .btn-green:hover {
  background: #e86000;
}
#changephoneModal .modal-footer .border,
#verifyCodeModal .modal-footer .border {
  border: none !important;
}
#verifyCodeModal .modal-body a u {
  color: #FF6B00;
  font-size: 0.78rem;
  font-weight: 600;
}

/* --- Utensils Toggle --- */
.checkout-v2-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1.5px solid #eceae5;
  border-radius: 12px;
  margin-bottom: 10px;
}
.checkout-v2-toggle-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1a1a;
}
.checkout-v2-toggle-label small {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  color: #999;
  margin-top: 2px;
}

/* --- Order Summary (Right Panel) --- */
.checkout-v2-summary-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #eceae5;
  overflow: hidden;
}
.checkout-v2-summary-card > .card-body {
  padding: 16px;
  line-height: 1.5;
}
.checkout-v2-summary-card .sticky-cart {
  position: static !important;
  height: auto !important;
  overflow: visible !important;
}
.checkout-v2-summary-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f5f3f0;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 16px 16px 0 0;
}
.checkout-v2-summary-header .merchant-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid #f0ede8;
}
.checkout-v2-summary-header .merchant-logo img,
.checkout-v2-summary-header .merchant-logo .el-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.checkout-v2-summary-header .merchant-info {
  flex: 1;
  min-width: 0;
}
.checkout-v2-summary-header .merchant-info h6 {
  margin: 0;
  font-weight: 600;
  font-size: 0.82rem;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.checkout-v2-summary-header .merchant-info p {
  margin: 1px 0 0;
  font-size: 0.7rem;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Cart Items in summary --- */
.checkout-v2-cart-items {
  padding: 14px 20px;
}
.checkout-v2-cart-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f3f0;
}
.checkout-v2-cart-item:last-child {
  border-bottom: none;
}
.checkout-v2-cart-item-img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f5f3f0;
}
.checkout-v2-cart-item-img img,
.checkout-v2-cart-item-img .el-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.checkout-v2-cart-item-details {
  flex: 1;
  min-width: 0;
}
.checkout-v2-cart-item-details .item-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
  line-height: 1.3;
}
.checkout-v2-cart-item-details .item-size {
  font-size: 0.72rem;
  color: #999;
}
.checkout-v2-cart-item-price {
  text-align: right;
  flex-shrink: 0;
}
.checkout-v2-cart-item-price .price {
  font-size: 0.84rem;
  font-weight: 600;
  color: #1a1a1a;
}
.checkout-v2-cart-item-price .qty {
  font-size: 0.72rem;
  color: #999;
}

/* --- Summary Totals --- */
.checkout-v2-summary-totals {
  padding: 14px 20px;
  border-top: 1px solid #f0ede8;
  background: #fdfcfa;
}
.checkout-v2-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 0.82rem;
  color: #666;
}
.checkout-v2-summary-row.total-row {
  padding: 12px 0 4px;
  margin-top: 8px;
  border-top: 2px solid #1a1a1a;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
}
.checkout-v2-summary-row .discount-value {
  color: #FF6B00;
  font-weight: 600;
}

/* --- Place Order Button --- */
.checkout-v2-place-order {
  padding: 16px 20px;
  border-top: 1px solid #f0ede8;
}
.checkout-v2-place-order .btn-place-order {
  width: 100%;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  background: #FF6B00;
  border: none;
  color: #fff;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.checkout-v2-place-order .btn-place-order:hover:not(:disabled) {
  background: #E05E00;
  box-shadow: 0 6px 20px rgba(255,107,0,0.35);
  transform: translateY(-1px);
}
.checkout-v2-place-order .btn-place-order:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.checkout-v2-place-order .btn-place-order.loading .label {
  visibility: hidden;
}

/* --- Error/Warning Banner --- */
.checkout-v2-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  line-height: 1.5;
}
.checkout-v2-alert-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}
.checkout-v2-alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}
.checkout-v2-alert-success {
  background: #FFF0E0;
  border: 1px solid #FFD9B3;
  color: #E05E00;
}
.checkout-v2-alert i {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- Points Section --- */
.checkout-v2-points-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fffbeb;
  border: 1.5px solid #fef3c7;
  border-radius: 12px;
  margin-bottom: 10px;
}
.checkout-v2-points-row i {
  font-size: 20px;
  color: #f59e0b;
}
.checkout-v2-points-row .points-info {
  flex: 1;
}
.checkout-v2-points-row .points-info .points-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #92400e;
}
.checkout-v2-points-row .points-info .points-detail {
  font-size: 0.75rem;
  color: #b45309;
}

/* --- Section Divider --- */
.checkout-v2-divider {
  height: 1px;
  background: #f0ede8;
  margin: 16px 0;
}

/* --- Form Section Label --- */
.checkout-v2-form-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

/* --- Map Container --- */
.checkout-v2-map-wrap {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1.5px solid #eceae5;
}
.checkout-v2-map-wrap .map-small {
  border-radius: 0;
}

/* --- Saved Address Card --- */
.checkout-v2-saved-address {
  padding: 12px 14px;
  border: 1px solid #f0ede8;
  border-radius: 12px;
  background: #fafaf8;
  margin-bottom: 10px;
}
.checkout-v2-saved-address .address-label-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #FFF0E0;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #E05E00;
  margin-bottom: 6px;
}
.checkout-v2-saved-address .address-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
  margin-bottom: 2px;
}
.checkout-v2-saved-address .address-detail {
  font-size: 0.72rem;
  color: #888;
  line-height: 1.35;
}
.checkout-v2-saved-address .address-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.checkout-v2-saved-address .address-actions .btn {
  font-size: 0.78rem;
  padding: 4px 12px;
  border-radius: 8px;
}

/* --- Checkout Layout Top Nav --- */
.checkout-v2-topnav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #f0ede8;
  padding: 14px 0;
}
.checkout-v2-topnav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.checkout-v2-topnav-spacer {
  width: 40px;
  flex-shrink: 0;
}
.checkout-v2-topnav .sd-header-logo-group {
  flex: 1;
  justify-content: center;
}
.checkout-v2-topnav .top-logo img {
  max-height: 32px;
  width: auto;
  object-fit: contain;
}

/* --- Booking Section (Dine-in) --- */
.checkout-v2-booking-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.checkout-v2-booking-form label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
}

/* --- Modal improvements --- */
.checkout-v2-modal .modal-content {
  border-radius: 18px;
  border: none;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.checkout-v2-section .modal,
.checkout-v2-page .modal {
  overflow: visible !important;
  position: fixed !important;
}
.checkout-v2-page .modal-backdrop {
  z-index: 1040 !important;
}
.checkout-v2-page .modal {
  z-index: 1050 !important;
}
.checkout-v2-modal .modal-header {
  border-bottom: 1px solid #f0ede8;
  padding: 18px 22px;
}
.checkout-v2-modal .modal-header .modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1a1a;
}
.checkout-v2-modal .modal-body {
  padding: 22px;
}
.checkout-v2-modal .modal-footer {
  border-top: 1px solid #f0ede8;
  padding: 16px 22px;
}
.checkout-v2-modal .modal-footer .btn-green {
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 700;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
  .checkout-v2-stepper {
    gap: 0;
    padding: 0 10px;
  }
  .checkout-v2-step-line {
    width: 30px;
    margin: 0 6px;
  }
  .checkout-v2-step-label {
    font-size: 0.72rem;
  }
}
@media (max-width: 575.98px) {
  .checkout-v2-page {
    padding-top: 14px;
    padding-bottom: 24px;
  }
  .checkout-v2-stepper {
    margin-bottom: 18px;
  }
  .checkout-v2-step-circle {
    width: 30px;
    height: 30px;
    font-size: 0.74rem;
  }
  .checkout-v2-step-label {
    display: none;
  }
  .checkout-v2-step-line {
    width: 24px;
    margin: 0 4px;
  }
  .checkout-v2-section {
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .checkout-v2-section-header {
    padding: 14px 16px;
    gap: 10px;
  }
  .checkout-v2-section-icon {
    width: 34px;
    height: 34px;
    font-size: 16px;
    border-radius: 10px;
  }
  .checkout-v2-section-body {
    padding: 16px;
  }
  .checkout-v2-info-row {
    padding: 12px 14px;
    gap: 10px;
  }
  .checkout-v2-type-selector {
    flex-direction: column;
    gap: 8px;
  }
  .checkout-v2-summary-card {
    border-radius: 12px;
  }
}

/* --- Checkout V2 Animations --- */
/* NOTE: Do NOT use transform-based animations on sections containing Bootstrap modals.
   CSS transform creates a new stacking context which traps position:fixed modals. 
   Using opacity-only fade instead. */
@keyframes checkout-v2-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Checkout V2 — focus ring for inputs --- */
.checkout-v2-section-body .form-control:focus,
.checkout-v2-section-body .custom-select:focus,
.checkout-v2-address-form .form-control:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1);
  outline: none;
}

/* --- Checkout V2 — btn-green overrides in checkout --- */
.checkout-v2-page .btn-green,
.checkout-v2-section .btn-green {
  background: #FF6B00;
  border-color: #FF6B00;
  color: #fff;
  transition: all 0.25s;
}
.checkout-v2-page .btn-green:hover:not(:disabled),
.checkout-v2-section .btn-green:hover:not(:disabled) {
  background: #E05E00;
  border-color: #E05E00;
  box-shadow: 0 4px 14px rgba(255,107,0,0.3);
  transform: translateY(-1px);
}
.checkout-v2-page .btn-green:disabled,
.checkout-v2-section .btn-green:disabled {
  background: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Checkout V2 — text-green utility --- */
.checkout-v2-page .text-green,
.checkout-v2-section .text-green {
  color: #FF6B00 !important;
}

/* --- Checkout V2 — el-radio override within saved address --- */
.checkout-v2-saved-address .el-radio {
  align-items: flex-start;
}
.checkout-v2-saved-address .el-radio__label {
  white-space: normal;
  line-height: 1.5;
}

/* --- Checkout V2 — section link style a tags --- */
.checkout-v2-section-header,
.checkout-v2-section-header:hover {
  text-decoration: none !important;
  color: inherit !important;
}

/* --- Checkout V2 — mobile Place Order sticky --- */
@media (max-width: 991.98px) {
  .checkout-v2-page .btn-green.w-100 {
    position: relative;
    z-index: 10;
  }
}

/* --- Checkout Cart Toggle (collapsed summary) --- */
.checkout-cart-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  margin-bottom: 6px;
  border: 1.5px solid #f0ede8;
  border-radius: 12px;
  background: #fdfcfa;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.2s;
}
.checkout-cart-toggle:hover {
  border-color: #ddd;
  background: #faf9f6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.checkout-cart-toggle-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: #fff;
  color: #FF6B00;
  flex-shrink: 0;
}
.checkout-cart-toggle-arrow {
  font-size: 12px;
  color: #bbb;
  transition: transform 0.3s ease;
}
.checkout-cart-toggle-arrow.rotated {
  transform: rotate(180deg);
}

/* --- Checkout Cart Items Collapse --- */
.checkout-cart-items-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.checkout-cart-items-collapse.expanded {
  max-height: 2000px;
  overflow: visible;
}

/* --- Newsletter Subscription Card --- */
.checkout-newsletter-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 12px;
  background: linear-gradient(135deg, #fff8f0 0%, #fff5eb 100%);
  border: 1.5px solid #fde0c2;
  border-radius: 12px;
  transition: border-color 0.2s;
}
.checkout-newsletter-card:hover {
  border-color: #FFD9B3;
}
.checkout-newsletter-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.checkout-newsletter-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #FF6B00;
  font-size: 14px;
  flex-shrink: 0;
}
.checkout-newsletter-text {
  flex: 1;
  min-width: 0;
}
.checkout-newsletter-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}
.checkout-newsletter-desc {
  font-size: 0.72rem;
  color: #999;
  margin-top: 1px;
  line-height: 1.35;
}

/* --- Elegant Switch Toggle --- */
.checkout-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}
.checkout-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.checkout-switch-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ddd;
  border-radius: 24px;
  transition: all 0.3s ease;
}
.checkout-switch-slider:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.checkout-switch input:checked + .checkout-switch-slider {
  background: linear-gradient(135deg, #FF6B00, #E05E00);
  box-shadow: 0 0 8px rgba(255,107,0,0.25);
}
.checkout-switch input:checked + .checkout-switch-slider:before {
  transform: translateX(20px);
}
.checkout-switch input:focus + .checkout-switch-slider {
  box-shadow: 0 0 0 3px rgba(255,107,0,0.15);
}

/* =============================================
   SD PAYMENT MODAL — Unified Checkout Payment Popup
   ============================================= */

/* --- Modal Shell --- */
.sd-pay-modal {
  z-index: 1055 !important;
  background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.sd-pay-modal__dialog { max-width: 480px; margin: 1.75rem auto; }
.sd-pay-modal__content {
  border-radius: 20px;
  border: none;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  overflow: hidden;
}

/* --- Modal Header --- */
.sd-pay-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid #f0ede8;
}
.sd-pay-modal__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.sd-pay-modal__header-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #FF6B00, #E05E00);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(255,107,0,0.25);
}
.sd-pay-modal__header-text { min-width: 0; }
.sd-pay-modal__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
}
.sd-pay-modal__subtitle {
  font-size: 0.78rem;
  color: #888;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-pay-modal__close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #f5f3ef;
  color: #888;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.sd-pay-modal__close:hover {
  background: #ece9e4;
  color: #555;
  transform: rotate(90deg);
}

/* --- Modal Body --- */
.sd-pay-modal__body {
  padding: 20px 22px 24px;
  max-height: 68vh;
  overflow-y: auto;
  position: relative;
  scroll-behavior: smooth;
}
.sd-pay-modal__body::-webkit-scrollbar { width: 4px; }
.sd-pay-modal__body::-webkit-scrollbar-track { background: transparent; }
.sd-pay-modal__body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* --- Skeleton Loading --- */
.sd-pay-skel { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.sd-pay-skel__item {
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f5f3ef 25%, #ece9e4 50%, #f5f3ef 75%);
  background-size: 400% 100%;
  animation: sdPayShimmer 1.4s ease infinite;
}
@keyframes sdPayShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* --- Section Labels --- */
.sd-pay-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sd-pay-section-label__close {
  color: #999;
  font-size: 14px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.15s;
}
.sd-pay-section-label__close:hover {
  background: #f0ede8;
  color: #555;
  text-decoration: none;
}

/* --- Payment List Container --- */
.sd-pay-list { display: flex; flex-direction: column; gap: 8px; }

/* --- Payment Items --- */
.sd-pay-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1.5px solid #eceae5;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: all 0.22s ease;
  position: relative;
}
.sd-pay-item:hover {
  border-color: #ddd;
  background: #fdfcfa;
}
.sd-pay-item--active {
  border-color: #FF6B00;
  background: #FFFAF5;
  box-shadow: 0 0 0 2px rgba(255,107,0,0.08);
}
.sd-pay-item--new {
  border-style: dashed;
  border-color: #e0ddd8;
}
.sd-pay-item--new:hover {
  border-color: #FF6B00;
  border-style: solid;
  background: #FFFAF5;
}

/* --- Radio Dot --- */
.sd-pay-item__radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-pay-item__radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background: #fff;
  transition: all 0.2s ease;
  position: relative;
}
.sd-pay-item__radio-dot--on {
  border-color: #FF6B00;
  background: #FF6B00;
}
.sd-pay-item__radio-dot--on::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* --- Payment Item Parts --- */
.sd-pay-item__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f5f3ef;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: #555;
}
.sd-pay-item__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.sd-pay-item__body {
  flex: 1;
  min-width: 0;
}
.sd-pay-item__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
}
.sd-pay-item__fee {
  font-size: 0.72rem;
  font-weight: 400;
  color: #999;
  margin-left: 2px;
}
.sd-pay-item__detail {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.3;
  margin-top: 2px;
}
.sd-pay-item__detail--hint {
  color: #FF6B00;
  font-weight: 500;
}
.sd-pay-item__arrow {
  color: #ccc;
  font-size: 12px;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.sd-pay-item--new:hover .sd-pay-item__arrow {
  transform: translateX(2px);
  color: #FF6B00;
}

/* --- Action Menu (Vue-based) --- */
.sd-pay-item__actions {
  position: relative;
  flex-shrink: 0;
}
.sd-pay-actions-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #999;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.sd-pay-actions-btn:hover {
  background: #f0ede8;
  color: #555;
}
.sd-pay-actions-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  min-width: 190px;
  background: #fff;
  border: 1px solid #eceae5;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.14);
  padding: 6px 0;
  margin-top: 4px;
}
.sd-pay-actions-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.82rem;
  color: #333;
  text-decoration: none;
  transition: background 0.15s;
}
.sd-pay-actions-menu__item:hover {
  background: #f8f7f5;
  text-decoration: none;
  color: #333;
}
.sd-pay-actions-menu__item--danger { color: #e53e3e; }
.sd-pay-actions-menu__item--danger:hover {
  background: #fef2f2;
  color: #e53e3e;
}
.sd-pay-actions-menu__item i {
  font-size: 13px;
  width: 16px;
  text-align: center;
}

/* --- Menu Fade Transition --- */
.sd-pay-menu-fade-enter-active,
.sd-pay-menu-fade-leave-active {
  transition: opacity 0.18s, transform 0.18s;
}
.sd-pay-menu-fade-enter-from,
.sd-pay-menu-fade-leave-to {
  opacity: 0;
  transform: translateY(-6px);
}

/* --- Add Button --- */
.sd-pay-add-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 2px dashed #e0ddd8;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  transition: all 0.22s;
}
.sd-pay-add-btn:hover {
  border-color: #FF6B00;
  background: #FFFAF5;
}
.sd-pay-add-btn__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #FFF5EB;
  color: #FF6B00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.sd-pay-add-btn__text {
  flex: 1;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a1a;
}
.sd-pay-add-btn__arrow {
  color: #ccc;
  font-size: 12px;
  transition: transform 0.2s;
}
.sd-pay-add-btn:hover .sd-pay-add-btn__arrow {
  transform: translateX(2px);
  color: #FF6B00;
}

/* --- Divider --- */
.sd-pay-divider {
  height: 1px;
  background: #f0ede8;
  margin: 16px 0;
}

/* --- COD Section (inline in modal) --- */
.sd-cod-section {
  margin-top: 12px;
  padding: 14px 16px;
  background: #fafaf8;
  border-radius: 14px;
  border: 1.5px solid #eceae5;
  animation: sdPayFadeIn 0.25s ease;
}
.sd-cod-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.sd-cod-section__icon {
  font-size: 14px;
  color: #FF6B00;
}
.sd-cod-section__title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;
}
.sd-cod-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.sd-cod-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #e0ddd8;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
}
.sd-cod-chip:hover {
  border-color: #ccc;
  background: #f8f7f5;
}
.sd-cod-chip--active {
  border-color: #FF6B00;
  background: #FFF5EB;
  color: #E05E00;
  font-weight: 600;
}
.sd-cod-input {
  border-radius: 10px !important;
  border: 1.5px solid #e5e5e5 !important;
  font-size: 0.82rem;
  padding: 9px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-cod-input:focus {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08);
}
.sd-cod-error {
  font-size: 0.76rem;
  color: #e53e3e;
  margin-top: 8px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sd-cod-error i { font-size: 12px; }

/* --- Delete Confirmation Overlay --- */
.sd-pay-confirm-delete {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  border-radius: 0 0 20px 20px;
  animation: sdPayFadeIn 0.2s ease;
}
.sd-pay-confirm-delete__card {
  text-align: center;
  padding: 28px 24px;
  max-width: 300px;
}
.sd-pay-confirm-delete__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FEF3CD;
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 14px;
}
.sd-pay-confirm-delete__text {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.sd-pay-confirm-delete__name {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 18px;
}
.sd-pay-confirm-delete__btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.sd-pay-confirm-delete__btn {
  padding: 9px 22px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.18s;
}
.sd-pay-confirm-delete__btn--cancel {
  background: #f0ede8;
  color: #555;
}
.sd-pay-confirm-delete__btn--cancel:hover {
  background: #e5e2dd;
}
.sd-pay-confirm-delete__btn--delete {
  background: #e53e3e;
  color: #fff;
}
.sd-pay-confirm-delete__btn--delete:hover {
  background: #c53030;
  box-shadow: 0 2px 8px rgba(229,62,62,0.3);
}

/* --- Animation --- */
@keyframes sdPayFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Mobile Bottom Sheet --- */
@media (max-width: 575.98px) {
  .sd-pay-modal__dialog {
    max-width: 100%;
    margin: 0;
    min-height: 100%;
    display: flex;
    align-items: flex-end;
  }
  .sd-pay-modal__content,
  .sd-pay-modal--mobile {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    width: 100%;
  }
  .sd-pay-modal__body {
    max-height: 72vh;
    padding: 16px 18px 28px;
  }
  .sd-pay-modal__header {
    padding: 16px 18px 14px;
  }
  .sd-pay-item {
    padding: 12px 14px;
  }
  .sd-cod-section {
    padding: 12px 14px;
  }
}
@media (min-width: 576px) {
  .sd-pay-modal__content {
    animation: sdPayModalSlideUp 0.3s cubic-bezier(0.4,0,0.2,1);
  }
}
@keyframes sdPayModalSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Responsive adjustments for new components --- */
@media (max-width: 575.98px) {
  .checkout-cart-toggle {
    padding: 12px 14px;
  }
  .checkout-newsletter-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .checkout-newsletter-icon {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  .checkout-newsletter-title {
    font-size: 0.78rem;
  }
  .checkout-newsletter-desc {
    font-size: 0.68rem;
  }
  .checkout-switch {
    width: 40px;
    height: 22px;
  }
  .checkout-switch-slider:before {
    width: 16px;
    height: 16px;
  }
}

/* =============================================
   SD DEALS — Merchant Page Promotions v2
   ============================================= */

/* --- Skeleton --- */
.sd-deals-skeleton {
  display: flex;
  gap: 10px;
  height: 42px;
  margin-bottom: 10px;
}
.sd-deals-skeleton__item {
  flex: 0 0 200px;
  height: 38px;
  border-radius: 24px;
  background: linear-gradient(90deg, #f0ede8 25%, #e8e5df 50%, #f0ede8 75%);
  background-size: 400% 100%;
  animation: sd-deals-shimmer 1.5s ease infinite;
}
@keyframes sd-deals-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* --- Wrapper --- */
.sd-deals {
  margin-bottom: 10px;
}
.sd-deals__inner {
  position: relative;
  display: flex;
  align-items: center;
}

/* --- Track (scrollable) --- */
.sd-deals__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px;
  cursor: grab;
}
.sd-deals__track::-webkit-scrollbar {
  display: none;
}

/* --- Pill card (soft amber banner) --- */
.sd-deals__pill {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 16px;
  height: 38px;
  background: #FFC940;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.sd-deals__pill:hover {
  background: #FFD060;
}
.sd-deals__pill:active {
  transform: scale(0.98);
}

/* --- Pill text --- */
.sd-deals__pill-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: #3d2200;
  line-height: 1.25;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Pill double-chevron (decorative, like competitor) --- */
.sd-deals__pill-chevrons {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: rgba(61, 34, 0, 0.3);
  font-size: 16px;
  margin-left: 2px;
  transition: transform 0.2s;
}
.sd-deals__pill-chevrons i {
  line-height: 1;
}
.sd-deals__pill-chevrons i:last-child {
  margin-left: -8px;
  opacity: 0.5;
}
.sd-deals__pill:hover .sd-deals__pill-chevrons {
  transform: translateX(2px);
  color: rgba(61, 34, 0, 0.45);
}

/* --- Navigation arrows (desktop) --- */
.sd-deals__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #e5e2dc;
  background: #fff;
  color: #555;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: all 0.2s;
  padding: 0;
  outline: none;
}
.sd-deals__arrow:hover {
  background: #fafafa;
  box-shadow: 0 3px 14px rgba(0,0,0,0.15);
}
.sd-deals__arrow--left {
  left: -15px;
}
.sd-deals__arrow--right {
  right: -15px;
}

/* =============================================
   SD DEALS POPUP — Custom Overlay v2
   ============================================= */
.sd-deals-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 768px) {
  .sd-deals-overlay {
    align-items: center;
  }
}

/* --- Popup container --- */
.sd-deals-popup {
  background: #fff;
  width: 100%;
  max-height: 85vh;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sd-deals-slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes sd-deals-slide-up {
  from { transform: translateY(100%); opacity: 0.5; }
  to { transform: translateY(0); opacity: 1; }
}
@media (min-width: 768px) {
  .sd-deals-popup {
    width: 460px;
    max-height: 70vh;
    border-radius: 20px;
    animation: sd-deals-zoom-in 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  }
  @keyframes sd-deals-zoom-in {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
}

/* --- Header --- */
.sd-deals-popup__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #f0ede8;
  flex-shrink: 0;
}
.sd-deals-popup__header::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #ddd;
}
@media (min-width: 768px) {
  .sd-deals-popup__header::before {
    display: none;
  }
}
.sd-deals-popup__title {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-deals-popup__back,
.sd-deals-popup__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #f5f3ef;
  color: #555;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.sd-deals-popup__back:hover,
.sd-deals-popup__close:hover {
  background: #eae7e1;
  color: #333;
}

/* --- Body --- */
.sd-deals-popup__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* --- Hero (deal detail) --- */
.sd-deals-popup__hero {
  padding: 28px 24px 20px;
  text-align: center;
  background: linear-gradient(180deg, #FFF8ED 0%, #fff 100%);
}
.sd-deals-popup__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FFB800, #F5A623);
  color: #fff;
  font-size: 22px;
  margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(245, 149, 0, 0.25);
}
.sd-deals-popup__hero-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
  line-height: 1.35;
}
.sd-deals-popup__hero-desc {
  font-size: 0.85rem;
  color: #777;
  line-height: 1.55;
  margin: 0;
  padding: 0 12px;
}

/* --- Info rows (deal detail) --- */
.sd-deals-popup__info {
  padding: 8px 20px 20px;
}
.sd-deals-popup__info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: #444;
  background: #fafaf8;
  border-radius: 12px;
  margin-bottom: 6px;
}
.sd-deals-popup__info-row:last-child {
  margin-bottom: 0;
}
.sd-deals-popup__info-row i {
  width: 22px;
  text-align: center;
  color: #F5A623;
  font-size: 17px;
  flex-shrink: 0;
}
.sd-deals-popup__info-row span {
  font-weight: 500;
}

/* --- List items (deals list) --- */
.sd-deals-popup__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid #f5f3ef;
}
.sd-deals-popup__item:last-child {
  border-bottom: none;
}
.sd-deals-popup__item:hover {
  background: #faf9f7;
}
.sd-deals-popup__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFF3E0, #FFE8C8);
  color: #E8920E;
  font-size: 16px;
}
.sd-deals-popup__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sd-deals-popup__item-body strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
}
.sd-deals-popup__item-body span {
  font-size: 0.76rem;
  color: #999;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sd-deals-popup__item-arrow {
  color: #ccc;
  font-size: 18px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.sd-deals-popup__item:hover .sd-deals-popup__item-arrow {
  transform: translateX(2px);
  color: #F5A623;
}

/* --- Transition --- */
.sd-deals-fade-enter-active { transition: opacity 0.2s; }
.sd-deals-fade-leave-active { transition: opacity 0.15s; }
.sd-deals-fade-enter-from,
.sd-deals-fade-leave-to { opacity: 0; }

/* --- Mobile adjustments --- */
@media (max-width: 767.98px) {
  .sd-deals__pill {
    height: 36px;
    padding: 0 14px 0 16px;
  }
  .sd-deals__pill-text {
    font-size: 0.72rem;
    max-width: 180px;
  }
  .sd-deals__pill-chevrons {
    font-size: 14px;
  }
  .sd-deals__arrow {
    display: none;
  }
  .sd-deals-popup__hero {
    padding: 22px 18px 16px;
  }
  .sd-deals-popup__hero-icon {
    width: 48px;
    height: 48px;
    font-size: 18px;
    border-radius: 14px;
  }
}

/* =============================================
   MERCHANT BACK BUTTON — Banner Overlay
   ============================================= */
.merchant-back-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px 7px 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 24px;
  color: #1a1a1a;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: all 0.25s ease;
  cursor: pointer;
}
.merchant-back-btn:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transform: translateY(-1px);
  color: #1a1a1a;
  text-decoration: none !important;
}
.merchant-back-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.merchant-back-btn i {
  font-size: 18px;
  line-height: 1;
}
.merchant-back-btn span {
  line-height: 1;
}

/* --- Mobile: circle icon only --- */
.merchant-back-btn.merchant-back-btn-mobile {
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  justify-content: center;
  top: 12px;
  left: 12px;
}
.merchant-back-btn.merchant-back-btn-mobile i {
  font-size: 20px;
  margin: 0;
}

/* =============================================
   SPEISEDEAL HOMEPAGE — Smooth Page Load
   ============================================= */
@keyframes sdPageFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sdPageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sdPageScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

body.front-page .sd-header,
body.front-page .sd-hero-tagline,
body.front-page .sd-hero-title,
body.front-page .sd-hero-subtitle,
body.front-page .sd-hero-search,
body.front-page .sd-hero-visual,
body.front-page .sd-hero-bg,
body.front-page .sd-steps {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
body.front-page .sd-header {
  animation: sdPageFadeIn 0.4s 0.05s forwards;
}
body.front-page .sd-hero-bg {
  animation: sdPageFadeIn 0.6s 0.05s forwards;
}
body.front-page .sd-hero-tagline {
  animation: sdPageFadeUp 0.55s 0.15s forwards;
}
body.front-page .sd-hero-title {
  animation: sdPageFadeUp 0.55s 0.25s forwards;
}
body.front-page .sd-hero-subtitle {
  animation: sdPageFadeUp 0.5s 0.4s forwards;
}
body.front-page .sd-hero-search {
  animation: sdPageFadeUp 0.55s 0.55s forwards;
}
body.front-page .sd-hero-visual {
  animation: sdPageScaleIn 0.7s 0.35s forwards;
}
body.front-page .sd-steps {
  animation: sdPageFadeUp 0.5s 0.7s forwards;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  body.front-page .sd-header,
  body.front-page .sd-hero-tagline,
  body.front-page .sd-hero-title,
  body.front-page .sd-hero-subtitle,
  body.front-page .sd-hero-search,
  body.front-page .sd-hero-visual,
  body.front-page .sd-hero-bg,
  body.front-page .sd-steps {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* =============================================
   SPEISEDEAL HOMEPAGE — Modern Landing Page
   ============================================= */
/* --- Hero Section --- */
.sd-hero {
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  overflow: hidden;
  position: relative;
  padding: 0;
}

/* --- Diagonal Green Background (right side) --- */
.sd-hero-bg {
  position: absolute;
  top: -40px;
  right: 0;
  width: 58%;
  height: calc(100% + 40px);
  background: linear-gradient(160deg, #FF6B00 0%, #E05E00 40%, #C45200 100%);
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 0;
  overflow: hidden;
}

/* --- Animated floating circles on green bg --- */
.sd-hero-bg-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}
.sd-hero-bg-c1 {
  width: 300px;
  height: 300px;
  top: -60px;
  right: -40px;
  animation: sdBgDrift1 8s ease-in-out infinite;
}
.sd-hero-bg-c2 {
  width: 180px;
  height: 180px;
  bottom: 40px;
  right: 20%;
  background: rgba(255,255,255,0.05);
  animation: sdBgDrift2 10s ease-in-out infinite;
}
.sd-hero-bg-c3 {
  width: 120px;
  height: 120px;
  top: 30%;
  right: 8%;
  background: rgba(255,255,255,0.09);
  animation: sdBgDrift3 7s ease-in-out infinite;
}
.sd-hero-bg-c4 {
  width: 60px;
  height: 60px;
  bottom: 20%;
  right: 45%;
  background: rgba(255,255,255,0.06);
  animation: sdBgDrift1 12s ease-in-out infinite reverse;
}
.sd-hero-bg-c5 {
  width: 200px;
  height: 200px;
  top: 50%;
  right: -50px;
  background: rgba(0,0,0,0.04);
  animation: sdBgDrift2 14s ease-in-out infinite reverse;
}

/* --- Animated pulse ring on green bg --- */
.sd-hero-bg-pulse {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  pointer-events: none;
  animation: sdPulseRing 4s ease-out infinite;
}

@keyframes sdBgDrift1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-20px, 15px); }
}
@keyframes sdBgDrift2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(15px, -20px); }
}
@keyframes sdBgDrift3 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-10px, -12px); }
}
@keyframes sdPulseRing {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

.sd-hero-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 30px 40px 20px;
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
}

/* --- Left: Content --- */
.sd-hero-content {
  flex: 1 1 48%;
  min-width: 0;
}

.sd-hero-tagline {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #FF6B00;
  background: rgba(255,107,0,0.08);
  padding: 6px 16px;
  border-radius: 30px;
  margin-bottom: 20px;
}

.sd-hero-title {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.1;
  color: #111;
  margin: 0 0 18px;
  letter-spacing: -0.03em;
}

.sd-hero-subtitle {
  font-size: 1.1rem !important;
  color: #666;
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 480px;
  font-weight: 400;
}

/* --- Address Search Box --- */
.sd-hero-search {
  max-width: 520px;
}
.sd-search-box {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  padding: 6px 6px 6px 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.04);
}
.sd-search-box:focus-within {
  border-color: #FF6B00;
  box-shadow: 0 8px 32px rgba(255,107,0,0.14), 0 2px 8px rgba(0,0,0,0.04);
}
.sd-search-box .search-geocomplete {
  background: transparent;
  border: none;
}
.sd-search-box .search-geocomplete .el-autocomplete {
  width: 100%;
}
.sd-search-box .search-geocomplete .el-input--large .el-input__wrapper {
  padding: 6px 12px;
  box-shadow: none;
  background: transparent;
  border: none;
  font-size: 15px;
}
.sd-search-box .search-geocomplete .el-input--large .el-input__wrapper:focus-within {
  box-shadow: none !important;
}
.sd-search-box .search-geocomplete .el-input--large .el-input__inner {
  font-size: 15px;
  font-weight: 400;
  color: #333;
}
.sd-search-box .search-geocomplete .el-input--large .el-input__inner::placeholder {
  color: #aaa;
  font-weight: 400;
}
.sd-search-box .flex-enabled-locate {
  flex-shrink: 0;
}
.sd-search-box .flex-enabled-locate .btn-green {
  border-radius: 24px;
  min-height: 44px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #FF6B00;
  border-color: #FF6B00;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
}
.sd-search-box .flex-enabled-locate .btn-green:hover {
  background: #E05E00;
  transform: scale(1.04);
}
.sd-search-box .search-geocomplete-results {
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  border: 1px solid #f0f0f0;
  margin-top: 8px;
  overflow: hidden;
}
.sd-search-box .search-geocomplete-results a {
  padding: 12px 18px 12px 48px;
  font-size: 14px;
  transition: background 0.15s;
}
.sd-search-box .search-geocomplete-results a:hover {
  background: #FFF5EB;
}

/* --- Hero Image Wrap (single image + carousel container) --- */
.sd-hero-img-wrap {
  width: 100%;
  position: relative;
}
.sd-hero-img {
  width: 100%;
  height: auto;
  max-height: 520px;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18)) drop-shadow(0 4px 8px rgba(0,0,0,0.10));
  object-fit: contain;
}

/* --- Right: Hero Visual --- */
.sd-hero-visual {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}

.sd-hero-carousel {
  position: relative;
  width: 100%;
}
.sd-hero-carousel .sd-hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1), transform 2.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.sd-hero-carousel .sd-hero-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 1;
}
.sd-hero-carousel .sd-hero-slide img {
  width: 100%;
  height: auto;
  max-height: 520px;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18)) drop-shadow(0 4px 8px rgba(0,0,0,0.10));
  object-fit: contain;
}
.sd-hero-carousel .sd-hero-sizer {
  width: 100%;
  height: auto;
  max-height: 520px;
  display: block;
  visibility: hidden;
  pointer-events: none;
  object-fit: contain;
}

.sd-hero-dots,
.sd-hero-progress {
  display: none;
}

.sd-hero-logo {
  display: none;
}

/* =============================================
   HOW IT WORKS — Steps Section
   ============================================= */
.sd-steps {
  background: #fff;
  padding: 60px 20px;
  border-top: none;
}
.sd-steps-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
.sd-step {
  flex: 1;
  text-align: center;
  padding: 0 24px;
}
.sd-step-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF5EB;
  border-radius: 50%;
  color: #FF6B00;
  transition: transform 0.3s ease, background 0.3s ease;
}
.sd-step:hover .sd-step-icon {
  transform: scale(1.08);
  background: #FFE8D0;
}
.sd-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
}
.sd-step-text {
  font-size: 0.85rem !important;
  color: #888;
  line-height: 1.55;
  margin: 0;
}
.sd-step-divider {
  width: 1px;
  min-height: 80px;
  background: #e8e5df;
  flex-shrink: 0;
  align-self: center;
}

/* =============================================
   HOMEPAGE RESPONSIVE
   ============================================= */

/* Tablet */
@media (max-width: 991.98px) {
  .sd-hero {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
  }
  .sd-hero-bg {
    width: 100%;
    height: 45%;
    top: auto;
    bottom: 0;
    clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%);
  }
  .sd-hero-inner {
    flex-direction: column;
    padding: 36px 24px 0;
    gap: 20px;
    text-align: center;
    justify-content: center;
  }
  .sd-hero-content {
    flex: none;
    width: 100%;
  }
  .sd-hero-title {
    font-size: 2.4rem;
  }
  .sd-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }
  .sd-hero-search {
    max-width: 480px;
    margin: 0 auto;
  }
  .sd-hero-visual {
    flex: 1 1 auto;
    width: 100%;
    align-self: center;
    margin-bottom: -30px;
  }
  .sd-hero-img-wrap {
    max-width: 420px;
    margin: 0 auto;
  }
  .sd-hero-carousel .sd-hero-slide img,
  .sd-hero-carousel .sd-hero-sizer,
  .sd-hero-img {
    max-height: none;
  }
  .sd-steps-inner {
    gap: 0;
  }
  .sd-step {
    padding: 0 14px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .sd-hero {
    height: 100svh;
    min-height: 100svh;
    padding-bottom: 0;
  }
  .sd-hero-bg {
    height: 50%;
    clip-path: polygon(0 18%, 100% 0, 100% 100%, 0% 100%);
  }
  .sd-hero-inner {
    padding: 22px 16px 0;
    gap: 40px;
    justify-content: center;
  }
  .sd-hero-tagline {
    font-size: 0.72rem;
    padding: 5px 12px;
    margin-bottom: 8px;
  }
  .sd-hero-title {
    font-size: 1.85rem;
    margin-bottom: 6px;
  }
  .sd-hero-subtitle {
    font-size: 0.92rem !important;
    margin-bottom: 14px;
  }
  .sd-hero-img-wrap {
    max-width: 90%;
    width: 90%;
  }
  .sd-hero-visual {
    margin-bottom: -10px;
    flex: 0 0 auto;
    max-height: 50svh;
  }
  .sd-hero-carousel .sd-hero-slide img,
  .sd-hero-carousel .sd-hero-sizer,
  .sd-hero-img {
    max-height: none;
  }
  .sd-hero-logo .sd-logo-img,
  .sd-hero-logo .sd-logo-img img {
    max-height: 36px;
  }
  .sd-search-box .flex-enabled-locate .btn-green .sd-cta-label {
    display: none;
  }
  .sd-search-box .flex-enabled-locate .btn-green {
    padding: 0 14px;
    min-width: 44px;
  }
  .sd-steps {
    padding: 36px 16px;
  }
  .sd-steps-inner {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .sd-step {
    padding: 0;
    max-width: 280px;
  }
  .sd-step-divider {
    width: 40px;
    min-height: 0;
    height: 1px;
  }
  .sd-step-icon {
    width: 60px;
    height: 60px;
  }
  .sd-step-icon svg {
    width: 32px;
    height: 32px;
  }
}

/* --- Hide old homepage elements when new hero is active --- */
.action-index #main-search-banner,
.action-index .mobile-home-banner {
  display: none !important;
}

/* =============================================
   CUISINE STRIP V3 — Fixed 8 cards + popup
   ============================================= */

/* Hide sidebar cuisine filter (replaced by top strip) */
.fv2-section:has(.fv2-cuisine-list) { display: none !important; }

/* Wrapper */
.sd-cuisine-wrap {
  padding: 22px 0 14px;
  margin-top: 6px;
}

/* Row: strip + show-all button — scrollable on all screens */
.sd-cuisine-row {
  display: flex;
  align-items: flex-end;
  gap: 0;
  overflow-x: auto;
  overflow-y: clip;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-top: 36px;
  padding-bottom: 4px;
  margin-top: -36px;
}
.sd-cuisine-row::-webkit-scrollbar { display: none; }

/* Strip: cards in a flex row */
.sd-cuisine-strip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
  flex-grow: 0;
  overflow: visible;
}

/* Each slide — stacking context isolates overflowing images */
.sd-cuisine-slide {
  flex-shrink: 0;
  text-align: center;
  overflow: visible;
  position: relative;
  z-index: 1;
  isolation: isolate;
}

/* Card link — must be the click target */
.sd-cuisine-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  color: inherit !important;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0 4px;
  position: relative;
  z-index: 2;
}

/* Colored box */
.sd-cuisine-img-wrap {
  width: 84px;
  height: 72px;
  border-radius: 18px;
  overflow: visible;
  background: #FF6B00;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
  flex-shrink: 0;
}
.sd-cuisine-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: inherit;
  z-index: 0;
}
.sd-cuisine-img-wrap::after { display: none; }

/* Image overflows top */
.sd-cuisine-img {
  position: absolute !important;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 105% !important;
  height: 138% !important;
  object-fit: contain !important;
  object-position: bottom center;
  display: block;
  z-index: 2;
  transition: transform 0.24s ease;
  pointer-events: none;
}

/* Name */
.sd-cuisine-name {
  display: block;
  margin-top: 8px;
  font-size: 0.70rem;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 88px;
  text-align: center;
  line-height: 1.3;
  transition: color 0.18s ease;
}

/* Hover */
.sd-cuisine-card:hover .sd-cuisine-img-wrap {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}
.sd-cuisine-card:hover .sd-cuisine-img {
  transform: translateX(-50%) translateY(-2px) scale(1.04);
}
.sd-cuisine-card:hover .sd-cuisine-name { color: #FF6B00; }

/* Press */
.sd-cuisine-card:active .sd-cuisine-img-wrap {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  transition-duration: 0.08s;
}

/* Active/selected */
.sd-cuisine-card.sd-cuisine-active .sd-cuisine-img-wrap {
  box-shadow: 0 0 0 3px #FF6B00, 0 6px 16px rgba(255,107,0,0.28);
}
.sd-cuisine-card.sd-cuisine-active .sd-cuisine-name {
  color: #FF6B00;
  font-weight: 700;
}
.sd-cuisine-card.sd-cuisine-active .sd-cuisine-img-wrap::after {
  display: flex !important;
  align-items: center;
  justify-content: center;
  content: '\2713';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FF6B00;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.20);
  pointer-events: none;
  z-index: 3;
}

/* Show-all button */
.sd-cuisine-show-all-btn {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 4px;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  margin-top: 0;
}
.sd-cuisine-show-all-btn i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 72px;
  border-radius: 18px;
  background: #f5f4f1;
  border: 1.5px dashed #d0cdc8;
  font-size: 20px;
  color: #888;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sd-cuisine-show-all-btn span {
  display: block;
  margin-top: 8px;
  font-size: 0.70rem;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.sd-cuisine-show-all-btn:hover i {
  background: #eceae5;
  color: #FF6B00;
  border-color: #FF6B00;
}
.sd-cuisine-show-all-btn:hover span { color: #FF6B00; }

/* ── Cuisine Popup (sd-cq) ─────────────────────────────── */
.sd-cq-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.24s ease;
  padding: 16px;
}
.sd-cq-overlay.visible { opacity: 1; }
.sd-cq-overlay.visible .sd-cq-modal {
  transform: translateY(0);
  opacity: 1;
}

.sd-cq-modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.24s ease, opacity 0.24s ease;
  overflow: hidden;
}

.sd-cq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0ede8;
  flex-shrink: 0;
}
.sd-cq-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
}
.sd-cq-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f5f4f1;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 13px;
  transition: background 0.18s ease;
}
.sd-cq-close:hover { background: #eceae5; color: #333; }

.sd-cq-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  -webkit-overflow-scrolling: touch;
}

/* Grid of cuisine items in popup */
.sd-cq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px 8px;
}

.sd-cq-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border-radius: 14px;
  padding: 8px 4px 6px;
  transition: background 0.16s ease;
  position: relative;
  user-select: none;
}
.sd-cq-item:hover { background: #faf9f7; }
.sd-cq-item.active { background: #fff5eb; }

.sd-cq-item-img {
  width: 64px;
  height: 54px;
  border-radius: 14px;
  overflow: visible;
  position: relative;
  flex-shrink: 0;
  transition: box-shadow 0.18s ease;
}
.sd-cq-item.active .sd-cq-item-img {
  box-shadow: 0 0 0 2.5px #FF6B00;
}
.sd-cq-item-img img {
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 105%;
  height: 135%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
}

.sd-cq-item-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: #444;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 88px;
  line-height: 1.3;
  transition: color 0.16s ease;
}
.sd-cq-item.active .sd-cq-item-name { color: #FF6B00; }

.sd-cq-check {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FF6B00;
  color: #fff;
  font-size: 9px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(255,107,0,0.35);
}
.sd-cq-item.active .sd-cq-check { display: flex; }

.sd-cq-footer {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #f0ede8;
  flex-shrink: 0;
}
.sd-cq-reset {
  flex: 1;
  height: 46px;
  border-radius: 12px;
  border: 1.5px solid #e0ddd8;
  background: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.18s ease;
}
.sd-cq-reset:hover { background: #f5f4f1; color: #333; }
.sd-cq-apply {
  flex: 2;
  height: 46px;
  border-radius: 12px;
  border: none;
  background: #FF6B00;
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background 0.18s ease;
}
.sd-cq-apply:hover { background: #e55f00; }

/* Responsive */
@media (max-width: 991.98px) {
  .sd-cuisine-img-wrap { width: 72px; height: 62px; border-radius: 15px; }
  .sd-cuisine-show-all-btn { display: none !important; }
  .sd-cuisine-name { font-size: 0.66rem; max-width: 76px; }
  .sd-cuisine-show-all-btn span { font-size: 0.66rem; }
}

@media (max-width: 575.98px) {
  .sd-cuisine-wrap { padding: 14px 0 8px; margin-top: 4px; }
  .sd-cuisine-row { padding-left: 4px; padding-right: 4px; padding-top: 24px; margin-top: -24px; }
  .sd-cuisine-strip { gap: 4px; }
  .sd-cuisine-card { padding: 0 2px; }
  .sd-cuisine-img-wrap { width: 58px; height: 50px; border-radius: 13px; }
  .sd-cuisine-show-all-btn i { width: 58px; height: 50px; border-radius: 13px; font-size: 15px; }
  .sd-cuisine-name { font-size: 0.58rem; max-width: 60px; margin-top: 5px; }
  .sd-cuisine-show-all-btn span { font-size: 0.58rem; margin-top: 5px; }
  .sd-cq-modal { max-height: 90vh; border-radius: 20px 20px 0 0; }
  .sd-cq-overlay { align-items: flex-end; padding: 0; }
  .sd-cq-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px 6px; }
}

/* =============================================
   MODERN HEADER — Clean, Minimal, Premium UX
   ============================================= */

/* --- Override old header styles --- */
#top-navigation {
  border-bottom: none !important;
  padding: 0 !important;
}

/* --- Header Container --- */
.sd-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
  /* iOS Safari: force GPU compositing layer to prevent scroll jank with backdrop-filter */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
/* Merchant/menu page: header NOT sticky — category nav bar is the sticky element */
body.controller-menu .sd-header {
  position: relative;
}
.sd-header.sd-header-scrolled {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.04);
}

.sd-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
}

/* --- Logo Group (back btn + logo, unified) --- */
.sd-header-logo-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.sd-header-logo-group--back {
  gap: 0;
}

/* --- Back Button (left of logo) --- */
.sd-header-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  color: #1a1a1a;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
  margin-right: 6px;
  position: relative;
}
.sd-header-back svg {
  display: block;
  flex-shrink: 0;
}
.sd-header-back:hover {
  background: rgba(0, 0, 0, 0.07);
  color: #FF6B00;
  text-decoration: none !important;
  transform: translateX(-2px);
}
.sd-header-back:active {
  transform: translateX(-1px) scale(0.95);
}

/* --- Logo --- */
.sd-header-logo {
  flex-shrink: 0;
}
.sd-header-logo .top-logo a {
  display: flex;
  align-items: center;
  text-decoration: none !important;
}
.sd-header-logo .top-logo img {
  max-height: 36px;
  width: auto;
  object-fit: contain;
}

/* --- Center Nav (address/services bar) --- */
.sd-header-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: 0 24px;
  gap: 24px;
}

/* --- Right Actions --- */
.sd-header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* --- Menu List (ul) --- */
.sd-header-menu {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sd-header-menu-item {
  align-items: center;
  margin-left: 4px;
}

/* --- Sign In Button (Guest) --- */
.sd-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a1a !important;
  background: #f5f4f1;
  border: 1px solid transparent;
  text-decoration: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.sd-signin-btn:hover {
  background: #eceae5;
  color: #1a1a1a !important;
}
.sd-signin-btn svg {
  color: #666;
  flex-shrink: 0;
}

/* --- User Dropdown (Logged In) --- */
.sd-user-dropdown {
  position: relative;
}
.sd-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a1a !important;
  background: #f5f4f1;
  border: 1px solid transparent;
  text-decoration: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}
.sd-user-btn:hover {
  background: #eceae5;
  color: #1a1a1a !important;
  text-decoration: none !important;
}
.sd-user-btn::after {
  display: none !important;
}
.sd-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e8e5df;
  flex-shrink: 0;
}
.sd-user-avatar svg {
  color: #777;
}
.sd-user-name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-user-chevron {
  color: #999;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.sd-user-dropdown.show .sd-user-chevron {
  transform: rotate(180deg);
}

/* --- Dropdown Menu --- */
.sd-dropdown-menu {
  min-width: 220px;
  padding: 6px 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  background: #fff;
  margin-top: 6px !important;
  animation: sdDropdownFadeIn 0.15s ease-out;
}
@keyframes sdDropdownFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.sd-dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 16px !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  color: #444 !important;
  transition: all 0.15s ease;
  text-indent: 0 !important;
  background: none !important;
}
.sd-dropdown-item:hover {
  background: #f8f7f5 !important;
  color: #1a1a1a !important;
}
.sd-dropdown-item svg {
  color: #999;
  flex-shrink: 0;
  transition: color 0.15s;
}
.sd-dropdown-item:hover svg {
  color: #FF6B00;
}
.sd-dropdown-divider {
  height: 1px;
  background: #f0ede8;
  margin: 4px 12px;
}
.sd-dropdown-item-logout {
  color: #999 !important;
}
.sd-dropdown-item-logout:hover {
  color: #e74c3c !important;
  background: #fef5f5 !important;
}
.sd-dropdown-item-logout:hover svg {
  color: #e74c3c;
}

/* --- Dropdown Preferences Row (Language/Currency/DarkMode inside dropdown) --- */
.sd-dropdown-prefs {
  padding: 8px 12px;
}
.sd-dropdown-prefs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.sd-dropdown-prefs-row .language-bar {
  margin: 0;
}
.sd-dropdown-prefs-row .language-bar .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f5f4f1;
  transition: all 0.2s ease;
  padding: 0;
}
.sd-dropdown-prefs-row .language-bar .dropdown-toggle:hover {
  background: #eceae5;
}
.sd-dropdown-prefs-row .language-bar .dropdown-toggle::after {
  display: none !important;
}
.sd-dropdown-prefs-row .language-bar .dropdown-toggle .img-30-flag {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.sd-dropdown-prefs-row .language-bar .dropdown-menu {
  min-width: 180px;
}
.sd-dropdown-prefs-row .sd-darkmode-toggle {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f5f4f1;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #555;
  padding: 0;
  flex-shrink: 0;
}
.sd-dropdown-prefs-row .sd-darkmode-toggle:hover {
  background: #eceae5;
  color: #1a1a1a;
}
.sd-dropdown-prefs-row .sd-darkmode-toggle .sd-darkmode-icon {
  font-size: 20px;
}
.sd-dropdown-prefs-row component-currency-selection {
  display: flex;
  align-items: center;
}

/* --- More Button (Guest dropdown for Language/Currency/DarkMode) --- */
.sd-more-dropdown {
  position: relative;
}
.sd-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: #444;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.sd-more-btn:hover {
  background: #f5f4f1;
  color: #1a1a1a;
}
.sd-more-btn::after {
  display: none !important;
}
.sd-more-dropdown-menu {
  min-width: auto !important;
  padding: 8px !important;
  right: 0;
  left: auto !important;
}

/* --- Cart Button --- */
.sd-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #444 !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  background: transparent;
}
.sd-cart-btn:hover {
  background: #f5f4f1;
  color: #1a1a1a !important;
}
.sd-cart-btn svg {
  flex-shrink: 0;
}
.sd-cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #FF6B00;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(255, 107, 0, 0.35);
}

/* --- Notification Icon --- */
.sd-header-notification {
  margin-left: 0;
}

/* --- Mobile Menu Button --- */
.sd-mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: #444;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.sd-mobile-menu-btn:hover {
  background: #f5f4f1;
  color: #1a1a1a;
}

/* =============================================
   MOBILE DRAWER — Clean Slide-out Menu
   ============================================= */
.sd-drawer {
  border-radius: 0 !important;
}
.sd-drawer .el-drawer__header {
  padding: 16px 18px 8px;
  margin-bottom: 0;
}
.sd-drawer .el-drawer__body {
  padding: 0 18px;
}

/* --- Drawer User Info --- */
.sd-drawer-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 16px;
  border-bottom: 1px solid #f0ede8;
  margin-bottom: 8px;
}
.sd-drawer-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0ede8;
  flex-shrink: 0;
}
.sd-drawer-avatar svg {
  color: #888;
}
.sd-drawer-username {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Drawer Navigation --- */
.sd-drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.sd-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  font-size: 0.86rem;
  font-weight: 500;
  color: #444 !important;
  text-decoration: none !important;
  border-radius: 8px;
  transition: all 0.15s ease;
}
.sd-drawer-link:hover {
  background: #f8f7f5;
  color: #1a1a1a !important;
}
.sd-drawer-link svg {
  color: #999;
  flex-shrink: 0;
  transition: color 0.15s;
}
.sd-drawer-link:hover svg {
  color: #FF6B00;
}
.sd-drawer-link-logout {
  color: #999 !important;
}
.sd-drawer-link-logout:hover {
  color: #e74c3c !important;
}
.sd-drawer-link-logout:hover svg {
  color: #e74c3c;
}

/* --- Drawer Divider --- */
.sd-drawer-divider {
  height: 1px;
  background: #f0ede8;
  margin: 8px 0;
}

/* --- Drawer Extras --- */
.sd-drawer-extras {
  padding: 4px 0;
}
.sd-drawer-link-subtle {
  display: block;
  padding: 8px 4px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #999 !important;
  text-decoration: none !important;
  transition: color 0.15s;
}
.sd-drawer-link-subtle:hover {
  color: #555 !important;
}

/* --- Drawer Sign-in Button (Guest) --- */
.sd-drawer-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff !important;
  background: #1a1a1a;
  text-decoration: none !important;
  transition: background 0.2s ease;
  margin-bottom: 8px;
}
.sd-drawer-signin-btn:hover {
  background: #333;
  color: #fff !important;
}
.sd-drawer-signin-btn svg {
  color: #fff;
  flex-shrink: 0;
}

/* =============================================
   HEADER — Scroll Shadow Script
   ============================================= */
/* (Applied via JS in front.bundle.js or inline) */

/* =============================================
   HEADER — Responsive
   ============================================= */
@media (max-width: 991.98px) {
  .sd-header-inner {
    padding: 0 14px;
    height: 54px;
  }
  .sd-header-logo .top-logo img {
    max-height: 30px;
  }
  .sd-header-menu-item {
    margin-left: 2px;
  }
}

@media (max-width: 575.98px) {
  .sd-header-inner {
    padding: 0 12px;
    height: 50px;
  }
  .sd-header-logo .top-logo img {
    max-height: 28px;
  }
  .sd-cart-btn {
    width: 36px;
    height: 36px;
  }
  .sd-mobile-menu-btn {
    width: 36px;
    height: 36px;
  }
  .sd-cart-badge {
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    font-size: 0.6rem;
    padding: 0 4px;
  }
}

/* --- RTL Support --- */
html[dir="rtl"] .sd-header-menu-item {
  margin-left: 0;
  margin-right: 4px;
}
html[dir="rtl"] .sd-header-nav {
  padding: 0 24px;
}
html[dir="rtl"] .sd-drawer-link {
  flex-direction: row;
}
html[dir="rtl"] .sd-dropdown-item {
  flex-direction: row;
}

/* --- Front page transparent header --- */
body.front-page .sd-header {
  background: rgba(255, 255, 255, 0.75);
  border-bottom-color: transparent;
}
body.front-page .sd-header.sd-header-scrolled {
  background: rgba(255, 255, 255, 0.90);
  border-bottom-color: rgba(0, 0, 0, 0.04);
}

/* --- Notification — Premium Speisedeal Redesign --- */

/* Trigger button: bell icon */
.sd-header-notification .notification-dropdown {
  position: relative;
}
.sd-header-notification .notification-dropdown .btn,
.sd-header-menu .notification-dropdown .btn,
#vue-cart-preview .notification-dropdown .btn {
  position: relative;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  transition: background 0.2s ease;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden;
}
.sd-header-notification .notification-dropdown .btn:hover,
.sd-header-notification .notification-dropdown .btn:focus,
.sd-header-menu .notification-dropdown .btn:hover,
#vue-cart-preview .notification-dropdown .btn:hover {
  background: #f5f4f1 !important;
}
/* Hide the avatar image — show bell via ::before */
.sd-header-notification .notification-dropdown .btn img,
.sd-header-menu .notification-dropdown .btn img,
#vue-cart-preview .notification-dropdown .btn img,
.notification-dropdown .btn img.img-30 {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
}
.sd-header-notification .notification-dropdown .btn::before,
.sd-header-menu .notification-dropdown .btn::before,
#vue-cart-preview .notification-dropdown .btn::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  flex-shrink: 0;
}

/* Badge count on the bell */
.sd-header-notification .notification-dropdown .btn > .badge,
.sd-header-notification .notification-dropdown .btn > .count,
.sd-header-notification .notification-dropdown .btn > span.badge,
.sd-header-menu .notification-dropdown .btn > .badge,
.sd-header-menu .notification-dropdown .btn > .count,
#vue-cart-preview .notification-dropdown .btn > .badge,
#vue-cart-preview .notification-dropdown .btn > .count,
#vue-cart-preview .notification-dropdown .btn > span.badge,
.notification-dropdown .btn > span.badge.badge-danger.count {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  left: auto !important;
  bottom: auto !important;
  min-width: 16px !important;
  max-width: 24px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 8px !important;
  background: #FF6B00 !important;
  color: #fff !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  text-align: center !important;
  box-shadow: 0 1px 3px rgba(255, 107, 0, 0.3) !important;
  border: 1.5px solid #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  z-index: 2;
}

/* --- Dropdown Panel --- */
.sd-notif-panel {
  width: 380px !important;
  height: auto !important;
  max-height: 460px;
  padding: 0 !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04) !important;
  background: #fff;
  margin-top: 10px !important;
  overflow: hidden;
  animation: sdNotifSlideDown 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top right;
}
@keyframes sdNotifSlideDown {
  from { opacity: 0; transform: scale(0.95) translateY(-6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Header --- */
.sd-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #f0ede8;
}
.sd-notif-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
h5.sd-notif-title,
.sd-notif-panel .sd-notif-title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.sd-notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 0.62rem !important;
  font-weight: 700;
  background: #FF6B00;
  color: #fff;
  line-height: 1;
}
.sd-notif-clear {
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  color: #aaa !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: color 0.15s;
}
.sd-notif-clear:hover {
  color: #e74c3c !important;
}

/* --- Notification List --- */
.sd-notif-list {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #e8e8e8 transparent;
}
.sd-notif-list::-webkit-scrollbar {
  width: 4px;
}
.sd-notif-list::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}

/* --- Notification Item --- */
.sd-notif-item {
  border-bottom: 1px solid #f5f3f0;
}
.sd-notif-item:last-child {
  border-bottom: none;
}
.sd-notif-link {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 16px 20px !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  text-indent: 0 !important;
  transition: background 0.15s ease;
  cursor: pointer;
  position: relative;
}
.sd-notif-link:hover {
  background: #FBFBFB !important;
}

/* Unread state */
.sd-notif-unread .sd-notif-link {
  background: #FFF5F0;
}
.sd-notif-unread .sd-notif-link:hover {
  background: #FFEDE3 !important;
}

/* Orange dot for unread */
.sd-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF6B00;
  flex-shrink: 0;
  margin-left: auto;
}

/* --- Icon Wrap (logo + status badge) --- */
.sd-notif-icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
.sd-notif-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-notif-icon img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px;
  object-fit: cover;
}
.sd-notif-icon-generic {
  background: rgba(255, 107, 0, 0.1);
}
.sd-notif-icon-generic i {
  color: #FF6B00;
  font-size: 20px;
}

/* Status badge overlay */
.sd-notif-status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.sd-notif-status-success {
  background: #22c55e;
}
.sd-notif-status-processing {
  background: #FF6B00;
}

/* --- Content --- */
.sd-notif-content {
  flex: 1;
  min-width: 0;
}
.sd-notif-message {
  font-size: 0.84rem;
  font-weight: 600;
  color: #2D2D2D;
  line-height: 1.4;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sd-notif-time {
  font-size: 0.72rem;
  font-weight: 400;
  color: #888888;
  margin-top: 3px;
}

/* --- Empty State --- */
.sd-notif-empty {
  padding: 48px 24px;
  text-align: center;
}
.sd-notif-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  background: #f5f4f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-notif-empty-text {
  font-size: 0.84rem;
  color: #999;
  margin: 0;
  line-height: 1.5;
}

/* --- Footer (View All) --- */
.sd-notif-footer {
  padding: 14px 20px;
  border-top: 1px solid #f0ede8;
  text-align: center;
}
.sd-notif-footer a {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #FF6B00 !important;
  text-decoration: none !important;
  transition: color 0.15s;
}
.sd-notif-footer a:hover {
  color: #C45200 !important;
}

/* --- Tablet responsive (576-991px) --- */
@media (min-width: 576px) and (max-width: 991.98px) {
  .sd-notif-panel {
    width: 360px !important;
    right: 0 !important;
    margin-top: 10px !important;
  }
}

/* --- Notification backdrop (created by JS on mobile) --- */
.sd-notif-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 2059;
  animation: sdNotifBackdropIn 0.25s ease;
}
@keyframes sdNotifBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
html[data-theme="dark"] .sd-notif-backdrop {
  background: rgba(0,0,0,0.55);
}

/* --- Mobile responsive (≤575px) — full-width bottom sheet --- */
@media (max-width: 575.98px) {
  /* Override Bootstrap dropdown positioning — make it a fixed bottom sheet */
  .sd-header-notification .notification-dropdown {
    position: static !important;
  }
  /* Panel is teleported to document.body via JS, so position:fixed works correctly */
  .sd-notif-panel,
  .sd-notif-panel.show {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    will-change: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 75vh !important;
    max-height: 75dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.12) !important;
    z-index: 2060;
    animation: sdNotifSlideUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  @keyframes sdNotifSlideUp {
    from { opacity: 0; margin-bottom: -50vh; }
    to   { opacity: 1; margin-bottom: 0; }
  }
  /* Drag handle indicator at top */
  .sd-notif-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 10px auto 0;
  }
  .sd-notif-header {
    padding: 10px 18px 14px;
  }
  .sd-notif-list {
    max-height: calc(75vh - 140px);
    max-height: calc(75dvh - 140px);
    -webkit-overflow-scrolling: touch;
  }
  .sd-header-notification .notification-dropdown .btn {
    width: 36px;
    height: 36px;
  }
  .sd-header-notification .notification-dropdown .btn::before {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
  }
  .sd-header-notification .notification-dropdown .btn > .badge,
  .sd-header-notification .notification-dropdown .btn > .count,
  .sd-header-notification .notification-dropdown .btn > span.badge {
    top: 1px !important;
    right: 1px !important;
    min-width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    font-size: 0.5rem !important;
    padding: 0 3px !important;
  }
  .sd-notif-link {
    padding: 14px 18px !important;
    gap: 12px;
  }
  .sd-notif-icon-wrap {
    width: 42px;
    height: 42px;
  }
  .sd-notif-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }
  .sd-notif-icon img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px;
  }
  .sd-notif-footer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

/* --- Override old top-menu styles for new sd-header-menu --- */
.sd-header-menu,
.sd-header-menu li {
  margin: 0;
  padding: 0;
}
.sd-header-menu a {
  padding: 0;
  font-weight: inherit;
  font-size: inherit;
}
.sd-header-menu a:hover {
  color: inherit !important;
}

/* --- Account pages (#top-nav in column2 layout) --- */
#top-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 8px 15px;
}
body.column2-layout #top-nav {
  padding-left: 275px;
}
@media (min-width: 992px) {
  body.column2-layout #top-nav {
    display: none !important;
  }
}
#top-nav .sd-header-menu {
  justify-content: flex-end;
}

/* --- Burger menu / El-drawer z-index fix --- */
.el-overlay {
  z-index: 2050 !important;
}
.el-overlay .el-drawer {
  z-index: 2051 !important;
}

/* --- Fix: Prevent page resize/shift when drawers/modals open ---
   Element UI's useLockscreen adds el-popup-parent--hidden to <body>
   which sets overflow:hidden and manipulates body.style.width via JS
   to compensate for scrollbar disappearance. On mobile this causes
   the page to visually shrink/resize because body.style.width gets
   set to calc(100% - Npx). Fix: force body width to stay 100%.
   The JS in main-layout.php handles position:fixed + scroll preservation. */
body.el-popup-parent--hidden {
  width: 100% !important;
}
body.sd-drawer-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100% !important;
  overflow: hidden;
}
/* Also prevent the Bootstrap modal-open class from causing the same issue */
body.modal-open {
  width: 100% !important;
}

/* =============================================
   CART PREVIEW DRAWER — Premium Redesign v2
   Professional cart with images, visual hierarchy
   ============================================= */

/* --- Drawer Container --- */
.drawer-preview-cart {
  border-radius: 0 !important;
  box-shadow: -12px 0 60px rgba(0,0,0,0.18) !important;
}
.drawer-preview-cart .el-drawer__header {
  display: none !important;
}
.drawer-preview-cart .el-drawer__body {
  padding: 0 !important;
  height: 100%;
  overflow: hidden;
}

/* --- Smooth Slide-in / Slide-out Animation --- */
.el-drawer.drawer-preview-cart {
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.el-overlay-drawer {
  transition: opacity 0.35s ease !important;
}
.drawer-preview-cart .drawer-cart-wrapper {
  animation: dcFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
@keyframes dcFadeIn {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

/* --- Stagger animation for cart items --- */
.dc-item {
  animation: dcItemSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dc-item:nth-child(1) { animation-delay: 0.08s; }
.dc-item:nth-child(2) { animation-delay: 0.13s; }
.dc-item:nth-child(3) { animation-delay: 0.18s; }
.dc-item:nth-child(4) { animation-delay: 0.23s; }
.dc-item:nth-child(5) { animation-delay: 0.28s; }
.dc-item:nth-child(n+6) { animation-delay: 0.3s; }
@keyframes dcItemSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Wrapper --- */
.drawer-cart-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

/* --- Topbar --- */
.dc-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #f0ede8;
  background: #fff;
}
.dc-topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1a1a1a;
}
.dc-topbar__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFF0E0 0%, #FFECD2 100%);
  color: #FF6B00;
  flex-shrink: 0;
}
.dc-topbar__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dc-topbar__title {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  line-height: 1.2;
}
.dc-topbar__count {
  font-size: 0.76rem;
  font-weight: 500;
  color: #999;
  line-height: 1.2;
}
.dc-topbar__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #f5f3f0;
  color: #666;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  flex-shrink: 0;
}
.dc-topbar__close:hover {
  background: #eae7e2;
  color: #1a1a1a;
  transform: rotate(90deg);
}
.dc-topbar__close:active {
  transform: scale(0.88) rotate(90deg);
}

/* --- Merchant bar --- */
.dc-merchant-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: linear-gradient(180deg, #faf9f7 0%, #fff 100%);
  border-bottom: 1px solid #f0ede8;
}
.dc-merchant-bar__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.dc-merchant-bar__icon {
  flex-shrink: 0;
  color: #FF6B00;
}
.dc-merchant-bar__link {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none !important;
  color: #1a1a1a;
  min-width: 0;
  flex: 1;
  transition: color 0.15s;
}
.dc-merchant-bar__link:hover {
  color: #FF6B00;
}
.dc-merchant-bar__name {
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.dc-merchant-bar__link svg {
  flex-shrink: 0;
  color: #bbb;
  transition: transform 0.2s;
}
.dc-merchant-bar__link:hover svg {
  transform: translateX(2px);
  color: #FF6B00;
}
.dc-merchant-bar__clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #ef4444;
  text-decoration: none !important;
  margin-left: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  background: #fef2f2;
  transition: all 0.15s;
}
.dc-merchant-bar__clear:hover {
  background: #fee2e2;
  color: #dc2626;
}
.dc-merchant-bar__clear:active {
  transform: scale(0.95);
}

/* --- Empty state --- */
.drawer-cart-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dc-empty {
  text-align: center;
  padding: 48px 24px;
}
.dc-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f3f0 0%, #ebe8e3 100%);
  color: #ccc;
  margin-bottom: 20px;
}
.dc-empty__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.dc-empty__sub {
  font-size: 0.84rem;
  color: #999;
  margin: 0;
  line-height: 1.5;
}

/* --- Loading spinner --- */
.dc-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f0ede8;
  border-top-color: #FF6B00;
  border-radius: 50%;
  animation: dcSpin 0.7s linear infinite;
}
@keyframes dcSpin {
  to { transform: rotate(360deg); }
}

/* --- Body: scrollable items area --- */
.drawer-cart-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.06) transparent;
  padding: 0 22px;
}
.drawer-cart-body::-webkit-scrollbar { width: 3px; }
.drawer-cart-body::-webkit-scrollbar-track { background: transparent; }
.drawer-cart-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06); border-radius: 3px; }

/* --- Item card --- */
.dc-item {
  padding: 16px 0;
  border-bottom: 1px solid #f0ede8;
}
.dc-item:last-child {
  border-bottom: none;
}

/* --- Item row: image + body --- */
.dc-item__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.dc-item__img-wrap {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f3f0;
}
.dc-item__img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.dc-item__img-wrap:hover .dc-item__img {
  transform: scale(1.08);
}
.dc-item__body {
  flex: 1;
  min-width: 0;
}
.dc-item__body--noimg {
  /* Intentionally empty for full-width layout when no image */
  padding-left: 0;
}

/* --- Item header: name + remove --- */
.dc-item__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.dc-item__info {
  flex: 1;
  min-width: 0;
}
.dc-item__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.dc-item__size {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #888;
  background: #f5f3f0;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
}
.dc-item__remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #ccc;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}
.dc-item__remove:hover {
  background: #fef2f2;
  color: #ef4444;
  transform: scale(1.1);
}
.dc-item__remove:active {
  transform: scale(0.9);
}

/* --- Item attributes --- */
.dc-item__attr {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: #aaa;
  line-height: 1.4;
}

/* --- Item addons --- */
.dc-item__addons {
  margin-top: 6px;
}
.dc-item__addon-group {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: #888;
}
.dc-item__addon-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 0.72rem;
  color: #aaa;
}

/* --- Item note (displayed) --- */
.dc-item__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  padding: 7px 11px;
  background: #FFF8F0;
  border-radius: 8px;
  border-left: 3px solid #FF6B00;
  font-size: 0.74rem;
  color: #b45309;
  font-style: italic;
  line-height: 1.4;
}
.dc-item__note svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #FF6B00;
}

/* --- Item note form (inline editing) --- */
.dc-item__note-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.dc-item__note-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  font-size: 0.78rem;
  border: 1.5px solid #e5e2dd;
  border-radius: 10px;
  background: #faf9f7;
  color: #1a1a1a;
  outline: none;
  transition: all 0.2s;
}
.dc-item__note-input:focus {
  border-color: #FF6B00;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.08);
}
.dc-item__note-input::placeholder {
  color: #bbb;
}
.dc-item__note-save {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: #FF6B00;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
}
.dc-item__note-save:hover {
  background: #E05E00;
  transform: scale(1.05);
}
.dc-item__note-cancel {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid #e5e2dd;
  background: #fff;
  color: #999;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
}
.dc-item__note-cancel:hover {
  background: #f5f3f0;
  color: #666;
}

/* --- Item bottom row: qty + edit + price --- */
.dc-item__bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* --- Quantity controls --- */
.dc-item__qty {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.dc-item__qty-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: none !important;
  text-decoration: none !important;
  padding: 0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: #555;
}
.dc-item__qty-btn:active {
  transform: scale(0.88) !important;
}
.dc-item__qty-btn--minus {
  background: #f5f3f0 !important;
}
.dc-item__qty-btn--minus:hover {
  background: #eae7e2 !important;
  color: #1a1a1a;
}
.dc-item__qty-btn--plus {
  background: #FFF0E0 !important;
  color: #FF6B00 !important;
}
.dc-item__qty-btn--plus:hover {
  background: #FFD9B3 !important;
  color: #E05E00 !important;
}
.dc-item__qty-val {
  min-width: 28px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: #1a1a1a;
}

/* --- Edit/note button --- */
.dc-item__edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 500;
  color: #999;
  text-decoration: none !important;
  transition: all 0.15s;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 8px;
  background: transparent;
}
.dc-item__edit:hover {
  color: #666;
  background: #f5f3f0;
}
.dc-item__edit--noted {
  color: #FF6B00;
  background: #FFF8F0;
}
.dc-item__edit--noted:hover {
  color: #E05E00;
  background: #FFF0E0;
}

/* --- Price --- */
.dc-item__price {
  margin-left: auto;
  flex-shrink: 0;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dc-item__price-val {
  font-size: 0.95rem;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}
.dc-item__price-val--discount {
  color: #FF6B00;
}
.dc-item__price-old {
  font-size: 0.74rem;
  color: #bbb;
}
.dc-item__free {
  font-size: 0.76rem;
  font-weight: 700;
  color: #16a34a;
  background: #f0fdf4;
  padding: 3px 10px;
  border-radius: 8px;
}

/* --- Footer --- */
.dc-footer {
  flex-shrink: 0;
  padding: 16px 22px 20px 22px;
  background: #fff;
  border-top: 1px solid #f0ede8;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.04);
}
.dc-footer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #e5e2dd;
}
.dc-footer__summary-label {
  font-size: 0.84rem;
  font-weight: 500;
  color: #888;
}
.dc-footer__summary-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.02em;
}
.dc-footer__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #fef5f0;
  border: 1px solid #fde0cc;
  border-radius: 12px;
  color: #c2410c;
  font-size: 0.78rem;
  line-height: 1.4;
}
.dc-footer__error svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.dc-footer__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 54px;
  padding: 0 24px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #FF6B00 0%, #F05A00 100%);
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.dc-footer__btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
  transition: left 0.5s ease;
}
.dc-footer__btn:hover::before {
  left: 100%;
}
.dc-footer__btn:hover {
  box-shadow: 0 6px 24px rgba(255, 107, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateY(-1px);
  color: #fff !important;
}
.dc-footer__btn:active {
  transform: translateY(0) scale(0.98);
}
.dc-footer__btn--disabled {
  opacity: 0.5;
  pointer-events: none;
  transform: none !important;
}
.dc-footer__btn--loading {
  pointer-events: none;
}
.dc-footer__btn-label {
  flex-shrink: 0;
}
.dc-footer__btn-price {
  flex-shrink: 0;
  font-weight: 800;
  color: #fff !important;
}
.dc-footer__btn-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dcSpin 0.7s linear infinite;
  margin: 0 auto;
}

/* --- Legacy compat (keep for in-page cart) --- */
.dc-text-primary { color: #1a1a1a; }
.dc-text-muted { color: #999; }
.dc-text-secondary { color: #888; }
.dc-text-subtle { color: #aaa; }
.dc-text-icon { color: #ccc; }
.dc-text-danger { color: #ef4444; }
.dc-border-bottom { border-bottom: 1px solid #f0ede8; }
.dc-cart-error {
  margin-bottom: 8px;
  padding: 10px 14px;
  background: #fef5f0;
  border: 1px solid #fde0cc;
  border-radius: 10px;
  color: #c2410c;
  font-size: 0.78rem;
}

/* --- Address Dropdown Results List --- */
.dc-results-list {
  border: 1px solid #e8e5df;
  border-radius: 12px;
  overflow: hidden;
}
.dc-results-list li {
  border-bottom: 1px solid #f0ede8;
}
.dc-results-list li:last-child {
  border-bottom: none;
}
.dc-results-list a {
  display: block;
  padding: 12px 18px;
  text-decoration: none;
  transition: background 0.15s;
}
.dc-results-list a:hover {
  background: #FFF5EB;
}
.dc-result-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
}
.dc-result-subtitle {
  font-size: 0.78rem;
  color: #888;
  margin-top: 2px;
}

/* --- Mobile Responsive --- */
@media (max-width: 767.98px) {
  .drawer-preview-cart {
    width: 100% !important;
  }
  .dc-topbar {
    padding: 16px 18px;
    padding-top: max(16px, env(safe-area-inset-top, 16px));
  }
  .dc-merchant-bar {
    padding: 12px 18px;
  }
  .dc-merchant-bar__name {
    font-size: 0.95rem;
  }
  .drawer-cart-body {
    padding: 0 18px;
  }
  .dc-item__img-wrap {
    width: 56px;
    height: 56px;
  }
  .dc-item__img {
    width: 56px;
    height: 56px;
  }
  .dc-item__name {
    font-size: 0.98rem;
  }
  .dc-footer {
    padding: 14px 18px 18px 18px;
    padding-bottom: max(18px, env(safe-area-inset-bottom, 18px));
  }
  .dc-footer__btn {
    height: 52px;
  }
  .dc-empty {
    padding: 36px 18px;
  }
}

/* --- Dark mode support --- */
html[data-theme="dark"] .drawer-preview-cart {
  box-shadow: -12px 0 60px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] .drawer-cart-wrapper {
  background: #1a1a1a;
}
html[data-theme="dark"] .dc-topbar {
  border-bottom-color: #2a2a2a;
  background: #1a1a1a;
}
html[data-theme="dark"] .dc-topbar__title {
  color: #f0f0f0;
}
html[data-theme="dark"] .dc-topbar__count {
  color: #aaa;
}
html[data-theme="dark"] .dc-topbar__icon-wrap {
  background: linear-gradient(135deg, #2a2218 0%, #332a1e 100%);
}
html[data-theme="dark"] .dc-topbar__close {
  background: #2a2a2a;
  color: #999;
}
html[data-theme="dark"] .dc-topbar__close:hover {
  background: #333;
  color: #eee;
}
html[data-theme="dark"] .dc-merchant-bar {
  background: linear-gradient(180deg, #1e1e1e 0%, #1a1a1a 100%);
  border-bottom-color: #2a2a2a;
}
html[data-theme="dark"] .dc-merchant-bar__link {
  color: #f0f0f0;
}
html[data-theme="dark"] .dc-merchant-bar__link:hover {
  color: #FF8C3A;
}
html[data-theme="dark"] .dc-merchant-bar__clear {
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
}
html[data-theme="dark"] .dc-merchant-bar__clear:hover {
  background: rgba(239, 68, 68, 0.18);
}
html[data-theme="dark"] .dc-item {
  border-bottom-color: #2a2a2a;
}
html[data-theme="dark"] .dc-item__img-wrap {
  background: #2a2a2a;
}
html[data-theme="dark"] .dc-item__name {
  color: #f0f0f0;
}
html[data-theme="dark"] .dc-item__size {
  color: #888;
  background: #2a2a2a;
}
html[data-theme="dark"] .dc-item__remove:hover {
  background: rgba(239, 68, 68, 0.12);
}
html[data-theme="dark"] .dc-item__attr {
  color: #666;
}
html[data-theme="dark"] .dc-item__addon-group {
  color: #777;
}
html[data-theme="dark"] .dc-item__addon-row {
  color: #666;
}
html[data-theme="dark"] .dc-item__note {
  background: rgba(255, 107, 0, 0.08);
  border-left-color: #FF8C3A;
  color: #d97706;
}
html[data-theme="dark"] .dc-item__note-input {
  background: #222;
  border-color: #333;
  color: #eee;
}
html[data-theme="dark"] .dc-item__note-input:focus {
  background: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}
html[data-theme="dark"] .dc-item__note-cancel {
  background: #222;
  border-color: #333;
  color: #888;
}
html[data-theme="dark"] .dc-item__qty-btn--minus {
  background: #2a2a2a !important;
  color: #aaa !important;
}
html[data-theme="dark"] .dc-item__qty-btn--minus:hover {
  background: #333 !important;
  color: #eee !important;
}
html[data-theme="dark"] .dc-item__qty-btn--plus {
  background: rgba(255, 107, 0, 0.12) !important;
  color: #FF8C3A !important;
}
html[data-theme="dark"] .dc-item__qty-btn--plus:hover {
  background: rgba(255, 107, 0, 0.2) !important;
}
html[data-theme="dark"] .dc-item__qty-val {
  color: #f0f0f0;
}
html[data-theme="dark"] .dc-item__edit {
  color: #777;
}
html[data-theme="dark"] .dc-item__edit:hover {
  color: #aaa;
  background: #2a2a2a;
}
html[data-theme="dark"] .dc-item__edit--noted {
  color: #FF8C3A;
  background: rgba(255, 107, 0, 0.06);
}
html[data-theme="dark"] .dc-item__price-val {
  color: #f0f0f0;
}
html[data-theme="dark"] .dc-item__price-val--discount {
  color: #FF8C3A;
}
html[data-theme="dark"] .dc-item__price-old {
  color: #555;
}
html[data-theme="dark"] .dc-item__free {
  background: rgba(22, 163, 74, 0.1);
  color: #4ade80;
}
html[data-theme="dark"] .dc-footer {
  background: #1a1a1a;
  border-top-color: #2a2a2a;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .dc-footer__summary {
  border-bottom-color: #2a2a2a;
}
html[data-theme="dark"] .dc-footer__summary-label {
  color: #777;
}
html[data-theme="dark"] .dc-footer__summary-val {
  color: #f0f0f0;
}
html[data-theme="dark"] .dc-footer__error {
  background: rgba(194, 65, 12, 0.1);
  border-color: rgba(194, 65, 12, 0.2);
  color: #fb923c;
}
html[data-theme="dark"] .dc-footer__btn {
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.2);
}
html[data-theme="dark"] .dc-empty__icon {
  background: linear-gradient(135deg, #2a2a2a 0%, #222 100%);
  color: #555;
}
html[data-theme="dark"] .dc-empty__title {
  color: #f0f0f0;
}
html[data-theme="dark"] .dc-empty__sub {
  color: #666;
}
html[data-theme="dark"] .drawer-cart-body {
  scrollbar-color: rgba(255,255,255,0.06) transparent;
}
html[data-theme="dark"] .drawer-cart-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06);
}

/* =============================================
   AUTH PAGES — Login, Register, Forgot Password
   Modern card-based design
   ============================================= */

/* --- Page Background --- */
.sd-auth-page {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  background: #f8f7f5;
  font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- Wrapper (centers the card) --- */
.sd-auth-wrapper {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* --- Smooth page load animation --- */
@keyframes sdAuthFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sdAuthContentIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
#vue-register-less [v-cloak],
#vue-register [v-cloak],
#vue-guest-register [v-cloak] {
  display: none !important;
}
#vue-register-less,
#vue-register,
#vue-guest-register {
  animation: sdAuthContentIn 0.35s ease both;
  animation-delay: 0.1s;
}

/* --- Card --- */
.sd-auth-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f0ede8;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  animation: sdAuthFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* --- Header (icon + title + subtitle) --- */
.sd-auth-header {
  text-align: center;
  padding: 36px 32px 0;
}
.sd-auth-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255, 92, 0, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.sd-auth-icon svg {
  width: 34px;
  height: 34px;
}
.sd-auth-header h5 {
  font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
}
.sd-auth-subtitle {
  font-size: 0.82rem;
  color: #999;
  margin: 0;
  line-height: 1.5;
}

/* --- Body (form area) --- */
.sd-auth-body {
  padding: 28px 32px 36px;
}

/* --- Form Inputs (override floating labels) --- */
.sd-auth-body .form-label-group {
  position: relative;
  margin-bottom: 14px;
}
.sd-auth-body .form-control {
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.88rem;
  color: #1a1a1a;
  background: #fafaf8;
  transition: border-color 0.2s, box-shadow 0.2s;
  height: auto;
}
.sd-auth-body .form-control:focus {
  border-color: #FF5C00;
  box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.1);
  background: #fff;
  outline: none;
}
.sd-auth-body .form-label-group > label {
  color: #999;
  font-size: 0.82rem;
  padding: 12px 14px;
}

/* --- Password Toggle --- */
.sd-auth-body .change_field_password a {
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: #bbb;
  font-size: 16px;
  z-index: 2;
  transition: color 0.15s;
}
.sd-auth-body .change_field_password a:hover {
  color: #888;
}
html[dir="rtl"] .sd-auth-body .change_field_password a {
  right: auto;
  left: 14px;
}

/* --- Options Row (remember me + forgot) --- */
.sd-auth-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  margin-top: 4px;
}
.sd-auth-options .custom-control-label {
  font-size: 0.78rem;
  color: #888;
}
.sd-auth-options .custom-control-input:checked ~ .custom-control-label::before {
  background: #FF5C00;
  border-color: #FF5C00;
}

/* --- Links --- */
.sd-auth-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: #FF5C00 !important;
  text-decoration: none !important;
  transition: color 0.15s;
}
.sd-auth-link:hover {
  color: #C44A00 !important;
}

/* --- Alerts --- */
.sd-auth-alert {
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.78rem;
  line-height: 1.5;
}
.sd-auth-alert p {
  margin: 0 0 2px;
}
.sd-auth-alert p:last-child {
  margin-bottom: 0;
}
.sd-auth-alert-error {
  background: #fef5f0;
  border: 1px solid #fde0cc;
  color: #c2410c;
}
.sd-auth-alert-success {
  background: #FFF0E0;
  border: 1px solid #FFD9B3;
  color: #E05E00;
}

/* --- Primary Button --- */
.sd-auth-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(135deg, #FF5C00 0%, #E04E00 100%);
  box-shadow: 0 4px 14px rgba(255, 92, 0, 0.3);
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
  margin-top: 6px;
}
.sd-auth-btn-primary:hover {
  box-shadow: 0 6px 20px rgba(255, 92, 0, 0.4);
  transform: translateY(-1px);
}
.sd-auth-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.sd-auth-btn-primary.loading {
  pointer-events: none;
  opacity: 0.7;
}
.sd-auth-btn-primary .circle-loader,
.sd-auth-btn-primary [data-loader="circle-side"] {
  width: 20px;
  height: 20px;
}

/* --- Footer Link (Don't have account? / Have account?) --- */
.sd-auth-footer-link {
  text-align: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f0ede8;
  font-size: 0.82rem;
  color: #999;
}
.sd-auth-footer-link a {
  font-weight: 700;
  color: #FF5C00 !important;
  text-decoration: none !important;
  margin-left: 4px;
  transition: color 0.15s;
}
.sd-auth-footer-link a:hover {
  color: #C44A00 !important;
}

/* --- Guest Checkout --- */
.sd-auth-guest {
  text-align: center;
  margin-top: 12px;
}
.sd-auth-guest a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 24px;
  border: 1.5px solid #e5e2dd;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #555 !important;
  text-decoration: none !important;
  background: #fafaf8;
  transition: border-color 0.2s, background 0.2s;
}
.sd-auth-guest a:hover {
  border-color: #ccc;
  background: #f5f4f1;
}

/* --- Divider (or) --- */
.sd-auth-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  gap: 12px;
}
.sd-auth-divider::before,
.sd-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #f0ede8;
}
.sd-auth-divider span {
  font-size: 0.76rem;
  font-weight: 600;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Social Login Buttons --- */
.sd-auth-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sd-auth-social .social-login a {
  border: 1.5px solid #e5e2dd !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  background: #fafaf8 !important;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}
.sd-auth-social .social-login a:hover {
  border-color: #ccc !important;
  background: #f5f4f1 !important;
}

/* --- Terms Text --- */
.sd-auth-terms {
  font-size: 0.74rem;
  color: #999;
  line-height: 1.6;
  margin: 14px 0;
}
.sd-auth-terms a {
  color: #FF5C00;
  text-decoration: underline;
}

/* --- Name Row (first/last) in signup --- */
.sd-auth-body .row .col {
  padding-right: 6px;
}
.sd-auth-body .row .col:last-child {
  padding-right: 15px;
  padding-left: 6px;
}

/* --- Radio Group (OTP method) --- */
.sd-auth-body .el-radio-group {
  margin-bottom: 14px;
}

/* --- Phone Component (.inputs-with-dropdown) --- */
.sd-auth-body .inputs-with-dropdown {
  border: 1.5px solid #E0E0E0 !important;
  border-radius: 12px !important;
  background: #fafaf8 !important;
  min-height: 50px !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.sd-auth-body .inputs-with-dropdown:focus-within {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1) !important;
  background: #fff !important;
}
.sd-auth-body .inputs-with-dropdown input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  min-height: 48px !important;
  font-size: 0.9rem !important;
  color: #1a1a1a !important;
  padding: 0 14px !important;
  outline: none !important;
}
.sd-auth-body .inputs-with-dropdown input:focus {
  outline: none !important;
  box-shadow: none !important;
}
.sd-auth-body .inputs-with-dropdown input::placeholder {
  color: #aaa !important;
}
.sd-auth-body .inputs-with-dropdown .dropdown {
  flex-shrink: 0;
  border-right: 1.5px solid #E8E8E8;
  transition: border-color 0.25s ease;
}
.sd-auth-body .inputs-with-dropdown:focus-within .dropdown {
  border-right-color: rgba(255, 107, 0, 0.2);
}
.sd-auth-body .inputs-with-dropdown button {
  background: none !important;
  border: none !important;
  min-height: 48px !important;
  padding: 0 12px !important;
  outline: none !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.sd-auth-body .inputs-with-dropdown button:hover {
  background: rgba(0,0,0,0.03) !important;
}
.sd-auth-body .inputs-with-dropdown button:focus {
  outline: none !important;
  box-shadow: none !important;
}
.sd-auth-body .inputs-with-dropdown img {
  width: 26px !important;
  height: 18px !important;
  border-radius: 3px !important;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.sd-auth-body .inputs-with-dropdown .dropdown-toggle::after {
  margin-left: 2px;
  font-size: 0.55rem;
  color: #999;
  vertical-align: middle;
}
.sd-auth-body .inputs-with-dropdown > div:not(.dropdown) {
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: #555;
  padding: 0 0 0 12px;
}
.sd-auth-body .inputs-with-dropdown .dropdown-menu {
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
  padding: 6px !important;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  min-width: 240px !important;
  margin-top: 4px !important;
}
.sd-auth-body .inputs-with-dropdown .dropdown-menu a {
  font-size: 0.82rem !important;
  padding: 8px 12px !important;
  color: #333 !important;
  transition: background 0.15s;
  border-radius: 8px !important;
  gap: 8px;
}
.sd-auth-body .inputs-with-dropdown .dropdown-menu a:hover {
  background: #FFF5EE !important;
}
.sd-auth-body .inputs-with-dropdown .dropdown-menu a:active {
  background: #FFEAD9 !important;
}
.sd-auth-body .inputs-with-dropdown .dropdown-menu img {
  width: 24px !important;
  height: 16px !important;
  border-radius: 2px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}

/* --- OTP Digit Boxes --- */
.sd-otp-boxes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.sd-otp-box {
  width: 52px;
  height: 56px;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  background: #fafaf8;
  font-family: 'Inter', 'Roboto', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  -moz-appearance: textfield;
  appearance: textfield;
}
.sd-otp-box::-webkit-outer-spin-button,
.sd-otp-box::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sd-otp-box:focus {
  border-color: #FF5C00;
  box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.1);
  background: #fff;
  transform: scale(1.05);
}
.sd-otp-box.filled {
  border-color: #FF5C00;
  background: #fff;
}

/* --- Smart Input (email/phone detection) --- */
.sd-smart-input-wrapper {
  position: relative;
  margin-bottom: 14px;
}
.sd-smart-input-wrapper .sd-input-mode-badge {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.2s, background 0.2s;
}
html[dir="rtl"] .sd-smart-input-wrapper .sd-input-mode-badge {
  right: auto;
  left: 14px;
}
.sd-input-mode-badge.mode-email {
  background: rgba(255, 92, 0, 0.08);
  color: #FF5C00;
}
.sd-input-mode-badge.mode-phone {
  background: rgba(34, 153, 84, 0.08);
  color: #229954;
}
.sd-smart-phone-prefix {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: 0.84rem;
  font-weight: 600;
  color: #555;
  z-index: 2;
  pointer-events: none;
  padding-right: 10px;
  border-right: 1px solid #ddd;
}
html[dir="rtl"] .sd-smart-phone-prefix {
  left: auto;
  right: 14px;
  padding-right: 0;
  padding-left: 10px;
  border-right: none;
  border-left: 1px solid #ddd;
}
.sd-smart-phone-prefix .sd-flag {
  font-size: 1.1rem;
  line-height: 1;
}
.sd-auth-body .sd-smart-input-wrapper input.form-control.has-prefix,
.sd-smart-input-wrapper input.form-control.has-prefix,
.sd-smart-input-wrapper input.form-control-text.has-prefix {
  padding-left: 95px !important;
}
html[dir="rtl"] .sd-auth-body .sd-smart-input-wrapper input.form-control.has-prefix,
html[dir="rtl"] .sd-smart-input-wrapper input.form-control.has-prefix,
html[dir="rtl"] .sd-smart-input-wrapper input.form-control-text.has-prefix {
  padding-left: 14px !important;
  padding-right: 95px !important;
}

/* --- Loading Spinner (global + button override) --- */
.sd-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 92, 0, 0.2);
  border-top-color: #FF5C00;
  border-radius: 50%;
  animation: sdSpin 0.6s linear infinite;
}
.sd-auth-btn-primary .sd-spinner {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}
@keyframes sdSpin {
  to { transform: rotate(360deg); }
}

/* --- OTP Transition --- */
.sd-otp-enter {
  animation: sdOtpSlideIn 0.4s ease-out;
}
@keyframes sdOtpSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Responsive --- */
@media (max-width: 575.98px) {
  .sd-auth-page {
    padding: 20px 12px;
    min-height: calc(100vh - 80px);
    align-items: flex-start;
    padding-top: 30px;
  }
  .sd-auth-card {
    border-radius: 14px;
  }
  .sd-auth-header {
    padding: 28px 20px 0;
  }
  .sd-auth-icon {
    width: 56px;
    height: 56px;
  }
  .sd-auth-icon svg {
    width: 28px;
    height: 28px;
  }
  .sd-auth-header h5 {
    font-size: 1.05rem;
  }
  .sd-auth-body {
    padding: 22px 20px 28px;
  }
  .sd-auth-body .form-control {
    font-size: 0.85rem;
    padding: 11px 12px;
  }
  .sd-auth-btn-primary {
    padding: 13px 20px;
    font-size: 0.88rem;
    border-radius: 12px;
  }
  .sd-otp-box {
    width: 46px;
    height: 50px;
    font-size: 1.2rem;
  }
  .sd-otp-boxes {
    gap: 8px;
  }
}

/* --- RTL Support --- */
html[dir="rtl"] .sd-auth-footer-link a {
  margin-left: 0;
  margin-right: 4px;
}
html[dir="rtl"] .sd-auth-body .row .col {
  padding-right: 15px;
  padding-left: 6px;
}
html[dir="rtl"] .sd-auth-body .row .col:last-child {
  padding-left: 15px;
  padding-right: 6px;
}

/* =============================================
   ACCOUNT SECTION V2 — Modern Premium Redesign
   ============================================= */

/* --- Sidebar Overrides for Account Pages --- */
body.column2-layout {
  background: #f5f4f1 !important;
}
body.column2-layout #sidebar {
  background: #fff;
  border-right: 1px solid #f0ede8;
  box-shadow: none;
  padding: 28px 0 28px 0;
}
body.column2-layout #sidebar .top-logo {
  padding: 0 24px;
  margin-bottom: 28px;
}

/* --- Sidebar User Card --- */
.acct-sidebar-user {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  margin: 0 12px 8px;
  background: linear-gradient(135deg, #FFF8F2 0%, #FFF5EB 100%);
  border-radius: 14px;
  border: 1px solid #FFE8D4;
  transition: all 0.2s ease;
}
.acct-sidebar-user:hover {
  border-color: #FFD4B0;
  box-shadow: 0 2px 12px rgba(255,107,0,0.08);
}
.acct-sidebar-user .acct-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.acct-sidebar-user .acct-user-info h6 {
  margin: 0 0 2px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}
.acct-sidebar-user .acct-user-info p {
  margin: 0;
  font-size: 0.72rem !important;
  color: #999;
  line-height: 1.4;
}

/* --- Sidebar Navigation --- */
body.column2-layout #sidebar .siderbar-menu {
  padding: 0 12px;
}
body.column2-layout #sidebar .siderbar-menu li {
  margin-bottom: 2px;
}
body.column2-layout #sidebar .siderbar-menu a {
  display: flex;
  align-items: center;
  padding: 11px 16px 11px 44px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 500;
  color: #555;
  text-indent: 0;
  background-image: none !important;
  transition: all 0.2s ease;
  position: relative;
}
/* zmdi icon font — replaces PNG background-image icons */
body.column2-layout #sidebar .siderbar-menu a::after {
  font-family: 'Material-Design-Iconic-Font';
  font-style: normal;
  font-weight: normal;
  font-size: 1.15rem;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  transition: color 0.2s ease;
  text-indent: 0;
}
body.column2-layout #sidebar .siderbar-menu .account a::after { content: '\f205'; }
body.column2-layout #sidebar .siderbar-menu .notifications a::after { content: '\f1fe'; }
body.column2-layout #sidebar .siderbar-menu .orders a::after { content: '\f1cb'; }
body.column2-layout #sidebar .siderbar-menu .addresses a::after { content: '\f1ab'; }
body.column2-layout #sidebar .siderbar-menu .bookings a::after { content: '\f32f'; }
body.column2-layout #sidebar .siderbar-menu .payments a::after { content: '\f129'; }
body.column2-layout #sidebar .siderbar-menu .favourites a::after { content: '\f15f'; }
body.column2-layout #sidebar .siderbar-menu .gift a::after,
body.column2-layout #sidebar .siderbar-menu .points a::after { content: '\f27d'; }
body.column2-layout #sidebar .siderbar-menu .wallet a::after { content: '\f111'; }
body.column2-layout #sidebar .siderbar-menu .livechat a::after { content: '\f263'; }
body.column2-layout #sidebar .siderbar-menu .offers a::after { content: '\f1df'; }
body.column2-layout #sidebar .siderbar-menu .logout a::after { content: '\f1af'; color: #c0392b; }

body.column2-layout #sidebar .siderbar-menu a:hover {
  background: #f9f8f6;
  color: #1a1a1a;
}
body.column2-layout #sidebar .siderbar-menu a:hover::after {
  color: #666;
}
body.column2-layout #sidebar .siderbar-menu li.active a {
  background: #FFF5EB !important;
  color: #E05E00 !important;
  font-weight: 600;
}
body.column2-layout #sidebar .siderbar-menu li.active a::after {
  color: #FF6B00 !important;
}
body.column2-layout #sidebar .siderbar-menu li.active a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: #FF6B00;
  border-radius: 0 3px 3px 0;
}
body.column2-layout #sidebar .siderbar-menu .logout a {
  color: #c0392b;
  opacity: 0.8;
}
body.column2-layout #sidebar .siderbar-menu .logout a:hover {
  background: #fef5f5;
  opacity: 1;
}
body.column2-layout #sidebar .siderbar-menu .logout a:hover::after {
  color: #c0392b;
}

/* --- Main Container Account --- */
body.column2-layout #main-container {
  padding-top: 40px;
}
body.column2-layout #main-container > .container-fluid {
  max-width: 960px;
  padding: 0 24px;
}

/* --- Account Page Title --- */
.acct-page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0ede8;
}
.acct-page-title .acct-title-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.acct-page-title .acct-title-icon.icon-profile { background: #FFF5EB; color: #FF6B00; }
.acct-page-title .acct-title-icon.icon-password { background: #EFF6FF; color: #3B82F6; }
.acct-page-title .acct-title-icon.icon-orders { background: #F0FDF4; color: #22C55E; }
.acct-page-title .acct-title-icon.icon-addresses { background: #FEF3C7; color: #F59E0B; }
.acct-page-title .acct-title-icon.icon-favourites { background: #FEF2F2; color: #EF4444; }
.acct-page-title .acct-title-icon.icon-payments { background: #F5F3FF; color: #8B5CF6; }
.acct-page-title .acct-title-icon.icon-notifications { background: #ECFEFF; color: #06B6D4; }
.acct-page-title .acct-title-icon.icon-email { background: #FFF7ED; color: #EA580C; }
.acct-page-title .acct-title-icon.icon-account { background: #FEF2F2; color: #DC2626; }
.acct-page-title .acct-title-icon.icon-booking { background: #F0FDF4; color: #16A34A; }
.acct-page-title .acct-title-icon.icon-wallet { background: #ECFDF5; color: #10B981; }
.acct-page-title .acct-title-icon.icon-points { background: #FFFBEB; color: #D97706; }
.acct-page-title .acct-title-icon.icon-vouchers { background: #FDF2F8; color: #EC4899; }
.acct-page-title .acct-title-text h4 {
  margin: 0;
  font-weight: 700;
  font-size: 1.15rem;
  color: #1a1a1a;
  line-height: 1.3;
}
.acct-page-title .acct-title-text p {
  margin: 3px 0 0;
  font-size: 0.8rem !important;
  color: #999;
  line-height: 1.3;
}

/* --- Account Card (main content wrapper) --- */
.acct-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f0ede8;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  padding: 0;
  margin-bottom: 24px;
  overflow: hidden;
}
.acct-card-body {
  padding: 28px 32px;
}
.acct-card-header {
  padding: 20px 32px;
  border-bottom: 1px solid #f0ede8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafaf8;
}
.acct-card-header h5 {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1a1a;
}

/* --- Account Form Styling --- */
.acct-form .form-group {
  margin-bottom: 20px;
}
.acct-form .form-group label.acct-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.acct-form .form-control,
.acct-card .form-control {
  border: 1.5px solid #e8e5df;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.88rem;
  color: #1a1a1a;
  background: #fafaf8;
  transition: all 0.25s ease;
}
.acct-form .form-control:focus,
.acct-card .form-control:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08);
  background: #fff;
}
.acct-form .form-label-group {
  margin-bottom: 20px;
}
.acct-form .form-label-group .form-control {
  border: 1.5px solid #e8e5df;
  border-radius: 10px;
  background: #fafaf8;
  transition: all 0.25s ease;
}
.acct-form .form-label-group .form-control:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08);
  background: #fff;
}

/* --- Account Buttons --- */
.acct-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 24px;
  border-radius: 12px;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #FF6B00, #E05E00);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(255,107,0,0.25);
}
.acct-btn-primary:hover {
  background: linear-gradient(135deg, #E05E00, #CC5200);
  box-shadow: 0 4px 16px rgba(255,107,0,0.35);
  transform: translateY(-1px);
}
.acct-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* --- Profile Two-Column Layout (desktop, photo+menu left, form right) --- */
.acct-profile-layout {
  display: flex;
  gap: 28px;
}
.acct-profile-sidebar {
  flex: 0 0 240px;
  width: 240px;
}
.acct-profile-main {
  flex: 1;
  min-width: 0;
}

/* --- Profile Photo Card --- */
.acct-photo-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f0ede8;
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.acct-photo-card .acct-photo-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}
.acct-photo-card .acct-photo-wrap .avatar,
.acct-photo-card .acct-photo-wrap .el-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f0ede8;
}
.acct-photo-card .acct-photo-wrap .acct-photo-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FF6B00;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.2s;
}
.acct-photo-card .acct-photo-wrap .acct-photo-overlay:hover {
  background: #E05E00;
  transform: scale(1.08);
}
.acct-photo-card h6 {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1a1a;
}
.acct-photo-card p {
  margin: 0;
  font-size: 0.76rem !important;
  color: #999;
}

/* --- Sub Menu in Profile Sidebar --- */
.acct-sub-menu {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f0ede8;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.acct-sub-menu .sub-menu li {
  border-bottom: 1px solid #f5f3f0;
}
.acct-sub-menu .sub-menu li:last-child {
  border-bottom: none;
}
.acct-sub-menu .sub-menu a {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  font-size: 0.84rem;
  font-weight: 500;
  color: #555;
  transition: all 0.2s;
  text-indent: 28px;
}
.acct-sub-menu .sub-menu a:hover {
  background: #fafaf8;
  color: #1a1a1a;
}
.acct-sub-menu .sub-menu li.active a {
  background: #FFF5EB;
  color: #E05E00;
  font-weight: 600;
  border-right: 3px solid #FF6B00;
}

/* --- Mobile Profile Header --- */
.acct-mobile-header {
  text-align: center;
  padding: 20px 16px 0;
  margin-bottom: 16px;
}
.acct-mobile-header .acct-mobile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f0ede8;
  margin-bottom: 10px;
}
.acct-mobile-header h5 {
  margin: 0 0 4px;
  font-weight: 700;
  color: #1a1a1a;
}
.acct-mobile-header p {
  margin: 0 0 2px;
  font-size: 0.78rem !important;
  color: #999;
}

/* --- Mobile Profile Tab Menu (horizontal scroll) --- */
.acct-mobile-tabs {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 0 16px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.acct-mobile-tabs::-webkit-scrollbar {
  display: none;
}
.acct-mobile-tabs .acct-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid #e8e5df;
  font-size: 0.78rem;
  font-weight: 500;
  color: #666;
  background: #fff;
  white-space: nowrap;
  transition: all 0.2s;
  text-decoration: none !important;
  flex-shrink: 0;
}
.acct-mobile-tabs .acct-tab-pill:hover {
  border-color: #d5d0c8;
  background: #fafaf8;
}
.acct-mobile-tabs .acct-tab-pill.active {
  background: #FF6B00;
  border-color: #FF6B00;
  color: #fff;
  font-weight: 600;
}

/* --- Orders Page Redesign --- */
.acct-orders-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.acct-stat-card {
  flex: 1;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f0ede8;
  padding: 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  transition: all 0.2s;
}
.acct-stat-card:hover {
  border-color: #e8e5df;
  box-shadow: 0 3px 12px rgba(0,0,0,0.06);
}
.acct-stat-card .stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.acct-stat-card .stat-label {
  font-size: 0.74rem;
  color: #999;
  font-weight: 500;
}
.acct-stat-card.stat-highlight {
  background: linear-gradient(135deg, #FFF8F2 0%, #FFF5EB 100%);
  border-color: #FFE8D4;
}
.acct-stat-card.stat-highlight .stat-value {
  color: #E05E00;
}

/* --- Order Row Redesign --- */
.acct-order-row {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f0ede8;
  padding: 18px 20px;
  margin-bottom: 12px;
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.acct-order-row:hover {
  border-color: #e8e5df;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.acct-order-row .order-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.acct-order-row .order-top .order-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1.5px solid #f0ede8;
  flex-shrink: 0;
}
.acct-order-row .order-top .order-merchant h6 {
  margin: 0 0 2px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
}
.acct-order-row .order-top .order-merchant p {
  margin: 0;
  font-size: 0.74rem !important;
  color: #999;
}
.acct-order-row .order-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.acct-order-row .order-meta .badge {
  font-size: 0.68rem;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 600;
}
.acct-order-row .order-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid #f5f3f0;
}
.acct-order-row .order-bottom .order-total {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
}
.acct-order-row .order-bottom .order-date {
  font-size: 0.74rem;
  color: #999;
}

/* --- Search Bar for Orders --- */
.acct-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid #e8e5df;
  border-radius: 12px;
  padding: 0 16px;
  margin-bottom: 20px;
  transition: all 0.25s ease;
}
.acct-search-bar:focus-within {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08);
}
.acct-search-bar .search-icon {
  font-size: 1rem;
  color: #bbb;
  margin-right: 10px;
  flex-shrink: 0;
}
.acct-search-bar:focus-within .search-icon {
  color: #FF6B00;
}
.acct-search-bar input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.86rem;
  padding: 12px 0;
  color: #1a1a1a;
}
.acct-search-bar input::placeholder {
  color: #b5b0a8;
}
.acct-search-bar .search-clear {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eee;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s;
}
.acct-search-bar .search-clear:hover {
  background: #ddd;
  color: #333;
}

/* --- Address Cards Redesign --- */
.acct-address-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f0ede8;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.acct-address-card:hover {
  border-color: #e8e5df;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.acct-address-card .address-label-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #FFF5EB;
  color: #E05E00;
  border: 1px solid #FFE8D4;
  margin-bottom: 10px;
  width: fit-content;
}
.acct-address-card .address-text {
  flex: 1;
  font-size: 0.82rem !important;
  color: #666;
  line-height: 1.5;
  margin-bottom: 14px;
}
.acct-address-card .address-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.acct-address-card .address-actions .btn-acct-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 500;
  border: 1.5px solid #e8e5df;
  background: #fff;
  color: #555;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none !important;
}
.acct-address-card .address-actions .btn-acct-action:hover {
  background: #fafaf8;
  border-color: #d5d0c8;
  color: #1a1a1a;
}
.acct-address-card .address-actions .btn-acct-action.btn-acct-delete:hover {
  background: #fef5f5;
  border-color: #fcc;
  color: #c0392b;
}

/* --- Favourites Grid --- */
.acct-fav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* --- Favourites Card Redesign --- */
.acct-fav-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  position: relative;
  display: flex;
  flex-direction: column;
}
.acct-fav-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}
.acct-fav-card.fav-closed {
  opacity: 0.65;
}

/* Image area */
.acct-fav-card .fav-img-wrap {
  position: relative;
  display: block;
  height: 180px;
  overflow: hidden;
  background: #f0ede8;
}
.acct-fav-card .fav-cover-img,
.acct-fav-card .fav-cover-img img,
.acct-fav-card .fav-img-wrap .el-image,
.acct-fav-card .fav-img-wrap .el-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.acct-fav-card:hover .fav-cover-img img,
.acct-fav-card:hover .fav-img-wrap .el-image img {
  transform: scale(1.08);
}
.acct-fav-card .fav-img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Badge overlays */
.acct-fav-card .fav-closed-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FF8C3A;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  line-height: 1.3;
}
.acct-fav-card .fav-free-delivery {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 3;
  background: rgba(34,197,94,0.9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Heart button */
.acct-fav-card .fav-heart-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
}

/* Body */
.acct-fav-card .fav-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acct-fav-card .fav-body-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.acct-fav-card .fav-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: #1a1a1a;
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.acct-fav-card .fav-name:hover {
  color: #FF6B00;
}
.acct-fav-card .fav-rating-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #FFF8F0;
  border: 1px solid #FFE8D4;
  color: #E05E00;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.acct-fav-card .fav-rating-pill i {
  color: #fbbf24;
  font-size: 0.68rem;
}
.acct-fav-card .fav-cuisine {
  font-size: 0.74rem;
  color: #999;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.acct-fav-card .fav-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.acct-fav-card .fav-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  color: #888;
  background: #fafaf8;
  border: 1px solid #f0ede8;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.acct-fav-card .fav-tag i {
  font-size: 0.68rem;
  color: #bbb;
}

/* --- Empty State --- */
.acct-empty-state {
  text-align: center;
  padding: 48px 24px;
}
.acct-empty-state .empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f9f8f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #ddd;
  margin: 0 auto 20px;
}
.acct-empty-state h5 {
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.acct-empty-state p {
  color: #999;
  font-size: 0.86rem !important;
  margin-bottom: 20px;
}
.acct-empty-state .btn {
  border-radius: 12px;
}

/* --- Alert Boxes --- */
.acct-alert {
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 0.84rem !important;
  border: none;
  margin-bottom: 16px;
}
.acct-alert.alert-warning {
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
}
.acct-alert.alert-success {
  background: #F0FDF4;
  color: #166534;
  border: 1px solid #BBF7D0;
}
.acct-alert.alert-info {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}

/* --- Section Dividers --- */
.acct-section-divider {
  height: 1px;
  background: #f0ede8;
  margin: 24px 0;
}

/* --- Account Danger Zone --- */
.acct-danger-zone {
  background: #FFFBFB;
  border: 1px solid #FEE2E2;
  border-radius: 14px;
  padding: 24px;
}
.acct-danger-zone h6 {
  color: #DC2626;
  font-weight: 700;
  margin-bottom: 8px;
}
.acct-danger-zone p {
  color: #666;
  font-size: 0.82rem !important;
  line-height: 1.5;
}
.acct-danger-zone .btn-danger-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #DC2626;
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none !important;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid #FCA5A5;
  background: #fff;
}
.acct-danger-zone .btn-danger-link:hover {
  background: #FEF2F2;
  border-color: #F87171;
}

/* --- Account Data Request Zone --- */
.acct-data-zone {
  background: #FAFAFA;
  border: 1px solid #f0ede8;
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 20px;
}
.acct-data-zone h6 {
  color: #1a1a1a;
  font-weight: 700;
  margin-bottom: 8px;
}
.acct-data-zone p {
  color: #666;
  font-size: 0.82rem !important;
  line-height: 1.5;
}
.acct-data-zone .btn-data-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FF6B00;
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none !important;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid #FFD4B0;
  background: #fff;
}
.acct-data-zone .btn-data-link:hover {
  background: #FFF5EB;
  border-color: #FF6B00;
}

/* --- Responsive for Account Section — see MOBILE ACCOUNT NAVIGATION section below --- */

/* --- Profile Photo Overlay (camera icon) --- */
.acct-profile-photo {
  display: inline-block;
}
.acct-profile-photo .el-image {
  border-radius: 50% !important;
  border: 3px solid #f0ede8;
}
.acct-profile-photo .photo-overlay {
  position: absolute;
  bottom: 8px;
  right: -2px;
  width: 34px;
  height: 34px;
  background: #FF6B00;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
}
.acct-profile-photo .photo-overlay:hover {
  background: #E05E00;
  transform: scale(1.08);
}
.acct-profile-photo .photo-overlay .handle {
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acct-profile-photo .layer-black {
  display: none;
}

/* --- Dropdown Actions in Order Rows --- */
.acct-order-row .dropdown-toggle {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafaf8;
  border: 1px solid #f0ede8;
  color: #888;
  transition: all 0.2s;
  padding: 0;
}
.acct-order-row .dropdown-toggle:hover {
  background: #f0ede8;
  color: #1a1a1a;
}
.acct-order-row .dropdown-menu {
  border-radius: 12px;
  border: 1px solid #f0ede8;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  min-width: 180px;
}
.acct-order-row .dropdown-item {
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #555;
  transition: all 0.15s;
}
.acct-order-row .dropdown-item:hover {
  background: #FFF5EB;
  color: #E05E00;
}
.acct-order-row .dropdown-item i {
  font-size: 0.9rem;
  width: 18px;
  text-align: center;
}

/* --- Payment Card Styling --- */
.acct-payment-card,
body.column2-layout .card-listing {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f0ede8;
  padding: 20px;
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
body.column2-layout .card-listing:hover {
  border-color: #e8e5df;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* --- Booking Row Modernize --- */
body.column2-layout .kmrs-row {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f0ede8;
  padding: 18px 20px;
  margin-bottom: 12px;
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
body.column2-layout .kmrs-row:hover {
  border-color: #e8e5df;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* --- El-tabs styling in account pages --- */
body.column2-layout .el-tabs__item {
  font-weight: 500;
  font-size: 0.86rem;
}
body.column2-layout .el-tabs__item.is-active {
  color: #FF6B00;
  font-weight: 600;
}
body.column2-layout .el-tabs__active-bar {
  background-color: #FF6B00;
}

/* --- Override old grey-bg cards in account context --- */
body.column2-layout .grey-bg {
  background: #fafaf8;
  border-radius: 14px;
  border: 1px solid #f0ede8;
}

/* --- Wallet transaction override --- */
body.column2-layout .el-tab-pane .kmrs-row {
  border-radius: 12px;
}

/* --- RTL Support for Account Section --- */
html[dir="rtl"] .acct-sidebar-user {
  flex-direction: row-reverse;
}
html[dir="rtl"] .acct-page-title {
  flex-direction: row-reverse;
}
html[dir="rtl"] .acct-order-row .order-top {
  flex-direction: row-reverse;
}
html[dir="rtl"] .acct-order-row .order-bottom {
  flex-direction: row-reverse;
}
html[dir="rtl"] .acct-address-card .address-actions {
  flex-direction: row-reverse;
}
html[dir="rtl"] body.column2-layout #sidebar .siderbar-menu li.active a::before {
  left: auto;
  right: 0;
  border-radius: 3px 0 0 3px;
}
html[dir="rtl"] .acct-sub-menu .sub-menu li.active a {
  border-right: none;
  border-left: 3px solid #FF6B00;
}

/* =============================================
   ADDRESS POPUPS — Complete UX Overhaul
   ============================================= */

/* ---- New Address Dialog (el-dialog — search/add) ---- */
.el-dialog:has(.search-geocomplete) {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
  max-width: 520px;
}
.el-dialog:has(.search-geocomplete) .el-dialog__header {
  background: linear-gradient(135deg, #FF6B00, #E05E00);
  padding: 22px 28px !important;
  margin: 0 !important;
}
.el-dialog:has(.search-geocomplete) .el-dialog__title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}
.el-dialog:has(.search-geocomplete) .el-dialog__headerbtn {
  top: 18px !important;
  right: 20px !important;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.2) !important;
  border-radius: 50% !important;
}
.el-dialog:has(.search-geocomplete) .el-dialog__headerbtn .el-dialog__close {
  color: #fff !important;
  font-size: 16px;
}
.el-dialog:has(.search-geocomplete) .el-dialog__body {
  padding: 24px 28px 28px !important;
  background: #fff;
}

/* Search input inside new-address dialog */
.el-dialog:has(.search-geocomplete) .search-geocomplete {
  margin-bottom: 16px;
}
.el-dialog:has(.search-geocomplete) .el-autocomplete {
  width: 100% !important;
}
.el-dialog:has(.search-geocomplete) .el-autocomplete .el-input__wrapper {
  border-radius: 14px !important;
  border: 2px solid #e8e5df !important;
  box-shadow: none !important;
  padding: 6px 14px !important;
  background: #fafaf8 !important;
  transition: all 0.25s ease;
}
.el-dialog:has(.search-geocomplete) .el-autocomplete .el-input__wrapper:hover {
  border-color: #d5d0c8 !important;
}
.el-dialog:has(.search-geocomplete) .el-autocomplete .el-input__wrapper.is-focus {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1) !important;
  background: #fff !important;
}
.el-dialog:has(.search-geocomplete) .el-autocomplete .el-input__inner {
  font-size: 0.92rem !important;
  height: 38px !important;
  color: #1a1a1a;
}
.el-dialog:has(.search-geocomplete) .el-autocomplete .el-input__inner::placeholder {
  color: #b5b0a8;
}
.el-dialog:has(.search-geocomplete) .el-autocomplete .el-input__suffix .btn-link {
  color: #FF6B00 !important;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s;
}
.el-dialog:has(.search-geocomplete) .el-autocomplete .el-input__suffix .btn-link:hover {
  background: #FFF5EB;
}
.el-dialog:has(.search-geocomplete) .el-autocomplete .el-input__suffix .zmdi-my-location {
  color: #FF6B00 !important;
}

/* Address list in new-address dialog */
.el-dialog:has(.search-geocomplete) .list-with-icon-button {
  padding: 0 !important;
}
.el-dialog:has(.search-geocomplete) .list-with-icon-button li {
  padding: 14px 12px !important;
  border-radius: 12px;
  margin-bottom: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.el-dialog:has(.search-geocomplete) .list-with-icon-button li:hover {
  background: #FFF8F2;
  border-color: #FFE8D4;
}
.el-dialog:has(.search-geocomplete) .list-with-icon-button li .zmdi-pin {
  color: #FF6B00;
  font-size: 1.2rem;
}
.el-dialog:has(.search-geocomplete) .list-with-icon-button li h5 {
  font-size: 0.84rem !important;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}
.el-dialog:has(.search-geocomplete) .list-with-icon-button .rounded-pill.rounded-button-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px !important;
  background: #f5f4f1;
  border: 1px solid #e8e5df;
  color: #888;
  transition: all 0.2s;
}
.el-dialog:has(.search-geocomplete) .list-with-icon-button .rounded-pill.rounded-button-icon:hover {
  background: #FFF5EB;
  border-color: #FFD4B0;
  color: #FF6B00;
}

/* Alert inside dialogs */
.el-dialog:has(.search-geocomplete) .alert-warning {
  border-radius: 12px;
  border: 1px solid #FDE68A;
  background: #FFFBEB;
  color: #92400E;
  font-size: 0.84rem;
  padding: 12px 16px;
}

/* Autocomplete dropdown suggestions */
.el-autocomplete-suggestion {
  border-radius: 14px !important;
  border: 1px solid #f0ede8 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  margin-top: 6px !important;
  overflow: hidden;
}
.el-autocomplete-suggestion li {
  padding: 12px 18px !important;
  font-size: 0.86rem;
  color: #333;
  line-height: 1.4;
  border-bottom: 1px solid #f5f3f0;
  transition: all 0.15s ease;
}
.el-autocomplete-suggestion li:last-child {
  border-bottom: none;
}
.el-autocomplete-suggestion li:hover,
.el-autocomplete-suggestion li.highlighted {
  background: #FFF8F2 !important;
  color: #E05E00;
}

/* ---- Edit Address Modal (#ModalAddress — map + form) ---- */
#ModalAddress .modal-dialog {
  max-width: 640px;
}
#ModalAddress .modal-content {
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
  overflow: hidden;
}

/* Modal Header */
#ModalAddress .modal-header {
  background: linear-gradient(135deg, #FF6B00, #E05E00) !important;
  padding: 20px 28px !important;
  border-bottom: none !important;
}
#ModalAddress .modal-header .modal-title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}
#ModalAddress .modal-header .btn-circle {
  background: rgba(255,255,255,0.2) !important;
  border: none !important;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
#ModalAddress .modal-header .btn-circle:hover {
  background: rgba(255,255,255,0.35) !important;
}
#ModalAddress .modal-header .btn-circle i {
  color: #fff !important;
  font-size: 16px !important;
}

/* Modal Body */
#ModalAddress .modal-body {
  padding: 0 !important;
  background: #fff;
}

/* Map container */
#ModalAddress .map-small {
  height: 220px !important;
  border-bottom: 3px solid #FF6B00;
  position: relative;
}
#ModalAddress .map-large {
  height: 400px !important;
  border-bottom: 3px solid #FF6B00;
  position: relative;
}

/* Address display row (below map) */
#ModalAddress .modal-body > .row.mt-3 {
  margin: 0 !important;
  padding: 18px 28px !important;
  background: #fafaf8;
  border-bottom: 1px solid #f0ede8;
  align-items: center;
}
#ModalAddress .modal-body > .row.mt-3 h5 {
  font-size: 0.92rem !important;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.4;
}
#ModalAddress .modal-body > .row.mt-3 .btn-black {
  background: #1a1a1a !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  transition: all 0.2s;
}
#ModalAddress .modal-body > .row.mt-3 .btn-black:hover {
  background: #333 !important;
  transform: translateY(-1px);
}

/* Forms section */
#ModalAddress .forms {
  padding: 20px 28px 0 !important;
}
#ModalAddress .forms .form-label-group {
  margin-bottom: 16px;
}
#ModalAddress .forms .form-control {
  border: 1.5px solid #e8e5df !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 0.88rem !important;
  background: #fafaf8 !important;
  transition: all 0.25s ease;
  color: #1a1a1a;
}
#ModalAddress .forms .form-control:focus {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08) !important;
  background: #fff !important;
}
#ModalAddress .forms .form-label-group label {
  font-size: 0.78rem;
  color: #888;
  font-weight: 500;
}
#ModalAddress .forms .custom-select,
#ModalAddress .forms select.form-control {
  border: 1.5px solid #e8e5df !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-size: 0.88rem !important;
  background-color: #fafaf8 !important;
  color: #1a1a1a;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 16px;
}
#ModalAddress .forms .custom-select:focus,
#ModalAddress .forms select.form-control:focus {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08) !important;
  background-color: #fff !important;
}

/* Section headings inside form */
#ModalAddress .forms h5 {
  font-size: 0.82rem !important;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Textarea */
#ModalAddress .forms textarea.form-control {
  min-height: 70px;
  resize: vertical;
}

/* Address label toggle buttons */
#ModalAddress .btn-group-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: none !important;
}
#ModalAddress .btn-group-toggle .btn {
  border-radius: 10px !important;
  border: 1.5px solid #e8e5df !important;
  padding: 8px 18px !important;
  font-size: 0.8rem !important;
  font-weight: 500;
  color: #666;
  background: #fff !important;
  transition: all 0.2s ease;
  flex: 0 0 auto;
}
#ModalAddress .btn-group-toggle .btn:hover {
  border-color: #d5d0c8 !important;
  background: #fafaf8 !important;
}
#ModalAddress .btn-group-toggle .btn.active {
  background: #FFF5EB !important;
  border-color: #FF6B00 !important;
  color: #E05E00 !important;
  font-weight: 600;
}

/* Error alerts */
#ModalAddress #error_message {
  margin: 16px 28px 0 !important;
  border-radius: 12px;
  border: 1px solid #FDE68A;
  background: #FFFBEB;
  color: #92400E;
  font-size: 0.84rem;
  padding: 12px 16px;
}

/* Modal Footer */
#ModalAddress .modal-footer {
  padding: 20px 28px !important;
  border-top: 1px solid #f0ede8 !important;
  background: #fafaf8;
  gap: 12px;
}
#ModalAddress .modal-footer .border {
  border: none !important;
}
#ModalAddress .modal-footer .btn-black {
  background: #f5f4f1 !important;
  color: #555 !important;
  border: 1.5px solid #e8e5df !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.2s;
}
#ModalAddress .modal-footer .btn-black:hover {
  background: #eee !important;
  border-color: #d5d0c8 !important;
}
#ModalAddress .modal-footer .btn-green {
  background: linear-gradient(135deg, #FF6B00, #E05E00) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: 0 2px 8px rgba(255,107,0,0.25);
  transition: all 0.25s;
}
#ModalAddress .modal-footer .btn-green:hover {
  background: linear-gradient(135deg, #E05E00, #CC5200) !important;
  box-shadow: 0 4px 16px rgba(255,107,0,0.35);
  transform: translateY(-1px);
}
#ModalAddress .modal-footer .btn-green:disabled {
  opacity: 0.6;
  transform: none;
}

/* Custom field tooltips */
#ModalAddress .forms .el-tooltip__trigger .el-button {
  color: #FF6B00 !important;
}

/* ---- Responsive Address Popups ---- */
@media (max-width: 575.98px) {
  .el-dialog:has(.search-geocomplete) {
    width: 95% !important;
    margin: 8px auto !important;
    border-radius: 16px !important;
  }
  .el-dialog:has(.search-geocomplete) .el-dialog__header {
    padding: 18px 20px !important;
  }
  .el-dialog:has(.search-geocomplete) .el-dialog__body {
    padding: 18px 20px 22px !important;
  }
  #ModalAddress .modal-dialog {
    margin: 8px !important;
  }
  #ModalAddress .modal-content {
    border-radius: 16px !important;
  }
  #ModalAddress .modal-header {
    padding: 16px 20px !important;
  }
  #ModalAddress .map-small {
    height: 180px !important;
  }
  #ModalAddress .map-large {
    height: 300px !important;
  }
  #ModalAddress .modal-body > .row.mt-3 {
    padding: 14px 20px !important;
  }
  #ModalAddress .forms {
    padding: 16px 20px 0 !important;
  }
  #ModalAddress .modal-footer {
    padding: 16px 20px !important;
    flex-direction: column;
  }
  #ModalAddress .modal-footer .border {
    width: 100%;
  }
  #ModalAddress #error_message,
  #addressModal #error_message {
    margin: 12px 20px 0 !important;
  }
}

/* ---- Checkout / Store Address Modal (#addressModal) — Same styling ---- */
#addressModal .modal-dialog {
  max-width: 640px;
}
#addressModal .modal-content {
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
  overflow: hidden;
}
#addressModal .modal-header {
  background: linear-gradient(135deg, #FF6B00, #E05E00) !important;
  padding: 20px 28px !important;
  border-bottom: none !important;
}
#addressModal .modal-header .modal-title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}
#addressModal .modal-header .btn-circle {
  background: rgba(255,255,255,0.2) !important;
  border: none !important;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
#addressModal .modal-header .btn-circle:hover {
  background: rgba(255,255,255,0.35) !important;
}
#addressModal .modal-header .btn-circle i {
  color: #fff !important;
  font-size: 16px !important;
}
#addressModal .modal-body {
  padding: 0 !important;
  background: #fff;
}
#addressModal .map-small {
  height: 220px !important;
  border-bottom: 3px solid #FF6B00;
  position: relative;
}
#addressModal .map-large {
  height: 400px !important;
  border-bottom: 3px solid #FF6B00;
  position: relative;
}
#addressModal .modal-body > .row.mt-3 {
  margin: 0 !important;
  padding: 18px 28px !important;
  background: #fafaf8;
  border-bottom: 1px solid #f0ede8;
  align-items: center;
}
#addressModal .modal-body > .row.mt-3 h5 {
  font-size: 0.92rem !important;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.4;
}
#addressModal .modal-body > .row.mt-3 .btn-black {
  background: #1a1a1a !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  transition: all 0.2s;
}
#addressModal .modal-body > .row.mt-3 .btn-black:hover {
  background: #333 !important;
  transform: translateY(-1px);
}
#addressModal .forms {
  padding: 20px 28px 0 !important;
}
#addressModal .forms .form-label-group {
  margin-bottom: 16px;
}
#addressModal .forms .form-control {
  border: 1.5px solid #e8e5df !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 0.88rem !important;
  background: #fafaf8 !important;
  transition: all 0.25s ease;
  color: #1a1a1a;
}
#addressModal .forms .form-control:focus {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08) !important;
  background: #fff !important;
}
#addressModal .forms .form-label-group label {
  font-size: 0.78rem;
  color: #888;
  font-weight: 500;
}
#addressModal .forms .custom-select,
#addressModal .forms select.form-control {
  border: 1.5px solid #e8e5df !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-size: 0.88rem !important;
  background-color: #fafaf8 !important;
  color: #1a1a1a;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 16px;
}
#addressModal .forms .custom-select:focus,
#addressModal .forms select.form-control:focus {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08) !important;
  background-color: #fff !important;
}
#addressModal .forms h5 {
  font-size: 0.82rem !important;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
#addressModal .forms textarea.form-control {
  min-height: 70px;
  resize: vertical;
}
#addressModal .btn-group-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: none !important;
}
#addressModal .btn-group-toggle .btn {
  border-radius: 10px !important;
  border: 1.5px solid #e8e5df !important;
  padding: 8px 18px !important;
  font-size: 0.8rem !important;
  font-weight: 500;
  color: #666;
  background: #fff !important;
  transition: all 0.2s ease;
  flex: 0 0 auto;
}
#addressModal .btn-group-toggle .btn:hover {
  border-color: #d5d0c8 !important;
  background: #fafaf8 !important;
}
#addressModal .btn-group-toggle .btn.active {
  background: #FFF5EB !important;
  border-color: #FF6B00 !important;
  color: #E05E00 !important;
  font-weight: 600;
}
#addressModal .alert-warning {
  margin: 16px 28px 0 !important;
  border-radius: 12px;
  border: 1px solid #FDE68A;
  background: #FFFBEB;
  color: #92400E;
  font-size: 0.84rem;
  padding: 12px 16px;
}
#addressModal .modal-footer {
  padding: 20px 28px !important;
  border-top: 1px solid #f0ede8 !important;
  background: #fafaf8;
  gap: 12px;
}
#addressModal .modal-footer .border {
  border: none !important;
}
#addressModal .modal-footer .btn-black {
  background: #f5f4f1 !important;
  color: #555 !important;
  border: 1.5px solid #e8e5df !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.2s;
}
#addressModal .modal-footer .btn-black:hover {
  background: #eee !important;
  border-color: #d5d0c8 !important;
}
#addressModal .modal-footer .btn-green {
  background: linear-gradient(135deg, #FF6B00, #E05E00) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: 0 2px 8px rgba(255,107,0,0.25);
  transition: all 0.25s;
}
#addressModal .modal-footer .btn-green:hover {
  background: linear-gradient(135deg, #E05E00, #CC5200) !important;
  box-shadow: 0 4px 16px rgba(255,107,0,0.35);
  transform: translateY(-1px);
}
#addressModal .modal-footer .btn-green:disabled {
  opacity: 0.6;
  transform: none;
}
#addressModal .forms .el-tooltip__trigger .el-button {
  color: #FF6B00 !important;
}

/* ---- Responsive for checkout address modal ---- */
@media (max-width: 575.98px) {
  #addressModal .modal-dialog {
    margin: 8px !important;
  }
  #addressModal .modal-content {
    border-radius: 16px !important;
  }
  #addressModal .modal-header {
    padding: 16px 20px !important;
  }
  #addressModal .map-small {
    height: 180px !important;
  }
  #addressModal .map-large {
    height: 300px !important;
  }
  #addressModal .modal-body > .row.mt-3 {
    padding: 14px 20px !important;
  }
  #addressModal .forms {
    padding: 16px 20px 0 !important;
  }
  #addressModal .modal-footer {
    padding: 16px 20px !important;
    flex-direction: column;
  }
  #addressModal .modal-footer .border {
    width: 100%;
  }
  #addressModal .alert-warning {
    margin: 12px 20px 0 !important;
  }
}

/* ---- Current Address / Recent Address Dialogs ---- */
.el-dialog:has(.list-with-icon-button) {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
}
.el-dialog:has(.list-with-icon-button) .el-dialog__header {
  background: linear-gradient(135deg, #FF6B00, #E05E00);
  padding: 22px 28px !important;
  margin: 0 !important;
}
.el-dialog:has(.list-with-icon-button) .el-dialog__title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}
.el-dialog:has(.list-with-icon-button) .el-dialog__headerbtn {
  top: 18px !important;
  right: 20px !important;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.2) !important;
  border-radius: 50% !important;
}
.el-dialog:has(.list-with-icon-button) .el-dialog__headerbtn .el-dialog__close {
  color: #fff !important;
}
.el-dialog:has(.list-with-icon-button) .el-dialog__body {
  padding: 20px 28px 28px !important;
}

/* ---- Address Selection Radio Groups (current/recent address dialogs) ---- */
.custom-element-radio .el-radio.is-bordered {
  border-radius: 12px !important;
  border: 1.5px solid #e8e5df !important;
  padding: 14px 16px !important;
  margin-bottom: 8px;
  transition: all 0.2s ease;
  height: auto !important;
  line-height: 1.4;
}
.custom-element-radio .el-radio.is-bordered:hover {
  border-color: #FFD4B0 !important;
  background: #FFF8F2;
}
.custom-element-radio .el-radio.is-bordered.is-checked {
  border-color: #FF6B00 !important;
  background: #FFF5EB !important;
}
.custom-element-radio .el-radio__input.is-checked .el-radio__inner {
  background: #FF6B00 !important;
  border-color: #FF6B00 !important;
}
.custom-element-radio .el-radio__input.is-checked + .el-radio__label {
  color: #1a1a1a !important;
}
.custom-element-radio .el-radio .font-weight-bold,
.custom-element-radio .el-radio .text-dark {
  font-size: 0.88rem;
  font-weight: 600 !important;
  margin-bottom: 2px;
}

/* El-button success type (used across address dialogs) */
.el-button--success {
  background: linear-gradient(135deg, #FF6B00, #E05E00) !important;
  border-color: #FF6B00 !important;
  border-radius: 10px !important;
  font-weight: 600;
  transition: all 0.2s;
}
.el-button--success:hover {
  background: linear-gradient(135deg, #E05E00, #CC5200) !important;
  border-color: #E05E00 !important;
  box-shadow: 0 2px 8px rgba(255,107,0,0.25);
}

/* El-select and El-input in address dialogs */
.el-dialog .el-select .el-input__wrapper,
.el-dialog .el-input .el-input__wrapper {
  border-radius: 10px !important;
  border: 1.5px solid #e8e5df !important;
  box-shadow: none !important;
  transition: all 0.25s ease;
}
.el-dialog .el-select .el-input__wrapper:hover,
.el-dialog .el-input .el-input__wrapper:hover {
  border-color: #d5d0c8 !important;
}
.el-dialog .el-select .el-input__wrapper.is-focus,
.el-dialog .el-input .el-input__wrapper.is-focus {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08) !important;
}

/* ---- Modal backdrop darkening for all address modals ---- */
#ModalAddress.modal.show ~ .modal-backdrop,
#addressModal.modal.show ~ .modal-backdrop {
  opacity: 0.5;
}

/* ---- Smooth modal transitions ---- */
#ModalAddress .modal-dialog,
#addressModal .modal-dialog {
  transition: transform 0.3s ease-out;
}

/* =============================================
   MOBILE ACCOUNT NAVIGATION & LAYOUT
   ============================================= */

/* --- Mobile Account Nav Container --- */
#acct-mobile-nav {
  background: #fff;
  border-bottom: 1px solid #f0ede8;
  position: sticky;
  top: 0;
  z-index: 1020;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* --- Mobile User Bar --- */
.acct-mobile-user-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
}
.acct-mob-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f0ede8;
  flex-shrink: 0;
}
.acct-mob-user-info {
  flex: 1;
  min-width: 0;
}
.acct-mob-user-info h6 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-mob-user-info p {
  margin: 0;
  font-size: 0.72rem !important;
  color: #999;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-mob-logout {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fef5f5;
  color: #c0392b !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: all 0.2s;
  text-decoration: none !important;
  border: 1px solid #fce8e8;
}
.acct-mob-logout:hover {
  background: #fde2e2;
  border-color: #fcc;
}

/* --- Mobile Nav Scroll Bar --- */
.acct-mobile-nav-scroll {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  padding: 0 16px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.acct-mobile-nav-scroll::-webkit-scrollbar {
  display: none;
}
.acct-mob-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #666;
  background: #f9f8f6;
  border: 1.5px solid transparent;
  white-space: nowrap;
  text-decoration: none !important;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.acct-mob-nav-item i {
  font-size: 0.92rem;
}
.acct-mob-nav-item:hover {
  color: #555;
  background: #f5f3f0;
  border-color: #e8e5df;
}
.acct-mob-nav-item.active {
  background: #FFF5EB;
  color: #E05E00;
  border-color: #FFD4B0;
  font-weight: 600;
}
.acct-mob-nav-item.active i {
  color: #FF6B00;
}

/* --- Mobile: Hide desktop-only top-nav on mobile for account pages --- */
@media (max-width: 991.98px) {
  body.column2-layout #top-nav {
    position: static;
    border-bottom: none;
    box-shadow: none;
    padding: 10px 16px !important;
    background: #fff;
  }
  body.column2-layout #main-container {
    padding-top: 0;
    padding-left: 0;
  }
  body.column2-layout #main-container > .container-fluid {
    padding: 16px;
    max-width: 100%;
  }

  /* Hide the profile mobile header avatar section since we have the nav bar */
  .acct-mobile-header {
    padding: 10px 16px 0;
    margin-bottom: 8px;
  }
  .acct-mobile-header .acct-mobile-avatar {
    width: 56px;
    height: 56px;
  }

  /* Profile layout */
  .acct-profile-layout {
    flex-direction: column;
  }
  .acct-profile-sidebar {
    display: none !important;
  }
  .acct-profile-main {
    width: 100% !important;
  }
  
  /* Page title */
  .acct-page-title {
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }
  .acct-page-title .acct-title-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    border-radius: 10px;
  }
  .acct-page-title .acct-title-text h4 {
    font-size: 1rem;
  }
  .acct-page-title .acct-title-text p {
    font-size: 0.75rem !important;
  }

  /* Cards */
  .acct-card-body {
    padding: 16px;
  }
  .acct-card-header {
    padding: 14px 16px;
  }
  
  /* Form groups */
  .acct-card .form-label-group {
    margin-bottom: 14px;
  }
  
  /* Orders stats */
  .acct-orders-stats {
    gap: 8px;
  }
  .acct-stat-card {
    padding: 12px;
  }
  .acct-stat-card .stat-value {
    font-size: 1.1rem;
  }
  .acct-stat-card .stat-label {
    font-size: 0.68rem;
  }

  /* Order rows */
  .acct-order-row {
    padding: 14px;
  }
  .acct-order-row .order-top {
    gap: 10px;
    margin-bottom: 8px;
  }
  .acct-order-row .order-top .order-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .acct-order-row .order-top .order-merchant h6 {
    font-size: 0.84rem;
  }
  .acct-order-row .order-meta .badge {
    font-size: 0.64rem;
    padding: 3px 8px;
  }
  .acct-order-row .order-bottom .order-total {
    font-size: 0.84rem;
  }

  /* Address cards */
  .acct-address-card {
    padding: 14px;
  }

  /* Favourites */
  .acct-fav-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .acct-fav-card .fav-img-wrap,
  .acct-fav-card .fav-cover-img,
  .acct-fav-card .fav-cover-img img,
  .acct-fav-card .fav-img-wrap .el-image,
  .acct-fav-card .fav-img-wrap .el-image img {
    height: 160px;
  }
  .acct-fav-card .fav-body {
    padding: 12px 14px 14px;
  }
  .acct-fav-card .fav-name {
    font-size: 0.86rem;
  }
  
  /* Danger/Data zones */
  .acct-danger-zone,
  .acct-data-zone {
    padding: 16px;
  }

  /* Search bar */
  .acct-search-bar {
    margin-bottom: 14px;
  }
  .acct-search-bar input {
    font-size: 0.82rem;
    padding: 10px 0;
  }

  /* Empty state */
  .acct-empty-state {
    padding: 32px 16px;
  }
  .acct-empty-state .empty-icon {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
    margin-bottom: 14px;
  }

  /* El-tabs (profile sub-tabs) */
  .el-tabs .el-tabs__header {
    margin-bottom: 16px;
  }
  .el-tabs .el-tabs__item {
    font-size: 0.82rem !important;
    padding: 0 12px !important;
  }

  /* Bootstrap rows in account */
  body.column2-layout .row {
    margin-left: -8px;
    margin-right: -8px;
  }
  body.column2-layout .row > [class*="col"] {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Booking rows */
  .acct-booking-row {
    padding: 14px;
  }

  /* Payment cards */
  .acct-payment-card {
    padding: 14px;
  }
}

/* --- Extra small screens --- */
@media (max-width: 575.98px) {
  /* User bar tighter */
  .acct-mobile-user-bar {
    padding: 12px 14px 8px;
    gap: 10px;
  }
  .acct-mob-avatar {
    width: 36px;
    height: 36px;
  }
  .acct-mob-user-info h6 {
    font-size: 0.82rem;
  }
  .acct-mob-logout {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  /* Nav items smaller */
  .acct-mobile-nav-scroll {
    padding: 0 14px 10px;
    gap: 3px;
  }
  .acct-mob-nav-item {
    padding: 7px 11px;
    font-size: 0.74rem;
    gap: 5px;
    border-radius: 8px;
  }
  .acct-mob-nav-item i {
    font-size: 0.84rem;
  }

  /* Container padding */
  body.column2-layout #main-container > .container-fluid {
    padding: 12px;
  }

  /* Stats 2-col wrap */
  .acct-orders-stats {
    flex-wrap: wrap;
  }
  .acct-stat-card {
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
    padding: 10px;
  }
  .acct-stat-card .stat-value {
    font-size: 1rem;
  }

  /* Order row */
  .acct-order-row {
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 12px;
  }
  .acct-order-row .order-top .order-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  .acct-order-row .order-top .order-merchant h6 {
    font-size: 0.8rem;
  }
  .acct-order-row .order-top .order-merchant p {
    font-size: 0.68rem !important;
  }

  /* Address cards */
  .acct-address-card {
    padding: 12px;
    border-radius: 12px;
  }
  .acct-address-card .address-label-tag {
    font-size: 0.68rem;
    padding: 3px 10px;
  }
  .acct-address-card .address-text {
    font-size: 0.78rem !important;
    margin-bottom: 10px;
  }
  .acct-address-card .address-actions {
    gap: 6px;
  }
  .acct-address-card .address-actions .btn-acct-action {
    padding: 6px 10px;
    font-size: 0.72rem;
  }

  /* Favourites */
  .acct-fav-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .acct-fav-card .fav-img-wrap,
  .acct-fav-card .fav-cover-img,
  .acct-fav-card .fav-cover-img img,
  .acct-fav-card .fav-img-wrap .el-image,
  .acct-fav-card .fav-img-wrap .el-image img {
    height: 140px;
  }
  .acct-fav-card .fav-body {
    padding: 10px 12px 12px;
  }
  .acct-fav-card .fav-name {
    font-size: 0.82rem;
  }
  .acct-fav-card .fav-rating-pill {
    font-size: 0.66rem;
    padding: 2px 6px;
  }
  .acct-fav-card .fav-tag {
    font-size: 0.62rem;
    padding: 2px 6px;
  }

  /* Buttons */
  .acct-card .btn,
  .acct-card-body .btn {
    font-size: 0.82rem;
    padding: 10px 16px;
  }

  /* Modals on mobile */
  .modal-dialog {
    margin: 8px !important;
  }

  /* Profile header on mobile */
  .acct-mobile-header {
    padding: 8px 14px 0;
    margin-bottom: 4px;
  }
  .acct-mobile-header .acct-mobile-avatar {
    width: 48px;
    height: 48px;
  }
  .acct-mobile-header h5 {
    font-size: 0.9rem;
    margin-top: 4px;
  }
  .acct-mobile-header p {
    font-size: 0.72rem !important;
  }

  /* Tables responsive */
  body.column2-layout .table-responsive {
    border-radius: 12px;
    border: 1px solid #f0ede8;
  }

  /* Danger / data zones */
  .acct-danger-zone,
  .acct-data-zone {
    padding: 14px;
    border-radius: 12px;
  }
  .acct-danger-zone h6,
  .acct-data-zone h6 {
    font-size: 0.88rem;
  }
  .acct-danger-zone p,
  .acct-data-zone p {
    font-size: 0.78rem !important;
  }
  .acct-danger-zone .btn-danger-link,
  .acct-data-zone .btn-data-link {
    font-size: 0.78rem;
    padding: 6px 12px;
  }
}

/* --- RTL support for mobile nav --- */
html[dir="rtl"] .acct-mobile-user-bar {
  flex-direction: row-reverse;
}
html[dir="rtl"] .acct-mob-user-info {
  text-align: right;
}
html[dir="rtl"] .acct-mobile-nav-scroll {
  direction: rtl;
}
html[dir="rtl"] .acct-mob-nav-item {
  flex-direction: row-reverse;
}

/* --- Profile Sub-Menu on Mobile (profile/password/notifications/manage_account) --- */
.acct-profile-submenu {
  padding: 0 16px;
}
.acct-profile-submenu .menu-carousel {
  display: flex;
  flex-wrap: nowrap;
}
.acct-profile-submenu .owl-carousel .owl-stage {
  display: flex;
  gap: 4px;
}
.acct-profile-submenu .owl-carousel .owl-item {
  width: auto !important;
}
.acct-profile-submenu .owl-carousel .owl-item a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 500;
  color: #666;
  background: #f5f3f0;
  border: 1.5px solid transparent;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.2s;
}
.acct-profile-submenu .owl-carousel .owl-item a:hover {
  color: #555;
  background: #eee;
  border-color: #e8e5df;
}
.acct-profile-submenu .owl-carousel .owl-item a.active {
  background: #FFF5EB;
  color: #E05E00;
  border-color: #FFD4B0;
  font-weight: 600;
}

/* --- Mobile Profile Avatar (upload) — compact style --- */
@media (max-width: 991.98px) {
  .acct-mobile-header {
    text-align: center;
    padding: 12px 16px 4px;
    margin-bottom: 4px;
  }
  .acct-mobile-header .avatar-uploader {
    margin-bottom: 0 !important;
    display: inline-block;
  }
  .acct-mobile-header .avatar-uploader .el-upload {
    border: 2px dashed #e0ddd8;
    border-radius: 50%;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s;
    background: #f9f8f6;
  }
  .acct-mobile-header .avatar-uploader .el-upload:hover {
    border-color: #FF6B00;
  }
  .acct-mobile-header .avatar-uploader .avatar-uploader-icon {
    color: #999;
    font-size: 1.2rem;
    width: auto;
    height: auto;
  }
  .acct-mobile-header .avatar-uploader .avatar-uploader-icon i {
    color: #999;
  }
  .acct-mobile-header .acct-mobile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    display: block;
  }
}

/* --- Scroll active nav item into view on load --- */
@media (max-width: 991.98px) {
  .acct-mobile-nav-scroll {
    scroll-behavior: smooth;
  }
}

/* =============================================
   EMAIL PREFERENCES PAGE — Full Redesign
   ============================================= */

/* --- Layout --- */
.acct-email-layout {
  display: flex;
  gap: 32px;
  max-width: 960px;
}
.acct-email-sidebar {
  width: 280px;
  flex-shrink: 0;
}
.acct-email-main {
  flex: 1;
  min-width: 0;
}

/* --- Sidebar User Card (compact) --- */
.acct-email-user-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f0ede8;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.acct-email-avatar-wrap {
  margin-bottom: 12px;
}
.acct-email-avatar-wrap .acct-profile-photo .el-image,
.acct-email-avatar-wrap .acct-profile-photo .el-image img {
  width: 72px !important;
  height: 72px !important;
}
.acct-email-user-card h6 {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #1a1a1a;
}
.acct-email-user-card p {
  margin: 0;
  font-size: 0.76rem !important;
  color: #999;
}

/* --- Main Card --- */
.acct-email-card {
  border-radius: 16px;
  border: 1px solid #f0ede8;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.acct-email-card .acct-card-body {
  padding: 24px;
}

/* --- Section Header --- */
.acct-email-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.acct-email-section-header i {
  font-size: 1.1rem;
  color: #FF6B00;
}
.acct-email-section-header span {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
}

/* --- Description --- */
.acct-email-desc {
  color: #888;
  font-size: 0.84rem !important;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* --- Toggle Row --- */
.acct-email-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: #fafaf8;
  border: 1.5px solid #f0ede8;
  border-radius: 12px;
}
.acct-email-toggle-info {
  flex: 1;
  min-width: 0;
}
.acct-email-toggle-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
  margin-bottom: 2px;
}
.acct-email-toggle-hint {
  display: block;
  font-size: 0.76rem;
  color: #999;
  line-height: 1.4;
}

/* --- Toggle Switch Component --- */
.acct-toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
.acct-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.acct-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ddd;
  border-radius: 20px;
  transition: all 0.3s ease;
}
.acct-toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.acct-toggle-switch input:checked + .acct-toggle-slider {
  background: #FF6B00;
}
.acct-toggle-switch input:checked + .acct-toggle-slider::before {
  transform: translateX(24px);
}
.acct-toggle-switch input:focus + .acct-toggle-slider {
  box-shadow: 0 0 0 3px rgba(255,107,0,0.15);
}

/* --- Status Row --- */
.acct-email-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0ede8;
}
.acct-email-status-label {
  font-size: 0.78rem;
  color: #999;
  font-weight: 500;
}

/* --- Status Pill Badges --- */
.acct-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
}
.acct-status-pill-success {
  background: #DCFCE7;
  color: #166534;
}
.acct-status-pill-warning {
  background: #FEF3C7;
  color: #92400E;
}
.acct-status-pill-neutral {
  background: #f5f3f0;
  color: #888;
}

/* --- Footer Note --- */
.acct-email-footer-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  background: #fafaf8;
  border-radius: 12px;
  border: 1px solid #f0ede8;
}
.acct-email-footer-note i {
  font-size: 1rem;
  color: #22C55E;
  flex-shrink: 0;
}
.acct-email-footer-note span {
  font-size: 0.78rem;
  color: #888;
  line-height: 1.5;
}

/* --- Email Preferences Responsive --- */
@media (max-width: 991.98px) {
  .acct-email-layout {
    flex-direction: column;
    gap: 16px;
  }
  .acct-email-sidebar {
    display: none !important;
  }
  .acct-email-main {
    width: 100%;
  }
  .acct-email-card .acct-card-body {
    padding: 20px;
  }
}
@media (max-width: 575.98px) {
  .acct-email-card .acct-card-body {
    padding: 16px;
  }
  .acct-email-toggle-row {
    padding: 14px 16px;
    gap: 12px;
  }
  .acct-email-toggle-label {
    font-size: 0.82rem;
  }
  .acct-email-section-header span {
    font-size: 0.88rem;
  }
  .acct-email-footer-note {
    padding: 10px 14px;
  }
}

/* =============================================
   BOOKING CARDS — Mobile-friendly Redesign
   ============================================= */

.acct-booking-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f0ede8;
  padding: 18px 20px;
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.acct-booking-card:hover {
  border-color: #e8e5df;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.acct-booking-card .booking-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.acct-booking-card .booking-merchant {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.acct-booking-card .booking-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1.5px solid #f0ede8;
  flex-shrink: 0;
}
.acct-booking-card .booking-merchant-info {
  min-width: 0;
}
.acct-booking-card .booking-merchant-info h6 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.acct-booking-card .booking-merchant-info p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.acct-booking-card .booking-actions {
  flex-shrink: 0;
}
.acct-booking-card .acct-booking-dots {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafaf8;
  border: 1px solid #f0ede8;
  color: #888;
  transition: all 0.2s;
  padding: 0;
}
.acct-booking-card .acct-booking-dots:hover {
  background: #f0ede8;
  color: #1a1a1a;
}
.acct-booking-card .booking-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #f5f3f0;
  flex-wrap: wrap;
}
.acct-booking-card .booking-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.acct-booking-card .booking-id {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a1a;
}
.acct-booking-card .booking-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .acct-booking-card {
    padding: 14px;
    border-radius: 12px;
  }
  .acct-booking-card .booking-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .acct-booking-card .booking-merchant-info h6 {
    font-size: 0.84rem;
  }
  .acct-booking-card .booking-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .acct-booking-card .booking-status {
    width: 100%;
    justify-content: space-between;
  }
}

/* =============================================
   VOUCHERS PAGE — Mobile-friendly Redesign
   ============================================= */

.acct-voucher-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f0ede8;
  padding: 18px 20px;
  margin-bottom: 12px;
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.acct-voucher-card:hover {
  border-color: #e8e5df;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.acct-voucher-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.acct-voucher-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1.5px solid #f0ede8;
  flex-shrink: 0;
}
.acct-voucher-info {
  flex: 1;
  min-width: 0;
}
.acct-voucher-info h6 {
  margin: 0 0 2px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
}
.acct-voucher-info p {
  margin: 0;
  font-size: 0.74rem;
  color: #999;
}
.acct-voucher-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f5f3f0;
}
.acct-voucher-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  background: #FFF5EB;
  border: 1px solid #FFE8D4;
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: #E05E00;
}
.acct-voucher-dates {
  font-size: 0.74rem;
  color: #999;
}
.acct-voucher-discount {
  font-size: 0.9rem;
  font-weight: 700;
  color: #22C55E;
}

@media (max-width: 575.98px) {
  .acct-voucher-card {
    padding: 14px;
    border-radius: 12px;
  }
  .acct-voucher-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .acct-voucher-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================
   ADDITIONAL MOBILE FIXES — Account Sections
   ============================================= */

/* --- Wallet/Points tabs overflow fix on mobile --- */
@media (max-width: 767.98px) {
  body.column2-layout .el-tabs__nav-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.column2-layout .el-tabs__nav-scroll {
    overflow: visible;
  }
  body.column2-layout .el-tabs__nav {
    flex-wrap: nowrap;
  }
  body.column2-layout .el-tabs__item {
    font-size: 0.78rem !important;
    padding: 0 10px !important;
    white-space: nowrap;
  }
}

/* --- Payment page: button+title flex wrap on mobile --- */
@media (max-width: 575.98px) {
  #vue-my-payments .d-flex.align-items-center.justify-content-between.flex-wrap {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  #vue-my-payments .acct-btn-primary {
    width: 100%;
    text-align: center;
  }
  /* Payment cards: full width on mobile */
  #vue-my-payments .col-lg-3.col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  #vue-my-payments .col-lg-3.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* --- Wallet page: button+title flex wrap on mobile --- */
@media (max-width: 575.98px) {
  #vue-my-wallet .d-flex.align-items-center.justify-content-between.flex-wrap {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  #vue-my-wallet .acct-btn-primary {
    width: 100%;
    text-align: center;
  }
}

/* --- Favourites: 1 column on small mobile (grid) --- */
@media (max-width: 575.98px) {
  .acct-fav-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Addresses: ensure cards stack on very small screens --- */
@media (max-width: 575.98px) {
  #vue-my-addresses .col-lg-4.col-md-6,
  #vue-my-addresses .col-lg-6.col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* --- General: Prevent horizontal overflow on account pages --- */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100vw;
}
body.column2-layout #top-nav > .row {
  margin-left: 0;
  margin-right: 0;
}
body.column2-layout #top-nav > .row > .col {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 991.98px) {
  body.column2-layout #main-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    max-width: 100vw;
  }
  body.column2-layout #main-container > .container-fluid {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-x: clip;
  }
  body.column2-layout #acct-mobile-nav {
    max-width: 100vw;
    overflow-x: hidden;
    overflow-x: clip;
  }
}

/* --- Password field wrap (toggle button positioning) --- */
.pwd-field-wrap {
  position: relative;
}
.pwd-toggle-btn {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  z-index: 5;
  font-size: 1rem;
  transition: color 0.2s;
}
.pwd-toggle-btn:hover {
  color: #FF6B00;
}

/* --- Block button variant --- */
.acct-btn-block {
  width: 100%;
  display: flex;
}

/* =============================================
   WALLET / POINTS TRANSACTION ROWS
   ============================================= */

.acct-wallet-tx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #f0ede8;
  padding: 14px 18px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.acct-wallet-tx-row:hover {
  border-color: #e8e5df;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wallet-tx-info {
  flex: 1;
  min-width: 0;
}
.wallet-tx-desc {
  font-size: 0.86rem;
  color: #1a1a1a;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-word;
}
.wallet-tx-date {
  display: block;
  font-size: 0.72rem;
  color: #999;
  margin-top: 2px;
}
.wallet-tx-amount {
  flex-shrink: 0;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .acct-wallet-tx-row {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 10px;
  }
  .wallet-tx-desc {
    font-size: 0.82rem;
  }
  .wallet-tx-amount {
    font-size: 0.86rem;
  }
}

/* =============================================
   MERCHANT PAGE — Premium UX Overhaul
   ============================================= */

/* --- 1. Grid Layout Rebalance (2-7-3 → 32px gap) --- */
.section-menu > .container > .row {
  margin-left: -16px;
  margin-right: -16px;
}
.section-menu .menu-left,
.section-menu .menu-center,
.section-menu .menu-right {
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 992px) {
  /* Only apply 2-7-3 grid when all 3 columns exist (menu.php layout) */
  .section-menu .menu-left {
    flex: 0 0 16.666%;
    max-width: 16.666%;
  }
  .section-menu .menu-left + .menu-center {
    flex: 0 0 56.333%;
    max-width: 56.333%;
  }
  .section-menu .menu-left ~ .menu-right {
    flex: 0 0 27%;
    max-width: 27%;
  }
}

/* --- 2. Typography Scale --- */
.merchant-top-header h4 {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.section-menu h5,
.sticky-sidebar h5 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: #1a1a1a;
}
.menu-item-simple-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
.menu-item-simple-price {
  font-size: 14px !important;
  font-weight: 600 !important;
}
.menu-item-simple-desc {
  font-size: 13px !important;
  color: #777 !important;
  line-height: 1.45 !important;
}
.merchant-address-line {
  font-size: 14px !important;
  color: #666 !important;
  line-height: 1.4;
}
.merchant-rating {
  font-size: 14px !important;
}
.merchant-rating .rating-count {
  font-size: 13px !important;
  font-weight: 400;
}

/* --- 3. Cart Sidebar — Reduced Visual Weight --- */
.menu-right .sticky-cart .inner-wrapper-sticky {
  background: #F9FAFB !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 20px 18px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
  border-top: 1px solid #F1F1F1;
  transition: box-shadow 160ms ease;
}
.menu-right .sticky-cart .inner-wrapper-sticky .section-cart .items {
  border-color: #f0ede8 !important;
}
/* Cart title font-weight reduction for secondary headings */
.menu-right .sticky-cart h6 {
  font-weight: 600;
}

/* --- 4. Sticky Cart — Plugin handles sticky, we only scroll items --- */
@media (min-width: 992px) {
  .section-menu .menu-right {
    margin-top: 24px;
    margin-bottom: 32px;
    padding-left: 8px !important;
    padding-right: 4px !important;
  }
  /* Override StickySidebar plugin's inline height + position that clips content */
  .menu-right .sticky-cart {
    height: auto !important;
    overflow: visible !important;
  }
  /* Only the items list scrolls — summary, delivery, checkout stay visible below */
  .cart-items-scroll {
    max-height: 45vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.12) transparent;
  }
  .cart-items-scroll::-webkit-scrollbar {
    width: 4px;
  }
  .cart-items-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .cart-items-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 4px;
  }
  .cart-items-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.2);
  }
}

/* --- 5. Search Input Height (44px) --- */
.menu-search-wrapper .el-input--large .el-input__wrapper {
  min-height: 44px !important;
  border-radius: 12px !important;
  border: 1.5px solid #E5E7EB !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 6px 16px !important;
}
.menu-search-wrapper .el-input--large .el-input__wrapper:hover,
.menu-search-wrapper .el-input--large .el-input__wrapper.is-focus {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08) !important;
  background: #fff !important;
}

/* --- 6. Primary Button Heights (48px) --- */
.section-menu .btn-green,
.section-menu .btn-black,
.checkout-btn-wrap .btn {
  min-height: 48px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 12px 24px;
}

/* --- 7. Delivery/Pickup Tab Buttons (40px height) --- */
.cart-service-tabs .btn-group-rounded {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.cart-service-tabs .btn-group-rounded .btn {
  min-height: 40px;
  font-size: 13px;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.mobile-service-tabs .btn-group-rounded .btn {
  min-height: 36px;
}

/* --- 8. Unified Border Radius System --- */
/* Cards = 12px, Buttons = 12px, Pills = 999px */
.section-menu .btn,
.section-menu .el-button {
  border-radius: 12px;
}
/* Pills = 999px */
.section-menu .rounded-pill,
.section-menu .badge {
  border-radius: 999px;
}

/* --- 9. Standardized Card Padding (24px) --- */
.section-menu .el-card__body {
  padding: 24px !important;
}

/* --- 10. Menu Item Info Padding Standardization --- */
.menu-item-simple-info {
  padding: 16px 14px 16px 16px !important;
}

/* --- 11. Promotional Badges — Collapse Secondary --- */
.delivery-info-row {
  gap: 16px;
}
.delivery-info-item {
  font-size: 13px;
}

/* --- 12. Category Sidebar — Improved Readability --- */
.sticky-sidebar .menu-category .nav-link {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #444;
  line-height: 1.6;
  transition: all 0.2s ease;
  margin-bottom: 2px;
}
.sticky-sidebar .menu-category .nav-link:hover {
  background: #f5f3f0;
  color: #1a1a1a;
}
.sticky-sidebar .menu-category .nav-link.active,
.sticky-sidebar .menu-category li.active .nav-link {
  background: #FFF5EB;
  color: #FF6B00;
  font-weight: 600;
}

/* --- 13. Product Card Vertical Spacing (32px between categories) --- */
.section-menu section {
  margin-bottom: 32px;
}
.section-menu section:last-child {
  margin-bottom: 0;
}

/* --- 14. List Item Rows (left_image layout) — Subtle Separator --- */
.section-menu .list-item-rows {
  border-radius: 0;
  transition: background-color 0.2s ease;
  margin-bottom: 0;
  overflow: hidden;
  padding: 10px 0;
}
.section-menu .list-item-rows:hover {
  background-color: rgba(0,0,0,0.015);
}
.section-menu .list-item-rows:active {
  background-color: rgba(0,0,0,0.03);
}

/* --- 15. Two-Column Layout Cards — Unified Radius --- */
.section-menu .el-card {
  border-radius: 12px !important;
  overflow: hidden;
}
.section-menu .el-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* --- 16. 8px Spacing System — Global Margins --- */
.section-menu .mb-1 { margin-bottom: 8px !important; }
.section-menu .mb-3 { margin-bottom: 24px !important; }
.section-menu .mb-lg-3 { margin-bottom: 24px !important; }

/* --- 17. WCAG AA Contrast — Primary CTA --- */
.btn-green,
.section-menu .btn-green {
  background: #E05E00 !important;
  border-color: #E05E00 !important;
  color: #fff !important;
}
.btn-green:hover,
.section-menu .btn-green:hover {
  background: #C85200 !important;
  border-color: #C85200 !important;
}

/* --- 18. Merchant Page Responsive Overrides --- */
@media (max-width: 991.98px) {
  .merchant-top-header h4 {
    font-size: 22px !important;
  }
  .section-menu h5 {
    font-size: 18px;
  }
  .menu-item-simple-info {
    padding: 12px 10px 12px 12px !important;
  }
  .section-menu section {
    margin-bottom: 24px;
  }
  .section-menu .list-item-rows:hover {
    background-color: transparent;
  }
}
@media (max-width: 575.98px) {
  .merchant-top-header h4 {
    font-size: 20px !important;
  }
  .section-menu .el-card__body {
    padding: 16px !important;
  }
  .section-menu section {
    margin-bottom: 20px;
  }
}

/* --- 19. Cart Items — Visual Separation + Price Weight --- */
.cart-items-scroll > .items,
.section-cart > .items {
  background: #F9F9F9;
  border-radius: 8px;
  padding: 10px 10px !important;
  margin-bottom: 2px;
}
.cart-items-scroll > .items:nth-child(even),
.section-cart > .items:nth-child(even) {
  background: #fff;
}
.cart-items-scroll > .items:last-child,
.section-cart > .items:last-child {
  border-bottom: none !important;
}

/* --- 20. Product Info Link — Higher Contrast --- */
.menu-item-info-link {
  color: #2B6CB0 !important;
  font-weight: 500 !important;
}
.menu-item-info-link:hover {
  color: #1A4D80 !important;
}

/* --- 21. Checkout Button — Unified 12px Radius --- */
.section-cart .btn,
.section-cart .el-button,
.checkout-btn-wrap .btn,
.checkout-btn-wrap .el-button {
  border-radius: 12px !important;
}

/* --- 22. Category Section — Title/Description Proximity Fix --- */
.section-menu section > h5 {
  margin-bottom: 0 !important;
}
.section-menu section > h5 + p {
  margin-top: 4px !important;
  margin-bottom: 12px !important;
  color: #777;
  font-size: 13px;
  line-height: 1.4;
}

/* --- 23. Badge Noise Reduction — Unified Color System --- */
.menu-item-badges .menu-item-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  height: auto;
  line-height: 1.5;
}
/* Discount/offer badges: red accent (primary attention) */
/* Status badges (new, trending, recommended): muted, secondary */
.menu-item-badge.badge-new,
.menu-item-badge.badge-trending,
.menu-item-badge.badge-recommended,
.menu-item-badge.badge-bestseller {
  opacity: 0.85;
}

/* --- 24. Category Banner — Unified 12px Radius --- */
.cat-banner {
  border-radius: 12px !important;
}
@media (max-width: 767px) {
  .cat-banner {
    border-radius: 10px !important;
  }
}
/* --- 27. Category Banner — Better UX --- */
.cat-banner-title {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}
.cat-banner-desc {
  color: #fff !important;
  margin-top: 1px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}

.section-menu h5{
margin-bottom:5px;
}

/* --- 28. Opening Hours Accordion Display --- */
.oh-day-block {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
.oh-day-block:last-child {
  border-bottom: none;
}
.oh-day-today {
  background: #FFF8F0;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 -10px;
}
.oh-day-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.oh-day-name {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}
.oh-today-badge {
  font-size: 10px;
  font-weight: 600;
  background: #FF6B00;
  color: #fff;
  padding: 1px 7px;
  border-radius: 10px;
  line-height: 1.6;
}
.oh-closed-badge {
  font-size: 11px;
  color: #e53935;
  font-weight: 500;
}
.oh-day-closed .oh-day-name {
  color: #aaa;
}
.oh-slot-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
}
.oh-slot-time {
  font-size: 13px;
  color: #555;
}
.oh-slot-sep {
  font-size: 12px;
  color: #999;
}
.oh-svc-row {
  justify-content: space-between;
}
.oh-svc-label {
  font-size: 12px;
  color: #888;
  font-weight: 500;
  background: #f5f5f5;
  padding: 1px 8px;
  border-radius: 4px;
}
.oh-toggle-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: 1px dashed #ddd;
  border-radius: 8px;
  padding: 6px 0;
  margin-top: 8px;
  font-size: 13px;
  color: #FF6B00;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.oh-toggle-btn:hover {
  background: #FFF8F0;
  border-color: #FF6B00;
}

/* --- 29. Service Availability — Closed State --- */
.service-closed {
  opacity: 0.65;
}
.service-closed-label {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #999 !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
  white-space: nowrap;
}
.service-closed-label i {
  font-size: 10px !important;
  margin-right: 2px;
}

/* --- 30. Disabled Order Button — Gray only when store/service closed --- */
.btn-store-closed,
.btn-store-closed[disabled],
.btn-store-closed:disabled,
a.btn-store-closed,
button.btn-store-closed {
  background: #b0b0b0 !important;
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  color: #fff !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: none;
}

/* --- 31. Change Password Page — Security & UX Overhaul --- */

/* Password field wrapper — positions the eye toggle */
.pwd-field-wrap {
  position: relative;
}
.pwd-field-wrap .form-control {
  padding-right: 48px !important;
}
.pwd-toggle-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: #999;
  font-size: 1.1rem;
  line-height: 1;
  z-index: 3;
  transition: color 0.2s;
}
.pwd-toggle-btn:hover {
  color: #555;
}
.pwd-toggle-btn:focus {
  outline: none;
}

/* Improved input fields — taller, better contrast, rounder */
.acct-form .form-label-group .form-control,
.acct-form .form-control {
  height: 56px !important;
  border-radius: 8px !important;
  border: 1.5px solid #9CA3AF !important;
  font-size: 0.92rem;
  padding: 14px 14px 6px !important;
  background: #fafaf8;
}
.acct-form .form-label-group .form-control:focus,
.acct-form .form-control:focus {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08) !important;
  background: #fff;
}

/* Floating label adjustments for taller inputs */
.acct-form .form-label-group > label {
  padding: 16px 14px !important;
  font-size: 0.85rem;
  color: #6B7280;
  line-height: 1.5;
}
.acct-form .form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: 6px !important;
  padding-bottom: 4px !important;
  font-size: 0.68rem;
  color: #9CA3AF;
}
.acct-form .form-label-group input:not(:placeholder-shown) {
  padding-top: 22px !important;
  padding-bottom: 6px !important;
}

/* Full-width block button */
.acct-btn-block {
  width: 100% !important;
  height: 56px !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
}
.acct-btn-primary:hover {
  box-shadow: 0 4px 12px rgba(255,107,0,0.2) !important;
}

/* Notification badge — larger, more readable */
.sd-header-notification .notification-dropdown .btn > .badge,
.sd-header-notification .notification-dropdown .btn > .count,
.sd-header-notification .notification-dropdown .btn > span.badge,
.sd-header-menu .notification-dropdown .btn > .badge,
.sd-header-menu .notification-dropdown .btn > .count,
.notification-dropdown .btn > span.badge.badge-danger.count {
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  border-radius: 9px !important;
}

/* Remove heavy shadow from active sidebar item */
.acct-sub-menu .sub-menu li.active a {
  box-shadow: none !important;
}

/* =============================================
   29. ORDER TRACKING PAGE — Modern Redesign
   ============================================= */

/* --- Layout --- */
#vue-orders-track .tracking-sidebar {
  padding: 24px 20px 24px 16px;
  overflow-y: auto;
  max-height: 100vh;
}

/* --- Card System --- */
.track-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  transition: box-shadow 0.3s ease;
}
.track-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.09);
}
.track-card p,
.track-card li {
  line-height: 1.6;
}

/* --- Status Card --- */
.track-card-status {
  background: linear-gradient(135deg, #fff8f0 0%, #fff 60%);
  border-left: 4px solid #FF6B00;
}
.track-eta {
  font-size: 28px;
  font-weight: 700;
  color: #FF6B00;
  line-height: 1.2;
  margin-bottom: 4px;
}
.track-status-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.track-status-detail {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* --- Progress Steps (Redesigned) --- */
.track-progress {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 0 8px;
  position: relative;
}
.track-progress::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 24px;
  right: 24px;
  height: 3px;
  background: #e5e5e5;
  border-radius: 2px;
  z-index: 0;
}
.track-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  flex: 1;
}
.track-step-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #999;
  transition: all 0.4s ease;
  position: relative;
}
.track-step-icon i {
  font-size: 13px;
}
.track-step.active .track-step-icon {
  background: #FF6B00;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,107,0,0.3);
}
.track-step.current .track-step-icon {
  background: #FF6B00;
  color: #fff;
  animation: track-pulse 2s infinite;
}
.track-step.failed .track-step-icon {
  background: #FF5252;
  color: #fff;
}
.track-step-label {
  font-size: 10px;
  color: #999;
  margin-top: 6px;
  text-align: center;
  font-weight: 500;
  max-width: 60px;
}
.track-step.active .track-step-label,
.track-step.current .track-step-label {
  color: #FF6B00;
  font-weight: 600;
}
.track-step.failed .track-step-label {
  color: #FF5252;
}

/* Progress line fill */
.track-progress-fill {
  position: absolute;
  top: 36px;
  left: 24px;
  height: 3px;
  background: #FF6B00;
  border-radius: 2px;
  z-index: 0;
  transition: width 0.6s ease-in-out;
}
.track-progress-fill.failed {
  background: #FF5252;
}

@keyframes track-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,107,0,0.5); }
  70% { box-shadow: 0 0 0 10px rgba(255,107,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,0,0); }
}

/* --- Restaurant Card --- */
.track-card-restaurant .track-restaurant-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.track-restaurant-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.track-restaurant-name {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}
.track-restaurant-name a {
  color: inherit;
  text-decoration: none;
}
.track-restaurant-name a:hover {
  color: #FF6B00;
}
.track-restaurant-address {
  font-size: 12px;
  color: #888;
  margin: 2px 0 0;
}
.track-restaurant-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.track-restaurant-actions .btn-track-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #e5e5e5;
  background: #fafafa;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.track-restaurant-actions .btn-track-action:hover {
  background: #FF6B00;
  color: #fff;
  border-color: #FF6B00;
}
.track-restaurant-actions .btn-track-action i {
  font-size: 14px;
}

/* --- Order Items (compact) --- */
.track-order-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 8px;
}
.track-order-id {
  font-size: 12px;
  font-weight: 600;
  color: #888;
}
.track-order-total {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}
.track-items-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.track-items-list li {
  font-size: 13px;
  color: #555;
  padding: 3px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.track-items-list li .item-qty {
  font-weight: 600;
  color: #FF6B00;
  min-width: 22px;
}

/* --- Delivery Card --- */
.track-card-delivery {
  background: #f9fafb;
}
.track-delivery-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  margin-bottom: 6px;
}
.track-delivery-address {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  margin: 0;
}

/* --- Driver Card --- */
.track-card-driver {
  border: 1px solid #e8f5e9;
  background: linear-gradient(135deg, #f1f8f2 0%, #fff 60%);
}
.track-driver-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.track-driver-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #34A853;
}
.track-driver-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}
.track-driver-vehicle {
  font-size: 11px;
  color: #888;
  margin: 2px 0 0;
}
.track-driver-rating {
  font-size: 12px;
  color: #f5a623;
}
.track-driver-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.track-driver-actions .btn-track-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #e5e5e5;
  background: #fff;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.track-driver-actions .btn-track-action:hover {
  background: #34A853;
  color: #fff;
  border-color: #34A853;
}
.track-driver-actions .btn-track-action.btn-call {
  background: #34A853;
  color: #fff;
  border-color: #34A853;
}
.track-driver-actions .btn-track-action.btn-call:hover {
  background: #2d9249;
}

/* --- Review Section --- */
.track-review-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  gap: 16px;
}
.track-review-prompt h6 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: #1a1a1a;
}
.track-review-prompt p {
  font-size: 12.5px;
  color: #888;
  margin: 3px 0 0;
}
.btn-rate {
  padding: 10px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8F3F 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(255,107,0,.2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-rate:hover {
  opacity: .9;
  box-shadow: 0 4px 14px rgba(255,107,0,0.35);
  color: #fff;
  text-decoration: none;
}
.btn-rate:active {
  transform: scale(.97);
}

/* Dark mode — track review prompt */
@media (prefers-color-scheme: dark) {
  .track-review-prompt h6 { color: #f0f0f0; }
  .track-review-prompt p { color: #999; }
}

/* --- Map Floating Buttons --- */
.track-map-container {
  position: relative;
  height: 100%;
}
.track-map-fab {
  position: absolute;
  bottom: 20px;
  left: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.track-map-fab .fab-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 18px;
  color: #333;
}
.track-map-fab .fab-btn:hover {
  background: #FF6B00;
  color: #fff;
  transform: scale(1.05);
}
.track-map-contact {
  position: absolute;
  bottom: 20px;
  right: 16px;
  z-index: 10;
}
.track-map-contact .fab-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 24px;
  background: #fff;
  border: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  font-size: 13px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.track-map-contact .fab-contact:hover {
  background: #FF6B00;
  color: #fff;
  transform: translateY(-1px);
}
.track-map-contact .fab-contact i {
  font-size: 16px;
}

/* --- Mapbox marker overrides for new SVGs --- */
.marker_icon_merchant_v2,
.marker_icon_destination_v2,
.marker_icon_rider_v2 {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  cursor: pointer;
}
.marker_icon_merchant_v2 {
  background-image: url("../images/marker-restaurant.svg");
  width: 48px;
  height: 62px;
}
.marker_icon_destination_v2 {
  background-image: url("../images/marker-customer.svg");
  width: 48px;
  height: 62px;
}
.marker_icon_rider_v2 {
  background-image: url("../images/marker-rider.svg");
  width: 40px;
  height: 40px;
}

/* Pulse animation for customer marker on map */
.marker_icon_destination_v2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(26,115,232,0.25);
  animation: marker-pulse-ring 2s ease-out infinite;
}
@keyframes marker-pulse-ring {
  0% { transform: translateX(-50%) scale(1); opacity: 0.6; }
  100% { transform: translateX(-50%) scale(3); opacity: 0; }
}

/* --- Toast notification for status changes --- */
.track-toast {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
  background: #fff;
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  border-left: 4px solid #FF6B00;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 360px;
  animation: toast-slide-in 0.4s ease-out;
  transition: opacity 0.3s, transform 0.3s;
}
.track-toast.toast-hide {
  opacity: 0;
  transform: translateX(20px);
}
.track-toast-icon {
  font-size: 20px;
  color: #FF6B00;
}
.track-toast-text {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}
@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* --- Instructions card --- */
.track-card-instructions {
  background: #fffbf0;
  border: 1px solid #ffecc7;
}
.track-card-instructions h6 {
  font-size: 13px;
  font-weight: 600;
  color: #b8860b;
}

/* --- Points/Rewards --- */
.track-points-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff8e1, #fff3cd);
  font-size: 13px;
  font-weight: 500;
  color: #b8860b;
}

/* --- Cancel button --- */
.track-cancel-btn {
  font-size: 12px;
  margin-top: 8px;
}

/* --- Responsive: Tracking Page --- */
@media (max-width: 991px) {
  #vue-orders-track .tracking-sidebar {
    max-height: none;
    padding: 16px 12px;
  }
  .track-card {
    padding: 16px;
    margin-bottom: 12px;
  }
  .track-eta {
    font-size: 24px;
  }
}
@media (max-width: 575px) {
  .track-card {
    border-radius: 12px;
    padding: 14px;
  }
  .track-eta {
    font-size: 20px;
  }
  .track-step-label {
    font-size: 9px;
  }
  .track-map-contact .fab-contact span {
    display: none;
  }
}

/* =============================================
   MODERN FLOATING CART BUTTON — Premium Design
   ============================================= */

/* --- Main floating cart container --- */
.floating-cart {
  padding: 0 12px;
  margin-bottom: env(safe-area-inset-bottom, 0);
}

/* --- Modern cart button --- */
.floating-cart .floating-cart-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  background: #3b4451 !important;
  border: none;
  box-shadow: 0 4px 20px rgba(59, 68, 81, 0.35),
              0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* --- Subtle shine effect on button --- */
.floating-cart .floating-cart-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%);
  transition: left 0.6s ease;
}

.floating-cart .floating-cart-btn:hover::before {
  left: 100%;
}

/* --- Hover and active states --- */
.floating-cart .floating-cart-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(59, 68, 81, 0.45),
              0 4px 12px rgba(0, 0, 0, 0.2);
}

.floating-cart .floating-cart-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 12px rgba(59, 68, 81, 0.3);
}

/* --- Cart content wrapper --- */
.floating-cart-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

/* --- Cart icon container --- */
.floating-cart-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}

.floating-cart-icon i {
  font-size: 22px;
  color: #fff;
}

/* --- Cart text content --- */
.floating-cart-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.floating-cart-text p {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.floating-cart-text h5 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* --- Item count badge --- */
.floating-cart count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  background: #fff;
  color: #FF6B00;
  font-size: 13px;
  font-weight: 700;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  animation: cart-count-pulse 0.3s ease;
}

@keyframes cart-count-pulse {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* --- Arrow indicator --- */
.floating-cart-btn::after {
  content: '\f2fb';
  font-family: 'Material-Design-Iconic-Font';
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 8px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.floating-cart-btn:hover::after {
  transform: translateX(4px);
  color: #fff;
}

/* --- Mobile responsive adjustments --- */
@media (max-width: 575px) {
  .floating-cart {
    padding: 0 10px;
  }

  .floating-cart .floating-cart-btn {
    padding: 12px 14px;
    border-radius: 14px;
  }

  .floating-cart-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .floating-cart-icon i {
    font-size: 20px;
  }

  .floating-cart-text p {
    font-size: 11px;
  }

  .floating-cart-text h5 {
    font-size: 14px;
    max-width: 160px;
  }

  .floating-cart count {
    min-width: 26px;
    height: 26px;
    font-size: 12px;
    padding: 0 7px;
  }

  .floating-cart-btn::after {
    font-size: 18px;
    margin-left: 6px;
  }
}

@media (max-width: 375px) {
  .floating-cart-text h5 {
    max-width: 130px;
  }
}

/* --- Dark mode support (if applicable) --- */
@media (prefers-color-scheme: dark) {
  .floating-cart .floating-cart-btn {
    box-shadow: 0 4px 20px rgba(59, 68, 81, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

/* =============================================
   PREMIUM FOOTER — Modern, Clean, Professional
   ============================================= */

/* --- Main Footer Section --- */
.sd-footer {
  background: #F8F9FA;
  padding: 48px 0 0;
  margin-top: 40px;
  border-top: 1px solid #eee;
}

/* --- Top Row: Brand + Newsletter --- */
.sd-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid #e8e5df;
}
.sd-footer-brand {
  flex-shrink: 0;
}
.sd-footer-brand .footer-logo img {
  max-height: 34px;
  width: auto;
}
.sd-footer-tagline {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: #999;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* --- Newsletter --- */
.sd-footer-newsletter {
  flex-shrink: 0;
  max-width: 380px;
  width: 100%;
}
.sd-footer-newsletter-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #444;
  margin: 0 0 8px;
}
.sd-newsletter-form {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border-radius: 50px;
  border: 1px solid #e0ddd8;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.sd-newsletter-form:focus-within {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08);
}
.sd-newsletter-form .el-input {
  flex: 1;
}
.sd-newsletter-form .el-input .el-input__wrapper {
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 18px !important;
  border-radius: 0 !important;
}
.sd-newsletter-form .el-input .el-input__inner {
  font-size: 14px;
}
.sd-newsletter-btn {
  border-radius: 50px !important;
  padding: 0 24px !important;
  min-height: 40px;
  font-weight: 600 !important;
  font-size: 13px !important;
  background: #FF6B00 !important;
  border-color: #FF6B00 !important;
  color: #fff !important;
  margin: 3px 3px 3px 0;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.sd-newsletter-btn:hover {
  background: #E05E00 !important;
  border-color: #E05E00 !important;
}
.sd-newsletter-success {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 12px 0;
}

/* --- Email Confirmation & Unsubscribe Pages --- */
.sd-email-page {
  max-width: 520px;
  margin: 60px auto;
  padding: 0 16px;
}
.sd-email-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  padding: 48px 40px;
  text-align: center;
}
.sd-email-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 36px;
}
.sd-email-icon.success {
  background: #e8f5e9;
  color: #28a745;
}
.sd-email-icon.error {
  background: #fce4ec;
  color: #dc3545;
}
.sd-email-icon.warning {
  background: #fff3e0;
  color: #FF6B00;
}
.sd-email-icon.info {
  background: #e3f2fd;
  color: #1976d2;
}
.sd-email-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.sd-email-card p {
  font-size: 0.92rem;
  color: #666;
  line-height: 1.6;
  margin: 0 0 8px;
}
.sd-email-card .sd-email-actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sd-email-card .btn-sd-primary {
  display: inline-block;
  padding: 12px 32px;
  background: #FF6B00;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.sd-email-card .btn-sd-primary:hover {
  background: #E05E00;
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.sd-email-card .btn-sd-danger {
  display: inline-block;
  padding: 12px 32px;
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.sd-email-card .btn-sd-danger:hover {
  background: #c82333;
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.sd-email-card .btn-sd-outline {
  display: inline-block;
  padding: 10px 28px;
  background: transparent;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.sd-email-card .btn-sd-outline:hover {
  border-color: #FF6B00;
  color: #FF6B00;
  text-decoration: none;
}
.sd-email-card .sd-email-note {
  font-size: 0.78rem;
  color: #999;
  margin-top: 20px;
}
@media (max-width: 575.98px) {
  .sd-email-page {
    margin: 32px auto;
  }
  .sd-email-card {
    padding: 32px 24px;
  }
  .sd-email-icon {
    width: 60px;
    height: 60px;
    font-size: 28px;
    margin-bottom: 20px;
  }
  .sd-email-card h3 {
    font-size: 1.15rem;
  }
}

/* --- Footer Menu Columns (from WidgetFooterMenu) --- */
.sd-footer .sub-footer-nav {
  padding: 32px 0;
  border-top: none;
  margin: 0;
}
.sd-footer .sub-footer-nav h6 {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.sd-footer .sub-footer-nav .parent {
  padding: 0;
  margin: 0;
  list-style: none;
}
.sd-footer .sub-footer-nav .parent li {
  margin-bottom: 2px;
}
.sd-footer .sub-footer-nav a {
  font-size: 0.88rem;
  font-weight: 400;
  color: #666;
  text-decoration: none;
  padding: 4px 0;
  display: inline-block;
  transition: color 0.3s ease;
}
.sd-footer .sub-footer-nav a:hover {
  color: #FF6B00;
}

/* --- Divider --- */
.sd-footer-divider {
  height: 1px;
  background: #e8e5df;
}

/* --- Bottom Row: Social + App Store --- */
.sd-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  gap: 24px;
}

/* --- Social Icons --- */
.sd-footer-social {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sd-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eceae5;
  color: #666;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.sd-footer-social a:hover {
  background: #FF6B00;
  color: #fff;
  transform: translateY(-2px);
}

/* --- App Store Badges (Redesigned) --- */
.sd-footer-apps {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sd-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1a1a1a;
  color: #fff !important;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 8px 16px 8px 12px;
  text-decoration: none;
  transition: all 0.25s ease;
  min-width: 140px;
}
.sd-app-btn:hover {
  background: #252525;
  border-color: #FF6B00;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(255,107,0,0.15);
  color: #fff !important;
  text-decoration: none;
}
.sd-app-btn:active {
  transform: translateY(0);
}
.sd-app-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: #fff;
}
.sd-app-btn__icon svg {
  display: block;
}
.sd-app-btn__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.sd-app-btn__text small {
  font-size: 0.62rem;
  opacity: 0.7;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.sd-app-btn__text strong {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* --- Smart App Banner (Mobile) --- */
.sd-app-banner {
  position: relative;
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f8f8f8;
  border-bottom: 1px solid #e8e8e8;
  animation: sdBannerSlideDown 0.35s ease-out;
}
@keyframes sdBannerSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.sd-app-banner__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: #999;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.sd-app-banner__close:hover {
  background: rgba(0,0,0,0.06);
  color: #555;
}
.sd-app-banner__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.sd-app-banner__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-app-banner__body {
  flex: 1;
  min-width: 0;
}
.sd-app-banner__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #222;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-app-banner__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.sd-app-banner__stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.sd-app-banner__rating-text {
  font-size: 0.68rem;
  color: #888;
  font-weight: 400;
}
.sd-app-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff !important;
  background: #FF6B00;
  border-radius: 18px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
  letter-spacing: 0.01em;
}
.sd-app-banner__btn:hover {
  background: #e55f00;
  color: #fff !important;
  text-decoration: none;
}
.sd-app-banner__btn:active {
  transform: scale(0.96);
}
@media (min-width: 769px) {
  .sd-app-banner { display: none !important; }
}

/* --- Override old footer/sub-footer base styles --- */
.sd-footer,
.sd-footer.sub-footer {
  background: #F8F9FA !important;
  margin-top: 40px;
  border-top: 1px solid #eee;
  padding-bottom: 0;
}
footer.sd-footer-bar {
  background: #1a1a1a !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  margin-top: 0 !important;
  border-top: none !important;
}
.sd-footer .esubscription {
  position: static;
}
.sd-footer .esubscription .button-wrap {
  position: static;
}

/* --- Bottom Bar (footer element) --- */
.sd-footer-bar {
  background: #1a1a1a;
  padding: 16px 0;
  margin-top: 0;
  border-top: none;
}
.sd-footer-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sd-footer-copyright {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  font-weight: 400;
}
.sd-footer-domain {
  margin: 0;
  font-size: 0.78rem;
}
.sd-footer-domain a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.3s ease;
}
.sd-footer-domain a:hover {
  color: #FF6B00;
}

/* --- Skeleton Loading for Footer Menu --- */
.sd-footer-menu-skeleton {
  display: flex;
  gap: 40px;
  padding: 32px 0;
}
.sd-skel-col {
  flex: 1;
}
.sd-skel-title {
  width: 80px;
  height: 14px;
  background: #e8e5df;
  border-radius: 7px;
  margin-bottom: 16px;
  animation: sdSkelPulse 1.5s ease-in-out infinite;
}
.sd-skel-line {
  width: 140px;
  height: 10px;
  background: #eceae5;
  border-radius: 5px;
  margin-bottom: 10px;
  animation: sdSkelPulse 1.5s ease-in-out infinite;
  animation-delay: 0.15s;
}
.sd-skel-line.short {
  width: 90px;
}
@keyframes sdSkelPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* =============================================
   PREMIUM FOOTER — Responsive
   ============================================= */
@media (max-width: 991.98px) {
  .sd-footer-top {
    flex-direction: column;
    gap: 24px;
    text-align: center;
    align-items: center;
  }
  .sd-footer-newsletter {
    max-width: 100%;
  }
  .sd-footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .sd-footer-social {
    justify-content: center;
  }
  .sd-footer-apps {
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .sd-footer {
    padding: 32px 0 0;
    margin-top: 24px;
  }
  .sd-footer-top {
    padding-bottom: 24px;
  }
  .sd-footer-brand .footer-logo img {
    max-height: 28px;
  }
  .sd-footer-tagline {
    font-size: 0.72rem;
  }
  .sd-newsletter-form {
    flex-direction: column;
    border-radius: 16px;
    gap: 0;
  }
  .sd-newsletter-form .el-input .el-input__wrapper {
    padding: 10px 16px !important;
  }
  .sd-newsletter-btn {
    width: calc(100% - 6px);
    margin: 0 3px 3px;
    border-radius: 14px !important;
  }
  .sd-footer .sub-footer-nav {
    padding: 24px 0;
  }
  .sd-footer .sub-footer-nav h6 {
    font-size: 0.92rem;
    margin-bottom: 10px;
  }
  .sd-footer .sub-footer-nav a {
    font-size: 0.82rem;
  }
  .sd-footer-bottom {
    padding: 20px 0;
  }
  .sd-app-btn {
    min-width: 0;
    padding: 7px 12px 7px 10px;
    gap: 8px;
  }
  .sd-app-btn__text strong {
    font-size: 0.8rem;
  }
  .sd-footer-bar-inner {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
  .sd-footer-menu-skeleton {
    gap: 24px;
    padding: 24px 0;
  }
  .sd-skel-col:nth-child(3) {
    display: none;
  }
}

/* =============================================
   COOKIE CONSENT — GDPR/TTDSG German Standard
   ============================================= */

/* --- Overlay backdrop --- */
.sd-ck-overlay {
  position: fixed;
  inset: 0;
  z-index: 2049;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* --- Bottom Banner --- */
.sd-ck-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2050;
  background: #FFFFFF;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.10);
  font-family: 'Outfit', sans-serif;
  animation: sdCkSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sdCkSlideUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.sd-ck-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 32px 22px;
}

/* --- Header --- */
.sd-ck-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sd-ck-icon { flex-shrink: 0; }
.sd-ck-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
}

/* --- Text --- */
.sd-ck-text {
  font-size: 0.88rem;
  color: #555;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 820px;
}
.sd-ck-text a {
  color: #FF6B00 !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sd-ck-text a:hover {
  color: #E05E00 !important;
}

/* --- Action Buttons --- */
.sd-ck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.sd-ck-btn {
  height: 46px;
  padding: 0 28px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: inherit;
  outline: none;
  white-space: nowrap;
}
.sd-ck-btn--accept {
  background: #FF6B00;
  color: #fff;
}
.sd-ck-btn--accept:hover {
  background: #E05E00;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,107,0,0.25);
}
.sd-ck-btn--accept:active { transform: scale(0.98); }

.sd-ck-btn--essential {
  background: #F0F0F0;
  color: #333;
}
.sd-ck-btn--essential:hover {
  background: #E4E4E4;
  color: #111;
}

.sd-ck-btn--settings {
  background: transparent;
  color: #666;
  border: 1.5px solid #D0D0D0;
}
.sd-ck-btn--settings:hover {
  border-color: #FF6B00;
  color: #FF6B00;
}

.sd-ck-btn--save {
  background: #FF6B00;
  color: #fff;
}
.sd-ck-btn--save:hover {
  background: #E05E00;
}

/* --- Footer Links --- */
.sd-ck-links,
.sd-ck-modal-links {
  font-size: 0.78rem;
  color: #999;
}
.sd-ck-links a,
.sd-ck-modal-links a {
  color: #888;
  text-decoration: none;
  transition: color 0.15s;
}
.sd-ck-links a:hover,
.sd-ck-modal-links a:hover {
  color: #FF6B00;
  text-decoration: underline;
}
.sd-ck-links-sep {
  margin: 0 6px;
  color: #ccc;
}

/* =============================================
   COOKIE CONSENT — Settings Modal
   ============================================= */
.sd-ck-modal {
  position: fixed;
  inset: 0;
  z-index: 2050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: sdCkFadeIn 0.25s ease both;
}
@keyframes sdCkFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sd-ck-modal-card {
  background: #fff;
  border-radius: 20px;
  width: 600px;
  max-width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  font-family: 'Outfit', sans-serif;
  animation: sdCkCardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sdCkCardIn {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sd-ck-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 16px;
  border-bottom: 1px solid #F0F0F0;
  flex-shrink: 0;
}
.sd-ck-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}
.sd-ck-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: #F5F5F5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  padding: 0;
}
.sd-ck-modal-close:hover {
  background: #eee;
  color: #555;
}

/* --- Modal Body --- */
.sd-ck-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
  -webkit-overflow-scrolling: touch;
}
.sd-ck-modal-intro {
  font-size: 0.86rem;
  color: #666;
  line-height: 1.6;
  margin: 0 0 20px;
}

/* --- Category Card --- */
.sd-ck-cat {
  background: #FAFAFA;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.sd-ck-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.sd-ck-cat-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sd-ck-cat-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #222;
}
.sd-ck-cat-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sd-ck-cat-badge--always {
  background: #E8F5E9;
  color: #2E7D32;
}
.sd-ck-cat-desc {
  font-size: 0.82rem;
  color: #777;
  line-height: 1.55;
  margin: 0;
}

/* --- Toggle Switch --- */
.sd-ck-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.sd-ck-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.sd-ck-toggle-track {
  position: absolute;
  inset: 0;
  background: #D4D4D4;
  border-radius: 12px;
  transition: background 0.25s ease;
}
.sd-ck-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.sd-ck-toggle input:checked + .sd-ck-toggle-track {
  background: #FF6B00;
}
.sd-ck-toggle input:checked + .sd-ck-toggle-track::after {
  transform: translateX(20px);
}
.sd-ck-toggle--disabled {
  cursor: default;
  opacity: 0.7;
}
.sd-ck-toggle--disabled .sd-ck-toggle-track {
  background: #4CAF50;
}
.sd-ck-toggle--disabled input:checked + .sd-ck-toggle-track {
  background: #4CAF50;
}

/* --- Modal Footer --- */
.sd-ck-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 28px;
  border-top: 1px solid #F0F0F0;
  flex-shrink: 0;
}
.sd-ck-modal-links {
  padding: 0 28px 18px;
  flex-shrink: 0;
}

/* --- Responsive --- */
@media (max-width: 640px) {
  .sd-ck-banner-inner {
    padding: 22px 18px 16px;
  }
  .sd-ck-title {
    font-size: 1.02rem;
  }
  .sd-ck-text {
    font-size: 0.82rem;
  }
  .sd-ck-actions {
    flex-direction: column;
  }
  .sd-ck-btn {
    width: 100%;
    height: 44px;
    font-size: 0.86rem;
  }
  .sd-ck-modal {
    padding: 0;
    align-items: flex-end;
  }
  .sd-ck-modal-card {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    width: 100%;
  }
  .sd-ck-modal-header { padding: 18px 20px 14px; }
  .sd-ck-modal-body { padding: 16px 20px; }
  .sd-ck-modal-footer {
    padding: 14px 20px;
    flex-direction: column;
  }
  .sd-ck-modal-footer .sd-ck-btn { width: 100%; }
  .sd-ck-modal-links { padding: 0 20px 16px; }
}

/* =============================================
   31. CONSENT CHECKBOXES (sd-consent-row)
   ============================================= */

/* --- Simple inline checkbox row --- */
.sd-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  margin: 12px 0 8px;
  padding: 0;
  -webkit-user-select: none;
  user-select: none;
}
.sd-consent-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* --- Small custom checkbox --- */
.sd-consent-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid #bbb;
  border-radius: 4px;
  position: relative;
  transition: all 0.2s ease;
  margin-top: 1px;
  background: #fff;
}
.sd-consent-row:hover .sd-consent-check {
  border-color: #999;
}
.sd-consent-row input:checked + .sd-consent-check {
  background: #FF6B00;
  border-color: #FF6B00;
}
.sd-consent-row input:checked + .sd-consent-check::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* --- Text --- */
.sd-consent-text {
  flex: 1;
  min-width: 0;
  font-size: 0.76rem;
  color: #666;
  line-height: 1.5;
}
.sd-consent-text a {
  color: #FF6B00;
  text-decoration: none;
  font-weight: 500;
}
.sd-consent-text a:hover {
  text-decoration: underline;
  color: #e55d00;
}

/* --- Checkout consent (text notice below order button) --- */
.sd-consent-checkout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0 4px;
  justify-content: center;
}
.sd-consent-checkout__icon {
  flex-shrink: 0;
  color: #ccc;
  margin-top: 1px;
}
.sd-consent-checkout__text {
  font-size: 0.72rem;
  color: #999;
  line-height: 1.55;
  margin: 0;
  text-align: center;
}
.sd-consent-checkout__text a {
  color: #FF6B00;
  text-decoration: underline;
  font-weight: 500;
}
.sd-consent-checkout__text a:hover {
  color: #e55d00;
}

/* --- Backward compat: old classes still used in rider_signup --- */
.sd-signup-legal {
  margin: 16px 0 8px;
}
.sd-signup-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 0.2s;
  margin: 0;
  -webkit-user-select: none;
  user-select: none;
}
.sd-signup-checkbox:hover {
  background: #f8f8f8;
}
.sd-signup-checkbox input[type="checkbox"] {
  display: none;
}
.sd-checkbox-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 5px;
  position: relative;
  transition: all 0.2s;
  margin-top: 1px;
}
.sd-signup-checkbox input[type="checkbox"]:checked + .sd-checkbox-mark {
  background: #FF6B00;
  border-color: #FF6B00;
}
.sd-signup-checkbox input[type="checkbox"]:checked + .sd-checkbox-mark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sd-checkbox-text {
  font-size: 0.82rem;
  color: #444;
  line-height: 1.5;
}
.sd-checkbox-text a {
  color: #FF6B00;
  text-decoration: underline;
  font-weight: 500;
}
.sd-checkbox-text a:hover {
  color: #e55d00;
}

/* ============================================================
   30. UNIFIED ADDRESS MODAL (sd-address-modal)
   ============================================================ */

/* --- Autocomplete popper (must be above overlay z-index 2050) --- */
.sd-addr-autocomplete-popper {
  z-index: 2100 !important;
  pointer-events: auto !important;
  touch-action: auto !important;
}
.sd-addr-autocomplete-popper .el-autocomplete-suggestion li {
  padding: 10px 16px !important;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}

/* --- Modal Overlay & Container --- */
.sd-addr-overlay {
  position: fixed;
  inset: 0;
  z-index: 2050;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sd-addr-overlay.sd-addr-open {
  opacity: 1;
  visibility: visible;
}
.sd-addr-modal {
  background: #fff;
  border-radius: 24px;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  transform: translateY(30px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden;
}
.sd-addr-overlay.sd-addr-open .sd-addr-modal {
  transform: translateY(0) scale(1);
}

/* --- Header --- */
.sd-addr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: #fff;
  border-bottom: 1px solid #f0ede8;
  flex-shrink: 0;
}
.sd-addr-header-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #FF6B00;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sd-addr-header-title i {
  font-size: 1.1rem;
}
.sd-addr-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f5f3f0;
  color: #666;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.sd-addr-close:hover {
  background: #ebe8e3;
  color: #333;
}

/* --- Scrollable Body --- */
.sd-addr-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

/* --- Map Section --- */
.sd-addr-map-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  background: #f0ede8;
  overflow: hidden;
}
.sd-addr-map-wrap .map {
  width: 100%;
  height: 100%;
  border: none !important;
  border-radius: 0 !important;
}
.sd-addr-map-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  background: #fafaf8;
  border-bottom: 1px solid #f0ede8;
  gap: 10px;
}
.sd-addr-map-info-text {
  flex: 1;
  min-width: 0;
}
.sd-addr-map-info-text h6 {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-addr-map-info-text p {
  font-size: 0.76rem;
  color: #888;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-addr-adjust-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 16px;
  border: 1.5px solid #e5e2dd;
  background: #fff;
  color: #444;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sd-addr-adjust-btn:hover {
  border-color: #FF6B00;
  color: #FF6B00;
  background: #FFF8F2;
}
.sd-addr-adjust-btn i {
  font-size: 0.9rem;
}

/* --- Map Full (Adjust Pin View) --- */
.sd-addr-map-full {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.sd-addr-map-full .sd-addr-map-wrap {
  flex: 1;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.sd-addr-map-full-header {
  display: flex;
  align-items: center;
  padding: 14px 22px;
  background: #fff;
  border-bottom: 1px solid #f0ede8;
  gap: 12px;
  flex-shrink: 0;
}
.sd-addr-map-full-header .sd-addr-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f5f3f0;
  color: #444;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.sd-addr-map-full-header .sd-addr-back-btn:hover {
  background: #ebe8e3;
  color: #1a1a1a;
}
.sd-addr-map-full-header h6 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

/* Floating search bar inside map */
.sd-addr-map-search {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  z-index: 10;
}
.sd-addr-map-search .el-autocomplete {
  width: 100%;
}
.sd-addr-map-search .el-input__wrapper {
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
  background: #fff !important;
  padding: 4px 12px !important;
}

/* FAB: Use Current Location */
.sd-addr-fab-locate {
  position: absolute;
  bottom: 80px;
  right: 14px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #444;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
  transition: all 0.2s;
}
.sd-addr-fab-locate:hover {
  background: #FFF8F2;
  color: #FF6B00;
  box-shadow: 0 4px 16px rgba(255,107,0,0.2);
}
.sd-addr-fab-locate.sd-addr-fab-loading {
  pointer-events: none;
  opacity: 0.7;
}

/* Map full-screen confirm footer */
.sd-addr-map-full-footer {
  padding: 14px 22px;
}

/* --- Saved Addresses Section --- */
.sd-addr-saved-section {
  padding: 16px 22px 0;
}
.sd-addr-saved-list {
  max-height: 180px;
  overflow-y: auto;
}
.sd-addr-saved-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.sd-addr-saved-item:hover,
.sd-addr-saved-item:active {
  background: #f0f0f0;
}
.sd-addr-saved-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFF3E8;
  color: #FF6B00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.sd-addr-saved-label {
  font-weight: 600;
  font-size: 0.82rem;
  color: #333;
}
.sd-addr-saved-addr {
  font-size: 0.78rem;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}
.sd-addr-divider {
  text-align: center;
  margin: 12px 0 4px;
  position: relative;
}
.sd-addr-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #e5e5e5;
}
.sd-addr-divider span {
  position: relative;
  background: #fff;
  padding: 0 12px;
  font-size: 0.75rem;
  color: #aaa;
}

/* --- New Address Search Section --- */
.sd-addr-search-section {
  padding: 24px 22px 8px;
  text-align: center;
}
.sd-addr-search-bar {
  position: relative;
}
.sd-addr-search-bar .el-autocomplete {
  width: 100%;
}
.sd-addr-search-bar .el-input__wrapper {
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  border: 1.5px solid #e5e2dd !important;
  padding: 6px 12px !important;
  min-height: 50px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-addr-search-bar .el-input__wrapper:focus-within {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08) !important;
}
.sd-addr-search-bar .el-input__inner {
  font-size: 0.92rem;
}
.sd-addr-locate-inline {
  border: none;
  background: transparent;
  color: #666;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.sd-addr-locate-inline:hover {
  color: #FF6B00;
}
.sd-addr-locate-inline.sd-addr-fab-loading {
  pointer-events: none;
  opacity: 0.5;
  animation: sd-addr-spin 0.7s linear infinite;
}
.sd-addr-search-hint {
  font-size: 0.76rem;
  color: #aaa;
  margin: 12px 0 0;
}

/* --- Form Section --- */
.sd-addr-form {
  padding: 18px 22px 0;
}
.sd-addr-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px;
}
.sd-addr-section-hint {
  font-size: 0.74rem;
  color: #999;
  margin: 0 0 12px;
}

/* Floating label input groups */
.sd-addr-field {
  position: relative;
  margin-bottom: 14px;
}
.sd-addr-field input,
.sd-addr-field textarea,
.sd-addr-field select {
  width: 100%;
  padding: 22px 16px 8px;
  border: 1.5px solid #e5e2dd;
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.3;
  color: #1a1a1a;
  background: #fff;
  outline: none !important;
  min-height: 54px;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.sd-addr-field select option {
  padding: 8px 12px;
  background: #fff;
  color: #1a1a1a;
}
.sd-addr-field textarea {
  min-height: 70px;
  max-height: 140px;
  resize: vertical;
  padding-top: 26px;
}
.sd-addr-field select {
  padding-top: 26px;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}
.sd-addr-field label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.84rem;
  color: #999;
  pointer-events: none;
  transition: all 0.2s ease;
  background: transparent;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 32px);
}
.sd-addr-field textarea ~ label {
  top: 18px;
  transform: none;
}
.sd-addr-field select ~ label {
  top: 6px;
  transform: none;
  font-size: 0.65rem;
  color: #999;
  letter-spacing: 0.2px;
}
.sd-addr-field input:focus,
.sd-addr-field textarea:focus,
.sd-addr-field select:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08);
}
.sd-addr-field input:focus ~ label,
.sd-addr-field input:not(:placeholder-shown) ~ label {
  top: 6px;
  transform: none;
  font-size: 0.65rem;
  color: #FF6B00;
  letter-spacing: 0.2px;
}
.sd-addr-field textarea:focus ~ label,
.sd-addr-field textarea:not(:placeholder-shown) ~ label {
  top: 6px;
  font-size: 0.65rem;
  color: #FF6B00;
  letter-spacing: 0.2px;
}
.sd-addr-field input:not(:focus):not(:placeholder-shown) ~ label,
.sd-addr-field textarea:not(:focus):not(:placeholder-shown) ~ label {
  color: #999;
}
.sd-addr-field .sd-addr-field-required {
  color: #FF6B00;
}
.sd-addr-row {
  display: flex;
  gap: 12px;
}
.sd-addr-row .sd-addr-field {
  flex: 1;
  min-width: 0;
}

/* --- Address Label Chips --- */
.sd-addr-labels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.sd-addr-label-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid #e5e2dd;
  background: #fff;
  color: #666;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.sd-addr-label-chip:hover {
  border-color: #d5d0c8;
  background: #fafaf8;
}
.sd-addr-label-chip.active {
  border-color: #FF6B00;
  background: #FFF5EB;
  color: #E05E00;
  border-width: 2px;
}
.sd-addr-label-chip input[type="radio"] {
  display: none;
}
.sd-addr-label-chip i {
  font-size: 0.9rem;
}

/* --- Quick Action Tags (Delivery Instructions) --- */
.sd-addr-quick-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.sd-addr-quick-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid #e5e2dd;
  background: #fafaf8;
  color: #666;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.sd-addr-quick-tag:hover {
  border-color: #FF6B00;
  background: #FFF8F2;
  color: #E05E00;
}
.sd-addr-quick-tag i {
  font-size: 0.8rem;
}

/* --- Footer / Save Button --- */
.sd-addr-footer {
  padding: 14px 22px 18px;
  background: #fff;
  border-top: 1px solid #f0ede8;
  flex-shrink: 0;
}
.sd-addr-save-btn {
  width: 100%;
  padding: 14px 24px;
  border-radius: 16px;
  border: none;
  background: #FF6B00;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(255,107,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}
.sd-addr-save-btn:hover {
  background: #e55d00;
  box-shadow: 0 6px 20px rgba(255,107,0,0.35);
}
.sd-addr-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}
.sd-addr-save-btn .sd-addr-spinner {
  display: none;
}
.sd-addr-save-btn.sd-addr-loading .sd-addr-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sd-addr-spin 0.7s linear infinite;
}
.sd-addr-save-btn.sd-addr-loading .sd-addr-save-label {
  opacity: 0.5;
}

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

/* --- Pin Bounce Animation --- */
@keyframes sd-addr-pin-bounce {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-18px); }
  40% { transform: translateY(0); }
  55% { transform: translateY(-8px); }
  70% { transform: translateY(0); }
  85% { transform: translateY(-3px); }
}
.sd-addr-pin-bounce .mapboxgl-marker,
.sd-addr-pin-bounce .gmnoprint {
  animation: sd-addr-pin-bounce 0.8s ease;
}

/* --- Error Alert --- */
.sd-addr-error {
  margin: 0 22px 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #FFF5F5;
  border: 1px solid #FCC;
  color: #c0392b;
  font-size: 0.82rem;
}

/* --- Map Confirm Button (inside full map view) --- */
.sd-addr-confirm-btn {
  width: 100%;
  padding: 14px 24px;
  border-radius: 16px;
  border: none;
  background: #FF6B00;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(255,107,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sd-addr-confirm-btn:hover {
  background: #e55d00;
}
.sd-addr-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ============================================================
   30b. UNIFIED ADDRESS MODAL — RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 991px) {
  .sd-addr-modal {
    max-width: 520px;
    border-radius: 20px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .sd-addr-overlay {
    align-items: flex-end;
  }
  .sd-addr-modal {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    transform: translateY(100%);
  }
  .sd-addr-overlay.sd-addr-open .sd-addr-modal {
    transform: translateY(0);
  }
  .sd-addr-header {
    padding: 14px 16px;
  }
  .sd-addr-header-title {
    font-size: 0.95rem;
  }
  .sd-addr-map-wrap {
    height: 160px;
  }
  .sd-addr-map-info {
    padding: 10px 16px;
  }
  .sd-addr-form {
    padding: 14px 16px 0;
  }
  .sd-addr-field input,
  .sd-addr-field textarea,
  .sd-addr-field select {
    font-size: 1rem;
    padding: 24px 16px 8px;
    border-radius: 14px;
    min-height: 54px;
  }
  .sd-addr-field textarea {
    padding-top: 28px;
  }
  .sd-addr-saved-section {
    padding: 12px 16px 0;
  }
  .sd-addr-saved-addr {
    max-width: 220px;
  }
  .sd-addr-search-section {
    padding: 20px 16px 8px;
  }
  .sd-addr-row {
    flex-direction: column;
    gap: 0;
  }
  .sd-addr-labels {
    gap: 6px;
  }
  .sd-addr-label-chip {
    padding: 10px 16px;
    font-size: 0.84rem;
  }
  .sd-addr-quick-tags {
    gap: 5px;
  }
  .sd-addr-quick-tag {
    padding: 7px 12px;
    font-size: 0.78rem;
  }
  .sd-addr-footer {
    padding: 12px 16px 16px;
    position: sticky;
    bottom: 0;
    z-index: 5;
  }
  .sd-addr-save-btn {
    padding: 16px 24px;
    border-radius: 14px;
    font-size: 0.95rem;
    min-height: 52px;
  }
  .sd-addr-confirm-btn {
    padding: 16px 24px;
    border-radius: 14px;
    min-height: 52px;
  }
  .sd-addr-map-full-footer {
    padding: 12px 16px;
  }
  .sd-addr-fab-locate {
    bottom: 90px;
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }
  .sd-addr-map-search {
    top: 10px;
    left: 10px;
    right: 10px;
  }
  .sd-addr-error {
    margin: 0 16px 10px;
  }
}

/* Small mobile */
@media (max-width: 374px) {
  .sd-addr-header {
    padding: 12px 14px;
  }
  .sd-addr-header-title {
    font-size: 0.88rem;
  }
  .sd-addr-form {
    padding: 12px 14px 0;
  }
  .sd-addr-map-wrap {
    height: 140px;
  }
  .sd-addr-label-chip {
    padding: 8px 12px;
    font-size: 0.78rem;
  }
}

/* RTL support */
html[dir="rtl"] .sd-addr-header {
  flex-direction: row-reverse;
}
html[dir="rtl"] .sd-addr-field label {
  left: auto;
  right: 16px;
}
html[dir="rtl"] .sd-addr-field select {
  background-position: left 14px center;
  padding-right: 16px;
  padding-left: 36px;
}
html[dir="rtl"] .sd-addr-map-info {
  flex-direction: row-reverse;
}
html[dir="rtl"] .sd-addr-fab-locate {
  right: auto;
  left: 14px;
}
html[dir="rtl"] .sd-addr-map-full-header {
  flex-direction: row-reverse;
}


/* =====================================================
   SD MODAL — Unified Premium Modal System
   ===================================================== */

/* --- Modal Dialog --- */
.sd-modal .sd-modal-dialog {
  max-width: 450px;
  margin: 1.75rem auto;
}

/* --- Modal Content (Container) --- */
.sd-modal .sd-modal-content {
  border: none;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 10px 40px rgba(0,0,0,0.10);
  overflow: hidden;
}

/* --- Header --- */
.sd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 8px;
  border: none;
  background: transparent;
}
.sd-modal-header-spacer {
  width: 36px;
  flex-shrink: 0;
}
.sd-modal-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0;
  line-height: 1.3;
}
.sd-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F0F0F0;
  color: #666;
  font-size: 18px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.sd-modal-close:hover {
  background: #E0E0E0;
  color: #333;
  text-decoration: none;
}

/* --- Body --- */
.sd-modal-body {
  padding: 12px 24px 8px;
}

/* --- Footer --- */
.sd-modal-footer {
  padding: 16px 24px 24px;
  border: none;
  background: transparent;
}

/* --- Primary Action Button (Orange) --- */
.sd-modal-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 12px;
  background: #FF6B00;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  position: relative;
  overflow: hidden;
}
.sd-modal-btn-primary:hover:not(:disabled) {
  background: #E05E00;
  box-shadow: 0 4px 16px rgba(255,107,0,0.3);
  transform: translateY(-1px);
}
.sd-modal-btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}
.sd-modal-btn-primary:disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
}
.sd-modal-btn-primary.loading .label {
  visibility: hidden;
}
.sd-modal-btn-primary.loading .circle-loader {
  display: block;
  position: absolute;
}
.sd-modal-btn-primary .circle-loader {
  display: none;
}

/* --- Alert --- */
.sd-modal-alert {
  background: #FFF8E1;
  border: 1px solid #FFE082;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #8D6E00;
  font-size: 14px;
}
.sd-modal-alert p {
  margin: 0;
}


/* =====================================================
   SD MODAL — Action Cards (LocationSelectionModal)
   ===================================================== */
.sd-modal-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 10px;
  background: #F5F5F5;
  border: 2px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
  cursor: pointer;
}
.sd-modal-card:hover {
  background: #EFEFEF;
  text-decoration: none;
  color: inherit;
}
.sd-modal-card:active {
  transform: scale(0.98);
  background: #E8E8E8;
}
.sd-modal-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #FFFFFF;
  color: #FF6B00;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.sd-modal-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sd-modal-card-primary {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-modal-card-secondary {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #666666;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-modal-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #BBBBBB;
  font-size: 18px;
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}
.sd-modal-card:hover .sd-modal-card-arrow {
  color: #999;
  transform: translateX(2px);
}


/* =====================================================
   SD MODAL — Segmented Control (DeliveryTimeModal)
   ===================================================== */
.sd-seg-control {
  display: flex;
  position: relative;
  background: #F0F0F0;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
  overflow: hidden;
}
.sd-seg-track {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  pointer-events: none;
}
.sd-seg-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #FFFFFF;
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.04);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sd-seg-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: #888;
  cursor: pointer;
  position: relative;
  z-index: 1;
  margin: 0;
  transition: color 0.2s ease, font-weight 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}
.sd-seg-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.sd-seg-item.active {
  color: #1A1A1A;
  font-weight: 700;
}

/* =====================================================
   SD MODAL — Date Pills + Time List (DeliveryTimeModal)
   ===================================================== */

/* --- Horizontal scrollable date pills --- */
.sd-date-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sd-date-scroll::-webkit-scrollbar {
  display: none;
}
.sd-date-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  background: #F3F3F3;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s ease;
  cursor: pointer;
  border: 2px solid transparent;
}
.sd-date-pill:hover {
  background: #EAEAEA;
  color: #333;
  text-decoration: none;
}
.sd-date-pill.active {
  background: #FFF5EB;
  color: #FF6B00;
  font-weight: 700;
  border-color: #FF6B00;
}

/* --- Vertical scrollable time list --- */
.sd-time-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #EBEBEB;
  border-radius: 12px;
  padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: #DDD transparent;
}
.sd-time-list::-webkit-scrollbar {
  width: 5px;
}
.sd-time-list::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
}
.sd-time-list::-webkit-scrollbar-thumb {
  background: #DDD;
  border-radius: 3px;
}
.sd-time-list::-webkit-scrollbar-thumb:hover {
  background: #BBB;
}
.sd-time-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
  cursor: pointer;
}
.sd-time-item:hover {
  background: #F5F5F5;
  color: #1A1A1A;
  text-decoration: none;
}
.sd-time-item.active {
  background: #FFF5EB;
  color: #FF6B00;
  font-weight: 600;
}
.sd-time-check {
  font-size: 18px;
  color: #FF6B00;
  flex-shrink: 0;
  margin-left: 8px;
}


/* =====================================================
   SD MODAL — Mobile Bottom Sheet
   ===================================================== */
@media (max-width: 991px) {
  .sd-modal .sd-modal-dialog {
    max-width: 100%;
    margin: 0;
    display: flex;
    align-items: flex-end;
    min-height: 100vh;
  }
  .sd-modal .sd-modal-content.sd-modal-mobile {
    position: relative;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.12);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: sdSheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @keyframes sdSheetSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .sd-modal .sd-modal-content.sd-modal-mobile .sd-modal-header {
    padding: 16px 20px 6px;
    position: sticky;
    top: 0;
    background: #FFFFFF;
    z-index: 2;
  }
  .sd-modal .sd-modal-content.sd-modal-mobile .sd-modal-header::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #DDD;
    border-radius: 2px;
    margin: 0 auto 12px;
  }
  .sd-modal .sd-modal-content.sd-modal-mobile .sd-modal-body {
    padding: 8px 20px 8px;
  }
  .sd-modal .sd-modal-content.sd-modal-mobile .sd-modal-footer {
    padding: 12px 20px 24px;
    position: sticky;
    bottom: 0;
    background: #FFFFFF;
    z-index: 2;
  }
  .sd-modal .sd-modal-content.sd-modal-mobile .sd-modal-card {
    padding: 14px;
  }
  .sd-modal .sd-modal-content.sd-modal-mobile .sd-modal-card-icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
  .sd-modal .sd-modal-content.sd-modal-mobile .sd-modal-card-primary {
    font-size: 14px;
  }
  .sd-modal .sd-modal-content.sd-modal-mobile .sd-modal-card-secondary {
    font-size: 12px;
  }
}

/* =====================================================
   SD MODAL — RTL Support
   ===================================================== */
html[dir="rtl"] .sd-modal-header {
  flex-direction: row-reverse;
}
html[dir="rtl"] .sd-modal-card {
  flex-direction: row-reverse;
}
html[dir="rtl"] .sd-modal-card-text {
  text-align: right;
}
html[dir="rtl"] .sd-modal-card-arrow i {
  transform: rotate(180deg);
}
html[dir="rtl"] .sd-date-scroll {
  direction: rtl;
}
html[dir="rtl"] .sd-time-check {
  margin-left: 0;
  margin-right: 8px;
}

/* =====================================================
   SD CHECKOUT — Transaction Modal (sd-co-*)
   ===================================================== */

/* --- Modal layout constraints --- */
.sd-co-trn {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3.5rem);
}
.sd-co-trn .sd-modal-header {
  flex-shrink: 0;
}
.sd-co-trn .sd-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #DDD transparent;
}
.sd-co-trn .sd-modal-body::-webkit-scrollbar {
  width: 4px;
}
.sd-co-trn .sd-modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.sd-co-trn .sd-modal-body::-webkit-scrollbar-thumb {
  background: #DDD;
  border-radius: 2px;
}
.sd-co-trn .sd-modal-footer {
  flex-shrink: 0;
}
@media (max-width: 991px) {
  .sd-co-trn {
    max-height: 90vh;
  }
}

/* --- Service cards --- */
.sd-co-services {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.sd-co-svc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #F5F5F5;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  margin: 0;
}
.sd-co-svc-card:hover {
  background: #EFEFEF;
}
.sd-co-svc-card--active {
  background: #FFF5EB;
  border-color: #FF6B00;
}
.sd-co-svc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #E8E8E8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #666;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.sd-co-svc-card--active .sd-co-svc-icon {
  background: #FF6B00;
  color: #FFF;
}
.sd-co-svc-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.sd-co-svc-card--active .sd-co-svc-name {
  color: #1A1A1A;
}
.sd-co-svc-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FF6B00;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* --- Divider --- */
.sd-co-divider {
  height: 1px;
  background: #EBEBEB;
  margin: 16px 0;
}

/* --- When label --- */
.sd-co-when-label {
  font-size: 12px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* --- Segmented control override for checkout --- */
.sd-co-seg {
  margin-bottom: 20px;
}

/* --- Schedule section --- */
.sd-co-sched {
  animation: sdCoFadeIn 0.25s ease;
}
@keyframes sdCoFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Section labels --- */
.sd-co-sched-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}
.sd-co-sched-section-label i {
  font-size: 14px;
  color: #BBB;
}

/* --- Date cards horizontal scroll --- */
.sd-co-dates-wrap {
  position: relative;
  margin-bottom: 12px;
}
.sd-co-dates {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.sd-co-dates::-webkit-scrollbar {
  display: none;
}
.sd-co-date-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 10px 8px 8px;
  border-radius: 14px;
  background: #F3F3F3;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
  position: relative;
}
.sd-co-date-card:hover {
  background: #EAEAEA;
  text-decoration: none;
}
.sd-co-date-day {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}
.sd-co-date-num {
  font-size: 22px;
  font-weight: 800;
  color: #333;
  line-height: 1.2;
  margin: 2px 0;
}
.sd-co-date-month {
  font-size: 11px;
  font-weight: 500;
  color: #888;
  line-height: 1;
}
.sd-co-date-today {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: #FF6B00;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 3px;
  line-height: 1;
}

/* Today card */
.sd-co-date-card--today {
  border-color: rgba(255,107,0,0.3);
}

/* Active date card */
.sd-co-date-card--active {
  background: #FF6B00;
  border-color: #FF6B00;
  box-shadow: 0 4px 14px rgba(255,107,0,0.3);
}
.sd-co-date-card--active .sd-co-date-day,
.sd-co-date-card--active .sd-co-date-num,
.sd-co-date-card--active .sd-co-date-month,
.sd-co-date-card--active .sd-co-date-today {
  color: #FFF;
}

/* --- Opening hours info bar --- */
.sd-co-hours-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #F0FAF0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #2D7A3A;
  margin-bottom: 16px;
}
.sd-co-hours-info i {
  font-size: 16px;
  color: #34A853;
}

/* --- Time count badge --- */
.sd-co-time-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #FF6B00;
  color: #FFF;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}

/* --- Time grid (2-column) --- */
.sd-co-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: #DDD transparent;
}
.sd-co-times::-webkit-scrollbar {
  width: 4px;
}
.sd-co-times::-webkit-scrollbar-track {
  background: transparent;
}
.sd-co-times::-webkit-scrollbar-thumb {
  background: #DDD;
  border-radius: 2px;
}
.sd-co-time-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  border-radius: 10px;
  border: 1.5px solid #E5E5E5;
  background: #FFF;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sd-co-time-btn:hover {
  border-color: #CCC;
  background: #FAFAFA;
  text-decoration: none;
  color: #333;
}
.sd-co-time-btn--active {
  border-color: #FF6B00;
  background: #FFF5EB;
  color: #FF6B00;
  font-weight: 600;
}
.sd-co-time-btn--active:hover {
  border-color: #FF6B00;
  background: #FFF5EB;
  color: #FF6B00;
}
.sd-co-time-check {
  font-size: 16px;
  color: #FF6B00;
  flex-shrink: 0;
}
.sd-co-time-label {
  white-space: nowrap;
}

/* --- Empty times --- */
.sd-co-empty-times {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  background: #F8F8F8;
  border-radius: 12px;
  font-size: 13px;
  color: #999;
}
.sd-co-empty-times i {
  font-size: 18px;
}

/* --- Alert --- */
.sd-co-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.sd-co-alert--warn {
  background: #FFF8E1;
  color: #8B6914;
}
.sd-co-alert--warn i {
  color: #F9A825;
  font-size: 16px;
  margin-top: 1px;
}

/* --- RTL support for checkout --- */
html[dir="rtl"] .sd-co-svc-card {
  flex-direction: row-reverse;
}
html[dir="rtl"] .sd-co-dates {
  direction: rtl;
}
html[dir="rtl"] .sd-co-time-check {
  margin-left: 0;
  margin-right: auto;
}

/* ===== 30. SEO LOCATION PAGES ===== */
.seo-page {
  min-height: 60vh;
}
.seo-h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.seo-h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
}
.seo-h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}
.seo-intro {
  font-size: 1rem;
  color: #555;
  line-height: 1.7;
  max-width: 800px;
}
.seo-breadcrumb .breadcrumb-item a {
  color: #FF6B00;
  text-decoration: none;
}
.seo-breadcrumb .breadcrumb-item a:hover {
  text-decoration: underline;
}
.seo-breadcrumb .breadcrumb-item.active {
  color: #888;
}
.seo-city-card {
  background: #f8f8f8;
  border: 1px solid #eee;
  transition: box-shadow 0.2s, border-color 0.2s;
  text-decoration: none;
  color: inherit;
}
.seo-city-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border-color: #FF6B00;
  text-decoration: none;
  color: inherit;
}
.seo-city-card h5 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.seo-cuisine-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.seo-chip {
  padding: 6px 14px;
  font-size: 0.85rem;
  border-radius: 20px;
  border: 1px solid #ddd;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.seo-chip:hover {
  background: #FF6B00;
  color: #fff;
  border-color: #FF6B00;
  text-decoration: none;
}
.seo-chip:hover .text-muted {
  color: rgba(255,255,255,0.8) !important;
}
.badge-primary.seo-chip {
  background: #FF6B00;
  border-color: #FF6B00;
  color: #fff;
}
.seo-sidebar-section {
  background: #fafafa;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #eee;
}
.seo-area-list li a {
  color: #333;
  text-decoration: none;
  font-size: 0.9rem;
}
.seo-area-list li a:hover {
  color: #FF6B00;
}
.seo-faq {
  border-top: 1px solid #eee;
  padding-top: 24px;
}
.seo-faq-q {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.seo-faq-a {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
}
.seo-footer-links {
  background: #1a1a1a;
  padding: 14px 0 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.seo-fl-row {
  line-height: 1.7;
  margin-bottom: 4px;
}
.seo-fl-row:last-child { margin-bottom: 0; }
.seo-fl-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-right: 6px;
}
.seo-fl-row a {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
}
.seo-fl-row a:hover {
  color: #FF6B00;
  text-decoration: underline;
}
.seo-fl-sep {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.2);
  margin: 0 3px;
}

/* Cuisine group sections */
.seo-cuisine-group { border-bottom: 1px solid #eee; padding-bottom: 16px; }
.seo-cuisine-group:last-child { border-bottom: none; }
.seo-cuisine-group-header { margin-bottom: 12px; }
.seo-cuisine-group-header .seo-h2 a {
  color: #1a1a1a;
  text-decoration: none;
}
.seo-cuisine-group-header .seo-h2 a:hover { color: #FF6B00; }
.seo-cuisine-count {
  font-size: 0.8rem;
  font-weight: 400;
  color: #999;
  margin-left: 8px;
}

/* Merchant card (cuisine grouped) */
.seo-merchant-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.seo-merchant-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-color: #FF6B00;
  text-decoration: none;
  color: inherit;
}
.seo-merchant-img {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: #f5f5f5;
}
.seo-merchant-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.seo-merchant-info {
  padding: 8px 10px 10px;
}
.seo-merchant-info h5 {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seo-merchant-rating {
  font-size: 0.78rem;
  color: #555;
  margin-bottom: 2px;
}
.seo-star { color: #FF6B00; font-size: 0.85rem; }
.seo-merchant-addr {
  font-size: 0.72rem;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Additional text block */
.seo-additional-text {
  border-top: 1px solid #eee;
  padding-top: 24px;
  font-size: 0.95rem;
  color: #444;
  line-height: 1.7;
}
.seo-additional-text h2 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.seo-additional-text h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #333;
  margin-top: 20px;
  margin-bottom: 8px;
}
.seo-additional-text ul {
  padding-left: 20px;
  margin-bottom: 16px;
}
.seo-additional-text ul li {
  margin-bottom: 6px;
  line-height: 1.6;
}
.seo-additional-text p {
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .seo-h1 { font-size: 1.35rem; }
  .seo-h2 { font-size: 1.1rem; }
  .seo-intro { font-size: 0.9rem; }
  .seo-chip { padding: 4px 10px; font-size: 0.8rem; }
  .seo-merchant-info h5 { font-size: 0.82rem; }
  .seo-cuisine-count { display: block; margin-left: 0; margin-top: 2px; }
}

/* ===== 30b. CUISINE PAGE (sd-cp-*) ===== */
.sd-cp {
  min-height: 60vh;
  padding-bottom: 40px;
}

/* Breadcrumb */
.sd-cp-breadcrumb {
  padding: 16px 0 0;
}
.sd-cp-breadcrumb .breadcrumb-item a {
  color: #FF6B00;
  text-decoration: none;
  font-size: 0.85rem;
}
.sd-cp-breadcrumb .breadcrumb-item a:hover {
  text-decoration: underline;
}
.sd-cp-breadcrumb .breadcrumb-item.active {
  color: #888;
  font-size: 0.85rem;
}
.sd-cp-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #ccc;
}

/* Hero */
.sd-cp-hero {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 28px 0 24px;
}
.sd-cp-hero__text {
  flex: 1;
  min-width: 0;
}
.sd-cp-h1 {
  font-size: 2rem;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 12px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.sd-cp-intro {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  margin: 0 0 16px;
  max-width: 640px;
}
.sd-cp-hero__stats {
  display: flex;
  gap: 20px;
}
.sd-cp-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: #666;
  background: #f5f5f5;
  padding: 6px 14px;
  border-radius: 20px;
}
.sd-cp-stat i {
  color: #FF6B00;
  font-size: 0.85rem;
}
.sd-cp-stat strong {
  color: #1a1a1a;
  font-weight: 700;
}
.sd-cp-hero__img {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(255,107,0,0.15);
}
.sd-cp-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section title */
.sd-cp-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px;
  padding-top: 4px;
}

/* Cuisine chips */
.sd-cp-cuisines {
  padding: 8px 0 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 24px;
}
.sd-cp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sd-cp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 28px;
  padding: 5px 14px 5px 5px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  font-size: 0.85rem;
}
.sd-cp-chip:hover {
  border-color: #FF6B00;
  box-shadow: 0 2px 8px rgba(255,107,0,0.12);
  text-decoration: none;
  color: inherit;
  transform: translateY(-1px);
}
.sd-cp-chip__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.sd-cp-chip__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.sd-cp-chip__name {
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}
.sd-cp-chip__count {
  font-size: 0.75rem;
  color: #999;
  font-weight: 400;
}

/* Feed section */
.sd-cp-feed {
  padding-top: 8px;
  padding-bottom: 24px;
  min-height: 200px;
}
.sd-cp-feed__sub {
  font-size: 0.88rem;
  color: #888;
  margin: -8px 0 16px;
}

/* Empty state */
.sd-cp-empty {
  text-align: center;
  padding: 48px 20px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sd-cp-empty__icon {
  font-size: 2.5rem;
  color: #ddd;
  margin-bottom: 16px;
}
.sd-cp-empty h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px;
}
.sd-cp-empty p {
  font-size: 0.9rem;
  color: #888;
  margin: 0;
  max-width: 360px;
}

/* Restaurant cards (shared by Vue and static) */
.sd-cp-card {
  display: block;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
  height: 100%;
}
.sd-cp-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  border-color: #FF6B00;
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
}
.sd-cp-card--closed {
  opacity: 0.7;
}
.sd-cp-card--closed:hover {
  opacity: 0.85;
}
.sd-cp-card__img {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: #f5f5f5;
}
.sd-cp-card__img img,
.sd-cp-card__img .el-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-cp-card__img .el-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-cp-card__promo {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #FF6B00;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sd-cp-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-cp-card__overlay span {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  padding: 0 12px;
}
.sd-cp-card__body {
  padding: 10px 12px 12px;
}
.sd-cp-card__row1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.sd-cp-card__name {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1a1a1a;
  flex: 1;
  min-width: 0;
}
.sd-cp-card__rating {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: #FF6B00;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.sd-cp-card__rating i {
  font-size: 0.7rem;
  margin-right: 1px;
}
.sd-cp-card__cuisines {
  font-size: 0.78rem;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.sd-cp-card__meta {
  font-size: 0.78rem;
  color: #999;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sd-cp-card__meta i {
  font-size: 0.75rem;
  margin-right: 2px;
}
.sd-cp-card__next {
  font-size: 0.75rem;
  color: #FF6B00;
  margin-top: 4px;
  font-weight: 500;
}
.sd-cp-card__promo-line {
  font-size: 0.75rem;
  color: #e65100;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-cp-card__promo-line i {
  font-size: 0.7rem;
  margin-right: 3px;
}
.sd-cp-card__addr {
  font-size: 0.75rem;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Skeleton cards */
.sd-cp-card--skeleton {
  pointer-events: none;
}
.sd-cp-card--skeleton .sd-cp-card__img {
  background: #f0f0f0;
}

/* SEO grid (server-rendered) */
.sd-cp-seo-grid {
  padding: 24px 0 8px;
  border-top: 1px solid #eee;
}

/* Lightweight restaurant text list (scalable) */
.sd-cp-rest-list {
  padding: 16px 0 8px;
}
.sd-cp-rest-list__title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 10px;
}
.sd-cp-rest-list__ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 24px;
}
.sd-cp-rest-list__ul li {
  padding: 4px 0;
  border-bottom: 1px solid #f5f5f5;
  line-height: 1.5;
}
.sd-cp-rest-list__ul li a {
  font-size: 0.85rem;
  color: #444;
  text-decoration: none;
  transition: color 0.15s;
}
.sd-cp-rest-list__ul li a:hover {
  color: #FF6B00;
  text-decoration: none;
}
@media (max-width: 767px) {
  .sd-cp-rest-list__ul { grid-template-columns: 1fr; }
}

/* City cards */
.sd-cp-cities {
  padding: 24px 0 8px;
  border-top: 1px solid #eee;
}
.sd-cp-city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.sd-cp-city-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-cp-city-card:hover {
  border-color: #FF6B00;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-decoration: none;
  color: inherit;
}
.sd-cp-city-card__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a1a;
}
.sd-cp-city-card__count {
  font-size: 0.78rem;
  color: #888;
  white-space: nowrap;
}

/* Additional text */
.sd-cp-additional {
  padding: 24px 0;
  border-top: 1px solid #eee;
  font-size: 0.95rem;
  color: #444;
  line-height: 1.7;
}
.sd-cp-additional h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px;
}
.sd-cp-additional h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #333;
  margin: 20px 0 8px;
}
.sd-cp-additional ul {
  padding-left: 20px;
  margin-bottom: 16px;
}
.sd-cp-additional ul li {
  margin-bottom: 6px;
  line-height: 1.6;
}
.sd-cp-additional p {
  margin-bottom: 12px;
}

/* FAQ */
.sd-cp-faq {
  padding: 24px 0;
  border-top: 1px solid #eee;
}
.sd-cp-faq__item {
  border: 1px solid #eee;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.sd-cp-faq__item[open] {
  border-color: #FF6B00;
}
.sd-cp-faq__q {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a1a;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  transition: background 0.15s;
}
.sd-cp-faq__q:hover {
  background: #fafafa;
}
.sd-cp-faq__q::-webkit-details-marker {
  display: none;
}
.sd-cp-faq__q::after {
  content: '\f078';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 0.7rem;
  color: #999;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.sd-cp-faq__item[open] .sd-cp-faq__q::after {
  transform: rotate(180deg);
  color: #FF6B00;
}
.sd-cp-faq__a {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
  padding: 0 16px 14px;
  margin: 0;
}

/* ─── Responsive ─── */
@media (max-width: 991px) {
  .sd-cp-hero {
    flex-direction: column-reverse;
    gap: 16px;
    padding: 20px 0 16px;
  }
  .sd-cp-hero__img {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    align-self: flex-start;
  }
  .sd-cp-h1 { font-size: 1.5rem; }
  .sd-cp-intro { font-size: 0.88rem; }
  .sd-cp-hero__stats { gap: 10px; }
  .sd-cp-stat { font-size: 0.8rem; padding: 5px 10px; }
}
@media (max-width: 767px) {
  .sd-cp-h1 { font-size: 1.3rem; }
  .sd-cp-section-title { font-size: 1.1rem; }
  .sd-cp-hero__img { width: 90px; height: 90px; border-radius: 16px; }
  .sd-cp-card__img { height: 130px; }
  .sd-cp-card__name { font-size: 0.85rem; }
  .sd-cp-chips { gap: 6px; }
  .sd-cp-chip { font-size: 0.8rem; padding: 4px 10px 4px 4px; }
  .sd-cp-chip__icon { width: 28px; height: 28px; }
  .sd-cp-chip__icon img { width: 18px; height: 18px; }
  .sd-cp-city-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sd-cp-city-card { padding: 10px 12px; }
  .sd-cp-city-card__name { font-size: 0.82rem; }
  .sd-cp-faq__q { font-size: 0.88rem; padding: 12px 14px; }
  .sd-cp-faq__a { font-size: 0.85rem; padding: 0 14px 12px; }
}
@media (max-width: 480px) {
  .sd-cp-city-grid { grid-template-columns: 1fr; }
  .sd-cp-hero__stats { flex-wrap: wrap; }
}

/* ===== 30c. CUISINE INDEX PAGE (sd-ci-*) ===== */
.sd-ci {
  min-height: 60vh;
  padding-bottom: 40px;
}

/* Hero */
.sd-ci-hero {
  background: linear-gradient(135deg, #fff8f0 0%, #fff1e0 100%);
  padding: 0 0 28px;
}
.sd-ci-hero__title {
  font-size: 2rem;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 10px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.sd-ci-hero__sub {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  margin: 0 0 16px;
  max-width: 680px;
}
.sd-ci-hero__stats {
  display: flex;
  gap: 16px;
}

/* Search */
.sd-ci-search {
  position: relative;
  max-width: 440px;
  margin: 24px 0 20px;
}
.sd-ci-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  font-size: 0.85rem;
  pointer-events: none;
}
.sd-ci-search__input {
  width: 100%;
  height: 44px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 0 16px 0 38px;
  font-size: 0.9rem;
  color: #333;
  background: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-ci-search__input:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08);
}
.sd-ci-search__input::placeholder {
  color: #bbb;
}

/* Grid */
.sd-ci-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

/* Cuisine card */
.sd-ci-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.sd-ci-card:hover {
  border-color: #FF6B00;
  box-shadow: 0 4px 16px rgba(255,107,0,0.1);
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
}
.sd-ci-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.sd-ci-card__icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.sd-ci-card__body {
  flex: 1;
  min-width: 0;
}
.sd-ci-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-ci-card__count {
  font-size: 0.78rem;
  color: #888;
}
.sd-ci-card__arrow {
  font-size: 0.7rem;
  color: #ccc;
  flex-shrink: 0;
  transition: color 0.2s, transform 0.2s;
}
.sd-ci-card:hover .sd-ci-card__arrow {
  color: #FF6B00;
  transform: translateX(2px);
}

/* Empty */
.sd-ci-empty {
  text-align: center;
  padding: 40px 20px;
}

/* Popular cities */
.sd-ci-popular {
  padding: 24px 0 8px;
  border-top: 1px solid #eee;
}
.sd-ci-city-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sd-ci-city-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8f8f8;
  border: 1px solid #e8e8e8;
  border-radius: 24px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-ci-city-chip:hover {
  border-color: #FF6B00;
  box-shadow: 0 2px 8px rgba(255,107,0,0.1);
  text-decoration: none;
  color: #1a1a1a;
}
.sd-ci-city-chip i {
  font-size: 0.7rem;
  color: #FF6B00;
}
.sd-ci-city-chip__count {
  font-size: 0.72rem;
  color: #aaa;
  font-weight: 400;
}

/* Additional text & FAQ - reuse sd-cp patterns */
.sd-ci-intro {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  max-width: 680px;
}
.sd-ci-additional {
  padding: 24px 0;
  border-top: 1px solid #eee;
  font-size: 0.95rem;
  color: #444;
  line-height: 1.7;
}
.sd-ci-additional h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px;
}
.sd-ci-additional h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #333;
  margin: 20px 0 8px;
}
.sd-ci-additional p { margin-bottom: 12px; }
.sd-ci-additional ul { padding-left: 20px; margin-bottom: 16px; }
.sd-ci-additional ul li { margin-bottom: 6px; line-height: 1.6; }
.sd-ci-faq {
  padding: 24px 0;
  border-top: 1px solid #eee;
}

/* Responsive */
@media (max-width: 991px) {
  .sd-ci-hero__title { font-size: 1.5rem; }
  .sd-ci-hero__sub { font-size: 0.88rem; }
}
@media (max-width: 767px) {
  .sd-ci-hero__title { font-size: 1.3rem; }
  .sd-ci-grid { grid-template-columns: 1fr; gap: 8px; }
  .sd-ci-card { padding: 12px 14px; }
  .sd-ci-card__icon { width: 42px; height: 42px; border-radius: 10px; }
  .sd-ci-card__icon img { width: 26px; height: 26px; }
  .sd-ci-card__name { font-size: 0.88rem; }
  .sd-ci-search { max-width: 100%; }
  .sd-ci-city-chips { gap: 6px; }
  .sd-ci-city-chip { font-size: 0.8rem; padding: 6px 12px; }
}

/* ============================================================
   Mobile Category Navigation Bar (.cat-nav-*)
   ============================================================ */

/* --- Outer wrap (search + pills) --- */
.cat-nav-wrap {
  background: #fff;
  position: relative;
}

/* --- Fixed state (JS-toggled) --- */
.cat-nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* --- Search row --- */
.cat-nav-search {
  display: flex;
  align-items: center;
  padding: 8px 12px 4px;
  position: relative;
}
.cat-nav-search-icon {
  position: absolute;
  left: 24px;
  font-size: 18px;
  color: #999;
  pointer-events: none;
}
.cat-nav-search-input {
  width: 100%;
  height: 40px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 0 36px 0 40px;
  font-size: 14px;
  color: #333;
  background: #f8f8f8;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s, background 0.2s;
}
.cat-nav-search-input:focus {
  border-color: #FF6B00;
  background: #fff;
}
.cat-nav-search-input::placeholder {
  color: #aaa;
}
.cat-nav-search-spinner {
  position: absolute;
  right: 24px;
  display: flex;
  align-items: center;
}
.cat-nav-search-spinner .spinner-border-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
  color: #999;
}
.cat-nav-search-clear {
  position: absolute;
  right: 20px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cat-nav-search-clear:hover {
  color: #555;
}

/* --- Search dropdown --- */
.cat-nav-search-dropdown {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 52px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 100;
}
.cat-nav-search-empty {
  padding: 24px;
  text-align: center;
}
.cat-nav-search-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  border-bottom: 1px solid #f5f5f5;
}
.cat-nav-search-item:last-child {
  border-bottom: none;
}
.cat-nav-search-item:hover {
  background: #fafafa;
}
.cat-nav-search-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cat-nav-search-item-name {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-nav-search-item-price {
  font-size: 12px;
  color: #999;
}

/* --- Category pills row --- */
.cat-nav-bar {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0;
  gap: 0;
  height: 40px;
}

/* --- Horizontal scroll container --- */
.cat-nav-scroll {
  flex: 1;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 10px;
  gap: 8px;
  height: 100%;
}
.cat-nav-scroll::-webkit-scrollbar {
  display: none;
}

/* --- Category pill --- */
.cat-nav-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.3;
}
.cat-nav-pill:hover {
  text-decoration: none;
  color: #333;
}
.cat-nav-pill.active {
  background: #FF6B00;
  color: #fff !important;
  font-weight: 600;
}
.cat-nav-pill.active:hover {
  background: #e55f00;
  color: #fff !important;
}

/* --- List button (right side) --- */
.cat-nav-list-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-left: 1px solid #f0f0f0;
  color: #555;
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cat-nav-list-btn:active {
  background: #f5f5f5;
}

/* --- Drawer styles --- */
.cat-nav-drawer .el-drawer__body {
  padding: 0 !important;
}
.cat-nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.cat-nav-drawer-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 44px);
}
.cat-nav-drawer-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border: none;
  border-radius: 50%;
  color: #555;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.cat-nav-drawer-close:active {
  background: #e8e8e8;
}

/* --- Drawer list --- */
.cat-nav-drawer-list {
  padding: 8px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cat-nav-drawer-item {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  text-decoration: none;
  color: #333;
  font-size: 15px;
  font-weight: 400;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.cat-nav-drawer-item:hover {
  text-decoration: none;
  background: #fafafa;
  color: #333;
}
.cat-nav-drawer-item.active {
  color: #FF6B00;
  font-weight: 600;
  background: #FFF8F2;
}
.cat-nav-drawer-item.active .cat-nav-drawer-count {
  background: #FF6B00;
  color: #fff;
}
.cat-nav-drawer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-nav-drawer-count {
  flex-shrink: 0;
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  color: #666;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 12px;
  padding: 0 8px;
}

/* --- Drawer rounded top corners --- */
.cat-nav-drawer .el-drawer {
  border-radius: 16px 16px 0 0;
}

/* --- RTL support --- */
[dir="rtl"] .cat-nav-list-btn {
  border-left: none;
  border-right: 1px solid #f0f0f0;
}
[dir="rtl"] .cat-nav-search-icon {
  left: auto;
  right: 24px;
}
[dir="rtl"] .cat-nav-search-input {
  padding: 0 40px 0 36px;
}
[dir="rtl"] .cat-nav-search-clear,
[dir="rtl"] .cat-nav-search-spinner {
  right: auto;
  left: 20px;
}
[dir="rtl"] .cat-nav-search-item-info {
  margin-left: 0;
  margin-right: 10px;
}
[dir="rtl"] .cat-nav-drawer-count {
  margin-left: 0;
  margin-right: 12px;
}

/* --- Category pill icon (mobile bar) --- */
.cat-nav-pill-icon {
  width: 18px;
  height: 18px;
  max-height: 18px;
  object-fit: contain;
  margin-right: 5px;
  flex-shrink: 0;
  border-radius: 3px;
  vertical-align: middle;
}

/* --- Drawer group wrapper --- */
.cat-nav-drawer-group {
  border-bottom: 1px solid #f5f3f0;
}
.cat-nav-drawer-group:last-child {
  border-bottom: none;
}

/* --- Drawer category icon --- */
.cat-nav-drawer-icon {
  width: 20px;
  height: 20px;
  max-height: 20px;
  object-fit: contain;
  margin-right: 10px;
  flex-shrink: 0;
  border-radius: 4px;
}

/* --- Desktop sidebar: category group --- */
.sd-cat-sidebar-group {
  margin-bottom: 2px;
}

/* --- Desktop sidebar: category link with icon --- */
.sd-cat-sidebar-link {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.sd-cat-sidebar-icon {
  width: 18px;
  height: 18px;
  max-height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 3px;
}
.sd-cat-sidebar-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-cat-sidebar-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: #999;
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f3f0;
  border-radius: 11px;
  line-height: 1;
}
.sticky-sidebar .menu-category .nav-link.active .sd-cat-sidebar-count,
.sticky-sidebar .menu-category li.active .nav-link .sd-cat-sidebar-count {
  background: #FF6B00;
  color: #fff;
}

/* --- Menu page: category header with inline dish tags --- */
.sd-menu-cat-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.sd-menu-cat-header h5,
.sd-menu-cat-header .cat-banner-title {
  margin-bottom: 0;
  flex-shrink: 0;
}
.sd-menu-dish-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.sd-menu-dish-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  color: #999;
  background: #f5f2ee;
  padding: 2px 9px;
  border-radius: 20px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cat-banner .sd-menu-cat-header {
  align-items: center;
}
.cat-banner .sd-menu-dish-tag {
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* --- Responsive: Mobile ≤ 767px --- */
@media (max-width: 767px) {
  .cat-nav-pill-icon {
    width: 16px;
    height: 16px;
    max-height: 16px;
    margin-right: 4px;
  }
}

/* --- RTL support for new elements --- */
[dir="rtl"] .cat-nav-pill-icon {
  margin-right: 0;
  margin-left: 5px;
}
[dir="rtl"] .cat-nav-drawer-icon {
  margin-right: 0;
  margin-left: 10px;
}

/* --- Menu item highlight animation (for search result selection) --- */
.menu-item-highlight {
  animation: menuItemPulse 2s ease;
}
@keyframes menuItemPulse {
  0% {
    background-color: rgba(255, 107, 0, 0.15);
    transform: scale(1);
  }
  50% {
    background-color: rgba(255, 107, 0, 0.25);
    transform: scale(1.01);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

/* =============================================
   SECTION 31 — Sidebar Search + Cart Delivery Info + Free Delivery Bar
   ============================================= */

/* --- Sidebar Search (above category list) --- */
.sd-sidebar-search {
  margin-bottom: 14px;
  padding-right: 8px;
  position: relative;
}
.sd-sidebar-search .menu-search-wrapper .el-input--large .el-input__wrapper {
  border-radius: 10px !important;
  height: 40px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  background: #f5f3f0 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
}
.sd-sidebar-search .menu-search-wrapper .el-input--large .el-input__wrapper:hover {
  background: #f0ede8 !important;
}
.sd-sidebar-search .menu-search-wrapper .el-input--large .el-input__wrapper.is-focus {
  background: #fff !important;
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1) !important;
}
.sd-sidebar-search .menu-search-wrapper .el-input--large .el-input__inner {
  font-size: 13px !important;
}
.sd-sidebar-search .menu-search-dropdown {
  max-height: 280px;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border: 1px solid #f0ede8;
  z-index: 100;
}

/* --- Cart Delivery Info (standalone element below cart items) --- */
.sd-cart-delivery-info {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fafaf8;
  border-radius: 10px;
  border: 1px solid #f0ede8;
}
.sd-cart-delivery-info-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #FF6B00;
}
.sd-cart-delivery-icon {
  font-size: 14px;
  opacity: 0.85;
}

/* --- Free Delivery Progress Bar (redesigned) --- */
.sd-free-delivery-bar {
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #FFF8F0 0%, #FFF0E0 100%);
  border-radius: 12px;
  border: 1px solid rgba(255,107,0,0.15);
}
.sd-free-delivery-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sd-free-delivery-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FF6B00 0%, #E05E00 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(255,107,0,0.25);
}
.sd-free-delivery-text {
  flex: 1;
  min-width: 0;
}
.sd-free-delivery-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: #C04E00;
  line-height: 1.35;
}
.sd-free-delivery-track {
  height: 6px;
  background: rgba(255,107,0,0.12);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.sd-free-delivery-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #FF6B00 0%, #FF8C3A 100%);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.sd-free-delivery-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  animation: sdFreeDeliveryShimmer 2s ease-in-out infinite;
}
@keyframes sdFreeDeliveryShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================================================
   Review System — Category Ratings & Service Badges
   ============================================================ */

/* Category rating pills in review list */
.sd-rv-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sd-rv-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fff8f0;
  border: 1px solid #ffe0c0;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  color: #b35c00;
  font-weight: 500;
  line-height: 1.4;
}
.sd-rv-cat-pill .zmdi {
  font-size: 11px;
  opacity: 0.7;
}

/* Review tags (likes/dislikes) */
.sd-rv-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sd-rv-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}
.sd-rv-tag--like {
  background: #ecfdf5;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.sd-rv-tag--dislike {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Service badge */
.sd-rv-svc-badge {
  display: inline-block;
  background: #f0f7ff;
  border: 1px solid #c8dff8;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
}

/* =============================================
   MODERN REVIEW MODAL — Clean, Premium, Dark-mode
   ============================================= */

/* --- Modal Chrome --- */
.sd-review-modal {
  border: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 2px 12px rgba(0,0,0,.08);
  background: #fff;
}
.sd-review-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.sd-review-modal__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sd-review-modal__icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8F3F 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}
.sd-review-modal__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -.01em;
}
.sd-review-modal__close {
  background: none;
  border: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  transition: all .2s;
}
.sd-review-modal__close:hover {
  background: #f5f5f5;
  color: #333;
}

/* --- Body --- */
.sd-review-modal__body {
  padding: 20px 24px;
  max-height: 65vh;
  overflow-y: auto;
}
.sd-review-modal__body::-webkit-scrollbar { width: 5px; }
.sd-review-modal__body::-webkit-scrollbar-track { background: transparent; }
.sd-review-modal__body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

/* --- Category Ratings --- */
.sd-review-cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  background: #fafafa;
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid #f0f0f0;
}
.sd-review-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.sd-review-cat:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}
.sd-review-cat__info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sd-review-cat__icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.sd-review-cat__icon--food {
  background: #FFF3E8;
  color: #FF6B00;
}
.sd-review-cat__icon--delivery {
  background: #E8F4FD;
  color: #2196F3;
}
.sd-review-cat__icon--value {
  background: #E8F8EE;
  color: #4CAF50;
}
.sd-review-cat__label {
  font-size: 13.5px;
  font-weight: 600;
  color: #444;
}

/* --- Sections (tags, photo, textarea) --- */
.sd-review-section {
  margin-bottom: 16px;
}
.sd-review-section__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 8px;
}
.sd-review-section__label .zmdi {
  color: #FF6B00;
}

/* --- Dropzone --- */
.sd-review-dropzone .dropzone {
  border: 2px dashed #e0e0e0;
  border-radius: 12px;
  background: #fafafa;
  min-height: 100px;
  transition: border-color .2s, background .2s;
}
.sd-review-dropzone .dropzone:hover,
.sd-review-dropzone .dropzone.dz-drag-hover {
  border-color: #FF6B00;
  background: #FFF8F2;
}
.sd-review-dropzone .dz-message {
  text-align: center;
  padding: 16px 8px;
  color: #aaa;
}
.sd-review-dropzone .dz-message p {
  margin: 6px 0 0;
  font-size: 12.5px;
}

/* --- Textarea --- */
.sd-review-textarea {
  width: 100%;
  min-height: 80px;
  max-height: 150px;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
  background: #fafafa;
  color: #333;
  transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
}
.sd-review-textarea:focus {
  outline: none;
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,.1);
  background: #fff;
}

/* --- Anonymous Toggle --- */
.sd-review-anon {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  margin-bottom: 12px;
  transition: background .2s;
}
.sd-review-anon:hover {
  background: #f5f5f5;
}
.sd-review-anon input[type="checkbox"] {
  display: none;
}
.sd-review-anon__check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: transparent;
  transition: all .2s;
  flex-shrink: 0;
}
.sd-review-anon input:checked ~ .sd-review-anon__check {
  background: #FF6B00;
  border-color: #FF6B00;
  color: #fff;
}
.sd-review-anon__text {
  font-size: 13.5px;
  font-weight: 500;
  color: #555;
}

/* --- Error Messages --- */
.sd-review-errors {
  background: #FFF3E8;
  border: 1px solid #FFD9B3;
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 8px;
}
.sd-review-errors p {
  font-size: 13px;
  color: #b35c00;
}

/* --- Footer / Submit --- */
.sd-review-modal__footer {
  padding: 16px 24px 20px;
  border-top: 1px solid #f0f0f0;
}
.sd-review-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8F3F 100%);
  cursor: pointer;
  transition: opacity .2s, transform .1s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(255,107,0,.25);
}
.sd-review-submit:hover:not(:disabled) {
  opacity: .92;
  box-shadow: 0 6px 20px rgba(255,107,0,.35);
}
.sd-review-submit:active:not(:disabled) {
  transform: scale(.98);
}
.sd-review-submit:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.sd-review-submit--loading {
  pointer-events: none;
}
.sd-review-submit__spinner {
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sd-spin .65s linear infinite;
}
@keyframes sd-spin {
  to { transform: rotate(360deg); }
}

/* --- Tagify inside review modal --- */
.sd-review-modal .tagify {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: #fafafa;
  padding: 6px 10px;
  min-height: 38px;
  font-size: 13px;
}
.sd-review-modal .tagify:focus-within,
.sd-review-modal .tagify--focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,.1);
  background: #fff;
}

/* --- Dark Mode Support --- */
@media (prefers-color-scheme: dark) {
  .sd-review-modal {
    background: #1e1e1e;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
  }
  .sd-review-modal__header {
    border-color: #333;
  }
  .sd-review-modal__title {
    color: #f0f0f0;
  }
  .sd-review-modal__close {
    color: #888;
  }
  .sd-review-modal__close:hover {
    background: #2a2a2a;
    color: #ddd;
  }
  .sd-review-modal__body::-webkit-scrollbar-thumb {
    background: #444;
  }
  .sd-review-cats {
    background: #252525;
    border-color: #333;
  }
  .sd-review-cat:not(:last-child) {
    border-color: #333;
  }
  .sd-review-cat__icon--food {
    background: #3a2a1a;
    color: #FF8F3F;
  }
  .sd-review-cat__icon--delivery {
    background: #1a2a3a;
    color: #64B5F6;
  }
  .sd-review-cat__icon--value {
    background: #1a3a2a;
    color: #66BB6A;
  }
  .sd-review-cat__label {
    color: #ccc;
  }
  .sd-review-section__label {
    color: #aaa;
  }
  .sd-review-dropzone .dropzone {
    background: #252525;
    border-color: #444;
  }
  .sd-review-dropzone .dropzone:hover,
  .sd-review-dropzone .dropzone.dz-drag-hover {
    background: #2a2218;
    border-color: #FF6B00;
  }
  .sd-review-dropzone .dz-message {
    color: #777;
  }
  .sd-review-textarea {
    background: #252525;
    border-color: #444;
    color: #e0e0e0;
  }
  .sd-review-textarea:focus {
    background: #2a2a2a;
    border-color: #FF6B00;
    box-shadow: 0 0 0 3px rgba(255,107,0,.15);
  }
  .sd-review-anon {
    background: #252525;
    border-color: #333;
  }
  .sd-review-anon:hover {
    background: #2a2a2a;
  }
  .sd-review-anon__check {
    border-color: #555;
  }
  .sd-review-anon__text {
    color: #bbb;
  }
  .sd-review-errors {
    background: #3a2a1a;
    border-color: #5a3a1a;
  }
  .sd-review-errors p {
    color: #ffaa55;
  }
  .sd-review-modal__footer {
    border-color: #333;
  }
  .sd-review-modal .tagify {
    background: #252525;
    border-color: #444;
    color: #e0e0e0;
  }
  .sd-review-modal .tagify:focus-within,
  .sd-review-modal .tagify--focus {
    background: #2a2a2a;
    border-color: #FF6B00;
    box-shadow: 0 0 0 3px rgba(255,107,0,.15);
  }
}

/* --- Already Reviewed Card --- */
.sd-review-already {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
}
.sd-review-already__icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
}
.sd-review-already__title {
  font-size: 14px;
  font-weight: 700;
  color: #166534;
  margin-bottom: 2px;
}
.sd-review-already__text {
  font-size: 12.5px;
  color: #4ade80;
  font-weight: 500;
}

/* --- Review modal responsive --- */
@media (max-width: 480px) {
  .sd-review-modal {
    border-radius: 14px;
  }
  .sd-review-modal__header {
    padding: 16px 18px 14px;
  }
  .sd-review-modal__body {
    padding: 16px 18px;
  }
  .sd-review-modal__footer {
    padding: 14px 18px 16px;
  }
  .sd-review-cat__label {
    font-size: 12.5px;
  }
}

/* =============================================
   SD PARTNER SIGNUP — Premium Merchant Registration
   ============================================= */

.sd-signup {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- Hero Section --- */
.sd-signup-hero {
  background: linear-gradient(135deg, #FFF7F0 0%, #FFF0E6 40%, #FFFBF7 100%);
  padding: 60px 20px 70px;
  position: relative;
  overflow: hidden;
}
.sd-signup-hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,0,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.sd-signup-hero__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}
.sd-signup-hero__left {
  flex: 1;
  padding-top: 30px;
  min-width: 0;
}
.sd-signup-hero__right {
  flex: 0 0 480px;
  min-width: 0;
}

/* Badge */
.sd-signup-badge {
  display: inline-block;
  background: rgba(255,107,0,0.1);
  color: #FF6B00;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
  letter-spacing: 0.3px;
}

/* Hero Text */
.sd-signup-hero__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0 0 18px;
  letter-spacing: -0.5px;
}
.sd-signup-hero__sub {
  font-size: 17px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 32px;
  max-width: 500px;
}

/* Trust Items */
.sd-signup-trust {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sd-signup-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #333;
  font-weight: 500;
}
.sd-signup-trust__icon {
  color: #22c55e;
  font-size: 20px;
  line-height: 1;
}

/* Hero Image */
.sd-signup-hero-img {
  margin-top: 40px;
  max-width: 580px;
  width: 100%;
}
.sd-signup-hero-img__photo {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
  display: block;
  object-fit: cover;
  background: linear-gradient(135deg, #f8f8f8 0%, #ececec 100%);
  min-height: 320px;
}

/* --- Signup Card --- */
.sd-signup-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  padding: 36px 32px 30px;
  position: relative;
}
.sd-signup-card__header {
  margin-bottom: 24px;
  text-align: center;
}
.sd-signup-card__title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
}
.sd-signup-card__sub {
  font-size: 14px;
  color: #888;
  margin: 0;
}

/* --- Steps Indicator --- */
.sd-signup-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 28px;
}
.sd-signup-step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.sd-signup-step--active,
.sd-signup-step--done {
  opacity: 1;
}
.sd-signup-step__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e5e5e5;
  color: #888;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.sd-signup-step--active .sd-signup-step__num {
  background: #FF6B00;
  color: #fff;
}
.sd-signup-step--done .sd-signup-step__num {
  background: #22c55e;
  color: #fff;
}
.sd-signup-step__label {
  font-size: 13px;
  font-weight: 600;
  color: #666;
}
.sd-signup-step--active .sd-signup-step__label {
  color: #1a1a1a;
}
.sd-signup-step__line {
  width: 40px;
  height: 2px;
  background: #e5e5e5;
  margin: 0 12px;
  border-radius: 1px;
  transition: background 0.3s;
}
.sd-signup-step__line--active {
  background: #22c55e;
}

/* --- Form Fields --- */
.sd-signup-form {
  display: flex;
  flex-direction: column;
}
.sd-signup-field {
  margin-bottom: 18px;
}
.sd-signup-field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
}
.sd-signup-req {
  color: #FF6B00;
}
.sd-signup-field__wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sd-signup-field__icon {
  position: absolute;
  left: 14px;
  color: #aaa;
  font-size: 18px;
  z-index: 1;
  pointer-events: none;
}
.sd-signup-field__input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 42px;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  color: #1a1a1a;
  background: #fafafa;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
}
.sd-signup-field__input:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1);
  background: #fff;
}
.sd-signup-field__input::placeholder {
  color: #bbb;
}
.sd-signup-field__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Address autocomplete field override */
.sd-signup-field__wrap--addr .search-geocomplete {
  flex: 1;
}
.sd-signup-field__wrap--addr .search-geocomplete input.form-control {
  height: 48px;
  padding-left: 42px;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  background: #fafafa;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.sd-signup-field__wrap--addr .search-geocomplete input.form-control:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1);
  background: #fff;
}
.sd-signup-field__wrap--addr .pin_placeholder,
.sd-signup-field__wrap--addr .search-geocomplete > .icon {
  display: none !important;
}
.sd-signup-field__wrap--addr .search-geocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  border: 1px solid #eee;
  margin-top: 4px;
  background: #fff;
  max-height: 260px;
  overflow-y: auto;
}

/* Phone component override */
.sd-signup-field .inputs-with-dropdown {
  border-radius: 12px !important;
  border: 1.5px solid #e0e0e0 !important;
  background: #fafafa !important;
  min-height: 48px;
  padding-left: 12px !important;
  margin-bottom: 0 !important;
}
.sd-signup-field .inputs-with-dropdown:focus-within {
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1) !important;
  background: #fff !important;
}
.sd-signup-field .inputs-with-dropdown input {
  background: transparent !important;
  border: none !important;
  min-height: 46px !important;
  font-size: 15px;
  font-family: inherit;
  color: #1a1a1a;
  padding: 0 8px !important;
  outline: none !important;
}
.sd-signup-field .inputs-with-dropdown input:focus {
  outline: none !important;
  box-shadow: none !important;
}
.sd-signup-field .inputs-with-dropdown button {
  background: none !important;
  border: none !important;
  min-height: 46px !important;
  padding: 0 6px 0 0 !important;
  outline: none !important;
}
.sd-signup-field .inputs-with-dropdown img {
  width: 24px !important;
  height: 17px !important;
  border-radius: 3px !important;
  object-fit: cover;
}
.sd-signup-field .inputs-with-dropdown .dropdown-menu {
  border-radius: 12px !important;
  border: 1px solid #eee !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
  max-height: 220px;
  overflow-y: auto;
}
.sd-signup-field .inputs-with-dropdown .dropdown-menu a {
  font-size: 13px !important;
  padding: 8px 14px !important;
  color: #333 !important;
}
.sd-signup-field .inputs-with-dropdown .dropdown-menu a:hover {
  background: #f8f7f5 !important;
}

/* --- Buttons --- */
.sd-signup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.sd-signup-btn--next {
  background: #1a1a1a;
  color: #fff;
}
.sd-signup-btn--next:hover:not(:disabled) {
  background: #333;
}
.sd-signup-btn--next:disabled {
  background: #ccc;
  color: #888;
  cursor: not-allowed;
}
.sd-signup-btn--submit {
  background: #FF6B00;
  color: #fff;
  margin-top: 8px;
}
.sd-signup-btn--submit:hover:not(:disabled) {
  background: #e55f00;
  box-shadow: 0 4px 16px rgba(255,107,0,0.3);
}
.sd-signup-btn--submit:disabled {
  background: #ccc;
  color: #888;
  cursor: not-allowed;
}
.sd-signup-btn--loading {
  pointer-events: none;
  opacity: 0.85;
}
.sd-signup-btn__spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sdSignupSpin 0.7s linear infinite;
}
@keyframes sdSignupSpin {
  to { transform: rotate(360deg); }
}

/* Back button */
.sd-signup-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #FF6B00;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  transition: color 0.2s;
}
.sd-signup-back:hover {
  color: #e55f00;
}

/* --- Membership Cards --- */
.sd-signup-membership {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sd-signup-membership__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fafafa;
}
.sd-signup-membership__card:hover {
  border-color: #FF6B00;
  background: #fff;
}
.sd-signup-membership__card--active {
  border-color: #FF6B00;
  background: rgba(255,107,0,0.04);
}
.sd-signup-membership__radio {
  display: none;
}
.sd-signup-membership__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
  transition: all 0.2s;
  flex-shrink: 0;
}
.sd-signup-membership__card--active .sd-signup-membership__check {
  border-color: #FF6B00;
  background: #FF6B00;
  color: #fff;
}
.sd-signup-membership__name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

/* --- Service Cards --- */
.sd-signup-services {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sd-signup-service {
  display: block;
  padding: 14px 16px;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fafafa;
}
.sd-signup-service:hover {
  border-color: #FF6B00;
  background: #fff;
}
.sd-signup-service--active {
  border-color: #FF6B00;
  background: rgba(255,107,0,0.04);
}
.sd-signup-service__check {
  margin-right: 0 !important;
}
.sd-signup-service__check .el-checkbox__label {
  padding-left: 8px;
}
.sd-signup-service__name {
  font-weight: 600;
  font-size: 15px;
}
.sd-signup-service__desc {
  font-size: 13px;
  color: #777;
  margin: 6px 0 4px;
  line-height: 1.4;
}
.sd-signup-service__fee {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #FF6B00;
  background: rgba(255,107,0,0.08);
  padding: 3px 10px;
  border-radius: 6px;
}

/* --- Messages --- */
.sd-signup-msg {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sd-signup-msg--ok {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.sd-signup-msg--ok i {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.sd-signup-msg--err {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  flex-direction: column;
}

/* Terms */
.sd-signup-terms {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  margin-bottom: 14px;
}
.sd-signup-terms a {
  color: #FF6B00;
  text-decoration: underline;
}

/* Field hint */
.sd-signup-field__hint {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 12px;
  color: #999;
  margin: 6px 0 0;
  line-height: 1.4;
}
.sd-signup-field__hint i {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Section badge */
.sd-usignup-section {
  margin-bottom: 16px;
}
.sd-usignup-section__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #FF6B00;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255,107,0,0.07);
  border: 1px solid rgba(255,107,0,0.15);
}
.sd-usignup-section__badge i {
  font-size: 15px;
}

/* Password field toggle (show/hide eye icon) */
.sd-signup-field__toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s;
}
.sd-signup-field__toggle:hover {
  color: #FF6B00;
}

/* Password strength bar */
.sd-pw-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.sd-pw-str__bar {
  flex: 1;
  height: 5px;
  background: #e8e8e8;
  border-radius: 3px;
  overflow: hidden;
}
.sd-pw-str__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s, background 0.3s;
}
.sd-pw-str--weak .sd-pw-str__fill { background: #ef4444; }
.sd-pw-str--medium .sd-pw-str__fill { background: #f59e0b; }
.sd-pw-str--good .sd-pw-str__fill { background: #3b82f6; }
.sd-pw-str--strong .sd-pw-str__fill { background: #22c55e; }
.sd-pw-str__label {
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 48px;
  text-align: right;
}
.sd-pw-str__label.sd-pw-str--weak { color: #ef4444; }
.sd-pw-str__label.sd-pw-str--medium { color: #f59e0b; }
.sd-pw-str__label.sd-pw-str--good { color: #3b82f6; }
.sd-pw-str__label.sd-pw-str--strong { color: #22c55e; }

/* Password requirement checklist */
.sd-pw-rules {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 12px;
}
.sd-pw-rules li {
  font-size: 12px;
  color: #b0b0b0;
  padding-left: 18px;
  position: relative;
  line-height: 1.6;
  transition: color 0.2s;
}
.sd-pw-rules li::before {
  content: '\2715';
  position: absolute;
  left: 0;
  color: #d4d4d4;
  font-size: 11px;
  font-weight: 700;
  transition: color 0.2s;
}
.sd-pw-rules--ok {
  color: #22c55e !important;
}
.sd-pw-rules--ok::before {
  content: '\2713' !important;
  color: #22c55e !important;
}

/* Password hint variants */
.sd-signup-field__hint--err {
  color: #ef4444 !important;
}
.sd-signup-field__hint--ok {
  color: #22c55e !important;
}

/* File upload area */
.sd-usignup-upload {
  border: 2px dashed #ddd;
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: #fafafa;
}
.sd-usignup-upload:hover {
  border-color: #FF6B00;
  background: rgba(255,107,0,0.02);
}
.sd-usignup-upload__placeholder {
  pointer-events: none;
}
.sd-usignup-upload__selected {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.sd-usignup-upload__files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
}
.sd-usignup-upload__file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
}
.sd-usignup-upload__file-name {
  flex: 1;
  font-size: 13px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-usignup-upload__add-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px dashed #ccc;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: #FF6B00;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
}
.sd-usignup-upload__add-more:hover {
  border-color: #FF6B00;
  background: rgba(255,107,0,0.04);
}
.sd-usignup-upload__remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.sd-usignup-upload__remove:hover {
  background: #fecaca;
}

/* Login link */
.sd-signup-login {
  text-align: center;
  font-size: 14px;
  color: #888;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #f0f0f0;
}
.sd-signup-login a {
  color: #FF6B00;
  font-weight: 600;
  text-decoration: none;
}
.sd-signup-login a:hover {
  text-decoration: underline;
}

/* --- Benefits Section --- */
.sd-signup-benefits {
  background: #fff;
  padding: 80px 20px;
}
.sd-signup-benefits__inner {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}
.sd-signup-section-title {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}
.sd-signup-section-sub {
  font-size: 16px;
  color: #777;
  margin: 0 0 48px;
}
.sd-signup-benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  text-align: left;
}
.sd-signup-benefit {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  padding: 30px 28px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sd-signup-benefit:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}
.sd-signup-benefit__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,107,0,0.1);
  color: #FF6B00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}
.sd-signup-benefit__icon--blue {
  background: rgba(59,130,246,0.1);
  color: #3b82f6;
}
.sd-signup-benefit__icon--green {
  background: rgba(34,197,94,0.1);
  color: #22c55e;
}
.sd-signup-benefit__icon--purple {
  background: rgba(139,92,246,0.1);
  color: #8b5cf6;
}
.sd-signup-benefit__title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
}
.sd-signup-benefit__text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* --- How It Works Section --- */
.sd-signup-howto {
  background: #f9f9f9;
  padding: 80px 20px;
}
.sd-signup-howto__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.sd-signup-howto__steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: 48px;
}
.sd-signup-howto__step {
  flex: 1;
  max-width: 240px;
  text-align: center;
}
.sd-signup-howto__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FF6B00;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.sd-signup-howto__step h3 {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
}
.sd-signup-howto__step p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin: 0;
}
.sd-signup-howto__arrow {
  display: flex;
  align-items: center;
  padding-top: 18px;
  color: #ccc;
  font-size: 28px;
  margin: 0 8px;
}

/* --- CTA Section --- */
.sd-signup-cta {
  background: linear-gradient(135deg, #FF6B00 0%, #ff8533 100%);
  padding: 70px 20px;
  text-align: center;
}
.sd-signup-cta__inner {
  max-width: 640px;
  margin: 0 auto;
}
.sd-signup-cta h2 {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.3;
}
.sd-signup-cta p {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  margin: 0 0 30px;
}
.sd-signup-btn--cta {
  display: inline-flex;
  width: auto;
  padding: 0 36px;
  height: 52px;
  background: #fff;
  color: #FF6B00;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.sd-signup-btn--cta:hover {
  background: #f9f9f9;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  transform: translateY(-1px);
  color: #FF6B00;
  text-decoration: none;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .sd-signup-hero__inner {
    flex-direction: column;
    gap: 40px;
  }
  .sd-signup-hero__left {
    padding-top: 0;
    text-align: center;
  }
  .sd-signup-hero__sub {
    max-width: 100%;
  }
  .sd-signup-trust {
    align-items: center;
  }
  .sd-signup-hero__right {
    flex: none;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  .sd-signup-hero__title {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .sd-signup-hero {
    padding: 36px 16px 44px;
  }
  .sd-signup-hero__title {
    font-size: 26px;
  }
  .sd-signup-hero__sub {
    font-size: 15px;
  }
  .sd-signup-card {
    padding: 28px 22px 24px;
    border-radius: 16px;
  }
  .sd-signup-benefits__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sd-signup-benefit {
    padding: 22px 20px;
  }
  .sd-signup-howto__steps {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .sd-signup-howto__arrow {
    transform: rotate(90deg);
    margin: 0;
    padding-top: 0;
  }
  .sd-signup-howto__step {
    max-width: 100%;
  }
  .sd-signup-section-title {
    font-size: 24px;
  }
  .sd-signup-cta h2 {
    font-size: 22px;
  }
  .sd-signup-benefits,
  .sd-signup-howto,
  .sd-signup-cta {
    padding: 50px 16px;
  }
}

/* --- Dark Mode --- */
html[data-theme="dark"] .sd-signup-hero {
  background: linear-gradient(135deg, #1a1410 0%, #1e1612 40%, #181614 100%);
}
html[data-theme="dark"] .sd-signup-hero::before {
  background: radial-gradient(circle, rgba(255,107,0,0.04) 0%, transparent 70%);
}
html[data-theme="dark"] .sd-signup-badge {
  background: rgba(255,107,0,0.15);
}
html[data-theme="dark"] .sd-signup-hero__title {
  color: #f0f0f0;
}
html[data-theme="dark"] .sd-signup-hero__sub {
  color: #999;
}
html[data-theme="dark"] .sd-signup-trust__item {
  color: #ccc;
}
html[data-theme="dark"] .sd-signup-hero-img__photo {
  background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
  box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .sd-signup-card {
  background: #1e1e1e;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .sd-signup-card__title {
  color: #f0f0f0;
}
html[data-theme="dark"] .sd-signup-card__sub {
  color: #777;
}
html[data-theme="dark"] .sd-signup-step__num {
  background: #333;
  color: #888;
}
html[data-theme="dark"] .sd-signup-step--active .sd-signup-step__label {
  color: #f0f0f0;
}
html[data-theme="dark"] .sd-signup-step__label {
  color: #888;
}
html[data-theme="dark"] .sd-signup-step__line {
  background: #333;
}
html[data-theme="dark"] .sd-signup-field__label {
  color: #bbb;
}
html[data-theme="dark"] .sd-signup-field__input {
  background: #252525;
  border-color: #3a3a3a;
  color: #e0e0e0;
}
html[data-theme="dark"] .sd-signup-field__input:focus {
  background: #2a2a2a;
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.15);
}
html[data-theme="dark"] .sd-signup-field__input::placeholder {
  color: #666;
}
html[data-theme="dark"] .sd-signup-field__icon {
  color: #666;
}
html[data-theme="dark"] .sd-signup-field__wrap--addr .search-geocomplete input.form-control {
  background: #252525;
  border-color: #3a3a3a;
  color: #e0e0e0;
}
html[data-theme="dark"] .sd-signup-field__wrap--addr .search-geocomplete input.form-control:focus {
  background: #2a2a2a;
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.15);
}
html[data-theme="dark"] .sd-signup-field__wrap--addr .search-geocomplete-results {
  background: #252525;
  border-color: #3a3a3a;
}
html[data-theme="dark"] .sd-signup-field__wrap--addr .search-geocomplete-results a {
  color: #ccc;
}
html[data-theme="dark"] .sd-signup-field__wrap--addr .search-geocomplete-results a:hover {
  background: #2a2a2a;
}
html[data-theme="dark"] .sd-signup-field__wrap--addr .dc-result-title {
  color: #e0e0e0;
}
html[data-theme="dark"] .sd-signup-field .inputs-with-dropdown {
  background: #252525 !important;
  border-color: #3a3a3a !important;
}
html[data-theme="dark"] .sd-signup-field .inputs-with-dropdown:focus-within {
  background: #2a2a2a !important;
  border-color: #FF6B00 !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.15) !important;
}
html[data-theme="dark"] .sd-signup-field .inputs-with-dropdown input {
  color: #e0e0e0 !important;
}
html[data-theme="dark"] .sd-signup-field .inputs-with-dropdown input::placeholder {
  color: #666 !important;
}
html[data-theme="dark"] .sd-signup-field .inputs-with-dropdown .dropdown-menu {
  background: #1e1e1e !important;
  border-color: #333 !important;
}
html[data-theme="dark"] .sd-signup-field .inputs-with-dropdown .dropdown-menu a {
  color: #ccc !important;
}
html[data-theme="dark"] .sd-signup-field .inputs-with-dropdown .dropdown-menu a:hover {
  background: #252525 !important;
}
html[data-theme="dark"] .sd-signup-btn--next {
  background: #f0f0f0;
  color: #1a1a1a;
}
html[data-theme="dark"] .sd-signup-btn--next:hover:not(:disabled) {
  background: #e0e0e0;
}
html[data-theme="dark"] .sd-signup-btn--next:disabled {
  background: #333;
  color: #555;
}
html[data-theme="dark"] .sd-signup-btn--submit:disabled {
  background: #333;
  color: #555;
}
html[data-theme="dark"] .sd-signup-membership__card {
  background: #252525;
  border-color: #3a3a3a;
}
html[data-theme="dark"] .sd-signup-membership__card:hover {
  background: #2a2a2a;
}
html[data-theme="dark"] .sd-signup-membership__card--active {
  background: rgba(255,107,0,0.08);
  border-color: #FF6B00;
}
html[data-theme="dark"] .sd-signup-membership__check {
  border-color: #555;
}
html[data-theme="dark"] .sd-signup-membership__name {
  color: #ddd;
}
html[data-theme="dark"] .sd-signup-service {
  background: #252525;
  border-color: #3a3a3a;
}
html[data-theme="dark"] .sd-signup-service:hover {
  background: #2a2a2a;
}
html[data-theme="dark"] .sd-signup-service--active {
  background: rgba(255,107,0,0.08);
  border-color: #FF6B00;
}
html[data-theme="dark"] .sd-signup-service__name {
  color: #e0e0e0;
}
html[data-theme="dark"] .sd-signup-service__desc {
  color: #888;
}
html[data-theme="dark"] .sd-signup-msg--ok {
  background: rgba(22,163,74,0.1);
  color: #4ade80;
  border-color: rgba(22,163,74,0.2);
}
html[data-theme="dark"] .sd-signup-msg--err {
  background: rgba(220,38,38,0.1);
  color: #f87171;
  border-color: rgba(220,38,38,0.2);
}
html[data-theme="dark"] .sd-signup-terms {
  color: #777;
}
html[data-theme="dark"] .sd-signup-login {
  color: #777;
  border-color: #333;
}
html[data-theme="dark"] .sd-signup-benefits {
  background: #141414;
}
html[data-theme="dark"] .sd-signup-section-title {
  color: #f0f0f0;
}
html[data-theme="dark"] .sd-signup-section-sub {
  color: #888;
}
html[data-theme="dark"] .sd-signup-benefit {
  background: #1e1e1e;
  border-color: #2a2a2a;
}
html[data-theme="dark"] .sd-signup-benefit:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .sd-signup-benefit__title {
  color: #f0f0f0;
}
html[data-theme="dark"] .sd-signup-benefit__text {
  color: #999;
}
html[data-theme="dark"] .sd-signup-howto {
  background: #1a1a1a;
}
html[data-theme="dark"] .sd-signup-howto__step h3 {
  color: #f0f0f0;
}
html[data-theme="dark"] .sd-signup-howto__step p {
  color: #999;
}
html[data-theme="dark"] .sd-signup-howto__arrow {
  color: #444;
}
html[data-theme="dark"] .sd-signup-cta {
  background: linear-gradient(135deg, #c45200 0%, #FF6B00 100%);
}
html[data-theme="dark"] .sd-signup-btn--cta {
  background: #fff;
  color: #FF6B00;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .sd-signup-btn--cta:hover {
  background: #f0f0f0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}

/* --- Result Pages (thank-you, back-to-you, merchant-user) --- */
.sd-signup-result {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 60px 20px;
  background: linear-gradient(135deg, #FFF7F0 0%, #FFF0E6 40%, #FFFBF7 100%);
}
.sd-signup-result__card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  padding: 48px 40px;
  max-width: 480px;
  width: 100%;
  text-align: center;
}
.sd-signup-result__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 32px;
}
.sd-signup-result__icon--success {
  background: #f0fdf4;
  color: #22c55e;
}
.sd-signup-result__icon--pending {
  background: #FFF7ED;
  color: #FF6B00;
}
.sd-signup-result__icon--info {
  background: rgba(59,130,246,0.1);
  color: #3b82f6;
}
.sd-signup-result__badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #FF6B00;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.sd-signup-result__title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px;
  line-height: 1.3;
}
.sd-signup-result__text {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 8px;
}
.sd-signup-result__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #999;
  margin-top: 12px;
}
.sd-signup-result__hint i {
  font-size: 16px;
}
.sd-signup-result__link {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  color: #888;
  text-decoration: none;
}
.sd-signup-result__link:hover {
  color: #FF6B00;
  text-decoration: underline;
}

/* Result pages responsive */
@media (max-width: 767px) {
  .sd-signup-result {
    padding: 36px 16px;
    min-height: 50vh;
  }
  .sd-signup-result__card {
    padding: 36px 24px;
    border-radius: 16px;
  }
  .sd-signup-result__title {
    font-size: 20px;
  }
}

/* Result pages dark mode */
html[data-theme="dark"] .sd-signup-result {
  background: linear-gradient(135deg, #1a1410 0%, #1e1612 40%, #181614 100%);
}
html[data-theme="dark"] .sd-signup-result__card {
  background: #1e1e1e;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .sd-signup-result__icon--success {
  background: rgba(34,197,94,0.1);
}
html[data-theme="dark"] .sd-signup-result__icon--pending {
  background: rgba(255,107,0,0.1);
}
html[data-theme="dark"] .sd-signup-result__icon--info {
  background: rgba(59,130,246,0.08);
}
html[data-theme="dark"] .sd-signup-result__title {
  color: #f0f0f0;
}
html[data-theme="dark"] .sd-signup-result__text {
  color: #999;
}
html[data-theme="dark"] .sd-signup-result__hint {
  color: #666;
}
html[data-theme="dark"] .sd-signup-result__link {
  color: #777;
}

/* Dark mode: new user-signup components */
html[data-theme="dark"] .sd-signup-field__hint {
  color: #666;
}
html[data-theme="dark"] .sd-usignup-section__badge {
  background: rgba(255,107,0,0.1);
  border-color: rgba(255,107,0,0.2);
}
html[data-theme="dark"] .sd-signup-field__toggle {
  color: #777;
}
html[data-theme="dark"] .sd-signup-field__toggle:hover {
  color: #FF6B00;
}
html[data-theme="dark"] .sd-pw-str__bar {
  background: #333;
}
html[data-theme="dark"] .sd-pw-rules li {
  color: #666;
}
html[data-theme="dark"] .sd-pw-rules li::before {
  color: #555;
}
html[data-theme="dark"] .sd-usignup-upload {
  background: #1e1e1e;
  border-color: #3a3a3a;
}
html[data-theme="dark"] .sd-usignup-upload:hover {
  border-color: #FF6B00;
  background: rgba(255,107,0,0.04);
}
html[data-theme="dark"] .sd-usignup-upload__placeholder p {
  color: #888 !important;
}
html[data-theme="dark"] .sd-usignup-upload__selected span {
  color: #ccc !important;
}
html[data-theme="dark"] .sd-usignup-upload__file-row {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.2);
}
html[data-theme="dark"] .sd-usignup-upload__file-name {
  color: #ccc;
}
html[data-theme="dark"] .sd-usignup-upload__add-more {
  border-color: #444;
  color: #FF6B00;
}
html[data-theme="dark"] .sd-usignup-upload__add-more:hover {
  border-color: #FF6B00;
  background: rgba(255,107,0,0.08);
}
html[data-theme="dark"] .sd-usignup-upload__remove {
  background: rgba(220,38,38,0.15);
}

/* =============================================
   SD DRIVER SIGNUP PAGE — Premium Driver Registration
   ============================================= */
.sd-driver-page { min-height: 100vh; background: #f8f8f6; }
.sd-driver-hero { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sd-driver-hero__img { position: absolute; inset: 0; z-index: 0; }
.sd-driver-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-driver-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(0,0,0,0.70) 0%, rgba(255,107,0,0.45) 100%); }
.sd-driver-hero__content { position: relative; z-index: 2; text-align: center; padding: 48px 20px; max-width: 640px; animation: sdDriverFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.sd-driver-hero__badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.25); border-radius: 40px; padding: 6px 18px 6px 12px; font-size: 0.82rem; font-weight: 600; color: #fff; margin-bottom: 18px; letter-spacing: 0.3px; }
.sd-driver-hero__badge .zmdi { font-size: 18px; }
.sd-driver-hero__title { font-size: 2.2rem; font-weight: 800; color: #fff; margin: 0 0 12px; letter-spacing: -0.02em; line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.sd-driver-hero__sub { font-size: 1.05rem; color: rgba(255,255,255,0.9); margin: 0; font-weight: 400; line-height: 1.5; }
.sd-driver-benefits { background: #fff; border-bottom: 1px solid #f0ede8; position: relative; z-index: 3; }
.sd-driver-benefits__inner { display: flex; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; flex-wrap: wrap; }
.sd-driver-benefit { display: flex; align-items: center; gap: 12px; padding: 22px 28px; flex: 1; min-width: 220px; animation: sdDriverFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.sd-driver-benefit:nth-child(2) { animation-delay: 0.1s; }
.sd-driver-benefit:nth-child(3) { animation-delay: 0.2s; }
.sd-driver-benefit > .zmdi { font-size: 28px; color: #FF6B00; flex-shrink: 0; }
.sd-driver-benefit > div { display: flex; flex-direction: column; }
.sd-driver-benefit strong { font-size: 0.88rem; font-weight: 700; color: #1a1a1a; }
.sd-driver-benefit span:not(.zmdi) { font-size: 0.78rem; color: #888; margin-top: 1px; }
.sd-driver-form-section { display: flex; justify-content: center; padding: 48px 16px 60px; }
.sd-driver-form-card { background: #fff; border-radius: 20px; box-shadow: 0 4px 32px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04); padding: 40px 36px 36px; width: 100%; max-width: 560px; overflow: hidden; animation: sdDriverFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
.sd-driver-form-header { text-align: center; margin-bottom: 28px; }
.sd-driver-form-icon { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #FF6B00 0%, #FF8C3A 100%); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 4px 16px rgba(255,107,0,0.25); }
.sd-driver-form-icon .zmdi { font-size: 28px; color: #fff; }
.sd-driver-form-title { font-size: 1.5rem; font-weight: 800; color: #1a1a1a; margin: 0 0 6px; letter-spacing: -0.01em; }
.sd-driver-form-sub { font-size: 0.88rem; color: #888; margin: 0; }
.sd-driver-alert { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; font-size: 0.85rem; line-height: 1.5; margin-bottom: 20px; animation: sdDriverShake 0.4s ease; }
.sd-driver-alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.sd-driver-alert--error .zmdi { font-size: 20px; color: #dc2626; margin-top: 1px; flex-shrink: 0; }
.sd-driver-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sd-driver-row > .sd-driver-field { min-width: 0; }
.sd-driver-field { margin-bottom: 18px; }
.sd-driver-field > label { display: block; font-size: 0.82rem; font-weight: 600; color: #444; margin-bottom: 6px; letter-spacing: 0.2px; }
.sd-driver-req { color: #FF6B00; font-weight: 700; }
.sd-driver-input-wrap { display: flex; align-items: center; background: #f8f8f6; border: 1.5px solid #e8e5e0; border-radius: 12px; padding: 0 14px; height: 48px; min-width: 0; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.sd-driver-input-wrap--focus { border-color: #FF6B00; box-shadow: 0 0 0 3px rgba(255,107,0,0.1); background: #fff; }
.sd-driver-input-wrap--error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important; }
.sd-driver-input-icon { font-size: 20px; color: #aaa; margin-right: 10px; flex-shrink: 0; transition: color 0.2s; }
.sd-driver-input-wrap--focus .sd-driver-input-icon { color: #FF6B00; }
.sd-driver-input-wrap input { flex: 1; border: none; outline: none; background: transparent; font-size: 0.92rem; color: #1a1a1a; height: 100%; padding: 0; font-family: inherit; min-width: 0; text-overflow: ellipsis; }
.sd-driver-input-wrap input::placeholder { color: #bbb; }
.sd-driver-field-hint { display: flex; align-items: center; gap: 4px; font-size: 0.76rem; margin-top: 5px; font-weight: 500; }
.sd-driver-field-hint .zmdi { font-size: 15px; }
.sd-driver-field-hint--error { color: #ef4444; }
.sd-driver-field-hint--ok { color: #22c55e; }
.sd-driver-pw-toggle { background: none; border: none; cursor: pointer; padding: 4px; color: #aaa; display: flex; align-items: center; transition: color 0.15s; }
.sd-driver-pw-toggle:hover { color: #FF6B00; }
.sd-driver-pw-toggle .zmdi { font-size: 20px; }
.sd-driver-pw-str { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sd-driver-pw-str__bar { flex: 1; height: 5px; background: #e8e5e0; border-radius: 5px; overflow: hidden; }
.sd-driver-pw-str__fill { height: 100%; border-radius: 5px; transition: width 0.35s cubic-bezier(0.22,1,0.36,1), background 0.35s; }
.sd-driver-pw-str__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.sd-driver-pw--weak { color: #ef4444; }
.sd-driver-pw--weak .sd-driver-pw-str__fill { background: #ef4444; }
.sd-driver-pw--fair { color: #f59e0b; }
.sd-driver-pw--fair .sd-driver-pw-str__fill { background: #f59e0b; }
.sd-driver-pw--medium { color: #eab308; }
.sd-driver-pw--medium .sd-driver-pw-str__fill { background: #eab308; }
.sd-driver-pw--good { color: #84cc16; }
.sd-driver-pw--good .sd-driver-pw-str__fill { background: #84cc16; }
.sd-driver-pw--strong { color: #22c55e; }
.sd-driver-pw--strong .sd-driver-pw-str__fill { background: #22c55e; }
.sd-driver-pw-rules { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.sd-driver-pw-rules > span { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; color: #aaa; font-weight: 500; transition: color 0.2s; }
.sd-driver-pw-rules > span .zmdi { font-size: 15px; }
.sd-driver-pw-rule--ok { color: #22c55e !important; }
.sd-driver-divider { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; color: #1a1a1a; letter-spacing: 0.3px; text-transform: uppercase; margin: 28px 0 18px; padding-bottom: 10px; border-bottom: 1px solid #f0ede8; }
.sd-driver-divider .zmdi { font-size: 18px; color: #FF6B00; }
.sd-driver-consent { margin-bottom: 14px; }
.sd-driver-checkbox { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #e8e5e0; background: #fafaf8; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.sd-driver-checkbox:hover { border-color: #ddd; background: #f5f5f3; }
.sd-driver-checkbox--checked { border-color: #FF6B00; background: rgba(255,107,0,0.04); box-shadow: 0 0 0 3px rgba(255,107,0,0.08); }
.sd-driver-checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.sd-driver-checkbox__box { width: 22px; height: 22px; min-width: 22px; border-radius: 6px; border: 2px solid #d0ccc5; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, transform 0.15s; margin-top: 1px; }
.sd-driver-checkbox__box .zmdi { font-size: 16px; color: transparent; transition: color 0.15s; }
.sd-driver-checkbox--checked .sd-driver-checkbox__box { background: #FF6B00; border-color: #FF6B00; transform: scale(1.05); }
.sd-driver-checkbox--checked .sd-driver-checkbox__box .zmdi { color: #fff; }
.sd-driver-checkbox__text { font-size: 0.82rem; color: #555; line-height: 1.55; flex: 1; }
.sd-driver-link { color: #FF6B00 !important; text-decoration: underline; font-weight: 600; }
.sd-driver-link:hover { color: #E05E00 !important; }
.sd-driver-submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border: none; border-radius: 14px; background: linear-gradient(135deg, #FF6B00 0%, #FF8C3A 100%); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; letter-spacing: 0.3px; margin-top: 24px; transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s; box-shadow: 0 4px 16px rgba(255,107,0,0.3); position: relative; overflow: hidden; }
.sd-driver-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(255,107,0,0.4); }
.sd-driver-submit:active:not(:disabled) { transform: translateY(0); }
.sd-driver-submit:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.sd-driver-submit__content { display: flex; align-items: center; gap: 8px; }
.sd-driver-submit__content .zmdi { font-size: 20px; }
.sd-driver-submit__spinner { width: 22px; height: 22px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: sdDriverSpin 0.7s linear infinite; }
.sd-driver-footer-note { display: flex; align-items: flex-start; gap: 6px; font-size: 0.76rem; color: #999; margin-top: 18px; line-height: 1.5; text-align: left; }
.sd-driver-footer-note .zmdi { font-size: 16px; margin-top: 1px; flex-shrink: 0; color: #bbb; }
@keyframes sdDriverFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sdDriverSpin { to { transform: rotate(360deg); } }
@keyframes sdDriverShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.sd-driver-form-card .form-label-group { margin-bottom: 0; }
.sd-driver-form-card .vue-tel-input { border: 1.5px solid #e8e5e0 !important; border-radius: 12px !important; height: 48px; background: #f8f8f6; transition: border-color 0.2s, box-shadow 0.2s; }
.sd-driver-form-card .vue-tel-input:focus-within { border-color: #FF6B00 !important; box-shadow: 0 0 0 3px rgba(255,107,0,0.1) !important; background: #fff; }
.sd-driver-form-card .vue-tel-input input { font-size: 0.92rem !important; }
@media (max-width: 640px) {
  .sd-driver-hero { min-height: 260px; }
  .sd-driver-hero__title { font-size: 1.6rem; }
  .sd-driver-hero__sub { font-size: 0.92rem; }
  .sd-driver-hero__content { padding: 32px 16px; }
  .sd-driver-benefits__inner { flex-direction: column; gap: 0; }
  .sd-driver-benefit { padding: 14px 20px; border-bottom: 1px solid #f0ede8; }
  .sd-driver-benefit:last-child { border-bottom: none; }
  .sd-driver-form-section { padding: 24px 12px 40px; }
  .sd-driver-form-card { padding: 28px 20px 24px; border-radius: 16px; }
  .sd-driver-row { grid-template-columns: 1fr; gap: 0; }
  .sd-driver-form-title { font-size: 1.25rem; }
  .sd-driver-pw-rules { gap: 4px 10px; }
}
@media (min-width: 1024px) {
  .sd-driver-hero { min-height: 400px; }
  .sd-driver-hero__title { font-size: 2.8rem; }
  .sd-driver-form-card { padding: 48px 44px 40px; }
}

/* --- DARK MODE: Driver Signup --- */
html[data-theme="dark"] .sd-driver-page { background: #121212; }
html[data-theme="dark"] .sd-driver-hero__overlay { background: linear-gradient(135deg, rgba(0,0,0,0.80) 0%, rgba(255,107,0,0.35) 100%); }
html[data-theme="dark"] .sd-driver-benefits { background: #1a1a1a; border-color: #2a2a2a; }
html[data-theme="dark"] .sd-driver-benefit strong { color: #f0f0f0; }
html[data-theme="dark"] .sd-driver-benefit span:not(.zmdi) { color: #888; }
html[data-theme="dark"] .sd-driver-benefit { border-color: #2a2a2a; }
html[data-theme="dark"] .sd-driver-form-card { background: #1e1e1e; box-shadow: 0 4px 32px rgba(0,0,0,0.3); }
html[data-theme="dark"] .sd-driver-form-title { color: #f0f0f0; }
html[data-theme="dark"] .sd-driver-form-sub { color: #888; }
html[data-theme="dark"] .sd-driver-field > label { color: #ccc; }
html[data-theme="dark"] .sd-driver-input-wrap { background: #2a2a2a; border-color: #3a3a3a; }
html[data-theme="dark"] .sd-driver-input-wrap--focus { background: #1e1e1e; border-color: #FF6B00; }
html[data-theme="dark"] .sd-driver-input-wrap input { color: #e0e0e0; }
html[data-theme="dark"] .sd-driver-input-wrap input::placeholder { color: #666; }
html[data-theme="dark"] .sd-driver-input-icon { color: #666; }
html[data-theme="dark"] .sd-driver-input-wrap--focus .sd-driver-input-icon { color: #FF8C3A; }
html[data-theme="dark"] .sd-driver-pw-toggle { color: #666; }
html[data-theme="dark"] .sd-driver-pw-str__bar { background: #333; }
html[data-theme="dark"] .sd-driver-pw-rules > span { color: #666; }
html[data-theme="dark"] .sd-driver-divider { color: #e0e0e0; border-color: #2a2a2a; }
html[data-theme="dark"] .sd-driver-checkbox { background: #2a2a2a; border-color: #3a3a3a; }
html[data-theme="dark"] .sd-driver-checkbox:hover { background: #333; border-color: #444; }
html[data-theme="dark"] .sd-driver-checkbox--checked { background: rgba(255,107,0,0.08); border-color: #FF6B00; }
html[data-theme="dark"] .sd-driver-checkbox__box { border-color: #555; }
html[data-theme="dark"] .sd-driver-checkbox__text { color: #ccc; }
html[data-theme="dark"] .sd-driver-alert--error { background: rgba(185,28,28,0.12); border-color: rgba(239,68,68,0.25); color: #fca5a5; }
html[data-theme="dark"] .sd-driver-footer-note { color: #666; }
html[data-theme="dark"] .sd-driver-footer-note .zmdi { color: #555; }
html[data-theme="dark"] .sd-driver-form-card .vue-tel-input { background: #2a2a2a !important; border-color: #3a3a3a !important; }
html[data-theme="dark"] .sd-driver-form-card .vue-tel-input:focus-within { background: #1e1e1e !important; border-color: #FF6B00 !important; }

/* =============================================
   SD 404 PAGE — Creative Food-Themed Not Found
   ============================================= */
.sd-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 40px 20px 60px;
  text-align: center;
  animation: sd404FadeIn 0.6s ease-out both;
}
.sd-404__inner {
  max-width: 520px;
  width: 100%;
}

/* --- Plate illustration --- */
.sd-404__plate {
  position: relative;
  margin: 0 auto 32px;
  width: 220px;
  height: 220px;
}
.sd-404__plate-circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fafaf8 0%, #f0ede8 100%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), inset 0 2px 8px rgba(255,255,255,0.9), inset 0 -4px 12px rgba(0,0,0,0.04);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sd404PlateEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sd-404__plate-rim {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.06);
}
.sd-404__plate-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

/* --- Fork & Knife --- */
.sd-404__fork {
  color: #c8c0b4;
  width: 20px;
  height: 66px;
  transform: rotate(-18deg) translateY(-2px);
  animation: sd404UtensilLeft 0.7s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sd-404__knife {
  color: #c8c0b4;
  width: 15px;
  height: 66px;
  transform: rotate(18deg) translateY(-2px);
  animation: sd404UtensilRight 0.7s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* --- 404 number on plate --- */
.sd-404__num {
  font-family: 'Outfit', sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: #FF6B00;
  letter-spacing: -1px;
  line-height: 1;
  animation: sd404NumPulse 3s ease-in-out infinite;
}

/* --- Crumbs scattered around plate --- */
.sd-404__crumbs { position: absolute; inset: 0; pointer-events: none; }
.sd-404__crumb {
  position: absolute;
  border-radius: 50%;
  background: #e8e0d4;
  opacity: 0;
  animation: sd404CrumbFloat 4s ease-in-out infinite;
}
.sd-404__crumb--1 { width: 6px; height: 6px; top: 10px; left: 25%; animation-delay: 0s; }
.sd-404__crumb--2 { width: 4px; height: 4px; top: 30px; right: 15%; animation-delay: 0.8s; }
.sd-404__crumb--3 { width: 5px; height: 5px; bottom: 15px; left: 18%; animation-delay: 1.4s; }
.sd-404__crumb--4 { width: 3px; height: 3px; bottom: 30px; right: 22%; animation-delay: 0.4s; }
.sd-404__crumb--5 { width: 5px; height: 5px; top: 50%; right: 8%; animation-delay: 2s; }

/* --- Title & subtitle --- */
.sd-404__title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px;
  line-height: 1.3;
}
.sd-404__subtitle {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  color: #777;
  line-height: 1.65;
  margin: 0 0 32px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Action buttons --- */
.sd-404__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sd-404__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  height: 48px;
  border-radius: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.sd-404__btn .zmdi { font-size: 18px; }
.sd-404__btn--primary {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8C3A 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,107,0,0.25);
}
.sd-404__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255,107,0,0.35);
  color: #fff;
  text-decoration: none;
}
.sd-404__btn--primary:active { transform: translateY(0); }
.sd-404__btn--secondary {
  background: #f5f3f0;
  color: #333;
  border: 1.5px solid #e8e5e0;
}
.sd-404__btn--secondary:hover {
  background: #eeeae5;
  border-color: #d5d0c8;
  color: #1a1a1a;
  text-decoration: none;
  transform: translateY(-1px);
}
.sd-404__btn--secondary:active { transform: translateY(0); }

/* --- Account link --- */
.sd-404__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: #FF6B00;
  margin-bottom: 28px;
  text-decoration: none;
  transition: color 0.2s;
}
.sd-404__link:hover { color: #E05E00; text-decoration: underline; }
.sd-404__link .zmdi { font-size: 16px; }

/* --- Hint bar --- */
.sd-404__hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #faf8f5;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: #888;
  line-height: 1.55;
  text-align: left;
  max-width: 440px;
  margin: 0 auto;
}
.sd-404__hint .zmdi {
  font-size: 16px;
  color: #bbb;
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- Animations --- */
@keyframes sd404FadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sd404PlateEntrance {
  from { opacity: 0; transform: scale(0.7) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes sd404UtensilLeft {
  from { opacity: 0; transform: rotate(-40deg) translateY(-20px); }
  to { opacity: 1; transform: rotate(-18deg) translateY(-2px); }
}
@keyframes sd404UtensilRight {
  from { opacity: 0; transform: rotate(40deg) translateY(-20px); }
  to { opacity: 1; transform: rotate(18deg) translateY(-2px); }
}
@keyframes sd404NumPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes sd404CrumbFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  20% { opacity: 0.7; transform: translateY(-6px) scale(1); }
  80% { opacity: 0.5; transform: translateY(-2px) scale(0.9); }
  100% { opacity: 0; transform: translateY(4px) scale(0.5); }
}

/* --- Responsive --- */
@media (max-width: 480px) {
  .sd-404 { padding: 24px 16px 40px; min-height: calc(100vh - 160px); }
  .sd-404__plate { width: 180px; height: 180px; }
  .sd-404__plate-circle { width: 180px; height: 180px; }
  .sd-404__num { font-size: 2.2rem; }
  .sd-404__fork { width: 16px; height: 54px; }
  .sd-404__knife { width: 12px; height: 54px; }
  .sd-404__title { font-size: 1.35rem; }
  .sd-404__subtitle { font-size: 0.88rem; }
  .sd-404__actions { flex-direction: column; gap: 10px; }
  .sd-404__btn { width: 100%; justify-content: center; }
}
@media (min-width: 768px) {
  .sd-404__plate { width: 250px; height: 250px; }
  .sd-404__plate-circle { width: 250px; height: 250px; }
  .sd-404__num { font-size: 3.2rem; }
  .sd-404__fork { width: 24px; height: 76px; }
  .sd-404__knife { width: 18px; height: 76px; }
  .sd-404__title { font-size: 1.9rem; }
  .sd-404__btn { height: 52px; padding: 0 28px; font-size: 0.95rem; }
}

/* --- DARK MODE: 404 Page --- */
html[data-theme="dark"] .sd-404__plate-circle {
  background: linear-gradient(145deg, #2a2a2a 0%, #1e1e1e 100%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 2px 8px rgba(255,255,255,0.04), inset 0 -4px 12px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .sd-404__plate-rim {
  border-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .sd-404__fork,
html[data-theme="dark"] .sd-404__knife {
  color: #555;
}
html[data-theme="dark"] .sd-404__num {
  color: #FF8C3A;
}
html[data-theme="dark"] .sd-404__crumb {
  background: #444;
}
html[data-theme="dark"] .sd-404__title {
  color: #f0f0f0;
}
html[data-theme="dark"] .sd-404__subtitle {
  color: #888;
}
html[data-theme="dark"] .sd-404__btn--secondary {
  background: #1e1e1e;
  color: #e0e0e0;
  border-color: #333;
}
html[data-theme="dark"] .sd-404__btn--secondary:hover {
  background: #252525;
  border-color: #444;
  color: #f0f0f0;
}
html[data-theme="dark"] .sd-404__link {
  color: #FF8C3A;
}
html[data-theme="dark"] .sd-404__link:hover {
  color: #FFa050;
}
html[data-theme="dark"] .sd-404__hint {
  background: #1a1a1a;
  border-color: #2a2a2a;
  color: #777;
}
html[data-theme="dark"] .sd-404__hint .zmdi {
  color: #555;
}

/* =============================================
   30. SD TOAST — Modern notification system
   ============================================= */
.sd-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: 420px;
  width: calc(100% - 32px);
}
@media (max-width: 575px) {
  .sd-toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
    max-width: none;
  }
}
.sd-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateX(40px) scale(0.96);
  transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@media (max-width: 575px) {
  .sd-toast {
    transform: translateY(20px) scale(0.96);
    border-radius: 12px;
    padding: 12px 14px;
    gap: 10px;
  }
}
.sd-toast--visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}
@media (max-width: 575px) {
  .sd-toast--visible {
    transform: translateY(0) scale(1);
  }
}
.sd-toast--exit {
  opacity: 0;
  transform: translateX(40px) scale(0.92);
  transition: opacity 0.3s cubic-bezier(0.4,0,1,1), transform 0.3s cubic-bezier(0.4,0,1,1);
}
@media (max-width: 575px) {
  .sd-toast--exit {
    transform: translateY(20px) scale(0.92);
  }
}
.sd-toast__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-toast__icon svg {
  width: 20px;
  height: 20px;
}
.sd-toast--success .sd-toast__icon {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  color: #059669;
}
.sd-toast--warning .sd-toast__icon {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  color: #d97706;
}
.sd-toast--error .sd-toast__icon {
  background: linear-gradient(135deg, #fef2f2, #fecaca);
  color: #dc2626;
}
.sd-toast--info .sd-toast__icon {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  color: #FF6B00;
}
.sd-toast__body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.sd-toast__msg {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #1f2937;
  word-break: break-word;
}
.sd-toast__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: #9ca3af;
  transition: background 0.2s, color 0.2s;
  margin-top: -2px;
}
.sd-toast__close:hover {
  background: rgba(0,0,0,0.06);
  color: #6b7280;
}
.sd-toast__close svg {
  width: 16px;
  height: 16px;
}
.sd-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0,0,0,0.04);
  overflow: hidden;
}
.sd-toast__progress-bar {
  height: 100%;
  width: 100%;
  border-radius: 0 3px 3px 0;
}
.sd-toast--success .sd-toast__progress-bar {
  background: linear-gradient(90deg, #059669, #10b981);
}
.sd-toast--warning .sd-toast__progress-bar {
  background: linear-gradient(90deg, #d97706, #f59e0b);
}
.sd-toast--error .sd-toast__progress-bar {
  background: linear-gradient(90deg, #dc2626, #ef4444);
}
.sd-toast--info .sd-toast__progress-bar {
  background: linear-gradient(90deg, #FF6B00, #ff8c3a);
}

/* --- SD Toast Dark Mode --- */
html[data-theme="dark"] .sd-toast {
  background: #1e1e1e;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .sd-toast__msg {
  color: #e5e7eb;
}
html[data-theme="dark"] .sd-toast__close {
  color: #6b7280;
}
html[data-theme="dark"] .sd-toast__close:hover {
  background: rgba(255,255,255,0.08);
  color: #9ca3af;
}
html[data-theme="dark"] .sd-toast__progress {
  background: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .sd-toast--success .sd-toast__icon {
  background: linear-gradient(135deg, rgba(5,150,105,0.15), rgba(16,185,129,0.1));
  color: #34d399;
}
html[data-theme="dark"] .sd-toast--warning .sd-toast__icon {
  background: linear-gradient(135deg, rgba(217,119,6,0.15), rgba(245,158,11,0.1));
  color: #fbbf24;
}
html[data-theme="dark"] .sd-toast--error .sd-toast__icon {
  background: linear-gradient(135deg, rgba(220,38,38,0.15), rgba(239,68,68,0.1));
  color: #f87171;
}
html[data-theme="dark"] .sd-toast--info .sd-toast__icon {
  background: linear-gradient(135deg, rgba(255,107,0,0.15), rgba(255,140,58,0.1));
  color: #ff8c3a;
}

/* =============================================
   SD CONFIRM — Custom confirmation dialog
   ============================================= */
.sd-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
  padding: 20px;
}
.sd-confirm-backdrop--visible {
  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sd-confirm {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #eceae5;
  padding: 32px 28px 24px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  box-shadow: 0 25px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);
  transform: scale(0.85) translateY(20px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.sd-confirm--visible {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.sd-confirm--exit {
  transform: scale(0.9) translateY(10px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.sd-confirm__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.sd-confirm__icon svg {
  width: 24px;
  height: 24px;
}
.sd-confirm--warning .sd-confirm__icon {
  background: #FFF5EB;
  color: #FF6B00;
}
.sd-confirm--danger .sd-confirm__icon {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  color: #dc2626;
}
.sd-confirm--info .sd-confirm__icon {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #2563eb;
}
.sd-confirm__title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
  line-height: 1.3;
}
.sd-confirm__message {
  font-size: 0.88rem;
  color: #777;
  line-height: 1.55;
  margin-bottom: 24px;
  padding: 0 4px;
}
.sd-confirm__actions {
  display: flex;
  gap: 10px;
}
.sd-confirm__btn {
  flex: 1;
  padding: 12px 20px;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}
.sd-confirm__btn--cancel {
  background: #f5f4f1;
  color: #555;
  border: 1px solid #eceae5;
}
.sd-confirm__btn--cancel:hover {
  background: #eceae5;
  color: #333;
}
.sd-confirm__btn--confirm {
  color: #fff;
}
.sd-confirm__btn--warning {
  background: #FF6B00;
}
.sd-confirm__btn--warning:hover {
  background: #E05E00;
  box-shadow: 0 4px 14px rgba(255,107,0,0.3);
}
.sd-confirm__btn--danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.sd-confirm__btn--danger:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 4px 14px rgba(239,68,68,0.35);
}
.sd-confirm__btn--info {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.sd-confirm__btn--info:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 14px rgba(59,130,246,0.35);
}
.sd-confirm__btn:active {
  transform: scale(0.97);
}

/* SD Confirm — Dark mode */
html[data-theme="dark"] .sd-confirm-backdrop--visible {
  background: rgba(0,0,0,0.55);
}
html[data-theme="dark"] .sd-confirm {
  background: #1a1a1a;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 25px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
}
html[data-theme="dark"] .sd-confirm__title {
  color: #eee;
}
html[data-theme="dark"] .sd-confirm__message {
  color: #999;
}
html[data-theme="dark"] .sd-confirm__btn--cancel {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
  color: #ccc;
}
html[data-theme="dark"] .sd-confirm__btn--cancel:hover {
  background: rgba(255,255,255,0.12);
  color: #eee;
}
html[data-theme="dark"] .sd-confirm--warning .sd-confirm__icon {
  background: rgba(255,107,0,0.12);
  color: #FF8C3A;
}
html[data-theme="dark"] .sd-confirm--danger .sd-confirm__icon {
  background: linear-gradient(135deg, rgba(220,38,38,0.15), rgba(239,68,68,0.1));
  color: #f87171;
}
html[data-theme="dark"] .sd-confirm--info .sd-confirm__icon {
  background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(37,99,235,0.1));
  color: #60a5fa;
}

/* SD Confirm — Responsive */
@media (max-width: 480px) {
  .sd-confirm {
    padding: 24px 20px 20px;
    border-radius: 14px;
    max-width: calc(100vw - 40px);
  }
  .sd-confirm__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-bottom: 12px;
  }
  .sd-confirm__icon svg {
    width: 22px;
    height: 22px;
  }
  .sd-confirm__title {
    font-size: 1rem;
  }
  .sd-confirm__message {
    font-size: 0.85rem;
    margin-bottom: 20px;
  }
  .sd-confirm__btn {
    padding: 11px 16px;
    font-size: 0.84rem;
  }
}

/* ============================================================
   SECTION: SD FEEDBACK WIDGET (sd-fb-*)
   ============================================================ */

/* Floating Trigger — Mobile: compact vertical tab on right edge */
.sd-fb-trigger {
  position: fixed;
  z-index: 1039;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8C3A 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 10px rgba(255,107,0,0.3);
  /* Mobile: vertical tab on right edge — offset from edge to avoid iOS Safari swipe gesture zone */
  right: -2px;
  top: 45%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 8px 5px;
  border-radius: 8px 0 0 8px;
  flex-direction: row;
  gap: 5px;
  font-size: 0.7rem;
  transform: translateY(-50%) translateX(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s, opacity 0.25s;
}
.sd-fb-trigger:active {
  transform: translateY(-50%) translateX(-10px);
  box-shadow: 0 4px 18px rgba(255,107,0,0.5);
}
.sd-fb-trigger--open { opacity: 0; pointer-events: none; }
.sd-fb-trigger__icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.sd-fb-trigger__icon svg { width: 12px; height: 12px; }
.sd-fb-trigger__text { white-space: nowrap; font-size: 0.7rem; line-height: 1; }

/* Desktop: horizontal pill at bottom-right */
@media (min-width: 992px) {
  .sd-fb-trigger {
    writing-mode: horizontal-tb;
    text-orientation: initial;
    flex-direction: row;
    right: 24px;
    bottom: 24px;
    top: auto;
    transform: none;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 0.82rem;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(255,107,0,0.35);
  }
  .sd-fb-trigger:hover,
  .sd-fb-trigger:active {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255,107,0,0.45);
  }
  .sd-fb-trigger__icon svg { width: 16px; height: 16px; }
  .sd-fb-trigger__text { font-size: 0.82rem; }
}

/* Overlay */
.sd-fb-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 768px) {
  .sd-fb-overlay { align-items: center; }
}

/* Fade transition */
.sd-fb-fade-enter-active, .sd-fb-fade-leave-active { transition: opacity 0.25s ease; }
.sd-fb-fade-enter-from, .sd-fb-fade-leave-to { opacity: 0; }

/* Popup */
.sd-fb-popup {
  background: #fff;
  width: 100%;
  max-height: 92vh;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 40px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sdFbSlideUp 0.3s ease;
}
@keyframes sdFbSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (min-width: 768px) {
  .sd-fb-popup {
    width: 480px;
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    animation: sdFbScaleIn 0.25s ease;
  }
  @keyframes sdFbScaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}

/* Header */
.sd-fb-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  min-height: 56px;
  gap: 8px;
}
.sd-fb-header__title {
  flex: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1a1a;
}
.sd-fb-back, .sd-fb-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.sd-fb-back:hover, .sd-fb-close:hover { background: #eee; color: #333; }
.sd-fb-popup--thanks .sd-fb-header { border-bottom: none; }

/* Body */
.sd-fb-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Hint Note */
.sd-fb-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #F0F7FF;
  border: 1px solid #DBEAFE;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.78rem;
  color: #3B82F6;
  line-height: 1.5;
}
.sd-fb-hint svg { flex-shrink: 0; margin-top: 1px; }

/* Type Cards (Step 1) */
.sd-fb-type-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1.5px solid #f0ede8;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
  margin-bottom: 12px;
  background: #fafaf8;
}
.sd-fb-type-card:hover {
  border-color: #FF6B00;
  background: rgba(255,107,0,0.03);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,107,0,0.08);
}
.sd-fb-type-card:active { transform: scale(0.98); }
.sd-fb-type-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sd-fb-type-card__icon--problem { background: #FEF2F2; color: #EF4444; }
.sd-fb-type-card__icon--suggestion { background: #FFF7ED; color: #F59E0B; }
.sd-fb-type-card__icon--praise { background: #F0FDF4; color: #22C55E; }
.sd-fb-type-card__content { flex: 1; min-width: 0; }
.sd-fb-type-card__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: #1a1a1a;
  margin-bottom: 2px;
}
.sd-fb-type-card__desc { font-size: 0.78rem; color: #888; line-height: 1.4; }
.sd-fb-type-card__arrow { color: #ccc; flex-shrink: 0; transition: color 0.2s; }
.sd-fb-type-card:hover .sd-fb-type-card__arrow { color: #FF6B00; }

/* Form Fields (Step 2) */
.sd-fb-field { margin-bottom: 18px; }
.sd-fb-field__label {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.sd-fb-field__optional { font-weight: 400; text-transform: none; color: #aaa; font-size: 0.75rem; }
.sd-fb-field__select {
  width: 100%;
  height: 46px;
  border: 1.5px solid #e8e5e0;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 0.9rem;
  color: #333;
  background: #fafaf8;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.sd-fb-field__select:focus { border-color: #FF6B00; box-shadow: 0 0 0 3px rgba(255,107,0,0.1); background-color: #fff; }
.sd-fb-field__textarea {
  width: 100%;
  border: 1.5px solid #e8e5e0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.9rem;
  color: #333;
  background: #fafaf8;
  outline: none;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  line-height: 1.5;
}
.sd-fb-field__textarea:focus { border-color: #FF6B00; box-shadow: 0 0 0 3px rgba(255,107,0,0.1); background: #fff; }
.sd-fb-field__counter { text-align: right; font-size: 0.72rem; color: #bbb; margin-top: 4px; }

/* Star Rating */
.sd-fb-stars { display: flex; gap: 6px; }
.sd-fb-star {
  background: none;
  border: none;
  cursor: pointer;
  color: #ddd;
  padding: 2px;
  transition: color 0.15s, transform 0.15s;
}
.sd-fb-star:hover { transform: scale(1.15); }
.sd-fb-star--active { color: #F59E0B; }

/* Screenshot Upload */
.sd-fb-upload {
  border: 2px dashed #e0dcd6;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  color: #aaa;
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.sd-fb-upload:hover { border-color: #FF6B00; background: rgba(255,107,0,0.02); color: #FF6B00; }
.sd-fb-upload--drag { border-color: #FF6B00; background: rgba(255,107,0,0.05); color: #FF6B00; }
.sd-fb-upload--disabled { opacity: 0.5; cursor: not-allowed; }
.sd-fb-upload__full { font-size: 0.78rem; color: #aaa; }

/* Image Previews */
.sd-fb-previews { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.sd-fb-preview {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid #eee;
}
.sd-fb-preview img { width: 100%; height: 100%; object-fit: cover; }
.sd-fb-preview__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.sd-fb-preview__remove:hover { background: rgba(220,38,38,0.9); }
.sd-fb-preview__loader {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-fb-preview__loader::after {
  content: '';
  width: 20px;
  height: 20px;
  border: 2.5px solid #ddd;
  border-top-color: #FF6B00;
  border-radius: 50%;
  animation: sdFbSpin 0.6s linear infinite;
}
@keyframes sdFbSpin { to { transform: rotate(360deg); } }

/* Error */
.sd-fb-error {
  background: #FEF2F2;
  color: #DC2626;
  font-size: 0.82rem;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* Submit Button */
.sd-fb-submit {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8C3A 100%);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 4px 16px rgba(255,107,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-fb-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(255,107,0,0.4); }
.sd-fb-submit:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.sd-fb-submit--loading { pointer-events: none; }
.sd-fb-submit__spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sdFbSpin 0.7s linear infinite;
}

/* Thank You (Step 3) */
.sd-fb-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px 48px;
  min-height: 240px;
}
.sd-fb-thanks__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22C55E;
  margin-bottom: 20px;
  animation: sdFbPop 0.4s ease;
}
@keyframes sdFbPop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.sd-fb-thanks__title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.sd-fb-thanks__msg { font-size: 0.88rem; color: #888; line-height: 1.5; max-width: 300px; }

/* Login Prompt (for guests) */
.sd-fb-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 24px 40px;
  min-height: 260px;
}
.sd-fb-login__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF6B00;
  margin-bottom: 20px;
  animation: sdFbPop 0.4s ease;
}
.sd-fb-login__title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.sd-fb-login__desc {
  font-size: 0.85rem;
  color: #888;
  line-height: 1.55;
  max-width: 300px;
  margin-bottom: 28px;
}
.sd-fb-login__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8C3A 100%);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(255,107,0,0.3);
  transition: transform 0.15s, box-shadow 0.2s;
}
.sd-fb-login__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255,107,0,0.4);
  color: #fff;
  text-decoration: none;
}
.sd-fb-login__btn:active { transform: scale(0.97); }
.sd-fb-login__link {
  display: block;
  margin-top: 16px;
  font-size: 0.82rem;
  color: #999;
  text-decoration: none;
  transition: color 0.15s;
}
.sd-fb-login__link strong {
  color: #FF6B00;
  font-weight: 700;
}
.sd-fb-login__link:hover { color: #666; text-decoration: none; }
.sd-fb-login__link:hover strong { color: #e05e00; }

/* END SD FEEDBACK WIDGET */

/* =============================================
   SECTION: SD BACK TO TOP (sd-btt)
   Modern floating button with scroll progress ring
   ============================================= */
.sd-btt {
  position: fixed;
  bottom: 90px;
  left: 16px;
  right: auto;
  z-index: 1038;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px) scale(0.8);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease,
              background 0.25s ease,
              bottom 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.sd-btt--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sd-btt:hover {
  background: rgba(255, 107, 0, 0.08);
  box-shadow: 0 4px 24px rgba(255, 107, 0, 0.18), 0 0 0 1px rgba(255, 107, 0, 0.12);
}
.sd-btt:active {
  transform: translateY(0) scale(0.92);
  transition-duration: 0.1s;
}

/* Arrow icon */
.sd-btt__icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
  transition: color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 0;
}
.sd-btt:hover .sd-btt__icon {
  color: #FF6B00;
  transform: translateY(-2px);
}

/* Circular progress ring */
.sd-btt__progress {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.sd-btt__progress svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.sd-btt__progress circle {
  fill: none;
  stroke: #FF6B00;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.15s ease;
  opacity: 0.65;
}
.sd-btt:hover .sd-btt__progress circle {
  opacity: 1;
  stroke-width: 3;
}

/* Desktop — move to right side, above feedback trigger */
@media (min-width: 992px) {
  .sd-btt {
    left: auto;
    right: 28px;
    bottom: 80px;
    width: 48px;
    height: 48px;
  }
}
@media (min-width: 1200px) {
  .sd-btt {
    width: 52px;
    height: 52px;
  }
}

/* Avoid overlap with cookie banner — shift up when cookie is visible */
body:has(.sd-ck-banner) .sd-btt {
  bottom: 200px;
}
@media (min-width: 992px) {
  body:has(.sd-ck-banner) .sd-btt {
    bottom: 240px;
  }
}

/* END SD BACK TO TOP */

/* =============================================
   SD EMPTY STATE — No Restaurants Found (sd-nr)
   Food-themed creative illustration
   ============================================= */
.sd-nr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px 48px;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, rgba(255,240,225,0.5) 0%, transparent 70%);
}

/* --- Floating food emoji --- */
.sd-nr__floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.sd-nr__float {
  position: absolute;
  font-size: 28px;
  opacity: 0;
  filter: grayscale(0.15);
  animation: sdNrFloatEmoji 6s ease-in-out infinite;
}
.sd-nr__float:nth-child(1) { top: 8%;  left: 8%;  animation-delay: 0s;    font-size: 26px; }
.sd-nr__float:nth-child(2) { top: 12%; right: 10%; animation-delay: 1s;    font-size: 22px; }
.sd-nr__float:nth-child(3) { top: 45%; left: 5%;  animation-delay: 2s;    font-size: 30px; }
.sd-nr__float:nth-child(4) { top: 38%; right: 6%; animation-delay: 3s;    font-size: 24px; }
.sd-nr__float:nth-child(5) { bottom: 22%; left: 12%; animation-delay: 4s;  font-size: 20px; }
.sd-nr__float:nth-child(6) { bottom: 15%; right: 14%; animation-delay: 5s; font-size: 28px; }
.sd-nr__float:nth-child(7) { top: 25%; left: 18%;  animation-delay: 1.5s;  font-size: 18px; }
.sd-nr__float:nth-child(8) { bottom: 35%; right: 18%; animation-delay: 3.5s; font-size: 22px; }

/* --- Plate illustration (CSS-only) --- */
.sd-nr__plate {
  position: relative;
  width: 180px;
  height: 180px;
  margin-bottom: 32px;
  animation: sdNrFadeUp 0.7s ease both;
}
/* Outer plate ring */
.sd-nr__plate-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff 0%, #f7f3ef 100%);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04),
    inset 0 2px 4px rgba(255,255,255,0.9),
    inset 0 -2px 6px rgba(0,0,0,0.03);
  animation: sdNrPlateFloat 4s ease-in-out infinite;
}
/* Inner plate well */
.sd-nr__plate-inner {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fefcfa 0%, #f5f0ea 100%);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.04),
    inset 0 -1px 3px rgba(255,255,255,0.8);
}
/* Food emoji on plate */
.sd-nr__plate-food {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  z-index: 2;
  animation: sdNrFoodPeek 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
/* Fork (left) */
.sd-nr__utensil-l {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%) rotate(-25deg);
  font-size: 40px;
  opacity: 0.7;
  animation: sdNrUtensilL 4s ease-in-out infinite;
  z-index: 1;
  filter: grayscale(0.2);
}
/* Knife (right) */
.sd-nr__utensil-r {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%) rotate(25deg);
  font-size: 40px;
  opacity: 0.7;
  animation: sdNrUtensilR 4s ease-in-out infinite;
  z-index: 1;
  filter: grayscale(0.2);
}
/* Steam wisps */
.sd-nr__steam {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.sd-nr__steam-wisp {
  width: 3px;
  height: 20px;
  background: linear-gradient(to top, rgba(200,200,200,0.3), transparent);
  border-radius: 3px;
  animation: sdNrSteam 2.5s ease-in-out infinite;
}
.sd-nr__steam-wisp:nth-child(2) { height: 26px; animation-delay: 0.4s; }
.sd-nr__steam-wisp:nth-child(3) { height: 18px; animation-delay: 0.8s; }

/* --- Title --- */
.sd-nr__title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 10px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 420px;
}

/* --- Description --- */
.sd-nr__desc {
  font-size: 0.92rem;
  color: #777;
  line-height: 1.7;
  margin: 0 0 6px;
  max-width: 400px;
}

/* --- Coming-soon badge --- */
.sd-nr__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #FFF8F0 0%, #FFF1E3 100%);
  border: 1px solid rgba(255,107,0,0.12);
  border-radius: 100px;
  margin: 18px 0 30px;
}
.sd-nr__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF6B00;
  animation: sdNrBlink 1.5s ease-in-out infinite;
}
.sd-nr__badge-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: #c45500;
  letter-spacing: 0.02em;
}

/* --- CTA Button --- */
.sd-nr__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 36px;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8533 100%);
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 24px rgba(255,107,0,0.3);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.sd-nr__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.sd-nr__btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 36px rgba(255,107,0,0.4);
  color: #fff;
  text-decoration: none;
}
.sd-nr__btn:hover::before { opacity: 1; }
.sd-nr__btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 3px 12px rgba(255,107,0,0.25);
}
.sd-nr__btn i {
  font-size: 18px;
  transition: transform 0.3s ease;
}
.sd-nr__btn:hover i {
  transform: translateX(-4px);
}

/* --- Secondary link --- */
.sd-nr__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #aaa;
  text-decoration: none;
  transition: color 0.25s;
}
.sd-nr__link:hover {
  color: #FF6B00;
  text-decoration: none;
}
.sd-nr__link i { font-size: 14px; }

/* --- Inline variant (inside feed, smaller) --- */
.sd-nr--inline {
  min-height: 320px;
  padding: 36px 20px 28px;
}
.sd-nr--inline .sd-nr__plate {
  width: 140px;
  height: 140px;
  margin-bottom: 24px;
}
.sd-nr--inline .sd-nr__plate-inner { inset: 18px; }
.sd-nr--inline .sd-nr__plate-food { font-size: 42px; }
.sd-nr--inline .sd-nr__utensil-l,
.sd-nr--inline .sd-nr__utensil-r { font-size: 30px; }
.sd-nr--inline .sd-nr__title { font-size: 1.25rem; }
.sd-nr--inline .sd-nr__desc { font-size: 0.85rem; }
.sd-nr--inline .sd-nr__badge { padding: 8px 16px; margin: 14px 0 24px; }
.sd-nr--inline .sd-nr__btn { padding: 13px 28px; font-size: 0.88rem; border-radius: 14px; }
.sd-nr--inline .sd-nr__float { font-size: 20px; }
.sd-nr--inline .sd-nr__float:nth-child(1) { font-size: 18px; }
.sd-nr--inline .sd-nr__float:nth-child(3) { font-size: 22px; }

/* --- Entrance animations (staggered) --- */
.sd-nr__plate  { animation: sdNrFadeUp 0.7s ease both; animation-delay: 0s; }
.sd-nr__title  { animation: sdNrFadeUp 0.6s ease both; animation-delay: 0.12s; }
.sd-nr__desc   { animation: sdNrFadeUp 0.6s ease both; animation-delay: 0.18s; }
.sd-nr__badge  { animation: sdNrFadeUp 0.6s ease both; animation-delay: 0.28s; }
.sd-nr__btn    { animation: sdNrFadeUp 0.6s ease both; animation-delay: 0.38s; }
.sd-nr__link   { animation: sdNrFadeUp 0.6s ease both; animation-delay: 0.44s; }

/* --- Keyframes --- */
@keyframes sdNrFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sdNrPlateFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes sdNrFoodPeek {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25%      { transform: scale(1.06) rotate(-3deg); }
  75%      { transform: scale(1.03) rotate(2deg); }
}
@keyframes sdNrUtensilL {
  0%, 100% { transform: translateY(-50%) rotate(-25deg); }
  50%      { transform: translateY(calc(-50% - 4px)) rotate(-20deg); }
}
@keyframes sdNrUtensilR {
  0%, 100% { transform: translateY(-50%) rotate(25deg); }
  50%      { transform: translateY(calc(-50% - 4px)) rotate(20deg); }
}
@keyframes sdNrSteam {
  0%   { opacity: 0; transform: translateY(0) scaleY(0.5); }
  30%  { opacity: 0.5; }
  60%  { opacity: 0.3; transform: translateY(-14px) scaleY(1); }
  100% { opacity: 0; transform: translateY(-24px) scaleY(1.2); }
}
@keyframes sdNrFloatEmoji {
  0%   { opacity: 0; transform: translateY(12px) scale(0.6) rotate(-8deg); }
  15%  { opacity: 0.65; }
  50%  { opacity: 0.45; transform: translateY(-18px) scale(1) rotate(6deg); }
  85%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(12px) scale(0.6) rotate(-8deg); }
}
@keyframes sdNrBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}

/* --- Responsive --- */
@media (max-width: 575px) {
  .sd-nr {
    padding: 40px 16px 36px;
    min-height: 400px;
  }
  .sd-nr__plate { width: 140px; height: 140px; margin-bottom: 24px; }
  .sd-nr__plate-inner { inset: 18px; }
  .sd-nr__plate-food { font-size: 44px; }
  .sd-nr__utensil-l, .sd-nr__utensil-r { font-size: 32px; }
  .sd-nr__title { font-size: 1.3rem; }
  .sd-nr__desc { font-size: 0.85rem; }
  .sd-nr__btn {
    padding: 14px 28px;
    font-size: 0.88rem;
    width: 100%;
    justify-content: center;
  }
  .sd-nr__float { font-size: 20px !important; }
  .sd-nr--inline { min-height: 280px; padding: 28px 14px 24px; }
  .sd-nr--inline .sd-nr__plate { width: 110px; height: 110px; }
  .sd-nr--inline .sd-nr__plate-inner { inset: 14px; }
  .sd-nr--inline .sd-nr__plate-food { font-size: 34px; }
  .sd-nr--inline .sd-nr__utensil-l,
  .sd-nr--inline .sd-nr__utensil-r { font-size: 24px; }
  .sd-nr--inline .sd-nr__title { font-size: 1.1rem; }
}

/* END SD EMPTY STATE */


/* ============================================================
   SD RESTAURANT SUGGEST FORM
   ============================================================ */
[v-cloak] { display: none !important; }

.sd-suggest-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.sd-suggest-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
}
.sd-suggest-section-label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-bottom: 16px;
}
.sd-suggest-field {
  margin-bottom: 16px;
}
.sd-suggest-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 5px;
}
.sd-suggest-checks {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sd-suggest-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  color: #444;
  line-height: 1.4;
}
.sd-suggest-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 1px;
  accent-color: #FF6B00;
  cursor: pointer;
}
.sd-suggest-submit {
  background: #FF6B00;
  border-color: #FF6B00;
  border-radius: 12px;
  font-weight: 600;
  padding: 12px 24px;
  font-size: 1rem;
  transition: background 0.2s, transform 0.1s;
}
.sd-suggest-submit:hover {
  background: #e65e00;
  border-color: #e65e00;
}
.sd-suggest-submit:active {
  transform: scale(0.98);
}
.sd-suggest-submit:disabled {
  background: #ccc;
  border-color: #ccc;
}
.sd-suggest-success {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
}
@media (max-width: 576px) {
  .sd-suggest-card { padding: 20px 16px; border-radius: 12px; }
  .sd-suggest-submit { font-size: 0.92rem; padding: 11px 20px; }
}
/* END SD RESTAURANT SUGGEST FORM */

/* =============================================================
   iOS SAFARI COMPATIBILITY FIXES
   =============================================================
   Addresses: scroll jank, 100vh bug, safe area insets,
   position:sticky+overflow, touch-action, rubber-banding,
   and backdrop-filter compositing issues.
   ============================================================= */

/* --- Safe area insets for notched iPhones (requires viewport-fit=cover) --- */
.sd-header {
  padding-top: env(safe-area-inset-top);
}
.sd-app-banner {
  padding-top: env(safe-area-inset-top);
}
body > footer,
.sd-footer {
  padding-bottom: env(safe-area-inset-bottom);
}

/* --- Fix iOS Safari 100vh bug (toolbar hides/shows dynamically) --- */
.full-page-sections {
  min-height: 100vh;
  min-height: 100dvh;
}
#sidebar {
  height: 100vh;
  height: 100dvh;
}
#main-container {
  min-height: 100vh;
  min-height: 100dvh;
}
.checkout-v2-page {
  min-height: 100vh;
  min-height: 100dvh;
}
.sd-auth-page {
  min-height: calc(100vh - 120px);
  min-height: calc(100dvh - 120px);
}
@media (max-width: 575.98px) {
  .sd-auth-page {
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
  }
}
#vue-orders-track .tracking-sidebar {
  max-height: 100vh;
  max-height: 100dvh;
}
.sd-addr-modal {
  max-height: 100vh;
  max-height: 100dvh;
}
@media (max-width: 575.98px) {
  .sd-addr-modal {
    height: 100vh;
    height: 100dvh;
  }
}

/* --- Fix iOS Safari: position sticky + overflow causes scroll jank --- */
.feed-filter-sidebar {
  position: -webkit-sticky;
  position: sticky;
}

/* --- iOS Safari: force GPU layer for elements with backdrop-filter to avoid repaint jank --- */
.sd-allergen-overlay,
.sd-fb-overlay,
.sd-confirm-backdrop,
.checkout-v2-topnav,
.cat-nav-wrap.cat-nav-fixed {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* --- iOS Safari: prevent text size adjustment on orientation change --- */
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --- iOS Safari: improve touch scrolling for all scrollable containers --- */
.item-modal-v2-body,
.drawer-cart-body,
.sd-fb-body,
.sd-allergen-body {
  -webkit-overflow-scrolling: touch;
}

/* --- iOS Safari: prevent rubber-band bouncing on fixed overlays --- */
.sd-allergen-overlay,
.sd-fb-overlay,
.sd-confirm-backdrop {
  overscroll-behavior: contain;
}

/* --- iOS Safari: fix tap highlight color --- */
a, button, input, select, textarea, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* --- iOS Safari: fix input zoom (font-size < 16px triggers auto-zoom) ---
   Primary fix: maximum-scale=1 in viewport meta tag (main-layout.php).
   CSS fallback: ensure base input font-size is at least 16px.
   Uses max() so inputs with larger sizes keep them, smaller ones get bumped to 16px.
   No !important — component-specific styles can still override if needed. */
@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* --- iOS Safari: smooth momentum on horizontal scroll strips --- */
.sd-cuisine-row,
.feed-mobile-action-bar,
.cat-nav-scroll {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

/* --- iOS Safari: fix for modals behind address bar --- */
@supports (-webkit-touch-callout: none) {
  /* iOS-only: use -webkit-fill-available as fallback for full-height modals */
  #itemModal .modal-full .modal-content.item-modal-v2 {
    max-height: -webkit-fill-available;
  }
  .sd-hero {
    min-height: -webkit-fill-available;
  }
}

/* END iOS SAFARI COMPATIBILITY FIXES */

/* =====================================================================
   SD-UPSELL — "Dazu empfohlen" cross-sell slider in item details popup
   ===================================================================== */
.sd-upsell {
  border-top: 1px solid #f0f0f0;
  padding: 16px 16px 12px;
  margin-top: 4px;
}
.sd-upsell__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.sd-upsell__head-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sd-upsell__slider {
  position: relative;
}
.sd-upsell__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.sd-upsell__track::-webkit-scrollbar {
  display: none;
}
.sd-upsell__arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e8e8e8;
  background: #fff;
  color: #888;
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
  padding: 0;
}
.sd-upsell__arrow:hover {
  background: #fafafa;
  color: #555;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.sd-upsell__arrow--left { left: -6px; }
.sd-upsell__arrow--right { right: -6px; }

.sd-upsell__card {
  flex: 0 0 120px;
  min-width: 120px;
  scroll-snap-align: start;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  position: relative;
  border: 1px solid #f0f0f0;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.sd-upsell__card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.sd-upsell__img {
  position: relative;
  width: 100%;
  height: 82px;
  background: #f5f5f5;
  overflow: hidden;
}
.sd-upsell__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.sd-upsell__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}
.sd-upsell__img-placeholder-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-upsell__img-placeholder-icon i {
  font-size: 16px;
  color: #bbb;
}

.sd-upsell__body {
  padding: 8px 8px 26px;
}
.sd-upsell__name {
  font-size: 0.72rem;
  font-weight: 600;
  color: #333;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.9em;
}
.sd-upsell__price {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}
.sd-upsell__price-now {
  font-size: 0.72rem;
  font-weight: 700;
  color: #222;
}
.sd-upsell__price-old {
  font-size: 0.62rem;
  color: #b0b0b0;
  text-decoration: line-through;
}

/* Actions container — positions add btn or strip at bottom-right */
.sd-upsell__actions {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 2;
  height: 28px;
}

/* Initial + add button */
.sd-upsell__add {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s ease;
  padding: 0;
  box-shadow: none;
}
.sd-upsell__add i { line-height: 1; }
.sd-upsell__add:hover {
  border-color: #FF6B00;
  color: #FF6B00;
}
.sd-upsell__add:active { transform: scale(0.92); }
.sd-upsell__add:disabled { opacity: 0.5; cursor: default; transform: none; }

/* Expanded quantity strip — pill shape */
.sd-upsell__strip {
  display: flex;
  align-items: center;
  height: 28px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid #e8e8e8;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.sd-upsell__strip-btn {
  width: 28px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #777;
  padding: 0;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
.sd-upsell__strip-btn:hover { background: #f5f5f5; }
.sd-upsell__strip-btn:active { transform: scale(0.9); }
.sd-upsell__strip-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.sd-upsell__strip-btn--minus { color: #999; }
.sd-upsell__strip-btn--minus:hover { color: #e53e3e; background: #fff5f5; }
.sd-upsell__strip-btn--plus { color: #555; }
.sd-upsell__strip-btn--plus:hover { color: #FF6B00; background: #fff8f3; }

.sd-upsell__strip-qty {
  min-width: 20px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #333;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}
.sd-upsell__strip-qty--pop {
  animation: sdUpsellQtyPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Strip expand/collapse transition */
.sd-upsell-strip-enter-active {
  transition: width 0.25s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.2s ease;
}
.sd-upsell-strip-leave-active {
  transition: width 0.2s ease, opacity 0.15s ease;
}
.sd-upsell-strip-enter-from {
  width: 28px;
  opacity: 0;
}
.sd-upsell-strip-leave-to {
  width: 28px;
  opacity: 0;
}

/* Add button fade out/in when strip appears/disappears */
.sd-upsell-addbtn-enter-active {
  transition: opacity 0.2s ease 0.1s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
}
.sd-upsell-addbtn-leave-active {
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.sd-upsell-addbtn-enter-from {
  opacity: 0;
  transform: scale(0.5);
}
.sd-upsell-addbtn-leave-to {
  opacity: 0;
  transform: scale(0.5);
}

@keyframes sdUpsellQtyPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Desktop: show arrow buttons, wider cards */
@media (min-width: 768px) {
  .sd-upsell__card {
    flex: 0 0 140px;
    min-width: 140px;
  }
  .sd-upsell__img {
    height: 92px;
  }
  .sd-upsell__name {
    font-size: 0.76rem;
  }
  .sd-upsell__arrow {
    display: flex;
  }
  .sd-upsell__slider {
    padding: 0 4px;
  }
}

/* Mobile full-screen modal: tighter padding */
@media (max-width: 575px) {
  .sd-upsell {
    padding: 12px 12px 8px;
  }
  .sd-upsell__card {
    flex: 0 0 110px;
    min-width: 110px;
  }
  .sd-upsell__img {
    height: 72px;
  }
}

/* END SD-UPSELL */

/* ============================================================
   SD MENU SEARCH — No Results Message
   ============================================================ */
.sd-menu-no-results {
  text-align: center;
  padding: 48px 20px;
  color: #888;
}
.sd-menu-no-results i {
  display: block;
  margin-bottom: 12px;
}
.sd-menu-no-results p {
  font-size: 1rem;
  font-weight: 600;
  color: #555;
  margin: 0 0 4px;
}
.sd-menu-no-results span {
  font-size: 0.84rem;
  color: #999;
}

html[data-theme="dark"] .sd-menu-no-results p {
  color: #ccc;
}
html[data-theme="dark"] .sd-menu-no-results span {
  color: #888;
}

/* =============================================================
   SD-CONTACT — Contact Page Redesign
   ============================================================= */

/* --- Hero Section --- */
.sd-contact-hero {
  background: linear-gradient(135deg, #fff8f0 0%, #fff3e6 50%, #ffe8d1 100%);
  padding: 56px 0 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sd-contact-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,107,0,0.06);
}
.sd-contact-hero::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255,107,0,0.04);
}
.sd-contact-hero__inner {
  position: relative;
  z-index: 1;
}
.sd-contact-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: linear-gradient(135deg, #FF6B00, #E05E00);
  color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 8px 28px rgba(255,107,0,0.25);
}
.sd-contact-hero__title {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.sd-contact-hero__subtitle {
  font-size: 1rem;
  color: #666;
  margin: 0;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- Container & Layout --- */
.sd-contact-container {
  padding-top: 40px;
  padding-bottom: 56px;
}
.sd-contact-row {
  display: flex;
  gap: 0;
}

/* --- Form Card --- */
.sd-contact-card {
  background: #fff;
  border: 1px solid #eceae5;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.02);
}
.sd-contact-card__header {
  margin-bottom: 28px;
}
.sd-contact-card__title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
}
.sd-contact-card__desc {
  font-size: 0.88rem;
  color: #888;
  margin: 0;
  line-height: 1.5;
}

/* --- Contact Content (CMS HTML) --- */
.sd-contact-content {
  background: #faf9f7;
  border: 1px solid #f0ede8;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  font-size: 0.88rem;
  color: #555;
  line-height: 1.6;
}

/* --- Alert Messages --- */
.sd-contact-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 20px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.sd-contact-alert svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.sd-contact-alert--success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}
.sd-contact-alert--success svg { color: #059669; }
.sd-contact-alert--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.sd-contact-alert--error svg { color: #dc2626; }

/* --- Form Fields Grid --- */
.sd-contact-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.sd-contact-field--full {
  grid-column: 1 / -1;
}

/* --- Input Wrapper --- */
.sd-contact-input-wrap {
  position: relative;
}

/* --- Input Icon --- */
.sd-contact-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
  display: flex;
  z-index: 2;
  pointer-events: none;
  transition: color 0.2s ease;
}

/* --- Input Styles --- */
.sd-contact-input {
  display: block;
  width: 100%;
  padding: 16px 16px 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  color: #1a1a1a;
  background: #faf9f7;
  border: 1.5px solid #e8e5df;
  border-radius: 12px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  -webkit-appearance: none;
}
.sd-contact-input--icon {
  padding-left: 46px;
}
.sd-contact-input:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.08);
  background: #fff;
}
.sd-contact-input-wrap:focus-within .sd-contact-input-icon {
  color: #FF6B00;
}
.sd-contact-input::placeholder {
  color: transparent;
}

/* --- Floating Label --- */
.sd-contact-label {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: #999;
  pointer-events: none;
  transition: all 0.2s ease;
  background: transparent;
  padding: 0 4px;
}
.sd-contact-label--icon {
  left: 46px;
}
/* Label float state */
.sd-contact-input:focus ~ .sd-contact-label,
.sd-contact-input:not(:placeholder-shown) ~ .sd-contact-label {
  top: 6px;
  transform: translateY(0);
  font-size: 0.68rem;
  font-weight: 600;
  color: #FF6B00;
  letter-spacing: 0.02em;
}
/* Textarea specific */
textarea.sd-contact-textarea {
  resize: vertical;
  min-height: 130px;
  padding-top: 28px;
}
textarea.sd-contact-textarea ~ .sd-contact-label {
  top: 16px;
  transform: none;
}
textarea.sd-contact-textarea:focus ~ .sd-contact-label,
textarea.sd-contact-textarea:not(:placeholder-shown) ~ .sd-contact-label {
  top: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #FF6B00;
}

/* --- Field Error --- */
.sd-contact-error {
  display: block;
  font-size: 0.76rem;
  color: #dc2626;
  margin-top: 4px;
  padding-left: 4px;
}

/* --- Captcha --- */
.sd-contact-captcha {
  margin-top: 20px;
}

/* --- Submit Button --- */
.sd-contact-submit {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 16px 32px;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #FF6B00, #E05E00);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(255,107,0,0.25);
  letter-spacing: 0.01em;
}
.sd-contact-submit:hover {
  background: linear-gradient(135deg, #E05E00, #CC5200);
  box-shadow: 0 6px 24px rgba(255,107,0,0.35);
  transform: translateY(-1px);
}
.sd-contact-submit:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 2px 10px rgba(255,107,0,0.2);
}

/* --- Sidebar --- */
.sd-contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 12px;
}

/* --- Info Cards --- */
.sd-contact-info-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border: 1px solid #eceae5;
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 1px 6px rgba(0,0,0,0.03);
}
a.sd-contact-info-card:hover {
  border-color: #FFD9B3;
  box-shadow: 0 4px 18px rgba(255,107,0,0.08);
  transform: translateY(-2px);
  text-decoration: none;
}
a.sd-contact-info-card:active {
  transform: scale(0.99);
}
.sd-contact-info-card--static {
  cursor: default;
}
.sd-contact-info-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  flex-shrink: 0;
}
.sd-contact-info-card__icon--phone {
  background: #ecfdf5;
  color: #059669;
}
.sd-contact-info-card__icon--email {
  background: #FFF5EB;
  color: #FF6B00;
}
.sd-contact-info-card__icon--location {
  background: #eff6ff;
  color: #3b82f6;
}
.sd-contact-info-card__body {
  flex: 1;
  min-width: 0;
}
.sd-contact-info-card__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.sd-contact-info-card__value {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  color: #1a1a1a;
  word-break: break-word;
}
.sd-contact-info-card__sub {
  display: block;
  font-size: 0.78rem;
  color: #888;
  margin-top: 2px;
}
.sd-contact-info-card__arrow {
  flex-shrink: 0;
  color: #ccc;
  transition: transform 0.2s ease, color 0.2s ease;
}
a.sd-contact-info-card:hover .sd-contact-info-card__arrow {
  color: #FF6B00;
  transform: translateX(2px);
}

/* --- Hours / Response Time Card --- */
.sd-contact-hours-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #FFF8F0, #FFF3E6);
  border: 1.5px solid #FFE0B3;
  border-radius: 16px;
  margin-top: 6px;
}
.sd-contact-hours-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #FF6B00;
  color: #fff;
  flex-shrink: 0;
}
.sd-contact-hours-card__body {
  flex: 1;
}
.sd-contact-hours-card__title {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.sd-contact-hours-card__text {
  display: block;
  font-size: 0.82rem;
  color: #777;
  line-height: 1.5;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
  .sd-contact-hero {
    padding: 40px 0 36px;
  }
  .sd-contact-hero__icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }
  .sd-contact-hero__icon svg {
    width: 36px;
    height: 36px;
  }
  .sd-contact-hero__title {
    font-size: 1.6rem;
  }
  .sd-contact-hero__subtitle {
    font-size: 0.9rem;
  }
  .sd-contact-container {
    padding-top: 28px;
    padding-bottom: 40px;
  }
  .sd-contact-card {
    padding: 28px 22px;
    border-radius: 16px;
    margin-bottom: 24px;
  }
  .sd-contact-sidebar {
    padding-left: 0;
  }
}
@media (max-width: 575.98px) {
  .sd-contact-hero {
    padding: 32px 16px 28px;
  }
  .sd-contact-hero__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin-bottom: 16px;
  }
  .sd-contact-hero__icon svg {
    width: 30px;
    height: 30px;
  }
  .sd-contact-hero__title {
    font-size: 1.35rem;
  }
  .sd-contact-hero__subtitle {
    font-size: 0.84rem;
  }
  .sd-contact-fields {
    grid-template-columns: 1fr;
  }
  .sd-contact-card {
    padding: 22px 18px;
    border-radius: 14px;
  }
  .sd-contact-card__title {
    font-size: 1.15rem;
  }
}
/* END SD-CONTACT */


/* ============================================================
   SD CMS PAGE — Professional Layout
   ============================================================ */

/* --- Hero Section --- */
.sd-page-hero {
  background: linear-gradient(135deg, #fff8f0 0%, #fff3e6 50%, #ffe8d1 100%);
  padding: 52px 0 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sd-page-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,107,0,0.06);
  pointer-events: none;
}
.sd-page-hero::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255,107,0,0.04);
  pointer-events: none;
}
.sd-page-hero__inner {
  position: relative;
  z-index: 1;
}
.sd-page-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: linear-gradient(135deg, #FF6B00, #ff8c3a);
  color: #fff;
  font-size: 28px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(255,107,0,0.25);
}
.sd-page-hero__title {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.sd-page-hero__subtitle {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  color: #777;
  margin: 0 auto 18px;
  max-width: 560px;
  line-height: 1.5;
}
.sd-page-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #999;
  font-family: 'Outfit', sans-serif;
}
.sd-page-hero__breadcrumb a {
  color: #FF6B00;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.sd-page-hero__breadcrumb a:hover {
  color: #E05E00;
}
.sd-page-hero__sep {
  font-size: 0.7rem;
  color: #ccc;
}

/* --- Content Wrap --- */
.sd-page-content-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 0 56px;
}
.sd-page-content {
  background: #fff;
  border: 1px solid #eceae5;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.02);
  overflow: hidden;
}
.sd-page-content__body {
  padding: 40px 48px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #444;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* --- Typography inside content body --- */
.sd-page-content__body h1 {
  font-size: 1.65rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 32px 0 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.sd-page-content__body h1:first-child {
  margin-top: 0;
}
.sd-page-content__body h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 28px 0 14px;
  line-height: 1.3;
  padding-bottom: 10px;
  border-bottom: 2px solid #fff0e0;
}
.sd-page-content__body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 24px 0 12px;
  line-height: 1.35;
}
.sd-page-content__body h4,
.sd-page-content__body h5,
.sd-page-content__body h6 {
  font-weight: 600;
  color: #1a1a2e;
  margin: 20px 0 10px;
  line-height: 1.4;
}
.sd-page-content__body h4 { font-size: 1.05rem; }
.sd-page-content__body h5 { font-size: 0.95rem; }
.sd-page-content__body h6 { font-size: 0.88rem; }

.sd-page-content__body p {
  margin: 0 0 16px;
  color: #555;
}
.sd-page-content__body p:last-child {
  margin-bottom: 0;
}
.sd-page-content__body a {
  color: #FF6B00;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.sd-page-content__body a:hover {
  color: #E05E00;
  border-bottom-color: #E05E00;
}
.sd-page-content__body strong,
.sd-page-content__body b {
  font-weight: 600;
  color: #333;
}
.sd-page-content__body em,
.sd-page-content__body i:not(.las):not(.la) {
  font-style: italic;
}

/* Lists */
.sd-page-content__body ul,
.sd-page-content__body ol {
  margin: 0 0 18px;
  padding-left: 24px;
}
.sd-page-content__body ul {
  list-style: none;
  padding-left: 0;
}
.sd-page-content__body ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}
.sd-page-content__body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF6B00;
}
.sd-page-content__body ol li {
  margin-bottom: 8px;
  padding-left: 4px;
}
.sd-page-content__body ol li::marker {
  color: #FF6B00;
  font-weight: 600;
}

/* Blockquote */
.sd-page-content__body blockquote {
  margin: 24px 0;
  padding: 18px 24px;
  border-left: 4px solid #FF6B00;
  background: #fff8f0;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: #666;
}

/* Table */
.sd-page-content__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.9rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eceae5;
}
.sd-page-content__body table th {
  background: #faf8f5;
  font-weight: 600;
  color: #1a1a2e;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid #eceae5;
}
.sd-page-content__body table td {
  padding: 10px 16px;
  border-bottom: 1px solid #f0ede8;
  color: #555;
}
.sd-page-content__body table tr:last-child td {
  border-bottom: none;
}
.sd-page-content__body table tr:hover td {
  background: #faf9f7;
}

/* Code */
.sd-page-content__body code {
  background: #f5f3f0;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #d63031;
  font-family: 'Courier New', monospace;
}
.sd-page-content__body pre {
  background: #faf8f5;
  border: 1px solid #eceae5;
  border-radius: 12px;
  padding: 18px 22px;
  overflow-x: auto;
  margin: 20px 0;
  font-size: 0.85rem;
}
.sd-page-content__body pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* Horizontal rule */
.sd-page-content__body hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e8e5df, transparent);
  margin: 32px 0;
}

/* Images inside content */
.sd-page-content__body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 16px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .sd-page-hero {
    padding: 36px 0 32px;
  }
  .sd-page-hero__icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
    border-radius: 16px;
    margin-bottom: 16px;
  }
  .sd-page-hero__title {
    font-size: 1.45rem;
  }
  .sd-page-hero__subtitle {
    font-size: 0.88rem;
  }
  .sd-page-content-wrap {
    padding: 28px 0 36px;
  }
  .sd-page-content {
    border-radius: 16px;
  }
  .sd-page-content__body {
    padding: 28px 22px;
    font-size: 0.92rem;
  }
  .sd-page-content__body h1 {
    font-size: 1.35rem;
  }
  .sd-page-content__body h2 {
    font-size: 1.15rem;
  }
  .sd-page-content__body h3 {
    font-size: 1.05rem;
  }
  .sd-page-content__body table {
    font-size: 0.82rem;
  }
  .sd-page-content__body table th,
  .sd-page-content__body table td {
    padding: 8px 12px;
  }
}
@media (max-width: 480px) {
  .sd-page-hero {
    padding: 28px 0 24px;
  }
  .sd-page-hero__title {
    font-size: 1.25rem;
  }
  .sd-page-content__body {
    padding: 22px 16px;
  }
  .sd-page-content__body blockquote {
    padding: 14px 16px;
  }
}
/* END SD CMS PAGE */


/* ============================================================
   SD PARTNER CTA — Join Us / Become a Partner Section
   ============================================================ */
.sd-partner-cta {
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d1810 40%, #3a1a0a 100%);
}
.sd-partner-cta__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(255,107,0,0.15) 0%, transparent 70%),
              radial-gradient(ellipse at 80% 20%, rgba(255,140,58,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.sd-partner-cta__bg::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,107,0,0.06);
}
.sd-partner-cta__bg::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,107,0,0.04);
}
.sd-partner-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.sd-partner-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255,107,0,0.15);
  border: 1px solid rgba(255,107,0,0.25);
  color: #FF6B00;
  font-size: 28px;
  margin-bottom: 20px;
}
.sd-partner-cta__eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: #ff8c3a;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.sd-partner-cta__title {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.sd-partner-cta__subtitle {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  margin: 0 0 32px;
  line-height: 1.5;
}
.sd-partner-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 36px;
  background: linear-gradient(135deg, #FF6B00, #ff8c3a);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(255,107,0,0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sd-partner-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,107,0,0.45);
  color: #fff;
  text-decoration: none;
}
.sd-partner-cta__btn:active {
  transform: translateY(0);
}
.sd-partner-cta__btn i {
  font-size: 1.1rem;
  transition: transform 0.18s ease;
}
.sd-partner-cta__btn:hover i {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
  .sd-partner-cta {
    padding: 52px 0;
  }
  .sd-partner-cta__title {
    font-size: 1.55rem;
  }
  .sd-partner-cta__subtitle {
    font-size: 0.92rem;
  }
  .sd-partner-cta__btn {
    padding: 13px 28px;
    font-size: 0.95rem;
  }
}
@media (max-width: 480px) {
  .sd-partner-cta {
    padding: 40px 0;
  }
  .sd-partner-cta__icon {
    width: 52px;
    height: 52px;
    font-size: 24px;
    border-radius: 14px;
  }
  .sd-partner-cta__title {
    font-size: 1.35rem;
  }
  .sd-partner-cta__btn {
    padding: 12px 24px;
    font-size: 0.9rem;
    border-radius: 12px;
  }
}
/* END SD PARTNER CTA */