/**
 * MiniOrange OTP Verification - Theme Style Override
 *
 * Custom styles to match MiniOrange OTP plugin with eRide theme design
 * Overrides default plugin styling to maintain consistent look-and-feel
 *
 * @version 1.0.0
 * @requires eRide theme v1.1.5+
 * @plugin miniorange-otp-verification-woocommerce
 */

/* ==========================================================================
   CSS Custom Properties (from eRide theme)
   ========================================================================== */

:root {
  /* Use theme's primary colors */
  --mo-primary: #0073aa;
  --mo-primary-hover: #005a87;
  --mo-success: #22c55e;
  --mo-error: #dc2626;

  /* Neutral colors */
  --mo-text-primary: #1f2937;
  --mo-text-secondary: #6b7280;
  --mo-border: #e5e7eb;
  --mo-bg-white: #ffffff;
  --mo-bg-gray: #f9fafb;

  /* Spacing (8px grid) */
  --mo-spacing-sm: 0.75rem;  /* 12px */
  --mo-spacing-md: 1rem;     /* 16px */
  --mo-spacing-lg: 1.5rem;   /* 24px */
  --mo-spacing-xl: 2rem;     /* 32px */

  /* Border radius */
  --mo-radius-sm: 0.375rem;  /* 6px */
  --mo-radius-md: 0.5rem;    /* 8px */
  --mo-radius-lg: 0.75rem;   /* 12px */

  /* Shadows */
  --mo-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --mo-shadow-focus: 0 0 0 3px rgb(0 115 170 / 0.1);

  /* Transitions */
  --mo-transition: 200ms ease;
}

/* ==========================================================================
   Form Container
   ========================================================================== */

.mo-form-container {
  max-width: min(500px, 100%) !important;
  background-color: var(--mo-bg-white) !important;
  padding: var(--mo-spacing-xl) !important;
  border-radius: var(--mo-radius-lg) !important;
  box-shadow: var(--mo-shadow-md) !important;
  height: auto !important;
  margin: 0 auto !important;
}

.mo-login-form-container {
  width: 100%;
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

/* Labels */
.mo-form-container label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mo-text-primary);
  margin-bottom: var(--mo-spacing-sm);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Input Fields */
.mo-login-input {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  margin: 0 0 var(--mo-spacing-md) 0 !important;
  display: block !important;
  border: 1px solid var(--mo-border) !important;
  border-radius: var(--mo-radius-md) !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1rem !important;
  color: var(--mo-text-primary) !important;
  background-color: var(--mo-bg-white) !important;
  transition: border-color var(--mo-transition), box-shadow var(--mo-transition) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.mo-login-input:focus {
  outline: none !important;
  border-color: var(--mo-primary) !important;
  box-shadow: var(--mo-shadow-focus) !important;
}

.mo-login-input::placeholder {
  color: var(--mo-text-secondary);
  opacity: 0.6;
}

/* Input wrapper */
#mo_phone_container,
#mo_login_reg_form_elements {
  margin-bottom: var(--mo-spacing-md);
  display: block;
}

.mo-user {
  position: relative;
}

/* OTP Input Field - Force visibility (plugin JS is broken) */
/* The MiniOrange plugin's JavaScript doesn't properly show the OTP input */
/* So we force it to always be visible inside the form container */
#mo_login_reg_form_elements #molr_enter_otp {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  margin: var(--mo-spacing-md) 0 !important;
}

/* Force Verify OTP button to be visible (plugin JS is broken) */
#mo_login_reg_form_elements #mo_login_register_verify_otp {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hide the Send Code button to prevent confusion */
#mo_login_reg_form_elements #mo_login_register_with_phone {
  display: none !important;
}

/* Show Go Back button for better UX */
#mo_login_reg_form_elements #mo_login_register_go_back {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-bottom: var(--mo-spacing-md) !important;
}

/* Ensure OTP input label is visible */
#mo_login_reg_form_elements label {
  display: block !important;
  margin-bottom: var(--mo-spacing-sm) !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.mo-button,
