/* ── Auth surface (Login, Register, VerifyRegister, ForgotPassword(Sent), ResetPassword) ──
   Same envelope as the landing hero: the brand panel is the clay envelope front (stamp,
   postmark, "Contents" label) and the form side is the cream invitation card with its inset
   rule. Palette, type and the ink button come from landing.css's --env-* set, redeclared here
   because landing.css is not loaded on these pages. Decoration is CSS-only, so the views keep
   their markup and nothing extra is requested beyond the stamp image the landing page caches. */

.iv-auth-page {
   --env-clay: #a94a28;
   --env-clay-deep: #8a3a1e;
   --env-cream: #fbf1e3;
   --env-ink: #2a2118;
   --env-ink-soft: #5b4a36;
   --env-label: #7d6848;
   --env-paper: #fffbf3;
   --env-rule: #e5d6be;
   --env-field: #dccbb0;
   --env-serif: Georgia, 'Times New Roman', 'Noto Serif', serif;
   --env-mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

   /* Height of the site header above; the two halves fill the rest of the viewport. */
   --iv-auth-top: 80px;

   position: relative;
   isolation: isolate;
   background: var(--env-paper);
}

.iv-auth-shell {
   width: 100%;
   display: grid;
   grid-template-columns: 1fr;
}

@media (min-width: 992px) {
   .iv-auth-shell {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      min-height: calc(100svh - var(--iv-auth-top));
   }
}

/* ── Brand panel: the envelope front ── */

.iv-auth-brand {
   position: relative;
   isolation: isolate;
   background: var(--env-clay);
   color: var(--env-cream);
   padding: 24px 22px 22px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 18px;
   min-height: 132px;
}

/* Paper grain (same tile as the landing hero) under a postmark that overlaps the stamp. */
.iv-auth-brand::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 90' fill='none' stroke='%23fbf1e3'%3E%3Ccircle cx='45' cy='45' r='36' stroke-width='1.6'/%3E%3Ccircle cx='45' cy='45' r='27'/%3E%3Cpath d='M86 30c8-5 16-5 22 0s14 5 20 0M86 45c8-5 16-5 22 0s14 5 20 0M86 60c8-5 16-5 22 0s14 5 20 0' stroke-width='1.4'/%3E%3C/svg%3E") right 34px top 46px / 104px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
   opacity: .32;
}

/* The songket stamp, perforated edge drawn by the dotted background behind the image. */
.iv-auth-brand::after {
   content: '';
   position: absolute;
   top: 22px;
   right: 22px;
   z-index: -1;
   width: 64px;
   aspect-ratio: 92 / 112;
   box-sizing: border-box;
   padding: 5px;
   background:
      url("../img/landing/stamp-songket.jpg") content-box center / cover no-repeat,
      radial-gradient(circle, transparent 38%, #fffdf8 42%) -4px -4px / 8px 8px;
   transform: rotate(3deg);
   box-shadow: 0 6px 12px -6px rgba(40, 10, 0, .5);
}

.iv-auth-brand-mark {
   font-family: 'Playfair Display', serif;
   font-weight: 700;
   font-size: 24px;
   letter-spacing: .01em;
}

.iv-auth-brand-copy {
   display: none;
}

.ivenku-page .iv-auth-brand-foot {
   align-self: flex-start;
   margin: 0;
   padding: 6px 10px;
   border: 1px solid rgba(251, 241, 227, .55);
   font-family: var(--env-mono);
   font-size: 10.5px;
   line-height: 1.55;
   letter-spacing: .08em;
   text-transform: uppercase;
   transform: rotate(-1.5deg);
   max-width: calc(100% - 96px);
}

@media (min-width: 992px) {
   .iv-auth-brand {
      padding: clamp(40px, 5vw, 72px) clamp(40px, 5vw, 80px);
      gap: 36px;
   }

   .iv-auth-brand::before {
      background-position: right clamp(80px, 8vw, 130px) top clamp(80px, 8vw, 112px), 0 0;
      background-size: 170px auto, auto;
   }

   .iv-auth-brand::after {
      top: clamp(40px, 5vw, 72px);
      right: clamp(40px, 5vw, 80px);
      width: 112px;
      padding: 7px;
   }

   .iv-auth-brand-mark {
      font-size: 26px;
   }

   .iv-auth-brand-copy {
      display: block;
      max-width: 460px;
   }

   .iv-auth-brand-copy::before {
      content: '';
      display: block;
      width: 36px;
      height: 1px;
      margin-bottom: 22px;
      background: currentColor;
      opacity: .7;
   }

   .iv-auth-brand-copy .iv-auth-brand-heading {
      font-family: 'Playfair Display', serif;
      font-weight: 600;
      font-size: clamp(40px, 3.6vw, 56px);
      line-height: 1.08;
      letter-spacing: -.01em;
      margin: 0 0 18px;
      color: var(--env-cream);
   }

   .iv-auth-brand-copy p:not(.iv-auth-brand-heading) {
      font-family: var(--env-serif);
      font-style: italic;
      font-size: 18px;
      line-height: 1.55;
      color: rgba(251, 241, 227, .88);
      margin: 0;
   }

   .iv-auth-brand-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      font-family: var(--env-serif);
      font-size: 17px;
   }

   .iv-auth-brand-list li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 0;
      border-top: 1px solid rgba(251, 241, 227, .22);
   }

   .iv-auth-brand-list li:last-child {
      border-bottom: 1px solid rgba(251, 241, 227, .22);
   }

   .iv-auth-brand-list svg {
      flex: none;
      width: 16px;
      height: 16px;
      opacity: .85;
   }

   .ivenku-page .iv-auth-brand-foot {
      max-width: none;
   }
}

