/*
 * Mobile Optimization Styles
 * Improves mobile UX across all pages with focus on:
 * - Touch target sizing (min 44px)
 * - Layer stacking / z-index fixes
 * - Typography & spacing
 * - Sticky bottom action bar
 * - Smooth interactions & feedback
 *
 * @package XTPLC
 * @since 1.0.0
 */

/* ======================================================
   1. BASE MOBILE IMPROVEMENTS
   ====================================================== */

/* Prevent text size adjustment on orientation change */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Remove tap highlight on mobile */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling - but respect prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Better touch feedback for all interactive elements */
a, button, .btn, .tabs-nav__btn, .menu-toggle, .product-zoom-btn,
.extras-card, .product-card, .blog-card, .single-product__thumb {
    -webkit-touch-callout: none;
}

/* Fix menu toggle z-index to stay above content when scrolling */
.menu-toggle {
    position: relative;
    z-index: 1001;
}

/* Ensure header nav has proper stacking context */
.header-nav {
    z-index: 1000;
}

/* Fix sticky header behavior on mobile */
@media (max-width: 767px) {
    .header-nav {
        z-index: 1000;
    }

    .main-navigation {
        z-index: 999;
    }
}

/* ======================================================
   2. PRODUCT DETAIL PAGE - LAYER STACKING & Z-INDEX
   ====================================================== */

/* Ensure container establishes proper stacking context */
.site-main--single-product .container {
    position: relative;
    z-index: 1;
}

/* Gallery - maintain proper z-index for zoom button */
.single-product__gallery {
    position: relative;
    z-index: 2;
}

.product-zoom-btn {
    z-index: 5;
}

/* Main image - proper stacking for zoom overlay */
.single-product__main-image {
    position: relative;
    z-index: 1;
}

/* Thumbnails - ensure they stack above content below */
.single-product__thumbnails {
    position: relative;
    z-index: 1;
}

/* Info section - proper z-index relative to gallery */
.single-product__info {
    position: relative;
    z-index: 2;
}

/* Tabs section - proper stacking */
.single-product__tabs {
    position: relative;
    z-index: 1;
}

/* Sidebar extras */
.single-product__sidebar {
    position: relative;
    z-index: 1;
}

/* ======================================================
   3. MOBILE BOTTOM STICKY ACTION BAR
   ====================================================== */

/* Static placeholder to prevent content jump */
.single-product__action-bar-mobile-placeholder {
    display: none;
}

/* Mobile sticky bottom action bar */
@media (max-width: 767px) {
    .single-product__action-bar {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 10px 16px !important;
        background: #fff !important;
        border: none !important;
        border-top: 1px solid #e0e0e0 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
        flex-direction: row !important;
        gap: 10px;
        animation: mobileActionBarSlideUp 0.3s ease;
    }

    @keyframes mobileActionBarSlideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    .single-product__action-bar .action-bar__pricing {
        display: none;
    }

    .single-product__action-bar .action-bar__buttons {
        width: 100%;
        display: flex;
        gap: 10px;
    }

    .single-product__action-bar .action-bar__inquiry,
    .single-product__action-bar .action-bar__call {
        flex: 1;
        justify-content: center;
        padding: 12px 16px !important;
        font-size: 0.875rem !important;
        min-height: 48px;
        border-radius: 8px;
    }

    .single-product__action-bar .action-bar__inquiry {
        background: #1a73e8;
        color: #fff;
        border-color: #1a73e8;
    }

    .single-product__action-bar .action-bar__inquiry:active {
        background: #0d47a1;
        transform: scale(0.98);
    }

    .single-product__action-bar .action-bar__call {
        background: transparent;
        color: #1a73e8;
        border: 2px solid #1a73e8;
    }

    .single-product__action-bar .action-bar__call:active {
        background: #e8f0fe;
        transform: scale(0.98);
    }

    /* Add bottom padding to main content to prevent action bar overlap */
    .site-main--single-product .container {
        padding-bottom: 90px;
    }

    /* Hide zoom button on mobile (use tap-to-zoom instead) */
    .product-zoom-btn {
        display: none;
    }
}

