/* Enhanced Login Component CSS - Wamia Brand Colors */

/* =================================
   DESIGN TOKENS & VARIABLES
   ================================= */
:root {
  /* Brand Colors - Wamia Design System */
  --color-primary: #ED6F26;           /* PANTONE P 34-7C */
  --color-primary-hover: #d85a1a;     /* Darker primary */
  --color-primary-active: #c24e0f;    /* Active primary */
  --color-primary-disabled: #f5b896;  /* Light primary */
  
  --color-black: #1D1D1B;             /* PANTONE Process Black C */
  --color-green: #2A5841;             /* PANTONE 554 C */
  --color-teal: #115C6B;              /* PANTONE 2181 C */
  --color-sky: #89D2DA;               /* PANTONE 2225 C */
  
  --color-secondary: #6b7280;
  --color-secondary-hover: #4b5563;
  
  --color-success: #2A5841;           /* Use brand green for success */
  --color-success-bg: #e8f5e8;
  --color-success-border: #a7d4a7;
  
  --color-error: #dc2626;
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;
  
  --color-warning: #ED6F26;           /* Use brand primary for warnings */
  --color-warning-bg: #fef3c7;
  --color-warning-border: #fde68a;
  
  --color-info: #115C6B;              /* Use brand teal for info */
  --color-info-bg: #e0f2fe;
  --color-info-border: #89D2DA;
  
  /* Neutrals */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #1D1D1B;          /* Use brand black */
  
  /* Spacing */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 0.75rem;    /* 12px */
  --space-lg: 1rem;       /* 16px */
  --space-xl: 1.25rem;    /* 20px */
  --space-2xl: 1.5rem;    /* 24px */
  --space-3xl: 2rem;      /* 32px */
  --space-4xl: 2.5rem;    /* 40px */
  
  /* Typography */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  
  /* Border Radius */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Focus Ring */
  --focus-ring: 0 0 0 3px rgba(237, 111, 38, 0.1);
  --focus-ring-error: 0 0 0 3px rgba(220, 38, 38, 0.1);
  --focus-ring-success: 0 0 0 3px rgba(42, 88, 65, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  
  /* Touch Targets (minimum 44px for mobile) */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
}

/* =================================
   RESET & BASE STYLES
   ================================= */
.wamia-auth-container * {
  box-sizing: border-box;
}

.wamia-auth-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: var(--line-height-normal);
  color: var(--color-gray-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure all elements inherit the font */
.wamia-auth-container *,
.wamia-auth-container input,
.wamia-auth-container button,
.wamia-auth-container select,
.wamia-auth-container textarea {
  font-family: inherit !important;
}

/* =================================
   CONTAINER & LAYOUT
   ================================= */
.wamia-auth-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: var(--space-3xl) var(--space-lg);
  background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
}

.wamia-auth-card {
  background: white;
  padding: 28px 24px;
  border-radius: 8px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.12),
              0 4px 20px -4px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  transition: box-shadow 0.3s ease;
}

.wamia-auth-card:hover {
  box-shadow: 0 15px 50px -12px rgba(0, 0, 0, 0.15),
              0 6px 25px -5px rgba(0, 0, 0, 0.1);
}

/* =================================
   TYPOGRAPHY
   ================================= */
.wamia-auth-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: #111827;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.wamia-auth-subtitle {
  text-align: center;
  color: #6B7280;
  margin: 0 0 20px 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
}

/* =================================
   FORM ELEMENTS
   ================================= */

/* Remove all fieldset borders and styling */
.wamia-auth-container fieldset {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  background: none !important;
  outline: none !important;
}

.wamia-auth-container fieldset legend {
  display: none !important;
}

.wamia-form-group {
  margin-bottom: 16px;
}

.wamia-form-group:last-child {
  margin-bottom: 0;
}

.wamia-form-label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  line-height: var(--line-height-normal);
}

.wamia-form-label--required::after {
  content: ' *';
  color: var(--color-error);
  font-weight: 400;
}

/* Input Wrapper for prefix/suffix support */
.wamia-input-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.wamia-input-prefix {
  background: #FAFAFA;
  border: 1.5px solid #E5E7EB;
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #6B7280;
  font-weight: 500;
  white-space: nowrap;
  user-select: none;
  min-height: 44px;
  height: 44px;
  box-sizing: border-box;
  line-height: 1.5;
}

