/* -------------------------------------------------------- */
/*  ENDOPAY – DUAL-THEME (dark-first)
/* -------------------------------------------------------- */
:root{
  /* ---- dark tokens (default) ---- */
  --bg:#0a0e1a;
  --card:#121824;
  --muted:#8a9bb2;
  --accent:#006859; /*#00d1b2;*/
  --danger:#ff4757;
  --text:#e6eef7;
  --border:rgba(255,255,255,.08);
  --shadow:rgba(0,0,0,.35);
  --radius:10px;
  --font:'Montserrat',system-ui,Segoe UI,Roboto,Helvetica,Arial;
  --mono:Roboto,monospace;
}

/* ---- light tokens ---- */
@media (color-scheme:light){
  :root{
    --bg:#f4f7fc;
    --card:#ffffff;
    --muted:#596778;
    --accent:#006e60;
    --danger:#d63031;
    --text:#1c2128;
    --border:rgba(0,0,0,.08);
    --shadow:rgba(0,209,178,.15);
  }
}



/* allow manual override via data-theme */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
html[data-theme="light"]{
  --bg:#f4f7fc;
  --card:#ffffff;
  --muted:#596778;
  --accent:#006e60;
  --danger:#d63031;
  --text:#1c2128;
  --border:rgba(0,0,0,.08);
  --shadow:rgba(0,209,178,.15);
}

/* ---------- global reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100vh;font-family:var(--font);background:var(--bg);color:var(--text);transition:background .3s,color .3s}
input,select,option,optgroup,div,span,td,th,button,p,a{font-family:var(--font);}
a{color:inherit;text-decoration:none}

/* ---------- navbar ---------- */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 2rem;
  color: var(--text);
  background:var(--card);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 6px var(--shadow);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.navbardiv{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.context-header {
  --fill: rgb(255, 255, 255);
}
.logo-container{display:inline-block;align-items:center;gap:1rem}
#logoSvg{width:auto;height:40px;fill:var(--text)}
.logo-description{font-size:.75rem;color:var(--muted)}
#svg_1, #logoTextSvg {
  fill: var(--text) !important;
}
.logoDesc{
  color: var(--text) !important;
}
svg {
  min-width: 251px;
  margin: 0;
}
.logo-description {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.7);
}
.nav-links{
  display:flex;
  gap:.5rem;
  list-style:none;
}
.nav-links a,.nav-links span,.nav-links .link-btn{
  padding:.5rem .75rem;
  border-radius:var(--radius);
  transition:background .2s;
  cursor:pointer;
  background:transparent;
  border:none;
  color:var(--text);
}
.nav-links a:hover,.nav-links .active{background:var(--accent);color:#fff}

.dropdown{position:relative}
.dropdown-menu{
  position:absolute;
  top:100%;right:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  display:none;
  flex-direction:column;
  min-width:160px;
  padding:.5rem 0;
  z-index:20;
  box-shadow:0 4px 12px var(--shadow);
}
.dropdown:hover .dropdown-menu{display:flex}
.dropdown-menu a{padding:.5rem 1rem;font-size:1rem;color:var(--text)}
.dropdown-menu a:hover{background:var(--accent);color:#fff}

/* ---------- hamburger (mobile) ---------- */
.hamburger{display:none}
@media(max-width:768px){
  .desktop-nav{display:none}
  .hamburger{display:block}
}
.menuToggle{position:relative}


/* Hamburger Menu (Mobile) */
.hamburger {
  display: none; /* Hidden by default on larger screens */
}

.menuToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
}

#top-name {
  font-size: 1.5em;
  font-weight: bold;
}

.menuToggle input {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
}

.menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: var(--text);
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
  opacity 0.55s ease;
}

.menuToggle span:first-child {
  transform-origin: 0% 0%;
}

.menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/* Transform all 3 lines to an X */
.menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: var(--text);
}

/* Hide the middle line */
.menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/* Rotate the bottom line */
.menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

.menuToggle input:checked ~ .menuItem {
  transform: translateX(0);
}

.menuItem {
  position: fixed;
  top: -8px;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  color: var(--text);
  list-style-type: none;
  padding-top: 60px;
  margin: 0;
  padding-left: 20px;
  -webkit-font-smoothing: antialiased;
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}


