/* Category.css - shared look for the market pages (WorldMarkets, HiTech, Commodities, Currencies, Crypto, Bonds, Nadlan).
   Loaded after StartPage.css (grid, cards, promos, ChessPM ad, footer). */

/* ---------- page header: title + quick navigation between the market pages */
.cat-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cat-title { flex: 1 1 260px; min-width: 0; }
.cat-title h1 { margin: 0; font-size: 22px; line-height: 1.3; color: var(--sp-pri); }
.cat-title p { margin: 2px 0 0; font-size: 14px; color: var(--sp-muted); }
.cat-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.sp .cat-nav a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sp-pri);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.sp .cat-nav a:hover { border-color: var(--sp-pri-2); background: var(--sp-soft); text-decoration: none; }
.sp .cat-nav a.is-on { background: var(--sp-pri); border-color: var(--sp-pri); color: #fff; }
.sp .cat-nav a.cat-en { border-style: dashed; }
.sp .cat-nav a.cat-chess { color: #6b3fa0; border-color: #d6d0e6; background: #fbfaff; }

/* ---------- blocks filled on the server (lists, tables, news) */
.cat-ph:empty { display: none; }
.cat-ph + .cat-ph { margin-top: 14px; }
.cat-ph { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cat-ph > table, .cat-ph > span > table, .cat-ph > div > table { margin-inline: auto; }
.cat-ph table { max-width: 100%; }
.cat-card-tables:not(:has(.cat-ph:not(:empty))) { display: none; }
.cat-news table { width: 100% !important; }

.cat-img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 10px; border-radius: 8px; }
.sp .cat-select { width: 100%; margin-bottom: 10px; }
.cat-hint { margin: 0 0 8px; font-size: 13px; color: var(--sp-muted); }
.cat-sub { font-size: 16px; font-weight: 700; color: var(--sp-pri); }
.cat-sub:empty { display: none; }
.cat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cat-stat { width: 20px; height: 20px; }
.cat-more { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 500; }

/* rotating article under the search (undersearch) - stays in the page flow */
.sp #undersearch {
  width: auto !important;
  max-width: 100% !important;
  height: 340px;
  border: 0 !important;
  padding: 0 !important;
  font: 13px/1.5 var(--sp-font) !important;
  overflow: hidden;
  position: static !important;
}
.sp #undersearch:empty { height: 0; }

/* ---------- currency calculator (Currencies / Crypto) */
.cat-calc { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.cat-calc .sp-field { margin: 0; }
.cat-calc select, .cat-calc input[type=text] { width: 100%; }
.cat-calc .cat-amount { grid-column: 1 / -1; }
.cat-calc .cat-amount input { max-width: 200px; font-weight: 700; text-align: center; direction: ltr; }
.sp .cat-swap { width: 38px; padding: 0; font-size: 18px; line-height: 1; }
.cat-calc .cat-go { grid-column: 1 / -1; }
.sp .cat-go input { min-width: 120px; }
.cat-result { margin-top: 12px; padding: 12px; border-radius: 8px; background: var(--sp-soft); text-align: center; }
.cat-result:has(.cat-res-main:empty) { display: none; }
.cat-res-main { display: block; font-size: 22px; font-weight: 700; color: #aa0000; direction: ltr; }
.cat-res-exp { display: block; margin-top: 4px; font-size: 13px; color: #374151; }

/* ---------- legacy classes still used by server-generated html and the article popup */
img.floatLeft { margin-top: 3px; float: left; margin-right: 18px; }
img.floatRight { float: right; margin-top: 3px; margin-bottom: 4px; margin-left: 18px; }
.head { font-size: 14px; color: #080808; }
.rem, .rem2 { font-weight: normal; font-size: 9px; color: #aaa; }
.norm { font-weight: normal; font-size: 12px; color: #080808; }
.head11 { font-size: 11px; font-weight: bold; color: #040404; text-decoration: none; }
.headl, .headl a { font-size: 15px; font-weight: bold; color: #040464; }
.headm13 { font-weight: bold; font-size: 13px; color: #842424; }
.headm12 { font-weight: bold; font-size: 12px; color: #842424; text-decoration: none; }
.ltr { direction: ltr; text-align: right; padding: 0 2px; }
.spc, .spc16 { font-size: 11px; }
.spc16 { line-height: 13px; }
.gvcelln { direction: ltr; padding: 0 1px; text-align: center; }
.gvcell { padding: 0 1px; text-align: right; }
.gvcellb { direction: ltr; text-align: center; padding: 0 1px; font-weight: bold; }
.gvcellc { padding: 0 1px; text-align: center; }
.slinks { font-weight: bold; font-size: 11px; color: #040404; text-decoration: none; }
.clink { cursor: pointer; font-weight: bold; font-size: 13px; color: #D88080; }
.clinks { cursor: pointer; font-weight: bold; font-size: 13px; color: #A84040; }

/* ---------- mobile */
@media (max-width: 760px) {
  .cat-title h1 { font-size: 19px; }
  .cat-nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .cat-calc { grid-template-columns: 1fr; }
  .sp .cat-swap { justify-self: center; transform: rotate(90deg); }
  #arttext, #actdiv { max-width: 94vw !important; left: 3vw !important; }
}

/* ---------- grid placement with the header row (overrides StartPage.css) */
@media (max-width: 1150px) {
  .cat .cat-head { grid-row: 1; }
  .cat .sp-col-tools { grid-column: 1; grid-row: 2 / span 2; }
  .cat .sp-col-mid { grid-column: 2; grid-row: 2; }
  .cat .sp-col-news { grid-column: 2; grid-row: 3; }
}
@media (max-width: 760px) {
  .cat .cat-head, .cat .sp-col-tools, .cat .sp-col-mid, .cat .sp-col-news { grid-column: 1; grid-row: auto; }
  .cat .cat-head { order: 0; }
  .cat .sp-col-mid { order: 1; }
  .cat .sp-col-tools { order: 2; }
  .cat .sp-col-news { order: 3; }
}

/* ---------- HeadLines / HeadLinesEn: news ticker column + main list */
.sp.cat.hl { grid-template-columns: 350px minmax(0, 1fr); max-width: 1200px; }
.sp.cat.hl ~ .sp-foot { max-width: 1200px; }
.hl-side, .hl-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hl-ticker { height: 700px; overflow: hidden; }
.hl-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hl-pick .sp-field { margin: 0; flex: 1 1 260px; }
.hl-pick select { width: 100%; max-width: 360px; font-weight: 500; }
.hl-list table { width: 100% !important; }
.hl-list .hdrc { font-size: 14px; line-height: 1.5; color: #181818; }
.head10r { font-weight: normal; font-size: 11px; color: #525252; text-decoration: none; }
@media (max-width: 1000px) {
  .sp.cat.hl { grid-template-columns: minmax(0, 1fr); }
  .sp.cat.hl .cat-head { order: 0; }
  .hl-main { order: 1; }
  .hl-side { order: 2; }
  .hl-ticker { height: 460px; }
}