/* ---------------------------
   Tikzok Recharge UI (Flutter-like)
--------------------------- */
.tz-container { max-width: 520px; margin: 0 auto; padding: 16px; }
.tz-page { padding: 8px 0 24px; }
.tz-title { font-size: 20px; font-weight: 800; margin: 8px 0 16px; }
.tz-stack { display: grid; gap: 14px; }

.tz-card { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 3px 8px rgba(0,0,0,.08); }
.tz-card--soft { background: #f5f5f5; box-shadow: none; }
.tz-card--highlight { background: rgba(33,150,243,.10); border: 2px solid #2196f3; }
.tz-card--purple { background: rgba(156,39,176,.08); border: 1px solid rgba(156,39,176,.25); }
.tz-card--green { background: rgba(76,175,80,.08); border: 1px solid rgba(76,175,80,.25); }
.tz-card__title { font-weight: 800; margin-bottom: 10px; }

.tz-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tz-row--gap { gap: 10px; }
.tz-grow { flex: 1; min-width: 0; }

.tz-input { width: 100%; padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(0,0,0,.18); background: #fff; }
.tz-input--error { border-color: rgba(244,67,54,.7); }
.tz-help { margin-top: 8px; font-size: 12px; }
.tz-help--muted { color: rgba(0,0,0,.55); }
.tz-help--ok { color: #2e7d32; font-weight: 700; }
.tz-help--error { color: #c62828; font-weight: 700; }

.tz-primary-btn { width: 100%; height: 52px; border-radius: 30px; background: #2196f3; color: #fff; border: 0; font-weight: 800; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.tz-primary-btn[disabled] { opacity: .55; cursor: not-allowed; }

.tz-icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(0,0,0,.18); background: #fff; cursor: pointer; }
.tz-flag-btn { width: 56px; height: 44px; border-radius: 12px; border: 1px solid rgba(0,0,0,.18); background: #fff; cursor: pointer; display:flex; align-items:center; justify-content:center; }
.tz-flag { font-size: 22px; }

.tz-city-card { border-radius: 18px; overflow: hidden; box-shadow: 0 6px 12px rgba(0,0,0,.12); }
.tz-city-card__img { width: 100%; height: 280px; object-fit: cover; display:block; }

.tz-strong { font-weight: 800; }
.tz-muted { color: rgba(0,0,0,.55); }
.tz-small { font-size: 12px; }
.tz-link { color: #2196f3; text-decoration: none; font-weight: 800; }
.tz-danger { color: #d32f2f; }

.tz-amount { font-size: 32px; font-weight: 900; color: #2196f3; text-align:center; margin: 8px 0 12px; }
.tz-amount-sm { font-size: 18px; font-weight: 900; color: #2196f3; }

.tz-wrap { display:flex; flex-wrap:wrap; gap: 10px; justify-content:center; }
.tz-amt-btn { padding: 12px 18px; border-radius: 14px; border: 1px solid rgba(0,0,0,.16); background:#fff; font-weight: 800; cursor:pointer; }
.tz-amt-btn.is-selected { background:#2196f3; color:#fff; border-color:#2196f3; }

.tz-divider { height: 1px; background: rgba(0,0,0,.10); margin: 12px 0; }

.tz-accordion { width: 100%; background: transparent; border: 0; padding: 0; display:flex; align-items:center; gap:10px; cursor:pointer; }
.tz-accordion__panel { display:block; margin-top: 10px; }

.tz-linear-loader { height: 2px; width: 100%; background: rgba(33,150,243,.25); position: relative; overflow:hidden; margin-top: 10px; }
.tz-linear-loader::after { content:""; position:absolute; left:-30%; top:0; height:100%; width:30%; background:#2196f3; animation: tzslide 1s infinite linear; }
@keyframes tzslide { to { left: 100%; } }

.tz-check { display:flex; align-items:center; gap:10px; }
.tz-alert { background: rgba(244,67,54,.10); border: 1px solid rgba(244,67,54,.25); padding: 12px; border-radius: 14px; font-weight: 800; }

.tz-modal { position: fixed; inset: 0; display:none; }
.tz-modal--open { display:block; }
.tz-modal__backdrop { position:absolute; inset:0; background: rgba(0,0,0,.45); }
.tz-modal__panel { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(520px, 92vw); background:#fff; border-radius: 18px; overflow:hidden; }
.tz-modal__header { display:flex; gap:10px; padding: 12px; border-bottom: 1px solid rgba(0,0,0,.10); }
.tz-modal__list { max-height: 60vh; overflow:auto; padding: 8px; }
.tz-country-row { width:100%; border:0; background:#fff; padding: 12px; border-radius: 14px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.tz-country-row:hover { background: rgba(0,0,0,.04); }

.tz-success { text-align:center; }
.tz-success__icon { font-size: 72px; margin: 18px 0; }

/* =========================
Navbar
========================= */
.tz-navbar{
    position: sticky;
    top: 0;
    background:#fff;
    z-index:900;
    border-bottom:1px solid rgba(0,0,0,.06);
}

.tz-navbar-inner{
    max-width:520px;
    margin:0 auto;
    padding:12px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* =========================
Hamburger
========================= */
.menu-toggle{
    background:none;
    border:none;
    font-size:26px;
    cursor:pointer;
}

/* =========================
Side menu RIGHT — FINAL
========================= */
.side-menu{
    position:fixed;
    top:0;
    right:-280px;
    width:280px;
    height:100vh;
    background:#fff;
    box-shadow:-6px 0 16px rgba(0,0,0,0.12);
    transition:right .25s ease;
    z-index:2000;
    display:flex;
}

.side-menu.open{
    right:0;
}

.side-menu-content{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:24px;
    width:100%;
    overflow-y:auto;
}

/* Auth item bottom */
.side-menu-content .auth-item{
    margin-top:auto;
}

/* =========================
Auth page
========================= */
.auth-page{
    max-width:420px;
    margin:auto;
    padding:24px;
}

.auth-title{
    text-align:center;
    margin-bottom:24px;
}

.auth-label{
    font-weight:600;
    display:block;
    margin-bottom:8px;
}

.auth-input{
    width:100%;
    padding:14px;
    border-radius:14px;
    border:1px solid #ddd;
    margin-bottom:16px;
}

.auth-error{
    color:red;
    font-size:14px;
    margin-bottom:12px;
}

.auth-btn{
    width:100%;
    height:54px;
    border-radius:16px;
    background:black;
    color:white;
    font-weight:bold;
}

/* Social bottom buttons */
.auth-bottom{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:30px;
}

.circle-btn{
    width:54px;
    height:54px;
    border-radius:50%;
    border:1.4px solid #ddd;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:black;
    font-size:22px;
}

/* ---------------------------
Language buttons — FINAL COMPACT
--------------------------- */
.tz-stack {
  display: flex;
  flex-direction: column;
  gap: 8px; /* ⬅️ moins d’espace */
}

/* bouton langue */
.tz-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 100%;
  padding: 10px 0px; /* ⬅️ plus petit */
  .tz-lang-btn {
  padding-left: 18px; /* ⬅️ décale un peu vers la gauche */
}
  border-radius: 10px; /* ⬅️ moins arrondi */
  border: 1px solid var(--tz-border, rgba(0,0,0,0.12));
  background: var(--tz-surface, #fff);

  text-decoration: none;
  font-size: 13px; /* ⬅️ plus petit */

  transform: translateZ(0);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease,
    opacity 120ms ease;

  will-change: transform;
}

/* press mobile */
.tz-lang-btn:active {
  transform: scale(0.97);
}

/* hover desktop */
.tz-lang-btn:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* ⬅️ shadow plus léger */
}

/* langue active */
.tz-lang-btn.is-active {
  font-weight: 600;
  border-color: var(--tz-primary, #111);
  background: var(--tz-primary-soft, rgba(0,0,0,0.05));
}

/* ---------------------------
Account row — FINAL
--------------------------- */
.tz-account-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 6px;
  text-decoration: none;
  color: inherit;

  transition: transform 120ms ease, opacity 120ms ease;
}

.tz-account-row-left {
  width: 28px;
  display: flex;
  justify-content: center;
  font-size: 18px;
}

.tz-account-row-center {
  flex: 1;
}

.tz-account-row-title {
  font-size: 14px;
  font-weight: 500;
}

.tz-account-row-sub {
  font-size: 12px;
  opacity: 0.6;
}

.tz-account-row-right {
  opacity: 0.5;
  font-size: 18px;
}

/* press animation */
.tz-account-row:active {
  opacity: 0.6;
  transform: scale(0.98);
}
/* About header close */
.tz-about-header {
  display: flex;
  justify-content: flex-end;
}

.tz-about-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
}

/* =========================
About screen — FINAL
========================= */
.tz-about-header {
  display: flex;
  justify-content: flex-end;
  position: sticky;
  top: 0;
}

.tz-about-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
}

.tz-about-close:active {
  transform: scale(0.9);
  opacity: 0.6;
}

.tz-about-logo {
  font-size: 64px;
  text-align: center;
  margin-top: 10px;
}

.tz-about-name {
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  margin-top: 10px;
}

.tz-about-version {
  text-align: center;
  opacity: 0.6;
  margin-bottom: 20px;
}

.tz-about-desc {
  text-align: center;
  margin-bottom: 24px;
}

.tz-about-links {
  margin-top: 10px;
}

/* =========================
Payment methods
========================= */
.tz-empty {
  text-align: center;
  padding: 30px 10px;
}

.tz-empty-icon {
  font-size: 70px;
  margin-bottom: 12px;
}

.tz-empty-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.tz-empty-desc {
  opacity: .6;
  margin-bottom: 20px;
}

.tz-card-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:14px;
  background:#f6f6f6;
}

.tz-card-item-left{
  font-size:20px;
}

.tz-card-item-center{
  flex:1;
}

.tz-card-item-title{
  font-weight:600;
}

.tz-card-item-sub{
  font-size:12px;
  opacity:.6;
}


/* Page close */
.tz-page-header {
  display:flex;
  justify-content:flex-end;
  position:sticky;
  top:0;
}

.tz-page-close{
  background:none;
  border:none;
  font-size:22px;
  cursor:pointer;
  transition:transform .12s ease,opacity .12s ease;
}

.tz-page-close:active{
  transform:scale(.9);
  opacity:.6;
}

/* profile avatar */
.tz-profile-avatar{
  display:flex;
  justify-content:center;
  margin:20px 0;
}

.tz-avatar-placeholder{
  width:96px;
  height:96px;
  border-radius:50%;
  background:#f2f2f2;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
}
.tz-profile-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tz-input{
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
}
/* avatar upload */
.tz-avatar-upload{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tz-avatar-img{
  width:104px;
  height:104px;
  border-radius:50%;
  object-fit:cover;
}

.tz-avatar-placeholder{
  width:104px;
  height:104px;
  border-radius:50%;
  background:#eee;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
}