/* Custom tweaks added during the Laravel migration. Loaded after styles.css. */

/* Header ad slot: drop the fixed 90px height (override styles.css) so the row
   collapses when there's no ad. */
.adsense-header { height: auto; }

/* Header logo is now a single wide SVG wordmark (no localized tagline). Size it by
   height instead of the old fixed 192px width so it isn't tiny at the new aspect. */
.navbar-brand > img.logo {
    width: auto;
    height: 34px;
    min-height: 0;
    margin: 19px 0;
}
/* Mobile: compact header — logo and the "Меню" toggle share one tight row, same
   height (48px) so they centre on the same line; trim the header padding too. */
@media (max-width: 991px) {
    header { padding-top: 8px; padding-bottom: 8px; }
    /* logo + "Меню" share one flex row so both stay vertically centred at any width
       (the logo used to sit in an inline-block while the toggle floated → misaligned). */
    header .col-md-4 { display: flex; align-items: center; justify-content: space-between; }
    .navbar-brand { display: flex; align-items: center; min-height: 48px; margin-top: 0; }
    .navbar-brand > img.logo { height: 28px; margin: 0; }
    .toggle-menu-btn { float: none; height: 48px; line-height: 48px; margin-top: 0; }
}
/* Desktop: centre the logo in the header row. On sites that carry the 90px
   leaderboard ad (.has-header-ad — driven by $site['adsense']) match its height so
   the logo lines up with it; sites without an ad (e.g. cursdeazi) stay compact. */
@media (min-width: 992px) {
    /* min-height gives the logo top/bottom breathing room on ad-free sites (e.g. cursdeazi),
       which otherwise collapsed to the bare logo height. Ad sites match the 90px banner. */
    .navbar-brand { display: flex; align-items: center; min-height: 67px; }
    .navbar-brand > img.logo { margin: 0; }
    header.has-header-ad .navbar-brand { min-height: 90px; }
}

/* --- Converter amount row + currency selector --------------------------- */
/* The amount input grows; the green button next to it is a fixed-width trigger
   that opens a searchable list of ALL currencies. The six quick radio buttons
   below keep working unchanged. Built as a flex row so it no longer depends on
   the legacy label.sum 75%/25% float trick (which bled into the dropdown). */
.converter .sum {
    display: block;
    width: 100%;
}
/* The two rows of quick-pick currency buttons are redundant now that the green
   dropdown selects ANY currency. Hide them — but keep them in the DOM: the converter
   JS tracks the chosen currency via the (now hidden) radios inside .currencies-row,
   and appends a hidden .cs-extra radio there for currencies outside the old short list. */
.converter .currencies-row { display: none; }
/* Op-type radios (Продать/Купить): the absolute span was 34px tall in a 35px box and
   overlapped the bottom border (most visible on the active/grey one). Stretch it to the
   content box so all four 1px borders stay intact. */
.converter label.type > span { top: 0; bottom: 0; height: auto; line-height: 33px; }
.converter .sum-row {
    display: flex;
    align-items: stretch;
    margin: 3px 0;
}
.converter .sum-input {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    height: 46px;
    line-height: 36px;
    padding: 4px 10px;
    font-size: 24px;
    color: #000;
    background: #f8fafc;
    border: 2px solid var(--accent);
    border-right: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
}
.converter .sum-input:focus {
    outline: none;
    border-color: var(--accent);
}
/* The result field is disabled; iOS Safari dims disabled inputs (grey text via
   -webkit-text-fill-color + reduced opacity). Force the same look as desktop. */
