/**
 * WIR Beta Tester Registration Banner Styles
 * Material Design 3 compatible styling with .wir-beta namespace
 * 
 * Features:
 * - Responsive design (desktop modal, mobile bottom sheet)
 * - High contrast accessibility
 * - Smooth animations and transitions
 * - Focus management and keyboard navigation
 * - Uses CSS custom properties for theme integration
 */

/* Import Material Design 3 tokens if available */
:root {
  /* WIR Beta Banner color overrides - fallbacks for standalone use */
  --wir-beta-primary: hsl(158, 50%, 28%);
  --wir-beta-primary-foreground: hsl(0, 0%, 100%);
  --wir-beta-background: hsl(0, 0%, 100%);
  --wir-beta-foreground: hsl(0, 0%, 10%);
  --wir-beta-card: hsl(0, 0%, 100%);
  --wir-beta-card-foreground: hsl(0, 0%, 10%);
  --wir-beta-muted: hsl(0, 0%, 96%);
  --wir-beta-muted-foreground: hsl(0, 0%, 45%);
  --wir-beta-border: hsl(0, 0%, 88%);
  --wir-beta-input: hsl(150, 20%, 88%);
  --wir-beta-destructive: hsl(346, 87%, 43%);
  --wir-beta-success: hsl(142, 76%, 36%);
  --wir-beta-warning: hsl(32, 95%, 44%);
  
  /* Typography from WIRtschaft design system */
  --wir-beta-font-brand: 'Plus Jakarta Sans', sans-serif;
  --wir-beta-font-plain: 'Inter', sans-serif;
  
  /* Animation timings */
  --wir-beta-duration-fast: 200ms;
  --wir-beta-duration-normal: 300ms;
  --wir-beta-duration-slow: 500ms;
  --wir-beta-easing: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Dark theme support */
.dark {
  --wir-beta-primary: hsl(145, 65%, 55%);
  --wir-beta-primary-foreground: hsl(158, 30%, 8%);
  --wir-beta-background: hsl(0, 0%, 7%);
  --wir-beta-foreground: hsl(0, 0%, 95%);
  --wir-beta-card: hsl(0, 0%, 10%);
  --wir-beta-card-foreground: hsl(0, 0%, 95%);
  --wir-beta-muted: hsl(158, 25%, 15%);
  --wir-beta-muted-foreground: hsl(150, 10%, 70%);
  --wir-beta-border: hsl(158, 25%, 20%);
  --wir-beta-input: hsl(158, 25%, 20%);
  --wir-beta-destructive: hsl(0, 62.8%, 30.6%);
  --wir-beta-success: hsl(160, 84%, 39%);
  --wir-beta-warning: hsl(25, 95%, 53%);
}

/* Use existing WIRtschaft CSS variables if available */
:root:has([data-theme]) {
  --wir-beta-primary: var(--primary, hsl(158, 50%, 28%));
  --wir-beta-primary-foreground: var(--primary-foreground, hsl(0, 0%, 100%));
  --wir-beta-background: var(--background, hsl(0, 0%, 100%));
  --wir-beta-foreground: var(--foreground, hsl(0, 0%, 10%));
  --wir-beta-card: var(--card, hsl(0, 0%, 100%));
  --wir-beta-card-foreground: var(--card-foreground, hsl(0, 0%, 10%));
  --wir-beta-muted: var(--muted, hsl(0, 0%, 96%));
  --wir-beta-muted-foreground: var(--muted-foreground, hsl(0, 0%, 45%));
  --wir-beta-border: var(--border, hsl(0, 0%, 88%));
  --wir-beta-input: var(--input, hsl(150, 20%, 88%));
  --wir-beta-destructive: var(--destructive, hsl(346, 87%, 43%));
  --wir-beta-success: var(--success, hsl(142, 76%, 36%));
  --wir-beta-warning: var(--warning, hsl(32, 95%, 44%));
}

/* ===== OVERLAY & MODAL STRUCTURE ===== */

.wir-beta-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--wir-beta-duration-normal) var(--wir-beta-easing),
              visibility var(--wir-beta-duration-normal) var(--wir-beta-easing);
  
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1rem;
  pointer-events: none;
}

.wir-beta-overlay.wir-beta-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wir-beta-modal {
  background-color: var(--wir-beta-card);
  border-radius: 1rem;
  box-shadow: 
    0 10px 38px -10px rgba(0, 0, 0, 0.35),
    0 10px 20px -15px rgba(0, 0, 0, 0.2);
  max-width: 24rem;
  width: auto;
  min-width: 20rem;
  max-height: 80vh;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform var(--wir-beta-duration-normal) var(--wir-beta-easing);
  pointer-events: auto;
}

