/* ———————————————————————————————————————————— */
/* RESPONSIVE ZA MOBILNE — IK KALKULATOR */
/* ———————————————————————————————————————————— */

/* ———————————————————————————————————————————— */
/* IK Kreditni kalkulator — Mobile fix */
/* ———————————————————————————————————————————— */

.rh_property__common_note p, .rh_property__common_note .rh_agent_form .rh_agent_form__row, .rh_agent_form .rh_property__common_note .rh_agent_form__row {
    background: #fff !important;
    line-height: 1.4 !important;
}

.rh_property__similar_properties {
    display: block;
    text-align: left;
    padding: 2rem 1rem !important;
}

.ik-calkulator button {
  margin-top:20px !important;
  }
  
.ik-button {
  margin-top:20px !important;
  }
  
.ik-calkulator {
  margin-bottom:20px !important;
  }
  
@media (max-width: 639px) {
    /* === GRAFOVI === */
.ik-charts-grid canvas {
  max-height: 300px !important;
  height: auto;
}

.ik-chart-interest-comparison {
  max-height: 300px;
  height: auto;
}
  /* 1) Prelomi grid iz dvije u jednu kolonu */
  .ik-kalkulator .md\:grid-cols-2 {
    /* kad naiđe tailwind klasa md:grid-cols-2 */
    grid-template-columns: 1fr !important;
  }

  /* 2) Pusti inpute da se skupe u svoj parent i ne izlaze van */
  .ik-kalkulator input,
  .ik-kalkulator select,
  .ik-kalkulator textarea {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* 3) Rezultati također 1‑u‑1 na mobilima */
  .ik-kalkulator .ik-results-grid {
    grid-template-columns: 1fr !important;
  }

  /* 4) Grafovi po jedan po retku */
  .ik-kalkulator .ik-charts-grid,
  .ik-kalkulator .ik-charts-wrapper {
    grid-template-columns: 1fr !important;
  }

  /* 5) Malo spacinga između rezultata */
  .ik-kalkulator .ik-result-item {
    margin-bottom: 1rem;
  }
  .ik-charts-grid canvas {
    max-height: 200px;
    height: auto;
}
}

.ik-kalkulator input{
  margin-top:5px !important;
  margin-bottom:10px !important;
}

/* === GRAFOVI === */
.ik-charts-grid canvas {
  max-height: 500px;
  height: auto;
}

.ik-chart-interest-comparison {
  max-height: 500px;
  height: auto;
}

/* === BOJE I VARIJABLE === */
:root {
  --primary: #f1bd1d;            /* žuta */
  --primary-light: rgba(241,189,29,0.15);
  --muted: #6b7280;              /* siva */
  --border: #d1d5db;             /* svijetlo-siva granica */
  --bg-input: #ffffff;           /* bijela pozadina inputa */
}

/* === TABOVI === */
.ik-tabs {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  gap: 2rem;
  border-bottom: 3px solid var(--primary);
}
.ik-tab {
  padding-bottom: 0.5rem;
  cursor: pointer;
  color: var(--muted);
  font-weight: 500;
  transition: color .2s;
}
.ik-tab--active {
  color: var(--primary) !important;
  border-bottom: 3px solid var(--primary);
}
.ik-tab:not(.ik-tab--active):hover {
  color: var(--primary);
}

/* === OBLIK & PORAVNANJE FORME === */
.ik-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

/* svako polje je 1 red: label + input/span */
.ik-form .form-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* label */
.ik-form label {
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

/* input wrapper */
.ik-form .relative {
  position: relative;
  width: 100%;
}

/* svi inputi iste širine i stila */
.ik-form input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--bg-input);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.ik-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.ik-form input::placeholder {
  color: #9ca3af;
}

/* unutarnji addon (“EUR” i “%”) */
.ik-form .relative > span {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  font-size: 0.875rem;
}

/* dvostruki input za “rok otplate” */
.ik-form .term-group {
  grid-column: 2;  /* span across input stub */
  display: flex;
  gap: 1rem;
}
.ik-form .term-group input {
  flex: 1;
  padding-right: 1rem; /* samo default padding, unutarnji addon nema */
}

/* === REZULTATI I DUGMAD === */
.ik-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

/* grupiraj polja rezultata */
.ik-results .form-row {
  margin-bottom: 0.75rem;
}
.ik-results input[readonly] {
  background: #f3f4f6;
  border-color: var(--border);
  cursor: default;
}

/* dugmad u desnoj koloni */
.ik-form-buttons {
  grid-column: 1 / -1; /* zauzmi obje kolone */
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.ik-form-buttons button {
  flex: 1;
  height: 3rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.375rem;
  transition: background-color .2s, color .2s;
}
#ik-reset {
  border: 2px solid var(--primary);
  background: transparent;
  color: var(--primary);
}
#ik-reset:hover {
  background: var(--primary-light);
}
#ik-calc {
  border: 2px solid var(--primary);
  background: var(--primary);
  color: white;
}
#ik-calc:hover {
  background: #d1a217;
}

/* ========= TEXTUAL RESULTS LAYOUT ========= */
.ik-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

/* Remove the default p styling and re‑lay out each panel as 3 columns on md+ */
.ik-results-annuity,
.ik-results-equal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 1rem;
  padding: 1rem;
}

/* Panel headings span all three columns */
.ik-results-annuity > h3,
.ik-results-equal > h3 {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
}

