/* Add custom CSS styles below */ 
h2.advanced-slider__caption__inner__content__heading {
  color: #ffffff !important;
}
p.advanced-slider__caption__inner__content__text {
  color: #ffffff !important;
}
.slider-wrap.relative.lg\:w-2\/3.pb-20.lg\:pt-20.lg\:pb-28.\32 xl\:px-2\.5 {
    background: #8F3B65;
    margin-right: 0px;
}
.s-block--enhanced-features__item.group.overflow-hidden {
    background: #FAE9FD;
    border-radius: 12px;
    margin: 8px;
}
.single-faq.w-full.rounded-lg.border.border-store-text-secondary.bg-store-bg-secondary.py-3.px-5 {
    background: #A36E88;
    border-color: #6d1c44;
}
.faq-btn p {
  color: #ffffff !important;
}
p[data-selia="home-faq-answer"] {
  color: #ffffff !important;
}
.topnav-is-dark .top-navbar {
  background: #6d1c44 !important;
}
.flex.flex-col.justify-between.h-full.w-full.p-\[1\.4rem\].bg-store-bg-secondary.rounded-md.shadow-\[rgba\(50\,_50\,_105\,_0\.15\)_0px_2px_5px_0px\,_rgba\(0\,_0\,_0\,_0\.05\)_0px_1px_1px_0px\] {
    background: #FAE9FD;
}

.dw-pro-toast {
  position: fixed;
  top: 25px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: #111;
  color: #fff;
  padding: 14px 22px;
  border-radius: 14px;
  font-size: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  opacity: 0;
  transition: all 0.35s ease;
  z-index: 999999;
}

.dw-pro-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dw-pro-toast.success {
  background: linear-gradient(135deg, #16a34a, #22c55e);
}

.dw-pro-toast.error {
  background: linear-gradient(135deg, #dc2626, #ef4444);
}

.dw-pro-toast.loading {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
}
.btn--collapse {
    color: #ffffff;
}
.dw-time-slots {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.dw-slot {
  background: #f3f3f3;
  border: 1px solid #ddd;
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.dw-slot.active {
  background: #6d1c44;
  color: #fff;
  border-color: #6d1c44;
}
/* =========================
   DELIVERY WIDGET UI FIX
========================= */

/* Buttons Container */
.dw-date-buttons,
.dw-time-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Buttons Base */
.dw-date-buttons button,
.dw-time-buttons button {
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e5d6dc;
  background: #fff;
  color: #2b2b2b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Date Button شكل مختلف */
.dw-date-buttons button {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

.dw-date-buttons button small {
  font-size: 12px;
  opacity: 0.7;
}

/* Hover + Active */
.dw-date-buttons button:hover,
.dw-time-buttons button:hover:not(:disabled),
.dw-date-buttons button.is-selected,
.dw-time-buttons button.is-selected {
  background: #7A1E3A;
  border-color: #7A1E3A;
  color: #fff;
  transform: translateY(-2px);
}

/* Disabled */
.dw-time-buttons button:disabled {
  background: #f3f3f3;
  color: #aaa;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Inputs */
.dw-input {
  border-radius: 8px !important;
  border: 1px solid #e5d6dc !important;
  padding: 10px 12px !important;
  transition: 0.2s;
}

.dw-input:focus {
  border-color: #7A1E3A !important;
  box-shadow: 0 0 0 2px rgba(122, 30, 58, 0.15);
}

/* Gift message group */
.dw-message-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Message box */
.dw-slots-message {
  background: #f8f5f6;
  border-radius: 8px;
  padding: 10px;
  color: #666;
}

/* Skeleton loading */
.dw-skeleton-item {
  border-radius: 8px !important;
}

/* =========================
   🔥 Mobile Fix (IMPORTANT)
========================= */
@media (max-width: 768px) {
  .dw-date-buttons,
  .dw-time-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .dw-date-buttons button,
  .dw-time-buttons button {
    width: 100%;
    font-size: 13px;
    padding: 8px;
  }
}

@media only screen and (min-width: 1024px) {
    @media (min-width: 1024px) {
        .main-menu {
            display: flex;
            flex-wrap: nowrap;
        }
      nav#mobile-menu {
    width: max-content;
}
    }
}