.wir-beta-visible .wir-beta-modal {
  transform: translateX(0);
}

.wir-beta-content {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: 80vh;
}

/* ===== MOBILE BOTTOM SHEET ===== */

@media (max-width: 640px) {
  .wir-beta-overlay {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
  }
  
  .wir-beta-modal {
    max-width: none;
    min-width: auto;
    width: 100%;
    max-height: 85vh;
    border-radius: 1rem 1rem 0 0;
    margin: 0;
    transform: translateY(100%);
  }
  
  .wir-beta-visible .wir-beta-modal {
    transform: translateY(0);
  }
  
  .wir-beta-content {
    padding: 1rem;
    /* Add safe area inset for iOS */
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* ===== HEADER & CLOSE BUTTON ===== */

.wir-beta-header {
  position: relative;
  margin-bottom: 1.5rem;
}

.wir-beta-close {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background-color: var(--wir-beta-muted);
  color: var(--wir-beta-muted-foreground);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 600;
  transition: all var(--wir-beta-duration-fast) var(--wir-beta-easing);
  z-index: 1;
}

.wir-beta-close:hover,
.wir-beta-close:focus-visible {
  background-color: var(--wir-beta-destructive);
  color: var(--wir-beta-primary-foreground);
  transform: scale(1.05);
  outline: 2px solid var(--wir-beta-primary);
  outline-offset: 2px;
}

.wir-beta-title {
  font-family: var(--wir-beta-font-brand);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wir-beta-card-foreground);
  margin: 0 0 0.5rem 0;
  padding-right: 2rem;
}

.wir-beta-subtitle {
  font-family: var(--wir-beta-font-plain);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--wir-beta-muted-foreground);
  margin: 0;
}

/* ===== FORM STYLING ===== */

.wir-beta-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wir-beta-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.wir-beta-label {
  font-family: var(--wir-beta-font-plain);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wir-beta-card-foreground);
  margin: 0;
}

.wir-beta-required {
  color: var(--wir-beta-destructive);
  font-weight: 600;
  margin-left: 0.125rem;
}

.wir-beta-input,
.wir-beta-select {
  font-family: var(--wir-beta-font-plain);
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--wir-beta-border);
  border-radius: 0.5rem;
  background-color: var(--wir-beta-background);
  color: var(--wir-beta-foreground);
  transition: all var(--wir-beta-duration-fast) var(--wir-beta-easing);
  outline: none;
  width: 100%;
}

.wir-beta-input:focus,
.wir-beta-select:focus {
  border-color: var(--wir-beta-primary);
  box-shadow: 0 0 0 2px rgba(158, 50%, 28%, 0.1);
}

.wir-beta-input-error {
  border-color: var(--wir-beta-destructive) !important;
  box-shadow: 0 0 0 2px rgba(346, 87%, 43%, 0.1) !important;
}

.wir-beta-input::placeholder {
  color: var(--wir-beta-muted-foreground);
}

.wir-beta-select {
  cursor: pointer;
}

/* ===== CONSENT CHECKBOX ===== */

.wir-beta-consent-group {
  gap: 0.75rem;
}

.wir-beta-checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.wir-beta-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--wir-beta-border);
  border-radius: 0.25rem;
  background-color: var(--wir-beta-background);
  cursor: pointer;
  transition: all var(--wir-beta-duration-fast) var(--wir-beta-easing);
  margin: 0;
  flex-shrink: 0;
}

.wir-beta-checkbox:checked {
  background-color: var(--wir-beta-primary);
  border-color: var(--wir-beta-primary);
}

.wir-beta-checkbox:focus-visible {
  outline: 2px solid var(--wir-beta-primary);
  outline-offset: 2px;
}

.wir-beta-checkbox-label {
  font-family: var(--wir-beta-font-plain);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--wir-beta-card-foreground);
  cursor: pointer;
  margin: 0;
  flex-grow: 1;
}

