/**
 * Consultations Plugin Main Stylesheet
 */

/* Main Container */
.consultation-form-container {
  font-family: inherit;
  font-size: 22px;
  font-weight: 400;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.consultation-form-container h2 {
  color: #333;
  margin-bottom: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  padding: 20px 20px 0;
}

/* Horizontal Layout */
.consultation-layout {
  display: flex;
  min-height: 600px;
}

/* Left Section - Form */
.consultation-form-section {
  flex: 1;
  padding: 30px;
  background: #fff;
  border-right: 1px solid #e5e7eb;
}

/* Tabbed Interface */
.consultation-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tab-header {
  display: flex;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 30px;
}

.tab-btn {
  flex: 1;
  padding: 15px 20px;
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #999c9f;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.tab-btn:hover {
  color: #999c9f;
  background: #f8fafc;
}

.tab-btn.active {
  color: #999c9f;
  border-bottom-color: #d1d5db;
  background: #f8fafc;
}

.tab-content {
  display: none;
  flex: 1;
}

.tab-content.active {
  display: block;
}

/* Consultation Types - Horizontal Layout */
.consultation-types h3 {
  margin: 0 0 20px 0;
  font-size: 22px;
  font-weight: 400;
  color: #3e3e40;
}

.type-options-horizontal {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.type-option-horizontal {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  color: #999c9f;
}

.type-option-horizontal:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.type-option-horizontal.selected {
  border-color: #dc2626;
  background: #dc2626;
  color: white;
  font-weight: 600;
}

/* Birth Date Field Styling */
.birth-date-help {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #6b7280;
  transition: color 0.3s ease;
}

input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border-radius: 4px;
  margin-left: 5px;
  opacity: 0.6;
  filter: invert(0.8);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  filter: invert(0.6);
}

.type-option-horizontal.urgent {
  border-color: #dc2626;
}

.type-option-horizontal.urgent:hover {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
}

.type-option-horizontal.urgent.selected {
  border-color: #dc2626;
  background: #dc2626;
  color: white;
}

.type-duration {
  display: block;
  text-transform: capitalize;
}

/* Location Info */
.location-info {
  margin-top: 30px;
}

.location-info h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 400;
  color: #3e3e40;
}

.location-details {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.location-icon {
  font-size: 20px;
  margin-right: 15px;
  flex-shrink: 0;
}

.location-text {
  font-size: 14px;
  line-height: 1.5;
  color: #3e3e40;
}

/* Payment Summary */
.payment-summary {
  background: #f9fafb;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
  border: 1px solid #e5e7eb;
}

.payment-summary h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #3e3e40;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-item.total {
  font-weight: 400;
  font-size: 16px;
  color: #059669;
  border-top: 2px solid #e5e7eb;
  margin-top: 8px;
  padding-top: 12px;
}

/* Form Elements */
.consultation-form .form-group {
  margin-bottom: 20px;
}

.consultation-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #3e3e40;
  font-size: 14px;
}

.consultation-form input,
.consultation-form textarea,
.consultation-form select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  background: #fff;
}

.consultation-form input:focus,
.consultation-form textarea:focus,
.consultation-form select:focus {
  outline: none;
  border-color: #d1d5db;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.consultation-btn {
  width: 100%;
  background: #ee202e;
  color: white;
  border: none;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.consultation-btn:hover {
  background: #2563eb;
}

.consultation-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* Right Section - Calendar */
.consultation-calendar-section {
  flex: 1;
  padding: 30px;
  background: #f9fafb;
  min-width: 0; /* Prevent flex item from overflowing */
  overflow: visible; /* Allow content to show properly */
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: transparent !important;
}

.calendar-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: #3e3e40;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-btn {
  background: #fff;
  border: 1px solid #d1d5db;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.nav-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

#current-month-year {
  font-weight: 600;
  color: #3e3e40;
  min-width: 140px;
  text-align: center;
}

/* Simple Calendar Styles */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: #f0f0f0;
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
}

