/* Petropedam Ultimate Member authentication UI */
body.petropedam-um-auth {
  --pp-navy: #10152f;
  --pp-blue: #1f86c7;
  --pp-blue-dark: #126da7;
  --pp-gold: #f3a900;
  --pp-bg: #e9eef5;
  --pp-text: #182036;
  --pp-muted: #6f7889;
  background: linear-gradient(145deg, #f6f8fb 0%, #e5ebf3 48%, #edf2f7 100%);
}

body.petropedam-um-auth .site-main,
body.petropedam-um-auth #main,
body.petropedam-um-auth .content-area,
body.petropedam-um-auth .entry-content {
  overflow: visible;
}

body.petropedam-um-auth .entry-content {
  padding: clamp(34px, 6vw, 86px) 18px;
}

body.petropedam-um-auth .um {
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  padding: clamp(30px, 5vw, 54px) clamp(22px, 5vw, 52px) 38px !important;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(238,243,249,.98), rgba(226,233,242,.98));
  box-shadow: 18px 18px 38px rgba(151,163,180,.38),
             -18px -18px 38px rgba(255,255,255,.92);
  color: var(--pp-text);
  position: relative;
}

body.petropedam-um-register .um {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
}

body.petropedam-um-auth .um::before {
  content: "";
  display: block;
  width: 76px;
  height: 76px;
  margin: -72px auto 24px;
  border-radius: 50%;
  background-color: var(--pp-bg);
  background-image: var(--petropedam-auth-logo, url('/wp-content/uploads/2026/08/ChatGPT-Image-Aug-13-2026-01_03_21-AM.png'));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 62px auto;
  box-shadow: 9px 9px 18px rgba(151,163,180,.38),
             -9px -9px 18px rgba(255,255,255,.95);
}

body.petropedam-um-login .um-form::after,
body.petropedam-um-register .um-form::after {
  order: 2;
  display: block;
  margin: 5px 0 22px;
  text-align: center;
  white-space: pre;
  font-size: 14px;
  line-height: 1.7;
  color: var(--pp-muted);
  pointer-events: none;
}

body.petropedam-um-login .um-form::after {
  content: "Access Petropedam Pump Selection Software";
}

body.petropedam-um-register .um-form::after {
  content: "Register for access to Petropedam engineering tools";
}

body.petropedam-um-auth .um-form {
  display: flex;
  flex-direction: column;
}

body.petropedam-um-auth .um-form > * {
  order: 3;
}

body.petropedam-um-auth .um-form::before {
  order: 1;
  display: block;
  margin-bottom: 4px;
  text-align: center;
  color: var(--pp-text);
  font-size: clamp(25px, 4vw, 34px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.5px;
}

body.petropedam-um-login .um-form::before { content: "Welcome"; }
body.petropedam-um-register .um-form::before { content: "Create Account"; }

/* Shorter, balanced registration form on desktop. Ultimate Member data and
   submission behavior remain untouched; only its existing field wrappers move. */
@media (min-width: 761px) {
  body.petropedam-um-register .um-form .um-row .um-col-1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }

  body.petropedam-um-register .um-form .um-row .um-col-1 > .um-field {
    min-width: 0;
  }

  body.petropedam-um-register .um-form .um-row .um-col-1 > .um-clear {
    display: none;
  }

  body.petropedam-um-register .um-form .um-row .um-col-1 > .um-field-type_terms_conditions,
  body.petropedam-um-register .um-form .um-row .um-col-1 > .um-field-type_block,
  body.petropedam-um-register .um-form .um-row .um-col-1 > .um-field-type_spacing,
  body.petropedam-um-register .um-form .um-row .um-col-1 > .um-field-type_html {
    grid-column: 1 / -1;
  }
}

body.petropedam-um-auth .um-field {
  margin-top: 17px !important;
}

body.petropedam-um-auth .um-field-label {
  margin: 0 0 9px !important;
}