.converter .sum-input:disabled,
.converter .sum-input[disabled] {
    opacity: 1;
    color: #000;
    -webkit-text-fill-color: #000;
    border-color: var(--accent);
    background: #f8fafc;
}
.converter .sum-input::-webkit-outer-spin-button,
.converter .sum-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.curr-select {
    position: relative;
    flex: 0 0 auto;
    min-width: 76px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.curr-select .selectedCurr {
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 2px 24px 0 12px;
    background: var(--accent);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}
.curr-select .curr-select-caret {
    position: absolute;
    top: 0;
    right: 9px;
    height: 100%;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    pointer-events: none;
    transition: transform .15s ease;
}
.curr-select.open .curr-select-caret {
    transform: rotate(180deg);
}
/* Fixed-pair page (converter/{from}-{to}): no dropdown/caret, so drop the right caret
   gutter to centre the currency label, and make the box non-interactive. */
.curr-select--lock { pointer-events: none; }
.curr-select--lock .selectedCurr { padding-right: 12px; }

.curr-select .curr-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1050;
    width: 300px;
    max-width: 92vw;
    background: #fff;
    border: 1px solid #e2e7e8;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    overflow: hidden;
    text-align: left;
    cursor: auto;
}
.curr-select.open .curr-dropdown {
    display: block;
}
.curr-select .curr-dropdown-search {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid #eef1f2;
    border-radius: 0;
    background: #fff;
    color: #333;
    font-size: 16px;
    line-height: 20px;
    float: none;
    box-sizing: border-box;
    -webkit-appearance: none;
}
.curr-select .curr-dropdown-search:focus {
    outline: none;
}
.curr-select .curr-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 280px;
    overflow-y: auto;
}
.curr-select .curr-dropdown-list li {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    font-size: 14px;
    line-height: 1.2;
    color: #3c4043;
    cursor: pointer;
    white-space: nowrap;
}
.curr-select .curr-dropdown-list li b {
    order: 2;            /* code goes to the RIGHT, name on the left */
    flex: 0 0 auto;
    margin-left: 12px;
    color: var(--accent);
    font-weight: 600;
}
.curr-select .curr-dropdown-list li .cn {
    order: 1;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
.curr-select .curr-dropdown-list li:hover {
    background: #f3f7f6;
}
.curr-select .curr-dropdown-list li.active {
    color: var(--accent-dark);
    font-weight: 500;
}
.curr-select .curr-dropdown-list li.unavailable {
    color: #c0c6c8;
    cursor: not-allowed;
}
.curr-select .curr-dropdown-list li.unavailable b {
    color: #d4dadc;
}


/* --- Converter swap button --------------------------------------------------
   Sits between the two amount inputs and flips the selected pair
   (USD→RUB becomes RUB→USD). JS sets `top` to keep it centred on the amount
   inputs on desktop and in the gap between stacked inputs on mobile. */
#result-data { position: relative; }
/* The "no data" alert is a JS-driven error state (core.js fades it in only when the
   selected params return nothing). Hide it by default so it doesn't flash on load and
   shove the amount blocks down — which made the swap button jump when it later hid. */
#result-data #no-data { display: none; }
.converter-swap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    /* Revealed by JS once positionSwap() has placed it, so it never paints in the
       wrong spot and then jumps into place. */
    visibility: hidden;
    /* Generous hit area for easy tapping, but no visible box — just the arrows. */
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    color: #aab2b9;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    transition: color .15s ease;
}
.converter-swap:hover,
.converter-swap:focus {
    color: #4b5563;
    outline: none;
}
.converter-swap:active { transform: translate(-50%, -50%) scale(.92); }
.converter-swap .fa { pointer-events: none; }

/* Desktop: the two amount blocks sit side by side. Widen the inner gutter so the
   inputs stop short of the centre, leaving air around the swap button. */
@media (min-width: 992px) {
    .converter .block-from { padding-right: 40px; }
    .converter .block-to   { padding-left: 40px; }
}

/* Below md the two amount blocks stack — open a gap so the swap button drops
   cleanly between them instead of overlapping a field/label. */
@media (max-width: 991px) {
    .converter .block-from { margin-bottom: 26px; }
    /* styles.css adds .block-to{padding-top:15px} on mobile, which pushes the
       "result" label down and made the gap below the swap button look bigger than
       above. Drop it so the arrows sit evenly between the two fields. */
    .converter .block-to { padding-top: 0; }
    /* The rate block goes full-width above; date + bank share the next line 50/50. Keep
       their labels on ONE line (the longer "Банк или обменник:" would otherwise wrap and
       drop its select a line below the date input, misaligning the two). */
    .converter .additional > .row > div { white-space: nowrap; }
    .converter .additional > .row > div > label { white-space: normal; }
    /* styles.css gives .bank-option a 15px top padding on mobile; the date column had none,
       so it stuck to the rate block and sat a line above the bank. Match it so both align. */
    .converter .additional .date-option { padding-top: 15px; }
}


/* Converter bank <select>: long names (e.g. "Banca Națională a României") must
   ellipsis (…) instead of clipping/overflowing the box.
   Target #bank directly (not the .bank-option wrapper) so it works even when an
   older cached HTML response is served without that wrapper class. */
.bank-option label.bank-select {
    position: relative;
    display: block;
    width: 100%;
}
.converter #bank {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 26px; /* room for the caret so the … doesn't touch it */
    /* drop the select-arrow.png and the native arrow; we draw our own caret */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
}

/* iOS Safari auto-zooms the page when a focused form control is below 16px.
   The currency dropdown focuses its search input immediately on open, so keep all
   converter controls at 16px+ on touch-sized screens. */
@media (max-width: 767px) {
    .converter input,
    .converter select,
    .converter textarea {
        font-size: 16px;
    }
}
/* Dropdown caret as a Font Awesome glyph (matches the currency selector) tinted
   with the per-site primary color from config/sites.php (--accent). */
