/* Ultimate Member Custom Styles */
/**
    Ce code CSS a été développé spécialement pout le site de l'association Systemoun
    Il contient les éléments de perspnnalisation de l'extension Ultimate Member 
    pour le thème Systemoun.

    Ce code doit être copié et collé dans le menu CSS additionnel du site WordPress

**/

/** 
    SOMMAIRE :

    1. COULEURS
    2. BOUTONS

**/


/* COULEURS */

/* Les variables --systemoun-strong-color sont définies dans functions.php
   via la personnalisation WordPress et ne doivent PAS être redéfinies ici */


/* Link colors */
.um a.um-link,
.um .um-tip:hover,
.um .um-field-radio.active:not(.um-field-radio-state-disabled) i,
.um .um-field-checkbox.active:not(.um-field-radio-state-disabled) i,
.um .um-member-name a:hover,
.um .um-member-more a:hover,
.um .um-member-less a:hover,
.um .um-members-pagi a:hover,
.um .um-cover-add:hover,
.um .um-profile-subnav a.active,
.um .um-item-meta a,
.um-account-name a:hover,
.um-account-nav a.current,
.um-account-side li a.current span.um-account-icon,
.um-account-side li a.current:hover span.um-account-icon,
.um-dropdown li a:hover,
i.um-active-color,
span.um-active-color
{
    color: var(--systemoun-strong-color) !important;
}

.um a.um-link:hover,
.um a.um-link-hvr:hover {
    filter: brightness(0.85);
}

/* Button colors */
.um .um-field-group-head,
.picker__box,
.picker__nav--prev:hover,
.picker__nav--next:hover,
.um .um-members-pagi span.current,
.um .um-members-pagi span.current:hover,
.um .um-profile-nav-item.active a,
.um .um-profile-nav-item.active a:hover,
.upload,
.um-modal-header,
.um-modal-btn,
.um-modal-btn.disabled,
.um-modal-btn.disabled:hover,
div.uimob800 .um-account-side li a.current,
div.uimob800 .um-account-side li a.current:hover,
.um .um-button,
.um a.um-button,
.um a.um-button.um-disabled:hover,
.um a.um-button.um-disabled:focus,
.um a.um-button.um-disabled:active,
.um input[type=submit].um-button,
.um input[type=submit].um-button:focus,
.um input[type=submit]:disabled:hover
{
    background: var(--systemoun-strong-color) !important;
    background-color: var(--systemoun-strong-color) !important;
}

.um .um-field-group-head:hover,
.picker__footer,
.picker__header,
.picker__day--infocus:hover,
.picker__day--outfocus:hover,
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted,
.picker__list-item:hover,
.picker__list-item--highlighted:hover,
.picker--focused .picker__list-item--highlighted,
.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected,
.um .um-button:hover,
.um a.um-button:hover,
.um input[type=submit].um-button:hover{
    filter: brightness(0.85) !important;
}

/* Button alt colors */
.um .um-button.um-alt, 
.um input[type=submit].um-button.um-alt {
    background: #eeeeee !important;
}

.um .um-button.um-alt:hover,
.um input[type=submit].um-button.um-alt:hover {
    background: #e5e5e5 !important;	
}



/* **************************************************************** */
/* BOUTONS */
/* **************************************************************** */

/* Styles de base des boutons UM avec haute spécificité */
.um input.um-button, 
.um a.um-button, 
.um button.um-button,
input.um-button, 
a.um-button, 
button.um-button {
  background-color: var(--systemoun-strong-color) !important;
  color: #ffffff !important;
  padding: 14px 32px !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  text-align: center;
  display: inline-block;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

/* Sélecteurs spécifiques pour les boutons submit */
.um input[type="submit"].um-button,
.um input[type="submit"]#um-submit-btn,
input[type="submit"].um-button,
input[type="submit"]#um-submit-btn {
  background-color: var(--systemoun-strong-color) !important;
  color: #ffffff !important;
}

