/* Enhanced Purchase-Specific Autofill Protection */
/* Ultra-aggressive protection against white backgrounds */

/* CRITICAL: Universal autofill override */
input.input-glass:-webkit-autofill,
input.input-glass:-webkit-autofill:hover,
input.input-glass:-webkit-autofill:focus,
input.input-glass:-webkit-autofill:active,
textarea.input-glass:-webkit-autofill,
textarea.input-glass:-webkit-autofill:hover,
textarea.input-glass:-webkit-autofill:focus,
textarea.input-glass:-webkit-autofill:active {
  box-shadow: inset 0 0 0px 9999px rgba(255, 255, 255, 0.08) !important;
  -webkit-box-shadow: inset 0 0 0px 9999px rgba(255, 255, 255, 0.08) !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background-color 5000s ease-in-out 0s !important;
  color: #fff !important;
}

/* Fix for pasted content styling */
input.input-glass[data-pasted="true"],
textarea.input-glass[data-pasted="true"] {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: inset 0 0 0px 9999px rgba(255, 255, 255, 0.08) !important;
  -webkit-box-shadow: inset 0 0 0px 9999px rgba(255, 255, 255, 0.08) !important;
}

/* Emergency override for any white backgrounds */
input.input-glass {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

textarea.input-glass {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Animation fix for step transitions */
.form-step input.input-glass,
.form-step textarea.input-glass {
  animation: resetAutofillStyle 0.1s ease-in-out;
}

@keyframes resetAutofillStyle {
  0% { 
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
  }
  100% { 
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
  }
}

/* Purchase form specific autofill resets */
#step-1 input.input-glass,
#step-2 input.input-glass,
#step-2 textarea.input-glass,
#step-3 input.input-glass {
  transition: all 0.3s ease, background-color 9999s ease-in-out 0s !important;
}

/* CRITICAL: Validation border overrides - highest priority */
/* These must come after all other styling to ensure validation borders show */
input.border-red-500.input-glass,
textarea.border-red-500.input-glass,
input.border-red-500[data-pasted="true"],
textarea.border-red-500[data-pasted="true"],
.form-step input.border-red-500.input-glass,
.form-step textarea.border-red-500.input-glass,
#step-1 input.border-red-500.input-glass,
#step-2 input.border-red-500.input-glass,
#step-2 textarea.border-red-500.input-glass,
#step-3 input.border-red-500.input-glass {
  border: 1px solid #EF4444 !important;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 1px #EF4444, 0 2px 12px rgba(239, 68, 68, 0.15) !important;
}

/* Validation borders on focus */
input.border-red-500.input-glass:focus,
textarea.border-red-500.input-glass:focus,
input.border-red-500[data-pasted="true"]:focus,
textarea.border-red-500[data-pasted="true"]:focus,
.form-step input.border-red-500.input-glass:focus,
.form-step textarea.border-red-500.input-glass:focus,
#step-1 input.border-red-500.input-glass:focus,
#step-2 input.border-red-500.input-glass:focus,
#step-2 textarea.border-red-500.input-glass:focus,
#step-3 input.border-red-500.input-glass:focus {
  border: 1px solid #EF4444 !important;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 1px #EF4444, 0 0 0 3px rgba(239, 68, 68, 0.1), 0 2px 12px rgba(239, 68, 68, 0.15) !important;
}

/* Validation borders during autofill animation */
input.border-red-500.input-glass {
  animation: none !important; /* Prevent animation from overriding validation styling */
}

textarea.border-red-500.input-glass {
  animation: none !important; /* Prevent animation from overriding validation styling */
}

/* CRITICAL: Order Status validation borders - highest specificity */
label.order-status-error,
label.order-status-error:hover,
label.order-status-error:focus,
.form-step label.order-status-error,
#step-1 label.order-status-error {
  border: 1px solid #EF4444 !important;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 1px #EF4444, 0 2px 12px rgba(239, 68, 68, 0.15) !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

/* CRITICAL: Book Type validation borders - highest specificity */
.booktype-card.booktype-error > div,
.booktype-card.booktype-error > div:hover,
.booktype-card.booktype-error > div:focus,
.form-step .booktype-card.booktype-error > div,
#step-1 .booktype-card.booktype-error > div {
  border: 1px solid #EF4444 !important;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 1px #EF4444, 0 2px 12px rgba(239, 68, 68, 0.15) !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

/* Remove validation borders when fields are valid */
label:not(.order-status-error) {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: transparent !important;
}

.booktype-card:not(.booktype-error) > div {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Ensure validation borders are visible over all other styles */
.order-status-error,
.booktype-error > div {
  z-index: 10 !important;
  position: relative !important;
}

/* Override any potential animation or transition conflicts */
.order-status-error,
.booktype-error > div,
.order-status-error:hover,
.booktype-error > div:hover {
  animation: none !important;
  transition: all 0.2s ease !important;
}

/* CRITICAL: Publishing Rights validation borders - highest specificity */
label .publishing-rights-error,
label .publishing-rights-error:hover,
label .publishing-rights-error:focus,
.form-step label .publishing-rights-error,
#step-3 label .publishing-rights-error {
  border: 1px solid #EF4444 !important;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 1px #EF4444, 0 2px 12px rgba(239, 68, 68, 0.15) !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

/* Ensure validation borders work in all contexts */
.form-step .order-status-error,
.form-step .booktype-error > div,
.form-step .publishing-rights-error,
#step-1 .order-status-error,
#step-1 .booktype-error > div,
#step-3 .publishing-rights-error,
.purchase .order-status-error,
.purchase .booktype-error > div,
.purchase .publishing-rights-error {
  border: 1px solid #EF4444 !important;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 1px #EF4444, 0 2px 12px rgba(239, 68, 68, 0.15) !important;
}

/* Publishing rights specific - consistent 1px border */
.purchase .publishing-rights-error,
.form-step .publishing-rights-error,
#step-3 .publishing-rights-error {
  border: 1px solid #EF4444 !important;
}