/* ==========================================================================
   PodUp — Login
   Scoped under .pu-login. Single dark theme, gold CTA, matching the dashboard.
   Colours live only in the token block; no component rule hardcodes one.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body { margin: 0; background: #0A0A0A; overflow-x: hidden; }

.pu-login {
  /* Accent — the one CTA colour the page is built around */
  --pu-accent:        #B0842C;
  --pu-accent-hover:  #B0842C;
  --pu-cta-bg:        linear-gradient(90deg, #E2C147 0%, #C8A23C 49.52%, #F1D483 100%);
  --pu-cta-ink:       #241C05;
  --pu-cta-shadow:    0 8px 22px -10px rgba(201, 162, 39, .55);
  --pu-cta-shadow-hi: 0 14px 28px -12px rgba(224, 190, 93, .65);
  --pu-check-ink:     #241C05;
  --pu-focus:         0 0 0 4px rgba(224, 190, 93, .22);

  /* Surfaces & text */
  --pu-page:        #0A0A0A;
  --pu-surface:     #141414;
  --pu-field:       #1B1B1B;
  --pu-field-hover: #232323;
  --pu-line:        #2B2B2B;
  --pu-line-strong: #3D3A33;
  --pu-heading:     #FFFFFF;
  --pu-ink:         #d1d1d1;
  --pu-ink-soft:    #d1d1d1;
  --pu-muted:       #d1d1d1;
  --pu-placeholder: #6A655D;
  --pu-oauth-hover: #1F1F1F;
  --pu-error-bg:    rgba(240, 68, 56, .12);
  --pu-error-line:  rgba(240, 68, 56, .32);
  --pu-error-ink:   #FDA29B;

  /* Media panel */
  --pu-stage-bg: radial-gradient(120% 120% at 20% 0%, #3A2E10 0%, #14110A 55%, #050505 100%);
  --pu-stage-scrim:
    linear-gradient(180deg, rgba(8, 6, 2, .52) 0%, rgba(8, 6, 2, .14) 35%, rgba(6, 5, 2, .90) 100%),
    linear-gradient(100deg, rgba(242, 218, 151, .12) 0%, rgba(201, 162, 39, .20) 100%);

  /* Media panel size — the video card is a fixed box, not a full-height column */
  --pu-stage-w: 600px;
  --pu-stage-h: 600px;

  /* System */
  --pu-radius:    14px;
  --pu-radius-lg: 24px;
  --pu-font:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pu-display:   "Outfit", "Inter", sans-serif;

  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);   /* form given the larger share */
  padding: 14px;
  background: var(--pu-page);
  font-family: var(--pu-font);
  color: var(--pu-ink);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------- Form side */

.pu-login .pu-login__pane {
  display: flex;
  flex-direction: column;
  padding: 26px 32px 22px;
  min-width: 0;
}

.pu-login .pu-login__brand { display: inline-flex; align-items: center; text-decoration: none; align-self: flex-start; }
.pu-login .pu-login__logo { display: block; height: 40px; width: auto; }

.pu-login .pu-login__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}
.pu-login .pu-login__card { width: 100%; max-width: 392px; }

