/* ============================================================
   Traniva AG Protected Download – Frontend Styles (Classic)
   ------------------------------------------------------------
   • neutrales Design
   • 12er Grid für kompakte Felder
   • sanftes Aufklappen
   • Fix 2: Button immer links, auch in Visual Composer
============================================================ */

/* Design-Variablen – hier änderst du Farben/Ecken zentral */
:root{
  --ti-primary:#0687E1;
  --ti-primary-dark:#005fa3;
  --ti-bg:#f7f7f7;
  --ti-border:#ccc;
  --ti-text:#333;
  --ti-radius:0px; /* 0 = eckig */
}

/* Wrapper */
.traniva-download-wrapper{
  max-width:820px;
  margin:1.5rem auto;
  text-align:left;
}

/* Hauptbutton */
.traniva-download-btn{
  display:inline-block;
  padding:10px 22px;
  font-size:15px;
  font-weight:600;
  text-transform:uppercase;
  color:#fff;
  background:var(--ti-primary);
  border:1px solid transparent;
  border-radius:var(--ti-radius);
  cursor:pointer;
  transition:background .25s ease, transform .1s ease, box-shadow .25s ease;
  text-decoration:none;
  box-shadow:0 2px 5px rgba(0,0,0,.08);
}
.traniva-download-btn:hover{ background:var(--ti-primary-dark); }
.traniva-download-btn:active{ transform:scale(.98); }

/* Aufklapp-Container (sanft) */
.traniva-form-wrapper{
  overflow:hidden;
  max-height:0;
  transition:max-height .4s ease-in-out;
  display:none;
}
.traniva-form-wrapper.active{
  display:block;
  max-height:1000px;
}

/* Formularbox + 12er Grid */
.traniva-form{
  margin-top:1rem;
  padding:16px;
  background:var(--ti-bg);
  border:1px solid var(--ti-border);
  border-radius:var(--ti-radius);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;

  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:15px;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

/* Grid-Utilities */
.ti-col-12{grid-column:span 12;}
.ti-col-8 {grid-column:span 8;}
.ti-col-6 {grid-column:span 6;}
.ti-col-4 {grid-column:span 4;}
.ti-col-3 {grid-column:span 3;}

/* Labels + Inputs */
.ti-field{
  color:var(--ti-text);
  font-size:.95rem;
  line-height:1.35;
  display:flex;
  flex-direction:column;
}
.ti-field input{
  width:100%;
  padding:10px 12px;
  margin-top:6px;
  border:1px solid #bbb;
  border-radius:var(--ti-radius);
  transition:border-color .2s, box-shadow .2s;
  background:#fff;
  color:#111;
  box-sizing:border-box;
}
.ti-field input:focus{
  border-color:var(--ti-primary);
  outline:none;
  box-shadow:0 0 0 2px rgba(6,135,225,.12);
}

/* AGB + Submit-Zeilen */
.traniva-agb{ display:flex; align-items:center; }
.traniva-agb input[type="checkbox"]{ margin-right:8px; }

.traniva-submit{ display:flex; justify-content:flex-end; align-items:center; }

/* Submit-Button im Formular */
#traniva-submit.traniva-btn{
  background:#004b8d;
  color:#fff;
  border:none;
  padding:12px 22px;
  border-radius:var(--ti-radius);
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s ease, transform .1s ease;
}
#traniva-submit.traniva-btn:hover:not(:disabled){ background:var(--ti-primary); }
#traniva-submit.traniva-btn:disabled{ background:#cfcfcf; cursor:not-allowed; color:#fff; }
#traniva-submit.traniva-btn:active{ transform:scale(.98); }

/* Responsive: alles einspaltig < 640px */
@media (max-width:640px){
  .traniva-form{ grid-template-columns:repeat(12,1fr); }
  .traniva-form > *{ grid-column:span 12 !important; }
}


/* ============================================================
   Traniva Protected Download – Fix 2 (Ausrichtung vereinheitlicht)
   ------------------------------------------------------------
   Verhindert, dass Pagebuilder oder Themes Buttons zentrieren.
   Alle Download-Wrapper und Formulare bleiben linksbündig.
============================================================ */

/* Grundlayout für Wrapper & Button */
.traniva-download-wrapper {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Optional: Falls irgendwo WordPress-Buttons überschreiben */
.wp-block-buttons,
.wp-block-button {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Formular selbst auch linksbündig */
.traniva-form {
  align-self: flex-start !important;
  text-align: left !important;
}


/* ============================================================
   ✅ FIX 2 – Button immer links (auch mit Visual Composer/Theme)
============================================================ */
.wp-block-buttons .traniva-download-wrapper,
.wp-block-button .traniva-download-wrapper,
.wp-block-buttons,
.wp-block-button,
p .traniva-download-wrapper,
.wpb_wrapper .traniva-download-wrapper,
.wpb_column .traniva-download-wrapper,
.vc_row .traniva-download-wrapper,
.traniva-download-wrapper{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  flex-direction:column !important;
  text-align:left !important;
  width:100% !important;
}
.traniva-download-btn{
  margin-left:0 !important;
  margin-right:auto !important;
  display:inline-block !important;
  text-align:left !important;
}
.traniva-form{
  align-self:flex-start;
  text-align:left;
}

.traniva-note strong {
  color: #0075C9; /* dein CI-Blau */
  font-weight: 600;
}