/* Base Input Styles */
.wamia-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-gray-900);
  background: #FAFAFA;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 44px;
  height: 44px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none !important;
  box-shadow: none !important;
  font-weight: 400;
}

.wamia-input:hover {
  background: #F5F5F5;
  border-color: #D1D5DB;
}

/* Remove browser default focus styles and autocomplete styling */
.wamia-input:focus,
.wamia-input:active,
.wamia-input:focus-visible,
.wamia-input:-webkit-autofill,
.wamia-input:-webkit-autofill:hover,
.wamia-input:-webkit-autofill:focus,
.wamia-input:-webkit-autofill:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* Remove browser autocomplete icons and styling */
.wamia-input::-webkit-contacts-auto-fill-button,
.wamia-input::-webkit-credentials-auto-fill-button,
.wamia-input::-webkit-strong-password-auto-fill-button,
.wamia-input::-webkit-calendar-picker-indicator,
.wamia-input::-webkit-clear-button,
.wamia-input::-webkit-inner-spin-button,
.wamia-input::-webkit-outer-spin-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Remove any background icons that might appear */
.wamia-input,
.wamia-auth-container .input-text,
.wamia-auth-container input[type="tel"],
.wamia-auth-container input[type="text"],
.wamia-auth-container input[type="email"],
.wamia-auth-container input[type="password"] {
  background-image: none !important;
  background-position: initial !important;
  background-repeat: no-repeat !important;
  background-size: 0 !important;
}

/* Additional browser-specific overrides */
.wamia-input::-moz-placeholder,
.wamia-auth-container .input-text::-moz-placeholder {
  opacity: 1 !important;
  color: var(--color-gray-400) !important;
}

.wamia-input::placeholder,
.wamia-auth-container .input-text::placeholder {
  color: var(--color-gray-400) !important;
  opacity: 1 !important;
}

/* Override any browser default input styling */
.wamia-input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  -webkit-border-radius: var(--radius-md) !important;
  -moz-border-radius: var(--radius-md) !important;
}

.wamia-input::placeholder {
  color: var(--color-gray-400);
  opacity: 1;
}

/* Input with prefix */
.wamia-input-wrapper .wamia-input {
  border-left: none;
  border-radius: 0 8px 8px 0;
  position: relative;
  z-index: 1;
  height: 44px;
  box-sizing: border-box;
  flex: 1;
}

/* Specific styling for phone input to prevent conflicts */
#phone-input {
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  height: 44px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  vertical-align: top !important;
}

/* Ensure perfect alignment for phone input wrapper - compatible approach */
#phone-input + .wamia-input-prefix,
.wamia-input-wrapper .wamia-input-prefix {
  border: 1.5px solid #E5E7EB !important;
  border-right: none !important;
  height: 44px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  vertical-align: top !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px 12px !important;
  transition: border-color 0.2s ease !important;
}

/* Ensure phone input matches prefix height exactly */
.wamia-input-wrapper #phone-input,
.wamia-input-wrapper .wamia-input {
  border: 1.5px solid #E5E7EB !important;
  height: 44px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  vertical-align: top !important;
  padding: 10px 14px !important;
  line-height: 1.5 !important;
  transition: border-color 0.2s ease !important;
}

.wamia-input-wrapper #phone-input {
  border-left: none !important;
}

/* =================================
   FOCUS STATES - CLEAN IMPLEMENTATION
   ================================= */

/* Remove all default focus styles first */
.wamia-input-wrapper:focus-within,
.wamia-input:focus,
#phone-input:focus,
.wamia-input-prefix {
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* Focus state for input wrapper with prefix */
.wamia-input-wrapper:focus-within .wamia-input-prefix {
  border-color: #ED6F26 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-right: none !important;
  background: white !important;
  z-index: 2 !important;
  position: relative !important;
}

.wamia-input-wrapper:focus-within .wamia-input,
.wamia-input-wrapper:focus-within #phone-input {
  border-color: #ED6F26 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-left: none !important;
  background: white !important;
  z-index: 2 !important;
  position: relative !important;
}

/* Direct focus on input field */
.wamia-input:focus,
#phone-input:focus {
  border-color: #ED6F26 !important;
  border-width: 2px !important;
  border-style: solid !important;
  background: white !important;
  box-shadow: 0 0 0 3px rgba(237, 111, 38, 0.1) !important;
}

