/* Mobile Car Battery Booking - Clean Multi-Step Form */

#mcbb-booking-form {
  --mcbb-primary-color: #204ce5;
  --mcbb-secondary-color: #6b7280;
  --mcbb-success-color: #10b981;
  --mcbb-bg-color: #f8fafc;
  --mcbb-border-color: #d1d5db;
  --mcbb-text-color: #374151;
  --mcbb-card-bg: #ffffff;
  --mcbb-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--mcbb-bg-color);
  border-radius: 12px;
  box-shadow: var(--mcbb-shadow);
  box-sizing: border-box;
  isolation: isolate;
}

/* Force isolation from Elementor */
#mcbb-booking-form * {
  box-sizing: border-box;
}

/* Header styling */
.mcbb-header {
  text-align: center;
  margin-bottom: 30px;
}

.mcbb-header h2 {
  color: #bf1e2e;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

/* Progress Steps (4 steps) */
.mcbb-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
}

.mcbb-progress::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: #e0e6ed;
  z-index: 1;
}

.mcbb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 120px;
}

.step-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e0e6ed;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.mcbb-step span {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  text-align: center;
}

.mcbb-step.active .step-circle {
  background: #3b82f6;
  color: white;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.mcbb-step.active span {
  color: #3b82f6;
  font-weight: 600;
}

.mcbb-step.completed .step-circle {
  background: #10b981;
  color: white;
}

.mcbb-step.completed span {
  color: #10b981;
  font-weight: 600;
}

/* Step Content */
.mcbb-step-content {
  display: block;
}

.mcbb-step-content.mcbb-hidden {
  display: none !important;
}

/* New card design with CSS Grid */
.mcbb-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  background: var(--mcbb-card-bg);
  border: 1px solid var(--mcbb-border-color);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 20px;
  min-height: 500px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.mcbb-card h3 {
  color: var(--mcbb-text-color);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  text-align: center;
  grid-row: 1;
}

/* New form content layout */
.mcbb-form-content {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  padding-right: 10px;
}

/* New form group design */
.mcbb-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcbb-form-group label {
  font-weight: 600;
  color: var(--mcbb-text-color);
  font-size: 14px;
  line-height: 1.4;
}

.mcbb-form-group select,
.mcbb-form-group input,
.mcbb-form-group textarea {
  padding: 14px 16px;
  border: 2px solid var(--mcbb-border-color);
  border-radius: 8px;
  font-size: 16px;
  background: var(--mcbb-card-bg);
  color: var(--mcbb-text-color);
  transition: all 0.2s ease;
  font-family: inherit;
}

.mcbb-form-group select:focus,
.mcbb-form-group input:focus,
.mcbb-form-group textarea:focus {
  outline: none;
  border-color: var(--mcbb-primary-color);
  box-shadow: 0 0 0 3px rgba(32, 76, 229, 0.1);
}

.mcbb-form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.mcbb-form-group select:disabled,
.mcbb-form-group input:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* New form row design */
.mcbb-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* New button container */
.mcbb-buttons {
  grid-row: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: auto;
}

/* New button design */
.mcbb-btn {
  padding: 14px 28px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  font-family: inherit;
}

.mcbb-btn-primary {
  background: var(--mcbb-primary-color);
  color: white;
  box-shadow: 0 2px 8px rgba(32, 76, 229, 0.3);
}

.mcbb-btn-primary:hover:not(:disabled) {
  background: #1a3fd1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32, 76, 229, 0.4);
}

.mcbb-btn-secondary {
  background: var(--mcbb-secondary-color);
  color: white;
}

.mcbb-btn-secondary:hover:not(:disabled) {
  background: #4b5563;
}

.mcbb-btn-success {
  background: var(--mcbb-success-color);
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.mcbb-btn-success:hover:not(:disabled) {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.mcbb-btn:disabled {
  background: #6c757d !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 0.7;
  transform: none !important;
  box-shadow: none !important;
}

/* Special Handling Notice Styles */
.mcbb-special-handling-notice {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  border: 2px solid #f39c12;
  border-radius: 8px;
  padding: 20px;
  margin: 15px 0;
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.2);
}

.mcbb-special-handling-notice p {
  margin: 10px 0;
  color: #856404;
  font-size: 16px;
  line-height: 1.5;
}

.mcbb-special-handling-notice p:first-child {
  font-size: 18px;
  font-weight: bold;
  color: #d68910;
  margin-bottom: 15px;
}

.mcbb-special-handling-notice ul {
  margin: 15px 0;
  padding-left: 20px;
}

.mcbb-special-handling-notice li {
  margin: 8px 0;
  color: #856404;
}

.mcbb-special-handling-notice a {
  color: #d68910;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.mcbb-special-handling-notice a:hover {
  color: #b7950b;
  text-decoration: underline;
}

/* Contact Pricing Notice Styles */
.mcbb-contact-pricing-notice {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 2px solid #2196f3;
  border-radius: 8px;
  padding: 20px;
  margin: 15px 0;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
}

.mcbb-contact-pricing-notice p {
  margin: 10px 0;
  color: #0d47a1;
  font-size: 16px;
  line-height: 1.5;
}

.mcbb-contact-pricing-notice p:first-child {
  font-size: 18px;
  font-weight: bold;
  color: #1565c0;
  margin-bottom: 15px;
}

.mcbb-contact-pricing-notice ul {
  margin: 15px 0;
  padding-left: 20px;
}

.mcbb-contact-pricing-notice li {
  margin: 8px 0;
  color: #0d47a1;
}

.mcbb-contact-pricing-notice a {
  color: #1565c0;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.mcbb-contact-pricing-notice a:hover {
  color: #0d47a1;
  text-decoration: underline;
}

/* Battery Info Display */
.mcbb-battery-info {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  margin-bottom: 20px;
}

.mcbb-battery-info p {
  margin: 10px 0;
  line-height: 1.5;
  color: #374151;
}

.mcbb-battery-info p strong {
  color: #1f2937;
}

.mcbb-battery-price {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #10b981 !important;
  background: #ecfdf5 !important;
  padding: 16px !important;
  border-radius: 8px !important;
  border: 2px solid #10b981 !important;
  text-align: center;
  margin: 15px 0 !important;
}

/* Step 4 specific styling */
#mcbb-step-4 .mcbb-card {
  height: 700px; /* Increased from 620px to accommodate order summary better */
}

/* Confirmation */
#mcbb-confirmation-section {
  text-align: center;
  padding: 20px 0;
}

