/*
 * EPHARO SHARED UI KIT
 * Canonical reusable visual components.
 *
 * Components:
 * - Xenyra standalone orb
 * - Xenyra action button
 * - modal close button
 *
 * Do not duplicate these components inside individual modules.
 */

:root {
  --eph-ui-xenyra-green: #086b36;
  --eph-ui-xenyra-green-hover: #075c2f;
  --eph-ui-xenyra-text: #ffffff;

  --eph-ui-orb-size: 48px;
  --eph-ui-button-orb-size: 36px;

  --eph-ui-close-size: 44px;
  --eph-ui-close-color: #0a4f31;
  --eph-ui-close-border: #d5e5dc;
}

.eph-ui-xenyra-orb {
  --eph-ui-current-orb-size:
    var(--eph-ui-orb-size);

  width:
    var(--eph-ui-current-orb-size) !important;

  height:
    var(--eph-ui-current-orb-size) !important;

  min-width:
    var(--eph-ui-current-orb-size) !important;

  min-height:
    var(--eph-ui-current-orb-size) !important;

  flex:
    0 0 var(--eph-ui-current-orb-size) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  position: relative !important;
  overflow: visible !important;
  vertical-align: middle !important;
}

.eph-ui-xenyra-orb,
.eph-ui-xenyra-orb * {
  pointer-events: none;
}

.eph-ui-xenyra-button {
  appearance: none;
  border: 0;
  border-radius: 999px;

  min-height: 46px;
  padding: 5px 20px 5px 5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  background:
    var(--eph-ui-xenyra-green);

  color:
    var(--eph-ui-xenyra-text);

  font: inherit;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;

  cursor: pointer;

  box-shadow:
    0 8px 19px rgba(4, 70, 35, 0.17);

  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.eph-ui-xenyra-button:hover {
  background:
    var(--eph-ui-xenyra-green-hover);

  box-shadow:
    0 10px 24px rgba(4, 70, 35, 0.23);

  transform:
    translateY(-1px);
}

.eph-ui-xenyra-button:active {
  transform:
    translateY(0);
}

.eph-ui-xenyra-button:focus-visible {
  outline:
    3px solid rgba(39, 135, 255, 0.34);

  outline-offset:
    3px;
}

.eph-ui-xenyra-button
.eph-ui-xenyra-orb {
  --eph-ui-current-orb-size:
    var(--eph-ui-button-orb-size);

  margin-left: 0 !important;
}

.eph-ui-xenyra-button-label {
  display: inline-block;
  padding-top: 1px;
}

.eph-ui-modal-close {
  appearance: none;

  width:
    var(--eph-ui-close-size);

  height:
    var(--eph-ui-close-size);

  min-width:
    var(--eph-ui-close-size);

  min-height:
    var(--eph-ui-close-size);

  border:
    1px solid var(--eph-ui-close-border);

  border-radius:
    50%;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  background:
    rgba(255, 255, 255, 0.88);

  color:
    var(--eph-ui-close-color);

  font:
    inherit;

  font-size:
    28px;

  font-weight:
    400;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.eph-ui-modal-close:hover {
  background:
    #ffffff;

  transform:
    scale(1.04);
}

.eph-ui-modal-close:focus-visible {
  outline:
    3px solid rgba(39, 135, 255, 0.3);

  outline-offset:
    3px;
}

@media (max-width: 640px) {
  :root {
    --eph-ui-orb-size: 42px;
    --eph-ui-button-orb-size: 32px;
    --eph-ui-close-size: 40px;
  }

  .eph-ui-xenyra-button {
    min-height: 42px;
    padding-right: 16px;
    gap: 9px;
  }
}