/* For inputs without prefix (standalone) */
.wamia-input:focus:not(.wamia-input-wrapper .wamia-input) {
  border-left: 2px solid #ED6F26 !important;
  border-radius: 8px !important;
}

/* Ensure phone input in wrapper doesn't have left border */
.wamia-input-wrapper #phone-input:focus,
.wamia-input-wrapper .wamia-input:focus {
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
}

/* Override any Magento default styles */
.wamia-auth-container .input-text:focus,
.wamia-auth-container input.input-text:focus,
.wamia-auth-container .field .control input:focus,
.wamia-auth-container .field .control .input-text:focus {
  border-color: #ED6F26;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* Specific overrides for Magento classes in wrapper */
.wamia-auth-container .wamia-input-wrapper:focus-within .input-text,
.wamia-auth-container .wamia-input-wrapper:focus-within input.input-text {
  border-color: #ED6F26 !important;
  border-left: none !important;
}

/* Clean up any pseudo-elements that might interfere */
.wamia-input-wrapper:focus-within::before,
.wamia-input-wrapper:focus-within::after {
  display: none !important;
}

/* Input States */
.wamia-input:disabled {
  background: var(--color-gray-50);
  color: var(--color-gray-400);
  cursor: not-allowed;
  border-color: var(--color-gray-200);
}

.wamia-input--error {
  border-color: var(--color-error);
}

.wamia-input--error:focus {
  box-shadow: var(--focus-ring-error);
}

.wamia-input--success {
  border-color: var(--color-success);
}

.wamia-input--success:focus {
  box-shadow: var(--focus-ring-success);
}

/* Password Input with Toggle */
.wamia-password-wrapper {
  position: relative;
}

.wamia-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: #F3F4F6; /* Light gray background for better visibility */
  border: none;
  cursor: pointer;
  color: #4B5563; /* Darker gray for better contrast */
  padding: 6px;
  border-radius: 6px;
  transition: all 0.2s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10; /* Ensure button is above input */
}

.wamia-password-toggle svg {
  width: 20px;
  height: 20px;
  transition: all 0.2s ease;
  stroke: #4B5563 !important; /* Darker gray for better contrast */
  fill: none !important;
  pointer-events: none; /* Prevent SVG from blocking clicks */
  position: relative;
  z-index: 11; /* Ensure icons are above button */
}

/* Ensure icons are visible when displayed */
.wamia-password-toggle svg.wamia-eye-icon,
.wamia-password-toggle svg.wamia-eye-off-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wamia-password-toggle svg[style*="display: block"],
.wamia-password-toggle svg[style*="visibility: visible"],
.wamia-password-toggle svg.wamia-eye-icon[style*="display: block"],
.wamia-password-toggle svg.wamia-eye-off-icon[style*="display: block"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  stroke: #4B5563 !important;
}

.wamia-password-toggle svg[style*="display: none"],
.wamia-password-toggle svg[style*="visibility: hidden"],
.wamia-password-toggle svg.wamia-eye-icon[style*="display: none"],
.wamia-password-toggle svg.wamia-eye-off-icon[style*="display: none"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.wamia-password-toggle:hover {
  background: #E5E7EB; /* Slightly darker on hover */
}

.wamia-password-toggle:hover svg {
  stroke: #1F2937 !important; /* Even darker on hover */
}

.wamia-password-toggle:focus {
  outline: none;
  background: #FFF5F0; /* Light orange background */
}

.wamia-password-toggle:focus svg {
  stroke: #ED6F26 !important; /* Orange icon */
}

.wamia-password-toggle:active {
  transform: translateY(-50%) scale(0.95);
  background: #FFDEC9 !important; /* Darker orange background when clicked */
}

.wamia-password-toggle:active svg {
  stroke: #C55516 !important; /* Darker orange icon when clicked */
}

/* Ensure SVG strokes always use currentColor from parent */
.wamia-password-toggle svg path,
.wamia-password-toggle svg line,
.wamia-password-toggle svg circle {
  stroke: inherit !important;
}

.wamia-input--with-toggle {
  padding-right: calc(var(--space-3xl) + var(--space-lg));
}

/* =================================
   BUTTONS
   ================================= */
.wamia-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-2xl);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: var(--line-height-normal);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  min-height: var(--touch-target-comfortable);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}

