/* The floating weather chip (sections/weather-chip.blade.php): a green pill in a bottom corner that unfolds sideways. */
.wx-chip { position: fixed; bottom: 18px; z-index: 900; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-family: var(--ms-font-body, Jost, sans-serif); }
.wx-chip.is-left { left: 18px; } .wx-chip.is-right { right: 18px; align-items: flex-end; }
.wx-chip[hidden] { display: none; }
.wx-pill { display: inline-flex; align-items: center; gap: 9px; height: 44px; max-width: calc(100vw - 36px); padding: 0 16px 0 12px; border: 0; border-radius: 999px;
    /* the website's button colour (Design & typography), lighter with a thin gold ring at rest, full on hover / when open */
    background: color-mix(in srgb, var(--fb-bg, var(--ms-btn-bg, #01433f)) var(--fb-rest, 70%), transparent); color: var(--fb-fg, var(--ms-btn-fg, #fff)); font: 500 13.5px/1 var(--ms-font-body, Jost, sans-serif); white-space: nowrap; overflow: hidden;
    box-shadow: 0 0 0 var(--fb-ring-w, 1.5px) var(--fb-ring, var(--ms-gold, #bc9459)), var(--fb-shadow, 0 6px 16px rgba(0, 0, 0, .12)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: wx-in .45s ease both;
    transition: background .2s, color .2s, box-shadow .2s; }
.wx-pill:hover, .wx-chip.is-open .wx-pill { background: var(--fb-bg, var(--ms-btn-bg, #01433f)); color: var(--fb-fg, var(--ms-btn-fg, #fff)); box-shadow: 0 0 0 var(--fb-ring-w, 1.5px) var(--fb-ring, var(--ms-gold, #bc9459)), var(--fb-shadow-h, 0 10px 26px rgba(0, 0, 0, .25)); }
.wx-btn:focus-visible { outline: 2px solid #f3d9a4; outline-offset: 2px; }
.wx-ic { font-size: 18px; line-height: 1; }
.wx-btn > b { font-family: var(--ms-font-head, Oswald, sans-serif); font-weight: 400; font-size: 18px; letter-spacing: .01em; }
.wx-more { display: inline-flex; align-items: center; gap: 10px; max-width: 0; opacity: 0; overflow: hidden; transition: max-width .4s ease, opacity .25s ease; }
.wx-chip.is-open .wx-more { max-width: 520px; opacity: 1; }
.wx-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .3); flex: 0 0 auto; }
.wx-sep[hidden], .wx-city[hidden], .wx-gap[hidden] { display: none; }
/* each city on one centred line: small icon, name, temperature */
.wx-city { display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.wx-city i { font-style: normal; font-size: 13px; line-height: 1; }
.wx-city span { font-weight: 500; }
.wx-city b { font-family: var(--ms-font-head, Oswald, sans-serif); font-weight: 400; font-size: 17px; line-height: 1; }
.wx-btn > b, .wx-ic, .wx-gap { line-height: 1; }
.wx-gap { display: inline-flex; align-items: center; height: 22px; }
/* open: the comparison says it all, so the folded temperature steps aside */
.wx-chip.is-open .wx-btn > b { display: none; }
.wx-gap { padding: 3px 10px; border-radius: 999px; background: #f3d9a4; color: #4a330b; font-weight: 700; font-size: 12px; }
@keyframes wx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wx-pill { animation: none; } .wx-more { transition: none; } }

/* W1 labelled pill: gold line icon, the temperature and a short text ("Murree now"); 46px like the Top pill */
.wx-pill { height: 46px; padding: 0 17px 0 13px; border-radius: var(--fb-radius, 999px); }
.wx-ic { display: inline-flex; width: 21px; height: 21px; color: var(--fb-icon, #f3d9a4); }
.wx-ic svg { width: 100%; height: 100%; }
.wx-btn > b { font-weight: 500; font-size: 19px; }
.wx-now { font-size: 12.5px; font-weight: 500; opacity: .92; }
.wx-now[hidden], .wx-chip.is-open .wx-now { display: none; }

/* the pill holds the button and the location question (design WL3): each its own control */
.wx-btn { display: inline-flex; align-items: center; gap: inherit; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.wx-ask { display: none; align-items: center; gap: 6px; margin-left: 2px; padding: 0 0 0 11px; border: 0; border-left: 1px solid rgba(255, 255, 255, .3); background: none; color: #f3d9a4; font: inherit; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.wx-ask span { text-decoration: underline; text-underline-offset: 3px; }
.wx-ask svg { flex: 0 0 auto; width: 15px; height: 15px; }
.wx-ask:focus-visible { outline: 2px solid #f3d9a4; outline-offset: 2px; }
.wx-ask[disabled] { opacity: .6; cursor: progress; }
.wx-chip.is-open.can-ask .wx-ask { display: inline-flex; }
.wx-chip.can-ask .wx-gap { display: none; }

/* Phones: a small pill in the header next to the menu button (site-weather.js moves it there). A tap opens a white card
   under it; the green pill reads on the see-through, solid and cream headers alike. */
@media (max-width: 767px) {
    .wx-chip, .wx-chip.is-left, .wx-chip.is-right { top: 15px; bottom: auto; left: auto; right: 54px; z-index: 900; }
    .header_style_wrapper .wx-chip { position: absolute; }
    .wx-pill { height: 32px; gap: 5px; padding: 0 11px 0 8px; overflow: visible; animation: none; background: var(--fb-bg, var(--ms-btn-bg, #01433f)); }
    .wx-ic { width: 16px; height: 16px; }
    .wx-btn > b, .wx-chip.is-open .wx-btn > b { display: inline; font-size: 15px; }
    .wx-now, .wx-sep { display: none; }
    .wx-more { display: none; position: absolute; top: calc(100% + 8px); right: -42px; flex-direction: column; align-items: stretch; gap: 8px; box-sizing: border-box; width: min(240px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 14px; background: #fff; color: #17302c; font-size: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
    .wx-chip.is-open .wx-more { display: flex; max-width: none; opacity: 1; overflow: visible; }
    .wx-chip.can-ask .wx-more { padding-bottom: 50px; }
    .wx-city span { margin-right: auto; }
    .wx-gap { align-self: stretch; justify-content: center; }
    .wx-ask { position: absolute; top: calc(100% + 54px); right: -42px; box-sizing: border-box; width: min(240px, calc(100vw - 24px)); margin: 0; padding: 0 14px; border: 0; color: var(--ms-gold-deep, #8a6a35); font-size: 13px; white-space: normal; text-align: left; }
}
/* the smallest phones: the logo needs the room, so the temperature alone */
@media (max-width: 349px) { .wx-ic { display: none; } .wx-pill { padding: 0 10px; } }