/* =================================================================
   Magistri Calculator – Main Styles v3
   Palette: magistri.ge  →  black / dark-grey / grey / white / yellow
   Layout & font sizes:  exactly from magistri_guard_tariff_calculator_VIP_FINAL_v58_counter_repaired.html
   ================================================================= */

/* ── CSS variables ─────────────────────────────────────────────── */
.calcform {
  /* magistri.ge live-site palette */
  --bg:       #000000;
  --bg2:      #111111;
  --bg3:      #1a1a1a;
  --border:   rgba(255,255,255,.14);
  --border2:  rgba(255,255,255,.22);
  --yellow:   #ffdc18;
  --yellow2:  #ffe566;
  --grey:     #aab0bc;
  --grey2:    #6b7280;
  --white:    #f7f8fc;
  --green:    #67d391;
  --red:      #ff7777;
  --shadow:   0 20px 60px rgba(0,0,0,.7);
  --radius:   22px;
  --radius2:  16px;
  --card:     rgba(255,255,255,.06);
  --card2:    rgba(255,255,255,.10);

  font-family: "Segoe UI","Noto Sans Georgian",Arial,sans-serif;
  color: var(--white);
  background: var(--bg);
  padding: clamp(14px,2.5vw,36px);
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: border-box; }

/* ── Page wrapper ──────────────────────────────────────────────── */
.calcform .layout {
  display: grid;
  grid-template-columns: minmax(320px,1.08fr) minmax(360px,.92fr);
  gap: 18px;
  align-items: start;
}
.calcform .left-stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}
@media (max-width:1100px) {
  .calcform .layout { grid-template-columns: 1fr; }
}

/* ── Panels & cards ────────────────────────────────────────────── */
.calcform .panel,
.calcform .result-card {
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(20px,3vw,31px);
  box-shadow: var(--shadow);
  width: 100%;
}
.calcform .result-card {
  position: sticky;
  top: 16px;
  align-self: start;
  background: linear-gradient(160deg, rgba(255,220,24,.12), rgba(255,255,255,.05));
  border-color: rgba(255,220,24,.22);
}
@media (max-width:1100px) {
  .calcform .result-card { position: static; top: auto; }
}

/* ── Panel titles ──────────────────────────────────────────────── */
.calcform .panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.calcform .panel-title h2 {
  margin: 0;
  font-size: clamp(17px,2.1vw,24px);
  font-weight: 900;
  letter-spacing: -.4px;
  color: var(--yellow);
  line-height: 1.15;
}
.calcform .badge {
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(103,211,145,.13);
  color: #a9f0c4;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.calcform .hint {
  margin: -8px 0 18px;
  color: var(--grey);
  font-size: 13px;
  line-height: 1.55;
}

/* ── Form fields ───────────────────────────────────────────────── */
.calcform .field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}
.calcform label {
  display: flex;
  align-items: flex-end;
  min-height: 42px;
  line-height: 1.25;
  color: #e6ebf5;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
@media (max-width:720px) {
  .calcform .field label { min-height: auto; align-items: flex-start; }
}
.calcform input,
.calcform select {
  width: 100%;
  height: 49px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.08);
  color: var(--white);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.calcform input:focus,
.calcform select:focus {
  border-color: rgba(255,220,24,.7);
  box-shadow: 0 0 0 4px rgba(255,220,24,.12);
  background: rgba(255,255,255,.11);
}
.calcform input[readonly] { opacity: .6; cursor: default; }
.calcform select option { background: #111; color: var(--white); }

/* ── Grid helpers ──────────────────────────────────────────────── */
.calcform .two-col   { display: grid; grid-template-columns: 1fr 1fr;       gap: 14px; }
.calcform .three-col { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width:720px) {
  .calcform .two-col,
  .calcform .three-col { grid-template-columns: 1fr; }
}

/* ── Checkbox rows ─────────────────────────────────────────────── */
.calcform .check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 18px;
}
@media (max-width:720px) { .calcform .check-grid { grid-template-columns: 1fr; } }

.calcform .check-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr 70px;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,.14);
  cursor: pointer;
  color: var(--grey);
  font-size: 14px;
}
.calcform .check-row input[type="checkbox"] {
  width: auto; height: auto;
  accent-color: var(--yellow);
  cursor: pointer;
}
.calcform .check-row .check-title {
  color: #eaf0fb;
  font-size: 14px;
  line-height: 1.32;
}
.calcform .check-row strong {
  text-align: right;
  color: #ffe2a2;
  font-size: 13px;
  white-space: nowrap;
}
.calcform .info-icon {
  margin-left: 5px;
  color: #4a90d9;
  font-size: 12px;
  cursor: help;
}
.calcform .check-row .tooltip {
  position: absolute;
  bottom: 125%;
  left: 0;
  z-index: 50;
  background: rgba(248,250,252,.98);
  color: #223047;
  border: 1px solid rgba(255,220,24,.38);
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: .01em;
  width: min(390px,78vw);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity .2s ease, transform .2s ease;
}
.calcform .check-row:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* ── Schedule grid ─────────────────────────────────────────────── */
.calcform .schedule-grid { display: grid; gap: 10px; }

