/* 
 * SureEntry.io Responsive Enhancements
 * This file contains additional responsive styles for the SureEntry.io application
 */

/* Extra Large Screens (1600px and up) */
@media (min-width: 1600px) {
  .container {
    max-width: 1440px;
  }
  
  .hero-section {
    padding: 120px 0 100px;
  }
  
  .feature-card, .system-card, .pricing-card {
    padding: 40px;
  }
  
  .animation-container {
    height: 520px;
  }
  
  .tablet-device {
    transform: scale(1.05);
  }
}

/* Large Screens (1200px to 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
  .container {
    max-width: 1140px;
  }
  
  .hero-section {
    padding: 100px 0 80px;
  }
  
  .feature-card, .system-card, .pricing-card {
    padding: 35px;
  }
}

/* Medium Screens (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    max-width: 960px;
  }
  
  .hero-section {
    padding: 80px 0 60px;
  }
  
  .hero-section h1 {
    font-size: 2.8rem;
  }
  
  .feature-card, .system-card, .pricing-card {
    padding: 30px;
  }
  
  .price {
    font-size: 2.2rem;
  }
  
  .animation-container {
    padding: 25px;
  }
  
  .tablet-device {
    transform: scale(0.95);
  }
}

/* Small Laptop with Half Screen (1200px and below) */
@media (max-width: 1200px) {
  /* Improve pricing cards layout for half screen */
  .pricing-card {
    padding: 20px;
  }
  
  .pricing-card ul {
    padding-left: 0;
  }
  
  .pricing-card ul li {
    font-size: 0.9rem;
  }
  
  .price {
    font-size: 2rem;
  }
  
  /* Ensure tour page elements fit properly */
  .tour-section .row {
    flex-direction: column;
  }
  
  .tour-section .col-md-6 {
    width: 100%;
    max-width: 100%;
  }
  
  .animation-container {
    height: auto;
    min-height: 300px;
  }
}

/* Small Screens (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .container {
    max-width: 720px;
  }
  
  .hero-section {
    padding: 60px 0 40px;
  }
  
  .hero-section h1 {
    font-size: 2.5rem;
  }
  
  .feature-card, .system-card, .pricing-card {
    padding: 25px;
  }
  
  .price {
    font-size: 2rem;
  }
  
  .animation-container {
    padding: 20px;
    height: 460px;
  }
  
  .tablet-device {
    transform: scale(0.9);
  }
  
  /* Improve column spacing */
  .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  /* Adjust spacing for better mobile view */
  section {
    padding: 50px 0;
  }
  
  section .text-center {
    margin-bottom: 2rem;
  }
  
  /* Ensure buttons stack properly on smaller screens */
  .d-md-flex {
    gap: 10px;
  }
}

/* Extra Small Screens (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .container {
    max-width: 540px;
  }
  
  .hero-section {
    padding: 50px 0 30px;
  }
  
  .hero-section h1 {
    font-size: 2.2rem;
  }
  
  .feature-card, .system-card, .pricing-card {
    padding: 20px;
  }
  
  .price {
    font-size: 1.8rem;
  }
  
  .animation-container {
    padding: 15px;
    height: 440px;
  }
  
  .tablet-device {
    transform: scale(0.85);
  }
  
  /* Improve column spacing */
  .row {
    margin-left: -8px;
    margin-right: -8px;
  }
  
  .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }
  
  /* Adjust spacing for better mobile view */
  section {
    padding: 40px 0;
  }
  
  section .text-center {
    margin-bottom: 1.5rem;
  }
  
  /* Ensure buttons stack properly on smaller screens */
  .d-md-flex {
    flex-direction: column;
    gap: 10px;
  }
  
  .d-md-flex .btn {
    width: 100%;
    margin-bottom: 10px;
  }
  
  /* Adjust pricing toggle for smaller screens */
  .pricing-toggle {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .save-badge {
    margin-top: 10px;
    margin-left: 0;
  }
}

