/* 
 * SureEntry Tour Page Responsive Optimizations
 * Additional CSS for ensuring optimal display across all device sizes
 */

/* Extra Small Devices (phones, 576px and down) */
@media (max-width: 576px) {
  /* Header - Fixed for iPhone */
  .header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--dark-color);
  }
  
  .navbar {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .navbar-brand, .navbar-toggler {
    position: relative;
    z-index: 1001;
  }
  
  /* Ensure navbar collapse takes full width */
  .navbar-collapse {
    width: 100%;
  }
  
  /* Hero Section */
  .hero-section {
    padding: 120px 0 60px;
    text-align: center;
  }
  
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .hero-section p {
    font-size: 1rem;
  }
  
  .hero-image {
    margin-top: 30px;
  }
  
  /* Tour Sections */
  .tour-section {
    padding: 50px 0;
  }
  
  .step-number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 1.2rem;
  }
  
  .step-content h2 {
    font-size: 1.8rem;
  }
  
  .step-content p {
    font-size: 1rem;
  }
  
  /* Animation Containers */
  .animation-container {
    height: auto;
    min-height: 250px;
    padding: 15px;
  }
  
  /* CSV Upload Animation */
  .csv-upload-animation {
    flex-direction: column;
  }
  
  .upload-arrow {
    transform: rotate(90deg);
    margin: 15px 0;
  }
  
  /* Tablet Device */
  .tablet-device {
    transform: scale(0.8);
    margin: -20px;
  }
  
  /* User Flow Animation */
  .user-flow-animation {
    flex-direction: column;
    gap: 15px;
  }
  
  .flow-arrow {
    transform: rotate(90deg);
  }
  
  /* Dashboard Animation */
  .dashboard-content {
    flex-direction: column;
  }
  
  .dashboard-sidebar {
    width: 100%;
    padding: 10px 0;
  }
  
  .sidebar-item {
    padding: 8px 15px;
  }
  
  .stat-cards {
    flex-direction: column;
    gap: 10px;
  }
  
  /* CTA Section */
  .cta-section {
    padding: 50px 0;
  }
  
  .cta-section h2 {
    font-size: 1.8rem;
  }
  
  .cta-buttons {
    flex-direction: column;
    gap: 15px;
    margin: 0 auto;
    max-width: 250px;
  }
  
  .guarantee-badge {
    padding: 8px 15px;
  }
  
  .guarantee-badge i {
    font-size: 1.2rem;
  }
  
  .guarantee-badge span {
    font-size: 0.9rem;
  }
  
  /* Footer */
  .footer {
    padding: 50px 0 30px;
    text-align: center;
  }
  
  .footer-links {
    margin-bottom: 30px;
  }
  
  .social-links {
    justify-content: center;
    margin-top: 20px;
  }
}

/* Small Devices (tablets, 576px to 768px) */
@media (min-width: 576px) and (max-width: 768px) {
  /* Hero Section */
  .hero-section {
    padding: 130px 0 70px;
  }
  
  .hero-section h1 {
    font-size: 2.2rem;
  }
  
  /* Tour Sections */
  .tour-section {
    padding: 60px 0;
  }
  
  /* Animation Containers */
  .animation-container {
    height: 300px;
  }
  
  /* Tablet Device */
  .tablet-device {
    transform: scale(0.9);
    margin: -10px;
  }
  
  /* CTA Section */
  .cta-buttons {
    flex-direction: column;
    gap: 15px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Medium Devices (tablets and small laptops, 768px to 992px) */
@media (min-width: 768px) and (max-width: 992px) {
  /* Hero Section */
  .hero-section {
    padding: 140px 0 80px;
  }
  
  .hero-section h1 {
    font-size: 2.5rem;
  }
  
  /* Tour Sections */
  .tour-section {
    padding: 70px 0;
  }
  
  /* Animation Containers */
  .animation-container {
    height: 350px;
  }
  
  /* Dashboard Animation */
  .dashboard-sidebar {
    width: 160px;
  }
}

/* iPad specific fixes */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Center buttons better on iPad */
  .cta-buttons {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    max-width: 300px;
  }
  
  /* Fix buttons in tablet interface */
  .tablet-screen {
    height: 320px !important; /* Slightly smaller on iPad to prevent overflow */
    overflow: hidden;
  }
  
  .tablet-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .input-field {
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
  }
  
  .input-field input {
    margin: 0 auto;
    max-width: 80%;
  }
  
  .pin-pad {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
  }
  
  .pin-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Fixed positioning for last name entry button */
  .tablet-content .btn {
    position: static !important;
    width: 80%;
    margin: 10px auto 0;
  }
  
  /* Fix for the check-in screen showing another button */
  .tablet-device {
    overflow: hidden;
    height: 400px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) {
  /* Improve touch targets */
  .btn, .nav-link, .pin-button, .sidebar-item, .social-links a {
    padding: 12px 20px;
  }
  
  .pin-button {
    height: 50px;
  }
  
  /* Remove hover effects that don't work well on touch */
  .btn:hover, .nav-link:hover, .user-select:hover, .sidebar-item:hover, .social-links a:hover {
    transform: none;
    box-shadow: none;
  }
  
  /* Add active state feedback for touch */
  .btn:active, .nav-link:active, .user-select:active, .sidebar-item:active, .social-links a:active {
    transform: scale(0.95);
    transition: transform 0.1s;
  }
}

/* Print Styles */
@media print {
  .navbar, .cta-section, .footer {
    display: none;
  }
  
  .hero-section, .tour-section {
    padding: 20px 0;
    page-break-inside: avoid;
  }
  
  .animation-container {
    border: 1px solid #ddd;
    box-shadow: none;
  }
  
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  
  a {
    text-decoration: underline;
    color: #000;
  }
  
  .container {
    max-width: 100%;
    width: 100%;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  body {
    color: #000;
    background: #fff;
  }
  
  .hero-section, .cta-section {
    background: #0D6EFD;
    color: #fff;
  }
  
  .btn-primary {
    background-color: #0D6EFD;
    border-color: #000;
    color: #fff;
  }
  
  .btn-outline-light {
    border-color: #000;
    color: #000;
  }
  
  .footer {
    background-color: #000;
    color: #fff;
  }
}

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .animation-container {
    min-height: 200px;
    height: auto;
  }
  
  .csv-upload-animation, .tablet-device, .user-flow-animation, .dashboard-animation {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .progress-bar {
    width: 100% !important;
  }
}

/* Additional mobile fixes for tour page */
@media (max-width: 768px) {
    /* Fix step content positioning */
    .step-content {
        position: relative;
        padding-top: 20px;
    }
    
    /* Dashboard animation mobile fix */
    .dashboard-title {
        font-size: 1rem;
        padding: 10px;
    }
    
    /* Fix animation containers on mobile */
    .animation-container {
        overflow: visible; /* Allow badges to show */
        position: relative;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .dashboard-title {
        font-size: 0.9rem;
    }
    
    .stat-cards {
        gap: 10px !important;
    }
    
    .stat-card {
        padding: 10px !important;
    }
    
    .stat-value {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .dashboard-animation .chart-placeholder {
        background-color: transparent !important;
    }
}