/*
Theme Name: Bali Travelica
Description: App-Like Mobile UI/UX for All Elementor Widgets
             Mobile-first design system: native-app spacing, typography,
             touch targets (44px+), gestures, and micro-interactions.
Version: 1.0.0
*/

/* =====================================================================
   1. DESIGN TOKENS (Mobile)
   ===================================================================== */
:root {
    --bbt-mobile-pad-x: 16px;
    --bbt-mobile-pad-y: 20px;
    --bbt-mobile-card-radius: 16px;
    --bbt-mobile-tap-target: 44px;
    --bbt-mobile-font-base: 15px;
    --bbt-mobile-font-h1: 26px;
    --bbt-mobile-font-h2: 22px;
    --bbt-mobile-font-h3: 18px;
    --bbt-mobile-font-h4: 16px;
    --bbt-mobile-font-small: 13px;
    --bbt-mobile-line: 1.5;
    --bbt-mobile-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    --bbt-mobile-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
    --bbt-mobile-gap-sm: 8px;
    --bbt-mobile-gap-md: 12px;
    --bbt-mobile-gap-lg: 16px;
    --bbt-mobile-gap-xl: 24px;
    --bbt-bottom-safe: env(safe-area-inset-bottom, 0px);
    --bbt-top-safe: env(safe-area-inset-top, 0px);
}

/* =====================================================================
   2. GLOBAL MOBILE TYPOGRAPHY & SPACING
   ===================================================================== */
@media (max-width: 768px) {
    body {
        font-size: var(--bbt-mobile-font-base);
        line-height: var(--bbt-mobile-line);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1 { font-size: var(--bbt-mobile-font-h1); line-height: 1.25; letter-spacing: -0.02em; }
    h2 { font-size: var(--bbt-mobile-font-h2); line-height: 1.3;  letter-spacing: -0.015em; }
    h3 { font-size: var(--bbt-mobile-font-h3); line-height: 1.35; }
    h4 { font-size: var(--bbt-mobile-font-h4); line-height: 1.4; }

    /* Section padding — mirrors a native iOS/Android list page */
    .elementor-section,
    .elementor-container,
    .e-con,
    .bbt-container {
        padding-left: var(--bbt-mobile-pad-x) !important;
        padding-right: var(--bbt-mobile-pad-x) !important;
    }

    /* Heading kerning + spacing */
    section > h2,
    section > .bbt-section-title,
    .bbt-section-header {
        margin-bottom: var(--bbt-mobile-gap-lg);
        padding-top: 4px;
    }
}

/* =====================================================================
   3. TOUCH TARGETS — minimum 44 px (Apple HIG / Material guideline)
   ===================================================================== */
@media (max-width: 768px) {
    button,
    .button,
    .bbt-btn,
    a.bbt-btn,
    .elementor-button,
    .bbt-card-btn,
    .bbt-load-more-btn,
    .bbt-filter-btn,
    .bbt-wishlist-btn,
    .bbt-mobile-selector {
        min-height: var(--bbt-mobile-tap-target);
        padding: 12px 18px;
        font-size: var(--bbt-mobile-font-base);
        font-weight: 600;
        border-radius: 12px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    button:active,
    .bbt-btn:active,
    .elementor-button:active,
    .bbt-card-btn:active {
        transform: scale(0.97);
    }

    /* Icon-only buttons */
    .bbt-icon-btn,
    .bbt-wishlist-btn,
    .bbt-share-btn {
        width: var(--bbt-mobile-tap-target);
        height: var(--bbt-mobile-tap-target);
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* =====================================================================
   4. CARDS — every card behaves like a native list-item
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-tour-card,
    .bbt-activity-card,
    .bbt-destination-card,
    .bbt-info-card,
    .bbt-feature-box,
    .bbt-testimonial-card,
    .bbt-pricing-plan,
    .bbt-team-member,
    .bbt-blog-card,
    .bbt-price-card,
    .bbt-flip-card,
    .bbt-special-offer-card {
        border-radius: var(--bbt-mobile-card-radius) !important;
        box-shadow: var(--bbt-mobile-shadow);
        overflow: hidden;
        background: #fff;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .bbt-tour-card:active,
    .bbt-activity-card:active,
    .bbt-destination-card:active,
    .bbt-feature-box:active {
        transform: scale(0.985);
        box-shadow: var(--bbt-mobile-shadow-lg);
    }

    /* Card image — fixed aspect ratio so heights align */
    .bbt-card-image,
    .bbt-tour-card .bbt-card-image,
    .bbt-activity-card-image {
        aspect-ratio: 16 / 10;
        overflow: hidden;
    }

    .bbt-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Card content */
    .bbt-card-content,
    .bbt-card-body {
        padding: var(--bbt-mobile-gap-lg);
    }

    .bbt-card-title,
    .bbt-card-content h3 {
        font-size: var(--bbt-mobile-font-h3);
        font-weight: 700;
        margin: 0 0 8px;
        line-height: 1.35;
        /* Truncate long titles to 2 lines */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .bbt-card-meta {
        font-size: var(--bbt-mobile-font-small);
        color: #6b7280;
        gap: 12px;
    }

    /* Price badge */
    .bbt-card-price {
        font-size: var(--bbt-mobile-font-h3);
        font-weight: 700;
    }

    .bbt-price-original {
        font-size: var(--bbt-mobile-font-small);
        opacity: 0.6;
    }

    /* Sale / discount badge */
    .bbt-card-badge,
    .bbt-badge-sale {
        top: 12px;
        left: 12px;
        padding: 6px 10px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        border-radius: 999px;
    }
}

/* =====================================================================
   5. GRIDS — 1 column on mobile, comfortable gaps
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-tour-grid,
    .bbt-activity-grid,
    .bbt-categories-grid,
    .bbt-tours-grid,
    .bbt-destinations-grid,
    .bbt-blog-grid,
    .bbt-locations,
    .bbt-services-grid,
    .bbt-team-grid,
    .bbt-pricing-table,
    .bbt-gallery-grid {
        grid-template-columns: 1fr !important;
        gap: var(--bbt-mobile-gap-lg) !important;
    }

    /* 2-column compact for thumbnails / categories */
    .bbt-locations.bbt-cols-3,
    .bbt-locations.bbt-cols-4,
    .bbt-locations.bbt-cols-6,
    .bbt-tour-categories,
    .bbt-gallery.bbt-cols-3 .bbt-gallery-grid,
    .bbt-gallery.bbt-cols-4 .bbt-gallery-grid,
    .bbt-gallery.bbt-cols-5 .bbt-gallery-grid,
    .bbt-gallery.bbt-cols-6 .bbt-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--bbt-mobile-gap-md) !important;
    }
}

/* =====================================================================
   6. SLIDERS / CAROUSELS — peek next slide for app-like feel
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-tour-carousel,
    .bbt-activity-carousel,
    .bbt-reviews-carousel,
    .bbt-testimonials-slider {
        padding-left: var(--bbt-mobile-pad-x);
        padding-right: var(--bbt-mobile-pad-x);
        margin-left: 0;
        margin-right: 0;
    }

    .bbt-tour-carousel .swiper,
    .bbt-activity-carousel .swiper {
        overflow: visible;
        margin-right: -16px; /* peek next slide */
    }

    .bbt-tour-carousel .swiper-slide,
    .bbt-activity-carousel .swiper-slide {
        width: 80% !important;
    }

    /* Pagination dots — bigger, easier to see */
    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }

    .swiper-pagination-bullet-active {
        width: 28px;
        border-radius: 4px;
    }
}

