/* ====== SUBSCRIPTION PAGE SPECIFIC STYLES ====== */

.subscription-page {
  padding-bottom: 80px; /* відступ для navbar */
}

/* ========= TYPO ========= */
.h1{ font-size:28px; font-weight:800; letter-spacing:.2px; }
.h2{ font-size:22px; font-weight:700; }

/* ========= GENERIC UI ========= */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; 
  
  padding:16px;
  border-radius:999px;
  border:none; cursor:pointer;
  transition:transform .06s ease, background .2s ease, filter .2s ease, border-color .2s ease;
  user-select:none;
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }

.btn-primary{
  background:var(--cta-bg); color:var(--cta-fg);
  font-size:17px; font-weight:800;
  box-shadow:var(--cta-shadow);
}
.btn-primary:hover{ background:var(--cta-hover); }

.btn-secondary{
  background:transparent; color:var(--muted);
  border:1px solid var(--border);
  padding:14px; font-size:15px;
}
.btn-secondary:hover{ color:#cfcfcf; border-color:#3a3a3a; }

.btn-danger{
  background:#ff6b6b; color:#fff;
  padding:14px; font-size:15px;
}
.btn-danger:hover{ filter:brightness(0.95); }

/* ========= SUBSCRIPTION PAGE ========= */
.subscription{
  padding:20px 16px;
  max-width:520px;
  margin:0 auto;
  color:var(--text);
  padding-bottom:calc(var(--nav-h) + 16px); /* щоб не накривав навбар */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.subscription-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.subscription__active{ text-align:center; }

/* Check icon в стилі застосунку */
.subscription__check{
  width:96px; height:96px; margin:0 auto 16px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.subscription__check span{ font-size:40px; line-height:1; color:var(--cta-bg); }

.subscription__title{
  font-size:28px; font-weight:800; letter-spacing:.2px;
  color:var(--cta-bg);
  margin:4px 0 18px;
}

.subscription__card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  padding:18px 16px;
  text-align:left;
}

/* Рядки в картці */
.subscription__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 4px; gap:12px;
  border-bottom:1px solid var(--border);
}
.subscription__row:last-child{ border-bottom:none; }

.subscription__label{
  color:#E4C09F;
  font-weight:600; font-size:15px;
}
.subscription__row span:not(.subscription__label){
  font-weight:700; font-size:15px; color:var(--text);
}

/* Статуси */
.subscription-status[data-status="active"]{ color:#7CFFB2; }
.auto-renewal-status[data-renewal="true"]{ color:#7CFFB2; }
.auto-renewal-status[data-renewal="false"]{ color:#ff8a8a; }

/* ========= PLANS ========= */
.subscription-header{ text-align:center; margin-bottom:22px; }
.subscription-title{ font-size:24px; font-weight:800; margin-bottom:8px; }
.subscription-subtitle{ color:var(--muted); font-size:15px; }

.subscription-plans{ margin:22px 0 18px; }
.plan-option{ margin-bottom:12px; }

.plan-option label{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  transition:.2s ease;
  cursor:pointer; user-select:none;
  /* Make options wider */
  min-width: 320px;
  max-width: 100%;
  width: 340px;
  margin: 0 auto;
}
.plan-option label:hover{ border-color:#3a3a3a; background:linear-gradient(0deg, rgba(255,228,196,.02), rgba(255,228,196,.02)), var(--surface); }
.plan-option input[type="radio"]{
  transform:scale(1.15);
  margin-right:4px;
  accent-color:#E4C09F;
}

.plan-details{ flex:1; }
.plan-name{ color:var(--text); font-weight:700; margin-bottom:4px; }
.plan-description{ color:var(--muted); font-size:14px; }
.plan-badge{
  background:#16a34a; color:#fff;
  border-radius:999px; padding:2px 10px; font-size:12px;
  display:inline-block; margin-top:6px;
}
.plan-price{ color:#E4C09F; font-weight:800; font-size:16px; }

.plan-option.selected label {
  border: 2px solid #E4C09F !important;
  box-shadow: 0 0 0 2px rgba(228,192,159,0.15);
}

.plan-option.premium label{
  border-color: var(--border);
}

/* ========= CANCEL SECTION ========= */
.cancel-subscription-section{ margin-top:14px; }

/* ========= RESPONSIVE ========= */
@media (max-width:480px){
  .subscription__title{ font-size:24px; }
  .subscription__check{ width:88px; height:88px; }
  .subscription-title{ font-size:22px; }
}

.subscription button.btn-primary,
.subscription .btn-primary {
  display: block !important;
  margin: 32px auto 0 auto !important;
  width: fit-content !important;
  min-width: 220px !important;
  max-width: 340px !important;
  justify-content: center !important;
  align-items: center !important;
}