/* Wizard Form Responsive Design - Arabic (RTL) */

/* ==================================
   ENSURE MODAL ROUNDED BORDER
   ================================== */

html body .wizard-modal {
  border-radius: 12px !important;
  overflow: hidden !important;
  position: absolute !important;
  top: 5vh !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 auto 5vh auto !important;
  direction: rtl !important;
  text-align: right !important;
}

html body .wizard-header {
  border-radius: 12px 12px 0 0 !important;
}

/* Ensure content area has proper scrolling and contains dropdowns */
html body .wizard-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 0 !important;
  position: relative !important;
}

/* ==================================
   BUTTON DISPLAY CONTROL
   ================================== */

/* Submit button - hidden by default, shown only on last step via JS */
html body #wizardSubmit {
  display: none !important;
}

html body #wizardSubmit[style*="display: block"],
html body #wizardSubmit[style*="display: inline-block"] {
  display: inline-block !important;
}

/* Hide Next button on last step (when Submit is visible) */
html body #wizardNext[style*="display: none"] {
  display: none !important;
}

/* Hide Previous button on first step (when disabled) */
html body #wizardPrev:disabled,
html body #wizardPrev[disabled] {
  display: none !important;
  visibility: hidden !important;
}

/* ==================================
   CENTERED TITLE & STEPPER - VERTICAL LAYOUT
   ================================== */

/* Step Indicator - Center Everything */
html body .step-indicator {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 20px 24px !important;
  width: 100% !important;
}

/* Step Indicator Container - STACK VERTICALLY */
html body .step-indicator-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Step Title - Centered */
html body .step-title {
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .step-title h3 {
  font-size: 18px !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Stepper - Centered, Reduced Size */
html body .stepper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 280px !important;
  margin: 0 auto !important;
  transform: scale(0.85) !important;
}

/* ==================================
   VERTICAL FORM INPUTS - ALL SCREEN SIZES
   ================================== */

/* Form Rows - Stack Vertically */
html body .form-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
}

html body .form-group {
  width: 100% !important;
  max-width: 100% !important;
}

/* Form Sections - Stack Vertically */
html body .form-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  position: relative !important;
}

/* Form Group - Ensure dropdowns stay within bounds */
html body .form-group {
  position: relative !important;
  width: 100% !important;
}

html body .form-group select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 40px !important;
}

/* Force padding for all select elements (RTL) */
html body select,
html body .wizard-content select,
html body .form-group select {
  padding-left: 40px !important;
}

/* Country code select needs less padding (RTL) */
html body select.country-code,
html body .contact-number-group select.country-code {
  padding-left: 24px !important;
  padding-right: 8px !important;
  width: 90px !important;
  flex: 0 0 90px !important;
}

html body .upload-field {
  width: 100% !important;
  max-width: 100% !important;
}

/* ==================================
   SIZES FOR ARABIC VERSION
   ================================== */

/* Form Content Padding */
html body .wizard-content {
  padding: 20px 24px !important;
}

/* Labels */
html body label,
html body .input-label {
  font-size: 14px !important;
  text-align: right !important;
}

/* Inputs */
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="number"],
html body select,
html body textarea {
  font-size: 14px !important;
  padding: 10px 12px !important;
  height: auto !important;
  min-height: 42px !important;
  text-align: right !important;
}

/* File Upload Containers */
html body .file-upload-container {
  padding: 12px !important;
  min-height: 50px !important;
}

html body .big-file-upload {
  padding: 20px !important;
  min-height: 100px !important;
}

/* Buttons */
html body .btn-primary,
html body .btn-secondary {
  font-size: 14px !important;
  padding: 12px 24px !important;
  height: auto !important;
  min-height: 44px !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==================================
   VERTICAL CHECKBOXES & RADIO BUTTONS - RTL
   ================================== */

html body .checkbox-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  box-sizing: border-box !important;
}

html body .checkbox-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}

html body .checkbox-label {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 12px !important;
  flex: 1 !important;
  word-wrap: break-word !important;
  text-align: right !important;
  font-size: 14px !important;
}

html body .radio-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 12px !important;
  width: 100% !important;
}

html body .radio-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

html body .radio-label {
  font-size: 14px !important;
  text-align: right !important;
}

/* ==================================
   WIZARD FOOTER - CENTER BUTTONS
   ================================== */

html body .wizard-footer {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 20px 24px !important;
}

/* Mobile - Stack Buttons Vertically */
@media (max-width: 640px) {
  html body .wizard-footer {
    flex-direction: column !important;
  }

  html body .btn-primary,
  html body .btn-secondary {
    width: 100% !important;
  }

  html body .stepper {
    transform: scale(0.75) !important;
    max-width: 240px !important;
  }

  html body .step-title h3 {
    font-size: 16px !important;
  }
}