/* TALKCHAT_R19C12R9R17_WALLET_FINAL_POLISH
   Final wallet/Coin Satın Al visual pass.
   Root issues in the current wallet layer:
   - dark overrides still target legacy `html.dark`
   - mobile full-screen behavior stops at 640px while current app mobile is <=767px
   - balance/history/form surfaces are visually flat and history result rows inherit raw <p> styling
   This layer is CSS-only: payment API, bank-transfer logic and checkout flow are untouched.
*/

/* ---------- shared / desktop ---------- */

.coin-payment-dialog[open]{
  color:#172033!important;
  background:#ffffff!important;
  border-color:#dce4ec!important;
  box-shadow:0 28px 80px rgba(15,23,42,.24)!important;
}

.coin-payment-dialog::backdrop{
  background:rgba(15,23,42,.50)!important;
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
}

.coin-payment-dialog>header{
  background:#ffffff!important;
  color:#172033!important;
  border-bottom-color:#e5ebf1!important;
}

.coin-payment-dialog>header strong{
  color:#172033!important;
  letter-spacing:-.01em!important;
}

.coin-payment-dialog>header button{
  color:#718096!important;
  background:transparent!important;
  border:0!important;
}

.coin-payment-dialog>header button:hover{
  background:#f1f5f9!important;
  color:#334155!important;
}

.coin-payment-body{
  background:#ffffff!important;
  color:#172033!important;
}

/* Turn the raw balance number into a small wallet hero without changing markup. */
.coin-balance{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;

  min-height:70px!important;
  margin:2px 0 12px!important;
  padding:10px 14px!important;

  border:1px solid #e1e8ef!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#fbfdff 0%,#f5f8fb 100%)!important;

  color:#172033!important;
  font-size:28px!important;
  font-weight:850!important;
  line-height:1!important;
  box-sizing:border-box!important;
}

.coin-balance::before{
  content:"account_balance_wallet";
  font-family:"Material Symbols Outlined";
  font-weight:normal;
  font-style:normal;
  font-size:24px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-feature-settings:"liga";
  -webkit-font-smoothing:antialiased;
  color:#3a84c5;
}

.coin-payment-body>[data-history]{
  width:100%!important;
  min-height:42px!important;
  margin:0 0 18px!important;
  padding:0 14px!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;

  background:#f8fafc!important;
  color:#475569!important;
  border-color:#dce4ec!important;
  border-radius:10px!important;

  font-size:12px!important;
  font-weight:750!important;
  line-height:1!important;
}

.coin-payment-body>[data-history]::before{
  content:"history";
  font-family:"Material Symbols Outlined";
  font-weight:normal;
  font-style:normal;
  font-size:18px;
  line-height:18px;
  color:#70849a;
}

.coin-payment-body>[data-history]:hover{
  background:#f1f6fa!important;
  color:#27384a!important;
  border-color:#bdcad7!important;
}

.coin-payment-body form{
  gap:13px!important;
}

.coin-payment-body label{
  color:#48586a!important;
  font-size:12px!important;
  font-weight:750!important;
}

.coin-payment-body label small{
  color:#8997a7!important;
  font-weight:500!important;
}

.coin-payment-body input,
.coin-payment-body select{
  border-color:#d6e0e9!important;
  background:#ffffff!important;
  color:#172033!important;
  box-shadow:none!important;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease!important;
}

.coin-payment-body input::placeholder{
  color:#9aa7b5!important;
  opacity:1!important;
}

.coin-payment-body input:focus,
.coin-payment-body select:focus{
  outline:0!important;
  border-color:#4b9bd0!important;
  box-shadow:0 0 0 3px rgba(75,155,208,.11)!important;
  background:#ffffff!important;
}

.coin-payment-body select option{
  background:#ffffff!important;
  color:#172033!important;
}

.coin-payment-body [role=status]{
  min-height:18px!important;
  margin:0!important;
  color:#64748b!important;
  line-height:1.35!important;
}

.coin-payment-body .feature-primary{
  border:0!important;
  background:#397ff0!important;
  color:#ffffff!important;
  box-shadow:0 4px 12px rgba(57,127,240,.16)!important;
}

.coin-payment-body .feature-primary:hover{
  background:#2e73e5!important;
}

.coin-payment-body .feature-primary:disabled{
  opacity:.58!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}

/* Bank-transfer section */
.coin-bank-wrap{
  border-color:#dce4ec!important;
  background:#f8fafc!important;
}

.coin-bank-card{
  background:#ffffff!important;
  border-color:#dce4ec!important;
  box-shadow:0 1px 2px rgba(15,23,42,.03)!important;
}

