.site-header{
    background: #000
}

/* ===== Base ===== */
:root{
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --muted-gray: #D4D4D8;

  --ring: rgba(2,132,199,.28);
  --border: #e5e7eb;
  --button: #00C2A8;          /* dark sign-in button */
  --button-text: #ffffff;
  --pill-bg: #0f172a0d;
  --pill-active: #111827;
  --pill-active-text: #ffffff;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(0,0,0,.08);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* ===== Layout ===== */
.auth-wrap{ padding:48px 20px }
.auth-container{
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* left | right */
  gap: 32px;
  align-items: start;
}

/* ===== Left ===== */
.auth-left{ }
.auth-header{ text-align:center; margin: 4px 0 18px }
.auth-header h1{
  font-size:25px; 
  font-weight:700; 
  margin:0 0 6px;
}
.auth-header p{
  margin:0; color:var(--muted); font-size:12.5px;
}

/* Toggle pills */
.auth-toggle{
  display:inline-flex; gap:10px; margin-top:14px; background:var(--pill-bg);
  padding:6px; border-radius:999px;
}
.auth-toggle .tab{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:12px 18px; border-radius:999px; font-weight:500; color:#0f172a;
  font-size: 16px;
}
.auth-toggle .tab.active{
  background:var(--pill-active); color:var(--pill-active-text);
  box-shadow: 0 1px 0 rgba(0,0,0,.06) inset;
}

/* Form */
.auth-form{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
}

.field{ 
    display: block; 
    margin-bottom: 14px 
}

.field > span{
  display: block; 
  font-size: 14px; 
  color: var(--text); 
  margin: 0 0 6px;
}

.field-row{
  display:flex; align-items:center; justify-content:space-between;
}

.field-row .link{ 
    font-size: 16px; 
    text-decoration: none; 
    color:#272727;
    align-self: flex-end;
 }



/* 

Error Messages
*/

/* error styles */
/* existing */
.field.invalid input,
.field.invalid select,
.field.invalid textarea,
.file-drop.has-error { outline: 2px solid #e5484d; outline-offset: 2px; }

/* messages */
.field .error-msg,
.check .error-msg,
.radio-group .error-msg{ color:#e5484d; font-size:12px; margin-top:6px; }

/* checkboxes & radio groups also show as invalid */
.check.invalid,
.radio-group.invalid{ outline: 2px solid #e5484d; outline-offset: 2px; border-radius:8px; padding:8px; }



 /* Base inputs */
input, select, textarea{
  width:100%;
  height:44px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  outline:none;
  transition: box-shadow .15s, border-color .15s;
  font-size:16px;
  font: inherit;
  color: var(--text) !important;
}

/* Same focus ring on all */
input:focus,
select:focus,
textarea:focus{
  border-color:#0284c7;
  box-shadow:0 0 0 4px var(--ring);
}

/* Make selects look like text inputs (no native arrow) */
select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:40px; /* room for custom caret */
  background-color:#fff;
}

/* Hide old IE arrow (harmless elsewhere) */
select::-ms-expand{ display:none; }

/* Optional: pretty caret using a wrapper */
.select{ position:relative; }
.select::after{
  content:"";
  position:absolute; right:12px; top:50%;
  width:10px; height:10px;
  border-right:2px solid #94a3b8;  /* muted */
  border-bottom:2px solid #94a3b8;
  transform: translateY(-50%) rotate(45deg);
  pointer-events:none;
}
.select:focus-within::after{
  border-color:#0284c7;            /* match focus color */
}

/* Placeholder-like style for the first disabled option */
select:required:invalid{ color: var(--muted); }
option[value=""][disabled]{ display:none; }
option{ color: var(--text); }



/* 

Radio buttons */

/* --- Radio group (clean, inline) --- */
.radio-group{
  border:0; padding:0; margin:0 0 22px; width:100%;
}
.radio-group .field-label{
  margin:0 0 12px;
  font-size:14px; font-weight:400; color:#0f172a;
}

/* row that holds the options */
.radio-row{
  display:flex; align-items:center; gap:40px; flex-wrap:wrap;
}

/* each radio */
.radio{
  --size:20px;                     /* circle size */
  display:inline-flex; align-items:center; gap:12px;
  cursor:pointer; user-select:none; line-height:1;
}


.radio.right{
    margin-left: 20px !important;
}

/* hide native but keep accessible */
.radio input{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden;
}

/* custom outer circle */
.radio .control{
  width:var(--size); height:var(--size);
  border-radius:999px; border:2px solid #111827; background:#fff;
  position:relative; transition:border-color .15s, box-shadow .15s;
}

/* inner dot when checked */
.radio input:checked + .control::after{
  content:""; position:absolute; inset:6px; border-radius:999px; background:#111827;
}

/* focus ring consistent with your inputs */
.radio input:focus-visible + .control{
  border-color:#0284c7; box-shadow:0 0 0 4px var(--ring);
}

/* label text */
.radio .label{ font-size:14px; font-weight:500; color:#0f172a }



/* Checkbox
 */
/* Simple native checkbox (bigger) */
.check{
  display:flex;
  align-items:center;
  gap:12px;
  margin:8px 0;
  font-size:14px;
  color:var(--muted, #64748b);
}

.check input[type="checkbox"]{
  /* brand color */
  accent-color: var(--accent, #00C2A8);

  /* make it bigger */
  transform: scale(1.35);
  transform-origin: left center;

  /* keep layout tidy */
  width:18px;            /* base size so gap aligns nicely */
  height:18px;
  margin:0;
}

.check input[type="checkbox"]:focus-visible{
  outline:2px solid #0284c7;
  outline-offset:2px;
}

.check .link{
  color:#0ea5e9;
  text-decoration:underline;
  text-underline-offset:2px;
}




/* File drop */
/* Container */
.file-field{ position:relative }

/* Visually hide the real input but keep it accessible */
.file-input{
  position:absolute !important;
  width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap;
}

/* Styled control */
.file-drop{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:46px;
  border:1px solid var(--border); border-radius:10px;
  background:#fff; color:var(--text); cursor:pointer;
  transition: box-shadow .15s, border-color .15s, background-color .15s;
  user-select:none;
}
.file-drop:hover{ background:#fafafa }
.file-drop:focus-visible{
  outline:none; border-color:#0284c7; box-shadow:0 0 0 4px var(--ring);
}

/* Icon */
.icon-upload{ width:20px; height:20px; color:#111827 }

/* Drag-over state */
.file-field.is-dragover .file-drop{
  border-color:#0284c7; background:#f0f9ff;
  box-shadow:0 0 0 4px var(--ring);
}

/* Selected filename style (optional, applied via JS) */
.file-drop.has-file{ justify-content:flex-start; padding-left:14px }
.file-drop.has-file .icon-upload{ color:#64748b }
.file-drop.has-file .file-text{ font-weight:600; color:#0f172a }






.btn-primary{
  min-width:120px; width: auto; height:44px; border:0; border-radius:10px;
  background:var(--button); color:var(--button-text);
  padding-right: 20px;
  padding-left: 20px;
  font-weight:600; cursor:pointer; margin:6px 0 10px;
  font-size: 15px;
}
.btn-primary:active{ transform: translateY(1px) }

.divider{
  position:relative; margin:8px 0 12px; text-align:center; color:var(--muted);
}
.divider::before, .divider::after{
  content:""; position:absolute; top:50%; width:40%; height:1px; background:var(--border);
}
.divider::before{ left:0 } .divider::after{ right:0 }
.divider span{ background:#fff; padding:0 10px; font-size:14px }

.btn-google{
  width:100%; height:44px; display:flex; align-items:center; justify-content:center;
  gap:10px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer;
}

.btn-google img{ width:18px; height:18px }
.btn-google span{ 
    font-size: 16px;
    font-weight: 600;
 }


/* ===== Right ===== */
.auth-right{
  display:flex; align-items:center; justify-content:center;
  height: 100%;
}

.hero-img{
  width: 100%; 
  height: 100%;
  aspect-ratio: 1 / 1; 
  object-fit: cover;
  border-radius: 18px; 
  background-size: auto 100%;
  box-shadow: var(--shadow);
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .auth-container{
    grid-template-columns: 1fr;
  }
  .auth-right{ order:-1 }      /* image on top on mobile */
  .auth-wrap{ padding:28px 16px }
  .hero-img{ aspect-ratio: 4 / 3 }
  .auth-right{
    display: none
  }
}



/* 


*/

/* Hide/show via [hidden] for smooth a11y */
[hidden]{ display:none !important; }

/* Checkbox line */
.check{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); margin:6px 0 10px; }
.check input{ width:16px; height:16px; }

/* Optional: smaller top margin on panels container */
.panels{ margin-top: 6px; }










/* 

Sign Up
! ##################################

*/


:root{ --accent:#00C2A8; }

/* Stepper */
.stepper{
  display:flex; justify-content:space-between; gap:18px;
  margin:12px 0 10px;
}
.stepper .step{
  appearance:none; background:transparent; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  flex:1; min-width:0;
}
.stepper .dot{
  width: 38px; 
  height: 38px; 
  border-radius: 999px;
  display: grid; 
  place-items: center;
  /* border: 2px solid var(--border);  */
  background: var(--muted-gray); 
  color: var(--button-text);
  box-shadow: none !important;
  font-weight: 700; 
  font-size: 13px;
}

.stepper .label{
  font-size:12px; 
  color:var(--text); 
  text-align:center; 
  white-space:nowrap;
  font-weight: 600;
}
.stepper .step.active .dot{
  background:var(--accent); color:#fff; border-color:var(--accent);
  box-shadow:0 8px 22px rgba(0,194,168,.25);
}
.stepper-track{
  height:4px; background:var(--border); border-radius:999px; position:relative; margin:4px 0 14px;
}
.stepper-progress{
  position:absolute; left:0; top:0; height:100%;
  width:25%; background:var(--accent);
  border-radius:999px; transition:width .35s ease;
}

/* Form title inside card */
.card-title{
  margin:0 0 12px; font-size:16px; font-weight:700; color:#0f172a;
}

/* Panels */
.step-panel[hidden]{ display:none !important }

/* Grids & inputs (extends your existing input styles) */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
select, textarea{
  width:100%; border:1px solid var(--border); border-radius:10px; background:#fff;
  height:44px; padding:8px 12px; outline:none; font-size:16px;
  transition: box-shadow .15s, border-color .15s;
}
textarea{ height:auto; resize:vertical; }

/* Buttons row */
.btn-row{
  display:flex; align-items:center; gap:12px; margin-top:8px;
}
.btn-row .spacer{ flex:1 }

/* Secondary + ghost buttons */
.btn-secondary{
  height:44px; border-radius:10px; padding:0 16px; cursor:pointer;
  border:1px solid var(--border); background:#fff; font-weight:600;
  font-weight:600; cursor:pointer; margin:6px 0 10px;
  font-size: 15px;
}


.btn-ghost{
  height:44px; border-radius:10px; padding:0 18px; cursor:pointer;
  border:1px solid var(--border); 
  background: var(--pill-active); 
  color: var(--button-text);
  font-weight:600; cursor:pointer; margin:6px 0 10px;
  font-size: 15px;
}

.btn-ghost:hover{
  background: var(--pill-active); 
  color: var(--button-text);
}

/* Mobile */
@media (max-width:640px){
  .grid-2{ grid-template-columns:1fr }
  .stepper{ gap:10px }
  .stepper .label{ font-size:11px }
}



/* 

Error Log
! #######################################################################
*/

/* ===== Notices ===== */
.tb-notice{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  margin: 16px 0 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 15px;
  line-height: 1.45;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

.tb-notice__icon{
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 16px;
}

.tb-notice__text{
  color: #0e3a45; /* dark teal text for both variants */
}

.tb-notice__close{
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(0,0,0,.45);
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.tb-notice__close:hover{ background: rgba(0,0,0,.06); }

/* Success (TradeBridge teal vibes) */
.tb-success{
  background: #E9FBF6;                 /* soft mint */
  border-color: #7FE7DC;                /* Light Aqua */
}
.tb-success .tb-notice__icon{
  background: #00C2A8;                  /* Electric Teal */
  color: white;
}

/* Error */
.tb-error{
  background: #FFF1F0;                  /* light red wash */
  border-color: #FFCCC7;
}
.tb-error .tb-notice__icon{
  background: #FF4D4F;                  /* red */
  color: white;
}

/* Small screens */
@media (max-width: 600px){
  .tb-notice{ grid-template-columns: auto 1fr auto; padding: 12px 12px; }
  .tb-notice__text{ font-size: 14px; }
}