/* ── Form side: the invitation paper ── */

.iv-auth-form-side {
   position: relative;
   padding: 32px 20px 44px;
   background: var(--env-paper);
   color: var(--env-ink);
}

@media (min-width: 576px) {
   .iv-auth-form-side {
      padding: 44px 48px 46px;
   }
}

@media (min-width: 992px) {
   .iv-auth-form-side {
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* A centred 400px column made with padding, so child margins (.ivenku-page p resets them) can't shift it */
      padding: 56px max(clamp(48px, 6vw, 96px), calc((100% - 400px) / 2));
   }
}

.iv-auth-form-side.text-center {
   text-align: center;
}

.iv-auth-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 14px;
   font-family: var(--env-mono);
   font-size: 11px;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--env-clay);
}

.iv-auth-eyebrow::before {
   content: '';
   width: 24px;
   height: 1px;
   background: currentColor;
}

.ivenku-page .iv-auth-heading {
   font-family: 'Playfair Display', serif;
   font-weight: 600;
   color: var(--env-ink);
   font-size: 30px;
   line-height: 1.15;
   letter-spacing: -.01em;
   margin: 0 0 8px;
}

.ivenku-page .iv-auth-subtext {
   font-family: var(--env-serif);
   font-style: italic;
   color: var(--env-ink-soft);
   font-size: 15px;
   line-height: 1.55;
   margin: 0 0 28px;
}

/* ── Stepper ── */

.iv-auth-steps {
   list-style: none;
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 0 0 30px;
   padding: 0;
   font-family: var(--env-mono);
}

.iv-auth-steps li {
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--env-label);
   font-size: 11px;
   letter-spacing: .12em;
   text-transform: uppercase;
}

.iv-auth-steps .iv-auth-step-dot {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   border: 1px solid var(--env-field);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--env-serif);
   font-size: 12px;
   letter-spacing: 0;
   color: var(--env-label);
   background: var(--env-paper);
   transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.iv-auth-steps .iv-auth-step-rule {
   flex: 1 1 auto;
   height: 0;
   border-top: 1px dashed var(--env-field);
   min-width: 14px;
}

.iv-auth-steps li[data-state="done"] .iv-auth-step-dot {
   background: var(--env-clay);
   border-color: var(--env-clay);
   color: var(--env-cream);
}

.iv-auth-steps li[data-state="done"] + .iv-auth-step-rule {
   border-top-style: solid;
   border-top-color: var(--env-clay);
}

.iv-auth-steps li[data-state="current"] .iv-auth-step-dot {
   border-color: var(--env-ink);
   background: var(--env-ink);
   color: var(--env-cream);
}

.iv-auth-steps li[data-state="current"] span.iv-auth-step-label,
.iv-auth-steps li[data-state="done"] span.iv-auth-step-label {
   color: var(--env-ink);
}

.iv-auth-step-label {
   display: none;
}

@media (min-width: 576px) {
   .iv-auth-step-label {
      display: inline;
   }
}

/* ── Fields ── */

.iv-auth-field {
   margin-bottom: 20px;
}

.iv-auth-label {
   display: block;
   font-family: var(--env-mono);
   font-weight: 500;
   font-size: 11px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--env-label);
   margin-bottom: 8px;
}

.iv-auth-label .iv-auth-label-optional {
   font-weight: 400;
   letter-spacing: .06em;
   text-transform: none;
   opacity: .8;
}

.iv-auth-input-wrap {
   position: relative;
}

