/* public/assets/css/app.css */
body { background:#f7f7f9; }
.navbar .material-icons { vertical-align: middle; }
.loader-overlay { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.7); z-index: 2000; }
.shimmer-card { border-radius: 1rem; background: #fff; padding: 1rem; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.shimmer-title, .shimmer-line { height: 14px; background: linear-gradient(90deg,#eee,#f5f5f5,#eee); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; }
.shimmer-title { width: 40%; margin-bottom: 10px; height: 18px; }
.shimmer-line { width: 60%; margin-bottom: 8px; }
@keyframes shimmer { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }
.card { border: 0; border-radius: 1rem; }



/* Toasts */
.cg-toast{ position: fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); opacity:0; padding:12px 16px; border-radius:12px; background:#111; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.15); z-index:3000; transition: all .25s ease; }
.cg-toast.ok{ background:#111; }
.cg-toast.error{ background:#b00020; }
.cg-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }



:root{
  --cg-bg:#0f1221;          /* deep indigo */
  --cg-grad-1:#10132b;
  --cg-grad-2:#1b2240;
  --cg-accent:#2f7dfa;      /* primary blue */
  --cg-accent-2:#00d4ff;    /* cyan edge */
  --cg-ink:#0c0c0d;
  --cg-ink-soft:#5e5f6b;
  --cg-card:#ffffff;
  --cg-soft:#f0f2f8;
}

body { background:#f7f7f9; }

/* HERO */
.hero-wrap{ position:relative; background: linear-gradient(180deg,var(--cg-grad-1),var(--cg-grad-2)); color:#fff; }
.text-hero-sub{ color:#cfd6ff; }
.hero-grad{
 position:absolute; 
 inset:auto 0 0 0; 
 height:48px; 
 display: none;
 background: linear-gradient(180deg,transparent,rgba(247,247,249,1)); 
}
.btn-hero{ background:var(--cg-accent); color:#fff; border:none; }
.btn-hero:hover{
 filter:brightness(0.95); 
 color:white;
 background-color: #687184;
}
.btn-outline-hero{ border:1px solid rgba(255,255,255,.4); color:#343c61; background:transparent; }
.btn-outline-hero:hover{ background:rgba(255,255,255,.08); }

/* Shadows */
.shadow-hero{ box-shadow: 0 25px 80px rgba(0,0,0,.35); }

/* Market strip */
.market-strip{ overflow-x:auto; scrollbar-width:none; }
.market-strip::-webkit-scrollbar{ display:none; }
.market-pill{ background:#fff; border:1px solid #eee; border-radius:999px; padding:8px 14px; display:inline-flex; gap:10px; align-items:center; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.market-pill .sym{ font-weight:600; color:#222; }
.market-pill .price{ color:#555; }
.coin-icon{ width:28px; height:28px; display:inline-grid; place-items:center; }
.coin-icon.lg{
 width:46px; height:46px; 
}
.coin-icon.lg img,.coin-icon img{
	width: 100%;
}

/* Asset cards */
.asset-card{ background:var(--cg-card); border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.06); border:1px solid #eee; transition:transform .18s ease, box-shadow .18s ease; }
.asset-card:hover{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.09); }
.bg-soft{ background:#f2f6ff!important; color:#305; }

/* Feature area */
.bg-hero-card{ background:linear-gradient(180deg,#fff,#f6f8ff); border:1px solid #eef1ff; }
.feature-card{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; margin-bottom:12px; box-shadow:0 6px 18px rgba(0,0,0,.05); }
.feature-icon{ color:var(--cg-accent); margin-right:6px; vertical-align:middle; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:all .6s ease; }
.reveal.revealed{ opacity:1; transform:none; }

/* Keep existing */
.navbar .material-icons { vertical-align: middle; }
.loader-overlay { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.7); z-index: 2000; }
.shimmer-card { border-radius: 1rem; background: #fff; padding: 1rem; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.shimmer-title, .shimmer-line { height: 14px; background: linear-gradient(90deg,#eee,#f5f5f5,#eee); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; }
.shimmer-title { width: 40%; margin-bottom: 10px; height: 18px; }
.shimmer-line { width: 60%; margin-bottom: 8px; }
@keyframes shimmer { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }
.card { border: 0; border-radius: 1rem; }

/* Toasts (already added) */
.cg-toast{ position: fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); opacity:0; padding:12px 16px; border-radius:12px; background:#111; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.15); z-index:3000; transition: all .25s ease; }
.cg-toast.ok{ background:#111; }
.cg-toast.error{ background:#b00020; }
.cg-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }




/* Softer feature cards inside the banner */
.bg-illustrated .feature-card{
  background:#fff;
  border:1px solid #eef1ff;
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.bg-illustrated .feature-icon{ color:var(--cg-accent); }


footer h6, footer h5 { color:#454a55; }
footer ul li { margin-bottom: .5rem; }
footer a:hover { text-decoration: underline; }

.form-control:focus{
	box-shadow:none;
}



/* Coin icon sizes */
.coin-24{ width:44px; height:44px; object-fit:contain; }
.coin-16{ width:16px; height:16px; object-fit:contain; }

/* Type chips */
.chip{
  cursor: pointer;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:.85rem; font-weight:600;
  border:1px solid transparent; background:#f5f6fa; color:#333;
}
.chip-icn{ font-size:18px; line-height:1; vertical-align:-3px; }

.chip-deposit{ 
  background:#e9f9ef; 
  color:#106a2b; 
  border-color:#c6f0d2;

}     

/* greenish */
.chip-withdrawal{ background:#ffefef; color:#8a1f1f; border-color:#ffd4d4; }   /* red-ish */
.chip-trade{ background:#eef5ff; color:#1b4f9b; border-color:#d8e8ff; }        /* blue-ish */
.chip-fee{ background:#f1f1f3; color:#4a4a4a; border-color:#e5e5e8; }          /* gray-ish */



/* Dashboard sidebar */
.nav-link {
  color: #333;
  display: flex; align-items: center;
  font-weight: 500;
}
.nav-link .material-icons { font-size:20px; }
.nav-link:hover, .nav-link.active {
  background:#f5f7fa;
  border-radius:8px;
  color:#111;
}


.card-body{
	min-height: 100px;
}

/* Truncate long wallet addresses inside cards */
.card .card-body code {
  display: inline-block;
  max-width: 234px;   /* adjust as needed */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}



/* Slide-in drawer + overlay */
/* prevent background scroll while a drawer is open */
body.no-scroll { overflow: hidden; }


.cg-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:2000;
}
.cg-overlay.show{ opacity:1; pointer-events:auto; }


/* drawer responsiveness + safe-area */
.cg-drawer{
  position:fixed; top:0; right:0; height:100dvh; /* better on mobile */
  width:420px; max-width:90vw;
  background:#fff; box-shadow: -20px 0 40px rgba(0,0,0,.15);
  transform: translateX(100%); transition: transform .3s ease; z-index:2001;
  display:flex; flex-direction:column;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.cg-drawer.show,.cg-drawer.open{ transform: translateX(0); }
 
.cg-drawer-header{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  padding:12px 16px; border-bottom:1px solid #eef1f4;
}
.cg-drawer-header .btn-close{ grid-column: 3; }



/* Drawer header: title left, close button right */
.cg-drawer-header{
  padding:12px 16px;
  border-bottom:1px solid #eef1f4;
}

/* Bigger centered QR */
.deposit-qr{
  width: 240px;
  height: 240px;
  border-radius: 16px;
  background:#fff;
  image-rendering: crisp-edges;
}

/* Responsive: shrink QR on small screens */
@media (max-width: 480px){
  .deposit-qr{ width: 200px; height: 200px; }
}

/* Keep address truncation neat under QR too */
#depositAddress{
  display:inline-block;
  max-width: 100%;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cg-drawer-header h5{ font-weight: 700; }

code {
    font-size: .875em;
    color: #198754;
    word-wrap: break-word;
}



.fiat-est-box{
  width: 100%;
  display:inline-block;
  padding:14px 18px;
  border-radius:14px;
  background: #eaf7f0;      /* soft green or swap to #eaf1ff for blue */
  border: 1px solid #d7efdf; /* matching border */
  font-weight: 700;
  font-size: 1.1rem;
}



/* Send drawer fiat estimate */
.fiat-est-box{
  display:inline-block;
  min-width: 260px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #e8f6f0;           /* soft green */
  border: 1px solid #d3eee4;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.fiat-est-title{
  font-size: .85rem;
  color: #2d6a4f;
  margin-bottom: 4px;
}
.fiat-est-value{
  font-size: 1.4rem;
  font-weight: 700;
  color: #1b4332;
}

/* Hide number spinners just in case (some browsers still show them) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.coin-20, .pm-20 { width:20px; height:20px; object-fit:contain; vertical-align:-3px; }

.send-progress { background:#f7f9fc; border:1px solid #eef1f4; border-radius:12px; padding:12px; }
.send-progress .sp-row { display:flex; align-items:center; gap:8px; padding:6px 4px; }
.send-progress .sp-icon { font-size:20px; color:#98a1b2; }
.send-progress .sp-row.is-active .sp-icon { animation: cg-spin 1s linear infinite; }
.send-progress .sp-row.is-done .sp-icon { color:#16a34a; } /* green */
.send-progress .sp-row.is-done .sp-icon::before { content:''; }
@keyframes cg-spin { 
  from{ transform:rotate(0deg); 
  } to { transform:rotate(360deg); } }

.pm-icon{ width:22px; height:22px; object-fit:contain; }
.coin-24{ width:30px; height:30px; object-fit:contain; }
#sellFiatBox, .fiat-est-box{ font-weight:600; }
.coin-16{ width:16px; height:16px; object-fit:contain; }

/* Mini market card */
.market-card{ border-radius:1rem; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.market-card .hdr{ display:flex; align-items:center; gap:.75rem; }
.coin-32{ width:32px; height:32px; object-fit:contain; }

.fiat-est-box{ display:inline-block; padding:.6rem .9rem; border-radius:12px; background:#eef8f1; }
.fiat-est-box.big{ display:inline-block; padding:1rem 1.25rem; font-size:1.45rem; background:#eef7ff; border:1px solid #dbe9ff; border-radius:14px; }

/* Instructions list */
.sell-steps li{ margin-bottom:.35rem; }

/* Chart container height */
#sellChart{ width:100%; height:220px; }

/* disable number spinners weirdness */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Chart sizing without resize loops */
.chart-wrap{
  position: relative;
  height: 220px; /* fixed height for the chart area */
  width: 100%;
}

#sellChart{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

img.pm-24 {
    width: 24px;
}

.pm-icon { width: 28px; height: 18px; object-fit: contain; }
.market-card .chart-wrap { height: 180px; }

span.input-group-text .material-icons {
    color: #0c6efc;
}



#pmStepChoose button.btn.w-100.btn-outline-secondary.p-3.text-start {
    min-height: 180px;
}


.investment-package span.badge.text-bg-light {
    width: 100%;
    font-size: 19px;
    display: block;
}

.investment-info .fw-bold{
  font-size: 18px;
}

#txTypeIcon{
  width: 100px;
  height: 100px;
  padding-top: 25px;
  border-radius: 50px;
  border: 1px solid;
  margin:auto;
}




/* Make the quick-actions breathe a bit inside the UL */
.navbar .cg-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
}

.navbar .cg-qa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  border-radius: 14px;
  padding: .85rem .5rem;
  min-height: 74px;            /* steady tap target */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  color: inherit;
}

.navbar .cg-qa .material-icons {
  font-size: 22px;
  line-height: 1;
  margin-bottom: .35rem;
  opacity: .85;
  transition: transform .12s ease, opacity .12s ease;
}

.navbar .cg-qa small {
  font-weight: 600;
  letter-spacing: .2px;
  font-size: .75rem;
  text-align: center;
  white-space: nowrap;
}

.navbar .cg-qa:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
}

.navbar .cg-qa:hover .material-icons {
  transform: scale(1.08);
  opacity: 1;
}

/* Keep this mobile-only (the li itself is already d-lg-none, but belt-and-suspenders) */
@media (min-width: 992px) {
  .navbar .cg-quick-actions { display: none; }
}
@media (max-width: 380px) {
  .navbar .cg-quick-actions { grid-template-columns: repeat(3, 1fr); }
}



/* Global font */
html, body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
}

/* Section reveals */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Soft badges */
.badge.bg-soft {
  background: rgba(0,0,0,.06);
  color: #222;
}

/* “Feature cards” & hover */
.feature-card {
  background: #fff;
  border-radius: 16px;
  padding: .9rem 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.feature-icon {
  background: #eef3ff;
  border-radius: 12px;
  padding: .4rem;
}

/* Hero buttons */
.btn-hero {
  background: linear-gradient(135deg, #4254ff, #6e46ff);
  border: 0;
  color: #fff;
}
.btn-outline-hero {
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

/* Subtle floating shadow for hero image */
.shadow-hero {
  box-shadow: 0 28px 60px rgba(0,0,0,.18);
  border-radius: 22px!important;
}

/* Minimal parallax-ish sections */
.parallax {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

/* Section dividers */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
  margin: 2.5rem 0;
}



.invest-card {
  background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
  border: 1px solid #eef0f4;
}
.invest-subtitle {
  color: #6b7280;
  font-size: .95rem;
}
.underline-anim {
  position: relative;
  height: 3px;
  background: #e5e7eb;
  overflow: hidden;
  border-radius: 3px;
}
.underline-anim::after {
  content: "";
  position: absolute; left: -30%;
  top: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, #6366f1, transparent);
  animation: underline-slide 2.2s linear infinite;
}
@keyframes underline-slide {
  0%   { left: -30%; }
  100% { left: 100%; }
}



/* Market Prices */
.mp-spark-wrap{
  height: 42px;
  width: 100%;
  position: relative;
}
#mpTable tbody tr{
  transition: background-color .2s ease, transform .12s ease;
}
#mpTable tbody tr:hover{
  background: #f8f9fa;
  transform: translateY(-1px);
}
.badge.bg-success-subtle{ background: rgba(25,135,84,.12)!important; }
.badge.bg-danger-subtle{ background: rgba(220,53,69,.12)!important; }


.app_logo{
  width: 24px;
  margin-right: 15px;
}
.app_logo img{
  width: 100%;
}