/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 19 2026 | 11:33:36 */
/* контейнер */
.metal-table-wrap{
  width:100%;
}

/* базовая таблица */
#metalTable{
  width:100%;
  border-collapse:collapse;
  font-size: clamp(13px, 1.1vw + 8px, 20px);
  line-height:1.25;
  color:#fff;
}

#metalTable th,
#metalTable td{
  border:1px solid #fff;
  padding: clamp(8px, 0.6vw + 6px, 12px);
  color:#fff;
  vertical-align: top;
}

#metalTable thead th{
  background: rgba(255,255,255,0.10);
}

/* зебра */
#metalTable tbody tr:nth-child(even){
  background: rgba(255,255,255,0.05);
}

/* =========================
   МОБИЛЬНЫЙ РЕЖИМ: карточки
   ========================= */
@media (max-width: 520px){
  /* скрываем шапку таблицы */
  #metalTable thead{
    display:none;
  }

  /* таблица как блок */
  #metalTable,
  #metalTable tbody,
  #metalTable tr,
  #metalTable td{
    display:block;
    width:100%;
  }

  /* карточка-строка */
  #metalTable tr{
    border:1px solid rgba(255,255,255,0.6);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow:hidden;
    background: rgba(255,255,255,0.03);
  }

  /* ячейки внутри карточки */
  #metalTable td{
    border:none;
    border-bottom:1px solid rgba(255,255,255,0.25);
    padding: 10px 12px;
    position: relative;
  }

  #metalTable td:last-child{
    border-bottom:none;
  }

  /* подпись слева (из data-label) */
  #metalTable td::before{
    content: attr(data-label);
    display:block;
    font-size: 11px;
    opacity: 0.75;
    margin-bottom: 4px;
    letter-spacing: 0.2px;
  }
}

#metalTable tr.ts-match{
  background: rgba(255, 204, 0, 0.18);
}
#metalTable tr.ts-active{
  outline: 2px solid #fff;
  background: rgba(255, 204, 0, 0.28);
}


  .metal-calc{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
  }
  .mc-card{
    border:1px solid rgba(255,255,255,0.35);
    border-radius: 14px;
    padding: 12px;
    background: rgba(0,0,0,0.25);
    color:#fff;
    font-weight:700;
  }
  .mc-label{
    opacity:.8;
    font-size: 13px;
    margin-bottom: 8px;
  }
/* Базовая рамка */
.mc-card select,
.mc-card input{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.25);
  color:#fff;
  font-weight:700;
  outline: none;
  box-shadow: none;
}

/* ВАЖНО: при фокусе рамку не теряем */
.mc-card select:hover,
.mc-card input:hover{
  border-color: rgba(255,255,255,0.55);
}

.mc-card select:focus,
.mc-card input:focus,
.mc-card select:active,
.mc-card input:active,
.mc-card select:focus-visible,
.mc-card input:focus-visible{
  border: 1px solid rgba(255,255,255,0.85) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15) !important; /* мягкая подсветка, можно убрать */
}
  .mc-result .mc-value{
  font-size: clamp(22px, 2vw + 14px, 34px);
  line-height: 1.1;
}

.mc-subvalue{
  margin-top: 4px;
  font-size: 13px;
  opacity: 0.75;
  font-weight: 700;
}

.mc-unit{
  margin-left: 4px;
}

  .mc-hint{
    margin-top: 6px;
    font-size: 12px;
    opacity: .75;
    font-weight: 700;
  }

  @media (max-width: 900px){
    .metal-calc{ grid-template-columns: 1fr; }
  }