/*
 * Auth screens (login, register, forgot/reset password, 2FA).
 *
 * Two jobs:
 *  1. A visible way back to the landing page. There was none — once you landed
 *     on /login the only links were to /register and the password reset.
 *  2. Make the blue side panel speak the same language as the landing hero:
 *     same gradient, same 40px grid, same glow, same eyebrow pill, same white
 *     cards. It was a flat blue block with floating emoji sitting on top of the
 *     copy.
 *
 * Loaded from layouts/guest.blade.php, so every auth screen picks it up and
 * they cannot drift apart from each other.
 *
 * .hero-section-login, .task-card-login, .avatar-login, .welcome-badge,
 * .hero-title and .hero-subtitle are only used by the auth views now — the
 * landing hero was rebuilt on its own .masthead classes — so overriding them
 * here cannot reach the public site.
 */

/* ============================================================
   Back to the landing page
   ============================================================ */

/*
 * A solid chip rather than plain text: on login the panel is on the left and
 * this sits on dark blue, on register the panel is on the right and it sits on
 * white. One treatment has to read on both, and below 992px the panel is
 * hidden entirely and the whole screen is white.
 */
.auth-back {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem 0.55rem 0.8rem;
  border: 1px solid rgba(32, 94, 163, 0.15);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(10, 26, 48, 0.14);
  color: var(--primary, #205ea3);
  font-family: 'Outfit', 'Roboto', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.auth-back:hover,
.auth-back:focus {
  transform: translateX(-2px);
  box-shadow: 0 10px 26px rgba(10, 26, 48, 0.2);
  color: var(--primary, #205ea3);
  text-decoration: none;
}

.auth-back svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.auth-back:hover svg {
  transform: translateX(-2px);
}

.auth-back:focus-visible {
  outline: 2px solid var(--primary, #205ea3);
  outline-offset: 3px;
}

@media (max-width: 575.98px) {
  .auth-back {
    top: 0.85rem;
    left: 0.85rem;
    padding: 0.45rem 0.85rem 0.45rem 0.7rem;
    font-size: 0.82rem;
  }
}

/* ============================================================
   Blue side panel — matched to the landing hero
   ============================================================ */

/*
 * The panel centres exactly one child, .auth-panel, which holds the copy, the
 * cards and the footnote. Everything used to be a direct child alongside an
 * empty .header-login sized height:15% + 90px margin, which is what pushed the
 * content below centre. The panel is hidden below 969px by .only-lg, so none
 * of this reaches a phone.
 */
.hero-section-login {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 2.5rem 4rem !important;
  background: linear-gradient(135deg, #1b4f8a 0%, var(--primary, #205ea3) 45%, #2d588a 100%);
  font-family: 'Outfit', 'Roboto', sans-serif;
  isolation: isolate;
}

.hero-section-login .auth-panel {
  width: 100%;
  max-width: 500px;
}

/* The same 40px grid the landing uses. */
.hero-section-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: -2;
  pointer-events: none;
}

.hero-section-login::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px circle at 80% 15%, rgba(87, 167, 115, 0.22), transparent 62%),
    radial-gradient(600px circle at 10% 90%, rgba(133, 168, 207, 0.2), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/*
 * The drifting squares and emoji were landing on top of the heading and the
 * paragraph — the phone emoji sat across "Secure access to your W-9 forms".
 * The gradient and glow above do the same job without covering the copy.
 */
.hero-section-login .bg-shape,
.hero-section-login .floating-icon {
  display: none;
}

/* ---------- Eyebrow ---------- */

.hero-section-login .welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  margin-bottom: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-section-login .welcome-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ee0a1;
  box-shadow: 0 0 0 4px rgba(126, 224, 161, 0.22);
}

/* ---------- Copy ---------- */

.hero-section-login .hero-title {
  margin: 0 0 1rem;
  color: #ffffff;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Same accent the landing headline uses on "IRS Form W-9". */
.hero-section-login .hero-accent {
  color: #9ff0bd;
}

.hero-section-login .hero-subtitle {
  max-width: 30rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* ---------- Benefit list ---------- */

.hero-section-login .auth-list {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.hero-section-login .auth-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.96rem;
  line-height: 1.5;
}

/* Same tick the landing hero draws, so the two pages share the detail. */
.hero-section-login .auth-mark {
  position: relative;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: rgba(126, 224, 161, 0.18);
}

.hero-section-login .auth-mark::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid #9ff0bd;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- Feature cards ---------- */

/* The panel no longer uses a flex gap, so the blocks space themselves. */
.hero-section-login .auth-cards {
  margin-top: 2rem;
}

.hero-section-login .task-card-login {
  display: flex;
  align-items: center;
  padding: 1rem 1.15rem;
  margin-bottom: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 32px rgba(10, 26, 48, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-section-login .task-card-login:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(10, 26, 48, 0.24);
}

.hero-section-login .task-card-login .user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero-section-login .avatar-login {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #eef4fb;
  color: var(--primary, #205ea3);
  font-size: 1.2rem;
}

.hero-section-login .avatar-login svg {
  width: 21px;
  height: 21px;
}

/* The cards are white now, so the text inside them cannot stay white. */
.hero-section-login .task-card-login h4 {
  margin: 0;
  color: var(--dark, #121621) !important;
  font-size: 0.98rem;
  font-weight: 600;
}

.hero-section-login .task-card-login p {
  margin: 0.1rem 0 0;
  color: #6b7280 !important;
  font-size: 0.85rem;
}

/* ---------- Panel footnote ---------- */

/* Anchors the bottom of the panel, the same way the landing hero closes with
   a row of claims under a rule. */
.hero-section-login .auth-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
}

.hero-section-login .auth-foot li {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
}

/* Not a flex container: a <strong> or nested inline would become a flex item
   and the gap would open a hole mid-sentence. Dots via ::after instead. */
.hero-section-login .auth-foot li:not(:last-child)::after {
  content: '·';
  margin-left: 1.1rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- Short viewports ---------- */

/*
 * A 13" laptop is often under 800px of usable height. The panel scrolls rather
 * than clipping, but tightening first means it usually does not have to.
 */
@media (max-height: 1000px) {
  .hero-section-login {
    padding: 2rem 3.5rem !important;
  }

  .hero-section-login .auth-list {
    margin-top: 1.25rem;
  }

  .hero-section-login .auth-cards {
    margin-top: 1.5rem;
  }

  .hero-section-login .auth-foot {
    margin-top: 1.5rem;
  }

  .hero-section-login .task-card-login {
    padding: 0.8rem 1rem;
    margin-bottom: 0.6rem;
  }
}

/*
 * Measured: with everything visible the panel needs ~860px. Between roughly
 * 700 and 860 it was overflowing by up to 37px and scrolling inside itself,
 * which broke the vertical centring and clipped the bottom card. Drop the
 * closing row first — it is the least load-bearing thing in the panel.
 */
@media (max-height: 899.98px) {
  .hero-section-login .auth-foot {
    display: none;
  }

  /* The last few pixels: without this the panel still ran 3-5px over at some
     heights, which is enough to start an internal scrollbar. */
  .hero-section-login {
    padding: 1.75rem 3.25rem !important;
  }
}

@media (max-height: 800px) {
  /* Below this the cards and the list together cannot both fit next to a
     form; the list is the one that repeats what the cards already say. */
  .hero-section-login .auth-list {
    display: none;
  }
}

/* ============================================================
   Single-card screens (forgot / reset password)
   ============================================================ */

/* These have no side panel — the whole viewport is the branded background and
   one card sits in the middle of it. */
/* Symmetric padding: an asymmetric top value to clear the back chip left the
   card sitting ~32px below the true centre, which reads as "not centred". The
   card is short enough that the chip never reaches it. */
.auth-single {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3.5rem 1.25rem !important;
}

.auth-card {
  width: 100%;
  max-width: 27rem;
  padding: 2.5rem 2rem;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(8, 20, 38, 0.28);
  font-family: 'Outfit', 'Roboto', sans-serif;
}

/* Same tile as the cards on the landing, in place of the stock illustration. */
.auth-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.35rem;
  border-radius: 16px;
  background: #eef4fb;
  color: var(--primary, #205ea3);
}

.auth-card-icon svg {
  width: 24px;
  height: 24px;
}

.auth-card-title {
  margin: 0 0 0.5rem;
  color: var(--dark, #121621);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.auth-card-text {
  margin: 0 0 1.75rem;
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* The submit button used to be pushed to the right edge of a narrow card. */
.auth-card .cta-button {
  width: 100%;
  border-radius: 12px;
  font-family: 'Outfit', 'Roboto', sans-serif;
  font-weight: 600;
}

/* Confirmation that the resend worked, in the card's own language rather than
   as a stray line of green text above the button. */
.auth-card-status {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(87, 167, 115, 0.35);
  border-radius: 12px;
  background: rgba(87, 167, 115, 0.1);
  color: var(--second-dark, #157145);
  font-size: 0.85rem;
  line-height: 1.5;
}

.auth-card-status svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 0.15rem;
}

/* A second, quieter action under the primary button — "Log out" on the verify
   screen. Same rule and spacing as .auth-card-back so the card always closes
   the same way. */
.auth-card-secondary {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e8edf3;
}

.auth-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  color: #6b7280;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.auth-card-link:hover,
.auth-card-link:focus {
  color: var(--dark, #121621);
}

.auth-card-link svg {
  width: 15px;
  height: 15px;
}

.auth-card-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e8edf3;
  width: 100%;
  color: var(--primary, #205ea3);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.auth-card-back:hover,
.auth-card-back:focus {
  color: var(--second-dark, #157145);
  text-decoration: none;
}

.auth-card-back svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s ease;
}

.auth-card-back:hover svg {
  transform: translateX(-2px);
}

/* ============================================================
   Form side
   ============================================================ */

/* The heading rendered as uppercase green, which appears nowhere else in the
   product. Match the landing's section titles instead. */
.login-container h2 {
  color: var(--dark, #121621) !important;
  font-family: 'Outfit', 'Roboto', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
}

.login-container .subtitle {
  color: #6b7280;
  font-size: 0.95rem;
}

/*
 * admin_custom.css only sets min-width: 300px, and the box is shrink-to-fit
 * inside a centring flex column — so the login form rendered 300px wide inside
 * a 960px column, which is what made that half of the screen look abandoned.
 * Only from the width where the blue panel appears; below that the form is
 * already full-bleed.
 */
@media (min-width: 969px) {
  .login-container {
    width: 100%;
    max-width: 400px;
  }

  /* Register's container is the form itself and holds a two-column row. */
  form.login-container {
    max-width: 540px;
  }
}

/* ============================================================
   Plan picker (register)
   ============================================================ */

/*
 * Built to match the fields above it, not the landing page: the cards reuse
 * the input shape from admin_custom.css (7px radius, the same lavender fill,
 * the same border, primary on focus) so the picker reads as one more field in
 * the form rather than as a widget borrowed from another design.
 *
 * No font-family here on purpose — it inherits the form's, the way the inputs
 * and labels do.
 */
.plan-picker {
  margin: 0;
  padding: 0;
  border: 0;
}

/* A <legend> defaults to a larger font and its own box; normalise it to
   exactly what <x-input-label> renders for every other field. */
.plan-picker-legend {
  width: auto;
  margin-bottom: 0.5rem;
  padding: 0;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
}

.plan-options {
  display: grid;
  gap: 0.6rem;
}

.plan-option {
  display: block;
  margin: 0;
  cursor: pointer;
}

/*
 * The radio is hidden visually but stays focusable — clip rather than
 * display:none, or it drops out of the tab order and off screen readers.
 */
.plan-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Same fill, border and 7px radius as `input` in admin_custom.css. */
.plan-option-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #ced4da;
  border-radius: 7px;
  background: rgba(203, 214, 247, 0.3);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.plan-option:hover .plan-option-card {
  border-color: #a9b6ce;
}

/*
 * Selected state goes green — the same accent the ticks and CTAs use across
 * the site for "yes, this one". The resting state keeps the input's lavender
 * fill, so the two read as clearly different rather than as two shades of the
 * same blue.
 *
 * Sibling combinator, not :has(): this is the only selection feedback, and it
 * has to work in every browser that can render the form.
 */
.plan-option input:checked ~ .plan-option-card {
  border-color: var(--second, #57a773);
  background: rgba(87, 167, 115, 0.12);
  box-shadow: 0 0 0 2px rgba(87, 167, 115, 0.14);
}

.plan-option input:focus-visible ~ .plan-option-card {
  outline: 2px solid var(--primary, #205ea3);
  outline-offset: 2px;
}

/* Radio dot, drawn rather than relying on the native control so it matches the
   ticks used across the rest of the site. */
.plan-option-tick {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid #ced4da;
  border-radius: 50%;
  background: #ffffff;
  transition: border-color 0.2s ease;
}

.plan-option input:checked ~ .plan-option-card .plan-option-tick {
  border-color: var(--second, #57a773);
}

.plan-option input:checked ~ .plan-option-card .plan-option-tick::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--second, #57a773);
  transform: translate(-50%, -50%);
}

.plan-option-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.plan-option-name {
  color: #212529;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
}

.plan-option-meta {
  color: #6c757d;
  font-size: 0.75rem;
  line-height: 1.4;
}

.plan-option-price {
  flex: 0 0 auto;
  color: #212529;
  font-size: 0.98rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.plan-option input:checked ~ .plan-option-card .plan-option-price {
  color: var(--second-dark, #157145);
}

.plan-option-price small {
  display: block;
  color: #6c757d;
  font-size: 0.68rem;
  font-weight: 400;
}

/* Same size and colour as .subtitle-3, the helper-text style already used on
   these screens. */
.plan-picker-note {
  margin: 0.5rem 0 0;
  color: #6c757d;
  font-size: 0.8rem;
  font-weight: 400;
}

/* On a phone the price drops under the name rather than squeezing it. */
@media (max-width: 400px) {
  .plan-option-card {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  .plan-option-price {
    width: 100%;
    padding-left: 2.85rem;
    text-align: left;
  }

  .plan-option-price small {
    display: inline;
  }
}

/* A closing note under the sign-in form: the column is short on content, and
   the 2FA step is worth saying out loud before it surprises someone. */
.auth-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e8edf3;
  color: #6b7280;
  font-size: 0.85rem;
  line-height: 1.55;
}

.auth-note svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 0.1rem;
  color: var(--second, #57a773);
}

/* Same 12px corner as the hero and pricing buttons. */
.login-container .cta-button,
.login-container button[type='submit'] {
  border-radius: 12px;
  font-family: 'Outfit', 'Roboto', sans-serif;
  font-weight: 600;
}

/* ============================================================
   Mobile / tablet (the blue panel is hidden by .only-lg below 969px)
   ============================================================ */

/*
 * With the panel gone the form was the entire page: inputs and the submit
 * button ran edge to edge with no horizontal padding, so it read as an
 * unfinished page rather than a sign-in card. Give it real margins, a ceiling
 * on the width, and clearance for the fixed back chip.
 */
@media (max-width: 968.98px) {
  .login-container {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    padding: 0 1.35rem 2rem !important;
  }

  /* Register's container is the <form> itself and starts at the top of the
     page; login's wrapper is vertically centred and already clears the chip.
     3.5rem is measured against the chip, whose bottom edge sits at 48px — more
     than that pushed the page a few pixels past the viewport and produced a
     scrollbar that scrolled almost nothing. */
  form.login-container {
    padding-top: 3.5rem !important;
  }

  .login-container h2 {
    font-size: 1.6rem;
  }

  /* The label/field rhythm is tighter than a thumb wants. */
  .login-container .form-group {
    margin-bottom: 0.25rem;
  }
}