/* =====================================================
   TOUCH TARGETS - W4-A Accessibility Enhancement
   Min 48x48px touch areas + 8px spacing for WCAG AA
   ===================================================== */

/* =====================================================
   1. ICON BUTTONS - Consistent 48x48 touch area
   ===================================================== */
.icon-btn,
button.icon-btn,
a.icon-btn,
.cart-btn,
.mobile-menu-toggle,
.search-toggle,
.close-btn,
.play-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 8px;
    line-height: 1;
    border-radius: 8px;
}

/* Visible focus for keyboard navigation */
.icon-btn:focus-visible,
button.icon-btn:focus-visible,
a.icon-btn:focus-visible,
.cart-btn:focus-visible {
    outline: 2px solid var(--primary-color, #0071C2);
    outline-offset: 2px;
}

/* =====================================================
   2. TEXT LINKS - Expanded hit area without visual change
   ===================================================== */
a.tap-area {
    position: relative;
    display: inline-block;
}

a.tap-area::before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -8px;
    right: -8px;
}

/* =====================================================
   3. MOBILE NAVIGATION - Block display + adequate height
   ===================================================== */
.nav-mobile a,
.mobile-menu a,
.sidebar-nav a {
    display: block;
    min-height: 48px;
    padding: 12px 16px;
    line-height: 1.5;
}

.nav-mobile a + a,
.mobile-menu a + a {
    margin-top: 4px; /* 8px spacing between targets */
}

/* =====================================================
   4. CARD CTAs - Minimum height for touch
   ===================================================== */
.card .cta,
.card a.cta,
.tour-card .cta,
.blog-card .cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 8px;
}

/* =====================================================
   5. SMALL ICONS - Keep visual small, hit area large
   ===================================================== */
.icon-btn > svg,
.icon-btn > i,
button > svg,
button > i {
    width: 20px;
    height: 20px;
    pointer-events: none; /* Hit area on parent */
}

/* =====================================================
   6. FILTER BUTTONS & CHIPS - Touch-friendly
   ===================================================== */
.filter-btn,
.chip,
.tag {
    min-height: 44px; /* Slightly smaller for dense UI */
    padding: 8px 16px;
    border-radius: 22px;
}

/* =====================================================
   7. FORM CONTROLS - Enhanced touch area
   ===================================================== */
input[type="checkbox"],
input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    margin: 12px; /* Creates 48px total touch area */
}

label {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 0;
    cursor: pointer;
}

/* =====================================================
   8. SPECIFIC OVERRIDES - Project components
   ===================================================== */

/* Premium Header - Already correct, ensure consistency */
.premium-header .cart-btn {
    min-width: 48px;
    min-height: 48px;
}

.premium-header .call-btn {
    min-height: 48px;
    padding: 12px 20px;
}

.premium-header .selector-btn {
    min-height: 44px; /* Dense UI exception */
}

/* Tour Cards - Wishlist button */
.tour-wishlist {
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal close buttons */
.modal-close,
.close-icon {
    min-width: 48px;
    min-height: 48px;
}

/* =====================================================
   9. MOBILE SPECIFIC - Extra touch area
   ===================================================== */
@media (max-width: 768px) {
    /* Increase spacing on mobile */
    .nav-mobile a + a,
    .mobile-menu a + a {
        margin-top: 8px;
    }

    /* Larger touch areas for primary CTAs */
    .primary-cta,
    .cta-primary {
        min-height: 52px;
        padding: 14px 24px;
    }

    /* Filter buttons larger spacing */
    .filter-btn,
    .chip {
        margin: 4px;
    }
}

/* =====================================================
   10. ACCESSIBILITY - Focus indicators
   ===================================================== */

/* All interactive elements should have visible focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-color, #0071C2);
    outline-offset: 2px;
}

/* Skip to content link (hidden until focused) */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 12px 24px;
    min-height: 48px;
    z-index: 9999;
}

.skip-to-content:focus {
    top: 0;
}