#menuItemCheckBox{position:absolute;width:32px;height:32px;opacity:0;cursor:pointer}
.menuItem{list-style:none;padding:1rem 0;display:flex;flex-direction:column;gap:.75rem;background:var(--card);border-radius:var(--radius);margin-top:.5rem;padding-top: 3rem;padding-bottom: 3rem;margin-bottom: 3rem;}
.menuItem a,.menuItem li{padding:.5rem 1rem;border-radius:var(--radius);color:var(--text)}
.menuItem .active{background:var(--accent);color:var(--text);font-weight:700}
.menuItem > .active {color: var(--text) !important;}
.menuItem li {padding: 10px 15px;font-size: 22px;}
.menuMain {cursor: pointer;}

/* ---------- layout ---------- */
.content-wrapper{display:grid;grid-template-columns:1fr 340px;gap:1.5rem;padding:1.5rem;max-width:1400px;margin:auto}
@media(max-width:900px){.content-wrapper{grid-template-columns:1fr}.logo-container{margin: 20px;}.nav-links{margin:10px 20px;padding-bottom: 20px;}.navbardiv{background: var(--bg);}.navbar{display:contents}}
.navbardiv,main{display:contents}

/* ---------- left panel ---------- */
.left{display:flex;flex-direction:column;gap:1.5rem}
.crypto-trade-center{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:0 4px 12px var(--shadow)}
#rate-toggle{background:var(--accent);color:#fff;padding:.5rem 1rem;border-radius:var(--radius);font-weight:700;display:inline-block;margin-bottom:1rem;cursor:pointer}
.rateclass{background:var(--card);border-radius:var(--radius);padding:1.25rem;text-align:center}
.crypto-rate-table{display:grid;grid-template-columns:1fr 1fr;gap:1rem;font-size:.9rem}
.fiat-rate{color:var(--accent);font-weight:700}
.slider-control{display:flex;justify-content:space-between;margin-top:.75rem}
.slider-control div{cursor:pointer;padding:.25rem .5rem;border-radius:4px;background:var(--border)}

/* ---------- form ---------- */
.css-w78l2s{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:0 4px 12px var(--shadow)}
.crypto-trade-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.crypto-trade-h6{font-size:1rem;color:var(--muted);letter-spacing:.5px;}
.crypto-h4{font-size:1rem,font-weight:400;}
.crypto-trade-rate-color{color:var(--accent);font-weight:700}
.crypto-trade-range-color{color:var(--muted)}
.select-input,.text-input{width:100%;padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font-size:1.05rem;transition:border-color .2s;height: 3rem;appearance: none;-webkit-appearance: none;-moz-appearance: none;}
.action-select {height: 3rem;}
.select-input:focus,.text-input:focus{outline:none;border-color:var(--accent)}
li{display:flex;}
#preview-modal p, .p10{padding:10px}

/* -------------------------------------------------------- */
/*  LIVE-PRICES CARD  –  dual-theme
/* -------------------------------------------------------- */
#live-prices{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.price-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.5rem .75rem;
  background:var(--border);
  border-radius:6px;
  font-size:.85rem;
}

.price-row .name{
  font-weight:600;
  color:var(--text);
}

.price-row .price{
  font-family:var(--mono);
  font-weight:700;
  color:var(--accent);
}

/* subtle flash on update */
@keyframes flash{
  0%{background:rgba(0,209,178,.15);}
  100%{background:var(--border);}
}
.price-row.updated{animation:flash .4s ease-out}

#form-output:has(> .notification) {
  background-color: var(--bg) !important;
  padding: 20px;
  border-radius: var(--radius);
}

#form-output:not(:has(> .notification)) {
  border-radius: var(--radius);
}

.crypto-trade-buttons{display:flex;gap:1rem;margin-top:1rem}


