/* ======================= */
/*        THEME VARS       */
/* ======================= */
:root{
  --bg:#0b0b10; --fg:#f1f5f9; --mut:#94a3b8;
  --card:#11131a; --line:#1f2430; --ac:#7c9cff;
}

/* ======================= */
/*       BASE / RESET      */
/* ======================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html,body{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.wrap{ max-width:980px; margin:auto; padding:28px; }
a{ color:var(--ac); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* iOS: не зумити на фокус полів */
@supports (-webkit-touch-callout:none){
  input,select,textarea{ font-size:16px !important; }
}
input,select,textarea{ touch-action:manipulation; }

/* ======================= */
/*      CARDS & GRID       */
/* ======================= */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:16px;
}
.grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* ======================= */
/*          FORM           */
/* ======================= */
label{ display:grid; gap:6px; font-size:14px; color:#cbd5e1; }
input,select,button{
  padding:10px; border:1px solid var(--line); border-radius:10px;
  background:#0b0b10; color:var(--fg);
}
input:focus-visible, select:focus-visible{
  outline:2px solid #5b75ff; outline-offset:0;
}
button{ cursor:pointer; background:#1f2937; border-color:#374151; color:#e5e7eb; }
button:hover{ background:#2b3547; }
button:active{ background:#161d2a; }

/* Ряди форм */
.row{   /* 3 колонки — напр. VolWeight */
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0;
}
.row-2{ /* 2 колонки — напр. VAT */
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:10px 0;
}
.card .row, .card .row-2 { margin:10px 0; } /* сумісність у картках */

@media (max-width:640px){
  .row, .row-2{ grid-template-columns:1fr; }
  .wrap{ padding:20px; }
}

/* ======================= */
/*   COMPACT RESULT BOX    */
/* ======================= */
/* як у першому калькуляторі: невеликий, обведений, не на всю ширину */
.res{
  display:inline-block;
  margin-top:12px;
  padding:10px 12px;
  border:1px dashed var(--line);
  border-radius:10px;
  min-height:auto;
  max-width:100%;
}

/* рядки всередині результату (коли він заповнений) */
.res-line{
  display:flex;
  align-items:baseline;
  gap:8px;
  line-height:1.35;
}
.res-line + .res-line{ margin-top:6px; }
.res-line b{ font-weight:800; }
.nowrap{ white-space:nowrap; } /* число + одиниця разом */

/* ======================= */
/*     PAGE-SPECIFIC       */
/* ======================= */
.hero h1 { margin:0 0 4px; font-size:32px; font-weight:800; }
.hero .muted { margin:0 0 16px; }

.card.link{
  display:block;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.card.link h3{ margin:0 0 4px; font-size:16px; }
.card.link p{ margin:0; color:var(--mut); font-size:14px; }
.card.link:hover{ transform:translateY(-1px); border-color:#2a3142; background:#0f1219; }

.section-title{ font-size:18px; margin:20px 0 10px; font-weight:700; }
.blocks .card{ padding:16px; }

/* дрібні утиліти для калькуляторів */
.calc-title{ margin:0 0 12px; font-size:20px; font-weight:700; }
.fieldset{ border:1px solid var(--line); border-radius:10px; padding:12px; }
.fieldset > legend{ padding:0 6px; font-weight:600; color:var(--fg); }
.field-note{ display:block; margin-top:6px; font-size:12px; color:var(--mut); }
.note{ margin-top:10px; color:var(--mut); font-size:12px; }



.checkboxes{
  display:grid;
  gap:6px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:10px;
}
.checkboxes label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:#cbd5e1;
}
.checkboxes input[type="checkbox"]{
  width:16px; height:16px;
}

/* Уніфікований рейтинг 0–10 в один рядок */
.score { display:flex; align-items:baseline; gap:8px; }
.score-number { font-size:28px; line-height:1; font-weight:800; }
.score-suffix { opacity:.85; }


/* ===== Language Switcher ===== */
.lang-switch {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.lang {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: .95rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}
.lang:hover {
  background: rgba(255, 255, 255, .12);
}
.lang.is-active {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .24);
  cursor: default;
}
.lang .flag {
  line-height: 1;
}
.lang .label {
  opacity: .9;
}
@media (max-width: 560px) {
  .lang .label {
    display: none;
  }
}

.lang-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 1rem 0;
}

/* невеличкі утиліті */
.inline-field { display: flex; gap: 8px; align-items: center; }
.mt-10 { margin-top: 10px; }
.hidden { display: none; }
.clickable { cursor: pointer; font-weight: 600; }

.inline-check { display:flex; align-items:center; gap:8px; margin-top:22px; }
.summary-bold { cursor:pointer; font-weight:600; }