/*************************************************
 AI CAPITAL FX – style.css (FINAL)
 iOS Style | Mobile First | Trading UI
**************************************************/

/* ================= ROOT ================= */
:root{
  --bg-main:#0a0f1f;
  --bg-card:#12182b;
  --bg-dark:#0f1629;
  --border:#1f2a44;

  --gold:#f5c56b;
  --gold-soft:#ffe2a3;

  --text-main:#ffffff;
  --text-muted:#9aa4c7;
  --text-success:#38ef7d;
  --text-danger:#ff5c5c;
}

/* ================= RESET ================= */
*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}
html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
body{
  background:var(--bg-main);
  color:var(--text-main);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  font-size:14px;
  line-height:1.5;
}

/* ================= COMMON ================= */
.container{
  padding-left:16px;
  padding-right:16px;
}
.safe-area{
  padding-bottom:100px;
}

.label{
  font-size:12px;
  color:var(--text-muted);
}
.value{
  font-size:22px;
  font-weight:600;
}
.gold{ color:var(--gold); }
.text-success{ color:var(--text-success); }
.text-danger{ color:var(--text-danger); }

/* ================= CARD (iOS STYLE) ================= */
.card-ios{
  background:var(--bg-card);
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  border:1px solid var(--border);
}

/* ================= INPUTS ================= */
input,select,textarea{
  background:#0b1022;
  border:1px solid var(--border);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  width:100%;
}
input::placeholder{
  color:var(--text-muted);
}
input:focus,textarea:focus{
  outline:none;
  border-color:var(--gold);
}

/* ================= BUTTONS ================= */
.btn{
  border-radius:14px;
  padding:10px 14px;
  font-weight:600;
  border:none;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  color:#000;
}
.btn-outline{
  background:transparent;
  border:1px solid var(--gold);
  color:var(--gold);
}
.btn-danger{
  background:var(--text-danger);
  color:#fff;
}

/* ================= ALERT ================= */
.alert{
  border-radius:12px;
  border:none;
  font-size:13px;
}
.alert-warning{
  background:#2a230c;
  color:var(--gold);
}

/* ================= DIVIDER ================= */
.divider{
  height:1px;
  background:var(--border);
  margin:12px 0;
}

/* ================= BOTTOM NAV ================= */
.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:rgba(15,22,41,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-around;
  padding:10px 0 20px;
  z-index:1000;
}
.bottom-nav a{
  text-decoration:none;
  color:var(--text-muted);
  font-size:11px;
  text-align:center;
}
.bottom-nav a.active{
  color:var(--gold);
}
.bottom-nav i{
  display:block;
  font-size:20px;
  margin-bottom:2px;
}

/* ================= MT5 FLOAT BUTTON ================= */
#mt5Btn{
  position:fixed;
  right:16px;
  bottom:110px;
  width:64px;
  height:64px;
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  color:#000;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  z-index:999;
}
#mt5Btn i{
  font-size:20px;
}

/* ================= MT5 MODAL ================= */
.mt5-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:2000;
}
.mt5-modal .card-ios{
  width:100%;
  max-width:480px;
  border-radius:22px 22px 0 0;
}

/* ================= TABLE (ADMIN ONLY) ================= */
.table{
  width:100%;
  color:#fff;
  font-size:13px;
}
.table th{
  color:var(--text-muted);
  font-weight:500;
  border-bottom:1px solid var(--border);
}
.table td{
  border-bottom:1px solid var(--border);
}

/* ================= ADMIN ================= */
.admin-box{
  max-width:420px;
  margin:40px auto;
}
.admin-stat{
  text-align:center;
}
.admin-stat .value{
  font-size:26px;
}

/* ================= UTILITIES ================= */
.text-center{ text-align:center; }
.mt-1{ margin-top:8px; }
.mt-2{ margin-top:16px; }
.mt-3{ margin-top:24px; }
.mt-4{ margin-top:32px; }
.mb-1{ margin-bottom:8px; }
.mb-2{ margin-bottom:16px; }
.mb-3{ margin-bottom:24px; }
.mb-4{ margin-bottom:32px; }

.d-none{ display:none; }
.w-100{ width:100%; }


/* ================= LOADER OVERLAY ================= */
.loader-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,15,31,.72);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5000;
}

.loader-box{
  width:92%;
  max-width:420px;
  text-align:center;
}

.loader-title{
  font-weight:700;
  letter-spacing:.2px;
}

.loader-sub{
  font-size:12px;
  color:var(--text-muted);
  margin-top:6px;
}

.loader-spinner{
  width:56px;
  height:56px;
  margin:14px auto 0;
  border-radius:50%;
  border:3px solid rgba(245,197,107,.22);
  border-top-color: var(--gold);
  animation:spin 0.85s linear infinite;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.loader-bar{
  height:10px;
  border-radius:999px;
  background:#0b1022;
  border:1px solid var(--border);
  overflow:hidden;
  margin-top:14px;
}

.loader-bar > div{
  height:100%;
  width:35%;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  animation:loadbar 1.1s ease-in-out infinite;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}
@keyframes loadbar{
  0%{ transform:translateX(-30%); }
  50%{ transform:translateX(150%); }
  100%{ transform:translateX(-30%); }
}

.mt5-float {
  position: fixed;
  right: 18px;
  bottom: 90px;
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg,#f5c16c,#d9a441);
  color: #111;
  font-weight: 700;
  font-size: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
.mt5-float:hover{
  transform: scale(1.05);
}