.bank-option .bank-caret {
    position: absolute;
    top: 0;
    right: 9px;
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--accent);
    font-size: 14px;
    pointer-events: none; /* clicks fall through to the select */
}


/* "Convert to" list on the currency page: 2–3 responsive columns of rate links. */
.convert-to-list { margin-top: 6px; }
.convert-to-list > div { padding-top: 5px; padding-bottom: 5px; }
.convert-to-list a { display: inline-block; line-height: 1.3; }


/* Sticky top navigation on desktop (>=992px), where the menu is horizontal.
   On mobile the menu is a collapsible toggle, so it stays in normal flow. */
@media (min-width: 992px) {
    #main-menu {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1030;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    }
}
/* Mobile: the accent nav bar belongs to the EXPANDED menu only. Keep the bar itself
   transparent and move the accent fill onto the collapsible panel, so the collapsed
   state doesn't leave a thin green line under the header. */
@media (max-width: 991px) {
    #main-menu { background: transparent; margin-bottom: 0; }
    #main-menu .navbar-collapse { background: var(--accent); }
    /* The 13px gap below the menu belongs to the OPEN state only — collapsed it left a dead
       gap under the header. animateBlockHeight() adds .opened to the panel when expanded. */
    #main-menu .navbar-collapse.opened { margin-bottom: 13px; }
}

/* Language switcher dropdown (top bar) — mcamara locale selector */
#top-block .languages .lang-switcher { position: relative; display: inline-block; line-height: 28px; }
#top-block .languages .lang-switcher .dropdown-toggle { display: block; padding: 0 10px; background: #f2f2f3; color: #06111e; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; }
#top-block .languages .lang-switcher .dropdown-toggle .caret { margin-left: 6px; }
#top-block .languages .lang-switcher .dropdown-menu { right: 0; left: auto; min-width: 100%; margin: 0; padding: 0; border: 1px solid #d6dadb; border-radius: 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); }
#top-block .languages .lang-switcher .dropdown-menu > li > a { display: block; padding: 5px 14px; line-height: 1.4; color: #06111e; border: 0; white-space: nowrap; }
#top-block .languages .lang-switcher .dropdown-menu > li > a:hover { background: #e7ebec; }
#top-block .languages .lang-switcher.open .dropdown-menu { display: block; }

/* Mobile menu burger — pure CSS in the site accent colour (replaces img/menu.png). */
.toggle-menu-btn::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    margin-top: -1.5px;
    width: 26px;
    height: 3px;
    border-radius: 1px;
    background: var(--accent);
    box-shadow: 0 -8px 0 var(--accent), 0 8px 0 var(--accent);
}

@media (max-width: 480px) {
    .toggle-menu-btn { height: 60px; line-height: 60px; }
}


/* --- Dynamics page (ApexCharts) — card layout --------------------------- */
.dynamics-intro { color: #5b6770; margin: 4px 0 16px; max-width: 760px; line-height: 1.5; }

/* Controls panel */
.dyn-panel {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
    background: #f6f9f9; border: 1px solid #e7ecec; border-radius: 12px;
    padding: 16px; margin-bottom: 16px;
}
.dyn-field { flex: 1 1 140px; min-width: 130px; display: flex; flex-direction: column; }
/* Currency / Bank / [From+To] share row 1 in equal proportion (basis 140:140:280 =
   grow 1:1:2), and the presets take their own full-width row below. The two date
   inputs live in .dyn-field-dates so they always wrap as a pair (never C on one row
   and To on the next) and split their cell 50/50. */
.dyn-field-presets { flex: 1 1 100%; }
.dyn-field-dates { flex: 2 1 280px; min-width: 260px; display: flex; gap: 8px; }
.dyn-field-dates .dyn-field { flex: 1 1 0; min-width: 0; }
.dyn-field > label {
    font-size: 11px; font-weight: 600; color: #7a868d; text-transform: uppercase;
    letter-spacing: .4px; margin-bottom: 6px;
}
.dyn-field input[type="date"],
.dyn-select select {
    width: 100%; height: 42px; box-sizing: border-box;
    border: 1px solid #dfe6e6; border-radius: 8px; background: #fff;
    padding: 0 12px; font-size: 14px; color: #1b2b36;
    transition: border-color .15s, box-shadow .15s;
}
.dyn-field input[type="date"]:focus,
.dyn-select select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 82%);
}
/* iOS Safari renders native date inputs at their intrinsic content width and
   ignores width:100%, so they overflow the flex panel on mobile. Strip the
   native appearance so the box honours width/box-sizing, and left-align the
   value (iOS centres it by default). */
