/* =========================================================================
   MWI AUTH PAGES (2026-07-28)
   -------------------------------------------------------------------------
   Styles the User Registration plugin's form markup so it matches the
   original static design in the source project's css/style.css (its
   .field / .btn.solid / .eyebrow rules).

   The LAYOUT around the form -- split screen, photo panel, quote, logo,
   headings -- is deliberately NOT here: that is built from native Elementor
   containers and widgets so the client can still edit it in the editor.
   Only the plugin's own markup, which Elementor cannot reach, is styled
   from this file.

   Everything is scoped under .mwi-auth-wrap so it cannot leak onto any
   other page. Loaded by its own additive hook (priority 24) in
   mwi-motion-loader.php, on the auth page IDs only.
   ========================================================================= */

.mwi-auth-wrap{
  --mwi-line:#241a121f;
  --mwi-ink:#2B2118;
  --mwi-ink-soft:#6E6152;
  --mwi-ink-faint:#9C9082;
  --mwi-mocha:#9C7256;
  --mwi-mocha-deep:#7C5A41;
  --mwi-espresso:#241A12;
  --mwi-ivory:#F6F1E7;
  --mwi-cloud:#FBF8F3;
  --mwi-gold:#B9924E;
  --mwi-sage:#7C8B6F;
  --mwi-error:#A8443A;
}

/* The original design (login.html) is exactly one screen: site header, then
   the split panel, and no footer at all. Three things are needed to match:

   1. The theme already pads the content wrapper by the header height, so the
      panel must be one viewport MINUS that header, not a full 100vh -- with
      a plain 100vh the page overflowed by the header height and scrolled.
   2. The footer is hidden, as it is in the source file. That also drops the
      floating WhatsApp button here, which is correct: it lives in the footer
      template and does not belong on a sign-in screen.
   3. The form column keeps the source's own 60px padding.

   Header measures 92px on desktop and 54px on mobile (see the mobile header
   rebuild), so the subtraction is per-breakpoint. */
body.mwi-auth-page footer{ display:none !important; }

/* The sitewide rule pads the Elementor page wrapper by the header height so
   content clears a FIXED header. On these pages the header renders static
   and already occupies its own 92px, so that padding double-counts and
   pushed the panel down by exactly one header, forcing a 92px scroll on a
   screen that is supposed to fit. Neutralised here only. */
body.mwi-auth-page div.elementor{ padding-top:0 !important; }

.mwi-auth-wrap{
  min-height:calc(100vh - 92px) !important;
}
@media (max-width:767px){
  .mwi-auth-wrap{ min-height:calc(100vh - 54px) !important; }
}

/* =========================================================================
   Mobile layout
   -------------------------------------------------------------------------
   The two columns stack, and the photo becomes a banner above the form.
   Elementor's own Hide On Mobile toggle does not take on this container, so
   the photo was rendering anyway -- but as a squashed 182px strip with the
   site header sitting on top of it and the quote crushed against the edge.
   Rather than drop the photo (the page is very plain without it), it is
   given a deliberate height, a proper cover crop, and room for the header.
   ========================================================================= */
@media (max-width:1024px){
  .mwi-auth-wrap{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
  }

  /* Full-bleed banner. Height follows the viewport so it stays a band on a
     small phone and never eats the screen on a large one. */
  .mwi-auth-wrap .mwi-auth-media{
    display:flex !important;
    width:100% !important;
    min-height:clamp(190px, 30vh, 280px) !important;
    background-size:cover !important;
    background-position:center 38% !important;
    /* Clear the fixed header so the quote never sits under the logo. */
    padding:calc(54px + 22px) 22px 24px !important;
    justify-content:flex-end !important;
  }

  .mwi-auth-wrap .mwi-auth-quote p{
    font-size:1.15rem !important;
    line-height:1.35 !important;
  }

  /* The banner already separates the form from the header, so the big
     top padding that was clearing the header on desktop is not needed. */
  .mwi-auth-wrap .mwi-auth-form{
    width:100% !important;
    padding:38px 22px 48px !important;
  }

  .mwi-auth-wrap .mwi-auth-box{
    width:100% !important;
    max-width:420px !important;
    margin:0 auto !important;
  }

  /* Verify page: one centred column, no banner to clear. */
  .mwi-auth-wrap.mwi-auth-single{
    min-height:calc(100vh - 54px) !important;
  }
  .mwi-auth-wrap.mwi-auth-single .mwi-auth-form,
  .mwi-auth-single{
    padding-top:clamp(70px, 12vh, 110px) !important;
  }
}

