/* ============ BECOME A HOST (glassmorphism) ============ */
.host-grid {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center;
}
@media (min-width: 768px) { .host-grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }

.host-left .h2 .green { color: var(--primary); }
.host-left p.lead { margin: 1.5rem 0 0; max-width: 28rem; font-size: 1.05rem; line-height: 1.7; color: var(--muted-foreground); }

.host-perks { margin: 2rem 0 0; display: flex; flex-direction: column; gap: .75rem; }
.host-perks li { display: flex; align-items: center; gap: .75rem; }
.host-perks .tick { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--primary); color: #fff; flex: none; }
.host-perks .tick [data-lucide] { width: 14px; height: 14px; }

.host-download {
  margin-top: 2rem; display: inline-flex; align-items: center; gap: .75rem;
  border: 2px solid var(--primary); color: var(--primary); border-radius: 999px;
  padding: .75rem 1.5rem; font-weight: 600; transition: background-color .3s ease, color .3s ease;
}
.host-download:hover { background: var(--primary); color: #fff; }

.host-hero-img { margin-top: 2.5rem; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 3rem 4px 3rem 3rem; box-shadow: 0 20px 40px rgba(14,118,188,.1); display: none; }
@media (min-width: 768px) { .host-hero-img { display: block; } }

/* glass form */
.host-right { position: relative; }
.host-blob { position: absolute; border-radius: 999px; filter: blur(48px); pointer-events: none; }
.host-blob.b1 { top: -2.5rem; right: -1.5rem; width: 14rem; height: 14rem; background: rgba(14,118,188,.5); }
.host-blob.b2 { bottom: 0; left: -2rem; width: 13rem; height: 13rem; background: rgba(140,198,63,.5); }
.host-blob.b3 { top: 33%; left: 25%; width: 10rem; height: 10rem; background: rgba(255,191,43,.4); }

.host-form {
  position: relative; border-radius: 2rem; border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  padding: 1.75rem; box-shadow: 0 25px 60px rgba(14,118,188,.2);
}
@media (min-width: 640px) { .host-form { padding: 2rem; } }
.host-form h3 { font-family: "Cabinet Grotesk", sans-serif; font-weight: 800; letter-spacing: -.02em; font-size: 1.75rem; margin: 0 0 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-family: "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .15em; font-size: .7rem; color: var(--muted-foreground); }

.input, .textarea {
  width: 100%; font-family: inherit; font-size: .95rem; color: var(--foreground);
  background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.7); border-radius: .75rem;
  padding: 0 .9rem; transition: border-color .2s ease, box-shadow .2s ease; outline: none;
}
.input { height: 3rem; }
.textarea { min-height: 110px; padding: .75rem .9rem; resize: vertical; }
.input:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,118,188,.2); }
.input::placeholder, .textarea::placeholder { color: rgba(91,107,120,.7); }
.mt-row { margin-top: 1.25rem; }

.host-form input.highlight,.host-form.textarea.highlight
{
  border: 1px solid var(--danger);
}


.host-submit {
  margin-top: 1.75rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; background: var(--primary); color: #fff; padding: .5rem .5rem; font-size: 1rem; font-weight: 600;
  transition: background-color .3s ease;
}
.host-submit:hover { background: var(--secondary); }
.host-submit:disabled { opacity: .6; cursor: default; }
.host-submit [data-lucide] { transition: transform .2s ease; }
.host-submit:hover [data-lucide] { transform: translate(2px, -2px); }

.agreement-group {
    display: flex;
     align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap; /* Wraps on smaller screens */
}

.agreement-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.agreement-item input {
    margin: 0;
    flex-shrink: 0;
}

.agreement-item label {
    margin: 0;
    cursor: pointer;
}
.signin-content,
.forgot-content {

    transition:
        opacity .4s ease,
        transform .4s ease;

}


.forgot-content {

    position:absolute;

    inset:0;

    opacity:0;

    pointer-events:none;

    transform:translateY(30px);
   
    

}


.auth-footer{
color: var(--muted);
margin-top: 15px;
 text-align: right;
 
}

.auth-front.show-forgot .signin-content {

    opacity:0;

    transform:translateY(-30px);

    pointer-events:none;

}


.auth-front.show-forgot .forgot-content {

    opacity:1;

    transform:translateY(0);

    pointer-events:auto;

}