@import url(https://fonts.googleapis.com/css?family=Nunito);
.badge-soft-info {
  background-color: #a184dc !important;
  color: #fff !important;
}

:root {
  /* Define your theme colors here */
  --stepper-primary-color: #4f46e5; /* (e.g., Indigo-600) */
  --stepper-secondary-color: #d1d5db; /* (e.g., Gray-300) */
  --stepper-background-color: #ffffff; /* (e.g., White) */
  --stepper-completed-color: #10b981; /* (e.g., Emerald-500) */
  --stepper-text-color: #374151; /* (e.g., Gray-700) */
  --stepper-text-color-light: #9ca3af; /* (e.g., Gray-400) */
}

.modern-checkout-stepper {
  /* Use a modern font stack */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  padding: 1rem 0.5rem;
  position: relative;
  overflow: hidden; /* Clears floats and contains margins */
}

.stepper-steps-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 10; /* Ensures steps are above the progress bar */
}

.stepper-progress-container {
  /* This is the gray background bar */
  position: absolute;
  top: 2.75rem; /* Vertically centers the bar with the 3rem circles */
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background-color: var(--stepper-secondary-color);
  z-index: 5; /* Behind the step circles */
}

.stepper-progress {
  /* This is the colored foreground bar */
  height: 100%;
  background-color: var(--stepper-completed-color); /* Use completed color for the filled bar */
  transition: width 0.4s ease-in-out;
}

/* Individual Step Styling */
.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Each step takes equal width. Adjust padding if you have more/less steps */
  width: 20%; /* 100% / 5 steps */
  position: relative;
}

.step-circle {
  height: 3rem; /* 48px */
  width: 3rem; /* 48px */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Background color punches a "hole" through the progress bar */
  background-color: var(--stepper-background-color);
  border: 4px solid var(--stepper-secondary-color);
  transition: all 0.3s ease;
  z-index: 10; /* Ensures circle is above the progress bar */
}

.step-icon {
  font-size: 1.5rem; /* 24px */
  color: var(--stepper-text-color-light);
  transition: color 0.3s ease;
}

.step-label {
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  color: var(--stepper-text-color-light);
  margin-top: 0.75rem;
  transition: color 0.3s ease;
}

/* * =============================================
 * STEPPER STATES (Active & Completed)
 * =============================================
 */
/* Active State */
.stepper-step.active .step-circle {
  border-color: var(--stepper-primary-color);
  /* A subtle outer glow for the active step */
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2);
}

.stepper-step.active .step-icon {
  color: var(--stepper-primary-color);
}

.stepper-step.active .step-label {
  color: var(--stepper-primary-color);
  font-weight: 600;
}

/* Completed State */
.stepper-step.completed .step-circle {
  background-color: var(--stepper-completed-color);
  border-color: var(--stepper-completed-color);
}

.stepper-step.completed .step-icon {
  color: #ffffff; /* White checkmark */
  font-size: 1.75rem; /* Make checkmark slightly bigger */
}

.stepper-step.completed .step-label {
  color: var(--stepper-text-color);
}

/* * =============================================
 * RESPONSIVENESS (Mobile-first)
 * =============================================
 */
@media (max-width: 640px) {
  /* * On small screens (sm:), hide the labels to prevent clutter
   * and reduce the size of the circles.
   */
  .step-label {
    display: none;
  }
  .step-circle {
    height: 2.5rem; /* 40px */
    width: 2.5rem; /* 40px */
    border-width: 3px;
  }
  .step-icon {
    font-size: 1.25rem; /* 20px */
  }
  .stepper-step.completed .step-icon {
    font-size: 1.5rem; /* 24px */
  }
  .stepper-progress-container {
    top: 2.25rem; /* Adjust progress bar position for smaller circles */
  }
}
:root {
  --bs-spacer: 1rem;
  --bs-spacer-1: calc(var(--bs-spacer) * 0.25);
  --bs-spacer-2: calc(var(--bs-spacer) * 0.5);
  --bs-spacer-3: var(--bs-spacer);
  --bs-spacer-4: calc(var(--bs-spacer) * 1.5);
  --bs-spacer-5: calc(var(--bs-spacer) * 3);
}

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: var(--bs-spacer-1) !important;
}

.gap-2 {
  gap: var(--bs-spacer-2) !important;
}

.gap-3 {
  gap: var(--bs-spacer-3) !important;
}

.gap-4 {
  gap: var(--bs-spacer-4) !important;
}

.gap-5 {
  gap: var(--bs-spacer-5) !important;
}

.row-gap-0 {
  row-gap: 0 !important;
}

.row-gap-1 {
  row-gap: var(--bs-spacer-1) !important;
}

