/* Ultimate Member, dressed to match the rest of the site.
 *
 * THE RULE THIS FILE FOLLOWS: change how it looks, never what it does.
 *
 * Every selector below targets a class Ultimate Member prints. Nothing here
 * adds, removes, reorders or renames a field, a form, a tab or a button. The
 * account form still posts to Ultimate Member, still validates through it, and
 * still saves through it. If this file were deleted tomorrow the pages would
 * work exactly as they do now -- they would simply look like the old site
 * again.
 *
 * That constraint is not caution for its own sake. These four pages are the
 * login and password system for real customers. A restyle that breaks a
 * password change is not a restyle, it is an outage.
 *
 * WHY IT IS A SEPARATE STYLESHEET
 *
 * dg.css is the audited build, shared with the standalone site, where no
 * Ultimate Member markup exists. Putting `.um-field-area input` rules in there
 * would be dead weight in one place and a surprise in the other. This loads
 * only on the account pages.
 *
 * !important appears in a few places below and each one is deliberate:
 * Ultimate Member ships inline styles and a stylesheet loaded after ours, and
 * on those specific properties there is no specificity that wins without it.
 */

/* ------------------------------------------------------------------ shell */

.dg-um-wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--hh, 86px) + clamp(56px, 9vw, 96px)) var(--pad) var(--sec);
}

.dg-um-head { margin-bottom: clamp(28px, 4vw, 44px); }

.dg-um-head .eyebrow {
  font-family: 'Bai Jamjuree', sans-serif;
  font-weight: 700; font-size: .755rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue-lt);
  display: flex; align-items: center; gap: .7em; margin: 0 0 14px;
}
.dg-um-head .eyebrow::before {
  content: ''; width: 26px; height: 1px; background: var(--blue); flex: none;
}
.dg-um-head h1 { margin: 0; }
.dg-um-head p {
  color: var(--body); margin: 14px 0 0; max-width: 62ch;
}

/* Ultimate Member draws its own page title inside some templates. Ours is in
   the markup above it, and two titles is worse than either. */
.dg-site .um .um-page-title { display: none; }

/* ------------------------------------------------------------------ layout
 *
 * Ultimate Member lays the account screen out with floats and percentage
 * widths. Rather than fight that with more floats, the form becomes a grid at
 * the width where two columns fit, and the float rules are switched off inside
 * it. Below that width UM's own stacking is already correct, so nothing here
 * applies and its responsive classes (uimob340, uimob500) keep working as they
 * were written to.
 */
@media (min-width: 861px) {
  .dg-site .um-account .um-form form {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: clamp(18px, 2vw, 28px);
    align-items: start;
  }
  .dg-site .um-account-side,
  .dg-site .um-account-main {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* ------------------------------------------------------------------ panels */

.dg-site .um,
.dg-site .um .um-form { max-width: none; }

.dg-site .um-account-side,
.dg-site .um-account-main {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.dg-site .um-account-side { padding: 26px 20px; }
.dg-site .um-account-main { padding: clamp(22px, 3vw, 38px); }

/* the avatar block */
.dg-site .um-account-meta { text-align: center; }
.dg-site .um-account-meta-img img,
.dg-site .um-account-meta img {
  border-radius: 999px !important;
  border: 1px solid var(--line-2);
}
/* The member's own name is a label, not a link to somewhere they want to go --
   UM wraps it in an anchor to their profile, but colouring it like a link puts
   two blue links on top of each other and makes the name the louder one. Name
   in white; "View profile" underneath keeps the link colour. */
.dg-site .um-account-name,
.dg-site .um-account-name a {
  font-family: 'Bai Jamjuree', sans-serif;
  font-weight: 700; color: #fff !important; font-size: 1.05rem;
}
.dg-site .um-account-profile-link a { color: var(--blue-lt); font-size: .88rem; }

/* ------------------------------------------------------------- the tab list */

.dg-site .um-account-side ul { list-style: none; margin: 22px 0 0; padding: 0; }
.dg-site .um-account-side ul li { margin: 0 0 6px; }

.dg-site .um-account-side ul li a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--body);
  font-family: 'Bai Jamjuree', sans-serif;
  font-weight: 600; font-size: .81rem;
  letter-spacing: .06em;
  transition: .25s var(--ease);
}
.dg-site .um-account-side ul li a:hover {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line);
  color: #fff;
}
.dg-site .um-account-side ul li.current a,
.dg-site .um-account-side ul li a.current {
  background: rgba(27, 124, 227, .12);
  border-color: rgba(27, 124, 227, .45);
  color: #fff;
}
/* UM's chevron on the right of each row */
.dg-site .um-account-side ul li a i:last-child { margin-left: auto; opacity: .5; }
.dg-site .um-account-side ul li a i { color: var(--blue-lt); }

/* the mobile tab bar UM swaps in below 500px */
.dg-site .um-account-nav a {
  color: var(--body);
  font-family: 'Bai Jamjuree', sans-serif;
  font-weight: 600; letter-spacing: .06em;
}

/* -------------------------------------------------------------- tab heading */