.wir-beta-privacy-link {
  color: var(--wir-beta-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.125rem;
  transition: color var(--wir-beta-duration-fast) var(--wir-beta-easing);
}

.wir-beta-privacy-link:hover,
.wir-beta-privacy-link:focus-visible {
  color: var(--wir-beta-primary);
  text-decoration-thickness: 2px;
  outline: 2px solid var(--wir-beta-primary);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ===== ACTION BUTTONS ===== */

.wir-beta-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.wir-beta-submit,
.wir-beta-later {
  font-family: var(--wir-beta-font-plain);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all var(--wir-beta-duration-fast) var(--wir-beta-easing);
  outline: none;
  position: relative;
  overflow: hidden;
  min-width: 8rem;
  flex-grow: 1;
}

.wir-beta-submit {
  background-color: var(--wir-beta-primary);
  color: var(--wir-beta-primary-foreground);
}

.wir-beta-submit:hover:not(:disabled) {
  background-color: hsl(158, 50%, 25%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wir-beta-submit:focus-visible {
  outline: 2px solid var(--wir-beta-primary);
  outline-offset: 2px;
}

.wir-beta-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.wir-beta-later {
  background-color: var(--wir-beta-muted);
  color: var(--wir-beta-muted-foreground);
  border: 1px solid var(--wir-beta-border);
}

.wir-beta-later:hover {
  background-color: var(--wir-beta-border);
  color: var(--wir-beta-foreground);
  transform: translateY(-1px);
}

.wir-beta-later:focus-visible {
  outline: 2px solid var(--wir-beta-primary);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .wir-beta-actions {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }
  
  .wir-beta-submit,
  .wir-beta-later {
    width: 100%;
    padding: 1rem 1.5rem;
  }
}

/* ===== ERROR AND SUCCESS MESSAGES ===== */

.wir-beta-field-error {
  font-family: var(--wir-beta-font-plain);
  font-size: 0.75rem;
  color: var(--wir-beta-destructive);
  margin: 0;
  display: none;
  line-height: 1.4;
}

.wir-beta-message-container {
  margin-top: 1rem;
}

.wir-beta-message {
  font-family: var(--wir-beta-font-plain);
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin: 0;
  line-height: 1.5;
  border: 1px solid;
  animation: wir-beta-fade-in var(--wir-beta-duration-normal) var(--wir-beta-easing);
}

.wir-beta-message-success {
  background-color: hsl(142, 76%, 36%, 0.1);
  border-color: var(--wir-beta-success);
  color: var(--wir-beta-success);
}

.wir-beta-message-error {
  background-color: hsl(346, 87%, 43%, 0.1);
  border-color: var(--wir-beta-destructive);
  color: var(--wir-beta-destructive);
}

.wir-beta-message-info {
  background-color: hsl(158, 50%, 28%, 0.1);
  border-color: var(--wir-beta-primary);
  color: var(--wir-beta-primary);
}

/* ===== HONEYPOT (HIDDEN SPAM PROTECTION) ===== */

.wir-beta-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  tabindex: -1 !important;
}

/* ===== ANIMATIONS ===== */

@keyframes wir-beta-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== ACCESSIBILITY & FOCUS MANAGEMENT ===== */

/* Focus visible styles for better keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--wir-beta-primary);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Ensure good contrast for all interactive elements */
@media (prefers-contrast: high) {
  .wir-beta-input,
  .wir-beta-select {
    border-width: 2px;
  }
  
  .wir-beta-submit {
    border: 2px solid var(--wir-beta-primary-foreground);
  }
  
  .wir-beta-later {
    border-width: 2px;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .wir-beta-overlay,
  .wir-beta-modal,
  .wir-beta-close,
  .wir-beta-input,
  .wir-beta-select,
  .wir-beta-checkbox,
  .wir-beta-submit,
  .wir-beta-later,
  .wir-beta-privacy-link {
    transition: none !important;
    animation: none !important;
  }
  
  .wir-beta-submit:hover:not(:disabled),
  .wir-beta-later:hover {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .wir-beta-overlay {
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  .wir-beta-modal {
    border: 2px solid var(--wir-beta-foreground);
  }
  
  .wir-beta-input,
  .wir-beta-select,
  .wir-beta-checkbox {
    border-width: 2px;
  }
}

/* Print styles - hide banner when printing */
@media print {
  .wir-beta-overlay {
    display: none !important;
  }
}

/* ===== CUSTOM SCROLLBAR FOR MODAL CONTENT ===== */

.wir-beta-content::-webkit-scrollbar {
  width: 6px;
}

.wir-beta-content::-webkit-scrollbar-track {
  background: var(--wir-beta-muted);
  border-radius: 3px;
}

.wir-beta-content::-webkit-scrollbar-thumb {
  background: var(--wir-beta-border);
  border-radius: 3px;
}

.wir-beta-content::-webkit-scrollbar-thumb:hover {
  background: var(--wir-beta-muted-foreground);
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */

@media (max-width: 640px) {
  .wir-beta-title {
    font-size: 1.25rem;
    padding-right: 2.5rem;
  }
  
  .wir-beta-subtitle {
    font-size: 0.8125rem;
  }
  
  .wir-beta-label,
  .wir-beta-input,
  .wir-beta-select,
  .wir-beta-checkbox-label {
    font-size: 1rem; /* Larger for mobile tap targets */
  }
  
  .wir-beta-submit,
  .wir-beta-later {
    font-size: 1rem;
  }
}