/* ===========================
   pricing.css
   =========================== */

/* ============================================ */
/* PRICING SELECTOR – KOMPAKT */
/* ============================================ */

.pricing-selector{
  max-width:880px;
  margin:0 auto;
  background:var(--bordo-card);
  border-radius:18px;
  padding:16px 14px 18px;
  border:1px solid rgba(249,250,251,0.3);
  box-shadow:0 22px 60px rgba(0,0,0,0.7);
}
.plan-options{margin-bottom:12px;}
.option-group{margin-bottom:12px;}
.option-group h3{
  font-size:0.95rem;
  margin-bottom:6px;
  color:var(--text);
}
.option-description{
  font-size:0.85rem;
  color:var(--muted);
  margin-bottom:6px;
}

/* Desktop/Tablet: 3 Spalten */
.option-buttons{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}
.option-btn{
  padding:8px 6px;
  border-radius:12px;
  background:rgba(0,0,0,0.18);
  border:2px solid transparent;
  color:var(--text);
  cursor:pointer;
  font-size:0.83rem;
  transition:all .15s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  text-align:center;
}
.option-btn:hover{background:rgba(0,0,0,0.28);}
.option-btn.active{
  background:var(--accent);
  color:#111827;
  border-color:var(--accent-soft);
  font-weight:600;
}

.duration-label,
.devices-label{
  font-weight:600;
  font-size:0.88rem;
}
.duration-price,
.devices-price{
  font-size:0.76rem;
  opacity:0.9;
}
.duration-info,
.devices-info{
  font-size:0.74rem;
  opacity:0.9;
}
.duration-badge{
  margin-top:1px;
  font-size:0.7rem;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(0,0,0,0.2);
}

/* Zahlung: 5 Buttons Desktop */
.payment-buttons-5{
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.payment-emoji{font-size:1.2rem;}
.payment-name{font-size:0.8rem;}
.payment-badge{
  font-size:0.68rem;
  opacity:0.9;
}

/* ============================================ */
/* ORDER SUMMARY – KOMPAKT */
/* ============================================ */

.plan-summary{
  padding:12px 10px;
  background:var(--bordo-dark);
  border-radius:14px;
  border:1px solid rgba(249,250,251,0.35);
  margin-top:6px;
}
.summary-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}
.plan-summary h3{
  font-size:0.92rem;
  color:var(--text);
}
.summary-status{
  font-size:0.75rem;
  color:var(--accent-soft);
}
.summary-details{margin-bottom:4px;}
.summary-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.85rem;
  margin-bottom:2px;
  padding:1px 0;
}
.summary-label-container{
  display:flex;
  align-items:center;
  gap:4px;
}
.summary-label-icon{font-size:0.85rem;}
.summary-label{color:var(--muted);}
.summary-value{color:var(--text);}

.summary-breakdown{
  font-size:0.8rem;
  color:var(--muted);
}
.breakdown-item{
  display:flex;
  justify-content:space-between;
  margin-bottom:2px;
}
.summary-divider{
  height:1px;
  background:rgba(249,250,251,0.25);
  margin:6px 0;
}
.summary-total{
  display:flex;
  justify-content:space-between;
  font-size:0.95rem;
  margin-bottom:8px;
  padding:2px 0;
}
.summary-price-value{
  color:var(--accent);
  font-weight:700;
}
.summary-info{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:0.77rem;
  margin-bottom:6px;
}
.info-item{
  display:flex;
  align-items:center;
  gap:6px;
}
.info-icon{font-size:0.85rem;}
.info-text{color:var(--muted);}

.btn.btn-whatsapp{
  background:#22c55e;
  color:#022c22;
  box-shadow:0 14px 30px rgba(34,197,94,0.4);
  width:100%;
  padding:7px 12px;
  font-size:0.85rem;
}
.summary-note{
  margin-top:4px;
  font-size:0.76rem;
  color:var(--muted);
  text-align:center;
  line-height:1.3;
}

