/* ─────────────────────────────────────────
   LOGIN / REGISTER — The Circle Stacciolla
   ───────────────────────────────────────── */

.fe-login {
  background: var(--fe-cream);
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 5% 80px;
}

.fe-login__wrapper {
  width: 100%;
  max-width: 480px;
}

/* ── Brand (grifo + tagline) ──────────── */

.fe-login__brand {
  text-align: center;
  margin-bottom: 32px;
}

.fe-login__grifo {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
}

.fe-login__grifo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fe-login__tagline {
  display: block;
  font-family: var(--fe-font-body);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--fe-gold);
}

/* ── Card ─────────────────────────────── */

.fe-login__card {
  background: var(--fe-white);
  border: 1px solid var(--fe-border);
  padding: 3rem;
}

/* ── Tabs ─────────────────────────────── */

.fe-login__tabs {
  display: flex;
  position: relative;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--fe-border);
}

.fe-login__tab {
  flex: 1;
  background: none;
  border: none;
  font-family: var(--fe-font-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fe-warm-gray);
  padding: 0 0 14px;
  cursor: pointer;
  transition: color var(--fe-transition);
}

.fe-login__tab--active {
  color: var(--fe-black);
}

.fe-login__tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50%;
  height: 2px;
  background: var(--fe-gold);
  transition: left 0.3s ease;
}

/* ── Views ────────────────────────────── */

.fe-login__view {
  display: none;
}

.fe-login__view--active {
  display: block;
}

.fe-login__title {
  font-family: var(--fe-font-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--fe-black);
  margin: 0 0 28px;
  text-align: center;
}

/* ── Form ─────────────────────────────── */

.fe-login__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fe-login__field {
  display: flex;
  flex-direction: column;
}

.fe-login__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.fe-login__label {
  font-family: var(--fe-font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fe-warm-gray);
  margin-bottom: 8px;
}

.fe-login__input {
  width: 100%;
  font-family: var(--fe-font-body);
  font-size: 0.9rem;
  color: var(--fe-black);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--fe-border);
  padding: 12px 0;
  outline: none;
  transition: border-color var(--fe-transition);
  border-radius: 0;
  -webkit-appearance: none;
}

.fe-login__input::placeholder {
  color: var(--fe-warm-gray);
  opacity: 0.5;
}

.fe-login__input:focus {
  border-bottom-color: var(--fe-gold);
}

.fe-login__input--error {
  border-bottom-color: var(--fe-error);
}

/* ── Errors ───────────────────────────── */

.fe-login__error {
  display: block;
  font-family: var(--fe-font-body);
  font-size: 0.75rem;
  color: var(--fe-error);
  min-height: 0;
  margin-top: 4px;
}

.fe-login__error:empty {
  display: none;
}

.fe-login__error--global {
  text-align: center;
}

/* ── Checkbox ─────────────────────────── */

.fe-login__row {
  display: flex;
  flex-direction: column;
}

.fe-login__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.fe-login__check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--fe-gold);
  cursor: pointer;
}

.fe-login__check span {
  font-family: var(--fe-font-body);
  font-size: 0.8rem;
  color: var(--fe-warm-gray);
  line-height: 1.5;
}

.fe-login__check a {
  color: var(--fe-gold);
  text-decoration: none;
}

.fe-login__check a:hover {
  text-decoration: underline;
}

/* ── Button ───────────────────────────── */

.fe-login__btn {
  width: 100%;
  font-family: var(--fe-font-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fe-cream);
  background: var(--fe-black);
  border: none;
  padding: 16px;
  cursor: pointer;
  transition: background var(--fe-transition);
  margin-top: 8px;
}

.fe-login__btn:hover {
  background: var(--fe-charcoal);
}

.fe-login__btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ── Forgot password ──────────────────── */

.fe-login__forgot {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-family: var(--fe-font-body);
  font-size: 0.75rem;
  color: var(--fe-warm-gray);
  text-decoration: none;
  transition: color var(--fe-transition);
}

.fe-login__forgot:hover {
  color: var(--fe-gold);
}

/* ── Social Login (Google) ────────────── */

.fe-login__social {
  margin-top: 16px;
}

/* Force all NSL wrappers to be full-width blocks */
div.nsl-container.nsl-container-block-fullwidth,
div.nsl-container.nsl-container-block-fullwidth .nsl-container-buttons,
div.nsl-container.nsl-container-block-fullwidth .nsl-container-buttons a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

div.nsl-container.nsl-container-block-fullwidth .nsl-container-buttons {
  padding: 0 !important;
}

/* Override the NSL button to match .fe-login__btn */
.fe-login__social div.nsl-container .nsl-button {
  box-sizing: border-box !important;
  width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--fe-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 16px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1 !important;
  transition: border-color var(--fe-transition) !important;
  cursor: pointer !important;
}

.fe-login__social div.nsl-container .nsl-button:hover {
  border-color: var(--fe-gold) !important;
}

.fe-login__social div.nsl-container .nsl-button-svg-container {
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fe-login__social div.nsl-container svg {
  width: 20px !important;
  height: 20px !important;
}

.fe-login__social div.nsl-container .nsl-button-default div.nsl-button-label-container {
  font-family: var(--fe-font-body) !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--fe-black) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* ── Responsive ───────────────────────── */

@media (max-width: 768px) {
  .fe-login {
    padding: 100px 5% 60px;
  }

  .fe-login__wrapper {
    max-width: none;
    width: 90%;
  }

  .fe-login__card {
    padding: 1.5rem;
  }

  .fe-login__title {
    font-size: 1.6rem;
  }

  .fe-login__input {
    font-size: 16px;
  }

  .fe-login__field-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}