@charset "UTF-8";

/* =========================================================
   Palette neutra grayscale (nero → bianco)
   ========================================================= */
:root {
  --upx-black:   #000000;
  --upx-900:     #0d0d0d;
  --upx-800:     #1a1a1a;
  --upx-700:     #262626;
  --upx-600:     #3d3d3d;
  --upx-500:     #5c5c5c;
  --upx-400:     #7a7a7a;
  --upx-300:     #a3a3a3;
  --upx-200:     #c4c4c4;
  --upx-100:     #e5e5e5;
  --upx-50:      #f5f5f5;
  --upx-white:   #ffffff;

  /* Semantici */
  --upx-card-bg:         var(--upx-800);
  --upx-card-border:     var(--upx-900);
  --upx-card-shadow:     rgba(0, 0, 0, 0.35);
  --upx-text-on-dark:    var(--upx-white);
  --upx-text-muted:      var(--upx-200);

  --upx-state-available:      var(--upx-700);
  --upx-state-available-text: var(--upx-white);
  --upx-state-busy:           var(--upx-500);
  --upx-state-busy-text:      var(--upx-white);
  --upx-state-pause:          #6b6b6b;
  --upx-state-pause-text:     var(--upx-white);
  --upx-state-absent:         var(--upx-400);
  --upx-state-absent-text:    var(--upx-white);

  --upx-divider:              rgba(255, 255, 255, 0.3);
  --upx-avatar-radius:        50%;
  --upx-avatar-width:         80px;
  --upx-avatar-height:        80px;
  --upx-state-radius:         66px;
  --upx-card-radius:          16px;
  --upx-card-box-shadow:      none;

  --upx-cols-desktop:          3;
  --upx-cols-tablet:           2;
  --upx-cols-mobile-landscape: 1;
  --upx-cols-mobile-portrait:  1;

  --upx-avatar-bg:             #2ca893;

  --upx-font-title:            24px;
  --upx-font-body:             16px;
  --upx-font-state:            14px;

  --upx-popup-bg:              #1a1a1a;
  --upx-popup-text:            #ffffff;
  --upx-popup-btn-bg:          #2ca893;
  --upx-popup-btn-text:        #ffffff;
  --upx-popup-btn-radius:      8px;
  --upx-popup-font-size:       16px;
  --upx-popup-btn-font-size:   16px;

  /* Alias retro-compat */
  --occupato:                 var(--upx-state-busy);
}

/* =========================================================
   Clearfix
   ========================================================= */
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf      { zoom: 1; }

/* =========================================================
   Generic
   ========================================================= */
a:hover { text-decoration: none; }

.text-center { text-align: center; }

/* =========================================================
   Radio minuti
   ========================================================= */
.input-radio-minuti-wrapper_ea {
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-radio-minuti_ea {
  margin-left: 8px;
  margin-right: 8px;
}

/* =========================================================
   Icone (grayscale)
   ========================================================= */
.tel_ico_min_ea {
  display: inline-block;
  height: 13px;
  width: 13px;
  background: url("../images/tel_ico.svg") center center no-repeat;
  background-size: 100%;
  vertical-align: middle;
  text-align: center;
  margin-right: 2px;
  filter: brightness(0);
}

.icon_state_cart_btn_ea .tel_ico_ea,
.icon_state_ea .tel_ico_ea,
.icon_state_cart_btn_ea .tel_occ_ea,
.icon_state_ea .tel_occ_ea,
.icon_state_cart_btn_ea .tel_ass_ea,
.icon_state_ea .tel_ass_ea {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  margin-top: -3px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: 100%;
          mask-size: 100%;
}

.icon_state_cart_btn_ea .tel_ico_ea,
.icon_state_ea .tel_ico_ea {
  -webkit-mask-image: url("../images/tel_ico.svg");
          mask-image: url("../images/tel_ico.svg");
}

.icon_state_cart_btn_ea .tel_occ_ea,
.icon_state_ea .tel_occ_ea {
  -webkit-mask-image: url("../images/occupato_ico.svg");
          mask-image: url("../images/occupato_ico.svg");
}

.icon_state_cart_btn_ea .tel_ass_ea,
.icon_state_ea .tel_ass_ea {
  -webkit-mask-image: url("../images/assente_ico.svg");
          mask-image: url("../images/assente_ico.svg");
}

/* =========================================================
   Operator list
   ========================================================= */
#oprList_ea {
  font-size: var(--upx-font-body);
  list-style: none;
  padding: 0;
  font-family: "Asul local", sans-serif;
  width: 100%;
  clear: both;
  display: grid;
  align-items: stretch;
  column-gap: 20px;
  row-gap: 20px;
  grid-template-columns: repeat(var(--upx-cols-desktop), minmax(0, 1fr));
  grid-auto-flow: dense;
  justify-items: center;
}

