/* ===============================
   Import Fonts
   =============================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --primary: #000000;   /* Black */
  --accent: #000000;    /* was #405fff, now Black */
  --text: #333333;
  --bg: transparent;    /* allow html background image to show through */
  --light-bg: #f7f7f7;
}

/* ===============================
   Base
   =============================== */
html, body {
  height: 100%; /* allow flex wrapper to stretch */
  margin: 0;
  padding: 0;
}

/* Lowest layer page background image */
html {
  background:
    url('https://storage.unitedwebnetwork.com/files/1346/db4e8e885088c6106e0dba5233fb2603.jpg')
      center center / cover no-repeat fixed,
    linear-gradient(180deg, #ffffff 0%, #f8f9ff 40%, #f7f7f7 100%);
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);  /* transparent so html bg shows */
  line-height: 1.6;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover,
a:focus {
  color: var(--primary);
  outline: none;
}

/* ===============================
   Page Wrapper for Sticky Footer
   =============================== */
.container-mobile {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Content grows, pushes footer down */
#fContent {
  flex: 1 0 auto;
}

/* Footer stays at bottom if content is short */
#fFooter {
  flex-shrink: 0;
  background: #000;       /* was #405fff */
  color: #fff;
  padding: 20px 0;
  font-size: 14px;
  text-align: center;
  border-top: 3px solid var(--accent);
}

#fFooter a {
  color: #fff;
  font-weight: 500;
}

#fFooter a:hover {
  color: var(--accent);
}

/* ===============================
   Header
   =============================== */
.fHeader {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.fHeader.scrolled {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.fHeader .region-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  position: relative;
}

.header-logo img {
  max-height: 50px;
  transition: max-height 0.3s ease;
}

.fHeader.scrolled .header-logo img {
  max-height: 40px; /* shrink logo on scroll */
}

.menu-horizontal {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}

/* ===============================
   Navigation Menu
   =============================== */
.fMenu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 25px;
}

.fMenu .menu-item a {
  color: var(--accent);
  font-weight: 500;
  font-size: 15px;
  padding: 10px 0;
  position: relative;
  letter-spacing: 0.3px;
}

.fMenu .menu-item a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

.fMenu .menu-item a:hover,
.fMenu .menu-item a:focus {
  color: var(--primary);
}

.fMenu .menu-item a:hover::after,
.fMenu .menu-item a:focus::after {
  width: 100%;
}

.fMenu .menu-item.active a {
  color: var(--primary);
  font-weight: 600;
}

.fMenu .menu-item.active a::after {
  width: 100%;
}

/* Dropdowns (future proof) */
.fMenu .menu-item ul {
  display: none;
  position: absolute;
  background: #fff;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  border: 1px solid #ddd;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  z-index: 9999;
}

.fMenu .menu-item:hover > ul {
  display: block;
}

.fMenu .menu-item ul li {
  padding: 5px 20px;
  white-space: nowrap;
}

.fMenu .menu-item ul li a {
  color: var(--text);
  font-size: 14px;
}

/* ===============================
   Burger Toggle (Right Aligned)
   =============================== */
.menu-toggle {
  display: none !important;
  cursor: pointer;
  font-size: 26px;
  color: var(--accent);
  padding: 5px 10px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.fHeader.show-menu .menu-toggle i {
  transform: rotate(90deg);
  color: var(--primary);
}

/* ===============================
   Page Title
   =============================== */
/* HIDE COMPLETELY per your request */
.fPageTitle,
.view-login .fPageTitle {
  display: none !important;
}

/* (Existing styles kept below but harmless since the element is hidden)
.fPageTitle { background: var(--light-bg); padding: 20px 0; text-align: center; animation: fadeIn 0.5s ease; }
.fPageTitle h1 { margin: 0; font-size: clamp(1.5rem, 2vw, 2.2rem); font-weight: 600; color: var(--accent); }
*/

/* ===============================
   Scroll to Top
   =============================== */
#nav-up {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #b94582 !important;  /* circle fill color updated */
  color: #000;                      /* arrow/icon stays black */
  border-radius: 50%;
  width: 45px;
  height: 45px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
}

#nav-up.show {
  opacity: 1;
  pointer-events: auto;
}