.dyn-field input[type="date"] {
    -webkit-appearance: none; appearance: none; min-width: 0;
}
.dyn-field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.dyn-select { position: relative; }
.dyn-select select {
    -webkit-appearance: none; appearance: none; padding-right: 34px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.dyn-select i { position: absolute; right: 12px; top: 0; height: 100%; display: flex; align-items: center; color: var(--accent); pointer-events: none; }

.dyn-presets { display: flex; gap: 8px; }
.dyn-presets button {
    flex: 1 1 0; height: 42px; border: 1px solid #dfe6e6; border-radius: 8px;
    background: #fff; color: #46535c; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: all .12s;
}
.dyn-presets button:hover { border-color: var(--accent); color: var(--accent); }
.dyn-presets button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Curs page filter panel (date + institution type). Shares the dyn-panel look. */
.curs-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    align-items: flex-end;
    margin-bottom: 15px;
}
/* Date, currency and filter fields share the top row in equal thirds; the submit
   button wraps onto its own full-width row below them. */
.curs-filter-field { flex: 1 1 0; min-width: 150px; display: flex; flex-direction: column; }
.curs-filter-field > label {
    font-size: 11px; font-weight: 600; color: #7a868d; text-transform: uppercase;
    letter-spacing: .4px; margin-bottom: 6px;
}
/* Shared box look for the date input, the currency dropdown and the filter select. */
.curs-filter input[type="date"],
.curs-select select {
    width: 100%; height: 42px; box-sizing: border-box; -webkit-appearance: none; appearance: none;
    border: 1px solid #dfe6e6; border-radius: 8px; background: #fff;
    padding: 0 12px; font-size: 14px; color: #1b2b36;
    transition: border-color .15s, box-shadow .15s;
}
.curs-filter input[type="date"]:focus,
.curs-select select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 82%);
}
.curs-filter input[type="date"]::-webkit-date-and-time-value { text-align: left; }
/* Filter <select> with our own caret (matches the Dynamics .dyn-select). */
.curs-select { position: relative; }
.curs-select select { padding-right: 34px; cursor: pointer; }
.curs-select i { position: absolute; right: 12px; top: 0; height: 100%; display: flex; align-items: center; color: var(--accent); pointer-events: none; }
.curs-filter-submit {
    flex: 1 1 100%; height: 42px; padding: 0 22px; border: 1px solid var(--accent); border-radius: 8px;
    background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: filter .12s;
}
.curs-filter-submit:hover { filter: brightness(1.07); }
/* Narrow content column (sidebar layout below the md breakpoint): stack each field on
   its own full-width line instead of an awkward 2-then-1 wrap. */
@media (max-width: 991px) {
    .curs-filter-field { flex: 1 1 100%; }
}
/* No institution-type filter (e.g. sites without exchange offices): the date field
   and the submit button share the row 50/50, wrapping to full-width on narrow screens. */
.curs-filter--no-types .curs-filter-field { flex: 1 1 200px; }
.curs-filter--no-types .curs-filter-submit { flex: 1 1 200px; }

/* Currency selector — searchable dropdown, styled like the Dynamics page's neutral
   select box (.dyn-select). Used as a live in-table picker (home) and as a form field
   in the /curs filter panel. */
