/* E1-14 mobile pass: layout and accessibility fixes over the live stylesheet (each is an "improvement over live", see docs/parity.md).
   Linked last by the layout (after the page CSS), so equal specificity wins here. Not part of the live snapshot. */

.nowrap{white-space:nowrap}

/* U1: the converter currency picker stays inside the viewport (live shifts the pane 56px left: right:3.5rem + width:100%) with
   16px insets, below the sticky header; capped height, the list scrolls inside */
@media (max-width:47.99875em){
  html .cdk-overlay-pane.converter__select-pane:not(.mat-mdc-tooltip-panel){left:16px!important;right:16px!important;top:var(--header-bottom,74px)!important;bottom:auto!important;width:auto!important;min-width:0;max-width:none;margin:0;transform:none!important}
  .converter__select-pane .mat-mdc-select-panel{min-width:0;width:100%;height:min(65dvh,calc(100dvh - 90px));max-height:calc(100dvh - var(--header-bottom,74px) - 16px)}
}

/* U2: the rates branch picker (box placed by dropdown.client.ts: 16px insets, below the header, <=70% of the screen) fills its box,
   the list scrolls inside; compact options: address, status and hours stacked */
@media (max-width:47.99875em){
  html.branch-select .cdk-overlay-pane:not(.mat-mdc-tooltip-panel){top:0!important;left:0!important;right:0!important;width:auto!important;min-width:0;max-width:none;transform:none!important}
  html.branch-select .cdk-overlay-pane .mat-mdc-select-panel{display:flex;flex-direction:column;min-width:0;width:100%;height:auto;max-height:100%}
  html.branch-select .cdk-overlay-pane .order__select-top{flex-shrink:0;margin-bottom:.75rem}
  html.branch-select .cdk-overlay-pane .order__select-list{flex:1 1 auto;min-height:0;height:auto;max-height:none}
  #ratesBranch-panel .mat-mdc-option.mdc-list-item{padding:.75rem 1rem;min-height:0}
  #ratesBranch-panel .mat-mdc-option .mdc-list-item__primary-text{flex-direction:column;align-items:flex-start;gap:.25rem;min-width:0;max-width:100%}
  #ratesBranch-panel .branch__info{overflow-wrap:anywhere}
  #ratesBranch-panel .branch__status{flex-direction:column;align-items:flex-start;gap:.125rem}
  #ratesBranch-panel .branch__status span:before{content:none}
}

/* N1: docked form dropdowns (order branch, contacts topic, cash-replenishment; live: right:3.5rem + width:100% = pane 56px off screen)
   get the same 16px insets as the converter picker; dropdown.client.ts sets --header-bottom */
@media (max-width:47.99875em){
  html.select-open:not(.branch-select) .cdk-overlay-pane:not(.mat-mdc-tooltip-panel):not(.converter__select-pane){left:16px!important;right:16px!important;top:var(--header-bottom,74px)!important;bottom:auto!important;width:auto!important;min-width:0;max-width:none;margin:0;transform:none!important}
  html.select-open:not(.branch-select) .cdk-overlay-pane:not(.converter__select-pane) .mat-mdc-select-panel{min-width:0;width:100%;margin-left:0;max-height:calc(100dvh - 90px)}
}

/* U3 (src/client/menu.ts) has no CSS. U4 + li.branch__item overflow: long e-mail addresses wrap inside the card */
.branch__item>*{min-width:0;max-width:100%}
.branch__info{overflow-wrap:anywhere}
.branch__email a{overflow-wrap:anywhere}