/* ---------- asset grid ---------- */
.flex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-top:2rem}
.col{text-align:center}
.div-middle-outer{display:inline-block;border-radius:50%;padding:.5rem;background:linear-gradient(135deg,var(--accent) 0%,#00bfa5 100%)}
.div-middle-inner{width:64px;height:64px;border-radius:50%;overflow:hidden}
.div-middle-img{width:100%;height:100%;object-fit:cover}
.div-middle-text{margin-top:.5rem;font-size:1rem;color:var(--muted)}

/* ---------- right aside ---------- */
.right{display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:1.5rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:0 4px 12px var(--shadow)}
.card h3{margin-bottom:.75rem;font-size:1rem;color:var(--muted)}
.rates{display:flex;flex-direction:column;gap:.5rem}
.rate-row{display:flex;justify-content:space-between;padding:.5rem;background:var(--border);border-radius:6px;font-size:1rem}
.promo .small{font-size:.75rem;color:var(--muted)}
.primary-btn{background:var(--accent);color:#fff;border:none;padding:.5rem 1rem;border-radius:var(--radius);font-weight:700;cursor:pointer}
.btn{background:transparent;border:1px solid var(--border);padding:.5rem 1rem;border-radius:var(--radius);cursor:pointer;color:var(--text)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:100;display:none}
.modal-content{background:var(--card);border-radius:var(--radius);padding:1.5rem;max-width:420px;width:90%;box-shadow:0 8px 24px var(--shadow)}
.modal-footer{display:flex;gap:1rem;margin-top:1rem}
#confirm-sale{background:var(--accent);color:#fff;border:none;padding:.5rem 1rem;border-radius:var(--radius);font-weight:700;cursor:pointer}
#cancel-sale{background:transparent;border:1px solid var(--border);padding:.5rem 1rem;border-radius:var(--radius);cursor:pointer;color:var(--text)}

/* ---------- footer ---------- */
footer{text-align:center;padding:2rem 1rem;font-size:1rem;color:var(--muted)}

/* ---------- utilities ---------- */
.hide{display:none !important}

/* -------------------------------------------------------- */
/*  COMMAND-TERMINAL  –  dual-theme
/* -------------------------------------------------------- */
#display-command-trade{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:0 4px 12px var(--shadow);
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/* header toggle */
.toggleheader{
  align-self:flex-start;
  font-size:1rem;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  padding:.25rem .5rem;
  border-radius:4px;
  transition:background .2s;
}
.toggleheader:hover{background:var(--border)}

/* terminal window */
.terminal-wrapper{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  font-family:var(--mono);
  font-size:.9rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

/* output area */
#terminal-output{
  min-height:120px;
  max-height:200px;
  overflow-y:auto;
  padding:.5rem;
  background:#0a0e1a;
  border-radius:6px;
  white-space:pre-wrap;
  line-height:1.4;
  color:#0f0; /*var(--accent);*/
}

.command-text {
  padding: 5px 10px;
}

.command-text > a {
  color: var(--muted) !important;
  text-decoration: underline;
}

/* input line */
#terminal-input{
  display:flex;
  align-items:center;
  gap:.5rem;
}

#terminal-input span{color:var(--muted)}
.command-input{
  flex:1;
  flex-grow: 1;
  padding: 10px;
  background:transparent;
  color:var(--text);
  font-family:var(--mono);
  font-size:1rem;
  outline:none;
  border: 1px solid var(--accent);
  border-radius: 5px;
}

/* prompt + sample commands */
#command-input-section{
  font-size:1rem;
  color:var(--muted);
  margin-bottom:.25rem;
}
#trade-commands h3{
  font-size:1rem;
  color:var(--muted);
  margin-bottom:.5rem;
}
#commands-wrapper{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
#commands-list,#commands-list2{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:0;
}
#commands-list li, #commands-list2 li{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.95rem;
  color:var(--text);
}
.use-sample-btn{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:.25rem .5rem;
  border-radius:4px;
  font-size:.7rem;
  cursor:pointer;
  transition:opacity .2s;
}
.use-sample-btn:hover{opacity:.9}

/* light-mode overrides */
html[data-theme="light"] #terminal-output{background:#0a0e1a;color:#0f0;}
/* -------------------------------------------------------- */
/*  ACTION-BAR  –  dual-theme
/* -------------------------------------------------------- */
.flex-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.75rem 1rem;
  box-shadow:0 2px 6px var(--shadow);
  font-size:.9rem;
}

.flex-row > div:first-child{
  font-weight:700;
  color:var(--text);
  letter-spacing:.5px;
}

.flex-row select{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.5rem .75rem;
  font-size:1rem;
  cursor:pointer;
  transition:border-color .2s;
}

