/* Responsive Styles for Boxx Insurance Complaints Form */

/* ===== Mobile First Approach ===== */

/* Extra Small Devices (320px and up) - Mobile phones */
@media (min-width: 320px) {
  .container {
    padding: var(--spacing-md);
  }
  
  .form-header h1 {
    font-size: 24px;
  }
  
  .form-header p {
    font-size: var(--font-size-base);
  }
  
  .complaints-form {
    padding: var(--spacing-lg);
  }
  
  legend {
    font-size: var(--font-size-base);
  }
  
  .btn-submit {
    width: 100%;
    padding: var(--spacing-md);
  }
}

/* Small Devices (576px and up) - Large phones */
@media (min-width: 576px) {
  .container {
    padding: var(--spacing-lg);
  }
  
  .form-header h1 {
    font-size: 28px;
  }
  
  .complaints-form {
    padding: var(--spacing-xl);
  }
  
  .btn-submit {
    width: auto;
    min-width: 200px;
  }
}

/* Medium Devices (768px and up) - Tablets */
@media (min-width: 768px) {
  .container {
    padding: var(--spacing-xl);
  }
  
  .form-header {
    padding: var(--spacing-xxl) 0;
  }
  
  .form-header h1 {
    font-size: var(--font-size-h1);
  }
  
  .form-header p {
    font-size: var(--font-size-large);
  }
  
  legend {
    font-size: var(--font-size-large);
  }
  
  /* Two-column layout for some fields on tablets */
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
  }
}

/* Large Devices (992px and up) - Desktops */
@media (min-width: 992px) {
  .container {
    max-width: 800px;
  }
  
  .complaints-form {
    padding: var(--spacing-xxl);
  }
  
  /* Enhanced hover effects on desktop */
  .btn-submit:hover {
    transform: translateY(-2px);
  }
}

/* Extra Large Devices (1200px and up) - Large desktops */
@media (min-width: 1200px) {
  .container {
    max-width: 900px;
  }
}

/* ===== Print Styles ===== */
@media print {
  body {
    background-color: white;
  }
  
  .container {
    max-width: 100%;
    padding: 0;
  }
  
  .complaints-form {
    box-shadow: none;
    border: 1px solid #000;
  }
  
  .btn-submit {
    display: none;
  }
  
  .form-message {
    border: 2px solid #000;
  }
  
  /* Show all form values for printing */
  input, select, textarea {
    border: 1px solid #000;
  }
}

/* ===== Landscape Orientation ===== */
@media (orientation: landscape) and (max-height: 600px) {
  .form-header {
    padding: var(--spacing-lg) 0;
    margin-bottom: var(--spacing-lg);
  }
  
  .logo {
    max-width: 120px;
    margin-bottom: var(--spacing-md);
  }
  
  .form-header h1 {
    font-size: 24px;
    margin-bottom: var(--spacing-sm);
  }
  
  .form-header p {
    font-size: var(--font-size-small);
  }
}

/* ===== Touch Device Optimizations ===== */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets for mobile */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea,
  button {
    min-height: 44px; /* iOS recommended minimum */
  }
  
  .checkbox-group input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
  
  /* Remove hover effects on touch devices */
  .btn-submit:hover {
    transform: none;
  }
}

/* ===== Iframe-specific Styles ===== */
body.iframe-mode {
  background-color: transparent;
  padding: 0;
  margin: 0;
}

body.iframe-mode .container {
  padding: var(--spacing-md);
  max-width: 100%;
}

body.iframe-mode .form-header {
  padding: var(--spacing-md) 0;
  margin-bottom: var(--spacing-lg);
}

body.iframe-mode .complaints-form {
  box-shadow: none;
  border: 1px solid var(--color-border);
}

/* ===== Accessibility - High Contrast Mode ===== */
@media (prefers-contrast: high) {
  .btn-submit {
    border: 3px solid currentColor;
  }
  
  .form-message {
    border-width: 3px;
  }
}