.row-gap-2 {
  row-gap: var(--bs-spacer-2) !important;
}

.row-gap-3 {
  row-gap: var(--bs-spacer-3) !important;
}

.row-gap-4 {
  row-gap: var(--bs-spacer-4) !important;
}

.row-gap-5 {
  row-gap: var(--bs-spacer-5) !important;
}

.column-gap-0 {
  -moz-column-gap: 0 !important;
       column-gap: 0 !important;
}

.column-gap-1 {
  -moz-column-gap: var(--bs-spacer-1) !important;
       column-gap: var(--bs-spacer-1) !important;
}

.column-gap-2 {
  -moz-column-gap: var(--bs-spacer-2) !important;
       column-gap: var(--bs-spacer-2) !important;
}

.column-gap-3 {
  -moz-column-gap: var(--bs-spacer-3) !important;
       column-gap: var(--bs-spacer-3) !important;
}

.column-gap-4 {
  -moz-column-gap: var(--bs-spacer-4) !important;
       column-gap: var(--bs-spacer-4) !important;
}

.column-gap-5 {
  -moz-column-gap: var(--bs-spacer-5) !important;
       column-gap: var(--bs-spacer-5) !important;
}

/* Responsive Breakpoints */
/* Small (sm) - 576px */
@media (min-width: 576px) {
  .gap-sm-0 {
    gap: 0 !important;
  }
  .gap-sm-1 {
    gap: var(--bs-spacer-1) !important;
  }
  .gap-sm-2 {
    gap: var(--bs-spacer-2) !important;
  }
  .gap-sm-3 {
    gap: var(--bs-spacer-3) !important;
  }
  .gap-sm-4 {
    gap: var(--bs-spacer-4) !important;
  }
  .gap-sm-5 {
    gap: var(--bs-spacer-5) !important;
  }
  .row-gap-sm-0 {
    row-gap: 0 !important;
  }
  .row-gap-sm-1 {
    row-gap: var(--bs-spacer-1) !important;
  }
  .row-gap-sm-2 {
    row-gap: var(--bs-spacer-2) !important;
  }
  .row-gap-sm-3 {
    row-gap: var(--bs-spacer-3) !important;
  }
  .row-gap-sm-4 {
    row-gap: var(--bs-spacer-4) !important;
  }
  .row-gap-sm-5 {
    row-gap: var(--bs-spacer-5) !important;
  }
  .column-gap-sm-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-sm-1 {
    -moz-column-gap: var(--bs-spacer-1) !important;
         column-gap: var(--bs-spacer-1) !important;
  }
  .column-gap-sm-2 {
    -moz-column-gap: var(--bs-spacer-2) !important;
         column-gap: var(--bs-spacer-2) !important;
  }
  .column-gap-sm-3 {
    -moz-column-gap: var(--bs-spacer-3) !important;
         column-gap: var(--bs-spacer-3) !important;
  }
  .column-gap-sm-4 {
    -moz-column-gap: var(--bs-spacer-4) !important;
         column-gap: var(--bs-spacer-4) !important;
  }
  .column-gap-sm-5 {
    -moz-column-gap: var(--bs-spacer-5) !important;
         column-gap: var(--bs-spacer-5) !important;
  }
}
/* Medium (md) - 768px */
@media (min-width: 768px) {
  .gap-md-0 {
    gap: 0 !important;
  }
  .gap-md-1 {
    gap: var(--bs-spacer-1) !important;
  }
  .gap-md-2 {
    gap: var(--bs-spacer-2) !important;
  }
  .gap-md-3 {
    gap: var(--bs-spacer-3) !important;
  }
  .gap-md-4 {
    gap: var(--bs-spacer-4) !important;
  }
  .gap-md-5 {
    gap: var(--bs-spacer-5) !important;
  }
  .row-gap-md-0 {
    row-gap: 0 !important;
  }
  .row-gap-md-1 {
    row-gap: var(--bs-spacer-1) !important;
  }
  .row-gap-md-2 {
    row-gap: var(--bs-spacer-2) !important;
  }
  .row-gap-md-3 {
    row-gap: var(--bs-spacer-3) !important;
  }
  .row-gap-md-4 {
    row-gap: var(--bs-spacer-4) !important;
  }
  .row-gap-md-5 {
    row-gap: var(--bs-spacer-5) !important;
  }
  .column-gap-md-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-md-1 {
    -moz-column-gap: var(--bs-spacer-1) !important;
         column-gap: var(--bs-spacer-1) !important;
  }
  .column-gap-md-2 {
    -moz-column-gap: var(--bs-spacer-2) !important;
         column-gap: var(--bs-spacer-2) !important;
  }
  .column-gap-md-3 {
    -moz-column-gap: var(--bs-spacer-3) !important;
         column-gap: var(--bs-spacer-3) !important;
  }
  .column-gap-md-4 {
    -moz-column-gap: var(--bs-spacer-4) !important;
         column-gap: var(--bs-spacer-4) !important;
  }
  .column-gap-md-5 {
    -moz-column-gap: var(--bs-spacer-5) !important;
         column-gap: var(--bs-spacer-5) !important;
  }
}
/* Large (lg) - 992px */
@media (min-width: 992px) {
  .gap-lg-0 {
    gap: 0 !important;
  }
  .gap-lg-1 {
    gap: var(--bs-spacer-1) !important;
  }
  .gap-lg-2 {
    gap: var(--bs-spacer-2) !important;
  }
  .gap-lg-3 {
    gap: var(--bs-spacer-3) !important;
  }
  .gap-lg-4 {
    gap: var(--bs-spacer-4) !important;
  }
  .gap-lg-5 {
    gap: var(--bs-spacer-5) !important;
  }
  .row-gap-lg-0 {
    row-gap: 0 !important;
  }
  .row-gap-lg-1 {
    row-gap: var(--bs-spacer-1) !important;
  }
  .row-gap-lg-2 {
    row-gap: var(--bs-spacer-2) !important;
  }
  .row-gap-lg-3 {
    row-gap: var(--bs-spacer-3) !important;
  }
  .row-gap-lg-4 {
    row-gap: var(--bs-spacer-4) !important;
  }
  .row-gap-lg-5 {
    row-gap: var(--bs-spacer-5) !important;
  }
  .column-gap-lg-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-lg-1 {
    -moz-column-gap: var(--bs-spacer-1) !important;
         column-gap: var(--bs-spacer-1) !important;
  }
  .column-gap-lg-2 {
    -moz-column-gap: var(--bs-spacer-2) !important;
         column-gap: var(--bs-spacer-2) !important;
  }
  .column-gap-lg-3 {
    -moz-column-gap: var(--bs-spacer-3) !important;
         column-gap: var(--bs-spacer-3) !important;
  }
  .column-gap-lg-4 {
    -moz-column-gap: var(--bs-spacer-4) !important;
         column-gap: var(--bs-spacer-4) !important;
  }
  .column-gap-lg-5 {
    -moz-column-gap: var(--bs-spacer-5) !important;
         column-gap: var(--bs-spacer-5) !important;
  }
}
/* Extra Large (xl) - 1200px */
@media (min-width: 1200px) {
  .gap-xl-0 {
    gap: 0 !important;
  }
  .gap-xl-1 {
    gap: var(--bs-spacer-1) !important;
  }
  .gap-xl-2 {
    gap: var(--bs-spacer-2) !important;
  }
  .gap-xl-3 {
    gap: var(--bs-spacer-3) !important;
  }
  .gap-xl-4 {
    gap: var(--bs-spacer-4) !important;
  }
  .gap-xl-5 {
    gap: var(--bs-spacer-5) !important;
  }
  .row-gap-xl-0 {
    row-gap: 0 !important;
  }
  .row-gap-xl-1 {
    row-gap: var(--bs-spacer-1) !important;
  }
  .row-gap-xl-2 {
    row-gap: var(--bs-spacer-2) !important;
  }
  .row-gap-xl-3 {
    row-gap: var(--bs-spacer-3) !important;
  }
  .row-gap-xl-4 {
    row-gap: var(--bs-spacer-4) !important;
  }
  .row-gap-xl-5 {
    row-gap: var(--bs-spacer-5) !important;
  }
  .column-gap-xl-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-xl-1 {
    -moz-column-gap: var(--bs-spacer-1) !important;
         column-gap: var(--bs-spacer-1) !important;
  }
  .column-gap-xl-2 {
    -moz-column-gap: var(--bs-spacer-2) !important;
         column-gap: var(--bs-spacer-2) !important;
  }
  .column-gap-xl-3 {
    -moz-column-gap: var(--bs-spacer-3) !important;
         column-gap: var(--bs-spacer-3) !important;
  }
  .column-gap-xl-4 {
    -moz-column-gap: var(--bs-spacer-4) !important;
         column-gap: var(--bs-spacer-4) !important;
  }
  .column-gap-xl-5 {
    -moz-column-gap: var(--bs-spacer-5) !important;
         column-gap: var(--bs-spacer-5) !important;
  }
}
/* Extra Extra Large (xxl) - 1400px */
@media (min-width: 1400px) {
  .gap-xxl-0 {
    gap: 0 !important;
  }
  .gap-xxl-1 {
    gap: var(--bs-spacer-1) !important;
  }
  .gap-xxl-2 {
    gap: var(--bs-spacer-2) !important;
  }
  .gap-xxl-3 {
    gap: var(--bs-spacer-3) !important;
  }
  .gap-xxl-4 {
    gap: var(--bs-spacer-4) !important;
  }
  .gap-xxl-5 {
    gap: var(--bs-spacer-5) !important;
  }
  .row-gap-xxl-0 {
    row-gap: 0 !important;
  }
  .row-gap-xxl-1 {
    row-gap: var(--bs-spacer-1) !important;
  }
  .row-gap-xxl-2 {
    row-gap: var(--bs-spacer-2) !important;
  }
  .row-gap-xxl-3 {
    row-gap: var(--bs-spacer-3) !important;
  }
  .row-gap-xxl-4 {
    row-gap: var(--bs-spacer-4) !important;
  }
  .row-gap-xxl-5 {
    row-gap: var(--bs-spacer-5) !important;
  }
  .column-gap-xxl-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-xxl-1 {
    -moz-column-gap: var(--bs-spacer-1) !important;
         column-gap: var(--bs-spacer-1) !important;
  }
  .column-gap-xxl-2 {
    -moz-column-gap: var(--bs-spacer-2) !important;
         column-gap: var(--bs-spacer-2) !important;
  }
  .column-gap-xxl-3 {
    -moz-column-gap: var(--bs-spacer-3) !important;
         column-gap: var(--bs-spacer-3) !important;
  }
  .column-gap-xxl-4 {
    -moz-column-gap: var(--bs-spacer-4) !important;
         column-gap: var(--bs-spacer-4) !important;
  }
  .column-gap-xxl-5 {
    -moz-column-gap: var(--bs-spacer-5) !important;
         column-gap: var(--bs-spacer-5) !important;
  }
}
.healthy-gradiant {
  background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%);
  color: #fff !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