@media (max-width: 991px) {
  #oprList_ea { grid-template-columns: repeat(var(--upx-cols-tablet), minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  #oprList_ea { grid-template-columns: repeat(var(--upx-cols-mobile-landscape), minmax(0, 1fr)); }
}

@media (max-width: 478px) {
  #oprList_ea { grid-template-columns: repeat(var(--upx-cols-mobile-portrait), minmax(0, 1fr)); }
}

#oprList_ea li {
  position: relative;
  width: 100%;
  align-self: start;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* =========================================================
   Card cartomante
   ========================================================= */
.scheda_cartomanti_ea,
.scheda_cartomanti_ea * {
  box-sizing: border-box;
}

.scheda_cartomanti_ea {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--upx-card-bg);
  padding: 12px;
  border-radius: var(--upx-card-radius);
  overflow: hidden;
  border: 1px solid var(--upx-card-border);
  box-shadow: var(--upx-card-box-shadow);
  gap: 10px;
}

.card-row-top_ea {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hRDPic_ea { flex: 0 0 auto; }

.hRDPic_ea img {
  display: block;
  width: var(--upx-avatar-width);
  height: var(--upx-avatar-height);
  border-radius: var(--upx-avatar-radius);
  border: 2px solid var(--upx-card-border);
  background: var(--upx-avatar-bg);
}

.card-row-info_ea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.card-row-info_ea > div:only-child {
  margin: 0 auto;
  text-align: center;
  float: none;
}

.btn_carto_ea { margin-top: auto; }

/* =========================================================
   Stato operatore
   ========================================================= */
.icon_state_ea,
.icon_state_inside_ea,
.icon_state_cart_btn_ea {
  color: var(--upx-text-on-dark);
  font-size: var(--upx-font-state);
  text-align: center;
  white-space: nowrap;
}

.icon_state_ea {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  border-radius: var(--upx-state-radius);
  margin: 10px 0 0;
  padding: 10px;
  font-weight: bold;
}

.icon_state_ea span { font-weight: bold; font-size: var(--upx-font-state); }

.icon_state_inside_ea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 2px 6px;
  border-radius: 6px;
  margin: 0;
}

.icon_state_cart_btn_ea {
  display: inline-block;
  vertical-align: middle;
  padding: 2px 10px;
  border-radius: 6px;
}

/* Varianti stato */
.cartomante_disponibile_ea,
.disponibile_link_ea:hover .cartomante_disponibile_ea,
.icon_state_cart_btn_ea.cartomante_disponibile_ea {
  background-color: var(--upx-state-available);
  color: var(--upx-state-available-text);
}

.disponibile_link_ea .cartomante_disponibile_ea {
  cursor: pointer;
}

.cartomante_occupato_ea,
.icon_state_cart_btn_ea.cartomante_occupato_ea {
  background-color: var(--upx-state-busy);
  color: var(--upx-state-busy-text);
}

.cartomante_pausa_ea,
.icon_state_cart_btn_ea.cartomante_pausa_ea {
  background-color: var(--upx-state-pause);
  color: var(--upx-state-pause-text);
}

.cartomante_assente_ea,
.cartomante_assente_ea span,
.icon_state_cart_btn_ea.cartomante_assente_ea {
  background-color: var(--upx-state-absent);
  color: var(--upx-state-absent-text);
}

/* =========================================================
   Divider
   ========================================================= */
.brxe-divider {
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 16px;
  width: 100%;
}

.brxe-divider .line {
  border-top: 1px solid var(--upx-divider);
  width: 90%;
}

/* =========================================================
   Typography
   ========================================================= */
.hRDName_ea {
  line-height: 1.2em;
  color: var(--upx-text-on-dark);
  font-family: "Droid serif";
  font-style: italic;
  font-size: var(--upx-font-title);
  padding-top: 4px;
}

.hRDName_ea a { color: var(--upx-text-on-dark); text-decoration: none; }

.hRDName_ea p { display: none; }

.hRDPin_ea,
.hRDprezzo_ea {
  display: inline-block;
  color: var(--upx-text-on-dark);
}

.hRDprezzo_ea {
  text-align: right;
}

/* =========================================================
   Template 2 — Avatar sporgente in alto
   ========================================================= */
#oprList_ea.oprList--t2_ea,
#oprList_ea:has(.scheda_cartomanti--t2_ea) {
  row-gap: calc(var(--upx-avatar-height) / 2 + 20px) !important;
  margin-top: calc(var(--upx-avatar-height) / 2 + 30px);
}

.scheda_cartomanti--t2_ea {
  position: relative;
  padding-top: calc(var(--upx-avatar-height) / 2 + 20px);
  text-align: center;
  overflow: visible;
}

