/*
 * ULK Portal: Ultimate Member flat styling for Flatsome
 * Safe to override further in child-theme style.css
 */

/* --- Card wrapper used by custom UM templates --- */
.ulk-um-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
  padding: 26px;
}

.ulk-um--login .ulk-um-card{
  padding: 26px 24px;
}

/* Reduce UM default spacing quirks */
.ulk-um-card .um{
  margin: 0;
}

/* --- Inputs / buttons (flat) --- */
.ulk-um-card .um-form input[type="text"],
.ulk-um-card .um-form input[type="password"],
.ulk-um-card .um-form input[type="email"],
.ulk-um-card .um-form input[type="search"],
.ulk-um-card .um-form textarea,
.ulk-um-card .um-form select{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  box-shadow: none;
  padding: 11px 14px;
  height: auto;
}

.ulk-um-card .um-form input[type="text"]:focus,
.ulk-um-card .um-form input[type="password"]:focus,
.ulk-um-card .um-form input[type="email"]:focus,
.ulk-um-card .um-form input[type="search"]:focus,
.ulk-um-card .um-form textarea:focus,
.ulk-um-card .um-form select:focus{
  outline: none;
  border-color: rgba(0,0,0,.28);
}

/* Primary UM buttons */
.ulk-um-card .um-form .um-button,
.ulk-um-card .um-form input.um-button,
.ulk-um-card .um-form button.um-button{
  border-radius: 12px;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,.14);
  padding: 10px 16px;
  font-weight: 600;
}

/* Secondary / alt */
.ulk-um-card .um-form .um-button.um-alt,
.ulk-um-card .um-form .um-button.um-alt:hover{
  background: transparent;
}

/* Make UM error messages more "flat" */
.ulk-um-card .um-field-error,
.ulk-um-card .um-error{
  border-radius: 12px;
}

/* --- Member directory cards (grid): 4 columns, centered content --- */
.um-directory .um-members.um-members-grid{
  margin: 0;
}

/* Hide status label (“Принято/Approved”) */
.um-directory .um-member-status{
  display: none !important;
}

/* 4 columns on desktop */
@media (min-width: 1024px){
  .um-directory .um-members.um-members-grid .um-gutter-sizer{
    width: 2% !important;
  }
  .um-directory .um-members.um-members-grid .um-member{
    width: 23.5% !important;
    margin-bottom: 18px !important;
  }
}

/* 2 columns on tablets */
@media (min-width: 640px) and (max-width: 1023px){
  .um-directory .um-members.um-members-grid .um-gutter-sizer{
    width: 4% !important;
  }
  .um-directory .um-members.um-members-grid .um-member{
    width: 48% !important;
    margin-bottom: 16px !important;
  }
}

/* 1 column on phones */
@media (max-width: 639px){
  .um-directory .um-members.um-members-grid .um-gutter-sizer{
    width: 0 !important;
  }
  .um-directory .um-members.um-members-grid .um-member{
    width: 100% !important;
    margin-bottom: 14px !important;
  }
}

/* Card container look */
.um-directory .um-members.um-members-grid .um-member{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  overflow: hidden;
  text-align: center;
}

.um-directory .um-members.um-members-grid .um-member .um-member-photo{
  padding: 22px 0 10px 0 !important;
}

.um-directory .um-members.um-members-grid .um-member .um-member-photo a img{
  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  border-radius: 999px !important;
  border: none !important;
  object-fit: cover;
}

.um-directory .um-members.um-members-grid .um-member .um-member-card{
  padding: 0 14px 18px 14px !important;
}

.um-directory .um-members.um-members-grid .um-member .um-member-name{
  justify-content: center !important;
  margin: 0 !important;
}

.um-directory .um-members.um-members-grid .um-member .um-member-name a{
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,.82) !important;
}

/* Edit button: keep functional but make compact */
.um-directory .um-members.um-members-grid .um-member .um-members-edit-btn{
  margin: 10px 0 0 0 !important;
  height: auto !important;
}

.um-directory .um-members.um-members-grid .um-member .um-members-edit-btn a.um-edit-profile-btn{
  display: inline-block !important;
  min-width: 0 !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
  border-radius: 12px !important;
}

/* --- Birthday blocks (grid + horizontal scroll) --- */
.ulk-birthdays{ margin: 0; }

.ulk-bdays-section{ margin: 0 0 26px; }
.ulk-bdays-title{ margin: 0 0 14px; }