.mcbb-success-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

#mcbb-confirmation-section h3 {
  color: #10b981;
  font-size: 2rem;
  margin-bottom: 25px;
}

.mcbb-confirmation-details {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  text-align: left;
}

.mcbb-confirmation-details h4 {
  color: #065f46;
  margin: 0 0 15px 0;
  font-size: 1.1rem;
}

.mcbb-confirmation-details p {
  margin: 8px 0;
  color: #374151;
  line-height: 1.5;
}

.mcbb-confirmation-details p strong {
  color: #1f2937;
}

.mcbb-success-message {
  background: #ecfdf5;
  padding: 15px;
  border-radius: 8px;
  margin: 20px 0;
  border: 1px solid #10b981;
  color: #065f46;
  font-weight: 500;
}

/* Messages */
.mcbb-success {
  background: #ecfdf5;
  color: #065f46;
  padding: 16px;
  border: 1px solid #10b981;
  border-radius: 8px;
  margin: 20px 0;
  font-weight: 500;
}

.mcbb-error {
  background: #fef2f2;
  color: #991b1b;
  padding: 16px;
  border: 1px solid #ef4444;
  border-radius: 8px;
  margin: 20px 0;
  font-weight: 500;
}

/* Order Summary */
.mcbb-order-summary {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0; /* Reduced margin */
}

.mcbb-order-summary h4 {
  color: #1e293b;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 15px 0;
}

.mcbb-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
}

.mcbb-summary-item:last-child {
  border-bottom: none;
  font-weight: 600;
  font-size: 1.1rem;
  color: #1e293b;
}

.mcbb-summary-label {
  color: #64748b;
}

.mcbb-summary-value {
  color: #1e293b;
  font-weight: 500;
}

