/* =====================
   Fonts
   ===================== */
@font-face {
  font-family: "IRANYekanFaNum";
  src: url("../fonts/iranyekanwebmediumfanum.woff") format("woff"),
       url("../fonts/IRANYekanMediumFaNum.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =====================
   Reset & Base
   ===================== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  font-family: "IRANYekanFaNum", sans-serif;
  background: #f5f5f5;
  color: #111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Transitions (opt‑in for major blocks only) */
.app-header, .app-tabs, .currency-card, .btn, .btn-small, body {
  transition: background-color .3s ease, color .3s ease;
}

/* =====================
   Layout
   ===================== */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.app-content { flex: 1; padding: 10px; overflow-y: auto; }

/* =====================
   Header
   ===================== */
.app-header {
  position: fixed; inset: 0 0 auto 0; /* top:0; right:0; left:0 */
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 15px; background: #fff; border-bottom: 1px solid #ddd; z-index: 1000;
}
.app-title { font-size: 18px; font-weight: 700; margin: 0; color: inherit; }
.header-actions { display: flex; gap: 10px; }
.icon-btn { background: none; border: 0; font-size: 20px; cursor: pointer; }

/* Add breathing room below header for pages that scroll under it */
.app-content { margin-top: 60px; margin-bottom: 60px; }

/* =====================
   Bottom Tabs
   ===================== */
.app-tabs {
  position: fixed; inset: auto 0 0 0; height: 55px; z-index: 1000;
  display: flex; justify-content: space-around; align-items: center;
  background: #fff; border-top: 1px solid #ddd;
}
.app-tabs .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 6px 0; text-decoration: none; color: #555; font-size: 12px;
}
.app-tabs .tab .tab-icon { font-size: 18px; line-height: 20px; }
.app-tabs .tab .tab-label { font-size: 11px; }
.app-tabs .tab.active { color: #e63946; font-weight: 700; }

/* Optional: SVG icon color sync */
.tab-svg { fill: #333; transition: fill .3s ease; }
.app-tabs .tab.active .tab-svg { fill: #e63946; }

/* =====================
   Cards (generic)
   ===================== */
.card {
  background: #fff; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.08);
  padding: 12px 15px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;
}

/* =====================
   Currency Table (unified grid)
   ===================== */
.currency-header,
.currency-card {
  display: grid; align-items: center; gap: 10px; padding: 10px 14px;
  grid-template-columns: 1fr 90px 90px 35px; /* symbol | buy | sell | fav */
}

.currency-header {
  font-weight: 700; font-size: 13px; color: #555; background: #f5f5f5;
  border-bottom: 1px solid #ddd; border-radius: 8px; margin-bottom: 8px;
  position: sticky; top: 0; z-index: 10; text-align: center;
}

.currency-card {
  background: #fff; border: 1px solid #eee; border-radius: 12px; margin-bottom: 10px;
}
.currency-card:hover { background: #fafafa; }

/* Symbol column */
.col-symbol { display: flex; align-items: center; gap: 10px; min-width: 0; }
.currency-flag { width: 32px; height: 22px; border-radius: 4px; object-fit: cover; }
.currency-info { display: flex; flex-direction: column; min-width: 0; }
.currency-name { font-size: 14px; font-weight: 600; }
.currency-code { font-size: 11px; color: #666; }

/* Prices */
.price-buy, .price-sell {
  text-align: center; font-weight: 600; font-family: "IRANYekanFaNum", monospace;
}
.price-buy { color: #1a9d4a; }
.price-sell { color: #e63946; }

/* Favorite */
.col-fav { text-align: center; width: 35px; }
.fav-btn {
  background: transparent; border: 0; cursor: pointer; font-size: 16px; line-height: 1;
  color: #666; transition: color .2s ease, opacity .2s ease;
}
.fav-btn:hover { color: #111; }
.fav-btn.fav-active { color: #e63946; }
.fav-btn.locked { opacity: .6; cursor: not-allowed; }

/* =====================
   Profile / Lists
   ===================== */
.profile-box { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.profile-section { margin-bottom: 20px; }
.fav-list, .session-list { list-style: none; padding: 0; margin: 0; }
.fav-list li, .session-list li {
  background: #f9f9f9; padding: 8px 10px; border-radius: 6px; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
}

/* =====================
   Buttons
   ===================== */
.btn { background: #1a9d4a; color: #fff; padding: 6px 12px; border-radius: 6px; text-decoration: none; display: inline-block; }
.btn-small, .btn-danger { color: #fff; border: 0; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.btn-small { background: #e63946; }
.btn-danger { background: #e63946; }

/* Buy button (pricing page) */
.btn-buy { background: #007bff; color: #fff; border: 0; padding: 8px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.btn-buy:hover { background: #0056b3; }

/* =====================
   Auth / Login
   ===================== */
.login-wrapper { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 120px); padding: 20px; box-sizing: border-box; }
.login-box {
  background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 35px 25px; max-width: 360px; width: 100%; text-align: center;
}
.login-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.login-subtitle { font-size: 14px; color: #666; margin-bottom: 25px; }
.form-group { margin-bottom: 18px; }
.input-field {
  width: 100%; padding: 14px 16px; border: 1px solid #ddd; border-radius: 12px; font-size: 14px;
  transition: border .3s ease, background .3s ease; background: #fff; color: inherit;
}
.input-field:focus { border-color: #fdd900; outline: none; background: #fffceb; }
.btn-submit {
  width: 100%; padding: 14px; background: #fdd900; border: 0; border-radius: 12px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background .3s ease, transform .1s ease;
}
.btn-submit:hover { background: #e6c200; }
.btn-submit:active { transform: scale(.97); }
.login-footer { margin-top: 20px; font-size: 12px; color: #888; line-height: 1.6; }
.login-footer .highlight { color: #fdd900; font-weight: 700; }

/* OTP / Verify */
.auth-wrapper { display: flex; justify-content: center; align-items: center; min-height: 70vh; }
.auth-box { background: #1e1e2f; padding: 30px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,.3); max-width: 380px; width: 100%; text-align: center; }
.auth-title { color: #fff; font-size: 20px; margin-bottom: 20px; }
.auth-input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #444; background: #2c2c3c; color: #fff; }
.auth-input::placeholder { color: #aaa; }
.auth-btn { width: 100%; padding: 12px; background: #ffd600; border: 0; border-radius: 10px; font-weight: 700; font-size: 16px; cursor: pointer; }
.auth-btn:hover { background: #ffca28; }
.verify-wrapper { display: flex; justify-content: center; align-items: center; padding: 2rem; }
.verify-box { background: #fff; padding: 1.5rem; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,.08); max-width: 360px; width: 100%; text-align: center; }
.verify-title { font-size: 1.2rem; margin-bottom: .5rem; }
.verify-subtitle { font-size: .9rem; color: #555; margin-bottom: 1rem; }
.verify-form .input-field { text-align: center; }
.debug-otp { margin-top: 15px; padding: 10px; border-radius: 8px; background: #2c2c2c; color: #dce775; font-size: .85rem; text-align: center; }

/* =====================
   Loading / Meta
   ===================== */
.loading-spinner { text-align: center; padding: 15px; color: #666; font-size: 14px; }
.last-update { text-align: center; font-size: 12px; color: #777; margin: 8px 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.last-update .refresh-btn { cursor: pointer; border: 0; background: transparent; font-size: 14px; color: inherit; transition: transform .2s ease; }
.last-update .refresh-btn:hover { transform: rotate(90deg); }

/* =====================
   Dark Mode (grouped)
   ===================== */
body.dark { background: #111315; color: #eee; }
body.dark .app-header,
body.dark .app-tabs,
body.dark .card,
body.dark .currency-card,
body.dark .profile-box { background: #1f1f1f; color: #eee; border-color: #333; box-shadow: 0 2px 6px rgba(255,255,255,.05); }
body.dark .app-title { color: #fff; }
body.dark .app-tabs { border-top: 1px solid #333; }
body.dark .app-tabs .tab { color: #bbb; }
body.dark .app-tabs .tab.active { color: #ff4d6d; }
body.dark .tab-svg { fill: #ccc; }
body.dark .app-tabs .tab.active .tab-svg { fill: #ff4d6d; }
body.dark .currency-header { background: #1f1f1f; color: #fff; border-bottom: 2px solid #333; }
body.dark .currency-card:hover { background: #333; }
body.dark .currency-name { color: #fff; }
body.dark .currency-code { color: #bbb; }
body.dark .price-buy { color: #50fa7b; }
body.dark .price-sell { color: #ff5555; }
body.dark .loading-spinner { color: #ccc; }
body.dark .last-update { color: #aaa; }
body.dark .btn, body.dark .btn-small { background: #444; color: #fff; }
body.dark .login-box { background: #1b1b1b; color: #eee; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
body.dark .login-subtitle { color: #aaa; }
body.dark .input-field { background: #222; border: 1px solid #444; color: #fff; }

/* =====================
   Responsive
   ===================== */
@media (max-width: 480px) {
  .currency-header, .currency-card { grid-template-columns: 1fr 80px 80px 25px; padding: 8px 10px; }
  .currency-header { font-size: 12px; padding: 6px 10px; }
  .fav-btn { font-size: 14px; }
}


.payment-box {
  background: #1e1e1e;
  color: #fff;
  padding: 20px;
  margin: 20px auto;
  border-radius: 12px;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.payment-box.success { border: 2px solid #4caf50; }
.payment-box.error { border: 2px solid #f44336; }

.payment-details, .error-details {
  text-align: left;
  background: #2a2a2a;
  padding: 10px;
  border-radius: 8px;
  margin: 15px 0;
}

.btn-back, .btn-retry {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.btn-back {
  background: #4caf50;
  color: #fff;
}

.btn-back:hover { background: #388e3c; }

.btn-retry {
  background: #f44336;
  color: #fff;
}

.btn-retry:hover { background: #c62828; }


.payment-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.btn-profile {
  background: #2196f3;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.btn-profile:hover {
  background: #1976d2;
}


.payment-box {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
  font-family: "IRANYekanFaNum", sans-serif;
}

.payment-box h2 {
  margin-bottom: 15px;
}

.payment-box p {
  font-size: 16px;
  margin: 8px 0;
}

.payment-box .btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 18px;
  background: #444;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
}

.payment-box.success { border: 2px solid green; }
.payment-box.failed { border: 2px solid red; }
.payment-box.cancelled { border: 2px solid orange; }



/* === Home tiles === */
.home-wrap { padding: 8px 10px 16px; }
.home-toolbar{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 10px;}
.home-last{font-size:.86rem;color:#6b7280;}
.home-refresh{border:0;background:#f3f4f6;border-radius:10px;padding:6px 10px;cursor:pointer}
.home-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
}
.tile{background:#fff;border:1px solid #eee;border-radius:14px;padding:10px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.tile-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tile-icon{width:28px;height:20px;border-radius:4px;object-fit:cover;flex:0 0 auto}
.tile-titles{display:flex;flex-direction:column;gap:2px}
.tile-title{font-weight:700;font-size:.95rem}
.tile-code{font-size:.8rem;color:#6b7280}
.tile-price{font-weight:800;font-size:1rem}
.tile-price .unit{font-weight:500;font-size:.78rem;margin-right:4px;color:#6b7280}
.muted{color:#9ca3af}

/* Coins preview */
.home-section{margin-top:14px}
.home-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.home-section-title{font-weight:800}
.home-link{font-size:.86rem;color:#6366f1;text-decoration:none}
.coins-mini{list-style:none;margin:0;padding:0}
.coin-mini{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px dashed #eee}
.coin-mini .coin-name{font-weight:600}
.coin-mini .dot{margin:0 8px;color:#9ca3af}
.coin-mini .coin-price{font-weight:700}


.coins-grid{display:grid;grid-template-columns:1fr;gap:12px}
.coin-card{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #eee;border-radius:14px;padding:12px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.coin-left{display:flex;align-items:center;gap:10px}
.coin-icon{width:34px;height:34px}
.price-sell{font-weight:700}