/* ============================================================
   SCHEJBAL & PARTNERS — Daňová kalkulačka
   Komponenta pro vložení na produktovou podstránku
   ============================================================ */

.sp-calc *, .sp-calc *::before, .sp-calc *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sp-calc {
  --sp-purple:      #32004b;
  --sp-purple-mid:  #5a0080;
  --sp-gold:        #b8963e;
  --sp-gold-hover:  #9a7d32;
  --sp-dark:        #1a1a1a;
  --sp-text:        #333;
  --sp-muted:       #777;
  --sp-border:      #b8963e;
  --sp-line:        #ddd;
  --sp-red:         #c0392b;
  --sp-white:       #fff;
  --sp-bg:          #fff;

  font-family: 'Outfit', sans-serif;
  background: var(--sp-bg);
  padding: 64px 20px 80px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Layout: two columns on desktop */
.sp-calc__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Left column — text */
.sp-calc__left {}

.sp-calc__supertitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--sp-purple);
  margin-bottom: 14px;
  text-transform: none;
  letter-spacing: 0;
}

.sp-calc__heading {
  font-size: 38px;
  font-weight: 800;
  color: var(--sp-purple);
  line-height: 1.18;
  margin-bottom: 24px;
}

.sp-calc__intro {
  font-size: 15px;
  color: var(--sp-text);
  line-height: 1.7;
  margin-bottom: 20px;
}

.sp-calc__intro strong {
  font-weight: 700;
  color: var(--sp-dark);
}

/* Option labels */
.sp-calc__option-group {
  margin-bottom: 28px;
}

.sp-calc__option-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sp-purple);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sp-calc__option-desc {
  font-size: 14px;
  color: var(--sp-muted);
  line-height: 1.5;
}

.sp-calc__or-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--sp-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp-calc__or-text::before,
.sp-calc__or-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sp-line);
}

/* Right column — form */
.sp-calc__right {
  background: #f5f5f5;
  padding: 36px 36px 36px;
  border-radius: 2px;
}

/* Screen toggle */
.sp-calc__screen { display: block; }
.sp-calc__screen--hidden { display: none; }

/* Field */
.sp-calc__field {
  margin-bottom: 28px;
}

.sp-calc__label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--sp-dark);
  margin-bottom: 8px;
}

.sp-calc__required { color: var(--sp-dark); }

.sp-calc__input-wrap {
  position: relative;
  border-bottom: 2px solid var(--sp-border);
  transition: border-color 0.2s;
}

.sp-calc__input-wrap:focus-within {
  border-bottom-color: var(--sp-purple);
}

.sp-calc__input {
  width: 100%;
  border: none;
  outline: none;
  background: #ffffff;
  padding: 8px 40px 8px 12px;
  font-size: 15px;
  font-family: 'Outfit', sans-serif;
  color: var(--sp-dark);
}

.sp-calc__input::placeholder { color: #bbb; }

.sp-calc__suffix {
  position: absolute;
  right: 0;
  bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-muted);
  pointer-events: none;
}

/* Sub-fields in option B */
.sp-calc__subfields {
  padding-left: 0;
}

.sp-calc__subfield {
  margin-bottom: 20px;
}

.sp-calc__sublabel {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-muted);
  margin-bottom: 6px;
}

/* Running total */
.sp-calc__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--sp-line);
  margin-top: 8px;
}

.sp-calc__total-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-purple);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.sp-calc__total-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--sp-purple);
}

/* Section divider inside form */
.sp-calc__section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 28px;
}

.sp-calc__section-divider::before,
.sp-calc__section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sp-line);
}

.sp-calc__section-divider span {
  font-size: 11px;
  font-weight: 700;
  color: var(--sp-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* Error */
.sp-calc__error {
  font-size: 12px;
  color: var(--sp-red);
  margin-top: 6px;
  display: none;
}

.sp-calc__error--show { display: block; }

/* Note */
.sp-calc__note {
  font-size: 12px;
  color: var(--sp-muted);
  margin-top: -12px;
  margin-bottom: 20px;
}

/* Button */
.sp-calc__btn {
  background: var(--sp-gold);
  color: var(--sp-white);
  border: none;
  padding: 14px 32px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 0;
  display: inline-block;
  margin-top: 8px;
}

.sp-calc__btn:hover { background: var(--sp-gold-hover); }

.sp-calc__btn--reset {
  background: transparent;
  color: var(--sp-muted);
  border: none;
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 10px 0;
  display: block;
  margin-top: 12px;
  transition: color 0.2s;
}

.sp-calc__btn--reset:hover { color: var(--sp-dark); }

/* ---- RESULT ---- */
.sp-calc__result-block {
  margin-bottom: 32px;
}

.sp-calc__result-sublabel {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--sp-purple);
  margin-bottom: 8px;
}

.sp-calc__result-amount {
  font-size: 52px;
  font-weight: 800;
  color: #1a5c38;
  line-height: 1;
  margin-bottom: 6px;
}

.sp-calc__result-desc {
  font-size: 13px;
  color: var(--sp-muted);
  margin-bottom: 24px;
}

.sp-calc__result-divider {
  height: 1px;
  background: var(--sp-line);
  margin: 28px 0;
}

.sp-calc__cta-text {
  font-size: 15px;
  color: var(--sp-text);
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Contact info */
.sp-calc__contact-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--sp-dark);
  margin-bottom: 2px;
}

.sp-calc__contact-role {
  font-size: 12px;
  color: var(--sp-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.sp-calc__contact-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}

.sp-calc__contact-link {
  font-size: 14px;
  color: var(--sp-purple);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.sp-calc__contact-link:hover { color: var(--sp-gold); }

.sp-calc__disclaimer {
  font-size: 11px;
  color: var(--sp-muted);
  line-height: 1.5;
  margin-top: 20px;
}

/* Mobile */
@media (max-width: 768px) {
  .sp-calc__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sp-calc__heading { font-size: 28px; }
  .sp-calc__result-amount { font-size: 38px; }
}