.flex-row select:focus{
  outline:none;
  border-color:var(--accent);
}
/* -------------------------------------------------------- */
/*  PANEL-TOGGLE  –  dual-theme
/* -------------------------------------------------------- */
.panel-toggle{
  display:inline-flex;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:4px;
  gap:4px;
}

.panel-toggle button{
  flex:1;
  padding:.5rem 1rem;
  border:none;
  border-radius:6px;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  color:var(--muted);
  background:transparent;
  transition:background .2s, color .2s;
}

.panel-toggle button.active{
  background:var(--accent);
  color:#fff;
}

/* light-mode fine-tune */
html[data-theme="light"] .panel-toggle button.active{background:var(--accent); color:#fff}

/* -------------------------------------------------------- */
/*  FORM  –  dual-theme ready
/* -------------------------------------------------------- */
/* currency switch */
.switch-label{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  cursor:pointer;
  user-select:none;
}
.switch-checkbox{display:none}
.switch-elements{
  position:relative;
  width:48px;
  height:24px;
  background:var(--border);
  border-radius:12px;
  transition:background .3s;
}
.switch-inner{
  position:absolute;
  top:2px;left:2px;
  width:20px;height:20px;
  background:#fff;
  border-radius:50%;
  transition:transform .3s;
}
.switch-checkbox:checked + .switch-elements .switch-inner{transform:translateX(24px)}
.switch-left,.switch-right{font-size:.65rem;font-weight:700;text-transform:uppercase;position:absolute;top:50%;transform:translateY(-50%)}
.switch-left{left:6px;color:#000}
.switch-right{right:6px;color:var(--muted)}

/* inputs & selects */

.currency-container,.email-container,.password-container{position:relative}
.toggle-password, .toggle-password2, .toggle-currency{
  position:absolute;
  right:1rem;top:50%;
  transform:translateY(-50%);
  font-size:.9rem;
  color:var(--muted);
}
.toggle-currency{
  pointer-events: none;
}
.toggle-password, .toggle-password2{
  cursor: pointer;
}

/* real-time summary */
.crypto-trade-summary{
  background: var(--border);
  border-radius:var(--radius);
  padding:.75rem 1rem;
  font-size:1rem;
  line-height:1.4;
  text-align: center;
}
.crypto-trade-summary b{/*color:var(--accent)*/}

/* bank section */
#bank-info,#bank-info2,#bank-info3{margin-top:.5rem}
#select-bank-name{text-transform:uppercase}
#form-output{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:0 4px 12px var(--shadow);
  display:flex;
  flex-direction:column;
  gap:1rem;
}

#sellForm, #buyForm, #pay4meForm, #sendForm, #receiveForm, #loginForm, #registerForm, #forgotForm, #resetForm{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:0 4px 12px var(--shadow);
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/* checkbox row */
#sell-from-account-label{
  display:flex;
  align-items:center;
  gap:.5rem;
  cursor:pointer;
  font-size:.8rem;
}
#sell-from-account{
  width:18px;height:18px;accent-color:var(--accent);
}

/* proceed button */
.crypto-trade-buttons{
  display:flex;
  justify-content:flex-end;
  margin-top:.5rem;
}

#sell-proceed, #buy-proceed, #send-proceed, #receive-proceed, #pay4me-proceed, #login-proceed, #register-proceed, #forgot-proceed, #reset-proceed{background:var(--accent);color:#fff;border:none;padding:.75rem 2rem;border-radius:var(--radius);font-weight:700;cursor:pointer;transition:opacity .2s;font-size:1.1rem;}
#sell-proceed:disabled, #buy-proceed:disabled, #send-proceed:disabled, #receive-proceed:disabled, #pay4me-proceed:disabled, #login-proceed:disabled, #register-proceed:disabled, #forgot-proceed:disabled, #reset-proceed:disabled{background:var(--muted);cursor:not-allowed;opacity:.6;}

/* feedback link */
#sell-feedback a, #buy-feedback a, #send-feedback a, #receive-feedback a, #pay4me-feedback a, #login-feedback a, #register-feedback a, #forgot-feedback a, #reset-feedback a{color:var(--accent);text-decoration:underline}