/* ======================================================
   4. MOBILE TOUCH TARGETS & INTERACTION
   ====================================================== */

@media (max-width: 767px) {
    /* All clickable items need min 44px touch target */
    .tabs-nav__btn {
        min-height: 48px;
        padding: 12px 14px !important;
        font-size: 0.8125rem !important;
    }

    .btn {
        min-height: 48px;
        padding: 12px 24px !important;
    }

    .single-product__tag {
        min-height: 32px;
        padding: 6px 14px !important;
        font-size: 0.75rem !important;
    }

    .menu-toggle {
        min-height: 48px;
        min-width: 48px;
        justify-content: center;
        align-items: center;
    }

    .main-menu > li > a {
        min-height: 48px;
        padding: 14px 20px !important;
    }

    .product-card__btn {
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .section__view-all {
        min-height: 48px;
        padding: 12px 28px !important;
    }

    /* Active/press states */
    .btn--primary:active,
    .btn--outline:active {
        transform: scale(0.97);
    }

    .tabs-nav__btn:active {
        background: #e8f0fe;
    }

    .single-product__thumb:active {
        border-color: #1a73e8;
        background: #f1f9ff;
    }

    .product-card:active {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    /* Enhanced touch feedback for all buttons */
    .action-bar__inquiry:active,
    .action-bar__call:active {
        transform: scale(0.96) !important;
        transition-duration: 0.1s !important;
    }

    .action-bar__inquiry:active {
        background: #0d47a1 !important;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
    }

    .action-bar__call:active {
        background: #e8f0fe !important;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
    }

    .section__view-all:active {
        background: #1a73e8 !important;
        color: #fff !important;
        transform: scale(0.97);
    }

    .hero-slider__btn:active,
    .hero-slider__btn--outline:active {
        transform: scale(0.97);
        transition-duration: 0.1s;
    }

    .footer-social__link:active {
        transform: scale(0.92);
        opacity: 0.8;
    }

    .blog-card:active {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
}

/* iPad / tablet touch targets */
@media (min-width: 768px) and (max-width: 1024px) {
    .btn {
        min-height: 44px;
    }
    .tabs-nav__btn {
        min-height: 44px;
    }
}

/* ======================================================
   5. PRODUCT DETAIL - MOBILE TYPOGRAPHY & SPACING
   ====================================================== */

@media (max-width: 767px) {
    /* Product title - responsive sizing */
    .single-product__title {
        font-size: 1.3125rem !important;
        line-height: 1.35;
        margin-bottom: 10px !important;
    }

    /* Breadcrumbs - compact */
    .single-product__breadcrumbs {
        font-size: 0.75rem !important;
        margin-bottom: 10px !important;
        line-height: 1.5;
    }

    /* Tags - compact row */
    .single-product__tags {
        margin-bottom: 14px !important;
    }

    /* Specs summary card improvement */
    .single-product__specs-summary {
        padding: 12px 14px !important;
        margin-bottom: 16px !important;
        border-radius: 10px !important;
    }

    .specs-grid {
        gap: 8px !important;
    }

    .specs-grid__item {
        padding: 8px 10px !important;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 4px;
    }

    .spec-label {
        font-size: 0.75rem;
        color: #888;
        flex-shrink: 0;
    }

    .spec-value {
        font-size: 0.8125rem;
        font-weight: 600;
        color: #333;
        text-align: right;
        word-break: break-word;
    }

    /* Quick info - compact & scrollable if needed */
    .single-product__quick-info {
        gap: 10px !important;
        margin-bottom: 14px !important;
        padding-bottom: 0;
    }

    .quick-info__item {
        font-size: 0.75rem !important;
        gap: 5px;
    }

    .quick-info__item svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    /* Tabs section */
    .single-product__tabs {
        margin-top: 32px !important;
        border-radius: 10px !important;
    }

    .tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .tabs-nav__btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .tabs-panel {
        padding: 16px !important;
    }

    .tabs-panel .specs-table {
        font-size: 0.8125rem;
    }

    .tabs-panel .specs-table td {
        padding: 10px 8px;
    }

    .tabs-panel .specs-table td:first-child {
        min-width: 120px;
    }

    /* Content area */
    .single-product__content {
        font-size: 0.875rem !important;
        line-height: 1.8 !important;
    }

    /* Extras cards */
    .single-product__extras {
        margin-top: 24px !important;
    }

    .extras-card__title {
        padding: 14px 16px !important;
        font-size: 0.9375rem !important;
    }

    .extras-card__body {
        padding: 16px !important;
    }

    .extras-card__text {
        font-size: 0.8125rem !important;
        line-height: 1.6 !important;
    }

    .extras-card__contact-row {
        font-size: 0.8125rem !important;
        padding: 8px 0;
    }

    .extras-card__contact-row svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    /* Brand card */
    .extras-card__brand-logo {
        max-height: 32px !important;
    }

    .extras-card__link {
        font-size: 0.8125rem !important;
    }

    .sub-brand-chip {
        min-height: 32px;
        padding: 4px 12px;
        font-size: 0.75rem;
    }

    /* Related products */
    .related-products {
        margin-top: 32px !important;
        padding-top: 24px !important;
    }

    .related-products__title {
        font-size: 1.0625rem !important;
        margin-bottom: 18px !important;
    }

    /* Shipping info tab */
    .shipping-info h3 {
        font-size: 1rem;
        margin-top: 20px;
        margin-bottom: 8px;
    }

    .shipping-info p {
        font-size: 0.8125rem;
        line-height: 1.7;
    }
}

/* ======================================================
   6. GALLERY IMPROVEMENTS
   ====================================================== */

@media (max-width: 767px) {
    .single-product__gallery {
        position: static !important;
        top: auto !important;
        align-self: auto !important;
    }

    .single-product__main {
        display: flex !important;
        flex-direction: column !important;
    }

    .single-product__main-image {
        min-height: 280px !important;
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .single-product__main-image img {
        max-height: 280px !important;
    }

    .single-product__thumbnails {
        gap: 8px !important;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
    }

    .single-product__thumbnails::-webkit-scrollbar {
        display: none;
    }

    .single-product__thumb {
        width: 60px !important;
        height: 60px !important;
        flex-shrink: 0;
        border-radius: 8px !important;
    }
}

/* ======================================================
   7. HEADER / NAVIGATION MOBILE IMPROVEMENTS
   ====================================================== */

@media (max-width: 767px) {
    .header-nav__inner {
        height: 60px !important;
        gap: 12px !important;
        padding: 0 16px;
    }

    .site-branding__name {
        font-size: 1.0625rem !important;
    }

    .site-branding img {
        max-height: 40px !important;
    }

    .main-navigation {
        top: 60px !important;
    }

    .header-top {
        padding: 4px 0 !important;
        font-size: 0.75rem !important;
    }

    .header-top__inner {
        padding: 0 16px;
    }

    .header-top__contact a {
        font-size: 0.75rem;
    }

    .header-top__phone svg,
    .header-top__email svg {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 480px) {
    .header-top__tagline {
        display: none !important;
    }

    .header-top__contact {
        width: 100%;
        justify-content: center;
    }
}

/* ======================================================
   8. FOOTER MOBILE IMPROVEMENTS
   ====================================================== */

@media (max-width: 767px) {
    .footer-widgets {
        padding: 32px 0 100px !important; /* Extra bottom padding for action bar */
    }

    .footer-widget {
        padding: 0 16px;
    }

    .footer-widget__title {
        font-size: 1rem !important;
        margin-bottom: 14px !important;
    }

    .footer-widget p {
        font-size: 0.8125rem !important;
        line-height: 1.7 !important;
    }

    .footer-widget__list li a,
    .footer-contact li a,
    .footer-contact li span {
        font-size: 0.8125rem !important;
        padding: 6px 0;
        display: inline-block;
    }

    .footer-social__link {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }

    .footer-widgets__grid {
        gap: 28px !important;
    }

    .footer-bottom {
        padding: 20px 16px !important;
    }

    .footer-bottom p {
        font-size: 0.75rem !important;
    }
}

/* ======================================================
   9. PRODUCT CARDS MOBILE
   ====================================================== */

@media (max-width: 767px) {
    .product-grid {
        gap: 12px !important;
    }

    .product-card__body {
        padding: 12px !important;
    }

    .product-card__brand {
        font-size: 0.6875rem !important;
        margin-bottom: 4px !important;
    }

    .product-card__title {
        font-size: 0.8125rem !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
    }

    .product-card__model {
        font-size: 0.6875rem !important;
    }

    .product-card__excerpt {
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
        margin-top: 6px !important;
        max-height: 2.25rem;
        overflow: hidden;
    }

    .product-card__btn {
        font-size: 0.75rem !important;
        padding: 8px 16px !important;
        margin: 0 12px 12px !important;
    }

    .product-card__badge {
        font-size: 0.625rem !important;
        padding: 3px 8px !important;
    }

    .product-card__image {
        padding: 4px !important;
    }
}

@media (max-width: 480px) {
    .product-grid {
        gap: 10px !important;
    }

    .product-card__body {
        padding: 10px !important;
    }

    .product-card__title {
        font-size: 0.75rem !important;
    }

    .product-card__excerpt {
        display: none;
    }

    .product-card__btn {
        font-size: 0.6875rem !important;
        padding: 6px 12px !important;
        margin: 0 10px 10px !important;
    }
}

/* ======================================================
   10. BLOG CARDS MOBILE
   ====================================================== */

@media (max-width: 767px) {
    .blog-card__body {
        padding: 14px !important;
    }

    .blog-card__title {
        font-size: 0.9375rem !important;
        line-height: 1.35 !important;
    }

    .blog-card__title a {
        font-size: 0.9375rem !important;
    }

    .blog-card__excerpt {
        font-size: 0.8125rem !important;
        line-height: 1.6 !important;
    }

    .blog-card__date,
    .blog-card__category {
        font-size: 0.75rem !important;
    }

    .blog-card__link {
        font-size: 0.8125rem !important;
    }

    .blog-grid {
        gap: 16px !important;
    }
}

/* ======================================================
   11. SECTION HEADERS & TYPOGRAPHY
   ====================================================== */

@media (max-width: 767px) {
    .section {
        padding: 36px 0 !important;
    }

    .section__header {
        margin-bottom: 24px !important;
    }

    .section__title {
        font-size: 1.3125rem !important;
    }

    .section__subtitle {
        font-size: 0.8125rem !important;
        line-height: 1.6 !important;
        padding: 0 16px;
    }

    .section__footer {
        margin-top: 24px !important;
    }

    .container {
        padding: 0 16px !important;
    }
}

@media (max-width: 480px) {
    .section {
        padding: 28px 0 !important;
    }

    .section__title {
        font-size: 1.1875rem !important;
    }
}

/* ======================================================
   12. TABLES (Specs, Comparison)
   ====================================================== */

@media (max-width: 767px) {
    .specs-table {
        display: block;
        width: 100%;
    }

    .specs-table tbody {
        display: block;
        width: 100%;
    }

    .specs-table tr {
        display: flex;
        flex-direction: column;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .specs-table td {
        display: block;
        padding: 2px 0 !important;
        border: none !important;
    }

    .specs-table td:first-child {
        font-size: 0.75rem;
        color: #888;
        min-width: 0 !important;
    }

    .specs-table td:last-child {
        font-size: 0.875rem;
        font-weight: 600;
        color: #333;
    }

    .specs-download {
        margin-top: 16px;
    }

    .specs-download__btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px !important;
        font-size: 0.8125rem !important;
    }
}

/* ======================================================
   13. ANIMATION & TRANSITION PERFORMANCE
   ====================================================== */

/* Reduce motion on mobile for performance */
@media (max-width: 767px) {
    .product-card,
    .blog-card,
    .btn {
        transition-property: transform, box-shadow, background-color;
        transition-duration: 0.15s !important;
    }

    .hero-slider__slide .animate-in {
        animation-duration: 0.3s !important;
    }

    /* Disable hover states on mobile */
    .product-card:hover {
        transform: none !important;
    }

    .btn:hover {
        transform: none !important;
    }

    .section__view-all:hover {
        transform: none !important;
    }
}

/* ======================================================
   15. SAFE AREA INSETS (Notch devices)
   ====================================================== */

/* Support for iPhone X and later with safe areas */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 767px) {
        .single-product__action-bar {
            padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        }

        .site-main--single-product .container {
            padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
        }

        .footer-widgets {
            padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
        }
    }
}

/* ======================================================
   16. FILTER BAR (Product Archive)
   ====================================================== */

@media (max-width: 767px) {
    .filter-bar {
        padding: 6px 0 !important;
    }

    .filter-bar__item {
        margin-bottom: 6px !important;
    }

    .filter-bar__item select,
    .filter-bar__item input {
        min-height: 44px;
        font-size: 0.8125rem !important;
        padding: 8px 12px !important;
    }

    .filter-bar__actions .btn {
        min-height: 44px;
        font-size: 0.8125rem !important;
    }
}

/* ======================================================
   17. PAGE HERO (Archive/Page headers)
   ====================================================== */

@media (max-width: 767px) {
    .page-hero {
        padding: 20px 0 !important;
    }

    .page-hero__title {
        font-size: 1.375rem !important;
    }

    .page-hero__subtitle {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
    }

    .archive-hero {
        padding: 20px 0 24px !important;
    }

    .archive-hero__title {
        font-size: 1.25rem !important;
    }
}

/* ======================================================
   18. HERO SLIDER (Homepage)
   ====================================================== */

@media (max-width: 767px) {
    .hero-slider__content {
        padding: 0 20px !important;
    }

    .hero-slider__title {
        font-size: 1.4375rem !important;
        line-height: 1.3 !important;
    }

    .hero-slider__text {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin-top: 8px !important;
    }

    .hero-slider__actions {
        gap: 10px !important;
        margin-top: 16px !important;
    }

    .hero-slider__btn,
    .hero-slider__btn--outline {
        padding: 12px 24px !important;
        font-size: 0.8125rem !important;
        min-height: 44px;
    }

    .hero-slider__controls {
        bottom: 16px !important;
        gap: 8px !important;
    }

    .hero-slider__dot {
        width: 8px !important;
        height: 8px !important;
    }

    .hero-slider__arrow {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }

    .hero-slider__arrow--prev {
        left: 8px !important;
    }

    .hero-slider__arrow--next {
        right: 8px !important;
    }
}

@media (max-width: 480px) {
    .hero-slider {
        height: auto !important;
        min-height: 320px;
    }

    .hero-slider__title {
        font-size: 1.25rem !important;
    }
}

/* ======================================================
   19. RESPONSIVE TABLES (Full width)
   ====================================================== */

@media (max-width: 767px) {
    .responsive-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .responsive-table table {
        min-width: 600px;
    }
}

/* ======================================================
   20. UTILITY: Hide scrollbar but keep functionality
   ====================================================== */

@media (max-width: 767px) {
    .hide-scrollbar {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
}