/* Each <p> becomes a 1‑column card: label on top, value big below */
.ik-results-annuity p,
.ik-results-equal p {
  margin: 0;
}
.ik-results-annuity p strong,
.ik-results-equal p strong {
  display: block;
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.ik-results-annuity p span,
.ik-results-equal p span {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: #f1bd1d;
}

/* And append the euro sign via a pseudo-element, so you don’t have to hard‑code it */
.ik-results-annuity p span::after,
.ik-results-equal p span::after {
  content: " €";
  font-weight: 600;
  margin-left: 0.25ch;
}

/* ─── Textual “four‑row” results layout ─── */
.ik-results-text {
  width: 100%;
}

/* Section headings */
.ik-results-text .ik-results-heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #111827; /* almost-black */
}

/* Grid of three items */
.ik-results-text .ik-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0rem;
}

/* Each value cell */
.ik-results-text .ik-result-item {
  text-align: left;
}

/* The label (top) */
.ik-results-text .ik-result-label {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
  padding:0 0 0 10px !important;
}

/* The big purple number */
.ik-results-text .ik-result-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #f1bd1d; /* your purple */
  padding:0 0 0 10px !important;
}

/* Add the Euro sign after the number */
.ik-results-text .ik-result-value span::after {
  content: "\00a0€"; /* non‑breaking space + € */
  font-weight: 400;
  margin-left: 0.25ch;
}

/* ─── GLOBAL SCALE ─── */
.ik-kalkulator {
  font-size: 18px; /* base font upsized from ~16px */
}

/* ─── TABOVI ─── */
.ik-tab {
  font-size: 1.3rem;      /* ~18px */
  padding-bottom: 0.75rem;  /* a bit thicker underline space */
}
.ik-tab--active {
  border-bottom-width: 4px; /* slightly thicker */
}

/* ─── FORM LABEL & INPUT ─── */
.ik-form label,
.ik-form .ik-results-heading {
  font-size: 1.125rem;  /* ~18px labels & headings */
}

.ik-form input {
  font-size: 1.125rem;           /* larger body text */
  padding: 0.75rem 1.25rem;      /* more breathing room */
  border-radius: 0.5rem;         /* slightly rounder */
}

.ik-form .relative > span {
  font-size: 1rem; /* bigger “EUR” / “%” */
}

/* two‑field term-group */
.ik-form .term-group input {
  font-size: 1.125rem;
}

/* ─── BUTTONS ─── */
#ik-reset,
#ik-calc {
  font-size: 1.4rem;      /* bump text */
  font-weight: 700;         /* stronger */
  padding: 1rem 1.5rem;     /* taller buttons */
  border-radius: 0.5rem;    /* rounder */
  margin-top:20px;
  margin-bottom:50px;
}

/* ─── TEXTUAL RESULTS ─── */
.ik-results-text .ik-results-heading {
  font-size: 1.7rem; /* ~22px */
  margin-bottom: 1rem;
}

.ik-results-text .ik-result-label {
  font-size: 1.3rem;     /* ~16px */
  margin-bottom: 0.5rem;
}

.ik-results-text .ik-result-value {
  font-size: 2.4rem;     /* ~32px big numbers */
}

/* ─── CHART CONTAINERS (if you want titles bigger) ─── */
.ik-charts-grid h4,
.ik-charts-wrapper h3 {
  font-size: 1.25rem; /* ~20px */
  margin-bottom: 0.75rem;
}

/* ensure canvas max‑height still respects 500px */
.ik-charts-grid canvas {
  max-height: 500px;
  height: auto;
}


.ik-pdf-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  font-family: sans-serif;
  color: #333;
}
.ik-pdf-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.ik-pdf-header .ik-pdf-logo { max-height: 50px; }
.ik-pdf-contact p { margin: 0; font-size: 0.9em; }
.ik-pdf-intro { margin-bottom: 20px; font-style: italic; }
.ik-pdf-footer { margin-top: 30px; text-align: center; font-weight: bold; }




.rh_property__common_note p, .rh_property__common_note .rh_agent_form .rh_agent_form__row, .rh_agent_form .rh_property__common_note .rh_agent_form__row {
    padding: 2rem;
    background: white !important;
    line-height: 1.4 !important
    ;
}

.rh_wrap--padding {
    padding: 0 0rem !important;
    max-width: 1440px;
    margin: 0 auto;
}

/* ———————————————————————————————————————————— */
/* RESPONSIVE ZA MOBILNE — IK KALKULATOR */
/* ———————————————————————————————————————————— */

/* breakpoint: sve manje od 640px širine */
@media (max-width: 639px) {
  /* 1) Forma: jedan stupac umjesto dva */
  .ik-form {
    grid-template-columns: 1fr !important;
  }

  /* Ako si negdje definirao .grid-cols-1 .grid-cols-2 itd. tailwind klase,
     možeš i njih “prebrisati”: */
  .ik-form.grid-cols-1,
  .ik-form.grid-cols-2 {
    display: block;
  }

  /* 2) Rezultati: tri u retku → jedan ispod drugog */
  .ik-results-text .ik-results-grid {
    grid-template-columns: 1fr !important;
  }

  /* 3) Grafovi: po jedan canvas */
  .ik-charts-grid {
    grid-template-columns: 1fr !important;
  }
  .ik-charts-wrapper {
    grid-template-columns: 1fr !important;
  }

  /* 4) Pojedinačni “cards” za rezultate (ako koristiš .ik-result-item) */
  .ik-results-text .ik-result-item {
    margin-bottom: 1rem;
  }
}



.rh_property__common_note p, .rh_property__common_note .rh_agent_form .rh_agent_form__row, .rh_agent_form .rh_property__common_note .rh_agent_form__row {
    background: #fff !important;
    line-height: 1.4 !important;
}