/* Shopih Form UX Upgrade - safe global UI polish */
:root{
  --shopih-ink:#0f172a;
  --shopih-muted:#64748b;
  --shopih-line:#dbe4f0;
  --shopih-soft:#f8fafc;
  --shopih-primary:#111827;
  --shopih-blue:#2563eb;
  --shopih-orange:#f59e0b;
  --shopih-green:#16a34a;
  --shopih-red:#dc2626;
  --shopih-shadow:0 16px 36px rgba(15,23,42,.10);
  --shopih-radius:16px;
}

/* Better default forms without breaking layouts */
form .field,
form .admin-field,
form .form-group,
form .input-group{
  margin-bottom:16px;
}

form label{
  font-weight:800;
  color:var(--shopih-ink);
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-bottom:7px;
}

form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
form select,
form textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  border:1px solid var(--shopih-line) !important;
  background:#fff !important;
  border-radius:var(--shopih-radius) !important;
  color:var(--shopih-ink) !important;
  font-size:15px !important;
  min-height:50px;
  padding:0 15px !important;
  outline:none !important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  box-shadow:0 1px 0 rgba(15,23,42,.02) !important;
}

form textarea{
  min-height:120px;
  padding:14px 15px !important;
  line-height:1.6;
}

form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
form select:focus,
form textarea:focus{
  border-color:#93c5fd !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12) !important;
}

form input.is-valid,
form select.is-valid,
form textarea.is-valid{
  border-color:#86efac !important;
  box-shadow:0 0 0 4px rgba(22,163,74,.10) !important;
}

form input.is-invalid,
form select.is-invalid,
form textarea.is-invalid{
  border-color:#fca5a5 !important;
  box-shadow:0 0 0 4px rgba(220,38,38,.10) !important;
}

.field-feedback{
  display:block;
  margin-top:7px;
  font-size:13px;
  font-weight:700;
  color:var(--shopih-muted);
}
.field-feedback.is-error{ color:var(--shopih-red); }
.field-feedback.is-ok{ color:var(--shopih-green); }

.password-field-wrap{
  position:relative;
  width:100%;
  display:block;
}
.password-field-wrap input{
  padding-right:52px !important;
}
.password-toggle-btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:12px;
  background:#f1f5f9;
  color:#334155;
  cursor:pointer;
  transition:.18s ease;
  box-shadow:none !important;
  padding:0 !important;
}
.password-toggle-btn:hover{
  background:#e2e8f0;
  transform:translateY(-50%) scale(1.04);
}
.password-toggle-btn svg{
  width:18px;
  height:18px;
  pointer-events:none;
}

.required-star{
  color:var(--shopih-red);
  font-weight:900;
}

/* Animated buttons project-wide */
button,
.btn,
.btn-main,
.btn-primary,
.btn-light,
.btn-soft,
.admin-btn,
.admin-btn-secondary,
a[class*="btn"],
form button[type="submit"],
input[type="submit"]{
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease !important;
}

button:not(.password-toggle-btn):hover,
.btn:hover,
.btn-main:hover,
.btn-primary:hover,
.btn-light:hover,
.btn-soft:hover,
.admin-btn:hover,
.admin-btn-secondary:hover,
a[class*="btn"]:hover,
form button[type="submit"]:hover,
input[type="submit"]:hover{
  transform:translateY(-2px);
  filter:saturate(1.08);
}

button:not(.password-toggle-btn):active,
.btn:active,
.btn-main:active,
.btn-primary:active,
.btn-light:active,
.btn-soft:active,
.admin-btn:active,
.admin-btn-secondary:active,
a[class*="btn"]:active,
form button[type="submit"]:active,
input[type="submit"]:active{
  transform:translateY(0) scale(.98);
}

button.is-loading,
input[type="submit"].is-loading,
.btn.is-loading{
  position:relative;
  pointer-events:none;
  opacity:.78;
}
button.is-loading::after,
input[type="submit"].is-loading::after,
.btn.is-loading::after{
  content:"";
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  display:inline-block;
  margin-left:9px;
  vertical-align:-2px;
  animation:shopihSpin .75s linear infinite;
}
@keyframes shopihSpin{to{transform:rotate(360deg)}}

/* Auth page polish even if old markup is still present */
.auth-card,
.auth-box,
.login-card,
.register-card{
  overflow:hidden;
}
.auth-card form,
.login-card form,
.register-card form{
  display:grid;
  gap:14px;
}

/* Force old inline login/register forms to become readable */
.auth-card form > label,
.login-card form > label,
.register-card form > label,
.auth-card form > input,
.login-card form > input,
.register-card form > input{
  display:block;
}

/* Admin form polish */
.admin-card form,
.admin-content form,
main form{
  line-height:1.5;
}
.admin-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.admin-card select,
.admin-card textarea{
  background:#fbfdff !important;
}

/* Small screens */
@media(max-width:760px){
  form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  form select,
  form textarea{
    min-height:48px;
    font-size:14px !important;
  }
  .password-toggle-btn{width:36px;height:36px;}
}