/* Debug (hidden by default) */
.mcbb-debug {
  background: #f3f4f6;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 12px;
  display: none;
}

.mcbb-debug button {
  font-size: 12px;
  padding: 6px 12px;
  margin: 4px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  border-radius: 4px;
  cursor: pointer;
}

/* Show debug only when WP_DEBUG is enabled */
body.wp-debug .mcbb-debug {
  display: block;
}

/* Hidden utility */
.mcbb-hidden {
  display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
  #mcbb-booking-form {
    padding: 15px;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .mcbb-card {
    padding: 20px;
    min-height: auto;
    gap: 15px;
  }

  .mcbb-form-content {
    gap: 15px;
  }

  .mcbb-form-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .mcbb-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .mcbb-btn {
    width: 100%;
    padding: 16px 20px;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  #mcbb-booking-form {
    padding: 10px;
  }

  .mcbb-card {
    padding: 15px;
  }

  .mcbb-form-group select,
  .mcbb-form-group input,
  .mcbb-form-group textarea {
    padding: 12px 14px;
  }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .mcbb-card {
    min-height: 300px;
  }

  #mcbb-step-4 .mcbb-card {
    min-height: 350px;
  }

  .mcbb-form-content {
    max-height: 250px;
    overflow-y: auto;
  }

  .mcbb-header {
    margin-bottom: 10px;
  }

  .mcbb-progress {
    margin-bottom: 15px;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .mcbb-btn {
    min-height: 44px; /* Apple's recommended minimum touch target size */
  }

  .mcbb-form-group select,
  .mcbb-form-group input,
  .mcbb-form-group textarea {
    min-height: 44px;
  }

  .step-circle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Elementor Compatibility Fixes */
/* Reset Elementor's default padding and margins that might interfere */
.elementor-widget-shortcode .elementor-widget-container,
.elementor-widget-shortcode .elementor-shortcode {
  padding: 0 !important;
  margin: 0 !important;
}

/* Override any Elementor theme defaults */
.elementor-page .mcbb-form-group select:focus,
.elementor-page .mcbb-form-group input:focus,
.elementor-page .mcbb-form-group textarea:focus,
.elementor-widget-shortcode .mcbb-form-group select:focus,
.elementor-widget-shortcode .mcbb-form-group input:focus,
.elementor-widget-shortcode .mcbb-form-group textarea:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* COMPLETE REDESIGN - NEW APPROACH */
/* Reset everything for Elementor compatibility */
.elementor-widget-shortcode,
.elementor-widget-shortcode .elementor-widget-container,
.elementor-widget-shortcode .elementor-shortcode,
.elementor-section .elementor-widget-shortcode,
.elementor-column .elementor-widget-shortcode,
.elementor-page .mcbb-booking-form,
.elementor-page #mcbb-booking-form {
  all: unset;
  display: block;
  box-sizing: border-box;
}

/* New isolated form container */
#mcbb-booking-form {
  --mcbb-primary-color: #204ce5;
  --mcbb-secondary-color: #6b7280;
  --mcbb-success-color: #10b981;
  --mcbb-bg-color: #f8fafc;
  --mcbb-border-color: #d1d5db;
  --mcbb-text-color: #374151;
  --mcbb-card-bg: #ffffff;
  --mcbb-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--mcbb-bg-color);
  border-radius: 12px;
  box-shadow: var(--mcbb-shadow);
  box-sizing: border-box;
  isolation: isolate;
}

/* Force isolation from Elementor */
#mcbb-booking-form * {
  box-sizing: border-box;
}

/* New card design with CSS Grid */
.mcbb-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  background: var(--mcbb-card-bg);
  border: 1px solid var(--mcbb-border-color);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 20px;
  min-height: 500px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.mcbb-card h3 {
  color: var(--mcbb-text-color);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  text-align: center;
  grid-row: 1;
}

/* New form content layout */
.mcbb-form-content {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  padding-right: 10px;
}

/* New form group design */
.mcbb-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcbb-form-group label {
  font-weight: 600;
  color: var(--mcbb-text-color);
  font-size: 14px;
  line-height: 1.4;
}

