/* ===== Currency Cross Table (desktop table + mobile cards) ===== */

.currency-cross-table{
  width:95%;
  margin: 24px auto;
  box-sizing: border-box;
}

.currency-cross-table * { box-sizing: border-box; }

/* Header/meta */
.currency-cross-table__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  flex-wrap: wrap;
}

.currency-cross-table__title{
  font-weight:700;
  font-size:20px;
  color:#111;
  display: none;
}

.currency-cross-table__meta{
  flex: 0 0 100%;         /* tager hele linjen i flex header */
  width: 100%;
  text-align: center;
  font-size:10px;
  font-style:italic;
}

/* Wrap */
.currency-cross-table__wrap{
  width: 100%;
}

/* ===== Desktop/tablet: classic table ===== */
.currency-cross-table table{
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden; /* radius + zebra */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.currency-cross-table th,
.currency-cross-table td{
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

/* Table headers: bold but same size as values */
.currency-cross-table th{
  background-color: #c1cbf9;
  font-weight: 700;      /* fed */
  font-size: 14px;       /* samme størrelse som tal */
  color: #111;
}

/* Table cells: normal weight, same size */
.currency-cross-table td{
  font-size: 14px;
  font-weight: 400;
  color: #111;
}

.currency-cross-table tbody tr:nth-child(even){
  background-color: #f9f9f9;
}

.currency-cross-table tbody tr:hover{
  background-color: #f1f5f9;
}

/* Ensure both columns look identical */
.currency-cross-table__col-amount,
.currency-cross-table__col-result{
  font-weight: 400;
  font-size: 14px;
  text-align: left;
}

/* Empty/loading */
.currency-cross-table__empty{
  padding: 14px;
  text-align:center;
  color:#6b7280;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background: #fff;
}

/* ===== Mobile: rows become cards ===== */
@media (max-width: 600px){
  /* Hide header row */
  .currency-cross-table thead{
    display: none;
  }

  /* Make table elements behave like blocks */
  .currency-cross-table table,
  .currency-cross-table tbody,
  .currency-cross-table tr,
  .currency-cross-table td{
    display: block;
    width: 100%;
  }

  /* Remove zebra striping (cards handle background) */
  .currency-cross-table tbody tr:nth-child(even){
    background: transparent;
  }

  /* Card style per row */
  .currency-cross-table tbody tr{
    margin: 0 0 12px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.08);
  }

  /* Remove table bottom borders */
  .currency-cross-table td{
    border: none;
    padding: 10px 12px;
  }

  /* Amount on first line (same weight/size as result) */
  .currency-cross-table td.currency-cross-table__col-amount{
    font-size: 14px;
    font-weight: 400;
    color:#111;
    padding-bottom: 6px;
  }

  /* Result on second line */
  .currency-cross-table td.currency-cross-table__col-result{
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    background: #f9fafb;
    border-top: 1px solid rgba(0,0,0,0.06);
  }

  /* Optional: if you add data-label on TDs in HTML later */
  .currency-cross-table td[data-label]::before{
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 2px;
  }

  /* Keep meta centered on mobile as well */
  .currency-cross-table__meta{
    text-align: center;
  }
}