/* =====================================================================
   7. FORMS — native mobile keyboard + 16px to stop iOS zoom
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-search-form,
    .bbt-search-horizontal .bbt-search-form,
    .bbt-newsletter-inline .bbt-newsletter-input-wrap,
    .bbt-contact-form {
        flex-direction: column !important;
        gap: var(--bbt-mobile-gap-md) !important;
        align-items: stretch !important;
    }

    .bbt-search-field,
    .bbt-search-field input,
    .bbt-search-field select,
    .bbt-newsletter-input,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    select,
    textarea {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 16px !important; /* prevent iOS auto-zoom */
        padding: 14px 16px !important;
        border-radius: 12px !important;
        border: 1px solid #e5e7eb !important;
        background: #f9fafb;
        box-sizing: border-box;
    }

    input:focus,
    select:focus,
    textarea:focus {
        background: #fff;
        border-color: #f5a623 !important;
        box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18) !important;
        outline: none;
    }

    .bbt-search-btn,
    .bbt-newsletter-btn {
        width: 100%;
        justify-content: center;
    }

    /* Form labels */
    .bbt-search-field label,
    label {
        font-size: var(--bbt-mobile-font-small);
        font-weight: 600;
        margin-bottom: 6px;
    }
}

/* =====================================================================
   8. NAVIGATION & FILTER BARS — horizontal pill scroller
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-grid-filter,
    .bbt-filter-bar,
    .bbt-tour-tabs,
    .bbt-category-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
        margin-left: calc(-1 * var(--bbt-mobile-pad-x));
        margin-right: calc(-1 * var(--bbt-mobile-pad-x));
        padding-left: var(--bbt-mobile-pad-x);
        padding-right: var(--bbt-mobile-pad-x);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .bbt-grid-filter::-webkit-scrollbar,
    .bbt-filter-bar::-webkit-scrollbar,
    .bbt-tour-tabs::-webkit-scrollbar { display: none; }

    .bbt-filter-btn,
    .bbt-tour-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 16px;
        border-radius: 999px;
        background: #f3f4f6;
        color: #4b5563;
        border: 0;
        font-size: var(--bbt-mobile-font-small);
        font-weight: 600;
    }

    .bbt-filter-btn.active,
    .bbt-tour-tab.active {
        background: linear-gradient(135deg, #f5a623, #ffb84d);
        color: #1e3a5f;
        box-shadow: 0 4px 12px rgba(245, 166, 35, 0.35);
    }
}

/* =====================================================================
   9. HERO / BANNERS — full-bleed with safe area
   ===================================================================== */