.coin-bank-card b{
  color:#172033!important;
}

.coin-bank-card span,
.coin-bank-note{
  color:#64748b!important;
}

.coin-bank-card code{
  display:block!important;
  padding:7px 9px!important;
  margin-top:2px!important;
  border-radius:8px!important;
  background:#f3f6f9!important;
  color:#26384a!important;
}

.coin-bank-success{
  align-content:start!important;
}

.coin-bank-success>h3{
  margin:0!important;
  color:#172033!important;
}

.coin-bank-success>p{
  margin:0!important;
  color:#5f6f80!important;
  line-height:1.55!important;
}

.coin-bank-success>.material-symbols-outlined{
  color:#397ff0!important;
}

/* Raw purchase-history view generated by payment-wallet JS. */
.coin-payment-body>h3{
  color:#172033!important;
  margin:2px 0 12px!important;
}

.coin-payment-body>h3 + p,
.coin-payment-body>h3 ~ p{
  margin:0 0 9px!important;
  padding:11px 12px!important;
  border:1px solid #e1e8ef!important;
  border-radius:10px!important;
  background:#f8fafc!important;
  color:#556678!important;
  font-size:12px!important;
  line-height:1.45!important;
}

.coin-payment-body>h3 ~ p a{
  display:inline-flex!important;
  margin-left:6px!important;
  color:#2879c5!important;
  font-weight:750!important;
  text-decoration:none!important;
}

.coin-payment-body>h3 ~ p a:hover{
  text-decoration:underline!important;
}

.coin-payment-frame{
  background:#ffffff!important;
  border-radius:10px!important;
}


/* ---------- current dark-theme selector ---------- */

html[data-theme="dark"] .coin-payment-dialog[open],
html.dark .coin-payment-dialog[open]{
  background:#151f2b!important;
  color:#e8eef5!important;
  border-color:#2b3745!important;
  box-shadow:0 28px 80px rgba(0,0,0,.42)!important;
  color-scheme:dark!important;
}

html[data-theme="dark"] .coin-payment-dialog::backdrop,
html.dark .coin-payment-dialog::backdrop{
  background:rgba(3,8,15,.68)!important;
}

html[data-theme="dark"] .coin-payment-dialog>header,
html.dark .coin-payment-dialog>header{
  background:#151f2b!important;
  color:#eef4fa!important;
  border-bottom-color:#2b3745!important;
}

html[data-theme="dark"] .coin-payment-dialog>header strong,
html.dark .coin-payment-dialog>header strong{
  color:#eef4fa!important;
}

html[data-theme="dark"] .coin-payment-dialog>header button,
html.dark .coin-payment-dialog>header button{
  color:#9aabbd!important;
}

html[data-theme="dark"] .coin-payment-dialog>header button:hover,
html.dark .coin-payment-dialog>header button:hover{
  background:#21303e!important;
  color:#dce7f2!important;
}

html[data-theme="dark"] .coin-payment-body,
html.dark .coin-payment-body{
  background:#151f2b!important;
  color:#e8eef5!important;
}

