/* ===============================================
   Custom Mobile Responsive Styles
   =============================================== */

/* ===== Mobile & Tablet Optimization ===== */

/* Small devices (phones, less than 768px) */
@media (max-width: 767.98px) {
    
    /* Header Mobile Fixes */
    .rts-header1 .navbar-inner {
        padding: 15px 0;
    }
    
    .rts-header1 .logo img,
    .rts-header1 .logo-sticky img {
        max-width: 120px;
        height: auto;
    }
    
    /* Hide desktop menu on mobile */
    .rts-header1 .rts-menu {
        display: none;
    }
    
    /* Mobile menu hamburger */
    .hamburger-menu {
        display: block !important;
        cursor: pointer;
    }
    
    /* Search and cart icons spacing */
    .header-action-items {
        gap: 10px;
    }
    
    .search-icon,
    .cart-icon {
        font-size: 18px;
    }
    
    /* Banner section mobile */
    .banner .banner-heading {
        font-size: 28px !important;
        line-height: 1.3;
    }
    
    .banner .page-path {
        font-size: 14px;
    }
    
    /* Footer Mobile Optimization */
    .footer .footer-widget {
        margin-bottom: 30px;
        text-align: center;
    }
    
    .footer .footer-logo img {
        max-width: 150px;
        height: auto;
        margin: 0 auto;
    }
    
    .footer .footer-text {
        font-size: 14px;
        line-height: 1.6;
        padding: 0 15px;
    }
    
    .footer .footer-widget-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .footer .widget-items li {
        margin-bottom: 10px;
    }
    
    .footer .widget-items a {
        font-size: 14px;
    }
    
    .footer .social-links {
        justify-content: center;
        margin-top: 20px;
    }
    
    .footer .social-links .platform {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        margin: 0 5px;
    }
    
    /* Footer bottom area */
    .footer-bottom-area .bottom-area-inner {
        flex-direction: column;
        text-align: center;
        padding: 20px 0;
    }
    
    .footer-bottom-area .copyright {
        font-size: 13px;
        margin-bottom: 15px;
    }
    
    .footer-bottom-links {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-bottom-links a {
        font-size: 13px;
        display: block;
        padding: 5px 0;
    }
    
    /* Post Gallery responsive */
    .footer .recent-post {
        justify-content: center;
    }
    
    .footer .picture {
        width: 80px;
        height: 80px;
    }
    
    /* Mobile sidebar menu */
    .slide-bar {
        width: 300px;
    }
    
    .side-mobile-menu {
        padding: 20px;
    }
    
    .side-mobile-menu a {
        font-size: 15px;
        padding: 12px 15px;
    }
    
    /* Cart sidebar on mobile */
    .cart-bar {
        width: 300px;
    }
    
    .product-item {
        padding: 15px 10px;
    }
    
    .product-thumb img {
        max-width: 60px;
    }
    
    .product-name {
        font-size: 14px;
    }
    
    /* Search input mobile */
    .search-input-area {
        padding: 20px 15px;
    }
    
    .search-input {
        font-size: 14px;
        padding: 10px 15px;
    }
    
    /* Scroll to top button */
    .scroll-top-btn {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
    }
}

/* Medium devices (tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    
    /* Header tablet fixes */
    .rts-header1 .logo img,
    .rts-header1 .logo-sticky img {
        max-width: 140px;
    }
    
    .rts-header1 .nav__menu > li {
        margin: 0 10px;
    }
    
    .nav__menu a {
        font-size: 14px;
    }
    
    /* Banner tablet */
    .banner .banner-heading {
        font-size: 36px !important;
    }
    
    /* Footer tablet */
    .footer .footer-widget {
        margin-bottom: 40px;
        text-align: left;
    }
    
    .footer .col-md-6 {
        width: 50%;
        float: left;
    }
    
    .footer .footer-widget-title {
        font-size: 20px;
    }
    
    .footer .recent-post {
        justify-content: flex-start;
    }
}

/* Large devices (desktops, 992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    
    .rts-header1 .nav__menu > li {
        margin: 0 12px;
    }
    
    .nav__menu a {
        font-size: 15px;
    }
    
    .container {
        max-width: 960px;
    }
}

/* Extra small devices (phones in portrait, less than 576px) */
@media (max-width: 575.98px) {
    
    /* Extra small header fixes */
    .navbar-inner {
        padding: 10px 0;
    }
    
    .rts-header1 .logo img,
    .rts-header1 .logo-sticky img {
        max-width: 100px;
    }
    
    /* Banner extra small */
    .banner .banner-heading {
        font-size: 24px !important;
        padding: 0 15px;
    }
    
    .banner .page-path li {
        font-size: 12px;
    }
    
    /* Footer extra small */
    .footer {
        padding: 40px 0 20px;
    }
    
    .footer .footer-widget {
        padding: 0 15px;
    }
    
    .footer .col-xl-3,
    .footer .col-md-6,
    .footer .col-sm-6 {
        width: 100%;
        max-width: 100%;
    }
    
    .footer-bottom-area {
        padding: 15px 0;
    }
    
    /* Newsletter popup mobile */
    .rts-newsletter-popup .newsletter-inner {
        padding: 30px 20px;
        width: 90%;
        margin: 0 auto;
    }
    
    .newsletter-heading {
        font-size: 20px;
    }
    
    .newsletter-inner p {
        font-size: 14px;
    }
    
    .newsletter-inner input {
        font-size: 14px;
        padding: 12px 15px;
    }
}

/* Landscape orientation fixes */
@media (max-height: 500px) and (orientation: landscape) {
    
    .banner {
        min-height: 200px;
    }
    
    .banner .banner-heading {
        font-size: 24px !important;
    }
    
    .slide-bar {
        overflow-y: auto;
    }
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
    
    /* Larger touch targets */
    .nav__menu a,
    .dropdown-link,
    .footer-widget a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    .social-links .platform {
        min-width: 44px;
        min-height: 44px;
    }
    
    .header-action-items .action-item {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Remove hover effects on touch devices */
    .nav__menu a:hover,
    .dropdown-link:hover {
        transform: none;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .nav__menu a,
    .footer-widget a {
        text-decoration: underline;
    }
}

/* ===== Additional Mobile Enhancements ===== */

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

/* Better image handling on mobile */
img {
    max-width: 100%;
    height: auto;
}

/* Mobile-friendly containers */
@media (max-width: 767.98px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Fix for iOS devices */
@supports (-webkit-touch-callout: none) {
    .navbar-sticky {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles here if needed */
}