@media (max-width: 768px) {
    .premium-hero-wrapper,
    .bbt-hero-section,
    .bbt-hero-slider,
    .bbt-banner-slider,
    .bbt-page-header {
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: max(var(--bbt-mobile-gap-xl), var(--bbt-top-safe)) !important;
    }

    .bbt-hero-section h1,
    .bbt-hero-slider .swiper-slide h1 {
        font-size: 28px !important;
        line-height: 1.2;
        letter-spacing: -0.02em;
        padding: 0 var(--bbt-mobile-pad-x);
    }

    .bbt-hero-section p,
    .bbt-hero-slider p {
        font-size: var(--bbt-mobile-font-base);
        line-height: 1.5;
        padding: 0 var(--bbt-mobile-pad-x);
    }
}

/* =====================================================================
   10. BOOKING & CHECKOUT — sticky CTA at the bottom
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-booking-widget,
    .bbt-tour-booking-box,
    .bbt-quick-booking,
    .bbt-popup-booking {
        position: relative;
    }

    /* Bottom sheet style */
    .bbt-mobile-cta-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        padding: 12px var(--bbt-mobile-pad-x);
        padding-bottom: calc(12px + var(--bbt-bottom-safe));
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        z-index: 90;
        display: flex;
        align-items: center;
        gap: 12px;
        border-top: 1px solid #e5e7eb;
    }

    .bbt-mobile-cta-bar .bbt-price {
        flex: 1;
        font-size: var(--bbt-mobile-font-h3);
        font-weight: 700;
        color: #1e3a5f;
    }

    .bbt-mobile-cta-bar .bbt-btn {
        flex: 1.5;
        min-height: 48px;
    }
}

/* =====================================================================
   11. TESTIMONIALS / REVIEWS — full-width quote cards
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-testimonial-card,
    .bbt-review-card {
        padding: 20px;
    }

    .bbt-testimonial-content {
        font-size: var(--bbt-mobile-font-base);
        line-height: 1.55;
    }

    .bbt-testimonial-author {
        margin-top: 16px;
    }

    .bbt-author-image,
    .bbt-author-initials {
        width: 44px;
        height: 44px;
    }

    .bbt-author-name {
        font-size: var(--bbt-mobile-font-base);
    }
}

/* =====================================================================
   12. PRICING TABLES — single column, featured plan first
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-pricing-table {
        flex-direction: column;
        gap: var(--bbt-mobile-gap-lg);
    }

    .bbt-pricing-plan {
        max-width: 100%;
        flex: 1 1 100%;
    }

    .bbt-plan-featured {
        order: -1; /* show featured first */
        transform: none;
    }

    .bbt-plan-featured:hover {
        transform: translateY(-4px);
    }

    .bbt-price-amount {
        font-size: 40px;
    }
}