html[data-theme="dark"] .coin-balance,
html.dark .coin-balance{
  border-color:#2d3b49!important;
  background:linear-gradient(180deg,#182431 0%,#131d27 100%)!important;
  color:#f2f6fa!important;
}

html[data-theme="dark"] .coin-balance::before,
html.dark .coin-balance::before{
  color:#69b6ec!important;
}

html[data-theme="dark"] .coin-payment-body>[data-history],
html.dark .coin-payment-body>[data-history]{
  background:#111a24!important;
  color:#c0ccda!important;
  border-color:#304052!important;
}

html[data-theme="dark"] .coin-payment-body>[data-history]::before,
html.dark .coin-payment-body>[data-history]::before{
  color:#7899b8!important;
}

html[data-theme="dark"] .coin-payment-body>[data-history]:hover,
html.dark .coin-payment-body>[data-history]:hover{
  background:#1d2b38!important;
  color:#f0f5f9!important;
  border-color:#3e5368!important;
}

html[data-theme="dark"] .coin-payment-body label,
html.dark .coin-payment-body label{
  color:#b9c6d3!important;
}

html[data-theme="dark"] .coin-payment-body label small,
html.dark .coin-payment-body label small{
  color:#7f8fa1!important;
}

html[data-theme="dark"] .coin-payment-body input,
html[data-theme="dark"] .coin-payment-body select,
html.dark .coin-payment-body input,
html.dark .coin-payment-body select{
  background:#111a24!important;
  color:#edf3f8!important;
  border-color:#344556!important;
  color-scheme:dark!important;
}

html[data-theme="dark"] .coin-payment-body input::placeholder,
html.dark .coin-payment-body input::placeholder{
  color:#718297!important;
}

html[data-theme="dark"] .coin-payment-body input:focus,
html[data-theme="dark"] .coin-payment-body select:focus,
html.dark .coin-payment-body input:focus,
html.dark .coin-payment-body select:focus{
  background:#111a24!important;
  border-color:#3f8fc2!important;
  box-shadow:0 0 0 3px rgba(63,143,194,.12)!important;
}

html[data-theme="dark"] .coin-payment-body select option,
html.dark .coin-payment-body select option{
  background:#111a24!important;
  color:#edf3f8!important;
}

html[data-theme="dark"] .coin-bank-wrap,
html.dark .coin-bank-wrap{
  background:#182430!important;
  border-color:#2d3b49!important;
}

html[data-theme="dark"] .coin-bank-card,
html.dark .coin-bank-card{
  background:#111a24!important;
  border-color:#304052!important;
  box-shadow:none!important;
}

html[data-theme="dark"] .coin-bank-card b,
html.dark .coin-bank-card b{
  color:#eef4fa!important;
}

html[data-theme="dark"] .coin-bank-card span,
html[data-theme="dark"] .coin-bank-note,
html.dark .coin-bank-card span,
html.dark .coin-bank-note{
  color:#9cacbd!important;
}

html[data-theme="dark"] .coin-bank-card code,
html.dark .coin-bank-card code{
  background:#172330!important;
  color:#dfe9f2!important;
}

html[data-theme="dark"] .coin-bank-success>h3,
html.dark .coin-bank-success>h3{
  color:#eef4fa!important;
}

html[data-theme="dark"] .coin-bank-success>p,
html.dark .coin-bank-success>p{
  color:#aab9c8!important;
}

html[data-theme="dark"] .coin-payment-body>h3,
html.dark .coin-payment-body>h3{
  color:#eef4fa!important;
}

html[data-theme="dark"] .coin-payment-body>h3 + p,
html[data-theme="dark"] .coin-payment-body>h3 ~ p,
html.dark .coin-payment-body>h3 + p,
html.dark .coin-payment-body>h3 ~ p{
  background:#182430!important;
  color:#b9c6d3!important;
  border-color:#2d3b49!important;
}

html[data-theme="dark"] .coin-payment-body>h3 ~ p a,
html.dark .coin-payment-body>h3 ~ p a{
  color:#69b6ec!important;
}

html[data-theme="dark"] .coin-payment-body [role=status],
html.dark .coin-payment-body [role=status]{
  color:#9cacbd!important;
}


/* ---------- mobile parity: current app mobile is <=767px ---------- */

@media (max-width:767px){
  .coin-payment-dialog[open]{
    position:fixed!important;
    inset:0!important;

    width:100%!important;
    max-width:none!important;

    height:var(--visible-height,100dvh)!important;
    max-height:var(--visible-height,100dvh)!important;

    margin:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;

    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .coin-payment-dialog>header{
    flex:0 0 auto!important;
    min-height:56px!important;
    padding:
      max(8px,env(safe-area-inset-top))
      14px
      8px!important;
  }

  .coin-payment-dialog>header strong{
    font-size:15px!important;
  }

  .coin-payment-dialog>header button{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }

  .coin-payment-body{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;

    padding:
      14px
      14px
      max(22px,env(safe-area-inset-bottom))!important;
  }

  .coin-balance{
    min-height:64px!important;
    margin-top:0!important;
    font-size:25px!important;
  }

  .coin-balance::before{
    font-size:22px!important;
  }

  .coin-payment-body>[data-history]{
    min-height:44px!important;
    margin-bottom:14px!important;
    font-size:12px!important;
  }

  .coin-payment-body form{
    gap:12px!important;
  }

  .coin-payment-body input,
  .coin-payment-body select,
  .coin-payment-body .feature-primary{
    min-height:46px!important;
    font-size:16px!important;
  }

  .coin-bank-wrap{
    padding:12px!important;
  }

  .coin-bank-card{
    padding:12px!important;
  }

  .coin-payment-body>h3 + p,
  .coin-payment-body>h3 ~ p{
    padding:10px 11px!important;
  }

  .coin-payment-frame{
    width:100%!important;
    min-height:calc(var(--visible-height,100dvh) - 92px)!important;
    height:calc(var(--visible-height,100dvh) - 92px)!important;
    border-radius:0!important;
  }
}

@media (max-width:360px){
  .coin-payment-body{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .coin-balance{
    font-size:23px!important;
  }

  .coin-payment-body label{
    font-size:11.5px!important;
  }
}