.rates-cs { position: relative; display: inline-block; -webkit-user-select: none; user-select: none; }
/* In-table (home) instance: label "Валюта" above the box, like the Dynamics fields. */
.rates-cs-field { display: inline-flex; flex-direction: column; margin: 0 0 12px; }
.rates-cs-label {
    font-size: 11px; font-weight: 600; color: #7a868d; text-transform: uppercase;
    letter-spacing: .4px; margin-bottom: 6px;
}
.rates-cs-field .rates-cs { margin: 0; }
.rates-cs-trigger {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
    min-width: 210px; height: 42px; box-sizing: border-box; padding: 0 12px;
    border: 1px solid #dfe6e6; border-radius: 8px; background: #fff;
    font-size: 14px; color: #1b2b36; cursor: pointer; text-align: left;
    transition: border-color .15s, box-shadow .15s;
}
.rates-cs-trigger:hover { border-color: var(--accent); }
.rates-cs.open .rates-cs-trigger {
    border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 82%);
}
.rates-cs-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rates-cs-caret { color: var(--accent); font-size: 14px; flex: 0 0 auto; transition: transform .15s; }
.rates-cs.open .rates-cs-caret { transform: rotate(180deg); }
/* Panel (form) instance fills its field like the date input. */
.curs-filter-currency .rates-cs, .curs-filter-currency .rates-cs-trigger { width: 100%; min-width: 0; }
.rates-cs-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 1050;
    /* Match the trigger's width so it never overflows its field/the viewport. */
    width: 100%; min-width: 220px; max-width: calc(100vw - 24px);
    background: #fff; border: 1px solid #e2e7e8;
    border-radius: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); overflow: hidden; text-align: left;
}
.rates-cs.open .rates-cs-dropdown { display: block; }
.rates-cs-search {
    display: block; width: 100%; box-sizing: border-box; padding: 10px 14px; border: 0;
    border-bottom: 1px solid #eef1f2; background: #fff; color: #333; font-size: 14px; -webkit-appearance: none;
}
.rates-cs-search:focus { outline: none; }
.rates-cs-list { list-style: none; margin: 0; padding: 6px 0; max-height: 280px; overflow-y: auto; }
.rates-cs-list li { display: flex; align-items: center; padding: 9px 14px; font-size: 14px; color: #3c4043; cursor: pointer; white-space: nowrap; }
.rates-cs-list li b { order: 2; flex: 0 0 auto; margin-left: 12px; color: var(--accent); font-weight: 600; }
.rates-cs-list li .cn { order: 1; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.rates-cs-list li:hover { background: #f3f7f6; }
.rates-cs-list li.active { color: var(--accent-dark); font-weight: 500; }

/* Converter "Дата курса" + "Банк или обменник" restyled to match the lower rate-filter
   boxes (.curs-filter date input / .rates-cs searchable dropdown). */
.converter #date {
    width: 100%; height: 42px; box-sizing: border-box; -webkit-appearance: none; appearance: none;
    border: 1px solid #dfe6e6; border-radius: 8px; background: #fff;
    padding: 0 12px; font-size: 14px; color: #1b2b36;
    transition: border-color .15s, box-shadow .15s;
}
.converter #date:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 82%);
}
.converter #date::-webkit-date-and-time-value { text-align: left; }

/* Unified calendar glyph for ALL date inputs (converter / rates filter / dynamics) on every
   platform. iOS Safari draws no indicator and desktop Chrome draws a plain native one; replace
   both with our own consistent icon drawn as a background. The native
   ::-webkit-calendar-picker-indicator is stretched transparently over the WHOLE field so a
   click anywhere (incl. the empty area + our icon) opens the picker natively — one open, no
   flicker, and it still works without JS. */
.converter #date,
.curs-filter input[type="date"],
.dyn-field input[type="date"] {
    position: relative;
    cursor: pointer;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237a868d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}
.converter #date::-webkit-calendar-picker-indicator,
.curs-filter input[type="date"]::-webkit-calendar-picker-indicator,
.dyn-field input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0;
    opacity: 0; cursor: pointer;
}

/* "Курс конвертации" readout box — full rule consolidated here from styles.css and aligned
   with the new date/bank boxes (white, bordered, 42px tall). */
.converter .cursFromTo {
    width: 100%; box-sizing: border-box; height: 42px; line-height: 42px;
    text-align: center; color: #000; font-size: 15px; font-weight: 600;
    border: 1px solid #dfe6e6; border-radius: 8px; background: #fff; margin: 0;
}

/* All converter field labels (Продаю / Получу / Курс конвертации / Дата курса / Банк или
   обменник) use the uppercase chip style of the lower "Курсы валют в банках Молдовы"
   filter labels. span.labels matches styles.css's specificity so it wins. */
.converter .conv-label,
.converter span.labels {
    display: block; margin: 0 0 6px;
    font-size: 11px; font-weight: 600; color: #7a868d;
    text-transform: uppercase; letter-spacing: .4px; line-height: 1.3;
}

/* Searchable bank/office selector — same look as the .rates-cs currency dropdown. The
   native <select> shows when JS is off (fallback); JS swaps it for the .bank-cs widget. */
