/**
 * Trip Platter — POORI WEBSITE ke liye EK global CSS file
 *
 * Sirf ISI file mein likho jo poori site par lagana ho (override, colours, spacing, etc.).
 * Ye `public/` mein hai — Next isse kabhi compile karke `.next` ke andar copy NAHI karta;
 * `npm run dev` / build / restart ke baad bhi yahi path, yahi file.
 *
 * Load order: `layout.tsx` mein ye stylesheet sab legacy `webroot/...` links aur
 * fonts ke BAAD lagti hai, isliye zyada tar jagah aapki rule “jeet” jayegi.
 *
 * Mat likhna: `frontend/.next/**` (wo output hai, reset hota hai)
 *
 * Jo cheez kisi component ki `*.module.css` se tied hai (hashed class), usko wahi
 * module file mein rakho; yahan sirf normal selectors / :root / global utilities.
 *
 * Header (Next):
 *   - frontend/src/components/Header/Header.module.css
 *   - frontend/src/components/Header/NoticeStrip.module.css
 *   - frontend/src/components/Header/MobileDrawer.module.css
 * Header (legacy stack, <link> se): webroot/front/assets/css/tp-header.css
 *   (Next dev: frontend/public/webroot/front/assets/css/tp-header.css — dono sync rakhein)
 */

/* --- Neeche apni site-wide CSS yahan se shuru karein --- */

/* Brand icons (FA6 .fa uses Solid — brands need Brands font) */
.fa-brands,
.fa-brands::before,
i[class*="fa-brands"],
i.fa-whatsapp,
i.fa-facebook,
i.fa-facebook-f,
i.fa-linkedin,
i.fa-linkedin-in,
i.fa-youtube,
i.fa-twitter,
i.fa-x-twitter,
i.fa-instagram,
i.fa-pinterest {
  font-family: "Font Awesome 6 Brands", "FontAwesome", sans-serif !important;
  font-weight: 400 !important;
}

/* --- Listing (mobile): filters become off-canvas drawer, so collapse the
   now-empty sidebar column so tours show first without a gap. --- */
@media (max-width: 991.98px) {
  .tp-listing-page .tp-listing-sidebar {
    padding-top: 0 !important;
    height: 0;
    overflow: visible;
  }
}

/* --- Tour detail (mobile): hide desktop stats strip, format mobile pills like stats --- */
@media (max-width: 767.98px) {
  .tp-tour-page .tp-tour-stats-wrap {
    display: none !important;
  }

  .tp-tour-page .tp-tour-mob-pills {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px !important;
  }
  .tp-tour-page .tp-tour-mob-pills .dtl_bx {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px !important;
    background: #fff !important;
    border: 1px solid var(--tp-line, #e5e7eb) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    text-align: left;
  }
  .tp-tour-page .tp-tour-mob-pills .dtl_bx i {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    border-radius: 10px;
    background: linear-gradient(145deg, #e0f2fe, #bae6fd);
    color: var(--tp-ocean, #0284c7);
    font-size: 1rem;
  }
  .tp-tour-page .tp-tour-mob-pills .dtl_bx h6 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tp-ink, #0f172a);
  }
}