.ulk-bday-track{
  --ulk-gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  gap: var(--ulk-gap);
  justify-content: flex-start;
}

/* Grid mode (<= limit): wraps and looks like a grid */
.ulk-bday-track.is-grid{
  flex-wrap: wrap;
  overflow: visible;
  justify-content: flex-start;
}

/* Slider mode (> limit): horizontal scroll */
.ulk-bday-track.is-slider{
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scroll-padding-left: 0;
}

.ulk-bday-track.is-slider .ulk-birthdays__item{
  scroll-snap-align: start;
}

/* Desktop: show 4 cards in viewport */
.ulk-bday-track .ulk-birthdays__item{
  margin: 0;
  box-sizing: border-box;
  flex: 0 0 calc((100% - 3*var(--ulk-gap))/4);
}

/* Mobile/tablet: show 2 cards in viewport */
@media (max-width: 849px){
  .ulk-bday-track .ulk-birthdays__item{
    flex: 0 0 calc((100% - var(--ulk-gap))/2);
  }
}

/*
 * Single card: do NOT stretch to full width.
 * (Full-width looks "растянут" in ULK portal sections.)
 */

.ulk-birthdays__card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.ulk-birthdays__card:hover,
.ulk-birthdays__card:focus{
  border-color: rgba(0,0,0,.16);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.ulk-birthdays__avatar img{
  width: 150px !important;
  height: 150px !important;
  border-radius: 999px !important;
  object-fit: cover;
}

.ulk-birthdays__fio{
  font-weight: 700;
  margin-top: 10px;
  color: rgba(0,0,0,.82);
}

.ulk-birthdays__date{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(0,0,0,.6);
}


/* =========================================================
   ULK Corporate: UM Datepicker (pickadate.js)
   Fixes broken layout caused by theme/global styles.
   Scope: only pickers generated for Ultimate Member field `birth_date`.
   ========================================================= */

/* Brand */
:root{
  --ulk-primary: #B80000;
  --ulk-primary-weak: rgba(184,0,0,.14);
  --ulk-primary-mid: rgba(184,0,0,.30);
}

/* Make UM primary actions red (portal brand) */
.ulk-um-card .um-form .um-button:not(.um-alt),
.ulk-um-card .um-form input.um-button,
.ulk-um-card .um-form button.um-button{
  background: var(--ulk-primary) !important;
  border-color: var(--ulk-primary) !important;
  color: #fff !important;
}
.ulk-um-card .um-form .um-button:not(.um-alt):hover{
  filter: brightness(.95);
}

/* Picker root uses predictable id: birth_date-<formid>_root */
.picker[id^="birth_date-"][id$="_root"],
.picker[id^="birth_date-"][id$="_root"] *{
  box-sizing: border-box !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/*
 * IMPORTANT:
 * Pickadate creates the DOM for each field immediately.
 * If we force the holder/frame to be fixed/centered unconditionally,
 * it behaves like an always-on overlay and can “eat” clicks.
 *
 * Therefore:
 *  - when CLOSED  → keep holder in-flow and non-interactive
 *  - when OPENED  → turn into a fullscreen overlay modal
 */

/* Closed state: keep it from affecting layout / clicks */
.picker[id^="birth_date-"][id$="_root"] .picker__holder{
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  overflow: visible !important;
  background: transparent !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Opened state: fullscreen overlay */
.picker[id^="birth_date-"][id$="_root"].picker--opened .picker__holder{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  background: rgba(0,0,0,.45) !important;
  z-index: 100000 !important;
  pointer-events: auto !important;
}

/* Centered modal frame ONLY when opened */
.picker[id^="birth_date-"][id$="_root"].picker--opened .picker__frame{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100% - 24px) !important;
  max-width: 460px !important;
  min-width: 320px !important;
  margin: 0 !important;
}

/* Container */
.picker[id^="birth_date-"][id$="_root"] .picker__box{
  background: #fff !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.25) !important;
}

/* Header */
.picker[id^="birth_date-"][id$="_root"] .picker__header{
  position: relative !important;
  margin: 0 !important;
  padding: 14px 14px 12px !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  min-height: 60px !important;
}

/* Hide month select (UM can render it in some configs) */
.picker[id^="birth_date-"][id$="_root"] select.picker__select--month{
  display: none !important;
}

/* Month label */
.picker[id^="birth_date-"][id$="_root"] .picker__month{
  display: block !important;
  text-align: center !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  color: #111 !important;
  margin: 0 !important;
}

/* Year select */
.picker[id^="birth_date-"][id$="_root"] select.picker__select--year{
  position: absolute !important;
  left: 14px !important;
  top: 12px !important;
  width: 110px !important;
  max-width: 110px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(0,0,0,.04) !important;
  color: #111 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 18px !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Prev/Next buttons */
.picker[id^="birth_date-"][id$="_root"] .picker__nav--prev,
.picker[id^="birth_date-"][id$="_root"] .picker__nav--next{
  position: absolute !important;
  top: 12px !important;
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(0,0,0,.04) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Disable pickadate built-in arrow pseudo-elements (can look like double/"broken" arrows)
   and keep only our custom chevrons below. */
.picker[id^="birth_date-"][id$="_root"] .picker__nav--prev:after,
.picker[id^="birth_date-"][id$="_root"] .picker__nav--next:after{
  content: none !important;
  border: 0 !important;
}

.picker[id^="birth_date-"][id$="_root"] .picker__nav--prev{ left: 132px !important; }
.picker[id^="birth_date-"][id$="_root"] .picker__nav--next{ right: 14px !important; }

/* Nav arrows: use plain text (< and >) to avoid anti-aliasing/skew issues
   that can occur with rotated border chevrons on some zoom/DPI settings. */
.picker[id^="birth_date-"][id$="_root"] .picker__nav--prev:before,
.picker[id^="birth_date-"][id$="_root"] .picker__nav--next:before{
  content: "<" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  transform: translate(-50%, -56%) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: rgba(0,0,0,.75) !important;
}
.picker[id^="birth_date-"][id$="_root"] .picker__nav--next:before{ content: ">" !important; }

.picker[id^="birth_date-"][id$="_root"] .picker__nav--prev:hover,
.picker[id^="birth_date-"][id$="_root"] .picker__nav--next:hover{
  background: var(--ulk-primary-weak) !important;
  border-color: var(--ulk-primary-mid) !important;
}

/* Table + weekdays */
.picker[id^="birth_date-"][id$="_root"] .picker__table{
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  margin: 0 !important;
  border: 0 !important;
}

.picker[id^="birth_date-"][id$="_root"] .picker__table td{
  padding: 0 !important; /* critical: remove UM padding 0 10px */
  border: 0 !important;
}

.picker[id^="birth_date-"][id$="_root"] .picker__weekday{
  padding: 10px 0 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,.55) !important;
}

/* Days */
.picker[id^="birth_date-"][id$="_root"] .picker__day{
  display: block !important;
  padding: 0 !important; /* critical: override UM padding:10px 0 */
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  margin: 2px auto !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  color: #111 !important;
  background: transparent !important;
}

.picker[id^="birth_date-"][id$="_root"] .picker__day--outfocus{ color: rgba(0,0,0,.32) !important; }

.picker[id^="birth_date-"][id$="_root"] .picker__day--infocus:hover{
  background: var(--ulk-primary-weak) !important;
}

.picker[id^="birth_date-"][id$="_root"] .picker__day--selected,
.picker[id^="birth_date-"][id$="_root"] .picker__day--highlighted{
  background: var(--ulk-primary) !important;
  color: #fff !important;
}

/* Footer buttons */
.picker[id^="birth_date-"][id$="_root"] .picker__footer{
  padding: 12px 14px 14px !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  background: #fff !important;
  height: auto !important;
  line-height: normal !important;
  display: flex !important;
  gap: 10px !important;
}

.picker[id^="birth_date-"][id$="_root"] .picker__footer button{
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 18px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
}

.picker[id^="birth_date-"][id$="_root"] .picker__button--today,
.picker[id^="birth_date-"][id$="_root"] .picker__button--clear{
  background: #fff !important;
  color: #111 !important;
}

.picker[id^="birth_date-"][id$="_root"] .picker__button--close{
  background: var(--ulk-primary) !important;
  border-color: var(--ulk-primary) !important;
  color: #fff !important;
}

/* Mobile: bottom sheet feel */
@media (max-width: 640px){
  .picker[id^="birth_date-"][id$="_root"] .picker__frame{
    top: auto !important;
    bottom: 12px !important;
    transform: translate(-50%, 0) !important;
    max-width: 520px !important;
    min-width: 0 !important;
  }
  .picker[id^="birth_date-"][id$="_root"] select.picker__select--year{ width: 96px !important; max-width: 96px !important; }
  .picker[id^="birth_date-"][id$="_root"] .picker__nav--prev{ left: 118px !important; }
}