.bank-cs { position: relative; display: block; width: 100%; -webkit-user-select: none; user-select: none; }
.bank-cs-native { display: block; }
.bank-cs-trigger, .bank-cs-dropdown { display: none; }
.has-js .bank-cs-native { display: none; }
.has-js .bank-cs-trigger {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; height: 42px; box-sizing: border-box; padding: 0 12px;
    border: 1px solid #dfe6e6; border-radius: 8px; background: #fff;
    font-size: 14px; color: #1b2b36; cursor: pointer; text-align: left;
    transition: border-color .15s, box-shadow .15s;
}
.bank-cs-trigger:hover { border-color: var(--accent); }
.bank-cs.open .bank-cs-trigger {
    border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 82%);
}
.bank-cs-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-cs-caret { color: var(--accent); font-size: 14px; flex: 0 0 auto; transition: transform .15s; }
.bank-cs.open .bank-cs-caret { transform: rotate(180deg); }
.bank-cs.open .bank-cs-dropdown {
    display: block; position: absolute; top: calc(100% + 4px); right: 0; left: auto; z-index: 1050;
    width: 100%; min-width: 220px; max-width: calc(100vw - 24px);
    background: #fff; border: 1px solid #e2e7e8; border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16); overflow: hidden; text-align: left;
}
.bank-cs-search {
    display: block; width: 100%; box-sizing: border-box; padding: 10px 14px; border: 0;
    border-bottom: 1px solid #eef1f2; background: #fff; color: #333; font-size: 14px; -webkit-appearance: none;
}
.bank-cs-search:focus { outline: none; }
.bank-cs-list { list-style: none; margin: 0; padding: 6px 0; max-height: 280px; overflow-y: auto; }
.bank-cs-list li { display: block; padding: 9px 14px; font-size: 14px; color: #3c4043; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-cs-list li:hover { background: #f3f7f6; }
.bank-cs-list li.active { color: var(--accent-dark); font-weight: 500; }
/* Group header (Banks / Exchange offices) — a non-selectable label inside the list.
   Black here (converter bank selector only); the generic .sel-cs-group stays muted gray. */
.bank-cs-list li.bank-cs-group {
    cursor: default; padding: 8px 14px 4px; font-size: 12px; font-weight: 600;
    color: #1b2b36; text-transform: uppercase; letter-spacing: .4px;
}
.bank-cs-list li.bank-cs-group:hover { background: none; }

/* Generic custom dropdown for native <select> boxes (.dyn-select / .curs-select) — same look
   as the .bank-cs selector but WITHOUT a search box. JS mirrors the <select> into this panel
   (the OS option list can't be styled); the native <select> stays the source of truth and the
   no-JS fallback. Enhanced wrappers hide their native select + the old caret. */
.sel-cs.enhanced > select,
.sel-cs.enhanced > i.fa { display: none; }
.sel-cs { position: relative; -webkit-user-select: none; user-select: none; }
.sel-cs-trigger {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; height: 42px; box-sizing: border-box; padding: 0 12px;
    border: 1px solid #dfe6e6; border-radius: 8px; background: #fff;
    font-size: 14px; color: #1b2b36; cursor: pointer; text-align: left;
    transition: border-color .15s, box-shadow .15s;
}
.sel-cs-trigger:hover { border-color: var(--accent); }
.sel-cs.open .sel-cs-trigger {
    border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 82%);
}
.sel-cs-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-cs-caret { color: var(--accent); font-size: 14px; flex: 0 0 auto; transition: transform .15s; }
.sel-cs.open .sel-cs-caret { transform: rotate(180deg); }
.sel-cs-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 1050;
    width: 100%; min-width: 0; max-width: calc(100vw - 24px);
    background: #fff; border: 1px solid #e2e7e8; border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16); overflow: hidden; text-align: left;
}
.sel-cs.open .sel-cs-dropdown { display: block; }
.sel-cs-list { list-style: none; margin: 0; padding: 6px 0; max-height: 280px; overflow-y: auto; }
.sel-cs-list li { display: block; padding: 9px 14px; font-size: 14px; color: #3c4043; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-cs-list li:hover { background: #f3f7f6; }
.sel-cs-list li.active { color: var(--accent-dark); font-weight: 500; }
.sel-cs-list li.sel-cs-group {
    cursor: default; padding: 8px 14px 4px; font-size: 12px; font-weight: 600;
    color: #1b2b36; text-transform: uppercase; letter-spacing: .4px;
}
.sel-cs-list li.sel-cs-group:hover { background: none; }
.sel-cs-search {
    display: block; width: 100%; box-sizing: border-box; padding: 10px 14px; border: 0;
    border-bottom: 1px solid #eef1f2; background: #fff; color: #333; font-size: 14px; -webkit-appearance: none;
}
.sel-cs-search:focus { outline: none; }
/* Currency items (options with data-code): name on the left, code aligned right — same as the
   rate-filter currency lists. */
.sel-cs-list li.sel-cs-cur { display: flex; align-items: center; }
.sel-cs-list li.sel-cs-cur .cn { order: 1; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.sel-cs-list li.sel-cs-cur b { order: 2; flex: 0 0 auto; margin-left: 12px; color: var(--accent); font-weight: 600; }

/* Rate-table header background (override styles.css default). */
.tablesorter-default th, .tablesorter-default thead td { background-color: #f2f3f3; }
.tablesorter-default { margin: 0; }

/* Bank branches table (banks/{slug}/branches). Header padding normally comes
   from the tablesorter JS plugin's .tablesorter-header class (added on init),
   but this table isn't wired into that plugin, so it's set explicitly here.
   Row hover: styles.css's default is a bold accent-green fill (built for the
   currency-comparison tables) — too heavy for this address/phone/hours
   listing, so swap in a subtle gray. */
#branchesTable th { padding: 12px 12px 10px; }
/* 2 columns (name+address merged, hours). */
#branchesTable th:first-of-type { width: 50%; }
#branchesTable th:nth-child(2) { width: 50%; }
#branchesTable tbody tr:hover > td,
#branchesTable tbody tr:hover td {
    background: #f5f5f5 !important;
    color: inherit !important;
}
#branchesTable tbody tr:hover td a { color: inherit !important; }
/* Branch name link: styles.css's default .bank-name link is bold black (built
   for the currency-comparison tables' bank/exchanger names) — visually
   indistinguishable from plain text here. Match the sidebar bank-list link
   style (.banks-list a) instead, so it's clearly clickable. */
#branchesTable td.bank-name a {
    color: #025e73;
    font-weight: 400;
    border: 0;
    border-bottom: 1px solid #025e73;
}
/* The generic tr:hover td a rule above resets color to inherit (row hover
   text turns dark) — keep the branch name link its own teal even on hover. */
#branchesTable tbody tr:hover td.bank-name a { color: #025e73 !important; }

/* Single branch detail table (banks/{slug}/branches/{id}) — same subtle-gray
   hover as #branchesTable, and keep its bank-name link teal on hover too. */
#branchDetailTable tbody tr:hover > td,
#branchDetailTable tbody tr:hover td {
    background: #f5f5f5 !important;
    color: inherit !important;
}
#branchDetailTable tbody tr:hover td a { color: #025e73 !important; }

