/* Termin Form Pro v2 — Frontend */
.tfp-wrapper{font-family:var(--tfp-font,inherit);font-size:var(--tfp-fs,15px);background:var(--tfp-bg,#0f1117);padding:16px}
.tfp-form{background:var(--tfp-form-bg,#181c27);border-radius:var(--tfp-r-form,16px);padding:var(--tfp-pad,28px);max-width:var(--tfp-max-w,520px);margin:0 auto;box-sizing:border-box}

/* Section label */
.tfp-section-label{display:block;color:var(--tfp-label,#8892a4);font-size:var(--tfp-fs-label,13px);margin-bottom:12px;font-weight:500}

/* ── Service grid ─────────────────────────────────────────────── */
.tfp-services{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px}
.tfp-svc{
  background:var(--tfp-svc-bg,#1e2436);
  border:1.5px solid var(--tfp-svc-border,#2a2f3d);
  border-radius:10px;
  color:var(--tfp-svc-text,#fff);
  padding:18px 10px 14px;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:inherit;font-size:var(--tfp-fs-label,13px);
  transition:border-color .18s,background .18s;
  min-height:80px;
}
.tfp-svc:hover{border-color:var(--tfp-svc-active-border,#3b6dff)}
.tfp-svc--active{
  background:var(--tfp-svc-active-bg,#3b6dff);
  border-color:var(--tfp-svc-active-border,#3b6dff);
}
.tfp-svc__icon{display:flex;align-items:center;justify-content:center;line-height:1}
.tfp-svc__icon svg{display:block}
.tfp-svc__label{font-size:var(--tfp-fs-label,13px);text-align:center;line-height:1.3;font-weight:500}

/* ── Field groups ─────────────────────────────────────────────── */
.tfp-group{margin-bottom:14px}
.tfp-row{display:flex;gap:12px}
.tfp-group--half{flex:1;min-width:0}

.tfp-label{
  display:flex;align-items:center;gap:5px;
  color:var(--tfp-label,#8892a4);
  font-size:var(--tfp-fs-label,13px);
  margin-bottom:6px;font-weight:500;
}
.tfp-field-icon{display:flex;align-items:center;opacity:.85}
.tfp-field-icon svg{display:block}
.tfp-req{color:#f87171;margin-left:2px}

/* ── Inputs ───────────────────────────────────────────────────── */
.tfp-form input[type=text],.tfp-form input[type=email],.tfp-form input[type=tel],
.tfp-form input[type=number],.tfp-form input[type=date],.tfp-form input[type=time],
.tfp-form input[type=url],.tfp-form textarea{
  display:block;width:100%;box-sizing:border-box;
  background:var(--tfp-input-bg,#0d1117);
  border:1.5px solid var(--tfp-border,#2a2f3d);
  border-radius:var(--tfp-r-input,8px);
  color:var(--tfp-text,#fff);
  padding:11px 14px;
  font-size:var(--tfp-fs,15px);font-family:inherit;
  outline:none;transition:border-color .18s,box-shadow .18s;
  -webkit-appearance:none;color-scheme:dark;
}
.tfp-form input:focus,.tfp-form textarea:focus{
  border-color:var(--tfp-svc-active-bg,#3b6dff);
  box-shadow:0 0 0 3px rgba(59,109,255,.18);
}
.tfp-form textarea{resize:vertical;min-height:110px}
.tfp-form input::placeholder,.tfp-form textarea::placeholder{color:var(--tfp-label,#8892a4);opacity:.6}

/* ── Submit button ────────────────────────────────────────────── */
.tfp-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:8px;
  background:var(--tfp-btn-bg,#3b6dff);
  color:var(--tfp-btn-text,#fff);
  border:none;border-radius:var(--tfp-r-btn,8px);
  padding:14px 20px;
  font-size:var(--tfp-fs,15px);font-family:inherit;font-weight:600;
  cursor:pointer;transition:background .18s,transform .1s;
}
.tfp-btn:hover{background:var(--tfp-btn-hover,#2d5ce8)}
.tfp-btn:active{transform:scale(.98)}
.tfp-btn:disabled{opacity:.6;cursor:not-allowed}
.tfp-btn__spin{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  animation:tfp-spin .7s linear infinite;
}
@keyframes tfp-spin{to{transform:rotate(360deg)}}

/* ── Messages ─────────────────────────────────────────────────── */
.tfp-msg{padding:12px 16px;border-radius:8px;font-size:14px;margin-bottom:14px}
.tfp-msg.ok{background:rgba(34,197,94,.12);border:1.5px solid rgba(34,197,94,.35);color:#4ade80}
.tfp-msg.err{background:rgba(239,68,68,.12);border:1.5px solid rgba(239,68,68,.35);color:#f87171}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:480px){
  .tfp-services{grid-template-columns:repeat(2,1fr)}
  .tfp-row{flex-direction:column;gap:0}
  .tfp-form{padding:18px 14px}
}

/* ══════════════════════════════════════════════════════════════
   ICON-IN-INPUT style (tfp-icon-in-input)
══════════════════════════════════════════════════════════════ */
.tfp-icon-in-input .tfp-field-icon { display: none; }  /* hide from label */

.tfp-input-wrap,
.tfp-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.tfp-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tfp-label, #8892a4);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}

.tfp-input-wrap input,
.tfp-select-wrap select {
  padding-left: 42px !important;
}

/* Select specific */
.tfp-select-wrap select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--tfp-input-bg, #141b2d);
  border: 1.5px solid var(--tfp-border, #1e2736);
  border-radius: var(--tfp-r-input, 10px);
  color: var(--tfp-text, #fff);
  padding: 11px 14px 11px 42px;
  font-size: var(--tfp-fs, 15px);
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.tfp-select-wrap select:focus {
  border-color: var(--tfp-svc-active-bg, #3b6dff);
  box-shadow: 0 0 0 3px rgba(59,109,255,.18);
}
.tfp-select-wrap select option {
  background: #141b2d;
  color: #fff;
}

/* ── Uppercase label style ─────────────────────────────────── */
.tfp-labels-upper .tfp-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 600;
  color: var(--tfp-label, #6b7a99);
  margin-bottom: 7px;
}

/* ── Gradient button ───────────────────────────────────────── */
.tfp-btn--gradient {
  background: var(--tfp-btn-gradient, linear-gradient(135deg,#00c2cb,#0066ff)) !important;
}
.tfp-btn--gradient:hover {
  filter: brightness(1.08);
}

/* ── Arrow icon in button ──────────────────────────────────── */
.tfp-btn__arrow {
  display: flex;
  align-items: center;
  margin-left: 4px;
  transition: transform .18s;
}
.tfp-btn:hover .tfp-btn__arrow {
  transform: translateX(3px);
}

/* ── Transparent form bg (Probefahrt style) ────────────────── */
.tfp-form[style*="color_form_bg:transparent"],
.tfp-wrapper > .tfp-form {
  /* form-bg handled via CSS var already */
}

/* ── Dependent select states ─────────────────────────────────── */
.tfp-select-wrap select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tfp-select-wrap select.tfp-select-loading {
  opacity: 0.6;
  pointer-events: none;
}
/* Smooth option repopulate */
.tfp-select-wrap select {
  transition: opacity .15s ease;
}