/* ============================================
   ULTIMATE MEMBER BUTTON SIZE FIX - PRIORITY
   ============================================ */

/* Reset button sizing to work on both pages - HIGHER SPECIFICITY */
.um input[type="submit"].um-button,
.um .um-button.um-button,
.um a.um-button.um-button,
.um-left.um-half input.um-button,
.um-right.um-half a.um-button.um-alt,
input.um-submit-btn.um-button,
.um-left.um-half a.um-button.um-alt,
.um-right.um-half input.um-button {
  /* Color scheme - blue background, white text */
  background: #3ba1da !important;
  color: white !important;
  border: 2px solid #3ba1da !important;
  
  /* Smaller, compatible sizing */
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 30px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin: 10px auto !important;
  width: auto !important;
  max-width: 200px !important;
  min-height: 40px !important;
  height: auto !important;
  line-height: normal !important;
  box-sizing: border-box !important;
  flex: none !important;
}

.um input[type="submit"].um-button:hover,
.um .um-button.um-button:hover,
.um a.um-button.um-button:hover,
.um-left.um-half input.um-button:hover,
.um-right.um-half a.um-button.um-alt:hover,
input.um-submit-btn.um-button:hover,
.um-left.um-half a.um-button.um-alt:hover,
.um-right.um-half input.um-button:hover {
  background: #2980b9 !important;
  border-color: #2980b9 !important;
}

/* Remove any container restrictions we added */
.um-form,
.um-login {
  padding-bottom: 20px !important;
}

/* UNIVERSAL WORDPRESS MENU BACKGROUND + TEXT COLOR */
/* Applies to all themes using block navigation */

.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container-content,
.wp-block-navigation ul,
.wp-block-navigation__container {
  background-color: #2E2E2E !important; /* premium gray */
  color: #FFFFFF !important; /* white text */
}

/* Menu links */
.wp-block-navigation a,
.wp-block-navigation__responsive-container a {
  color: #FFFFFF !important;
}

/* Hover + focus states */
.wp-block-navigation a:hover,
.wp-block-navigation a:focus {
  color: #FFFFFF !important;
  opacity: 0.85; /* subtle premium effect */
}

/* Remove any theme shadows or borders that break the aesthetic */
.wp-block-navigation__responsive-dialog {
  box-shadow: none !important;
  border: none !important;
}

/* Add domain text next to hamburger menu */
.wp-block-navigation__responsive-container-open::after {
  content: "theclairsaintflow.com";
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  pointer-events: none;
}

/* ============================================
   GLOBAL STYLES
   ============================================ */

.rounded-bg {
  border-radius: 30px;
  overflow: hidden;
}

button,
.wp-block-button__link,
input[type="submit"],
input[type="button"],
input[type="reset"],
.frm_button_submit,
.frm_button {
  border-radius: 30px;
}

img {
  border-radius: 30px;
  overflow: hidden;
}

button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.frm_button_submit:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
a.button:hover,
a.btn:hover {
  background-color: #ffcc00 !important;
  border-color: #ffcc00 !important;
  color: #000000 !important;
}

/* ============================================
   SCROLL DOWN INDICATOR
   ============================================ */

#scroll-down-indicator {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 9999;
}

#scroll-down-indicator.show {
  opacity: 1;
}

#scroll-down-indicator .arrow {
  width: 22px;
  height: 22px;
  border-left: 3px solid #ffcc00;
  border-bottom: 3px solid #ffcc00;
  transform: rotate(-45deg);
  animation: bounce 1.4s infinite ease-in-out;
}

@keyframes bounce {
  0% { transform: translateY(0) rotate(-45deg); }
  50% { transform: translateY(8px) rotate(-45deg); }
  100% { transform: translateY(0) rotate(-45deg); }
}

/* ============================================
   NAVIGATION MENU
   ============================================ */

/* Hide the default SVG hamburger icon */
.wp-block-navigation__responsive-container-open svg {
  display: none !important;
}

/* Custom hamburger icon — NO POSITIONING AT ALL */
.wp-block-navigation__responsive-container-open {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  background-image: url('https://theclairsaintflow.com/wp-content/uploads/2026/01/Clairsaint-FLow-1024-x-1012-px3.png') !important;
  background-size: cover !important;
  background-position: center !important;

  border: none !important;
  border-radius: 50% !important;

  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;

  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  z-index: 999999 !important;
}

/* Hover effect */
.wp-block-navigation__responsive-container-open:hover {
  transform: scale(1.15) !important;
  transition: transform 0.3s ease !important;
}