.pu-login .pu-login__title {
  font-family: var(--pu-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 0 0 8px;
  color: var(--pu-heading);
}
.pu-login .pu-login__subtitle { margin: 0 0 30px; font-size: 15px; color: #D1D1D1; }

.pu-login .pu-login__link {
  color: var(--pu-accent);
  font-weight: 500;
  text-decoration: none;
  font-size: 15px;
  /* border-bottom: 1px solid color-mix(in srgb, var(--pu-accent) 38%, transparent); */
  padding-bottom: 1px;
  transition: border-color .15s ease, color .15s ease;
}
.pu-login .pu-login__link:hover { color: var(--pu-accent-hover); border-color: currentColor; }

/* Fields */

.pu-login .pu-login__field { margin-bottom: 18px; }

.pu-login .pu-login__label {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 7px;
}

.pu-login .pu-login__control { position: relative; }

.pu-login .pu-login__input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font: 500 15px/1 var(--pu-font);
  color: var(--pu-ink);
  background: var(--pu-field);
  border: 1px solid transparent;
  border-radius: var(--pu-radius);
  outline: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pu-login .pu-login__input::placeholder { color: var(--pu-placeholder); font-weight: 400; }
.pu-login .pu-login__input:hover { background: var(--pu-field-hover); }
.pu-login .pu-login__input:focus {
  background: var(--pu-surface);
  border-color: var(--pu-accent);
  box-shadow: none;
}
.pu-login .pu-login__input--password { padding-right: 50px; }

.pu-login .pu-login__reveal {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--pu-accent);
  cursor: pointer;
  transition: background .15s ease;
}
.pu-login .pu-login__reveal:hover { background: color-mix(in srgb, var(--pu-accent) 14%, transparent); }
.pu-login .pu-login__reveal:focus-visible { outline: 2px solid var(--pu-accent); outline-offset: 2px; }
.pu-login .pu-login__reveal svg { width: 19px; height: 19px; }
.pu-login .pu-login__reveal .pu-login__eye--off { display: none; }
.pu-login .pu-login__reveal[aria-pressed="true"] .pu-login__eye--on { display: none; }
.pu-login .pu-login__reveal[aria-pressed="true"] .pu-login__eye--off { display: block; }

/* Row: remember + forgot */

.pu-login .pu-login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 24px;
}
.pu-login .pu-login__remember {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  user-select: none;
}
.pu-login .pu-login__check {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  margin: 0;
  border: 1.5px solid var(--pu-line-strong);
  border-radius: 3px;
  background: var(--pu-field);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.pu-login .pu-login__check::after {
  content: "";
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--pu-heading);
  border-bottom: 2px solid var(--pu-heading);
  transform: rotate(45deg) scale(.5);
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
  top: -1px;
  position: relative;
}
.pu-login .pu-login__check:checked { background: var(--pu-accent); border-color: var(--pu-accent); }
.pu-login .pu-login__check:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.pu-login .pu-login__check:focus-visible { box-shadow: var(--pu-focus); }

/* Buttons */

.pu-login .pu-login__submit {
  position: relative;
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 100px;
  background: var(--pu-cta-bg);
  background-size: 150% 100%;
  color: var(--pu-cta-ink);
  font: 600 16px/1 var(--pu-font);
  letter-spacing: .01em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--pu-cta-shadow);
  transition: background-position .45s ease, transform .12s ease, box-shadow .2s ease;
}
.pu-login .pu-login__submit:hover { background-position: 100% 0; box-shadow: var(--pu-cta-shadow-hi); }
.pu-login .pu-login__submit:active { transform: translateY(1px); }
.pu-login .pu-login__submit:focus-visible { outline: 2px solid var(--pu-accent); outline-offset: 3px; }
.pu-login .pu-login__submit[data-busy="true"] { pointer-events: none; color: transparent; }
.pu-login .pu-login__submit[data-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  border: 2.5px solid color-mix(in srgb, var(--pu-cta-ink) 35%, transparent);
  border-top-color: var(--pu-cta-ink);
  border-radius: 50%;
  animation: pu-spin .7s linear infinite;
}
@keyframes pu-spin { to { transform: rotate(360deg); } }

.pu-login .pu-login__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
}
.pu-login .pu-login__divider::before,
.pu-login .pu-login__divider::after { content: ""; flex: 1; height: 1px; background: var(--pu-line); }