.calcform .schedule-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.10);
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.calcform .schedule-option:has(input:checked) {
  border-color: var(--yellow);
  background: rgba(255,220,24,.09);
}
.calcform .schedule-option input[type="radio"] {
  width: auto; height: auto;
  accent-color: var(--yellow);
}
.calcform .schedule-title { font-weight: 900; color: #fff; font-size: 14px; }
.calcform .schedule-desc  { font-size: 12.5px; color: var(--grey); margin-top: 3px; }
.calcform .coef {
  font-weight: 900;
  color: #ffe2a2;
  text-align: right;
  font-size: 22px;
}
.calcform .coef span { display: block; font-size: 11px; color: var(--grey); font-weight: 700; }

/* ── Tariff meter ──────────────────────────────────────────────── */
.calcform .tariff-row {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 18px;
  align-items: center;
}
@media (max-width:600px) { .calcform .tariff-row { grid-template-columns: 1fr; } }

.calcform .tariff-meter {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  overflow: visible;
  margin: 8px 0 12px;
}
.calcform .tariff-meter-fill {
  position: absolute;
  left: 0; top: 0;
  height: 8px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffe566, #ffdc18);
  transition: width .18s ease;
}
.calcform .tariff-meter-thumb {
  position: absolute;
  top: 50%; left: 0%;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #ffe566;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  transform: translate(-50%,-50%);
  transition: left .18s ease;
  z-index: 2;
}
.calcform .tariff-meter-labels {
  display: flex;
  justify-content: space-between;
  color: var(--grey);
  font-size: 12px;
}
.calcform .small-box {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  background: rgba(255,255,255,.065);
}
.calcform .small-box .num {
  font-size: 30px;
  font-weight: 900;
  color: #ffe2a2;
  margin: 6px 0 2px;
}
.calcform .small-box-sub { color: var(--grey); font-size: 12px; }

/* ── Result top block ──────────────────────────────────────────── */
.calcform .result-top {
  padding: 25px;
  border-radius: 25px;
  background: linear-gradient(135deg,rgba(255,220,24,.20),rgba(255,255,255,.06));
  border: 1px solid rgba(255,220,24,.32);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.calcform .result-top::after {
  content: "";
  position: absolute;
  right: -55px; top: -70px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(255,220,24,.18),transparent 70%);
  pointer-events: none;
}

/* Service cost grid — 3 equal columns */
.calcform .result-top .top-service-cost {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
@media (max-width:720px) {
  .calcform .result-top .top-service-cost { grid-template-columns: 1fr; }
}
.calcform .service-cost-title {
  grid-column: 1 / -1;
  color: #ffe2a2;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
  margin: 0 0 2px;
}
.calcform .service-cost-item {
  min-height: 104px;
  padding: 14px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.calcform .service-cost-item span {
  display: block;
  order: 1;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 8px;
  width: 100%;
}
.calcform .service-cost-item strong {
  display: block;
  order: 2;
  color: #fff;
  font-size: 44px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -1.2px;
  white-space: nowrap;
  width: 100%;
}
@media (max-width:1350px) {
  .calcform .service-cost-item strong { font-size: 38px; }
}
@media (max-width:720px) {
  .calcform .service-cost-item strong { font-size: 40px; }
}

.calcform .top-calc-note {
  margin-top: 14px;
  margin-bottom: 0;
  color: rgba(255,255,255,.90);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  display: block;
}
.calcform .result-desc {
  color: #f4e9cd;
  line-height: 1.56;
  margin: 10px 0 0;
  font-size: 14px;
  position: relative;
  z-index: 1;
}
.calcform .vat-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  color: #f4e9cd;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.calcform .vat-toggle input { width: auto; height: auto; accent-color: var(--yellow); }

/* ── Mini totals ───────────────────────────────────────────────── */
.calcform .mini-totals {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  margin-bottom: 16px;
  align-items: stretch;
}
@media (max-width:720px) { .calcform .mini-totals { grid-template-columns: 1fr 1fr; } }

.calcform .mini-totals .mini-box {
  position: relative;
  height: 104px;
  min-height: 104px;
  padding: 14px 15px;
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  display: block;
}
.calcform .mini-totals .mini-box span {
  display: block;
  color: var(--grey);
  font-size: 12.5px;
  line-height: 1.18;
  margin: 0;
  padding: 0;
}
.calcform .mini-totals .mini-box strong {
  position: absolute;
  left: 15px; right: 15px; top: 64px;
  display: block;
  color: var(--white);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  margin: 0; padding: 0;
}

/* ── Warning / explanation ─────────────────────────────────────── */
.calcform .warning-box {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,220,24,.16);
  border: 1px solid rgba(255,220,24,.35);
  color: #ffe2a2;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}
.calcform .commercial-explanation {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--grey);
  font-size: 13px;
  line-height: 1.5;
}
.calcform .commercial-explanation strong { color: #ffe2a2; }

/* ── Breakdown table ───────────────────────────────────────────── */
.calcform .breakdown {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.calcform .break-row {
  display: grid;
  grid-template-columns: 1.32fr .68fr;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  align-items: center;
}
.calcform .break-row:last-child { border-bottom: none; }
.calcform .break-row span:first-child { color: var(--grey); font-size: 14px; line-height: 1.35; }
.calcform .break-row span:last-child  { text-align: right; font-weight: 900; font-size: 15px; }
.calcform .break-row.total { background: rgba(255,220,24,.12); }
.calcform .break-row.total span { color: #ffe4a8 !important; }
.calcform .break-row.budget { background: rgba(0,0,0,.5); }
.calcform .break-row.budget span { color: #fff1c6 !important; }
@media (max-width:720px) {
  .calcform .break-row { grid-template-columns: 1fr; }
  .calcform .break-row span:last-child { text-align: left; }
}

/* ── Offer / list boxes ────────────────────────────────────────── */
.calcform .offer-box {
  margin-top: 18px;
  padding: 17px 18px;
  border-radius: 22px;
  background: rgba(103,211,145,.10);
  border: 1px solid rgba(103,211,145,.22);
  color: #c8f6d9;
  line-height: 1.55;
  font-size: 14px;
}
.calcform .offer-box b { display: block; margin-bottom: 6px; color: #a9f0c4; }

.calcform .list-box {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width:720px) { .calcform .list-box { grid-template-columns: 1fr; } }
.calcform .list-box > div {
  padding: 17px;
  border-radius: 22px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.10);
}
.calcform .list-box h3 { margin: 0 0 10px; color: #ffe2a2; font-size: 16px; }
.calcform .list-box ul { margin: 0; padding-left: 19px; color: var(--grey); font-size: 13px; line-height: 1.55; }

/* ── Actions ───────────────────────────────────────────────────── */
.calcform .actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.calcform button {
  border: none;
  border-radius: var(--radius2);
  min-height: 49px;
  padding: 0 18px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 900;
  font-size: 14px;
  transition: .18s;
  color: var(--white);
}
.calcform button:hover  { transform: translateY(-1px); opacity: .92; }
.calcform button:active { transform: none; }

.calcform button.primary {
  background: linear-gradient(135deg, #ffe566, #ffdc18);
  color: #0a0a0a;
  box-shadow: 0 12px 32px rgba(255,220,24,.28);
  flex: 1 1 120px;
}
.calcform button.secondary {
  background: rgba(255,255,255,.10);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.16);
  flex: 1 1 120px;
}
.calcform button.danger {
  background: rgba(255,119,119,.12);
  color: #ffd3d3;
  border: 1px solid rgba(255,119,119,.2);
}