.calendar-day {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 400;
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.calendar-day:hover:not(.past):not(.empty) {
  background: #ee202e;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(238,32,46,0.3);
}

.calendar-day.today {
  background: #28a745;
  color: white;
  font-weight: 600;
}

.calendar-day.selected {
  background: #dc3545;
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(220,53,69,0.3);
}

.calendar-day.past {
  background: #f8f9fa;
  color: #999c9f;
  cursor: not-allowed;
}

.calendar-day.disabled {
  background: #ffe6e6;
  color: #cc0000;
  cursor: not-allowed;
  opacity: 0.6;
}

.calendar-day.disabled:hover {
  background: #ffe6e6;
  transform: none;
  box-shadow: none;
}

.calendar-day.empty {
  background: transparent;
  border: none;
  cursor: default;
}

/* Time Selection */
.time-selection {
  margin-top: 20px;
}

.time-selection h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: #3e3e40;
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.time-slot {
  background: #fff;
  border: 2px solid #e5e7eb;
  padding: 12px 16px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  font-size: 14px;
}

.time-slot:hover {
  border-color: #d1d5db;
  background: #dbeafe;
  color: #1e40af;
}

.time-slot.selected {
  background: #dc2626;
  border-color: #dc2626;
  color: white;
}

/* Timezone Info */
.timezone-info {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.timezone-info label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #3e3e40;
  font-size: 14px;
}

.timezone-info select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
}

/* Error Messages */
.consultation-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.consultation-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .consultation-layout {
    flex-direction: column;
  }
  
  .consultation-form-section {
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .user-info {
    flex-direction: column;
    text-align: center;
  }
  
  .user-avatar {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .calendar-nav {
    gap: 10px;
  }
  
  #current-month-year {
    min-width: 120px;
    font-size: 14px;
  }
  
  .time-slots {
    grid-template-columns: 1fr;
  }
}

/* Booking System Mobile Responsiveness */
@media (max-width: 980px) {
  .booking-container {
    padding: 8px;
    margin: 10px auto;
  }
  
  .booking-columns {
    grid-template-columns: 1fr !important;
    gap: 15px;
  }
  
  .booking-sidebar {
    order: 1;
  }
  
  .booking-calendar {
    order: 2;
  }
  
  .booking-times {
    order: 3;
  }
  
  .booking-step-2 {
    order: 2;
    grid-column: 1 !important;
    margin-top: 15px;
  }
  
  .booking-checkout {
    order: 2;
    grid-column: 1 !important;
    margin-top: 15px;
  }
  
  .booking-success {
    order: 2;
    grid-column: 1 !important;
    margin-top: 15px;
  }
}

@media (max-width: 600px) {
  .booking-container {
    margin: 5px;
    padding: 5px;
    border-radius: 8px;
  }
  
  .booking-sidebar {
    padding: 12px;
  }
  
  .booking-step-2,
  .booking-checkout {
    padding: 16px;
  }
  
  .form-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .form-actions .back-button,
  .form-actions .complete-button {
    width: 100%;
  }
  
  .checkout-actions {
    justify-content: center;
  }
  
  .checkout-actions .back-button {
    width: 100%;
  }
}

/* Error state for time slots */
.booking-time-item.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
  font-weight: 500;
}

/* ===== MODERN BOOKING UI STYLES ===== */
/* Moved from inline styles in shortcodes.php for better maintainability */

