/* =========================================================
   TOPUP — PAGE-SPECIFIC STYLES (clean)
   Theme-aware; overrides only colors that block dark mode.
   ========================================================= */

/* ===== Tokens / safe fallbacks ===== */
:root{
  --bottom-nav-h: 64px;
  --font-size-base: 15px;
  --benefits-bg-dark: #0f172a;  /* dark band fallback */
  --login-notice-h: 120px;      /* aproximativ; folosit la body padding când #piLoginNotice e vizibil */
  --select-font-size: 16.5px;   /* mărire font pentru select-uri */
  --select-padding-y: 12px;
  --select-padding-x: 14px;
}

/* ===== Utilities used by topup.php ===== */
.is-hidden{ display:none !important; }
.u-text-center{ text-align:center !important; }
.u-text-primary{ color:var(--primary, #1a237e) !important; }
.u-text-warn{ color:var(--warn-text, #b71c1c) !important; }
.u-bold{ font-weight:700 !important; }
.u-fs-15{ font-size:15px !important; }
.u-fs-110{ font-size:1.1em !important; }
.u-mt-8{ margin-top:.5rem !important; }
.u-mt-10{ margin-top:10px !important; }
.u-mt-20{ margin-top:20px !important; }
.u-mb-10{ margin-bottom:10px !important; }
.u-mb-15{ margin-bottom:15px !important; }
.mb-10{ margin-bottom:10px !important; }
.w-full{ width:100% !important; }
.p-8{ padding:8px !important; }
.p-16{ padding:16px !important; }

/* ===== Buttons (base) ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:10px; font-weight:700;
  background:var(--btn-bg, #ffd700); color:var(--btn-text, #000);
  border:0; cursor:pointer; box-shadow:var(--shadow, 0 2px 6px rgba(0,0,0,.05));
  transition:transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{ filter:brightness(.98); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn-primary{ background:var(--btn-bg, #ffd700); color:var(--btn-text, #000); }
.btn-accent{ background:var(--btn-accent, #ffd700); color:var(--btn-accent-text, #000); }

/* ===== Benefits (layout & card look) ===== */
.topup-benefits{
  max-width:960px; margin:0 auto; padding:24px 16px;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.section-title{ color:var(--primary, #1a237e); text-align:center; margin:0 0 16px; }
.topup-benefits .benefits-grid{
  display:flex; flex-direction:column; gap:16px; /* rămân pe coloană și pe desktop */
}
.benefit-item,
.benefit-item.alt{
  display:flex; gap:16px; align-items:center;
  background:var(--card, #fff);
  border:1px solid var(--border, #e5e7eb);
  border-radius:16px; padding:16px; box-shadow:var(--shadow, 0 4px 10px rgba(0,0,0,.04));
  transition:transform .1s ease-in-out;
}
.benefit-item:hover{ transform:scale(1.02); cursor:pointer; }
.benefit-icon{ font-size:22px; color:var(--primary, #1a237e); flex-shrink:0; padding-top:2px; }
.benefit-content h4{ margin:0; font-size:15.5px; font-weight:600; color:var(--primary, #1a237e); }
.benefit-content p{ font-size:14px; color:var(--text, #333); margin:4px 0 0; line-height:1.5; }

/* Benefits band color: light vs dark */
:root:not([data-theme="dark"]) .benefits-wrapper{
  background:var(--benefits-bg-light, #dee1fa) !important; /* pale blue ca în original */
}
[data-theme="dark"] .benefits-wrapper{
  background:var(--benefits-bg-dark, var(--bg, #0f172a)) !important; /* identic cu bg paginii */
}

/* ===== Messages ===== */
#loginStatusMessage{ text-align:center; color:var(--primary, #1a237e); }
#mustLoginMessage{ text-align:center; color:var(--warn-text, #b71c1c); font-weight:700; font-size:15px; margin-top:10px; }

/* ===== Topup form ===== */
.topup-form, .topup-benefits{ font-size:var(--font-size-base, 15px); }
.topup-form .container{ max-width:1000px; width:95%; margin:1rem auto; }
.topup-form label{ display:block; font-weight:600; margin:12px 0 6px; }
#phone{ width:100%; margin-bottom:10px; }
#formError{ color:var(--danger, #e53935); font-size:.9em; display:none; margin-bottom:10px; }
.disabled-form{ pointer-events:none; opacity:.6; }

/* Inputs */
.topup-form input[type="tel"],
.topup-form input[type="number"],
.topup-form select{
  width:100%; padding:10px 12px; border:1px solid var(--border, #ccc);
  border-radius:10px; background:var(--surface, #fff); color:var(--text, #333);
}
.topup-form input[type="tel"], .iti input[type="tel"]{
  font-size:var(--input-font-size, 15px) !important; line-height:1.4;
}

/* Continue button: albastru + full width doar pe această pagină */
.topup-form #topupForm .btn{
  display:block; width:100%; margin-top:20px;
  background:var(--primary, #1a237e) !important; color:#fff !important; border:0;
}
.topup-form #topupForm .btn[disabled]{
  opacity:.55; cursor:not-allowed; background:#9fa8da !important;
}

/* ===== Operator (detected + manual) ===== */
#operatorInfo{ margin-top:10px; font-weight:700; color:var(--primary, #1a237e); }
#operator-info{ display:none; margin-top:20px; }
#detected-operator-message{ font-weight:700; color:var(--primary, #1a237e); margin-bottom:10px; }
#operatorSelect{
  width:100%; border:1px solid var(--border, #ccc); border-radius:10px;
  background:var(--surface, #fff); color:var(--text, #333);
  /* font mai mare pentru select-uri */
  font-size:var(--select-font-size);
  line-height:1.35;
  padding:var(--select-padding-y) var(--select-padding-x);
  min-height:44px;
}

/* ===== Loader / Spinner ===== */
#plansLoader{ text-align:center; padding:1rem; display:none; }
.spinner-border{
  width:1.8rem; height:1.8rem;
  border:.25em solid var(--border, #ddd);
  border-top:.25em solid var(--primary, #1a237e);
  border-radius:50%; animation:spin .8s linear infinite; margin:12px auto;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===== Amount / Estimate ===== */
#amountSection{ margin-top:20px; display:none; } /* controlat din JS */
#amountSection select,
#amountSection input[type="number"]{
  width:100%; border:1px solid var(--border, #ccc); border-radius:10px;
  background:var(--surface, #fff); color:var(--text, #333);
  /* font mai mare doar pentru SELECT-ul de planuri */
}
#amountSection select{
  font-size:var(--select-font-size);
  line-height:1.35;
  padding:var(--select-padding-y) var(--select-padding-x);
  min-height:44px;
}
#conversionResult{ margin-top:20px; font-size:1.1em; font-weight:700; display:none; }
#conversionResult.is-visible{ display:block !important; }
#estimatedValue{ font-weight:700; }

/* ===== Select options inherit font-size ===== */
#operatorSelect option,
#amountSection select option{ font-size:inherit; }

/* ===== Sticky login notice + page push (avoid overlap with bottom nav) ===== */
body{
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}
body:has(#piLoginNotice){
  padding-bottom: calc(var(--bottom-nav-h) + var(--login-notice-h) + env(safe-area-inset-bottom));
}
#piLoginNotice{
  position:fixed !important; left:0 !important; right:0 !important;
  bottom: var(--bottom-nav-h) !important;  /* lipit deasupra bottom-nav, fără gap */
  background:var(--card, #fdfdfd) !important;
  border-top:1px solid var(--border, #d6d9e6) !important;
  box-shadow:0 -4px 10px rgba(0,0,0,.05) !important;
  padding:16px 12px !important; box-sizing:border-box !important; z-index:999;
}
#piLoginNotice p{
  margin:0; font-size:16px !important; color:var(--primary, #1a237e) !important; font-weight:500; text-align:center;
}
#piLoginNotice button{
  font-size:16px !important;
  padding:10px 22px !important;
  width:95% !important; display:block !important; margin:10px auto 0 !important;
  box-sizing:border-box;
  background:var(--btn-accent, #ffd700) !important; color:var(--btn-accent-text, #000) !important;
  border:none !important; font-weight:700 !important; border-radius:8px !important; cursor:pointer !important;
}
#piLoginNotice button:disabled{ opacity:.6 !important; cursor:not-allowed !important; }

/* DARK ONLY: login button devine albastru */
[data-theme="dark"] #piLoginNotice button{
  background: var(--primary, #1a237e) !important;
  color:#fff !important; border:0 !important;
}
[data-theme="dark"] #piLoginNotice button:hover{ filter:brightness(.98); }

/* ===== Intl-tel-input ===== */
.iti{ width:100%; }
.iti__flag-container{ z-index:1; }
.iti input[type=tel]{ background:var(--surface, #fff); color:var(--text, #333); }
.iti__country-list{
  background:var(--card, #fff); color:var(--text, #333);
  border:1px solid var(--border, #e5e7eb); box-shadow:0 8px 24px rgba(0,0,0,.12);
}

/* ===== Dark tweaks ===== */
[data-theme="dark"] .benefit-item p{ color:var(--muted, #cbd5e1); }
[data-theme="dark"] #plansLoader .spinner-border{
  border-color:rgba(255,255,255,.15); border-top-color:rgba(255,255,255,.75);
}

/* ===== Desktop tweaks ===== */
@media (min-width: 768px){
  :root{
    --login-notice-h: 108px;  /* bara de login un pic mai joasă pe desktop */
    --select-font-size: 17px;
  }
}