/* Hide highlighted menu item when menu is open */
.wp-block-navigation__responsive-container--open 
.wp-block-navigation-item.is-active,
.wp-block-navigation__responsive-container--open 
.wp-block-navigation-item.is-current-menu-item {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================
   HIDE TITLE + SEARCH + MENU ICON WHEN MENU OPENS
   ============================================ */

body:has(.wp-block-navigation__responsive-container.is-menu-open) #site-title-fixed,
body:has(.wp-block-navigation__responsive-container.is-menu-open) #custom-search-trigger,
body:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open {
  display: none !important;
}

/* ============================================
   BACK TO TOP BUTTON - ARROW CENTERING
   ============================================ */

#backToTopBtn button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* ============================================
   ULTIMATE MEMBER BUTTONS - ORIGINAL (NOW OVERRIDDEN)
   ============================================ */

.um-left.um-half,
.um-right.um-half {
  width: auto !important;
  display: inline-block !important;
  flex: none !important;
}

@media (max-width: 768px) {
  .um-left.um-half,
  .um-right.um-half {
    width: 100% !important;
    display: block !important;
  }
}

/* Keep your existing hide-on-modal logic */
.has-modal-open button.wp-block-navigation__responsive-container-open,
body:has(.is-menu-open) button.wp-block-navigation__responsive-container-open {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Search boxes with rounded corners */
input[type="search"],
input[type="text"].search,
.search-field,
.wp-block-search__input,
form[role="search"] input {
  border-radius: 30px !important;
}
/**/
/* ============================================
   ULTIMATE MEMBER ELEGANT BUTTON REDESIGN
   ============================================ */

.um input[type="submit"].um-button,
.um .um-button.um-button,
.um a.um-button.um-button,
.um-left.um-half input.um-button,
.um-right.um-half a.um-button.um-alt,
input.um-submit-btn.um-button,
.um-left.um-half a.um-button.um-alt,
.um-right.um-half input.um-button {
  /* Elegant styling */
  background: linear-gradient(135deg, #3ba1da 0%, #2980b9 100%) !important;
  color: white !important;
  border: none !important;
  
  /* Refined sizing */
  padding: 14px 28px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  border-radius: 50px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin: 12px auto !important;
  width: auto !important;
  max-width: 220px !important;
  min-width: 140px !important;
  min-height: 48px !important;
  
  /* Premium effects */
  box-shadow: 0 4px 15px rgba(59, 161, 218, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.um input[type="submit"].um-button:hover,
.um .um-button.um-button:hover,
.um a.um-button.um-button:hover,
.um-left.um-half input.um-button:hover,
.um-right.um-half a.um-button.um-alt:hover,
input.um-submit-btn.um-button:hover,
.um-left.um-half a.um-button.um-alt:hover,
.um-right.um-half input.um-button:hover {
  background: linear-gradient(135deg, #2980b9 0%, #1e6091 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(59, 161, 218, 0.4) !important;
}

/* Active/pressed state */
.um input[type="submit"].um-button:active,
.um .um-button.um-button:active,
.um a.um-button.um-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px rgba(59, 161, 218, 0.2) !important;
}

/* ============================================
   ULTIMATE MEMBER ELEGANT BUTTON REDESIGN - WIDE & CENTERED
   ============================================ */

.um input[type="submit"].um-button,
.um .um-button.um-button,
.um a.um-button.um-button,
.um-left.um-half input.um-button,
.um-right.um-half a.um-button.um-alt,
input.um-submit-btn.um-button,
.um-left.um-half a.um-button.um-alt,
.um-right.um-half input.um-button {
  /* Elegant styling */
  background: linear-gradient(135deg, #3ba1da 0%, #2980b9 100%) !important;
  color: white !important;
  border: none !important;
  
  /* Wide, sleek sizing like original */
  padding: 15px 40px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  border-radius: 50px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: block !important;
  margin: 15px auto !important;
  width: 280px !important;
  max-width: 90% !important;
  min-height: 50px !important;
  
  /* Premium effects */
  box-shadow: 0 3px 12px rgba(59, 161, 218, 0.25) !important;
  transition: all 0.3s ease !important;
}

.um input[type="submit"].um-button:hover,
.um .um-button.um-button:hover,
.um a.um-button.um-button:hover,
.um-left.um-half input.um-button:hover,
.um-right.um-half a.um-button.um-alt:hover,
input.um-submit-btn.um-button:hover,
.um-left.um-half a.um-button.um-alt:hover,
.um-right.um-half input.um-button:hover {
  background: linear-gradient(135deg, #2980b9 0%, #1e6091 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 18px rgba(59, 161, 218, 0.35) !important;
}

/* Force button containers to center */
.um-left.um-half,
.um-right.um-half {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* Fix "Keep me signed in" checkbox alignment - MORE SPECIFIC */
.um-form .um-field-checkbox,
.um-form .um-row .um-field-checkbox,
.um-form label[for*="rememberme"],
.um-form .um-field-checkbox label {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 20px auto !important;
  width: 100% !important;
}

/* Center the checkbox input itself */
.um-form input[type="checkbox"] {
  margin-right: 8px !important;
}

/* Alternative - force the entire checkbox row to center */
.um-form .um-row:has(input[type="checkbox"]) {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
}