/* App\Support\Schedule::format() output (branches list + branch detail page):
   each day/day-range is a <span class="schedule-day"> — block it out with a
   little top margin so days don't visually run together. */
.schedule-day { display: block; margin-top: 8px; }
.schedule-day:first-child { margin-top: 0; }

/* Tried centering the button via flex justify-content + min-height: measured
   with real click-by-click position tracing and it's NOT actually continuous
   — the recentering only engages once .schedule-data's animated height drops
   below the min-height threshold, which happens in a short burst near the
   very end of slideUp, reading as a sudden jump rather than a smooth move.
   Pinned to the top with a fixed padding instead: the button's offset from
   the cell's top never changes, collapsed or expanded, at any animation
   frame — zero movement by construction, not just in the two rest states. */
/* min-height forces every row to the same minimum height regardless of how
   many lines the address wraps to — otherwise the fixed top offset below
   left a different-sized (and inconsistent-looking) gap below the button
   on every row. padding: 12px 0 keeps top/bottom framing symmetric both
   here (collapsed) and around the expanded day list. */
#branchesTable td.schedule-cell { vertical-align: top; min-height: 76px; }
#branchesTable .schedule-wrap { padding: 12px 0; text-align: center; }
#branchesTable .schedule-data { width: 100%; }

/* "Показать"/"Скрыть" toggle button revealing the full schedule on the
   branches list page (#branchesTable .schedule-cell) — same small pill style
   as the .dyn-presets period buttons (dynamics/currency charts), themed via
   the per-site --accent (see config/sites.php → color), not a fixed color. */
.schedule-toggle {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #fff;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.schedule-toggle:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.schedule-data { margin-top: 10px; }

/* .filials-note now sits ABOVE the branches table (was below) — swap
   styles.css's top-only padding for top+bottom so it's evenly spaced from
   the tabs above and the table below. */
.filials-note { padding: 5px 0 15px; }

/* #curs is the single bank / exchange-office page's date-filterable rate table,
   swapped in place by the same AJAX as #cursRates — share the loading overlay. */
#cursRates, #curs { position: relative; }
#cursRates.curs-loading, #curs.curs-loading { pointer-events: none; }
/* While the filter AJAX is in flight: a translucent veil dims the table and an
   accent-coloured spinner sits on top (both fully opaque, so no parent-opacity group). */
#cursRates.curs-loading::before, #curs.curs-loading::before {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background: rgba(255, 255, 255, .55);
}
#cursRates.curs-loading::after, #curs.curs-loading::after {
    content: ""; position: absolute; top: 60px; left: 50%; z-index: 3;
    width: 34px; height: 34px; margin-left: -17px;
    border: 3px solid color-mix(in srgb, var(--accent), transparent 75%);
    border-top-color: var(--accent); border-radius: 50%;
    animation: curs-spin .7s linear infinite;
}
@keyframes curs-spin { to { transform: rotate(360deg); } }

/* JS on → auto-submit on change, so hide the manual submit button.
   No JS → button stays and the form works as a plain GET. */
.has-js .curs-filter-submit { display: none; }