/*your custom css goes here*/
/* WhatsApp Floating Action Button (FAB) */
.whatsapp-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  z-index: 9999;
  transition: all 0.3s ease;
  text-decoration: none;
}

.whatsapp-fab:hover {
  background-color: #128C7E;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.6);
  transform: scale(1.1);
  text-decoration: none;
}

.whatsapp-fab i {
  font-size: 32px;
  color: #ffffff;
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
  .whatsapp-fab {
    width: 56px;
    height: 56px;
    bottom: 16px;
    right: 16px;
  }
  .whatsapp-fab i {
    font-size: 28px;
  }
}
/* Extra small devices */
@media (max-width: 480px) {
  .whatsapp-fab {
    width: 52px;
    height: 52px;
    bottom: 85px;
    right: 12px;
  }
  .whatsapp-fab i {
    font-size: 26px;
  }
}
/* Ensure FAB is above other floating elements */
.whatsapp-fab {
  z-index: 10000;
}

/* Animation for attention */
@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.7);
  }
  100% {
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  }
}
.whatsapp-fab {
  animation: whatsapp-pulse 2s infinite;
}

/* RTL Support */
[dir=rtl] .whatsapp-fab {
  right: auto;
  left: 20px;
}

@media (max-width: 768px) {
  [dir=rtl] .whatsapp-fab {
    left: 16px;
  }
}
@media (max-width: 480px) {
  [dir=rtl] .whatsapp-fab {
    left: 12px;
  }
}
.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.border-rounded-2 {
  border-radius: 20px !important;
}

