/* 
 * Responsive Validation Styles
 * Ensuring consistent display across all devices and screen sizes
 */

/* Global responsive improvements */
html {
  font-size: 16px;
}

@media (max-width: 1400px) {
  html {
    font-size: 15px;
  }
}

@media (max-width: 992px) {
  html {
    font-size: 14px;
  }
}

/* Action Offers responsive fixes */
@media (max-width: 992px) {
  .action-offers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .action-offer-card:nth-child(3) {
    grid-column: span 2;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .action-offers-grid {
    grid-template-columns: 1fr;
  }
  
  .action-offer-card:nth-child(3) {
    grid-column: span 1;
  }
}

/* Offer packages responsive fixes */
@media (max-width: 1200px) {
  .offer-container {
    gap: 2rem;
  }
}

@media (max-width: 992px) {
  .offer-card.recommended {
    transform: scale(1.03);
  }
  
  .offer-card.recommended:hover {
    transform: translateY(-15px) rotateX(5deg) scale(1.03);
  }
}

/* CTA responsive improvements */
@media (max-width: 576px) {
  .hero-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }
  
  .hero-cta .cta-button {
    width: 100%;
  }
  
  .floating-cta {
    bottom: 1rem;
    right: 1rem;
  }
  
  .floating-cta-button {
    padding: 0.75rem 1.25rem;
  }
  
  .floating-cta-button span {
    display: none;
  }
  
  .floating-cta-button i {
    margin-right: 0;
  }
}

/* Touch device optimizations */
@media (hover: none) {
  .action-offer-card:hover,
  .offer-card:hover,
  .cta-button:hover,
  .action-offer-cta:hover,
  .offer-cta:hover,
  .submit-button:hover {
    transform: none;
  }
  
  .action-offer-card:active,
  .offer-card:active,
  .cta-button:active,
  .action-offer-cta:active,
  .offer-cta:active,
  .submit-button:active {
    transform: scale(0.98);
  }
  
  .offer-card.recommended:hover {
    transform: scale(1.05);
  }
  
  .offer-card.recommended:active {
    transform: scale(1.03);
  }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
  .cta-button,
  .action-offer-cta,
  .offer-cta,
  .submit-button,
  .floating-cta-button {
    min-height: 44px; /* Minimum touch target size */
  }
  
  input, 
  textarea, 
  select,
  button {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Print styles */
@media print {
  .floating-cta,
  .cta-button,
  .action-offer-cta,
  .offer-cta,
  .submit-button {
    display: none !important;
  }
  
  .offer-card,
  .action-offer-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }
  
  .offer-card.recommended {
    transform: none !important;
    animation: none !important;
  }
  
  .recommended-badge {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
  }
  
  .offer-header,
  .action-offer-icon {
    background: #f5f5f5 !important;
    color: #000 !important;
  }
  
  .offer-header::before {
    display: none !important;
  }
}