/* Summary stat cards */
.dyn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.dyn-stat { background: #fff; border: 1px solid #eef2f3; border-radius: 12px; padding: 14px 16px; }
.dyn-stat span { display: block; font-size: 11px; color: #8a959b; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; }
.dyn-stat strong { font-size: 22px; font-weight: 600; color: #15212b; line-height: 1.1; }
.dyn-stat strong.positive, #dynChange.positive { color: #1a9d54; }
.dyn-stat strong.negative, #dynChange.negative { color: #e0533d; }

/* Chart + table cards */
.dyn-card { background: #fff; border: 1px solid #eef2f3; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.dyn-card #dynChart { min-height: 380px; }
.dyn-table-card h4 { margin: 2px 0 8px; font-size: 15px; font-weight: 600; color: #2a3942; }
.dyn-table-scroll { max-height: 360px; overflow-y: auto; }
.dynamics-table { width: 100%; border-collapse: collapse; }
.dynamics-table th, .dynamics-table td { padding: 9px 12px; text-align: left; font-size: 14px; border-bottom: 1px solid #f0f4f5; }
.dynamics-table th { position: sticky; top: 0; background: #fff; color: #8a959b; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .3px; }
.dynamics-table tbody tr:hover { background: #f7fafa; }

/* Converter pair page: section headings, the amounts table and the cross-rate chart. */
.conv-section-title { font-size: 18px; font-weight: 600; color: #15212b; margin: 0 0 12px; }
.conv-amounts { border: 1px solid #eef2f3; border-radius: 10px; overflow: hidden; }
.conv-amounts-head, .conv-amounts-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; gap: 12px; }
.conv-amounts-head { background: #fff; border-bottom: 1px solid #eef2f3; }
.conv-amounts-head .ca-cur { font-size: 15px; font-weight: 600; color: #15212b; }
.conv-amounts-row:nth-child(even) { background: #f6f8f9; }
.conv-amounts .ca-from { font-weight: 500; color: #15212b; }
.conv-amounts .ca-to { color: #6b7780; text-align: right; }

.cross-chart-head { margin-bottom: 10px; }
.cross-chart-rate { font-size: 22px; font-weight: 600; color: #15212b; line-height: 1.2; }
.cross-chart-change { font-size: 14px; margin-top: 2px; color: #8a959b; }
.cross-chart-change.positive { color: #1a9d54; }
.cross-chart-change.negative { color: #e0533d; }
.cross-chart #crossChart { min-height: 320px; }

/* Currency detail page — modern card layout (matches the dynamics styling) */
.cur-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 18px; }
.cur-meta > div { background: #fff; border: 1px solid #eef2f3; border-radius: 12px; padding: 12px 16px; }
.cur-meta h5 { margin: 0 0 4px; font-size: 11px; font-weight: 600; color: #8a959b; text-transform: uppercase; letter-spacing: .4px; }
.cur-meta strong { font-size: 18px; font-weight: 600; color: #15212b; }

.cur-chart { margin: 18px 0 0; }
/* Override the theme's global h2 banner (gray bg + float + padding) — clean title. */
.cur-chart-title { background: none; float: none; width: auto; padding: 0; margin: 0 0 12px;
    font-size: 18px; line-height: 1.2; font-weight: 600; color: #1b2b36; }
.cur-chart-presets { margin-bottom: 12px; }
.cur-chart #curChart { min-height: 320px; }

.cur-block { background: #fff; border: 1px solid #eef2f3; border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.cur-block h4 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #2a3942; }
.cur-block .text { color: #46535c; line-height: 1.55; }
.cur-block ul.standart { margin: 0 20px; }
.cur-block .convert-to-list { margin: 0; }

@media (max-width: 600px) {
    .dyn-stats { grid-template-columns: repeat(2, 1fr); }
    .dyn-field, .dyn-field-presets, .dyn-field-dates { flex: 1 1 100%; }
    /* From / To stay paired 50/50 inside .dyn-field-dates even when all else stacks. */
    .cur-meta { grid-template-columns: repeat(2, 1fr); }
    /* Stack the curs filter: each control full-width, submit spans the row. */
    .curs-filter { gap: 14px; }
    .curs-filter-field, .curs-filter input[type="date"] { width: 100%; }
    .curs-filter-radios { flex-direction: column; align-items: flex-start; gap: 10px; }
    .curs-filter-submit { width: 100%; }
}

/* --- Money-transfer info block ----------------------------------------- */
.transfers .transfer .info {
    background: #ffffff;
}

/* Shared FAQ accordion: right-side open/close chevron. */
ul.akkordeon li > p {
    position: relative;
    padding-right: 42px;
}
ul.akkordeon li > p::after {
    content: "\f107";
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font: normal normal normal 20px/1 FontAwesome;
    color: var(--accent);
}
ul.akkordeon li > p.active::after {
    content: "\f106";
    color: #fff;
}
ul.akkordeon li > div > :last-child {
    margin-bottom: 0;
}