.scheda_cartomanti--t2_ea .card-row-top_ea {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.scheda_cartomanti--t2_ea .hRDPic_ea {
  position: absolute;
  top: calc(var(--upx-avatar-height) / -2);
  left: 50%;
  transform: translateX(-50%);
  background: var(--upx-avatar-bg);
  border-radius: var(--upx-avatar-radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.scheda_cartomanti--t2_ea .hRDPic_ea img {
  border: none;
}

.scheda_cartomanti--t2_ea .hRDName_ea {
  padding-top: 0;
  text-align: center;
}

/* =========================================================
   Template 3 — Avatar quadrato sinistra, info destra
   ========================================================= */
.scheda_cartomanti--t3_ea {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 6px;
}

.scheda_cartomanti--t3_ea .card-row-top_ea { display: contents; }

.scheda_cartomanti--t3_ea .hRDPic_ea {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
}

.scheda_cartomanti--t3_ea .hRDPic_ea img {
  border-radius: 8px;
  object-fit: cover;
}

.scheda_cartomanti--t3_ea .hRDName_ea {
  grid-column: 2;
  grid-row: 1;
  padding-top: 0;
}

.scheda_cartomanti--t3_ea .card-row-info_ea {
  grid-column: 2;
  grid-row: 2;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.scheda_cartomanti--t3_ea .hRDPin_ea,
.scheda_cartomanti--t3_ea .hRDprezzo_ea {
  text-align: left;
  float: none;
}

.scheda_cartomanti--t3_ea .card-row-info_ea > div:only-child {
  margin: 0;
  text-align: left;
  float: none;
}

.scheda_cartomanti--t3_ea .btn_carto_ea {
  grid-column: 1 / -1;
}

/* =========================================================
   Template 4 — Hero banner con avatar grande
   ========================================================= */
.scheda_cartomanti--t4_ea {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.scheda_cartomanti--t4_ea .card-row-top_ea {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.scheda_cartomanti--t4_ea .hRDPic_ea {
  background: var(--upx-avatar-bg);
  text-align: center;
  width: 100%;
}

.scheda_cartomanti--t4_ea .hRDPic_ea img {
  display: block;
  margin: 0 auto;
  border-radius: var(--upx-avatar-radius);
  border: none;
}

.scheda_cartomanti--t4_ea .hRDName_ea {
  padding: 14px 14px 0;
  text-align: center;
}

.scheda_cartomanti--t4_ea .card-row-info_ea {
  padding: 4px 14px 0;
}

.scheda_cartomanti--t4_ea .btn_carto_ea {
  padding: 10px 14px 14px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media only screen and (max-width: 768px) {
  .cont_info_ea {
    padding-top: 8px;
    font-size: 12px;
  }

  .hRDPic_ea img {
    width: calc(var(--upx-avatar-width) * 0.75);
    height: calc(var(--upx-avatar-height) * 0.75);
    border-radius: var(--upx-avatar-radius);
    border: 2px solid var(--upx-card-border);
  }

  .hRDName_ea {
    line-height: 1.2em;
    color: var(--upx-text-on-dark);
    font-family: "Droid serif";
    font-style: italic;
    font-size: calc(var(--upx-font-title) * 0.85);
  }

  #oprList_ea {
    row-gap: 10px;
  }

  #oprList_ea li {
    position: relative;
    width: 100%;
    align-self: start;
  }

  .icon_state_ea {
    margin: 10px 0 0;
    padding: 4px;
  }
}

/* =========================================================
   Popup numerazioni
   ========================================================= */
.upx-num-popup-overlay_ea {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.upx-num-popup-overlay_ea.is-open_ea {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s linear 0s;
}
.upx-num-popup-overlay_ea.is-open_ea .upx-num-popup_ea {
  transform: scale(1);
}
.upx-num-popup_ea {
  transform: scale(0.96);
  transition: transform 180ms ease;
  background: var(--upx-popup-bg);
  color: var(--upx-popup-text);
  border-radius: 4px;
  padding: 28px 24px;
  min-width: 280px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  position: relative;
}
@media (min-width: 992px) {
  .upx-num-popup_ea {
    padding: 40px;
  }
}
.upx-num-popup__close_ea {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: 0;
  color: var(--upx-popup-text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.upx-num-popup__heading_ea {
  margin: 0 0 12px;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--upx-popup-text);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.upx-num-popup__title_ea {
  margin: 0 0 16px;
  text-align: center;
  font-size: var(--upx-popup-font-size);
  color: var(--upx-popup-text);
}
.upx-num-popup__list_ea {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.upx-num-popup__btn_ea {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--upx-popup-btn-bg);
  color: var(--upx-popup-btn-text);
  text-decoration: none;
  text-align: center;
  padding: 12px 16px;
  border-radius: var(--upx-popup-btn-radius);
  font-weight: 600;
  font-size: var(--upx-popup-btn-font-size);
  transition: opacity 0.15s;
}
.upx-num-popup__icon_ea {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--upx-icon-url);
          mask-image: var(--upx-icon-url);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.upx-num-popup__btn_ea:hover,
.upx-num-popup__btn_ea:focus {
  opacity: 0.88;
  color: var(--upx-popup-btn-text);
}