/* Only genuinely small phones tighten up. The cut-off sits below 375px on
   purpose: that is the commonest iPhone width, and catching it here left the
   banner at a thin 170px for most visitors. */
@media (max-width:360px){
  .mwi-auth-wrap .mwi-auth-media{ min-height:165px !important; }
  .mwi-auth-wrap .mwi-auth-quote p{ font-size:1.05rem !important; }
  .mwi-auth-wrap .mwi-auth-form{ padding:30px 18px 40px !important; }
}

/* ---- Eyebrow: small caps label preceded by a short gold rule ---- */
.mwi-auth-wrap .mwi-eyebrow .elementor-heading-title{
  display:inline-flex; align-items:center; gap:10px;
}
.mwi-auth-wrap .mwi-eyebrow .elementor-heading-title::before{
  content:''; width:22px; height:1px; background:var(--mwi-gold); display:inline-block; flex:none;
}

/* ---- Quote on the photo panel ---- */
.mwi-auth-wrap .mwi-auth-quote p{ margin:0; line-height:1.45; }

/* ---- Verify page: one centred column, no photo panel (as verify.html) ---- */
.mwi-auth-box--center{ text-align:center; }
.mwi-auth-box--center .mwi-eyebrow .elementor-heading-title{ justify-content:center; }
.mwi-auth-single{ justify-content:center; }

/* =========================================================================
   User Registration plugin form -- reskinned to the source design
   ========================================================================= */