.pu-login .pu-login__oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  height: 54px;
  border: 1px solid var(--pu-line);
  border-radius:100px;
  background: var(--pu-surface);
  font: 600 15px/1 var(--pu-font);
  color: var(--pu-ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.pu-login .pu-login__oauth:hover { background: var(--pu-oauth-hover); border-color: var(--pu-line-strong); }
.pu-login .pu-login__oauth:focus-visible { outline: 2px solid var(--pu-accent); outline-offset: 2px; }
.pu-login .pu-login__oauth svg { width: 20px; height: 20px; }

.pu-login .pu-login__error {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: 11px;
  background: var(--pu-error-bg);
  border: 1px solid var(--pu-error-line);
  color: var(--pu-error-ink);
  font-size: 13.5px;
  font-weight: 500;
}
.pu-login .pu-login__error[data-visible="true"] { display: flex; }

/* Footer */

.pu-login .pu-login__footer { display: flex; justify-content: center; gap: 26px; font-size: 13px; }
.pu-login .pu-login__footer a {
  color: var(--pu-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.pu-login .pu-login__footer a:hover { color: var(--pu-accent); }

/* -------------------------------------------------------------- Media side */

.pu-login .pu-login__stage {
  position: relative;
  border-radius: var(--pu-radius-lg);
  overflow: hidden;
  background: var(--pu-stage-bg);
  isolation: isolate;

  /* Fixed card instead of a full-height column.
     justify-self: start -> sits at the left edge of its column.
     Swap to `center` if you want it centred in the empty space instead. */
  width: var(--pu-stage-w);
  height: var(--pu-stage-h);
  max-width: 100%;
  justify-self: start;
  align-self: center;         /* vertical centring: replaces the fixed margin-top */
}

.pu-login .pu-login__video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pu-login .pu-login__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Cover the card, not the viewport: 16:9 driven off the card's own height */
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
  min-width: 100%;
  min-height: 100%;
  border: 0;
}

.pu-login .pu-login__scrim { position: absolute; inset: 0; background: var(--pu-stage-scrim); }

.pu-login .pu-login__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 34px 34px 30px;
  color: #fff;
}

.pu-login .pu-login__headline {
  font-family: var(--pu-display);
  font-size: 30px;            /* fixed card, so no vw scaling */
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.22;
  margin: 0 0 14px;
  max-width: 25ch;
  text-wrap: balance;
}
.pu-login .pu-login__copy {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
  text-wrap: balance;
}

/* ------------------------------------------------------------- Responsive */

/* Below this the video card is dropped entirely — login only. */
@media (max-width: 1080px) {
  .pu-login {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .pu-login .pu-login__stage { display: none; }

  .pu-login .pu-login__pane {
    padding-left:  max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
    padding-top: 24px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .pu-login .pu-login__body { padding: 28px 0 36px; }

  /* 16px keeps iOS Safari from zooming the page on field focus */
  .pu-login .pu-login__input { font-size: 16px; }
}

@media (max-width: 600px) {
  .pu-login .pu-login__card { max-width: 100%; }
  .pu-login .pu-login__logo { height: 34px; }
  .pu-login .pu-login__title { font-size: 28px; }
  .pu-login .pu-login__subtitle { margin-bottom: 24px; font-size: 14.5px; }
  .pu-login .pu-login__field { margin-bottom: 16px; }
  .pu-login .pu-login__row { margin: 4px 0 20px; flex-wrap: wrap; row-gap: 12px; }
  .pu-login .pu-login__reveal { width: 40px; height: 40px; }
  .pu-login .pu-login__divider { margin: 20px 0; }
  .pu-login .pu-login__footer { gap: 20px; }
}

@media (max-width: 360px) {
  .pu-login .pu-login__title { font-size: 26px; }
  .pu-login .pu-login__pane { padding-left: 18px; padding-right: 18px; }
}

/* Phone in landscape — stop the form being vertically squeezed */
@media (max-height: 560px) and (orientation: landscape) {
  .pu-login .pu-login__body { padding: 20px 0 28px; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .pu-login *, .pu-login *::before, .pu-login *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------ Laravel integration only */
/* Nothing above this line was changed. These rules exist only because:
   1) login.css (loaded earlier in the layout) sets "html body" background,
      which is more specific than this design's plain "body" selector and
      would otherwise win the cascade regardless of load order.
   2) the Google button is a real <a> link here (so login works with no JS),
      and anchors need text-decoration reset that a <button> didn't need.
   3) the password reveal toggle reuses the site's existing #show_hide_password
      JS (public/js/showplatform/company/create.js) instead of the new
      design's dedicated button, so its plain <a>/svg need the accent color
      that <a> tags don't get by default (browser default link-blue).
   4) real server-side validation errors (from LoginController's "required"
      rules and its custom auth-failure messages) are shown with the
      design's own .pu-login__error banner, driven server-side via
      @if($errors->any()) instead of the original mock's JS/data-visible
      toggle — no JS needed since Blade already knows on page load. */
html body { background: #0A0A0A; color: #EDEAE3; }
.pu-login .pu-login__oauth { text-decoration: none; }
.pu-login .password-hide-show a,
.pu-login .password-hide-show svg { color: var(--pu-accent); }