.ppom-2step-widget {
  max-width: 560px; /* Increased from 400px (40% more) */
  margin: 0 auto;
  font-family: inherit; /* Use WordPress theme font */
}

/* Form Styles - Updated to include steps */
.ppom-2step-form {
  background: white;
  border-radius: 8px; /* Increased from 6px */
  padding: 18px; /* Reduced from 22px (-20%) */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); /* Slightly enhanced */
  border: 1px solid #e9ecef;
  font-family: inherit; /* Use WordPress theme font */
}

/* Steps Indicator - Now inside form container */
.ppom-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  padding: 9px 14px; /* Reduced from 11px 17px (-20%) */
  border-radius: 8px; /* Increased from 6px */
  margin-bottom: 9px; /* Reduced from 11px (-20%) */
  position: relative;
  font-family: inherit; /* Use WordPress theme font */
}

/* Progress bar container - Now inside form container */
.ppom-progress-container {
  width: 100%;
  height: 6px; /* Increased from 4px */
  background: #e9ecef;
  border-radius: 3px; /* Increased from 2px */
  margin-bottom: 18px; /* Reduced from 22px (-20%) */
  overflow: hidden;
  position: relative;
}

.ppom-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #6c5ce7 0%, #5a4fcf 100%);
  border-radius: 3px; /* Increased from 2px */
  width: 0%;
  transition: width 0.8s ease;
  position: relative;
}

/* Loading bar animation effect */
.ppom-progress-bar::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: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Step 1 active - 20% fill */
.ppom-2step-form .ppom-steps:has(.ppom-step[data-step="1"].active) + .ppom-progress-container .ppom-progress-bar {
  width: 20%;
}

/* Step 2 active - 50% fill */
.ppom-2step-form .ppom-steps:has(.ppom-step[data-step="2"].active) + .ppom-progress-container .ppom-progress-bar {
  width: 50%;
}

/* Step 3 active - 100% fill */
.ppom-2step-form .ppom-steps:has(.ppom-step[data-step="3"].active) + .ppom-progress-container .ppom-progress-bar {
  width: 100%;
}

/* All steps completed - 100% fill */
.ppom-2step-form .ppom-steps:has(.ppom-step[data-step="3"].completed) + .ppom-progress-container .ppom-progress-bar {
  width: 100%;
}

/* Fallback classes for browsers without :has() support */
.ppom-2step-form .ppom-steps.step-1 + .ppom-progress-container .ppom-progress-bar {
  width: 20%;
}

.ppom-2step-form .ppom-steps.step-2 + .ppom-progress-container .ppom-progress-bar {
  width: 50%;
}

.ppom-2step-form .ppom-steps.step-3 + .ppom-progress-container .ppom-progress-bar {
  width: 100%;
}

.ppom-2step-form .ppom-steps.completed + .ppom-progress-container .ppom-progress-bar {
  width: 100%;
}

/* Steps - Updated for better Elementor control integration */
.ppom-step {
  display: flex;
  align-items: center;
  gap: 5px; /* Reduced from 6px (-20%) */
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  padding: 0 5px; /* Reduced from 6px (-20%) */
  background: none !important;
  background-color: transparent !important;
  font-family: inherit; /* Use WordPress theme font */
}

.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background: none !important;
  background-color: transparent !important;
}

/* IMPORTANT: Remove all default colors and let Elementor handle everything */
.ppom-2step-widget .step-icon i,
.ppom-2step-widget .step-icon svg {
  font-size: 20px; /* Increased from 14px */
  width: 20px; /* Increased from 14px */
  height: 20px; /* Increased from 14px */
  transition: all 0.3s ease;
  color: inherit; /* Inherit from parent or Elementor controls */
}

/* Ensure FontAwesome icons don't override colors */
.ppom-2step-widget .step-icon i[class*="fa-"],
.ppom-2step-widget .step-icon i[class*="fas "],
.ppom-2step-widget .step-icon i[class*="far "],
.ppom-2step-widget .step-icon i[class*="fab "] {
  color: inherit !important;
}

/* Ensure SVG icons inherit color properly */
.ppom-2step-widget .step-icon svg {
  fill: currentColor;
  color: inherit;
}

.ppom-2step-widget .step-icon svg path {
  fill: currentColor;
}