.mo_go_back_button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  height: 48px !important;
  min-height: 44px !important; /* Accessibility: min touch target */
  outline: none !important;
  padding: 0 1.5rem !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
  transition: all var(--mo-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  border-radius: var(--mo-radius-md) !important;
  width: 100% !important;
  margin-top: 0 !important;
}

/* Primary Button (Login/Register, Verify) */
.mo-button {
  background-color: var(--mo-primary) !important;
  color: #ffffff !important;
}

.mo-button:hover {
  background-color: var(--mo-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.15);
}

.mo-button:active {
  transform: translateY(0);
}

.mo-button:disabled {
  background-color: #cbd5e1 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Secondary Button (Go Back) */
.mo_go_back_button {
  background-color: var(--mo-bg-gray) !important;
  color: var(--mo-text-primary) !important;
  border: 1px solid var(--mo-border) !important;
  margin-bottom: var(--mo-spacing-md) !important;
}

.mo_go_back_button:hover {
  background-color: #e5e7eb !important;
  border-color: #d1d5db !important;
}

/* Button Spacing */
#mo_login_register_go_back {
  margin-bottom: var(--mo-spacing-md) !important;
}

#mo_login_register_with_phone,
#mo_login_register_verify_otp {
  margin-bottom: var(--mo-spacing-md) !important;
}

/* ==========================================================================
   Messages
   ========================================================================== */

#mo_message {
  font-size: 0.875rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: var(--mo-radius-md) !important;
  margin-top: var(--mo-spacing-md) !important;
  margin-bottom: var(--mo-spacing-md) !important;
  text-align: center !important;
  padding: 0.75rem 1rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* Success message */
#mo_message.mo-success {
  background-color: var(--mo-success-light, #dcfce7);
  color: #166534;
  border: 1px solid #bbf7d0;
}

/* Error message */
#mo_message.mo-error {
  background-color: var(--mo-error-light, #fee2e2);
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Info message */
#mo_message.mo-info {
  background-color: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

/* ==========================================================================
   Hidden Elements
   ========================================================================== */

.mo-hide {
  display: none !important;
}

/* ==========================================================================
   WordPress Block Integration
   ========================================================================== */

/* Ensure proper spacing within WordPress blocks */
.wp-block-group .mo-form-container {
  margin-top: var(--mo-spacing-lg);
  margin-bottom: var(--mo-spacing-lg);
}

.entry-content .mo-form-container {
  margin-inline: auto;
}

/* Remove WordPress default margins that might interfere */
.wp-block-post-content .mo-form-container {
  max-width: min(500px, 100%);
}

/* ==========================================================================
   User Logged In Note
   ========================================================================== */

.mo_user_loggedin_note {
  text-align: center;
  background-color: var(--mo-success-light, #dcfce7);
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: var(--mo-radius-md);
  padding: var(--mo-spacing-md);
  margin-bottom: var(--mo-spacing-lg);
  font-size: 0.875rem;
  font-weight: 500;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
  .mo-form-container {
    padding: var(--mo-spacing-lg) var(--mo-spacing-md) !important;
    border-radius: var(--mo-radius-md) !important;
  }

  .mo-login-input {
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 0.875rem !important;
  }

  .mo-button,
  .mo_go_back_button {
    height: 44px !important;
    font-size: 0.9375rem !important;
  }
}

@media (max-width: 480px) {
  .mo-form-container {
    padding: var(--mo-spacing-md) !important;
  }

  #mo_message {
    font-size: 0.8125rem !important;
    padding: 0.625rem 0.875rem !important;
  }
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/* Focus visible for keyboard navigation */
.mo-login-input:focus-visible {
  outline: 2px solid var(--mo-primary);
  outline-offset: 2px;
}

.mo-button:focus-visible,
.mo_go_back_button:focus-visible {
  outline: 2px solid var(--mo-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mo-login-input {
    border-width: 2px !important;
  }

  .mo-button {
    border: 2px solid var(--mo-primary) !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.mo-button.loading {
  opacity: 0.7;
  cursor: not-allowed !important;
  position: relative;
}

.mo-button.loading::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: mo-spin 0.6s linear infinite;
}

@keyframes mo-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .mo-form-container {
    box-shadow: none !important;
    border: 1px solid #000;
  }
}