.wamia-button:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Button Variants */
.wamia-button--primary {
  background: linear-gradient(135deg, #ED6F26 0%, #d85a1a 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(237, 111, 38, 0.3);
  min-height: 46px;
  border-radius: 8px;
  font-size: 14px;
  padding: 11px 24px;
}

.wamia-button--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #d85a1a 0%, #c24e0f 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(237, 111, 38, 0.4);
}

.wamia-button--primary:active:not(:disabled) {
  background: linear-gradient(135deg, #c24e0f 0%, #b0440c 100%);
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(237, 111, 38, 0.3);
}

.wamia-button--secondary {
  background: white;
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.wamia-button--secondary:hover:not(:disabled) {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.wamia-button--secondary:active:not(:disabled) {
  background: var(--color-gray-100);
}

.wamia-button--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.wamia-button--outline:hover:not(:disabled) {
  background: var(--color-primary);
  color: white;
}

.wamia-button--ghost {
  background: transparent;
  color: var(--color-gray-600);
  border-color: transparent;
}

.wamia-button--ghost:hover:not(:disabled) {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

/* Button Sizes */
.wamia-button--small {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
  min-height: 36px;
}

.wamia-button--large {
  padding: var(--space-lg) var(--space-3xl);
  font-size: var(--font-size-lg);
  min-height: 56px;
}

.wamia-button--full {
  width: 100%;
}

/* Button States */
.wamia-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.wamia-button--loading {
  color: transparent;
  pointer-events: none;
}

.wamia-button--loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: wamia-spin 1s linear infinite;
  color: inherit;
}

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

/* =================================
   TOGGLE BUTTONS (Tab-like)
   ================================= */
.wamia-toggle-group {
  display: flex;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  background: #F3F4F6;
  padding: 3px;
  gap: 3px;
}

.wamia-toggle-button {
  flex: 1;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: #6B7280;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 38px;
  position: relative;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wamia-toggle-button svg {
  width: 18px;
  height: 18px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.wamia-toggle-button span {
  transition: all 0.2s ease;
}

.wamia-toggle-button:hover:not(.wamia-toggle-button--active) {
  background: #E5E7EB;
  color: #374151;
}

.wamia-toggle-button:focus {
  outline: none;
  z-index: 1;
}

.wamia-toggle-button--active {
  background: linear-gradient(135deg, #ED6F26 0%, #d85a1a 100%);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(237, 111, 38, 0.25);
}

/* =================================
   VALIDATION & ERROR MESSAGES
   ================================= */
.wamia-form-error {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-error);
  line-height: var(--line-height-normal);
}

.wamia-form-help {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  line-height: var(--line-height-normal);
}

.wamia-form-success {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-success);
  line-height: var(--line-height-normal);
}

/* =================================
   ALERTS & NOTIFICATIONS
   ================================= */
.wamia-alert {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  border: 1px solid transparent;
}

.wamia-alert--error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error-border);
}

.wamia-alert--success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success-border);
}

.wamia-alert--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning-border);
}

.wamia-alert--info {
  background: var(--color-info-bg);
  color: var(--color-info);
  border-color: var(--color-info-border);
}

.wamia-alert--hidden {
  display: none;
}

/* =================================
   DIVIDERS
   ================================= */
.wamia-divider {
  position: relative;
  text-align: center;
  margin: var(--space-3xl) 0;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.wamia-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-gray-200);
}

.wamia-divider__text {
  background: white;
  padding: 0 var(--space-lg);
  position: relative;
  z-index: 1;
}

/* =================================
   SOCIAL BUTTONS
   ================================= */
.wamia-social-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.wamia-social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: white;
  color: var(--color-gray-700);
  font-size: var(--font-size-base);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  min-height: var(--touch-target-comfortable);
}