:root {
    --background-light: #f5f5f7;
    --text-light: #333333;
    --background-dark: #1c1c1e;
    --text-dark: #ffffff;
    --toggle-light: #FD632F;
    --toggle-dark: #34C759;
}

.cont {
    text-align: center;
}

.toggle {
    position: relative;
    display: inline-block;
}

.toggle-input {
    display: none;
}

.toggle-input:checked + .toggle-label::after {
    left: 32px;
}

.switch-toggle-label {
    display: block;
    width: 60px;
    height: 30px;
    background-color: var(--bg);
    border-radius: 99px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 1px solid var(--border);
}

.toggle-input:checked + .switch-toggle-label::after {
    left: 32px;
}

.switch-toggle-label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    background-color: var(--text);
    border-radius: 50%;
    transition: left 0.3s ease;
}

.toggle-label {
    display: block;
    width: 60px;
    height: 30px;
    background-color: var(--accent);
    border-radius: 99px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 1;
    position: relative;
}

.toggle-label::after {
    content: 'USD'; /* Default state */
}

.toggle-label.is-btc::after {
    content: 'BTC'; /* Changed state */
}

.toggle-label.is-ltc::after {
    content: 'LTC'; /* Changed state */
}

.toggle-label.is-bch::after {
    content: 'BCH'; /* Changed state */
}

.toggle-label.is-eth::after {
    content: 'ETH'; /* Changed state */
}

.toggle-label.is-trx::after {
    content: 'TRX'; /* Changed state */
}

.toggle-label::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    background-color: var(--bg);
    color: var(--text);
    border-radius: 50%;
    transition: left 0.3s ease;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 10px;
    font-weight: 600;
}

/* -------------------------------------------------------- */
/*  EMAIL-SUGGESTION  –  dual-theme
/* -------------------------------------------------------- */
.email-container{position:relative}   /* anchor */

#suggestions{
  position:absolute;
  inset:auto 0 100% 0;          /* flush below input */
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 4px 12px var(--shadow);
  max-height:180px;
  overflow-y:auto;
  z-index:10;
  display:none;                 /* toggled by JS */
  flex-direction:column;
  gap:2px;
  padding:.25rem 0;
}

#suggestions.show{display:flex}

.suggestion{
  padding:.5rem .75rem;
  cursor:pointer;
  font-size:1rem;
  color:var(--text);
  transition:background .15s;
}

.suggestion:hover,
.suggestion.highlight{          /* keyboard hover */
  background:var(--accent);
  color:#fff;
}

/* optional: smooth open */
#suggestions{
  transform-origin:top;
  transition:transform .15s ease-out,opacity .15s;
  transform:scaleY(.95);
  opacity:.9;
}
#suggestions.show{transform:scaleY(1);opacity:1}
/* ---------- RECENT-ALERTS CARD ---------- */
.alerts-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:0 2px 8px var(--shadow);
}
.alerts-title{
  font-size:1.125rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:1rem;
}
.alerts-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

/* single alert row */
.alert-row{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.75rem;
  border-radius:6px;
}
.alert-row.danger {background:rgba(255,71,87,.08)}
.alert-row.warn  {background:rgba(255,184,0,.08)}
.alert-row.info  {background:rgba(0,123,255,.08)}

.alert-dot{
  width:8px;height:8px;
  border-radius:50%;
  margin-top:6px;
  flex-shrink:0;
}
.alert-row.danger .alert-dot{background:var(--danger)}
.alert-row.warn  .alert-dot{background:#ffb800}
.alert-row.info  .alert-dot{background:#007bff}

.alert-content{flex:1}
.alert-head{
  font-size:.875rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:.125rem;
}
.alert-desc{
  font-size:.75rem;
  color:var(--muted);
  line-height:1.4;
}

.order-info {
  margin: 15px 0;
  padding: 10px;
  /* border: 1px solid #ccc; */
  border-radius: 1px; /* 8px */
  background-color: var(--bg);
  text-align: start;
}

.order-info p {
  margin: 8px 0;
  font-size: 16px;
  color: var(--text);
  word-break: break-word;
  display: flex;
  justify-content: space-between;
  text-align: start;
}

.order-info p span {
  text-align: end;
}

.status-display {
  margin:50px 50px 0px;
}

@keyframes statuspulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

.status {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
}

.pending {
  background-color: #ffdd57;
  color: #856404;
  text-transform: uppercase; /*capitalize;*/
  box-shadow: 0 0 4px #999;
  animation: statuspulse 1s infinite;
}

.processing {
  background-color: #4b8ac4;
  color: #fff;
  text-transform: uppercase; /*capitalize;*/
  box-shadow: 0 0 4px #999;
  animation: statuspulse 1s infinite;
}

.completed {
  background-color: #28a745;
  color: #fff;
  text-transform: uppercase; /*capitalize;*/
}

.canceled, .cancelled, .failed{
  background-color: #dc3545;
  color: #fff;
  text-transform: uppercase; /*capitalize;*/
}

span#notice {
  font-size: 14px;
  justify-content: center;
  display: grid;
}

#order-type {
  text-transform: uppercase; /*capitalize;*/
}