.booking-container{font-family:inherit;font-size:16px;font-weight:400;max-width:1200px;margin:20px auto;padding:12px;background:#f5f7fb;border-radius:12px}
.booking-columns{display:grid;grid-template-columns:380px 1fr 280px;gap:20px}
.booking-sidebar{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px}
.user-info{display:flex;align-items:center;margin-bottom:20px}
.target-logo{max-width:120px;height:auto;margin-right:15px}
.target-logo img{width:100%;height:auto;max-height:60px;object-fit:contain}
.booking-title{margin:6px 0 12px 0;font-size:18px;font-weight:400;color:#111827}
.duration-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.duration-chip{border:1px solid #e5e7eb;background:#fff;border-radius:6px;padding:8px 12px;font-weight:400;color:#999c9f;cursor:pointer;font-size:13px;min-width:85px;text-align:center;display:flex;flex-direction:column;align-items:center;margin:1px;transition:all 0.2s ease;pointer-events:auto;z-index:10;position:relative}
.duration-chip:hover{background:#f8f9fa;border-color:#d1d5db;color:#3e3e40}
.duration-chip.active{background:#ee202e;border-color:#ee202e;color:#fff;font-weight:500}
.duration-chip.disabled{background:#f5f5f5;border-color:#d1d5db;color:#9ca3af;cursor:not-allowed;opacity:0.6}
.duration-chip.disabled:hover{background:#f5f5f5;border-color:#d1d5db;color:#9ca3af}
.duration-chip.active.disabled{background:#ee202e;border-color:#ee202e;color:#fff;opacity:0.85}
.duration-chip.active.disabled:hover{background:#ee202e;border-color:#ee202e;color:#fff}
.duration-chip .type-duration{font-weight:500;line-height:1.2}
.duration-chip .type-price{font-size:11px;font-weight:400;margin-top:2px;opacity:0.9}
.location-meta{display:flex;align-items:center;color:#999c9f;margin:8px 0;font-size:14px}
.location-meta .icon{margin-right:6px}
.service-title{margin-top:12px;font-size:18px;font-weight:400;color:#111827}
.user-selections{margin-top:12px;padding:12px;background:#f8f9fa;border-radius:6px;border:1px solid #e5e7eb}
.selection-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding:4px 0}
.selection-item:last-child{margin-bottom:0}
.selection-label{font-weight:500;color:#999c9f;font-size:13px}
.selection-value{font-weight:400;color:#3e3e40;font-size:13px}
.booking-calendar .calendar-card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:15px}
.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:transparent !important}
.calendar-header h3{margin:0;font-size:16px;font-weight:400;color:#333;text-align:center;flex:1}
.calendar-header .nav-btn{background:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;width:30px;height:30px;font-size:14px;color:#495057;cursor:pointer;transition:all 0.2s}
.calendar-header .nav-btn:hover{background:#e9ecef}
.booking-times{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px}
.times-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.selected-day{font-weight:400;color:#3e3e40;font-size:14px}

.booking-time-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow:auto}
.booking-time-item{border:1px solid #e5e7eb;border-radius:8px;padding:15px 20px;color:#3e3e40;cursor:pointer;font-size:16px;font-weight:400;width:100%;text-align:left;margin-bottom:0}
.booking-time-item:hover{background:#f8fafc;border-color:#d1d5db}
.booking-time-item.selected{border-color:#d1d5db;box-shadow:0 0 0 2px rgba(209,213,219,.12);background:#f8f9fa}
.time-slot-actions{margin-top:15px;text-align:center}
.time-slot-next-button{background:#ee202e;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.2s ease;min-width:120px}
.time-slot-next-button:hover{background:#d41b2c;transform:translateY(-1px);box-shadow:0 4px 12px rgba(238,32,46,0.3)}
.time-slot-next-button:active{transform:translateY(0)}

@media (max-width: 980px){
    .booking-columns{grid-template-columns:1fr}
    .booking-step-2{grid-column:1;margin-top:20px}
    .booking-checkout{grid-column:1;margin-top:20px}
    .booking-success{grid-column:1;margin-top:20px}
}

/* Multi-step Form Styles */
.booking-step-2{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:20px;min-height:400px;align-self:start}
.step-header{text-align:center;margin-bottom:20px}
.step-indicator{display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#e5e7eb;color:#6b7280;font-weight:600;font-size:14px}
.step-number.active{background:#ee202e;color:#fff}
.step-line{height:2px;background:#e5e7eb;flex:1;margin:0 12px}
.step-line.active{background:#ee202e}
.step-header h3{font-size:20px;font-weight:600;color:#111827;margin-bottom:8px}
.step-header p{font-size:14px;color:#6b7280;margin:0}

/* Form Styles */
.customer-details-form{display:flex;flex-direction:column;gap:20px}
.form-row{margin-bottom:0}
.form-group{display:flex;flex-direction:column}
.form-group label{font-weight:500;color:#374151;margin-bottom:6px;font-size:14px}
.form-group input,.form-group textarea,.form-group select{border:1px solid #d1d5db;border-radius:6px;padding:12px;font-size:16px;font-family:inherit;transition:all 0.2s ease}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px rgba(59,130,246,0.1)}
.form-group textarea{resize:vertical;min-height:80px}

/* Button Styles */
.form-actions{display:flex;justify-content:space-between;margin-top:24px}
.back-button{background:none;border:1px solid #d1d5db;color:#6b7280;border-radius:6px;padding:12px 16px;font-size:14px;cursor:pointer;transition:all 0.2s ease}
.back-button:hover{background:#f3f4f6;border-color:#9ca3af;color:#374151}
.complete-button{background:#ee202e;color:#fff;border:none;border-radius:8px;padding:14px 24px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease}
.complete-button:hover{background:#d41b2c;transform:translateY(-1px);box-shadow:0 4px 12px rgba(238,32,46,0.3)}
.complete-button:active{transform:translateY(0)}

/* Checkout Styles */
.booking-checkout{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:20px;min-height:400px;align-self:start}
.checkout-summary{background:#f8f9fa;border:1px solid #e5e7eb;border-radius:8px;padding:20px;margin-bottom:20px}
.checkout-summary h4{font-size:18px;font-weight:600;color:#111827;margin-bottom:16px}
.checkout-summary .summary-item.total{font-size:18px;font-weight:600;color:#059669;border-top:2px solid #e5e7eb;margin-top:12px;padding-top:12px}
.paypal-checkout-container{margin:20px 0;min-height:100px}
.checkout-actions{display:flex;justify-content:flex-start;margin-top:20px}

/* Success Message Styles */
.booking-success{display:flex;align-items:center;justify-content:center;min-height:500px;text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:40px;align-self:start;box-shadow:0 2px 10px rgba(0,0,0,0.1);margin:20px auto;max-width:600px}
.success-content{max-width:500px;margin:0 auto}
.success-icon{font-size:48px;margin-bottom:16px}
.success-content h3{font-size:24px;font-weight:600;color:#111827;margin-bottom:12px}
.success-content p{font-size:16px;color:#6b7280;margin-bottom:24px}
.booking-summary{background:#f8f9fa;border:1px solid #e5e7eb;border-radius:8px;padding:20px;margin-bottom:24px;text-align:left}
.booking-summary h4{font-size:18px;font-weight:600;color:#111827;margin-bottom:16px}
.summary-item{display:flex;justify-content:space-between;margin-bottom:8px;padding:8px 0;border-bottom:1px solid #e5e7eb}
.summary-item:last-child{border-bottom:none;margin-bottom:0}
.summary-label{font-weight:500;color:#6b7280}
.summary-value{font-weight:500;color:#111827}
.success-buttons{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:20px}
.book-another-button{background:#ee202e;color:#fff;border:none;border-radius:8px;padding:14px 24px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease}
.book-another-button:hover{background:#d41b2c}
.go-home-button{background:#4a5568;color:#fff;border:none;border-radius:8px;padding:14px 24px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease}
.go-home-button:hover{background:#2d3748}

/* Validation Error Styles */
.field-error {
  color: #dc3545;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  display: block;
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Error state for form fields */
.error {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
  background-color: #fff5f5 !important;
}

/* System error container */
.system-error-container {
  margin-bottom: 20px;
}

.system-error {
  color: #721c24;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 16px;
  margin-bottom: 15px;
}

.system-error strong {
  font-weight: 600;
}

/* Calendar validation errors */
.calendar-error,
.calendar-validation-error {
  margin-top: 15px;
  text-align: center;
}

/* Time slot validation errors */
.timeslot-error,
.time-slot-validation-error {
  margin-top: 15px;
  text-align: center;
}

/* Customer form validation errors */
.customer-form-validation-error {
  margin-bottom: 20px;
  font-size: 16px;
}

/* Form validation errors */
.form-validation-error {
  margin-bottom: 20px;
  font-size: 16px;
}

/* PayPal validation errors */
.paypal-validation-error {
  margin: 10px 0;
  font-size: 16px;
}

/* Focus states for error fields */
.error:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5) !important;
  outline: none;
}

/* Accessible error styles */
.field-error[role="alert"] {
  font-weight: 500;
}

/* Error animation for better UX */
.field-error.animate {
  animation: shake 0.6s ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* Responsive error styles */
@media (max-width: 768px) {
  .field-error {
    font-size: 13px;
    padding: 6px 10px;
  }
  
  /* Stack success buttons vertically on mobile */
  .success-buttons {
    flex-direction: column;
    gap: 10px;
  }
  
  .book-another-button,
  .go-home-button {
    width: 100%;
    max-width: 280px;
    padding: 12px 20px;
  }
  
  /* Adjust success message padding on mobile */
  .booking-success {
    padding: 20px;
    min-height: auto;
  }
  
  .success-content {
    max-width: 100%;
  }
  
  .system-error {
    font-size: 14px;
    padding: 10px 12px;
  }
  
  .customer-form-validation-error,
  .form-validation-error {
    font-size: 14px;
  }
}