.wamia-social-button:hover:not(:disabled) {
  border-color: var(--color-gray-400);
  background: var(--color-gray-50);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.wamia-social-button:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.wamia-social-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.wamia-social-button--google {
  border-color: #4285f4;
  color: #4285f4;
}

.wamia-social-button--facebook {
  border-color: #1877f2;
  color: #1877f2;
}

.wamia-social-button--facebook:hover:not(:disabled) {
  background: #1877f2;
  color: white;
}

.wamia-social-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* =================================
   FOOTER
   ================================= */
.wamia-auth-footer {
  text-align: center;
  margin-top: var(--space-3xl);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
}

.wamia-auth-footer a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.wamia-auth-footer a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.wamia-auth-footer a:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* =================================
   RESPONSIVE DESIGN
   ================================= */
@media (max-width: 768px) {
  .wamia-auth-container {
    padding: var(--space-2xl) var(--space-md);
  }

  .wamia-auth-card {
    padding: var(--space-3xl) var(--space-2xl);
    border-radius: var(--radius-lg);
  }

  .wamia-auth-title {
    font-size: var(--font-size-2xl);
  }

  .wamia-input,
  .wamia-button,
  .wamia-social-button {
    min-height: var(--touch-target-min);
    font-size: var(--font-size-base);
  }

  .wamia-toggle-button {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 480px) {
  .wamia-auth-container {
    padding: var(--space-lg) var(--space-sm);
  }

  .wamia-auth-card {
    padding: var(--space-2xl) var(--space-lg);
    border-radius: var(--radius-md);
  }

  .wamia-auth-title {
    font-size: var(--font-size-xl);
  }

  .wamia-auth-subtitle {
    font-size: var(--font-size-sm);
  }

  .wamia-input-prefix {
    padding: 0 var(--space-sm);
    font-size: var(--font-size-sm);
  }

  .wamia-input {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
  }

  .wamia-button {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-sm);
  }

  .wamia-social-button {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
  }

  .wamia-social-icon {
    width: 16px;
    height: 16px;
  }
}

/* =================================
   ACCESSIBILITY
   ================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .wamia-input,
  .wamia-button,
  .wamia-social-button {
    border-width: 3px;
  }
}

/* Focus-visible for better keyboard navigation */
.wamia-input:focus-visible,
.wamia-button:focus-visible,
.wamia-social-button:focus-visible,
.wamia-toggle-button:focus-visible,
.wamia-password-toggle:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Screen reader only content */
.wamia-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =================================
   PHONE INPUT VALIDATION STATES - REAL-TIME
   ================================= */

/* Valid phone number state */
.wamia-input--valid {
  border-color: var(--color-success) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232A5841'%3e%3cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 40px !important;
}

/* Invalid phone number state */
.wamia-input--invalid {
  border-color: var(--color-error) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc2626'%3e%3cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 40px !important;
}

/* Override validation icons for input with prefix (phone input) */
.wamia-input-wrapper .wamia-input--valid,
.wamia-input-wrapper .wamia-input--invalid {
  padding-right: var(--space-lg) !important;
  background-image: none !important;
}

/* REAL-TIME VALIDATION: Prefix styling when input is valid */
.wamia-input-wrapper.valid .wamia-input-prefix,
.wamia-input-wrapper .wamia-input--valid + .wamia-input-prefix,
.wamia-input-wrapper:has(.wamia-input--valid) .wamia-input-prefix {
  border-color: var(--color-success) !important;
  background-color: #f0fdf4 !important;
  border-width: 2px !important;
  border-right: none !important;
}

/* REAL-TIME VALIDATION: Prefix styling when input is invalid */
.wamia-input-wrapper.invalid .wamia-input-prefix,
.wamia-input-wrapper .wamia-input--invalid + .wamia-input-prefix,
.wamia-input-wrapper:has(.wamia-input--invalid) .wamia-input-prefix {
  border-color: var(--color-error) !important;
  background-color: #fef2f2 !important;
  border-width: 2px !important;
  border-right: none !important;
}

/* Phone input specific validation styling - REAL-TIME */
#phone-input.wamia-input--valid {
  border-color: var(--color-success) !important;
  border-left: none !important;
  border-width: 2px !important;
}

#phone-input.wamia-input--invalid {
  border-color: var(--color-error) !important;
  border-left: none !important;
  border-width: 2px !important;
}

/* Ensure prefix gets validation styling when phone input is valid/invalid */
.wamia-input-wrapper:has(#phone-input.wamia-input--valid) .wamia-input-prefix {
  border-color: var(--color-success) !important;
  background-color: #f0fdf4 !important;
  border-width: 2px !important;
  border-right: none !important;
}

.wamia-input-wrapper:has(#phone-input.wamia-input--invalid) .wamia-input-prefix {
  border-color: var(--color-error) !important;
  background-color: #fef2f2 !important;
  border-width: 2px !important;
  border-right: none !important;
}

/* Focus states for validation - maintain validation colors even when focused */
.wamia-input-wrapper:focus-within.valid .wamia-input-prefix,
.wamia-input-wrapper:focus-within .wamia-input--valid {
  border-color: var(--color-success) !important;
}