input.um-button *, a.um-button *, button.um-button * {
  color: #ffffff !important;
  text-decoration: none !important;
}

input.um-button.um-alt, a.um-button.um-alt, button.um-button.um-alt {
  background-color: #ffffff !important;
  color: var(--systemoun-strong-color) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

input.um-button:hover, a.um-button:hover, button.um-button:hover {
  filter: brightness(0.85) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.um input[type="submit"].um-button:hover,
.um input[type="submit"]#um-submit-btn:hover {
  filter: brightness(0.85) !important;
}

input.um-button:active, a.um-button:active, button.um-button:active {
  transform: translateY(1px) !important;
}

input.um-button:hover > *, a.um-button:hover > *, button.um-button:hover > * {
  color: #ffffff !important;
  text-decoration: none !important;
  filter: unset !important;
}

/* Alternative button hover style */
input.um-button.um-alt:hover, a.um-button.um-alt:hover, button.um-button.um-alt:hover {
  background-color: #f0f0f0 !important;
  color: var(--systemoun-strong-color) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  filter: none !important;
}

/* um-alt */
.um input.um-button.um-alt, .um a.um-button.um-alt, .um button.um-button.um-alt {
  background-color: #ffffff !important;
  color: var(--systemoun-strong-color) !important;
  box-shadow: none !important;
}

.um input.um-button.um-alt:hover, .um a.um-button.um-alt:hover, .um button.um-button.um-alt:hover {
  background-color: #f0f0f0 !important;
  color: var(--systemoun-strong-color) !important;
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2) !important;
}

/* input fields */
input.um-form-field, 
input.um-search-line,
textarea.um-form-field,
select.um-form-field {
    border-radius: 8px !important;
    padding: 12px 16px !important;
    border: 2px solid #e5e5e5 !important;
    font-size: 16px !important;
    background-color: #ffffff !important;
    transition: all 0.3s ease !important;
    font-family: 'Manrope', sans-serif !important;
    color: #333 !important;
}

textarea.um-form-field {
    min-height: 100px !important;
    resize: vertical !important;
}

input.um-form-field:focus, 
input.um-search-line:focus,
textarea.um-form-field:focus,
select.um-form-field:focus {
    outline: none !important;
    border-color: var(--systemoun-strong-color) !important;
    box-shadow: 0 0 0 3px rgba(25, 116, 76, 0.1) !important;
}

/* Bouton de recherche */
.um input.um-do-search,
.um input[type="button"].um-do-search,
input.um-do-search {
    background-color: var(--systemoun-strong-color) !important;
    color: #ffffff !important;
    padding: 12px 32px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    margin-left: 10px !important;
}

.um input.um-do-search:hover,
.um input[type="button"].um-do-search:hover,
input.um-do-search:hover {
    filter: brightness(0.85) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.um input.um-do-search:active,
.um input[type="button"].um-do-search:active,
input.um-do-search:active {
    transform: translateY(1px) !important;
}







/* rendre les cartes de profil de la même hauteur */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member{
      /* min-height: 400px !important; */
}


.um-member-directory-header-row.um-member-directory-search-row {
  justify-content: center !important;
}



/* affichage en flex à la place de grid */

/* Conteneur de recherche de répertoire de membres */
.um-member-directory-search-row {
  justify-content: center !important;
  margin: 30px 0 !important;
}

.um-member-directory-search-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.um-member-directory-search-line label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.um-member-directory-search-line span {
  font-weight: 600;
  color: #333;
}

.um-members-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  height: unset !important;
  gap: 20px;


  >* {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    position: relative !important;
    top: unset !important;
    left: unset !important;
    right: unset !important;
    margin-bottom: 0 !important;

    border-radius: 16px;
    overflow: hidden;
  }
  .um-gutter-sizer {
    display: none !important;

  }
  .um-clear {
    display: none !important;
  }
}