.step-title {
  font-size: 11px; /* Decreased from 15px (-30%) */
  font-weight: 500;
  transition: all 0.3s ease;
  color: inherit; /* Inherit from parent or Elementor controls */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-form-title {
  font-size: 15px; /* Decreased from 22px (-30%) */
  font-weight: 600;
  margin-bottom: 18px; /* Reduced from 22px (-20%) */
  color: #2d3436;
  text-align: center;
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-field-wrapper {
  margin-bottom: 14px; /* Reduced from 17px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px; /* Decreased from 17px (-30%) */
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 5px; /* Reduced from 6px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--ppom-tooltip-icon-color, #636e72);
  cursor: pointer;
  transition: color 0.2s ease;
}

.ppom-tooltip-icon:hover {
  color: var(--ppom-tooltip-icon-hover-color, #2d3436);
}

.ppom-tooltip-icon svg {
  width: 16px;
  height: 16px;
}

.ppom-field-description {
  font-size: 10px; /* Decreased from 14px (-30%) */
  color: #636e72;
  margin-bottom: 5px; /* Reduced from 6px (-20%) */
  margin-top: 0;
  font-family: inherit; /* Use WordPress theme font */
  background: #f8f9fa;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid #74b9ff;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  overflow: hidden;
}

.ppom-field-description.ppom-tooltip-content {
  max-height: 0;
  opacity: 0;
  padding: 0 12px;
  margin-bottom: 0;
  display: block;
  overflow: hidden;
}

.ppom-field-description.ppom-tooltip-content.show {
  max-height: 200px;
  opacity: 1;
  padding: 8px 12px;
  margin-bottom: 5px;
  display: block;
}

/* Input Wrapper with Icon - Larger */
.ppom-input-wrapper {
  position: relative;
}

.ppom-field-input {
  width: 100%;
  padding: 9px 11px; /* Reduced from 11px 14px (-20%) */
  border: 1px solid #e9ecef;
  border-radius: 6px; /* Increased from 4px */
  font-size: 12px; /* Decreased from 17px (-30%) */
  transition: all 0.3s ease;
  background: #ffffff !important;
  color: #2d3436 !important;
  box-sizing: border-box;
  height: 36px; /* Reduced from 45px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-field-input:focus {
  outline: none;
  border-color: #6c5ce7;
  box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.1);
  background: #ffffff !important;
}

/* Remove icons from text inputs - only keep for email and number */
.ppom-input-wrapper .ppom-input-icon {
  display: none;
}

/* Show icons only for email and number inputs */
/* Show icons for text, email and number inputs */
.ppom-field-input[type="text"] {
  padding-right: 31px; /* Reduced from 39px (-20%) */
}

.ppom-field-input[type="text"] + .ppom-input-icon {
  display: block;
  position: absolute;
  right: 9px; /* Reduced from 11px (-20%) */
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 12px; /* Decreased from 17px (-30%) */
  pointer-events: none;
}

.ppom-field-input[type="email"] {
  padding-right: 31px; /* Reduced from 39px (-20%) */
}

.ppom-field-input[type="email"] + .ppom-input-icon {
  display: block;
  position: absolute;
  right: 9px; /* Reduced from 11px (-20%) */
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 12px; /* Decreased from 17px (-30%) */
  pointer-events: none;
}

.ppom-field-input[type="number"] {
  padding-right: 31px; /* Reduced from 39px (-20%) */
}

.ppom-field-input[type="number"] + .ppom-input-icon {
  display: block;
  position: absolute;
  right: 9px; /* Reduced from 11px (-20%) */
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 12px; /* Decreased from 17px (-30%) */
  pointer-events: none;
}

/* Custom Select Styles - Larger */
.ppom-select-wrapper {
  position: relative;
}
.ppom-custom-select {
  position: relative;
  font-family: inherit; /* Use WordPress theme font */
}
.ppom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px; /* Reduced from 11px 14px (-20%) */
  border: 1px solid #e9ecef;
  border-radius: 6px; /* Increased from 4px */
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 36px; /* Reduced from 45px (-20%) */
  box-sizing: border-box;
  min-height: 36px; /* Reduced from 45px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}
.ppom-select-trigger:hover,
.ppom-custom-select.active .ppom-select-trigger {
  border-color: #6c5ce7;
  box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.1);
}
.ppom-select-text {
  font-size: 12px; /* Decreased from 17px (-30%) */
  color: #2d3436;
  font-family: inherit; /* Use WordPress theme font */
}
.ppom-select-arrow {
  color: #6c757d;
  width: 14px; /* Reduced from 17px (-20%) */
  height: 14px; /* Reduced from 17px (-20%) */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ppom-select-arrow svg {
  width: 14px; /* Reduced from 17px (-20%) */
  height: 14px; /* Reduced from 17px (-20%) */
  display: block;
}

/* Dropdown options (scrollable) with enhanced scrollbar */
.ppom-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #6c5ce7;
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 168px;     /* height limit before scrolling */
  overflow-y: auto;      /* vertical scroll */
  overflow-x: hidden;    /* prevent horizontal scroll */
  z-index: 1000;
  display: none;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.1);
  font-family: inherit;
  /* Enhanced scroll behavior */
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  /* Add padding to right to make room for scrollbar */
  padding-right: 2px;
}

/* Webkit browsers (Chrome, Safari, Edge) - Custom scrollbar */
.ppom-select-options::-webkit-scrollbar {
  width: 8px;
}

.ppom-select-options::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 4px;
  margin: 2px 0;
}