.wamia-input-wrapper:focus-within.invalid .wamia-input-prefix,
.wamia-input-wrapper:focus-within .wamia-input--invalid {
  border-color: var(--color-error) !important;
}

/* Focus + Valid state for phone input */
.wamia-input-wrapper:focus-within:has(#phone-input.wamia-input--valid) .wamia-input-prefix,
.wamia-input-wrapper:focus-within #phone-input.wamia-input--valid {
  border-color: var(--color-success) !important;
}

/* Focus + Invalid state for phone input */
.wamia-input-wrapper:focus-within:has(#phone-input.wamia-input--invalid) .wamia-input-prefix,
.wamia-input-wrapper:focus-within #phone-input.wamia-input--invalid {
  border-color: var(--color-error) !important;
}

/* Smooth transition for validation states */
.wamia-input,
.wamia-input-prefix {
  transition: border-color var(--transition-normal), background-color var(--transition-normal) !important;
}

/* Fallback for browsers that don't support :has() */
@supports not selector(:has(*)) {
  .wamia-input-wrapper.valid .wamia-input-prefix {
    border-color: var(--color-success) !important;
    background-color: #f0fdf4 !important;
  }
  
  .wamia-input-wrapper.invalid .wamia-input-prefix {
    border-color: var(--color-error) !important;
    background-color: #fef2f2 !important;
  }
}

/* =================================
   OTP CHANNEL SELECTOR - COMPACT DESIGN
   ================================= */

#otp-channel-selector {
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

#otp-channel-selector .wamia-form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-700);
  margin-bottom: var(--space-sm);
  display: block;
}

.wamia-channel-options {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.wamia-channel-option {
  flex: 1;
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
}

.wamia-channel-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
}

.wamia-channel-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  background-color: #fff;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 13px;
  color: #4B5563;
  white-space: nowrap;
}

.wamia-channel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.2s ease;
}

.wamia-channel-icon svg {
  width: 18px;
  height: 18px;
  transition: all 0.2s ease;
}

.wamia-channel-text {
  font-size: 14px;
  transition: color 0.2s ease;
}

/* Hover state */
.wamia-channel-option:hover .wamia-channel-label {
  border-color: var(--color-primary);
  background-color: #fff5f0;
}

/* Selected/Checked state */
.wamia-channel-option input[type="radio"]:checked + .wamia-channel-label {
  border-color: var(--color-primary);
  border-width: 2px;
  background-color: #fff5f0;
  color: var(--color-primary);
  padding: 9px 15px; /* Adjust padding to compensate for thicker border */
}

.wamia-channel-option input[type="radio"]:checked + .wamia-channel-label .wamia-channel-icon {
  transform: scale(1.05);
}

.wamia-channel-option input[type="radio"]:checked + .wamia-channel-label .wamia-channel-text {
  font-weight: 600;
  color: var(--color-primary);
}

/* SMS-specific styling */
.wamia-channel-option input[type="radio"]:checked + .wamia-channel-label .wamia-sms-icon svg {
  color: #2196F3; /* Material Blue */
}

.wamia-channel-option:hover .wamia-channel-label .wamia-sms-icon svg {
  color: #1976D2; /* Darker blue on hover */
}

/* WhatsApp-specific styling */
.wamia-channel-option input[type="radio"]:checked + .wamia-channel-label .wamia-whatsapp-icon svg {
  color: #25D366; /* WhatsApp brand green */
}

.wamia-channel-option:hover .wamia-channel-label .wamia-whatsapp-icon svg {
  color: #128C7E; /* Darker WhatsApp green on hover */
}

/* Focus state for accessibility */
.wamia-channel-option input[type="radio"]:focus + .wamia-channel-label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Active state */
.wamia-channel-option:active .wamia-channel-label {
  transform: scale(0.98);
}

/* Disabled state */
.wamia-channel-option input[type="radio"]:disabled + .wamia-channel-label {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-gray-50);
}

/* Help text styling */
#otp-channel-selector .wamia-form-help {
  margin-top: var(--space-xs);
  font-size: 12px;
  color: var(--color-gray-500);
  text-align: center;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .wamia-channel-options {
    gap: var(--space-xs);
  }
  
  .wamia-channel-label {
    padding: 10px 12px;
    font-size: 13px;
  }
  
  .wamia-channel-icon svg {
    width: 16px;
    height: 16px;
  }
  
  .wamia-channel-text {
    font-size: 13px;
  }
}