.iv-auth-input,
input.iv-auth-input {
   width: 100%;
   height: 50px;
   padding: 0 16px;
   border: 1px solid var(--env-field);
   border-radius: 4px;
   background: #fff;
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-size: 15px;
   color: var(--env-ink);
   transition: border-color .15s ease, box-shadow .15s ease;
}

.iv-auth-input-wrap .iv-auth-input {
   padding-right: 50px;
}

.iv-auth-input::placeholder {
   color: #a8977d;
}

.iv-auth-input:hover {
   border-color: #c9b391;
}

.iv-auth-input:focus {
   outline: none;
   border-color: var(--env-clay);
   box-shadow: 0 0 0 3px rgba(169, 74, 40, .14);
}

.iv-auth-input.input-validation-error {
   border-color: #b3261e;
   box-shadow: 0 0 0 3px rgba(179, 38, 30, .1);
}

.iv-auth-input-wrap .iv-auth-toggle {
   position: absolute;
   right: 5px;
   top: 50%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   border: none;
   background: transparent;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--env-label);
   cursor: pointer;
}

.iv-auth-input-wrap .iv-auth-toggle:hover {
   background: #f6eee1;
   color: var(--env-ink);
}

.iv-auth-input-wrap .iv-auth-toggle svg {
   width: 18px;
   height: 18px;
}

.iv-auth-error {
   display: block;
   color: #b3261e;
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-size: 12.5px;
   margin-top: 6px;
}

.iv-auth-error:empty {
   display: none;
}

.ivenku-page .iv-auth-hint {
   font-family: var(--env-serif);
   font-style: italic;
   font-size: 13.5px;
   color: var(--env-ink-soft);
   margin-top: 8px;
}

/* Live password-requirement checklist */
.iv-auth-reqs {
   list-style: none;
   margin: 12px 0 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 6px 16px;
}

.iv-auth-reqs li {
   display: flex;
   align-items: center;
   gap: 6px;
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-size: 12.5px;
   color: var(--env-label);
}

.iv-auth-reqs li svg {
   flex: none;
   width: 14px;
   height: 14px;
   color: var(--env-field);
}

.iv-auth-reqs li[data-met="true"] {
   color: #4f6b3f;
}

.iv-auth-reqs li[data-met="true"] svg {
   color: #4f6b3f;
}

/* ── Buttons: the hero's ink button ── */

.iv-auth-btn {
   width: 100%;
   height: 52px;
   padding: 0 20px;
   border-radius: 4px;
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-weight: 600;
   font-size: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   border: 1px solid transparent;
   cursor: pointer;
   transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}

.iv-auth-btn svg {
   width: 18px;
   height: 18px;
}

.iv-auth-btn-primary,
.ivenku-page .iv-auth-btn-primary {
   background: var(--env-ink);
   color: var(--env-cream);
}

.iv-auth-btn-primary:hover,
.ivenku-page .iv-auth-btn-primary:hover {
   background: #4a3826;
   color: #fff;
}

.iv-auth-btn-primary:active {
   transform: translateY(1px);
}

.iv-auth-btn-primary:disabled {
   opacity: .6;
   cursor: not-allowed;
   transform: none;
}

.iv-auth-btn-ghost,
.ivenku-page .iv-auth-btn-ghost {
   background: #fff;
   color: var(--env-ink);
   border-color: var(--env-field);
}

.iv-auth-btn-ghost:hover,
.ivenku-page .iv-auth-btn-ghost:hover {
   background: #fff;
   color: var(--env-ink);
   border-color: var(--env-ink-soft);
}

.iv-auth-btn-row {
   display: flex;
   gap: 12px;
   margin-top: 6px;
}

.iv-auth-btn-row .iv-auth-btn-ghost {
   flex: 0 0 auto;
   width: auto;
   padding: 0 22px;
}

.iv-auth-btn-row .iv-auth-btn-primary {
   flex: 1 1 auto;
}

/* ── Divider / links ── */

.iv-auth-divider {
   display: flex;
   align-items: center;
   gap: 14px;
   margin: 22px 0;
   color: var(--env-label);
   font-family: var(--env-serif);
   font-style: italic;
   font-size: 14px;
}

.iv-auth-divider::before,
.iv-auth-divider::after {
   content: "";
   flex: 1 1 auto;
   height: 1px;
   background: var(--env-rule);
}

.ivenku-page .iv-auth-foot {
   text-align: center;
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-size: 14px;
   color: var(--env-ink-soft);
   margin: 22px 0 0;
}

.ivenku-page .iv-auth-foot a,
.ivenku-page .iv-auth-link {
   color: var(--env-clay);
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-weight: 600;
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 4px;
}