table {
  width: 90%;
  border-collapse: collapse;
  margin: 0 auto;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
  color: var(--text);
}

tr {
  /*background-color: #000; */
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--text);
}

th {
  color: var(--text-color-headline);
}

tbody > tr:hover {
  background-color: var(--bg);
  color: var(--text);
}

.pageBtn {
  border-bottom: 1px dashed var(--text-color);
  cursor: pointer;
  color: var(--text-color-headline);
  margin-right: 20px;
}

.pageNo {
  color: #3F4656;
}

.crypto-h5,
.defcolor{
  color: #3F4656;
}

.pageBtnDisabled {
  border-bottom: none;
  cursor: default;
  color: #ccc;
  margin-right: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  padding: 8px 12px;
  margin: 0 5px;
  border: none;
  background-color: var(--bg);
  color: var(--text);
  cursor: pointer;
  border-radius: 4px;
}

.pagination button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}



font {
  color: var(--text);
  font-size: .9rem;
}
.learnmore {
  color: var(--muted);
  font-size: .9rem;
  border-bottom: 1px solid var(--text);
  width: fit-content;
}

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1000;
}

.toast.show {
  opacity: 1;
}

#moreOption {
  text-decoration: none;
  transition: color 0.3s;
  cursor: pointer !important;
}

#moreOption:hover {
  color: #f39c12;
}

.more {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 67px; /*69px;*/
  background-color: var(--accent);
  width: 140px;
  padding: 1em 0;
  z-index: 3;
  cursor: pointer !important;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid var(--accent);
  right: 85px; /*95px;*/
}

.more.active {
  display: flex;
}

.menu li.dropdown.open .caret {
  border-top-color: blue;
  border-bottom-color: blue;
}
.menu {
  float: right;
  list-style: none;
  margin: 5px 0 0 0;
}
.menu > li.dropdown {
  display: inline;
  /*padding: 0 10px 0 20px;*/
}

.menu a {
  color: #898989;
}

.menu .dropdown .dropdown-menu:after {
  position: absolute;
  top: -7px;
  right: 0px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  content: '';
}

.caret{
  display:inline-block;
  width:0;
  height:0;
  margin-left:2px;
  vertical-align:middle;
  border-top:4px solid;
  border-right:4px solid transparent;
  border-left:4px solid transparent;
}

.dropdown{
  position:relative;
}

.dropdown-menu{
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: right;
  min-width: 185px;
  padding: 5px 0;
  margin: 25px 40px 0 -108px;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: var(--accent);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.dropdown-menu > li {
  display: block;
  padding: 5px;
}

.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #f8f8f8;
  white-space: nowrap;
  text-decoration: none;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{
  color: var(--accent);
  text-decoration: none;
  background-color: #f5f9ff;
}

.open > .dropdown-menu{
  display:block
}

.open > a{
  outline: 0
}




/* --- Modals --- */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  color: #fff;
}

.modal-content {
  background-color: rgb(10, 13, 16);
  padding: 20px;
  border-radius: 8px;
  width: 400px;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.modal-footer button {
  padding: 10px 20px;
  cursor: pointer;
}

#confirm-sale {
  background-color: #4CAF50;
  color: white;
  border: none;
}

#cancel-sale {
  background-color: #f44336;
  color: white;
  border: none;
}

.loader-modal-content {
  background-color: var(--card);
  padding: 30px 40px;
  border-radius: var(--border);
  box-shadow: var(--shadow);
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 15px;
}

