/* =====================================
   EasyExchange – Clean UI FIX (No visual bugs)
   Paste at END of your CSS file
===================================== */

:root{
  --ee-blue-dark:#0D47A1;
  --ee-blue:#1E88E5;
  --ee-blue-2:#1976D2;
  --ee-soft:#F3F8FF;
  --ee-white:#FFFFFF;
  --ee-text:#0B1B3A;
  --ee-border:#E3EAF5;
}

/* Base */
html, body{ overflow-x:hidden; }
body{
  background: var(--ee-white) !important;
  color: var(--ee-text) !important;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* Remove old green backgrounds that cause ugly contrast */
#body-ctnr, #body-ctnr.dark{
  background: var(--ee-white) !important;
  padding: 18px 0 40px !important;
}

/* Make pages look like modern cards */
.operator_box, .login_box, .form_box, .widget, .box .middle{
  background: var(--ee-white) !important;
  border: 1px solid var(--ee-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.08) !important;
}

/* Fix Start Exchange title */
h1, h2, h3{
  color: var(--ee-blue-dark) !important;
}
#body-ctnr h1{
  border-bottom: 0 !important;
  margin: 10px 0 14px !important;
  padding: 0 !important;
  text-align:center !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
}

/* Make spacing consistent (prevents overlap SEND/RECEIVE) */
.operator_box, .form_box, .login_box{
  padding: 14px !important;
}
.operator_box *{ box-sizing:border-box; }

/* Generic inputs */
input, select, textarea{
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  border: 1px solid var(--ee-border) !important;
  padding: 12px 12px !important;
  outline: none !important;
}

/* --- Dropdowns SEND/RECEIVE (prevent huge shadows + weird spacing) --- */
select{
  background: linear-gradient(135deg, var(--ee-blue), var(--ee-blue-dark)) !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 44px 14px 14px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 18px rgba(13,71,161,.25) !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Add a clean dropdown arrow */
select{
  background-image:
    linear-gradient(135deg, var(--ee-blue), var(--ee-blue-dark)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right 14px center;
  background-size: auto, 18px;
}

/* Labels SEND/RECEIVE */
label{
  display:block !important;
  margin: 10px 0 6px !important;
  font-weight: 800 !important;
  color: var(--ee-blue-dark) !important;
}

/* Fix any floating that causes overlap */
.clearfix::after{ content:""; display:block; clear:both; }

/* Buttons */
.submit, .btn, button, a.button,
input[type="submit"], input[type="button"]{
  background: linear-gradient(135deg, var(--ee-blue), var(--ee-blue-dark)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 22px rgba(13,71,161,.25) !important;
  cursor: pointer !important;
}
.submit:hover, .btn:hover, button:hover, a.button:hover,
input[type="submit"]:hover, input[type="button"]:hover{
  filter: brightness(.95);
}

/* Make Exchange button centered and not too big */
.submit, .btn-success{
  display:block !important;
  width: 100% !important;
  max-width: 340px !important;
  margin: 14px auto 0 !important;
}

/* Sign Up / Log In buttons */
a.signup, a.login{
  background: var(--ee-soft) !important;
  color: var(--ee-blue-dark) !important;
  border: 1px solid var(--ee-border) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
}
a:hover.signup, a:hover.login{
  background: #E7F1FF !important;
}

/* Links */
a{ color: var(--ee-blue-2) !important; }
a:hover{ color: var(--ee-blue-dark) !important; }

/* Tables */
th{
  background: var(--ee-soft) !important;
  color: var(--ee-text) !important;
}

/* Footer */
#footer{
  background: var(--ee-blue-dark) !important;
  color: #fff !important;
}
#footer a{ color:#EAF3FF !important; }
#footer a:hover{ color:#FFFFFF !important; }

/* Mobile tweaks (prevents overflow and weird spacing) */
@media (max-width: 768px){
  #body-ctnr{ padding: 14px 0 30px !important; }
  h1{ font-size: 28px !important; }
  select{ font-size: 15px !important; }
}

/* Optional: improve logo sharpness on mobile */
img{
  image-rendering: -webkit-optimize-contrast;
  backface-visibility:hidden;
  transform: translateZ(0);
}