#nav-up:hover {
  background: #b94582 !important; /* keep same hue on hover */
  filter: brightness(0.92);
}

/* Force inner icon to remain black regardless of markup */
#nav-up i,
#nav-up svg { color: #000 !important; }
#nav-up svg path,
#nav-up svg polygon,
#nav-up svg line,
#nav-up svg polyline {
  fill: #000 !important;
  stroke: #000 !important;
}

/* ===============================
   Responsive
   =============================== */
@media (max-width: 991px) {
  .menu-toggle {
    display: block !important;
  }

  .menu-horizontal {
    width: 100%;
    justify-content: flex-start;
  }

  .fMenu {
    flex-direction: column;
    gap: 15px;
    width: 100%;
    display: none;
    padding: 15px 0;
    animation: fadeIn 0.3s ease;
    text-align: center;
  }

  .fHeader.show-menu .fMenu {
    display: flex;
  }

  /* Dropdown mobile */
  .fMenu .menu-item ul {
    position: static;
    border: none;
    box-shadow: none;
    padding-left: 15px;
  }
}

@media (max-width: 575px) {
  #nav-up {
    width: 40px;
    height: 40px;
    bottom: 15px;
    right: 15px;
  }

  /* .fPageTitle hidden already; spacing remains fine */
}

/* ===============================
   Animations
   =============================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===============================
   Login Page Styling (Finalized with repeat password)
   =============================== */
body.view-login {
  background: transparent; /* show the global background image */
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
}

/* Form container */
.fForm {
  max-width: 420px;
  margin: 40px auto;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
}

/* Headline was here for .fPageTitle (now hidden) */

/* Labels */
.fForm label {
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
  color: #333;
  text-align: left;
}

/* Inputs */
.fForm input[type="text"],
.fForm input[type="password"] {
  width: 100%;
  padding: 12px 44px 12px 14px; /* extra right padding for eye toggle if you re-enable */
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #b94582;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.fForm input[type="text"]:focus,
.fForm input[type="password"]:focus {
  border-color: #b94582;
  box-shadow: 0 0 0 3px rgba(114, 72, 189, 0.2);
  outline: none;
}

/* Hide password + repeat password completely (unchanged) */
#form-item-password,
#form-item-password_repeat {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Input wrapper for eye toggle */
.input-wrapper {
  position: relative;
  width: 100%;
}

/* Eye toggle button — leave as-is; will not appear if fields are hidden */
.toggle-visibility {
  position: absolute;
  right: 12px;
  top: 70%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 22px;
  color: #b94582;            /* was #405fff */
  background: none;
  border: none;
  line-height: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.toggle-visibility:hover {
  color: #000;
}

/* Submit Button */
.fForm input[type="submit"] {
  width: 100%;
  background: #b94582;      /* was #405fff */
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
  border: none;
  border-radius: 6px;
  margin-top: 0px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.fForm input[type="submit"]:hover {
  background: #111;
  transform: translateY(-2px);
}

.fForm input[type="submit"]:active {
  transform: translateY(0);
}

/* Messages / errors */
#f-messages {
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
}

#f-messages.error {
  background: #ffe6e6;
  border: 1px solid #ffb3b3;
  color: #a33;
}

#f-messages.success {
  background: #e6f9ec;
  border: 1px solid #b3e6c2;
  color: #2d7a46;
}

/* ===== Your requested form-only tweaks ===== */
/* (A) Fieldset: remove top border & top padding) */
.fForm fieldset {
  border-top: none !important;
  padding-top: 0 !important;
}

/* (B) Hide “Sign In” (or similar) right after submit & collapse space */
.fForm input[type="submit"] + * {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Also catch common helper lines */
.fForm .sign-in,
.fForm .signin,
.fForm .login-help,
.fForm .form-note,
.fForm .below-submit,
.fForm .after-submit,
.fForm .form-helper,
.fForm .helper-text {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive */
@media (max-width: 576px) {
  .fForm {
    margin: 20px;
    padding: 20px;
  }

  .fForm input[type="text"],
  .fForm input[type="password"] {
    font-size: 16px;
  }

  .toggle-visibility {
    font-size: 20px;
    right: 10px;
  }
}