/* Gloss Fitness global designs */


:root{
  --primary:#00B7FF;
  --primary-hover:#0091d6;
  --text:#111111;
  --bg:#f3f4f6;
  --card:#ffffff;

  --radius:.5rem;
  --space-1:.5rem;
  --space-2:1rem;
}

/*  CSS reset  */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }

body{
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
}

/* Text styles */

a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/*  Buttons */

.btn{
  display:inline-block;
  padding:.6rem 1.2rem;
  border-radius:var(--radius);
  font-weight:600;
  text-align:center;
  user-select:none;
  cursor:pointer;
  transition:background .2s,border-color .2s,box-shadow .2s;
}

.btn-primary{
  background:var(--primary);
  color:#fff;
  border:1px solid var(--primary);
}
.btn-primary:hover{ background:var(--primary-hover); }

.btn-outline{
  background:transparent;
  color:var(--primary);
  border:2px solid var(--primary);
}
.btn-outline:hover{
  background:var(--primary);
  color:#fff;
}

/* Form elements */

input,
select,
textarea{
  width:100%;
  padding:.6rem .75rem;
  border:1px solid #ccc;
  border-radius:var(--radius);
  font-size:1rem;
  transition:border-color .2s,box-shadow .2s;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,183,255,.25);
}

/* Utility helpers */
.flex-center{ display:flex; justify-content:center; align-items:center; }
.hide{ display:none !important; }
.mb-1{ margin-bottom:var(--space-1); }
.mb-2{ margin-bottom:var(--space-2); }

@media(max-width:600px){
  .btn{ width:100%; }
}

/* .button  keeps old markup working */

.button{
  /* identical to .btn.btn-primary from auth.css */
  display:inline-block;
  padding:.6rem 1.2rem;
  border:2px solid var(--primary);
  background:var(--primary);
  color:#fff;
  border-radius:.5rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s,transform .1s;
}

.button:hover{ background:var(--primary-hover); }
.button:active{ transform:translateY(1px); }

/* Keep form fields on a good width */

input[type=text],
input[type=number],
input[type=password],
input[type=email],
select{
  max-width:420px;
  width:100%;
}

/* center the standalone field */
input[type=text],
input[type=number],
input[type=password],
input[type=email],
select{
  margin-left:auto;
  margin-right:auto;
}

/* Buttons default to natural width */
.btn,
.btn-primary,
.btn-outline,
.btn-danger{
  display:inline-block;
  width:auto;               /* shrink to fit text */
  padding:.6rem 1.25rem;    /* balanced touch area */
}

#USERNAME{ display:none; }