/* U5: opening hours were 10px #757F88 (about 4:1): 12px, #5E6770; the status keeps one size on phones */
.branch__status .branch__working-hours{color:#5e6770}
@media (max-width:47.99875em){
  .branch__status{font-size:.875rem;gap:.5rem}
  .branch__status .branch__working-hours{font-size:.75rem;line-height:1.4}
}

/* U7: wrapped benefit lines of the phone hero align left with the check icon on the first line */
.hero__benefits-mob .hero__benefit{text-align:left;align-items:flex-start}

/* U8: the buy/sell column titles line up with the numbers when they wrap */
@media (max-width:47.99875em){.rates-table__title:not(:first-child){text-align:right}}

/* U9: inactive segment of the exchange-rates switcher: contrast >=4.5:1, a 44px tall hit area (pseudo-element, the pill is unchanged) */
.currency-content__switcher-btn{position:relative}
.currency-content__switcher-btn:not(.active){color:#4f6266}
.currency-content__switcher-btn:after{content:"";position:absolute;inset:-.25rem 0}

/* U10: hit areas of at least 44px without moving the visuals (pseudo-elements, inline padding) */
.header__cart-btn{min-width:44px;min-height:44px;align-items:center;justify-content:center}
@media (max-width:64.06125em){
  .icon-menu{width:44px;height:44px}
  .icon-menu span,.icon-menu:before,.icon-menu:after{left:.6875rem}
  .icon-menu:before{top:.875rem}
  .icon-menu:after{bottom:.875rem}
  .menu__link{min-height:44px}
  .switch-language__item{margin-top:0}
  .switch-language__link{padding-top:.75rem;padding-bottom:.75rem}
}
.footer__link a,.footer__social-link,.footer__privacy-link{position:relative}
.footer__link a:after,.footer__social-link:after,.footer__privacy-link:after{content:"";position:absolute;inset:-.4375rem 0}
/* in-flow padding (inline-block), so the stacked phone and email tap areas never overlap */
@media (max-width:47.99875em){.branch__phone a,.branch__email a{display:inline-block;padding-block:.75rem}}
/* V6: the same on tablets and touch screens (live `.branch__map-link:before{inset:0}` already makes the whole branch card the tap area) */
@media (max-width:64.06125em),(pointer:coarse){
  .product__quantity-btn{position:relative}
  .product__quantity-btn:after{content:"";position:absolute;inset:-.375rem}
  .cart-body__delete:after{content:"";position:absolute;inset:-.75rem -1rem -.75rem 0}
  .order__branch-link{position:relative}
  .order__branch-link:before{content:"";position:absolute;inset:-.75rem 0}
}

/* C1: the delete hit area reaches only into free space (above, below and the right padding of the line), never left over the stepper;
   the button is the containing block where live leaves it static (601px up; <=600 and the header cart <=767 are absolute already) */
@media (min-width:37.5em){.cart-body__delete{position:relative}}
/* M11: where the button is absolute (<=600, header cart <=767) the info cell's right padding is the free space left of it: the hit area extends .75rem into it */
@media (max-width:37.49875em){.cart-body__delete:after{left:-.75rem}}
@media (max-width:47.99875em){.header .cart-body__delete:after{left:-.75rem}}

/* U14: phone numbers never break inside the number */
.branch__phone a,.cg-phone,.footer__contacts a[href^="tel"]{white-space:nowrap}

/* U16: submenu rows of the burger menu keep a steady rhythm (min height instead of a fixed one) */
@media (max-width:64.06125em){
  .service__top.mob .accordion .service__content .service__link{height:auto;min-height:48px;padding-top:.5rem;padding-bottom:.5rem}
}

/* U17: "Par mums" / "Kontakti" share the icon column of the service rows (x 32, text 72) */
@media (max-width:64.06125em){
  .menu__list .menu__link{padding-left:2rem}
}

/* U19: the hero button does not wrap on narrow phones */
@media (max-width:22.49875em){
  .hero__btn{white-space:nowrap;padding-left:1rem;padding-right:1rem}
}

/* U20: footer columns use the full width on phones (live: 65%), so link texts do not wrap early */
@media (max-width:47.99875em){
  .footer__item{width:100%}
}

/* U22: privacy-policy tables fit 320px without an inner scroll: fixed layout, long words wrap (the scroll stays as a fallback) */
@media (max-width:47.99875em){
  .policy__text table{table-layout:fixed;width:100%}
  .policy__text td,.policy__text th{overflow-wrap:anywhere}
  .policy__text th:first-child,.policy__text td:first-child{width:38%}
}

/* Text overflows that live has too: long currency codes and the precious-metals and cash cards wrap or clip inside their boxes
   (`.how__tag` +8px is its decorative ::before offset, not text: left as live) */
.rates-table__currency{min-width:0}
.rates-table__currency-code{white-space:nowrap;overflow-wrap:normal;flex-shrink:0}
.rates-table__currency-name{min-width:0;overflow-wrap:break-word}
@media (max-width:47.99875em){
  .page--gold .advantages__item.wide{overflow:hidden}
  .advantages__list--cash li{min-width:0;overflow-wrap:anywhere}
  .form-hero__text.strong{flex-wrap:wrap;overflow-wrap:anywhere}
}
.advantages__info-title{overflow-wrap:break-word}

/* E1-14 batch 4 (768-1920 pass), each an "improvement over live" */

/* V2 + V13: wire-to-cash two-column hero (62-75em; live pins the title at 56px there): the title scales (56px at 1200, continuous with
   live above) so no word breaks and keeps a 3rem gap to the converter. Other heroes keep their live sizes. */
@media (min-width:62em) and (max-width:75em){
  .hero--wire .hero__title{font-size:clamp(2.25rem,4.667vw,3.5rem);line-height:1.12;overflow-wrap:normal;hyphens:auto}
  .hero--wire .hero__container{column-gap:3rem}
}

/* V4: rates branch panel as wide as its trigger, taller, the list scrolls inside; address left, status and hours on one line */
@media (min-width:48em){
  html.branch-select .cdk-overlay-pane:not(.mat-mdc-tooltip-panel){max-width:none;min-width:0}
  #ratesBranch-panel{max-height:min(60vh,480px)}
  html.branch-select #ratesBranch-panel .order__select-list{max-height:calc(min(60vh,480px) - 5rem)}
  #ratesBranch-panel .mat-mdc-option .mdc-list-item__primary-text{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.25rem 1rem;width:100%}
  #ratesBranch-panel .branch__info{flex:1 1 12rem;min-width:0}
  #ratesBranch-panel .branch__status{flex-shrink:0;white-space:nowrap}
}

/* V5: the chevron of dropdown triggers flips while the panel is open (the live `.mat-focused` flip, which our dropdowns never set) */
.mat-mdc-select-trigger[aria-expanded="true"] .mat-mdc-select-value-text mat-select-trigger:after{transform:rotateX(180deg)}

/* V7: three small cards at 768-991: readable text, titles scale and hyphenate instead of breaking mid-word */
@media (min-width:48em) and (max-width:61.99875em){
  .page:not(.page--gold) .advantages__item:not(.wide) .advantages__text{font-size:.875rem;line-height:1.25rem}
  .page:not(.page--gold) .advantages__item:not(.wide) .advantages__info-title{font-size:clamp(1.125rem,2.6vw,1.5rem);line-height:1.3;hyphens:auto;overflow-wrap:break-word}
}

/* V9 (src/client/calc.ts sets the vars): from 768 the currency picker is anchored to the converter card, below the trigger */
@media (min-width:48em){
  html .cdk-overlay-pane.converter__select-pane:not(.mat-mdc-tooltip-panel){left:var(--pane-left)!important;right:auto!important;top:var(--pane-top)!important;bottom:auto!important;width:var(--pane-width)!important;min-width:0;max-width:none;margin:0;transform:none!important}
}

/* V10: branch cards from 768: the map link keeps the right column, even next to a long address */
@media (min-width:48em){
  .branch__item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .branch__item>.branch__map-link{margin-left:0}
  .branch__item>.branch__rates{grid-column:1/-1}
}

/* V11: visible keyboard focus on the converter currency select */
.converter__select:focus-visible .mat-mdc-select-trigger{outline:2px solid #ff5d47;outline-offset:2px;border-radius:.5rem}

/* V14 (src/pages/_content/dropdown.client.ts): scrim behind an open form dropdown on phones, where the panel is modal-like (tablet and desktop: as live, none); the last option is not cut off */
@media (max-width:47.99875em){.cdk-overlay-container.scrim-open{background:rgba(4,21,51,.4);pointer-events:auto}}
.cdk-overlay-pane .order__select-list{box-sizing:border-box;padding-bottom:1.5rem;scroll-padding-bottom:1.5rem}

/* V15: footer legal links do not break inside an item; the line wraps between items */
.footer__privacy a{white-space:nowrap}
.footer__privacy{display:flex;flex-wrap:wrap;justify-content:center;column-gap:.5rem}
@media (min-width:62em){.footer__privacy{justify-content:flex-end}}