/* =====================================================================
   13. GALLERY / IMAGE WIDGETS
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-gallery-grid,
    .bbt-photo-mosaic {
        gap: 8px;
    }

    .bbt-gallery-item {
        border-radius: 12px;
    }
}

/* =====================================================================
   14. STATS COUNTER & FEATURE GRIDS
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-stats-counter,
    .bbt-counter-grid,
    .bbt-trust-badges,
    .bbt-experience-highlights {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--bbt-mobile-gap-md);
    }

    .bbt-counter-number {
        font-size: 32px !important;
    }

    .bbt-counter-label {
        font-size: 12px;
    }
}

/* =====================================================================
   15. CONTACT INFO / FLOATING BUTTONS
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-contact-info {
        flex-direction: column;
    }

    .bbt-ci-item {
        width: 100%;
        padding: 14px 16px;
        border-radius: 12px;
        background: #f9fafb;
        margin-bottom: 8px;
    }

    .bbt-floating-buttons,
    .bbt-floating-btn-stack {
        bottom: calc(16px + var(--bbt-bottom-safe));
        right: 16px;
        gap: 10px;
    }

    .bbt-float-btn {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    }
}

/* =====================================================================
   16. ACCORDIONS / FAQ
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-faq-accordion,
    .bbt-accordion-simple {
        border-radius: 14px;
        background: #fff;
        box-shadow: var(--bbt-mobile-shadow);
        overflow: hidden;
    }

    .bbt-faq-item,
    .bbt-accordion-item {
        border-bottom: 1px solid #f3f4f6;
    }

    .bbt-faq-question,
    .bbt-accordion-trigger {
        padding: 16px;
        font-size: var(--bbt-mobile-font-base);
        font-weight: 600;
        min-height: var(--bbt-mobile-tap-target);
    }

    .bbt-faq-answer,
    .bbt-accordion-content {
        padding: 0 16px 16px;
        font-size: var(--bbt-mobile-font-small);
        line-height: 1.55;
        color: #4b5563;
    }
}

/* =====================================================================
   17. WHATSAPP CTA / NOTIFICATION BAR
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-whatsapp-cta {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        border-radius: 18px;
    }

    .bbt-whatsapp-cta .bbt-btn {
        width: 100%;
        margin-top: 12px;
    }

    .bbt-notification-bar {
        font-size: var(--bbt-mobile-font-small);
        padding: 10px 16px;
        text-align: center;
    }
}

/* =====================================================================
   18. SINGLE TOUR / ITINERARY / TIMELINE
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-tour-itinerary,
    .bbt-activity-timeline {
        padding-left: 24px;
    }

    .bbt-itinerary-item::before,
    .bbt-timeline-item::before {
        left: -24px;
        width: 14px;
        height: 14px;
    }

    .bbt-tour-info-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }

    .bbt-tour-info-item {
        padding: 12px;
        border-radius: 12px;
    }
}

/* =====================================================================
   19. SOCIAL ICONS / SHARE BUTTONS
   ===================================================================== */
@media (max-width: 768px) {
    .bbt-social-icons,
    .bbt-share-buttons {
        justify-content: center;
        gap: 10px;
    }

    .bbt-sb-btn,
    .bbt-social-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        font-size: 20px;
    }
}

/* =====================================================================
   20. APP-LIKE MICRO-INTERACTIONS — ripple, scroll-snap, momentum
   ===================================================================== */
@media (max-width: 768px) {
    /* Smooth horizontal scroll snapping for category tabs / chips */
    .bbt-grid-filter,
    .bbt-tour-tabs,
    .bbt-category-tabs {
        scroll-snap-type: x proximity;
    }

    .bbt-filter-btn,
    .bbt-tour-tab {
        scroll-snap-align: start;
    }

    /* Ripple-like overlay on press */
    .bbt-tour-card::after,
    .bbt-activity-card::after,
    .bbt-feature-box::after,
    .bbt-info-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0);
        pointer-events: none;
        transition: background 0.18s ease;
        border-radius: inherit;
    }

    .bbt-tour-card:active::after,
    .bbt-activity-card:active::after,
    .bbt-feature-box:active::after,
    .bbt-info-card:active::after {
        background: rgba(0, 0, 0, 0.04);
    }

    /* Cards must be relatively positioned for the overlay */
    .bbt-tour-card,
    .bbt-activity-card,
    .bbt-feature-box,
    .bbt-info-card {
        position: relative;
    }

    /* Smooth scroll behaviour */
    html { scroll-behavior: smooth; }
}

/* =====================================================================
   21. SAFE AREA INSETS (notch / home-indicator)
   ===================================================================== */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .site-footer,
        .bbt-mobile-cta-bar {
            padding-bottom: max(var(--bbt-bottom-safe), 16px);
        }
        .premium-header,
        .site-header {
            padding-top: max(var(--bbt-top-safe), 0px);
        }
    }
}

/* =====================================================================
   22. DARK / HIGH-CONTRAST FALLBACKS
   ===================================================================== */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    /* Soft fallback so cards keep contrast on devices in dark mode */
    .bbt-mobile-cta-bar {
        background: #111827;
        color: #fff;
        border-top-color: #1f2937;
    }
}