.ivenku-page .iv-auth-foot a:hover,
.ivenku-page .iv-auth-link:hover {
   color: var(--env-clay-deep);
}

.ivenku-page .iv-auth-legal {
   text-align: center;
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-size: 12px;
   line-height: 1.6;
   color: var(--env-label);
   margin: 18px 0 0;
}

.ivenku-page .iv-auth-legal .iv-auth-link {
   font-weight: 500;
}

.iv-auth-page :is(a, button, input[type="checkbox"]):focus-visible {
   outline: 2px solid var(--env-ink);
   outline-offset: 3px;
}

/* ── Alerts ── */

.iv-auth-alert {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   border-radius: 4px;
   padding: 12px 14px;
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-size: 13.5px;
   text-align: left;
   margin-bottom: 20px;
   border: 1px solid transparent;
   border-left-width: 3px;
}

.iv-auth-alert svg {
   flex: none;
   width: 18px;
   height: 18px;
   margin-top: 1px;
}

.iv-auth-alert-danger {
   background: #fbefe9;
   border-color: #ecc3b3;
   border-left-color: var(--env-clay);
   color: #86321a;
}

.iv-auth-alert-success {
   background: #f1f4e9;
   border-color: #cfdcc0;
   border-left-color: #5d7a49;
   color: #3f5a30;
}

.iv-auth-alert ul {
   margin: 0;
   padding-left: 18px;
}

/* ── OTP boxes ── */

.iv-auth-otp-row {
   display: flex;
   gap: 8px;
   justify-content: center;
   margin-bottom: 4px;
}

.iv-auth-otp-box {
   width: 46px;
   height: 56px;
   text-align: center;
   font-family: var(--env-serif);
   font-size: 24px;
   color: var(--env-ink);
   border: 1px solid var(--env-field);
   border-radius: 4px;
   background: #fff;
}

.iv-auth-otp-box:focus {
   outline: none;
   border-color: var(--env-clay);
   box-shadow: 0 0 0 3px rgba(169, 74, 40, .14);
}

/* Wax seal, as on the landing envelope. */
.iv-auth-icon-badge {
   position: relative;
   width: 60px;
   height: 60px;
   border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
   background: radial-gradient(circle at 36% 30%, #cf4a43, #8e1c1d 62%, #6e1213);
   box-shadow: 0 6px 10px rgba(60, 10, 5, .3), inset 0 -4px 8px rgba(0, 0, 0, .25), inset 0 3px 6px rgba(255, 255, 255, .18);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 18px;
   color: rgba(255, 236, 225, .9);
}

.iv-auth-icon-badge::before {
   content: '';
   position: absolute;
   inset: 15%;
   border-radius: 50%;
   border: 1.5px solid rgba(70, 8, 8, .45);
}

.iv-auth-icon-badge svg {
   position: relative;
   width: 24px;
   height: 24px;
}

/* ── Steps container (Register multi-step) ── */

.iv-auth-step-panel {
   min-width: 0;
   margin: 0;
   padding: 0;
   border: 0;
}

.iv-auth-step-panel[hidden] {
   display: none;
}

@media (prefers-reduced-motion: no-preference) {
   .iv-auth-step-panel {
      animation: iv-auth-step-in .25s ease;
   }
}

@keyframes iv-auth-step-in {
   from {
      opacity: 0;
      transform: translateY(4px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (prefers-reduced-motion: reduce) {
   .iv-auth-step-panel {
      animation: none !important;
   }
}

/* ── Sign-in page extras ── */

.iv-login-label-row {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 12px;
}

.ivenku-page .iv-login-label-row .iv-auth-link {
   margin-bottom: 8px;
   font-size: 12.5px;
   white-space: nowrap;
}

.iv-login-options {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 2px 0 24px;
   color: var(--env-ink-soft);
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-size: 13.5px;
}

.iv-login-checkbox {
   width: 17px;
   height: 17px;
   margin: 0;
   accent-color: var(--env-ink);
   cursor: pointer;
}

.iv-login-options label {
   cursor: pointer;
}

.iv-login-submit {
   justify-content: space-between;
   padding: 0 22px;
}

.iv-login-signup {
   display: flex;
   align-items: baseline;
   justify-content: center;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 28px;
   padding-top: 22px;
   border-top: 1px solid var(--env-rule);
   color: var(--env-ink-soft);
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-size: 14px;
}

.iv-login-signup a {
   white-space: nowrap;
}

@media (max-width: 480px) {
   .iv-auth-heading {
      font-size: 27px;
   }

   .iv-auth-otp-box {
      width: 42px;
      height: 52px;
   }
}