/* Round 25 (2026-10-27): homepage on phones / tablets (< 992px), after benchmarking Nepal Hiking Team and Magical Nepal.
   - trips first: the best-selling packages slider moves straight under the hero (NHT), the founder story follows
   - hero: search box + "Plan my trip" next to "Explore all trips" (Magical / both), review pills wrap instead of running off
   - one floating "Need help?" WhatsApp button instead of a stack of three (Magical); Viber stays in the menu / footer
   Desktop (>= 992px) is unchanged. */

.mdhero-search, .mdhero-btn--plan { display: none; }

@media (max-width: 991.98px) {
    /* ---------- order: hero -> first trip slider -> story -> why us -> reviews -> second slider -> ... ---------- */
    body:has(#mdhero) main#main-content { display: flex; flex-direction: column; }
    body:has(#mdhero) main#main-content > * { order: 10; }
    body:has(#mdhero) main#main-content > .mdhero, body:has(#mdhero) main#main-content > #mdhome-start { order: 0; }
    body:has(#mdhero) main#main-content > .package-section.nepal-packages { order: 1; }
    body:has(#mdhero) main#main-content > .mdstory { order: 2; }
    body:has(#mdhero) main#main-content > .mdwhy2 { order: 3; }

    /* ---------- hero ---------- */
    .mdhero .mdhero-search { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 520px; min-height: 52px; margin: 4px 0 14px; padding: 0 18px; border: 0; border-radius: 14px; background: #fff; color: #5b6f85; font-size: 15px; font-weight: 600; text-align: left; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .55); }
    .mdhero .mdhero-search i { color: #0073ad; font-size: 16px; }
    .mdhero .mdhero-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; max-width: 520px; }
    .mdhero .mdhero-actions .mdhero-btn { min-height: 50px; padding: 0 14px; font-size: 15px; white-space: nowrap; }
    .mdhero .mdhero-btn--plan { display: inline-flex; background: #15803d; color: #fff !important; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
    .mdhero .mdhero-btn--plan:active { background: #188a4c; }
    .mdhero .mdhero-popular { margin-top: 14px; }
    .mdhero .mdhero-reviews { flex-wrap: wrap !important; gap: 6px !important; overflow: visible !important; }
    .mdhero .mdhero-reviews li a { padding: 6px 10px !important; }
    .mdhero .mdhero-reviews .name { display: none; }

    /* ---------- the first trip slider right under the hero: tighten its intro ---------- */
    main#main-content > .package-section.nepal-packages { padding-top: 28px !important; }
    main#main-content > .package-section.nepal-packages .title p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* ---------- one floating help button (Magical's "Need help?") ---------- */
    .stay-side-right2 { display: none !important; }
    .stay-side-right1 { right: 14px !important; left: auto !important; bottom: calc(16px + env(safe-area-inset-bottom)) !important; z-index: 1030; }
    .stay-side-right1 .con1 a { display: inline-flex !important; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 6px; border-radius: 999px; background: #15803d !important; color: #fff !important; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }
    .stay-side-right1 .con1 a .ss1 { width: 36px !important; height: 36px !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .18) !important; }
    .stay-side-right1 .con1 a .ss1 i { color: #fff !important; font-size: 20px; }
    .stay-side-right1 .con1 a span { display: inline !important; font-size: 0 !important; width: auto !important; opacity: 1 !important; visibility: visible !important; position: static !important; background: none !important; padding: 0 !important; }
    .stay-side-right1 .con1 a span::after { content: "Need help?"; font-size: 14px; font-weight: 800; color: #fff; }
}

/* round 25b: ux.css sizes the float as a 48px circle with "html body" selectors - match that weight */
@media (max-width: 991.98px) {
    html body .stay-side-right1 { width: auto !important; height: auto !important; right: 14px !important; }
    html body .stay-side-right1 .con1 { width: auto !important; }
    html body .stay-side-right1 .con1 a { width: auto !important; }
    html body .stay-side-right1 .con1 a .ss1, html body .stay-side-right1 .con1 a i { width: 36px !important; height: 36px !important; box-shadow: none !important; background: transparent !important; }
    html body .stay-side-right1 .con1 span { display: inline !important; position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; padding: 0 !important; background: none !important; box-shadow: none !important; font-size: 0 !important; }
}

/* 2026-11-01 (client): the "Need help?" button was too wide. The screen-reader label ("WhatsApp") picked up the button's span
   rules above, lost its visually-hidden box and added an invisible "Need help?" before the icon. Keep it hidden and the pill snug. */
@media (max-width: 991.98px) {
    html body .stay-side-right1 .con1 a span.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; margin: -1px !important; }
    html body .stay-side-right1 .con1 a span.visually-hidden::after { content: none !important; }
    html body .stay-side-right1 .con1 a { gap: 6px; height: 46px; padding: 0 16px 0 8px; }
}