/* PAYMENT INFO SECTION */
.payment-info{
  margin-top:32px;
  padding-top:32px;
  border-top:2px solid rgba(249,250,251,0.15);
}
.payment-info-header{
  text-align:center;
  margin-bottom:28px;
}
.payment-info-header h3{
  font-size:1.6rem;
  margin-bottom:10px;
  color:var(--text);
}
.payment-info-text{
  font-size:0.95rem;
  color:var(--muted);
  max-width:600px;
  margin:0 auto;
  line-height:1.6;
}
.payment-methods-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:32px;
}
.payment-method-card{
  background:var(--bordo-card);
  border:1px solid rgba(249,250,251,0.3);
  border-radius:14px;
  padding:16px;
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.payment-method-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
}
.payment-method-card:hover{
  transform:translateY(-4px);
  border-color:rgba(249,250,251,0.5);
  box-shadow:0 12px 30px rgba(0,0,0,0.4);
}
.payment-method-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.payment-method-icon{
  font-size:2rem;
  min-width:40px;
}
.payment-method-card h4{
  font-size:1rem;
  margin:0;
  font-weight:600;
}
.payment-method-desc{
  font-size:0.85rem;
  color:var(--muted);
  margin-bottom:10px;
  line-height:1.5;
}
.payment-method-features{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}
.feature{
  font-size:0.78rem;
  color:var(--accent-soft);
  display:flex;
  align-items:center;
}
.payment-method-badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:0.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.payment-method-badge.success{
  background:rgba(34,197,94,0.15);
  color:#86efac;
}
.payment-method-badge.pending{
  background:rgba(250,204,21,0.15);
  color:var(--accent-soft);
}

/* TRUST SECTION */
.payment-trust-section{
  background:rgba(0,0,0,0.2);
  border-radius:16px;
  padding:20px;
  text-align:center;
  margin-bottom:32px;
}
.payment-trust-section h4{
  font-size:1.1rem;
  margin-bottom:16px;
  color:var(--text);
}
.trust-badges{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.trust-badge{
  background:rgba(249,250,251,0.05);
  border:1px solid rgba(249,250,251,0.2);
  border-radius:12px;
  padding:12px 8px;
  text-align:center;
  transition:all .2s ease;
}
.trust-badge:hover{
  background:rgba(249,250,251,0.1);
  border-color:rgba(249,250,251,0.35);
}
.trust-icon{
  display:block;
  font-size:1.5rem;
  margin-bottom:4px;
}
.trust-text{
  font-size:0.75rem;
  color:var(--muted);
  line-height:1.4;
}

/* GUARANTEES SECTION */
.pricing-guarantees{
  margin-top:40px;
  padding-top:32px;
  border-top:2px solid rgba(249,250,251,0.15);
}
.pricing-guarantees h3{
  font-size:1.6rem;
  text-align:center;
  margin-bottom:8px;
  color:var(--text);
}
.guarantees-intro{
  text-align:center;
  color:var(--muted);
  font-size:0.95rem;
  max-width:600px;
  margin:0 auto 28px;
  line-height:1.6;
}
.guarantees-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.guarantee-item{
  background:var(--bordo-card);
  border:1px solid rgba(249,250,251,0.3);
  border-radius:14px;
  padding:16px;
  text-align:center;
  transition:all .3s ease;
  position:relative;
}
.guarantee-item:hover{
  transform:translateY(-4px);
  border-color:var(--accent-soft);
  box-shadow:0 12px 30px rgba(0,0,0,0.4);
}
.guarantee-header{margin-bottom:10px;}
.guarantee-icon{
  display:block;
  font-size:2rem;
  margin-bottom:6px;
}
.guarantee-item h4{
  font-size:0.95rem;
  margin:0 0 6px;
  font-weight:600;
}
.guarantee-item p{
  font-size:0.8rem;
  color:var(--muted);
  margin:0 0 10px;
  line-height:1.4;
}

/* Optional: falls du guarantee-badge im HTML nutzt */
.guarantee-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.75rem;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(249,250,251,0.25);
  color:var(--accent-soft);
}