/* ═══════════════════════════════════════════════════════════
   UDAIPUR TRAVEL — FULL RESPONSIVE CSS
   Covers: listing detail, listing grid, category grid,
           sidebar, carousel, elementor widgets, slider card
   ═══════════════════════════════════════════════════════════ */

/* ── Global box-sizing ── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

/* ══════════════════════════════════════════════
   TABLET  ≤ 1024px
══════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Detail page body */
    .ut-body {
        grid-template-columns: 1fr 300px;
        gap: 20px;
    }

    /* Elementor grids */
    .ut-el-cols-4,
    .ut-el-cols-5,
    .ut-el-cols-6 { grid-template-columns: repeat(3, 1fr); }

    /* Listing grid */
    .ut-listing-grid { grid-template-columns: repeat(2, 1fr); }

    /* Category grid */
    .ut-category-grid { grid-template-columns: repeat(3, 1fr); }

    /* Carousel arrows */
    .ut-carousel-root { padding: 0 40px; }
}

/* ══════════════════════════════════════════════
   SMALL TABLET  ≤ 900px
══════════════════════════════════════════════ */
@media (max-width: 900px) {

    /* Stack sidebar below main */
    .ut-body {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .ut-sidebar {
        position: static !important;
        top: auto !important;
        width: 100%;
    }

    /* Hero */
    .ut-hero { height: 300px; }
    .ut-hero-title { font-size: 1.4rem; }

    /* Extra fields */
    .ut-extra-grid { grid-template-columns: repeat(2, 1fr); }

    /* Map */
    .ut-map-wrap,
    .ut-map-canvas { height: 260px; }
    .ut-map-wrap iframe { height: 260px !important; }

    /* Elementor grids */
    .ut-el-cols-3,
    .ut-el-cols-4 { grid-template-columns: repeat(2, 1fr); }

    /* Category grid */
    .ut-category-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════
   MOBILE  ≤ 767px
══════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Wrapper ── */
    .ut-single { padding: 0 12px 40px; }

    /* ── Hero ── */
    .ut-hero { height: 240px; border-radius: 10px; }
    .ut-hero-inner { padding: 14px 14px 16px; }
    .ut-hero-title { font-size: 1.2rem; margin-bottom: 6px; }
    .ut-hero-addr { font-size: 12px; }
    .ut-hero-badges { gap: 6px; margin-bottom: 8px; }
    .ut-badge-cat,
    .ut-badge-featured { font-size: 11px; padding: 3px 9px; }

    /* ── Breadcrumb ── */
    .ut-breadcrumb {
        font-size: 11px;
        margin-bottom: 14px;
        gap: 4px;
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        padding-bottom: 4px;
    }

    /* ── Gallery ── */
    .ut-gallery-hero { aspect-ratio: 4/3; }
    .ut-gallery-strip { grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 3px; }
    .ut-gallery-count { font-size: 11px; padding: 3px 9px; }

    /* ── Short desc ── */
    .ut-short-desc { font-size: 14px; padding: 12px 14px; }

    /* ── Sections ── */
    .ut-section { padding: 14px; margin-bottom: 14px; border-radius: 10px; }
    .ut-section-title { font-size: 14px; margin-bottom: 10px; padding-bottom: 10px; }
    .ut-desc { font-size: 14px; line-height: 1.7; }

    /* ── Extra fields ── */
    .ut-extra-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ut-extra-item { padding: 8px 10px; }
    .ut-extra-label { font-size: 10px; }
    .ut-extra-value { font-size: 13px; }

    /* ── Map ── */
    .ut-map-wrap,
    .ut-map-canvas { height: 220px; border-radius: 8px; }
    .ut-map-wrap iframe { height: 220px !important; }
    .ut-directions-btn { width: 100%; justify-content: center; font-size: 13px; }

    /* ── Sidebar card ── */
    .ut-sd-card { padding: 16px; border-radius: 10px; }
    .ut-sd-price-regular { font-size: 1.5rem; }
    .ut-sd-price-disc { font-size: 1.3rem; }
    .ut-sd-blurred { font-size: 1.2rem; }
    .ut-sd-unlock-btn { font-size: 14px; padding: 13px; border-radius: 10px; }
    .ut-sd-contact-row { padding: 10px 0; gap: 10px; }
    .ut-sd-contact-val { font-size: 13px; }
    .ut-sd-hidden-row { padding: 7px 10px; }
    .ut-sd-blurred-phone { font-size: 11px; }
    .ut-sd-view-btn { padding: 5px 10px; font-size: 12px; width: 70px; }
    .ut-sd-icon-btn { width: 36px; height: 36px; font-size: 16px; }

    /* ── Nearby box ── */
    .ut-sd-nearby-box { padding: 14px; border-radius: 10px; }
    .ut-nb-img { width: 58px; height: 52px; border-radius: 7px; }
    .ut-nb-title { font-size: 12px; }
    .ut-nb-price { font-size: 11px; }
    .ut-nb-arrow { font-size: 18px; }
    .ut-nb-viewmore { font-size: 12px; padding: 8px 12px; }

    /* ── Listing grid ── */
    .ut-listing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .ut-listing-card { border-radius: 10px; }
    .ut-card-body { padding: 10px; }
    .ut-card-body h3 { font-size: 13px; margin: 4px 0; }
    .ut-card-body p { font-size: 12px; }
    .ut-card-addr { font-size: 11px; min-height: auto; -webkit-line-clamp: 2; }
    .ut-card-price { font-size: 13px; }
    .ut-btn-view { padding: 6px 10px; font-size: 12px; border-radius: 6px; }
    .ut-card-footer { margin-top: 8px; }

    /* ── Category tabs ── */
    .ut-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        margin-bottom: 16px;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ut-tabs::-webkit-scrollbar { display: none; }
    .ut-tab { flex-shrink: 0; padding: 6px 14px; font-size: 12px; }

    /* ── Category grid ── */
    .ut-category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ut-cat-banner { height: 65px; }
    .ut-cat-body { padding: 8px; }
    .ut-cat-icon { font-size: 1.3em; }
    .ut-cat-name { font-size: 12px; }
    .ut-subcat-card { font-size: 11px; padding: 4px 8px; }

    /* ── Search bar ── */
    .ut-search-bar { flex-direction: column; gap: 8px; }
    .ut-search-bar input[type="text"],
    .ut-search-bar select,
    .ut-search-bar button { width: 100%; }

    /* ── Section heading ── */
    .ut-section-heading { font-size: 1.2rem; margin-bottom: 14px; }

    /* ── View more ── */
    .ut-btn-viewmore { width: 100%; padding: 12px; font-size: 14px; }

    /* ── Share box ── */
    .ut-share-btns { flex-direction: column; }
    .ut-share-btn { justify-content: center; }

    /* ── Modal ── */
    .ut-modal-box { padding: 20px 14px; width: 95%; border-radius: 12px; }

    /* ── Lightbox ── */
    #ut-lb-prev { left: 6px; }
    #ut-lb-next { right: 6px; }
    #ut-lb-prev, #ut-lb-next { width: 40px; height: 40px; font-size: 24px !important; }
    #ut-lb-close { width: 36px; height: 36px; font-size: 18px !important; }

    /* ── Elementor grids ── */
    .ut-el-cols-2,
    .ut-el-cols-3,
    .ut-el-cols-4,
    .ut-el-cols-5,
    .ut-el-cols-6 { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* ── Elementor card ── */
    .ut-el-card-title { font-size: 14px; min-height: auto; }
    .ut-el-card-desc  { font-size: 12px; min-height: auto; }
    .ut-el-card-addr  { font-size: 11px; }
    .ut-el-card-body  { padding: 12px; }
    .ut-el-card-img   { height: 160px; }
    .ut-el-btn-view   { padding: 7px 10px; font-size: 11px; }
    .ut-el-price-new  { font-size: 14px; }

    /* ── Elementor filter bar ── */
    .ut-el-filter-bar { padding: 12px 14px; }
    .ut-el-filter-row { flex-direction: column; gap: 10px; }
    .ut-el-price-filter { min-width: 100%; }
    .ut-el-sort-wrap { width: 100%; }
    .ut-el-sort { width: 100%; }
    .ut-el-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .ut-el-tabs::-webkit-scrollbar { display: none; }
    .ut-el-tab { flex-shrink: 0; }

    /* ── Carousel ── */
    .ut-carousel-root { padding: 0 34px !important; }
    #ut-nav-prev,
    #ut-nav-next,
    [id$="-prev"],
    [id$="-next"] { width: 30px !important; height: 30px !important; font-size: 20px !important; }

    /* ── Slider card ── */
    .ut-sc-title { font-size: 14px; }
    .ut-sc-btn   { font-size: 11px; padding: 6px 12px; }
    .ut-sc-cat   { font-size: 9px; padding: 2px 8px; }

    /* ── Hero search widget ── */
    .ut-el-hero { min-height: 320px; border-radius: 10px; }
    .ut-el-hero-heading { font-size: 1.6em; }
    .ut-el-hero-sub { font-size: 0.95em; margin-bottom: 18px; }
    .ut-el-hero-search-box {
        flex-direction: column;
        border-radius: 12px;
        overflow: hidden;
    }
    .ut-el-hero-search-box input[type="text"],
    .ut-el-hero-search-box select,
    .ut-el-hero-search-box button {
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-top: 1px solid #e2e8f0;
    }
    .ut-el-hero-search-box input[type="text"] { border-top: none; }
    .ut-el-hero-pills { gap: 6px; }
    .ut-el-hero-pill { font-size: 12px; padding: 5px 12px; }

    /* ── BABE filter bar ── */
    .ut-babe-filter-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ut-babe-clear-filters { margin-left: 0; }
    .ut-babe-results-count { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ══════════════════════════════════════════════
   MOBILE SMALL  ≤ 480px
══════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Hero */
    .ut-hero { height: 200px; border-radius: 8px; }
    .ut-hero-title { font-size: 1.05rem; }

    /* Gallery strip */
    .ut-gallery-strip { grid-template-columns: repeat(2, 1fr); }

    /* Listing grid — single column */
    .ut-listing-grid { grid-template-columns: 1fr; }

    /* Category grid */
    .ut-category-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Elementor grids — 1 col */
    .ut-el-cols-2,
    .ut-el-cols-3,
    .ut-el-cols-4,
    .ut-el-cols-5,
    .ut-el-cols-6 { grid-template-columns: 1fr; }

    /* Extra fields */
    .ut-extra-grid { grid-template-columns: 1fr; }

    /* Map */
    .ut-map-wrap,
    .ut-map-canvas { height: 190px; }
    .ut-map-wrap iframe { height: 190px !important; }

    /* Nearby */
    .ut-nearby .ut-el-cols-3 { grid-template-columns: 1fr; }

    /* Lightbox */
    #ut-lb-prev { left: 2px; }
    #ut-lb-next { right: 2px; }

    /* Carousel — full width slides */
    .ut-carousel-root { padding: 0 28px !important; }

    /* Slider card height */
    .ut-slide-full-height { height: 200px !important; }

    /* Sidebar price */
    .ut-sd-price-regular { font-size: 1.3rem; }
    .ut-sd-price-disc    { font-size: 1.2rem; }
}

/* ══════════════════════════════════════════════
   MOBILE XS  ≤ 360px
══════════════════════════════════════════════ */
@media (max-width: 360px) {

    .ut-single { padding: 0 8px 32px; }
    .ut-hero { height: 170px; }
    .ut-hero-title { font-size: 0.95rem; }
    .ut-listing-grid { gap: 10px; }
    .ut-category-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .ut-cat-name { font-size: 11px; }
    .ut-el-card-body { padding: 10px; }
    .ut-el-card-title { font-size: 13px; }
    .ut-sd-card { padding: 12px; }
    .ut-sd-unlock-btn { font-size: 13px; padding: 11px; }
    .ut-carousel-root { padding: 0 24px !important; }
}

/* ══════════════════════════════════════════════
   TOUCH — remove hover effects on mobile
══════════════════════════════════════════════ */
@media (hover: none) {
    .ut-el-card:hover { transform: none; box-shadow: none; }
    .ut-listing-card:hover { transform: none; box-shadow: none; }
    .ut-sc:hover { transform: none; }
    .ut-sc:hover .ut-sc-img { transform: none; }
    .ut-nb-card:hover { transform: none; background: none; border-color: transparent; }
    .ut-cat-card:hover { transform: none; box-shadow: none; }
}