.ppom-select-options::-webkit-scrollbar-thumb {
  background: #6c5ce7;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.ppom-select-options::-webkit-scrollbar-thumb:hover {
  background: #5a4fcf;
}

.ppom-select-options::-webkit-scrollbar-thumb:active {
  background: #4c42b8;
}

/* Firefox - Custom scrollbar */
.ppom-select-options {
  scrollbar-width: thin;
  scrollbar-color: #6c5ce7 #f8f9fa;
}

/* Enhanced hover effect for better scroll UX */
.ppom-select-options:hover {
  scrollbar-color: #5a4fcf #f1f3f4;
}

.ppom-custom-select.active .ppom-select-options {
  display: block;
}

.ppom-select-option {
  padding: 9px 11px; /* Reduced from 11px 14px (-20%) */
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #f1f3f4;
  font-family: inherit; /* Use WordPress theme font */
  /* Ensure proper padding with scrollbar */
  margin-right: 2px;
}

.ppom-select-option:last-child {
  border-bottom: none;
}

.ppom-select-option:hover {
  background-color: #f8f7ff;
}

.ppom-select-option.selected {
  background-color: #6c5ce7;
  color: white;
}

.ppom-option-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 9px; /* Reduced from 11px (-20%) */
}

.ppom-option-title {
  font-weight: 500;
  font-size: 12px; /* Decreased from 17px (-30%) */
  margin-bottom: 1px;
  color: #2d3436;
  font-family: inherit; /* Use WordPress theme font */
}

/* Make option title white when selected */
.ppom-select-option.selected .ppom-option-title {
  color: white;
}

.ppom-option-weight {
  font-size: 10px; /* Decreased from 14px (-30%) */
  color: #636e72;
  line-height: 1.2;
  margin-top: 1px;
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-select-option.selected .ppom-option-weight {
  color: rgba(255, 255, 255, 0.8);
}

.ppom-option-price {
  font-weight: 600;
  font-size: 12px; /* Decreased from 17px (-30%) */
  color: #6c5ce7;
  white-space: nowrap;
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-select-option.selected .ppom-option-price {
  color: white;
}

/* Additional enhancements for better scroll experience */
.ppom-select-options {
  /* Ensure smooth scrolling on all devices */
  -webkit-overflow-scrolling: touch;
}

/* Focus styles for accessibility */
.ppom-select-option:focus {
  outline: 2px solid #6c5ce7;
  outline-offset: -2px;
  background-color: #f8f7ff;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .ppom-select-options::-webkit-scrollbar {
    width: 6px;
  }
  
  /* Make scrollbar more prominent on mobile */
  .ppom-select-options::-webkit-scrollbar-thumb {
    background: #5a4fcf;
  }
}

/* Mobile toggle functionality */
.ppom-mobile-toggle-container {
  display: none; /* Hidden by default on desktop */
  margin-top: 8px;
}

.ppom-show-more-btn,
.ppom-show-less-btn {
  background: none;
  border: 1px solid #6c757d;
  color: #6c757d;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.ppom-show-more-btn:hover,
.ppom-show-less-btn:hover {
  border-color: #6c5ce7;
  color: #6c5ce7;
}

.ppom-toggle-count {
  font-weight: 600;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  .ppom-mobile-toggle-container {
    display: block;
  }

  .ppom-radio-tag.ppom-mobile-hidden {
    display: none;
  }

  .ppom-radio-tag.ppom-mobile-shown {
    display: inline-flex;
  }

  .ppom-radio-tags-container {
    gap: 6px;
  }

  .ppom-radio-tag {
    padding: 6px 12px;
    font-size: 13px;
  }

  .ppom-radio-option {
    padding: 6px;
  }
}

/* Legacy radio option styles - keeping for backward compatibility */
.ppom-radio-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid #6c757d;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  background: white;
  position: relative;
  min-height: auto;
}

.ppom-radio-option:hover {
  border-color: #6c5ce7;
  background: rgba(108, 92, 231, 0.05);
}

.ppom-radio-option:has(.ppom-radio-input:checked) {
  border-color: #6c5ce7;
  background: #6c5ce7;
  color: white;
}

.ppom-radio-content {
  flex: none;
  font-family: inherit;
}

.ppom-radio-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}