.mwi-auth-wrap .ur-frontend-form{
  border:none !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.mwi-auth-wrap .ur-form-row{ margin:0 !important; }
.mwi-auth-wrap .ur-form-grid{ padding:0 !important; width:100% !important; }

/* Field block */
.mwi-auth-wrap .ur-field-item,
.mwi-auth-wrap .ur-frontend-form .form-row{
  margin:0 0 22px !important;
  padding:0 !important;
  width:100% !important;
}

/* Label */
.mwi-auth-wrap .ur-label,
.mwi-auth-wrap .ur-frontend-form label{
  display:block !important;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.72rem !important;
  font-weight:500 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:var(--mwi-ink-soft) !important;
  margin:0 0 9px !important;
  line-height:1.4 !important;
}
.mwi-auth-wrap .ur-label .required{ color:var(--mwi-gold) !important; border:none !important; }

/* Inputs.

   The source design uses a bare underline, which reads well on its near-white
   page. This panel is ivory (#F6F1E7), and on that a 12%-opacity hairline all
   but disappears -- the form looked like empty space with floating labels. So
   the underline stays, but the field now sits on the one-step-lighter cloud
   tone and the rule is dark enough to actually read. Focus deepens both. */
.mwi-auth-wrap .ur-frontend-form input[type="text"],
.mwi-auth-wrap .ur-frontend-form input[type="email"],
.mwi-auth-wrap .ur-frontend-form input[type="password"],
.mwi-auth-wrap .ur-frontend-form input[type="tel"],
.mwi-auth-wrap .ur-frontend-form select,
.mwi-auth-wrap .ur-frontend-form textarea{
  width:100% !important;
  background:var(--mwi-cloud) !important;
  border:none !important;
  border-bottom:1px solid rgba(36,26,18,.30) !important;
  border-radius:2px 2px 0 0 !important;
  padding:13px 14px !important;
  height:auto !important;
  min-height:0 !important;
  box-shadow:none !important;
  color:var(--mwi-ink) !important;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.95rem !important;
  line-height:1.4 !important;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.mwi-auth-wrap .ur-frontend-form input:hover,
.mwi-auth-wrap .ur-frontend-form select:hover,
.mwi-auth-wrap .ur-frontend-form textarea:hover{
  border-bottom-color:rgba(36,26,18,.45) !important;
}
.mwi-auth-wrap .ur-frontend-form input:focus,
.mwi-auth-wrap .ur-frontend-form select:focus,
.mwi-auth-wrap .ur-frontend-form textarea:focus{
  background:#FFFDF9 !important;
  border-bottom-color:var(--mwi-mocha) !important;
  box-shadow:inset 0 -1px 0 0 var(--mwi-mocha) !important;
  outline:none !important;
}
.mwi-auth-wrap .ur-frontend-form input::placeholder{ color:var(--mwi-ink-faint) !important; }

/* Chrome paints its own pale-blue fill over autofilled inputs, which breaks
   the palette. Push the cloud tone back in via a very long inset shadow. */
.mwi-auth-wrap .ur-frontend-form input:-webkit-autofill,
.mwi-auth-wrap .ur-frontend-form input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 60px var(--mwi-cloud) inset !important;
  -webkit-text-fill-color:var(--mwi-ink) !important;
}

/* The plugin wraps password fields in .password-input-group to hang a
   show/hide eye off them. That wrapper is inline by default, so the password
   inputs measured 189px against 400px for every other field -- the single
   thing that made the form look broken. Force the wrapper to behave like the
   others and park the eye inside the field. */
.mwi-auth-wrap .password-input-group,
.mwi-auth-wrap .input-wrapper{
  position:relative;
  display:block !important;
  width:100% !important;
}
.mwi-auth-wrap .password-input-group input{ padding-right:42px !important; }

/* The show/hide eye.

   Careful here: on the password fields the plugin puts BOTH
   .password-input-group and .input-form-field-icons on the same span. An
   earlier version of this rule positioned .input-form-field-icons absolutely
   to park the eye inside the field, which therefore lifted the whole password
   box out of the flow -- its wrapper collapsed to zero height and the box
   landed on top of its own label, hiding the word "Password". Only take the
   icon out of the flow when it is NOT also the input group. */
.mwi-auth-wrap .input-form-field-icons:not(.password-input-group){
  position:absolute !important; right:10px; top:50%; transform:translateY(-50%);
  background:none !important; border:none !important; padding:0 !important;
  color:var(--mwi-ink-faint) !important;
  cursor:pointer;
  transition:color .25s ease;
}
.mwi-auth-wrap .input-form-field-icons:not(.password-input-group):hover{ color:var(--mwi-mocha) !important; }

/* Whatever the plugin renders as the eye inside the group. */
.mwi-auth-wrap .password-input-group > span:not(.input-wrapper),
.mwi-auth-wrap .password-input-group > i,
.mwi-auth-wrap .password-input-group > button{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:0;
  color:var(--mwi-ink-faint); cursor:pointer;
  transition:color .25s ease;
}
.mwi-auth-wrap .password-input-group > span:not(.input-wrapper):hover,
.mwi-auth-wrap .password-input-group > i:hover,
.mwi-auth-wrap .password-input-group > button:hover{ color:var(--mwi-mocha); }

/* Submit button -- the source .btn.solid.
   The plugin's .ur-button-container is a flex box that shrink-wraps, so the
   button came out 194px inside a 331px form instead of spanning it. Force the
   container to fill the form so the button matches the fields above it. */
.mwi-auth-wrap .ur-button-container{
  margin:8px 0 0 !important;
  padding:0 !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
}
.mwi-auth-wrap .ur-button-container .ur-submit-button{
  margin:0 !important;
  box-sizing:border-box !important;
}
.mwi-auth-wrap .ur-submit-button,
.mwi-auth-wrap .ur-frontend-form button[type="submit"],
.mwi-auth-wrap .user-registration-Button{
  display:inline-flex !important;
  align-items:center; justify-content:center; gap:10px;
  width:100% !important;
  background:var(--mwi-espresso) !important;
  color:var(--mwi-ivory) !important;
  border:1px solid var(--mwi-espresso) !important;
  border-radius:0 !important;
  padding:15px 30px !important;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.78rem !important;
  font-weight:600 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  cursor:pointer;
  transition:background .3s ease, box-shadow .3s ease, color .3s ease;
}
.mwi-auth-wrap .ur-submit-button:hover,
.mwi-auth-wrap .ur-frontend-form button[type="submit"]:hover{
  background:var(--mwi-mocha-deep) !important;
  border-color:var(--mwi-mocha-deep) !important;
  box-shadow:0 14px 28px -12px rgba(36,26,18,.5);
}

/* ---- Messages: the source .form-msg, a left gold/red rule on cloud ---- */
.mwi-auth-wrap .user-registration-error,
.mwi-auth-wrap .user-registration-message,
.mwi-auth-wrap .user-registration-info,
.mwi-auth-wrap .ur-error,
.mwi-auth-wrap .ur-message{
  list-style:none !important;
  margin:0 0 22px !important;
  padding:12px 14px !important;
  background:var(--mwi-cloud) !important;
  border:none !important;
  border-left:2px solid var(--mwi-mocha) !important;
  border-radius:0 !important;
  font-size:.85rem !important;
  color:var(--mwi-ink-soft) !important;
  box-shadow:none !important;
}
.mwi-auth-wrap .user-registration-error{ border-left-color:var(--mwi-error) !important; color:var(--mwi-error) !important; }
.mwi-auth-wrap .user-registration-message{ border-left-color:var(--mwi-sage) !important; }
.mwi-auth-wrap .user-registration-error li,
.mwi-auth-wrap .user-registration-message li{ margin:0 !important; padding:0 !important; list-style:none !important; }
.mwi-auth-wrap .ur-error-message,
.mwi-auth-wrap .ur-field-item .ur-error{
  background:none !important; border:none !important; padding:0 !important;
  margin-top:6px !important; font-size:.74rem !important; color:var(--mwi-error) !important;
}

/* ---- Remember me / lost password row on the login form ---- */
.mwi-auth-wrap .user-registration-FormRow--rememberme,
.mwi-auth-wrap .ur-login-remember-row{ margin-bottom:18px !important; }
.mwi-auth-wrap .ur-frontend-form .lost_password a,
.mwi-auth-wrap .user-registration-LostPassword a{
  font-size:.8rem; color:var(--mwi-mocha); text-decoration:none;
  border-bottom:1px solid rgba(156,114,86,.35);
}
.mwi-auth-wrap .ur-frontend-form .lost_password a:hover,
.mwi-auth-wrap .user-registration-LostPassword a:hover{ color:var(--mwi-espresso); border-bottom-color:var(--mwi-espresso); }

/* The plugin prints its own "Not a member yet? Register now." line inside the
   login form. It is removed here for two reasons: the sign-up route is meant
   to be the single button below, and the plugin's link pointed at /login/ --
   the page it was already on -- so it went nowhere. */
.mwi-auth-wrap .user-registration-register{ display:none !important; }

/* ---- The sign-up button under the login form ----
   The secondary action, so it is the outline variant of the site's button
   rather than a second solid one competing with "Log in". Same geometry and
   letter-spacing as .btn in the source design; the hover fills from the left
   the way the site's other buttons do. */
.mwi-auth-wrap .mwi-alt-btn .elementor-button{
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  background:transparent;
  color:var(--mwi-espresso);
  border:1px solid var(--mwi-espresso);
  border-radius:0;
  padding:15px 30px;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  transition:color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.mwi-auth-wrap .mwi-alt-btn .elementor-button::before{
  content:'';
  position:absolute; inset:0;
  background:var(--mwi-espresso);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  z-index:0;
}
.mwi-auth-wrap .mwi-alt-btn .elementor-button .elementor-button-content-wrapper,
.mwi-auth-wrap .mwi-alt-btn .elementor-button .elementor-button-text{
  position:relative; z-index:1;
}
.mwi-auth-wrap .mwi-alt-btn .elementor-button:hover,
.mwi-auth-wrap .mwi-alt-btn .elementor-button:focus-visible{
  color:var(--mwi-ivory);
  box-shadow:0 14px 28px -12px rgba(36,26,18,.5);
}
.mwi-auth-wrap .mwi-alt-btn .elementor-button:hover::before,
.mwi-auth-wrap .mwi-alt-btn .elementor-button:focus-visible::before{
  transform:scaleX(1);
}
.mwi-auth-wrap .mwi-alt-btn .elementor-button:focus-visible{
  outline:2px solid var(--mwi-gold); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .mwi-auth-wrap .mwi-alt-btn .elementor-button::before{ transition:none; }
}

/* Kept for the sign-up page, which still links back to Log in as text. */
.mwi-auth-wrap .mwi-auth-alt p{ margin:0; }
.mwi-auth-wrap .mwi-auth-alt a{
  color:var(--mwi-mocha); text-decoration:none;
  border-bottom:1px solid rgba(156,114,86,.35);
  transition:color .25s ease, border-color .25s ease;
}
.mwi-auth-wrap .mwi-auth-alt a:hover{ color:var(--mwi-espresso); border-bottom-color:var(--mwi-espresso); }

/* ---- Password strength meter ----
   The plugin ships this in a slate blue (#3A4F66) that is both off-palette
   and nearly unreadable on the cream field, so the one piece of feedback
   under the password box could not be read. Recoloured per strength, in
   brand tones, with the label given enough weight to register. */
.mwi-auth-wrap .user-registration-password-strength{
  display:block !important;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.72rem !important;
  font-weight:600 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  padding:8px 0 0 !important;
  margin:0 !important;
  background:none !important;
  border:none !important;
  color:var(--mwi-ink-soft) !important;
}
.mwi-auth-wrap .user-registration-password-strength.short,
.mwi-auth-wrap .user-registration-password-strength.bad{ color:var(--mwi-error) !important; }
.mwi-auth-wrap .user-registration-password-strength.good{ color:var(--mwi-gold) !important; }
.mwi-auth-wrap .user-registration-password-strength.strong{ color:var(--mwi-sage) !important; }

.mwi-auth-wrap .user-registration-password-hint,
.mwi-auth-wrap .ur-password-hint{
  display:block !important;
  font-size:.74rem !important;
  line-height:1.5 !important;
  color:var(--mwi-ink-soft) !important;
  padding-top:6px !important;
}

@media (max-width:767px){
  .mwi-auth-wrap .ur-submit-button{ font-size:.74rem !important; padding:14px 24px !important; }
}

/* =========================================================================
   Verify page -- the six single-digit boxes, from the source .code-row
   ========================================================================= */

.mwi-auth-wrap .mwi-v-lead{
  font-size:.9rem; color:var(--mwi-ink-soft); line-height:1.6; margin:0 0 26px;
}
.mwi-auth-wrap .mwi-v-lead b{ color:var(--mwi-ink); font-weight:600; }

.mwi-auth-wrap .mwi-v-row{
  display:flex; gap:10px; margin-bottom:22px;
}
.mwi-auth-wrap .mwi-v-digit{
  width:100%; min-width:0; text-align:center;
  font-family:'Fraunces',Georgia,serif;
  font-size:1.3rem; color:var(--mwi-ink);
  background:var(--mwi-cloud);
  border:1px solid rgba(36,26,18,.30);
  border-radius:2px;
  padding:14px 0;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
  -moz-appearance:textfield;
}
.mwi-auth-wrap .mwi-v-digit::-webkit-outer-spin-button,
.mwi-auth-wrap .mwi-v-digit::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.mwi-auth-wrap .mwi-v-digit:focus{
  border-color:var(--mwi-mocha); outline:none; background:#FFFDF9;
  box-shadow:0 0 0 1px var(--mwi-mocha);
}
.mwi-auth-wrap .mwi-v-digit.is-filled{ border-color:var(--mwi-gold); }

.mwi-auth-wrap .mwi-v-submit{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  background:var(--mwi-espresso); color:var(--mwi-ivory);
  border:1px solid var(--mwi-espresso); border-radius:0;
  padding:15px 30px;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease, box-shadow .3s ease;
}
.mwi-auth-wrap .mwi-v-submit:hover{
  background:var(--mwi-mocha-deep); border-color:var(--mwi-mocha-deep);
  box-shadow:0 14px 28px -12px rgba(36,26,18,.5);
}

/* Resend sits on one line and must not look like a second primary action. */
.mwi-auth-wrap .mwi-v-resend{
  margin-top:22px; font-size:.85rem; color:var(--mwi-ink-soft);
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
}
.mwi-auth-wrap .mwi-v-link{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; font-size:.85rem; color:var(--mwi-mocha);
  border-bottom:1px solid rgba(156,114,86,.35);
  transition:color .25s ease, border-color .25s ease;
}
.mwi-auth-wrap .mwi-v-link:hover{ color:var(--mwi-espresso); border-bottom-color:var(--mwi-espresso); }

/* Same message treatment as the plugin forms, so both pages read alike. */
.mwi-auth-wrap .mwi-v-msg{
  font-size:.85rem; padding:12px 14px; margin:0 0 22px;
  background:var(--mwi-cloud); border-left:2px solid var(--mwi-mocha);
  color:var(--mwi-ink-soft); line-height:1.5;
}
.mwi-auth-wrap .mwi-v-msg--error{ border-left-color:var(--mwi-error); color:var(--mwi-error); }
.mwi-auth-wrap .mwi-v-msg--ok{ border-left-color:var(--mwi-sage); }

@media (max-width:400px){
  .mwi-auth-wrap .mwi-v-row{ gap:6px; }
  .mwi-auth-wrap .mwi-v-digit{ font-size:1.1rem; padding:12px 0; }
}