.loader-modal-content::before {
  content: '';
  border: 4px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Status Bar --- */
#status {
  color: var(--text);
  background-color: #e6eefd;
  border: 1px solid var(--border);
  position: fixed;
  bottom: 20px; /* Adjusted for better visibility */
  left: 20px; /* Placed on the left for a modern touch */
  padding: 10px 15px;
  border-radius: var(--radius);
  border-bottom-left-radius: 0; /* Only top-right */
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  font-size: 0.9em;
  box-shadow: var(--shadow);
  z-index: 99999;
}




@media (max-width: 768px) {
  .navbardiv {
    align-items: center;
    flex-direction: row; /* Keep logo and description in a row */
    justify-content: space-between;
  }

  .logo-container {
    gap: 10px;
    flex-grow: 1;
  }

  #logoSvg {
    width: 120px;
    height: 30px;
  }

  #logoTextSvg {
    font-size: 32px;
  }

  .logo-description {
    display: none; /* Hide on very small screens to save space */
  }

  .content-wrapper {
    margin-top: 80px;
    padding: 0 10px;
  }

  .nav-links#top-navbar {
    display: none; /* Hide desktop nav links */
  }

  .hamburger {
    display: block;
    width: 100%;
    cursor: pointer;
    top: 0;
    z-index: 5;
    position: fixed;
  }

  .hamburger span {
    background-color: var(--text);
    height: 3px;
    width: 25px;
    margin: 4px 0;
    margin-bottom: 4px;
    transition: 0.3s;
  }
  .menuToggle span {
    position: relative;
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    background: var(--text);
    border-radius: 3px;
    z-index: 5;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }

  .navbar, .css-125izb9 {
    display: none;
  }

  .menuToggle {
    display: block;
    position: relative;
    z-index: 4;
    background-color: var(--bg);
    color: var(--text);
    padding: 20px;
    -webkit-user-select: none;
  }

  #top-name {
    width: calc(100% - 65px);
    justify-content: center;
    display: flex;
    top: 23px;
    position: absolute;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--text);;
  }

  .menuToggle input {
    display: block;
    width: 40px;
    height: 40px;
    margin: 20px;
    position: absolute;
    top: -7px;
    left: 0;
    cursor: pointer;
    opacity: 0;
    z-index: 6;
    -webkit-touch-callout: none;
  }


  .flex-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
  }

  .div-middle-outer {
    width: 60px;
    height: 60px;
  }

  .div-middle-inner {
    width: 45px;
    height: 45px;
  }

  .div-middle-text {
    font-size: 0.9em;
  }

  #commands-wrapper {
    flex-direction: column; /* Stack command lists on small screens */
    gap: 10px;
  }

  #status {
    bottom: 10px;
    left: 10px;
    padding: 8px 12px;
    font-size: 0.8em;
  }

  .modal-content {
    padding: 20px;
  }

  .modal-footer {
    flex-direction: column;
    gap: 8px;
  }

  .modal-footer button {
    width: 100%;
  }

  .crypto-rate-table {
    flex-direction: column; /* Stack items vertically */
  }

  .crypto-trade {
    padding: 0; /*15px;*/
  }

  .crypto-trade-buttons button {
    width: 100%;
  }

  .crypto-sell-rate,
  .crypto-buy-rate {
    width: 100%; /* Full width on mobile */
  }

  .display-trade {
    padding: 0 !important;
  }
}

@media (max-width: 600px) {
  .crypto-trade-head {
    display:contents;
  }
  #form-output {
    padding:0;
  }
  #historyForm h4.crypto-h4, #receiveForm h4.crypto-h4 {
    margin: 10px 30px;
  }
  #historyForm h6.crypto-trade-h6, #receiveForm h6.crypto-trade-h6{
    margin: 20px 30px;
  }
  #historyForm .crypto-trade-select, #receiveForm .crypto-trade-select {
    padding: 10px 30px;
  }
  .status-display {
    margin:50px 10px 0px;
  }
}


#display-trade-summary.updated {
  background: rgba(0,123,255,.08); /*#e0ffe0;*/
}

.sell-fiat-rate.updated, .buy-fiat-rate.updated {
  background: rgba(0,123,255,.08); /*#e0ffe0;*/
  padding: 2px 5px;
}