.card {
  border-radius: 16px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}
.card .card-header {
  border-radius: 16px 16px 0 0 !important;
  background: #e8ecf0 !important;
}

.text-success {
  color: #0f9f63 !important;
}

.btn-success {
  background: #22c58b;
  border-color: #22c58b;
}

.btn-success:hover {
  background: #19b17d;
  border-color: #19b17d;
}

.btn-outline-success {
  color: #22c58b;
  border-color: #22c58b;
}

.btn-outline-success:hover {
  background: #22c58b;
  border-color: #22c58b;
  color: #fff;
}

.form-check-input:checked {
  background-color: #22c58b;
  border-color: #22c58b;
}

.sticky-top {
  position: sticky;
}

/* Simple Payment Methods Styles */
.payment-method-card {
  transition: all 0.3s ease;
  border: 2px solid #e0e0e0;
}

.payment-method-card:hover {
  border-color: #22c58b;
  box-shadow: 0 2px 8px rgba(34, 197, 139, 0.1) !important;
}

.form-control,
.form-select {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 10px 14px;
}

.form-control:focus,
.form-select:focus {
  border-color: #22c58b !important;
  box-shadow: 0 0 0 0.2rem rgba(34, 197, 139, 0.15) !important;
}

.payment-method-card {
  transition: all 0.2s ease;
}

.payment-method-card:hover {
  background: #f9fafb !important;
}