body.petropedam-um-auth .um-field-label label {
  color: #3a455b !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

body.petropedam-um-auth .um input[type="text"],
body.petropedam-um-auth .um input[type="email"],
body.petropedam-um-auth .um input[type="tel"],
body.petropedam-um-auth .um input[type="password"],
body.petropedam-um-auth .um input[type="number"],
body.petropedam-um-auth .um textarea,
body.petropedam-um-auth .um .select2-selection,
body.petropedam-um-auth .um select {
  min-height: 54px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: 14px !important;
  background: #e9eef5 !important;
  color: var(--pp-text) !important;
  font-size: 15px !important;
  box-shadow: inset 5px 5px 10px rgba(158,169,185,.27),
              inset -5px -5px 10px rgba(255,255,255,.9) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

body.petropedam-um-auth .um input:focus,
body.petropedam-um-auth .um textarea:focus,
body.petropedam-um-auth .um .select2-container--open .select2-selection {
  outline: 0 !important;
  border-color: rgba(31,134,199,.65) !important;
  box-shadow: inset 4px 4px 8px rgba(158,169,185,.24),
              inset -4px -4px 8px rgba(255,255,255,.9),
              0 0 0 3px rgba(31,134,199,.12) !important;
}

body.petropedam-um-auth .um .select2-selection__rendered {
  line-height: 52px !important;
  padding-left: 0 !important;
}

body.petropedam-um-auth .um .select2-selection__arrow {
  height: 52px !important;
  right: 10px !important;
}

body.petropedam-um-auth .um-field-checkbox-option,
body.petropedam-um-auth .um-field-radio-option,
body.petropedam-um-auth .um-link-alt,
body.petropedam-um-auth .um a {
  color: var(--pp-blue-dark) !important;
}

body.petropedam-um-auth .um-field-checkbox-state i,
body.petropedam-um-auth .um-field-radio-state i {
  color: var(--pp-blue) !important;
}

body.petropedam-um-auth .um-col-alt {
  margin-top: 24px !important;
}

body.petropedam-um-auth .um input[type="submit"].um-button,
body.petropedam-um-auth .um a.um-button {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #2598dc, #197bb8) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  letter-spacing: .25px;
  text-transform: none !important;
  box-shadow: 7px 7px 14px rgba(151,163,180,.42),
             -7px -7px 14px rgba(255,255,255,.92) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

body.petropedam-um-auth .um a.um-button.um-alt {
  background: #e9eef5 !important;
  color: var(--pp-blue-dark) !important;
}

body.petropedam-um-auth .um input[type="submit"].um-button:hover,
body.petropedam-um-auth .um a.um-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 9px 9px 18px rgba(151,163,180,.43),
             -9px -9px 18px rgba(255,255,255,.96) !important;
}

body.petropedam-um-auth .um input[type="submit"].um-button:active,
body.petropedam-um-auth .um a.um-button:active {
  transform: translateY(0);
  box-shadow: inset 4px 4px 8px rgba(13,87,133,.25),
              inset -3px -3px 7px rgba(255,255,255,.18) !important;
}

body.petropedam-um-auth .um-notice {
  margin-bottom: 22px !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: inset 3px 3px 7px rgba(140,80,80,.12);
}

body.petropedam-um-auth .um-field-error {
  border-radius: 10px !important;
}

body.petropedam-um-auth .um-link-alt {
  margin-top: 22px !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

body.petropedam-um-auth .um-link-alt:hover,
body.petropedam-um-auth .um a:hover {
  text-decoration: underline !important;
}

@media (max-width: 640px) {
  body.petropedam-um-auth .entry-content {
    padding: 52px 14px 38px;
  }

  body.petropedam-um-auth .um {
    padding: 34px 18px 28px !important;
    border-radius: 24px;
    box-shadow: 12px 12px 25px rgba(151,163,180,.34),
               -12px -12px 25px rgba(255,255,255,.9);
  }

  body.petropedam-um-auth .um::before {
    width: 66px;
    height: 66px;
    margin-top: -68px;
    background-size: 50px auto;
  }

  body.petropedam-um-auth .um-col-1,
  body.petropedam-um-auth .um-col-2 {
    float: none !important;
    width: 100% !important;
  }

  body.petropedam-um-auth .um-col-2 {
    margin-top: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.petropedam-um-auth .um *,
  body.petropedam-um-auth .um *::before,
  body.petropedam-um-auth .um *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}