/* TestTartásŐr - Előfizetés / checkout oldal */

.sub-main{ padding:150px 0 100px; }
.sub-wrapper{ max-width:520px; margin:0 auto; }

.plan-toggle{
  display:flex; gap:10px; background:var(--card-bg-alt); border:1px solid var(--border);
  border-radius:14px; padding:6px; margin-bottom:24px;
}
.plan-toggle-btn{
  flex:1; text-align:center; padding:14px 12px; border-radius:10px; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--text-muted);
  border:none; background:transparent; transition:background .18s ease, color .18s ease;
}
.plan-toggle-btn.active{ background:var(--accent); color:#1a1005; }

.sub-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:20px;
  padding:32px; margin-bottom:20px;
}
.sub-plan-name{ font-family:var(--font-display); font-size:22px; font-weight:700; margin-bottom:4px; }
.sub-plan-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
.sub-plan-price .num{ font-family:var(--font-display); font-size:34px; font-weight:700; }
.sub-plan-price .unit{ font-size:13px; color:var(--text-dim); }
.sub-plan-note{ font-size:12.5px; color:var(--text-dim); margin-bottom:20px; }

.sub-feature-list{ display:flex; flex-direction:column; gap:11px; margin-bottom:24px; }
.sub-feature-list li{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--text-muted); }
.sub-feature-list li svg{ flex-shrink:0; margin-top:2px; width:15px; height:15px; color:var(--success); }

.coupon-row{ display:flex; gap:8px; margin-bottom:8px; }
.coupon-row input{
  flex:1; background:var(--card-bg-alt); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; font-family:var(--font-mono); font-size:14px; letter-spacing:0.04em;
  color:var(--text-main); outline:none; text-transform:uppercase;
}
.coupon-row input:focus{ border-color:var(--accent); }
.coupon-row button{
  padding:0 20px; border-radius:10px; border:1px solid var(--border); background:transparent;
  color:var(--text-muted); font-weight:600; font-size:13px; cursor:pointer; transition:border-color .18s ease, color .18s ease;
}
.coupon-row button:hover{ border-color:var(--accent); color:var(--accent); }
.coupon-feedback{ font-size:12.5px; margin-bottom:16px; min-height:18px; }
.coupon-feedback.ok{ color:var(--success); }
.coupon-feedback.error{ color:var(--danger); }

.trial-note{
  display:flex; align-items:center; gap:8px; justify-content:center;
  font-size:12px; color:var(--text-dim); margin-top:14px;
}

.sub-logged-out-card{ text-align:center; }
.sub-status-badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.sub-status-badge.trialing{ color:var(--accent); background:var(--accent-soft); border:1px solid rgba(251,146,60,0.3); }
.sub-status-badge.free{ color:var(--text-muted); background:var(--card-bg-alt); border:1px solid var(--border); }

.billing-fields{ margin:22px 0; padding-top:20px; border-top:1px solid var(--border-soft); }
.billing-fields h3{ font-family:var(--font-display); font-size:15px; font-weight:600; margin-bottom:4px; }
.billing-fields-note{ font-size:12px; color:var(--text-dim); margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:1fr; gap:0 12px; }
.field-row.two-col{ grid-template-columns:1fr 1fr; }
.field-row .field{ min-width:0; }

.no-trial-note{
  display:flex; align-items:center; gap:8px; justify-content:center;
  font-size:12px; color:var(--text-dim); margin-top:14px;
}

.sub-status-badge.warn{ color:#f59e0b; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.35); }
.sub-status-badge.ok{ color:#22c55e; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); }

/* fizetés visszatérő / feldolgozó állapot */
.pay-spinner{
  width:44px; height:44px; margin:6px auto 18px; border-radius:50%;
  border:3px solid var(--border); border-top-color:var(--accent); animation:paySpin .9s linear infinite;
}
@keyframes paySpin{ to{ transform:rotate(360deg); } }
.pay-check{
  width:56px; height:56px; margin:4px auto 16px; border-radius:50%; display:grid; place-items:center;
  background:rgba(34,197,94,.14); color:#22c55e;
}
.pay-check svg{ width:28px; height:28px; }
.pay-notice{
  margin:0 0 16px; padding:12px 14px; border-radius:14px; font-size:13px; line-height:1.5;
  color:var(--text-muted); background:var(--card-bg-alt); border:1px solid var(--border);
}
.sub-actions{ display:grid; gap:10px; margin-top:12px; }
.sub-actions .btn{ margin:0; }
.invoice-list{ margin-top:18px; border-top:1px solid var(--border-soft); padding-top:14px; }
.invoice-list h4{ font-family:var(--font-display); font-size:13px; font-weight:600; margin:0 0 8px; color:var(--text-muted); }
.invoice-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0;
  font-size:13px; border-bottom:1px solid var(--border-soft);
}
.invoice-row:last-child{ border-bottom:0; }
.invoice-row .inv-date{ color:var(--text-muted); }
.invoice-row .inv-amt{ font-weight:600; }
.invoice-row a{ color:var(--accent); text-decoration:none; font-size:12px; }
.invoice-row a:hover{ text-decoration:underline; }
.secure-note{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px;
  font-size:12px; color:var(--text-dim); text-align:center;
}

/* megerősítő ablak (a böngésző natív confirm helyett) */
.ask-back{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.ask-back.show{ display:flex; animation:askFade .18s ease; }
.ask-box{
  width:100%; max-width:380px; padding:26px; border-radius:26px; text-align:center;
  background:var(--card-bg); border:1px solid var(--border); box-shadow:0 30px 80px rgba(0,0,0,.45);
  animation:askPop .22s cubic-bezier(.2,.9,.3,1.2);
}
.ask-box h3{ font-family:var(--font-display); font-size:19px; margin:0 0 8px; }
.ask-box p{ font-size:14px; line-height:1.55; color:var(--text-muted); margin:0 0 22px; }
.ask-box .ask-btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ask-box .btn{ margin:0; }
@keyframes askFade{ from{opacity:0} to{opacity:1} }
@keyframes askPop{ from{opacity:0; transform:scale(.94) translateY(8px)} to{opacity:1; transform:none} }

.invoice-row{ display:grid; grid-template-columns:1fr auto 110px; gap:12px; align-items:center; }
.invoice-row .inv-amt, .invoice-row a, .invoice-row span:last-child{ white-space:nowrap; text-align:right; }
.invoice-row .inv-amt{ text-align:right; }

/* Hozzájárulások */
.consent-box{margin:14px 0 6px;display:flex;flex-direction:column;gap:10px}
.consent-row{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--text-muted);cursor:pointer;margin:6px 0}
.consent-row input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--accent,#6c8cff)}
.consent-row a{color:var(--accent,#6c8cff);text-decoration:underline}
.order-info{font-size:12.5px;line-height:1.55;color:var(--text-muted);background:var(--surface-2,rgba(127,127,127,.08));border:1px solid var(--border,rgba(127,127,127,.2));border-radius:10px;padding:10px 12px}