.mcbb-form-group select,
.mcbb-form-group input,
.mcbb-form-group textarea {
  padding: 14px 16px;
  border: 2px solid var(--mcbb-border-color);
  border-radius: 8px;
  font-size: 16px;
  background: var(--mcbb-card-bg);
  color: var(--mcbb-text-color);
  transition: all 0.2s ease;
  font-family: inherit;
}

.mcbb-form-group select:focus,
.mcbb-form-group input:focus,
.mcbb-form-group textarea:focus {
  outline: none;
  border-color: var(--mcbb-primary-color);
  box-shadow: 0 0 0 3px rgba(32, 76, 229, 0.1);
}

.mcbb-form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.mcbb-form-group select:disabled,
.mcbb-form-group input:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* New form row design */
.mcbb-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* New button container */
.mcbb-buttons {
  grid-row: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: auto;
}

/* New button design */
.mcbb-btn {
  padding: 14px 28px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  font-family: inherit;
}

.mcbb-btn-primary {
  background: var(--mcbb-primary-color);
  color: white;
  box-shadow: 0 2px 8px rgba(32, 76, 229, 0.3);
}

.mcbb-btn-primary:hover:not(:disabled) {
  background: #1a3fd1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32, 76, 229, 0.4);
}

.mcbb-btn-secondary {
  background: var(--mcbb-secondary-color);
  color: white;
}

.mcbb-btn-secondary:hover:not(:disabled) {
  background: #4b5563;
}

.mcbb-btn-success {
  background: var(--mcbb-success-color);
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.mcbb-btn-success:hover:not(:disabled) {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.mcbb-btn:disabled {
  background: #6c757d !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 0.7;
  transform: none !important;
  box-shadow: none !important;
}

/* Mobile responsive redesign */
@media (max-width: 768px) {
  #mcbb-booking-form {
    padding: 15px;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .mcbb-card {
    padding: 20px;
    min-height: auto;
    gap: 15px;
  }

  .mcbb-form-content {
    gap: 15px;
  }

  .mcbb-form-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .mcbb-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .mcbb-btn {
    width: 100%;
    padding: 16px 20px;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  #mcbb-booking-form {
    padding: 10px;
  }

  .mcbb-card {
    padding: 15px;
  }

  .mcbb-form-group select,
  .mcbb-form-group input,
  .mcbb-form-group textarea {
    padding: 12px 14px;
  }
}

/* Elementor specific overrides for the new design */
.elementor-widget-shortcode #mcbb-booking-form,
.elementor-page #mcbb-booking-form {
  margin: 0 auto !important;
  padding: 20px !important;
  max-width: 900px !important;
  background: var(--mcbb-bg-color) !important;
  border-radius: 12px !important;
  box-shadow: var(--mcbb-shadow) !important;
}

.elementor-widget-shortcode .mcbb-card,
.elementor-page .mcbb-card {
  padding: 30px !important;
  margin-bottom: 20px !important;
  background: var(--mcbb-card-bg) !important;
  border: 1px solid var(--mcbb-border-color) !important;
  border-radius: 12px !important;
}

.elementor-widget-shortcode .mcbb-form-group,
.elementor-page .mcbb-form-group {
  gap: 8px !important;
}

.elementor-widget-shortcode .mcbb-form-group select,
.elementor-widget-shortcode .mcbb-form-group input,
.elementor-widget-shortcode .mcbb-form-group textarea,
.elementor-page .mcbb-form-group select,
.elementor-page .mcbb-form-group input,
.elementor-page .mcbb-form-group textarea {
  padding: 14px 16px !important;
  border: 2px solid var(--mcbb-border-color) !important;
  border-radius: 8px !important;
  background: var(--mcbb-card-bg) !important;
  color: var(--mcbb-text-color) !important;
}

.elementor-widget-shortcode .mcbb-buttons,
.elementor-page .mcbb-buttons {
  gap: 15px !important;
  justify-content: space-between !important;
}

.elementor-widget-shortcode .mcbb-btn,
.elementor-page .mcbb-btn {
  padding: 14px 28px !important;
  min-width: 140px !important;
  border: none !important;
  border-radius: 8px !important;
}