/* ============================================================
   Erilih Custom Profile Button
   CSS for dropdown visibility + checkbox custom styles
   ============================================================ */

/* --- Dropdown visibility (controlled by JS) --- */

/* Make wrapper the positioning context for dropdown */
.erilih-profile {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.erilih-profile .erilih-profile__dropdown {
  /* Position and center under the button */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) scaleY(0.95); /* keep translateX for centering */
  transform-origin: top;                     /* keep animation origin */
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease; /* single source of truth */
}

/* JS-controlled open state */
.erilih-profile.is-open .erilih-profile__dropdown {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) scaleY(1); /* keep centering + open animation */
}

/* --- Header button helpers (icon/text spacing) --- */
.erilih-profile .motors-profile-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* overridden by Elementor control */
  white-space: nowrap;
}

.erilih-profile .erilih-btn-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Checkbox row layout gap (overridden by Elementor) --- */
.erilih-profile .form-checker label > span.erilih-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- Custom Checkbox (separate bg & tick colors) --- */
.erilih-profile input.erilih-checkbox {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  width: var(--erilih-cb-size, 16px);
  height: var(--erilih-cb-size, 16px);
  background: var(--erilih-cb-bg, #ffffff);
  border: 1px solid #c8c8c8; /* overridden by Elementor Border control */
  border-radius: 4px;         /* overridden by Elementor radius control */
  vertical-align: middle;
  cursor: pointer;
  outline: none;
}

.erilih-profile input.erilih-checkbox::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 22%;
  width: 40%;
  height: 70%;
  transform: translateX(-50%) rotate(45deg);
  border-right: var(--erilih-cb-tick-weight, 2px) solid var(--erilih-cb-tick, #ffffff);
  border-bottom: var(--erilih-cb-tick-weight, 2px) solid var(--erilih-cb-tick, #ffffff);
  opacity: 0;
  pointer-events: none;
}

.erilih-profile input.erilih-checkbox:checked::after {
  opacity: 1;
}

/* Checkbox label text hover (Elementor can override colors) */
.erilih-profile .form-checker label:hover .erilih-checkbox-text {
  text-decoration: none;
}

/* (Removed the duplicate block that redefined transform/transition) */