/* Mobile Screens (up to 575px) */
@media (max-width: 575px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .hero-section {
    padding: 40px 0 20px;
  }
  
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .feature-card, .system-card, .pricing-card {
    padding: 15px;
  }
  
  .price {
    font-size: 1.6rem;
  }
  
  .animation-container {
    padding: 10px;
    height: 420px;
  }
  
  .tablet-device {
    transform: scale(0.8);
  }
  
  /* Improve column spacing */
  .row {
    margin-left: -5px;
    margin-right: -5px;
  }
  
  .row > [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  /* Adjust spacing for better mobile view */
  section {
    padding: 30px 0;
  }
  
  section .text-center {
    margin-bottom: 1.25rem;
  }
  
  /* Ensure buttons stack properly on smaller screens */
  .d-md-flex {
    flex-direction: column;
    gap: 8px;
  }
  
  .d-md-flex .btn {
    width: 100%;
    margin-bottom: 8px;
  }
  
  /* Adjust pricing toggle for smaller screens */
  .pricing-toggle {
    flex-direction: column;
    gap: 10px;
  }
  
  .toggle-switch {
    margin: 10px 0;
  }
  
  .save-badge {
    margin-top: 5px;
    margin-left: 0;
  }
  
  /* Adjust font sizes for better readability on mobile */
  body {
    font-size: 0.95rem;
  }
  
  h1 {
    font-size: 1.8rem;
  }
  
  h2 {
    font-size: 1.6rem;
  }
  
  h3 {
    font-size: 1.4rem;
  }
  
  .lead {
    font-size: 1rem;
  }
  
  /* Ensure navbar is usable on small screens */
  .navbar-brand {
    font-size: 1.3rem;
  }
  
  .navbar-toggler {
    padding: 0.25rem 0.5rem;
  }
  
  .navbar-nav .nav-link {
    padding: 0.5rem 0;
  }
}

/* Touch Device Optimizations */
@media (hover: none) {
  /* Disable hover effects that might cause issues on touch devices */
  .feature-card:hover,
  .system-card:hover,
  .pricing-card:hover,
  .testimonial-card:hover {
    transform: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }
  
  /* Increase touch targets for better usability */
  .btn {
    padding: 12px 25px;
  }
  
  .navbar-nav .nav-link {
    padding: 12px 15px;
  }
  
  /* Ensure proper tap behavior */
  a, button, .btn, .nav-link {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
  
  /* Optimize forms for touch input */
  input, select, textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
  
  /* Ensure scrolling is smooth on touch devices */
  .tablet-screen {
    -webkit-overflow-scrolling: touch;
  }
}

/* Print Styles */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.4;
    color: #000;
    background: #fff;
  }
  
  .navbar, .footer, .cta-section, .btn {
    display: none !important;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  table, figure {
    page-break-inside: avoid;
  }
  
  .container {
    max-width: 100%;
    width: 100%;
  }
  
  .col-md-4, .col-lg-4 {
    width: 33.33%;
    float: left;
  }
  
  .col-md-6, .col-lg-6 {
    width: 50%;
    float: left;
  }
  
  .col-md-12, .col-lg-12 {
    width: 100%;
  }
}

/* High-DPI Screen Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure images are sharp on high-DPI screens */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
  
  /* Adjust border widths for high-DPI screens */
  .pricing-card.popular {
    border-width: 1px;
  }
  
  /* Ensure thin lines are visible */
  hr, .border-top, .border-bottom {
    border-width: 1px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  /* We're not implementing full dark mode, but adding this media query for future compatibility */
  /* This ensures the site doesn't break if a user has dark mode enabled */
  .navbar-light {
    background-color: var(--header-bg-color) !important;
  }
  
  .navbar-light .navbar-brand,
  .navbar-light .navbar-nav .nav-link {
    color: white !important;
  }
}

/* Orientation Changes */
@media screen and (orientation: portrait) {
  /* Adjust layout for portrait orientation on tablets */
  .tablet-device {
    margin: 0 auto;
  }
}

@media screen and (orientation: landscape) and (max-height: 500px) {
  /* Adjust layout for landscape orientation on phones */
  .hero-section {
    padding: 30px 0;
  }
  
  .animation-container {
    height: 380px;
  }
  
  .tablet-device {
    transform: scale(0.75);
  }
}

/* Accessibility Improvements */
@media screen and (prefers-reduced-motion: reduce) {
  /* Disable animations for users who prefer reduced motion */
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}