/*
Theme Name: Softlab Child
Author: WebGeniusLab
Author URI: http://webgeniuslab.net
Description: -
Version: 1.0
Template: softlab
Text Domain:  softlab-child
*/

/* ===============================
   Temprana – Ticketpreis Rechner
   =============================== */
:root{
  --tp-bg:#ffffff;
  --tp-border: rgba(0,0,0,.08);
  --tp-text:#0b0b0c;
  --tp-muted: rgba(0,0,0,.62);
  --tp-soft: rgba(0,0,0,.04);

  --tp-profit:#2ecc71;     /* Auszahlung Veranstalter (grün) */
  --tp-fix:#f2a24a;        /* Fix (orange) */
  --tp-var:#6a5cff;        /* Variabel (violett) */

  --tp-shadow: 0 10px 30px rgba(0,0,0,.08);
  --tp-radius: 16px;

  --tp-track: rgba(0,0,0,.12);
  --tp-trackH: 8px;
}

.tp-card{
  max-width: 920px;
  background: var(--tp-bg);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);
  padding: 18px 18px 16px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--tp-text);
}

.tp-header{
  display:flex;
  gap:14px;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom: 12px;
}
.tp-title{ font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.tp-sub{ font-size: 13px; color: var(--tp-muted); margin-top: 4px; max-width: 640px; }
.tp-tier{
  font-size: 12px;
  font-weight: 900;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--tp-border);
  background: rgba(242,162,74,.12);
  color: rgba(0,0,0,.78);
  white-space: nowrap;
}

.tp-controls{
  display:grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 14px;
  align-items:start;
  margin-top: 6px;
}

.tp-label{
  display:block;
  font-size: 13px;
  color: var(--tp-muted);
  margin: 10px 0 10px;
  font-weight: 800;
}

/* ===== Slider ===== */
.tp-rangeWrap{ position:relative; padding-top: 26px; }
input[type="range"]{
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  margin: 0;
  --pos: 0%;
}

input[type="range"]::-webkit-slider-runnable-track{
  height: var(--tp-trackH);
  border-radius: 999px;
  background: linear-gradient(to right, var(--tp-fix) 0%, var(--tp-fix) var(--pos), var(--tp-track) var(--pos), var(--tp-track) 100%);
}
input[type="range"]::-moz-range-track{
  height: var(--tp-trackH);
  border-radius: 999px;
  background: var(--tp-track);
}
input[type="range"]::-moz-range-progress{
  height: var(--tp-trackH);
  border-radius: 999px;
  background: var(--tp-fix);
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tp-fix);
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
  cursor: pointer;
  margin-top: calc((var(--tp-trackH) - 20px)/2);
}
input[type="range"]::-moz-range-thumb{
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tp-fix); border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
  cursor:pointer;
}

.tp-tooltip{
  position:absolute;
  top: 0px;
  transform: translateX(-50%);
  padding: 7px 10px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  pointer-events:none;
  opacity: .98;
}
.tp-tooltip:after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #111;
}

.tp-ticks{
  position: relative;
  margin-top: 14px;
  height: 22px;
  color: rgba(0,0,0,.55);
  font-size: 12px;
}
.tp-ticks span{
  position:absolute;
  transform: translateX(-50%);
}
.tp-ticks span::before{
  content:"";
  position:absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 10px;
  background: rgba(0,0,0,.18);
  border-radius: 2px;
}

/* ===== Manual input ===== */
.tp-inputWrap{
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  background: #fff;
  padding: 10px 12px 12px;
}
.tp-inputRow{
  display:flex;
  align-items:center;
  gap: 8px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  border-radius: 12px;
  padding: 10px 12px;
}
.tp-input{
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.tp-inputSuffix{
  font-weight: 900;
  color: rgba(0,0,0,.65);
}
.tp-inputHint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--tp-muted);
}

/* Metrics */
.tp-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.tp-metric{
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--tp-soft);
}
.tp-k{ font-size: 12px; color: var(--tp-muted); font-weight: 800; }
.tp-v{ font-size: 22px; font-weight: 900; margin-top: 4px; letter-spacing: -0.02em; }
.tp-s{ font-size: 12px; color: var(--tp-muted); margin-top: 4px; }
.tp-strong{ background: rgba(242,162,74,.12); border-color: rgba(242,162,74,.35); }
.tp-profitCard{ background: rgba(46,204,113,.12); border-color: rgba(46,204,113,.35); }

/* Sections */
.tp-section{
  margin-top: 16px;
  padding: 12px 12px 10px;
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  background: #fff;
}
.tp-sectionTop{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
}
.tp-sectionTitle{ font-size: 13px; font-weight: 900; }
.tp-sectionHint{ font-size: 12px; color: var(--tp-muted); }

.tp-bar{
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  overflow:hidden;
  display:flex;
}
.tp-barProfit{ background: var(--tp-profit); }
.tp-barFix{ background: var(--tp-fix); }
.tp-barVar{ background: var(--tp-var); }

.tp-legend{
  display:flex;
  gap: 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--tp-muted);
  font-weight: 800;
}
.tp-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align: -1px; }
.tp-dotProfit{ background: var(--tp-profit); }
.tp-dotFix{ background: var(--tp-fix); }
.tp-dotVar{ background: var(--tp-var); }

/* Details */
.tp-details{
  margin-top: 12px;
  border-top: 1px dashed var(--tp-border);
  padding-top: 12px;
}
.tp-details summary{
  cursor:pointer;
  font-weight: 900;
  font-size: 13px;
}
.tp-detailsInner{
  margin-top:  12px;
  display:grid;
  gap: 12px;
}
.tp-detailBlock{
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  padding: 12px 12px;
  background: #fff;
}
.tp-detailTitle{
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 8px;
}

/* Fee composition (inside details) */
.tp-feeBox{
  background: rgba(0,0,0,.015);
}
.tp-formula{
  font-size: 13px;
  color: rgba(0,0,0,.78);
  background: rgba(0,0,0,.04);
  border: 1px solid var(--tp-border);
  border-radius: 12px;
  padding: 10px 12px;
  line-height: 1.35;
  margin-bottom: 10px;
}
.tp-feeBar{
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  overflow:hidden;
  display:flex;
}
.tp-feeBarFix{ background: var(--tp-fix); }
.tp-feeBarVar{ background: var(--tp-var); }

@media (max-width: 900px){
  .tp-controls{ grid-template-columns: 1fr; }
}
@media (max-width: 820px){
  .tp-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .tp-grid{ grid-template-columns: 1fr; }
}