.ppom-option-title {
  font-weight: 500;
  color: #2d3436;
  font-size: 12px;
  font-family: inherit;
  margin: 0;
}

.ppom-radio-option:has(.ppom-radio-input:checked) .ppom-option-title {
  color: white;
}

.ppom-option-weight {
  font-size: 10px;
  color: #636e72;
  line-height: 1.2;
  margin-top: 0;
  font-family: inherit;
}

.ppom-radio-option:has(.ppom-radio-input:checked) .ppom-option-weight {
  color: rgba(255, 255, 255, 0.8);
}

.ppom-option-price {
  font-weight: 600;
  color: #6c5ce7;
  font-size: 12px;
  white-space: nowrap;
  font-family: inherit;
  margin: 0;
}

.ppom-radio-option:has(.ppom-radio-input:checked) .ppom-option-price {
  color: white;
}

/* Checkbox Group - Horizontal Pills */
.ppom-checkbox-group.ppom-checkbox-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: inherit;
}

.ppom-checkbox-pill {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-family: inherit;
}

.ppom-checkbox-pill .ppom-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.ppom-checkbox-pill-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: #f1f3f4;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
}

.ppom-checkbox-pill:hover .ppom-checkbox-pill-text {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.ppom-checkbox-pill .ppom-checkbox-input:checked + .ppom-checkbox-pill-text {
  background: #ddd6fe;
  color: #5b21b6;
  border-color: #8b5cf6;
}

.ppom-checkbox-pill .ppom-checkbox-input:checked + .ppom-checkbox-pill-text:hover {
  background: #c4b5fd;
  border-color: #7c3aed;
}

.ppom-pill-price {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
}

/* Keep original checkbox styles for backward compatibility */
.ppom-checkbox-group:not(.ppom-checkbox-pills) {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: inherit;
}

.ppom-checkbox-group:not(.ppom-checkbox-pills) .ppom-checkbox-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.ppom-checkbox-group:not(.ppom-checkbox-pills) .ppom-checkbox-option:hover {
  background: #f8f9fa;
}

.ppom-checkbox-group:not(.ppom-checkbox-pills) .ppom-checkbox-input {
  margin: 0;
  accent-color: #6c5ce7;
  width: 16px;
  height: 16px;
}

.ppom-checkbox-group:not(.ppom-checkbox-pills) .ppom-checkbox-label {
  flex: 1;
  font-weight: 500;
  color: #2d3436;
  font-size: 12px;
  font-family: inherit;
}

/* Mobile toggle functionality for checkboxes */
.ppom-checkbox-pills .ppom-mobile-toggle-container {
  display: none; /* Hidden by default on desktop */
  margin-top: 8px;
}

.ppom-checkbox-show-more,
.ppom-checkbox-show-less {
  background: none;
  border: 1px solid #6c757d;
  color: #6c757d;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.ppom-checkbox-show-more:hover,
.ppom-checkbox-show-less:hover {
  border-color: #6c5ce7;
  color: #6c5ce7;
}

/* Mobile-specific styles for checkboxes */
@media (max-width: 768px) {
  .ppom-checkbox-pills .ppom-mobile-toggle-container {
    display: block;
  }

  .ppom-checkbox-pill.ppom-mobile-hidden {
    display: none;
  }

  .ppom-checkbox-pill.ppom-mobile-shown {
    display: inline-flex;
  }

  .ppom-checkbox-pills-container {
    gap: 6px;
  }

  .ppom-checkbox-pill {
    font-size: 13px;
  }

  .ppom-checkbox-pill-text {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* Quantities Group - Larger */
.ppom-quantities-group {
  display: flex;
  flex-direction: column;
  gap: 9px; /* Reduced from 11px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-quantity-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px; /* Reduced from 11px (-20%) */
  border: 1px solid #e9ecef;
  border-radius: 6px; /* Increased from 4px */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-quantity-label {
  font-weight: 500;
  color: #2d3436;
  font-size: 12px; /* Decreased from 17px (-30%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-quantity-input {
  width: 56px; /* Reduced from 70px (-20%) */
  padding: 5px 6px; /* Reduced from 6px 8px (-20%) */
  border: 1px solid #ddd;
  border-radius: 4px; /* Increased from 3px */
  text-align: center;
  font-size: 12px; /* Decreased from 17px (-30%) */
  background: #ffffff !important;
  color: #2d3436 !important;
  height: 27px; /* Reduced from 34px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

/* Price Display - Larger */
.ppom-price-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px; /* Reduced from 17px (-20%) */
  background: #f8f9fa;
  border-radius: 6px; /* Increased from 4px */
  margin: 14px 0; /* Reduced from 17px (-20%) */
  border: 1px solid #e9ecef;
  font-family: inherit; /* Use WordPress theme font */
}

.price-label {
  font-size: 14px; /* Decreased from 20px (-30%) */
  font-weight: 600;
  color: #2d3436;
  font-family: inherit; /* Use WordPress theme font */
}

.price-value {
  font-size: 15px; /* Decreased from 22px (-30%) */
  font-weight: 700;
  color: #2d3436;
  font-family: inherit; /* Use WordPress theme font */
}

/* Ensure the price display flexbox works properly */
.ppom-price-display:has(.price-value-container) {
  align-items: flex-start;
}

/* Step 1 Price Display with Discount */
.price-value-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.price-original {
  font-size: 12px; /* Smaller than discounted price */
  font-weight: 500;
  color: #636e72;
  text-decoration: line-through;
  font-family: inherit;
}

.price-discounted {
  font-size: 15px; /* Same as original price-value */
  font-weight: 700;
  color: #2d3436;
  font-family: inherit;
}

/* Step 2 Styles - Larger */
.ppom-section-title {
  font-size: 14px; /* Decreased from 20px (-30%) */
  font-weight: 600;
  color: #2d3436;
  margin: 0 0 9px 0; /* Reduced from 11px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

/* Order Items Section - Larger */
.ppom-order-items-section {
  margin-bottom: 18px; /* Reduced from 22px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-order-item-card {
  display: flex;
  align-items: center;
  gap: 11px; /* Reduced from 14px (-20%) */
  padding: 11px; /* Reduced from 14px (-20%) */
  border: 1px solid #e9ecef;
  border-radius: 8px; /* Increased from 6px */
  background: white;
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-product-icon {
  width: 31px; /* Reduced from 39px (-20%) */
  height: 31px; /* Reduced from 39px (-20%) */
  background: #6c5ce7;
  border-radius: 8px; /* Increased from 6px */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px; /* Reduced from 20px (-20%) */
  flex-shrink: 0;
}

.ppom-product-details {
  flex: 1;
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-product-name {
  font-size: 13px; /* Decreased from 18px (-30%) */
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 2px; /* Reduced from 3px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-product-meta {
  font-size: 11px; /* Decreased from 15px (-30%) */
  color: #636e72;
  line-height: 1.3;
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-product-weight {
  font-size: 10px; /* Decreased from 14px (-30%) */
  color: #636e72;
  line-height: 1.2;
  margin-top: 2px; /* Reduced from 3px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-product-price {
  font-size: 13px; /* Decreased from 18px (-30%) */
  font-weight: 700;
  color: #2d3436;
  font-family: inherit; /* Use WordPress theme font */
}

/* Applied Coupons - Larger */
.ppom-applied-coupons {
  margin-bottom: 14px; /* Reduced from 17px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-coupon-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px; /* Reduced from 11px 14px (-20%) */
  background: #f8f7ff;
  border: 1px solid #6c5ce7;
  border-radius: 6px; /* Increased from 4px */
  margin-bottom: 6px; /* Reduced from 8px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-coupon-info {
  display: flex;
  align-items: center;
  gap: 6px; /* Reduced from 8px (-20%) */
}

.ppom-coupon-icon {
  font-size: 12px; /* Decreased from 17px (-30%) */
  margin-right: 2px; /* Reduced from 3px (-20%) */
}

.ppom-coupon-name {
  font-weight: 600;
  color: #6c5ce7;
  font-size: 12px; /* Decreased from 17px (-30%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-coupon-discount {
  font-weight: 600;
  color: #2d3436;
  font-size: 12px; /* Decreased from 17px (-30%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-discount-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px; /* Reduced from 8px (-20%) */
  padding: 3px 6px; /* Reduced from 4px 8px (-20%) */
  background: rgba(108, 92, 231, 0.1);
  color: #6c5ce7;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  margin-top: 6px; /* Reduced from 8px (-20%) */
  font-family: inherit;
}

.ppom-discount-text {
  display: flex;
  align-items: center;
  gap: 5px; /* Reduced from 6px (-20%) */
}

.ppom-coupon-toggle-btn {
  background: none;
  border: none;
  color: #6c5ce7;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: inherit;
  white-space: nowrap;
}

.ppom-coupon-toggle-btn:hover {
  color: #5a4fcf;
}

/* Promo Code Section - Larger */
.ppom-promo-section {
  margin-bottom: 18px; /* Reduced from 22px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-promo-section.hidden {
  display: none;
}

.ppom-promo-input-group {
  display: flex;
  gap: 6px; /* Reduced from 8px (-20%) */
}

.ppom-promo-input {
  flex: 1;
  padding: 9px 11px; /* Reduced from 11px 14px (-20%) */
  border: 1px solid #e9ecef;
  border-radius: 6px; /* Increased from 4px */
  font-size: 12px; /* Decreased from 17px (-30%) */
  background: #ffffff !important;
  color: #2d3436 !important;
  height: 36px; /* Reduced from 45px (-20%) */
  box-sizing: border-box;
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-promo-input:focus {
  outline: none;
  border-color: #6c5ce7;
  box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.1);
}

.ppom-apply-promo-btn {
  padding: 9px 18px; /* Reduced from 11px 22px (-20%) */
  background: #6c5ce7;
  color: white;
  border: none;
  border-radius: 6px; /* Increased from 4px */
  font-size: 12px; /* Decreased from 17px (-30%) */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 36px; /* Reduced from 45px (-20%) */
  white-space: nowrap;
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-apply-promo-btn:hover {
  background: #5a4fcf;
}

/* Total Section - Larger */
.ppom-total-section {
  padding: 14px 0; /* Reduced from 17px (-20%) */
  border-top: 1px solid #e9ecef;
  margin-bottom: 18px; /* Reduced from 22px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ppom-total-label {
  font-size: 15px; /* Decreased from 21px (-30%) */
  font-weight: 600;
  color: #2d3436;
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-total-value {
  font-size: 15px; /* Decreased from 22px (-30%) */
  font-weight: 700;
  color: #2d3436;
  font-family: inherit; /* Use WordPress theme font */
}

/* Subtotal with strikethrough - Larger */
.ppom-subtotal-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px; /* Reduced from 8px (-20%) */
  margin-bottom: 6px; /* Reduced from 8px (-20%) */
}

.ppom-subtotal-label {
  font-size: 13px; /* Decreased from 18px (-30%) */
  font-weight: 500;
  color: #636e72;
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-subtotal-value {
  font-size: 13px; /* Decreased from 18px (-30%) */
  font-weight: 500;
  color: #636e72;
  text-decoration: line-through;
  font-family: inherit; /* Use WordPress theme font */
}

/* Email Section - Larger */
.ppom-email-section {
  margin-bottom: 14px; /* Reduced from 17px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-email-input-wrapper {
  position: relative;
}

.ppom-email-input {
  width: 100%;
  padding: 11px 14px; /* Reduced from 14px 17px (-20%) */
  padding-right: 39px; /* Reduced from 49px (-20%) */
  border: 1px solid #e9ecef;
  border-radius: 8px; /* Increased from 6px */
  font-size: 13px; /* Decreased from 18px (-30%) */
  background: #ffffff !important;
  color: #2d3436 !important;
  box-sizing: border-box;
  height: 45px; /* Reduced from 56px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-email-input:focus {
  outline: none;
  border-color: #6c5ce7;
  box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.1);
}

.ppom-email-icon {
  position: absolute;
  right: 11px; /* Reduced from 14px (-20%) */
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 11px; /* Reduced from 14px (-20%) */
  pointer-events: none;
}

/* Payment Methods - Larger */
.ppom-payment-section {
  margin-bottom: 18px; /* Reduced from 22px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-payment-methods {
  display: flex;
  flex-direction: column;
  gap: 6px; /* Reduced from 8px (-20%) */
}

.ppom-payment-method {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 11px 14px; /* Reduced from 14px 17px (-20%) */
  border: 2px solid #e9ecef;
  border-radius: 8px; /* Increased from 6px */
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  font-size: 13px; /* Decreased from 18px (-30%) */
  font-weight: 600;
  color: #2d3436;
  text-decoration: none;
  min-height: 45px; /* Reduced from 56px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-payment-method:hover {
  border-color: #6c5ce7;
  transform: translateY(-1px);
  box-shadow: 0 2px 9px rgba(108, 92, 231, 0.2); /* Reduced from 3px 11px (-20%) */
  color: #2d3436;
  text-decoration: none;
}

.ppom-payment-method-content {
  display: flex;
  align-items: center;
  gap: 9px; /* Reduced from 11px (-20%) */
  width: 100%;
}

.ppom-payment-method-icon {
  width: 27px; /* Reduced from 34px (-20%) */
  height: 27px; /* Reduced from 34px (-20%) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 6px; /* Increased from 4px */
  flex-shrink: 0;
}

.ppom-payment-method-icon img {
  max-width: 20px; /* Reduced from 25px (-20%) */
  max-height: 20px; /* Reduced from 25px (-20%) */
  object-fit: contain;
}

.ppom-payment-method-text {
  flex: 1;
  text-align: left;
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-payment-method-name {
  font-size: 13px; /* Decreased from 18px (-30%) */
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 1px;
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-payment-method-description {
  font-size: 10px; /* Decreased from 14px (-30%) */
  color: #636e72;
  font-weight: 400;
  font-family: inherit; /* Use WordPress theme font */
}

/* Navigation Buttons - Centered and Expanded */
.ppom-navigation-buttons {
  display: flex;
  gap: 9px; /* Reduced from 11px (-20%) */
  justify-content: center;
  align-items: center;
  margin-top: 18px; /* Reduced from 22px (-20%) */
  width: 100%;
}

/* Buttons - Updated for better Elementor control integration */
.ppom-next-button,
.ppom-back-button {
  padding: 14px 27px; /* Reduced from 17px 34px (-20%) */
  border: none;
  border-radius: 8px; /* Increased from 6px */
  font-size: 14px; /* Decreased from 20px (-30%) */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 50px; /* Reduced from 62px (-20%) */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-next-button {
  background: #6c5ce7;
  width: 100%;
  max-width: 224px; /* Reduced from 280px (-20%) */
  margin: 0 auto;
}

/* For step 1, center the next button in its own container */
.ppom-step-content[data-step="1"] .ppom-next-button {
  display: block;
  margin: 18px auto 0 auto; /* Reduced from 22px (-20%) */
  width: 100%;
  max-width: 224px; /* Reduced from 280px (-20%) */
}

.ppom-next-button:hover {
  background: #5a4fcf;
  transform: translateY(-1px);
  box-shadow: 0 2px 9px rgba(108, 92, 231, 0.3); /* Reduced from 3px 11px (-20%) */
}

.ppom-back-button {
  background: #74b9ff;
  padding: 9px 18px; /* Reduced from 11px 22px (-20%) */
  min-height: 40px; /* Reduced from 50px (-20%) */
}

.ppom-back-button:hover {
  background: #0984e3;
  transform: translateY(-1px);
  box-shadow: 0 2px 9px rgba(116, 185, 255, 0.3); /* Reduced from 3px 11px (-20%) */
}

.ppom-next-button:active,
.ppom-back-button:active {
  transform: translateY(0);
}

.ppom-next-button:disabled,
.ppom-back-button:disabled {
  background: #ddd;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Payment Container - Larger */
.ppom-payment-container {
  min-height: 134px; /* Reduced from 168px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

/* Loading State - Larger */
.ppom-loading {
  text-align: center;
  padding: 27px 14px; /* Reduced from 34px 17px (-20%) */
  font-family: inherit; /* Use WordPress theme font */
}

.loading-spinner {
  width: 27px; /* Reduced from 34px (-20%) */
  height: 27px; /* Reduced from 34px (-20%) */
  border: 3px solid #f3f3f3; /* Increased from 2px */
  border-top: 3px solid #6c5ce7; /* Increased from 2px */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 14px; /* Reduced from 17px (-20%) */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ppom-loading h3 {
  color: #2d3436;
  margin-bottom: 6px; /* Reduced from 8px (-20%) */
  font-size: 14px; /* Decreased from 20px (-30%) */
  font-family: inherit; /* Use WordPress theme font */
}

.ppom-loading p {
  color: #636e72;
  margin: 0;
  font-size: 12px; /* Decreased from 17px (-30%) */
  font-family: inherit; /* Use WordPress theme font */
}

/* Responsive Design - Updated for larger sizes */
@media (max-width: 768px) {
  .ppom-2step-widget {
    margin: 0 11px; /* Reduced from 14px (-20%) */
  }

  .ppom-steps {
    padding: 6px 11px; /* Reduced from 8px 14px (-20%) */
  }

  /* Hide step text on mobile, keep only icons */
  .step-title {
    display: none;
  }

  .step-icon i,
  .step-icon svg {
    font-size: 18px; /* Reduced from 22px (-20%) */
    width: 18px; /* Reduced from 22px (-20%) */
    height: 18px; /* Reduced from 22px (-20%) */
  }

  /* Adjust step spacing since text is hidden */
  .ppom-step {
    gap: 0;
    padding: 0 9px; /* Reduced from 11px (-20%) */
  }

  .ppom-2step-form {
    padding: 14px; /* Reduced from 17px (-20%) */
  }

  .ppom-form-title {
    font-size: 14px; /* Decreased from 20px (-30%) */
  }

  .ppom-radio-option {
    padding: 6px;
  }

  .ppom-quantity-option {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px; /* Reduced from 6px (-20%) */
  }

  .ppom-quantity-input {
    width: 100%;
  }

  .ppom-navigation-buttons {
    flex-direction: column;
  }

  .ppom-option-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .ppom-radio-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ppom-order-item-card {
    flex-direction: row;
    text-align: left;
    gap: 8px; /* Reduced from 10px (-20%) */
  }

  /* Ensure the product icon stays properly sized on mobile */
  .ppom-product-icon {
    width: 27px; /* Reduced from 34px (-20%) */
    height: 27px;
    font-size: 14px; /* Reduced from 18px (-20%) */
  }

  /* Ensure price stays on the right on mobile */
  .ppom-product-price {
    flex-shrink: 0;
    text-align: right;
  }

  .ppom-promo-input-group {
    flex-direction: column;
  }
}

/* Error States - Larger */
.ppom-field-input.error,
.ppom-email-input.error,
.ppom-promo-input.error {
  border-color: #e17055;
  box-shadow: 0 0 0 1px rgba(225, 112, 85, 0.1);
}

.ppom-error-message {
  color: #e17055;
  font-size: 10px; /* Decreased from 14px (-30%) */
  margin-top: 3px; /* Reduced from 4px (-20%) */
  display: block;
  font-family: inherit; /* Use WordPress theme font */
}

/* Success States - Larger */
.ppom-success-message {
  background: #d4edda;
  color: #155724;
  padding: 9px 11px; /* Reduced from 11px 14px (-20%) */
  border-radius: 4px; /* Increased from 3px */
  margin-bottom: 14px; /* Reduced from 17px (-20%) */
  border: 1px solid #c3e6cb;
  font-size: 12px; /* Decreased from 17px (-30%) */
  font-family: inherit; /* Use WordPress theme font */
}

/* Global Error Messages - Larger */
.ppom-error-message-global {
  background: #f8d7da;
  color: #721c24;
  padding: 9px 11px; /* Reduced from 11px 14px (-20%) */
  border-radius: 4px; /* Increased from 3px */
  margin-bottom: 14px; /* Reduced from 17px (-20%) */
  border: 1px solid #f5c6cb;
  font-size: 12px; /* Decreased from 17px (-30%) */
  font-family: inherit; /* Use WordPress theme font */
}

/* Global Success Messages - Larger */
.ppom-success-message-global {
  background: #d4edda;
  color: #155724;
  padding: 9px 11px; /* Reduced from 11px 14px (-20%) */
  border-radius: 4px; /* Increased from 3px */
  margin-bottom: 14px; /* Reduced from 17px (-20%) */
  border: 1px solid #c3e6cb;
  font-size: 12px; /* Decreased from 17px (-30%) */
  font-family: inherit; /* Use WordPress theme font */
  animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-6px); /* Reduced from -7px (-20%) */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}