/* Provider pages (/providers and /providers/{slug}). Loaded after home.css, which
   holds the shared tokens and components (.seg, .table-card, .when, .dot). */
:root {
  --placeholder: #8A96A3;
}

/* Green provider header */
.p-hero { background: var(--green); color: #fff; }
.p-hero .container { padding-top: 28px; padding-bottom: 48px; }
.crumbs { font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { color: #fff; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { font-weight: 700; }
.p-hero-row { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin-top: 24px; }
.p-hero-copy { flex: 1 1 520px; min-width: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; background: rgba(0,0,0,0.18); padding: 5px 10px; border-radius: 999px; }
.pill .dot { width: 8px; height: 8px; background: #fff; }
.p-hero h1 { margin: 0; font-size: 46px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.p-hero p { margin: 12px 0 0; font-size: 18px; line-height: 1.55; max-width: 680px; }
.btn-branches { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 12px; background: #fff; color: var(--ink); font-weight: 800; font-size: 15px; text-decoration: none; }
.btn-branches:hover { color: var(--ink); background: #F2F7F4; }

/* Transfer / Cash switch: same component as the home page, fixed width here */
.rates-section { padding-top: 44px; }
.rates-section .seg { width: 320px; max-width: 100%; margin-bottom: 18px; }

/* All-currencies table */
.provider-page table.rates td { padding: 12px 20px; }
/* Flag + code; the full currency name is the flag's alt text and the tooltip */
.cur-cell { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.cur-flag-rect { flex: none; width: 32px; height: 23px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); background: var(--chip); }
.cur-code { font-weight: 700; font-size: 16px; }
a.cur-cell:hover .cur-code { color: var(--link); }
.provider-page .table-foot { display: block; padding: 14px 20px; }

/* /providers list */
.provider-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.provider-list .tile { flex-direction: row; align-items: center; gap: 12px; }
.provider-list .arrow { margin-left: auto; }
/* Logo tile (or initials when there is no logo), same .ini chip as the rate tables */
.p-logo { width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.p-tile-text { min-width: 0; display: flex; flex-direction: column; }
.p-hero-logo { width: 72px; height: 72px; border-radius: 16px; background: #fff; padding: 6px; font-size: 22px; align-self: center; }
@media (max-width: 640px) {
  .p-hero-logo { width: 52px; height: 52px; border-radius: 12px; padding: 4px; font-size: 16px; }
}
.provider-list .tile:hover { color: var(--ink); border-color: var(--green); }
.provider-list .tile-unit { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.provider-list .dot { width: 9px; height: 9px; }

@media (max-width: 640px) {
  .p-hero h1 { font-size: 34px; }
  .p-hero p { font-size: 16px; }
  .rates-section .seg { width: 100%; }
  .provider-page table.rates td { padding: 10px 8px; }
  .provider-page table.rates td:first-child { padding-left: 12px; }
  .cur-cell { gap: 8px; }
  .cur-flag-rect { width: 26px; height: 19px; }
  .cur-code { font-size: 14px; }
}

/* /central-bank: search box and currency name under the code */
.cb-tools { margin-bottom: 14px; }
.cb-search { width: 360px; max-width: 100%; min-height: 46px; padding: 0 14px; border: 1.5px solid var(--input-line); border-radius: 12px; background: var(--card); font: 500 15px Manrope, sans-serif; color: var(--ink); outline: none; }
.cb-search:focus { border-color: var(--green); }
.cb-cur { display: flex; flex-direction: column; min-width: 0; }
.cb-name { font-size: 13px; color: var(--muted); line-height: 1.3; }
.cb-unit { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .cb-search { width: 100%; }
  .cb-name { font-size: 12px; }
}