.dg-site .um-account-heading {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Bai Jamjuree', sans-serif;
  font-weight: 700; font-size: 1.15rem; color: #fff;
  padding-bottom: 18px; margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.dg-site .um-account-heading i { color: var(--blue-lt); }

/* ------------------------------------------------------------------ fields */

.dg-site .um-field { margin-bottom: 20px; padding: 0; }

.dg-site .um-field-label label,
.dg-site .um-field-label {
  font-family: 'Bai Jamjuree', sans-serif;
  font-weight: 600; font-size: .755rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute) !important;
  margin-bottom: 7px;
}

.dg-site .um-field-area input[type=text],
.dg-site .um-field-area input[type=email],
.dg-site .um-field-area input[type=password],
.dg-site .um-field-area input[type=tel],
.dg-site .um-field-area input[type=number],
.dg-site .um-field-area select,
.dg-site .um-field-area textarea,
.dg-site .um input.um-form-field {
  width: 100%;
  background: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: .9em 1em !important;
  color: #fff !important;
  font: inherit;
  font-size: 1rem;
  box-shadow: none !important;
  transition: .25s var(--ease);
}
.dg-site .um input.um-form-field:focus,
.dg-site .um-field-area textarea:focus,
.dg-site .um-field-area select:focus {
  border-color: var(--blue) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(27, 124, 227, .16) !important;
}
.dg-site .um input.um-form-field::placeholder { color: #69737f; }

/* Fields Ultimate Member disables -- the username on the account tab is one --
   must READ as disabled. Same background as an editable box would be a lie the
   customer only discovers after typing into it. */
.dg-site .um input.um-form-field[disabled],
.dg-site .um input.um-form-field[readonly] {
  background: rgba(255, 255, 255, .025) !important;
  color: var(--mute) !important;
  cursor: not-allowed;
}

/* validation, kept in UM's own colours so an error still reads as an error */
.dg-site .um .um-field-error,
.dg-site .um .um-error-block { color: #ff8a8a; font-size: .88rem; }
.dg-site .um input.um-form-field.um-error { border-color: #c9483f !important; }

/* ----------------------------------------------------------------- buttons */

.dg-site .um input[type=submit].um-button,
.dg-site .um a.um-button,
.dg-site .um .um-button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Bai Jamjuree', sans-serif;
  font-weight: 700; font-size: .765rem;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 1.05em 1.9em !important;
  border-radius: 999px !important;
  background: var(--blue-btn) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 34px -12px var(--blue-glow);
  transition: .32s var(--ease);
  width: auto !important;
  height: auto !important;
  line-height: 1.2 !important;
}
.dg-site .um input[type=submit].um-button:hover,
.dg-site .um a.um-button:hover {
  background: #1568c9 !important;
  box-shadow: 0 16px 46px -12px rgba(27, 124, 227, .75);
  transform: translateY(-2px);
}

/* Delete Account is the one destructive control in here. UM styles it the same
   as Save. It should not look the same as Save. */
.dg-site .um-account-tab-delete input[type=submit].um-button {
  background: transparent !important;
  border: 1px solid rgba(201, 72, 63, .55) !important;
  color: #ff9b93 !important;
  box-shadow: none;
}
.dg-site .um-account-tab-delete input[type=submit].um-button:hover {
  background: rgba(201, 72, 63, .12) !important;
  border-color: #c9483f !important;
  transform: none;
}

/* --------------------------------------------------------- login / register */

.dg-site .um-login,
.dg-site .um-register,
.dg-site .um-password {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  max-width: 520px;
  margin-inline: auto;
}
.dg-site .um-login .um-col-alt a,
.dg-site .um-register .um-col-alt a,
.dg-site .um .um-link-alt a { color: var(--blue-lt); }
.dg-site .um .um-col-alt-b { margin-top: 26px; }

/* ---------------------------------------------------------------- directory */

.dg-site .um-directory .um-members-wrapper,
.dg-site .um-directory .um-member {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.dg-site .um-directory .um-member-name a { color: #fff; }
.dg-site .um-directory .um-member-meta-main,
.dg-site .um-directory .um-member-note { color: var(--mute); }
.dg-site .um-search input { color: #fff; }

/* -------------------------------------------------------------------- misc */

.dg-site .um .um-clear { clear: both; }
.dg-site .um a { text-decoration: none; }
.dg-site .um i { font-style: normal; }

/* UM's modal (crop, confirm) sits above everything; keep it legible on dark */
.dg-site .um-modal-body,
.dg-site .um-modal-header { color: #fff; }

/* ------------------------------------------------- contact form messages
 *
 * Lives here rather than in dg.css because it only ever appears on a page the
 * plugin has rendered a response into -- the standalone build has no server to
 * come back from. */
.dg-formnote {
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 22px;
  font-size: .95rem;
  line-height: 1.5;
  border: 1px solid;
}
.dg-formnote.ok {
  background: rgba(15, 138, 77, .12);
  border-color: rgba(15, 138, 77, .5);
  color: #7ee0ab;
}
.dg-formnote.warn {
  background: rgba(201, 130, 45, .12);
  border-color: rgba(201, 130, 45, .5);
  color: #f0c48a;
}
/* the honeypot: gone, but not display:none -- some bots skip hidden fields */
.dg-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}