/* Set everything to auth pages */
body.auth{
    min-height:100vh;
    color:var(--brand-900);
    background:#fff;
    display:flex;
    height: 100vh;
    overflow: hidden
}

/* two-panel layout */
.auth-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    min-height:100vh;
    height:100%
}

/* panels */
.auth-left,.auth-right{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    height: 100vh;
}

.auth-left{
    background:#f7f9ff;
    text-align:center;
    grid-column: 1;
    padding:clamp(2rem,5vw,4rem)
}

.auth-right { 
    grid-column: 2; 
    width:100%;height:100%;
    background-image:var(--auth-image);
    background-size:cover;background-position:center
}

.auth-card.is-reversed .auth-left  { 
    grid-column: 2; 
}

.auth-card.is-reversed .auth-right { 
    grid-column: 1; 
}

.brand-title{
    font-size:clamp(28px,2.5vw,40px);
    color:var(--text-700)
}

.brand-sub{
    color:var(--text-500);
    margin-bottom:16px
}

.auth-heading{
    font-size:clamp(18px,1.8vw,22px);
    margin:12px 0 20px
}

.auth-form{
    width:100%;
    max-width:420px;
    display:grid;
    gap:12px;
    text-align:left
}

.role-options {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}

.role-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.auth-right--dog {
  background-image: url("../images/login_Dog_photo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.auth-link-row {
  margin-top: 8px;
  text-align: right;
}

.auth-link {
  font-size: 0.95rem;
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
}