/* Elements marcats per al tour */
[data-tg-tour] {
  scroll-margin: 30px 0;
}

/* BACKDROP general del tour */
.tg-backdrop {
  position: absolute;
  top: 50vh;
  left: 50vw;
  width: 0;
  height: 0;

  display: none;
  align-items: center;
  justify-content: center;

  z-index: 99;
  border-radius: 7px;
  box-shadow:
    rgba(33, 33, 33, 0.85) 0 0 1px 2px,
    rgba(33, 33, 33, 0.85) 0 0 0 1000vh;
  border: 1px solid rgba(193, 192, 232, 0.5);
}

.tg-backdrop.tg-backdrop-animate {
  transition: all 300ms;
}

.tg-backdrop.allow-interaction {
  pointer-events: none;
}

/* DIÀLEG principal */
.tg-dialog {
  position: absolute;
  top: 0;
  left: 0;

  display: none;
  z-index: 9999;

  max-width: 520px !important;
  width: max-content;
  min-height: 120px;
  padding: 0;

  background: #fff;
  color: #252525;
  border-radius: 12px;
  font-size: 0.9rem;
  animation-delay: 100ms;
}

/* Header del diàleg */
.tg-dialog .tg-dialog-header {
  display: flex;
  align-items: center;
  padding: 25px 25px 0 25px;
}

.tg-dialog .tg-dialog-header .tg-dialog-title {
  font-size: 1rem;
  font-weight: 700;
  margin-right: auto;
}

/* Cas en què el body segueix just després del title */
.tg-dialog .tg-dialog-header .tg-dialog-title + .tg-dialog-body {
  padding: 18.75px 25px;
}

/* Botó de tancar (X) */
.tg-dialog .tg-dialog-header .tg-dialog-close-btn {
  width: 12px;
  height: 12px;
  margin-left: 10px;
  opacity: 0.4;
  cursor: pointer;
  white-space: nowrap;
}

.tg-dialog .tg-dialog-header .tg-dialog-close-btn:hover {
  opacity: 0.8; /* abans: 8 */
}

.tg-dialog .tg-dialog-header .tg-dialog-close-btn:focus {
  opacity: 1;
}

/* Spinner de càrrega */
.tg-dialog .tg-dialog-header .tg-dialog-spinner {
  display: none;
  opacity: 0.4;
  margin-top: -1px;
  -webkit-animation: tg-spin 1s linear infinite;
  -moz-animation: tg-spin 1s linear infinite;
  -o-animation: tg-spin 1s linear infinite;
  animation: tg-spin 1s linear infinite;
}

@keyframes tg-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

/* Barra de progrés (part superior fina) */
.tg-dialog .tg-dialog-progress-bar {
  background: #f1f1f1;
  height: 5px;
  display: block;
  margin-top: 18.75px;
  position: relative;
}

.tg-dialog .tg-dialog-progress-bar > .tg-bar {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 4px;
  background: #414144;
  height: 100%;
  display: block;
  transition: all 300ms;
}

/* Cos del diàleg */
.tg-dialog .tg-dialog-body {
  padding: 25px;
  font-weight: 400;
}

/* Dots de progrés entre header i footer – versió SCW neta */
.tg-dialog .tg-dialog-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0;
  margin-bottom: 2px;
  border: none;
}

.tg-dialog .tg-dialog-dots > span.tg-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c2c7ce;
}

.tg-dialog .tg-dialog-dots > span.tg-dot.tg-dot-active {
  background: #5362d9;
}

/* FOOTER del diàleg – una sola definició clara */
.tg-dialog .tg-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;           /* ← | centre | → */
  padding: 12.5px 44px 25px 44px;           /* aire a esquerra i dreta */
}

/* Botons rodons del footer */
.tg-dialog .tg-dialog-footer .tg-dialog-btn {
  min-width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #cbcfd5;
  background: #ffffff;

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

  padding: 0;
  margin: 0;
  font-size: 0;           /* amaga el text "Back / Next" */
  color: transparent;
  white-space: nowrap;
}

/* Separació simètrica dels botons respecte al centre */
.tg-dialog .tg-dialog-footer .tg-dialog-btn:first-child {
  margin-right: 16px;
}

.tg-dialog .tg-dialog-footer .tg-dialog-btn:last-child {
  margin-left: 16px;
}

/* Bloc central (punts + 6/15) ben centrat */
.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup {
  flex: 1 1 auto;
  text-align: center;
  margin: 0;
}

.tg-dialog .tg-dialog-footer .tg-step-progress {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  opacity: 0.55;
}

/* Icones de fletxa als botons del footer */

/* Base: tots els botons del footer mostren una fletxa ➔ */
.tg-dialog .tg-dialog-footer .tg-dialog-btn::before {
  content: "➔";
  display: block;
  font-size: 16px;
  line-height: 1;
  color: #6f727e;
}

/* Primer botó = BACK (fletxa cap a l'esquerra) */
.tg-dialog .tg-dialog-footer .tg-dialog-btn:first-child::before {
  transform: scaleX(-1);
}

/* Últim botó = NEXT (fletxa cap a la dreta normal) */
.tg-dialog .tg-dialog-footer .tg-dialog-btn:last-child::before {
  transform: none;
}

/* Hover una mica més fosc */
.tg-dialog .tg-dialog-footer .tg-dialog-btn:hover::before {
  color: #333;
}

/* Estat desactivat */
.tg-dialog .tg-dialog-footer .tg-dialog-btn:disabled::before,
.tg-dialog .tg-dialog-footer .tg-dialog-btn.disabled::before {
  color: #bbb;
}


/* ======================
   SCW – Responsive mòbil
   ====================== */

@media (max-width: 640px) {

  /* El diàleg ocupa gairebé tota l'amplada del mòbil */
  .tg-dialog {
    max-width: calc(100% - 16px) !important;  /* 8px de marge a cada costat */
    width: auto;
    font-size: 0.85rem;                       /* lletra una mica més petita */
    border-radius: 14px;
  }

  /* Header més compacte */
  .tg-dialog .tg-dialog-header {
    padding: 14px 14px 0 14px;
  }

  .tg-dialog .tg-dialog-header .tg-dialog-title {
    font-size: 0.95rem;
  }

  /* Cos del text més recollit */
  .tg-dialog .tg-dialog-body {
    padding: 14px;
  }

  /* Dots + comptador amb menys alçada */
  .tg-dialog .tg-dialog-dots {
    gap: 6px;
    padding: 4px 0;
    margin-bottom: 0;
  }

  .tg-dialog .tg-dialog-footer .tg-step-progress {
    font-size: 0.7rem;
  }

  /* Footer: menys padding lateral i botons una mica més petits */
  .tg-dialog .tg-dialog-footer {
    padding: 10px 18px 16px 18px !important;
  }

  .tg-dialog .tg-dialog-footer .tg-dialog-btn {
    min-width: 32px;
    height: 32px;
  }

  .tg-dialog .tg-dialog-footer .tg-dialog-btn:first-child {
    margin-right: 12px;
  }

  .tg-dialog .tg-dialog-footer .tg-dialog-btn:last-child {
    margin-left: 12px;
  }

  .tg-dialog .tg-dialog-footer .tg-dialog-btn::before {
    font-size: 14px; /* fletxa una mica més petita */
  }

  /* Punter: una mica més petit perquè no domini tota la part superior */
  .tg-dialog .tg-arrow {
    width: 8px;
    height: 8px;
    border-radius: 1px;
  }
}

/* ======================
   Final Responsive mòbil
   ====================== */


/* Punter original */
.tg-dialog .tg-arrow {
  position: absolute;
  background: #ffffff;
  width: 9px;
  height: 9px;
  border-radius: 1px;
  transform: rotate(45deg);
}

/* =========================================================
   MOBILE LANDSCAPE – Welcome + Tour
   (pantalles baixes en horitzontal, p.ex. iPhone)
   ========================================================= */
@media (max-height: 500px) and (orientation: landscape) {

  /* --- Finestra WELCOME (scw-tour-modal) --- */
  .scw-tour-modal {
    width: 90% !important;
    max-width: 90% !important;
    max-height: 90vh !important;
    margin: 4vh auto !important;
    padding: 12px 14px 16px 14px !important;

    /* text molt més petit que en portrait */
    font-size: 8px !important;
    line-height: 1.33 !important;
  }

  .scw-tour-modal h2 {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }

  .scw-tour-modal p,
  .scw-tour-modal li,
  .scw-tour-modal div {
    font-size: 8px !important;
    line-height: 1.33 !important;
  }

  .scw-tour-modal .scw-tour-buttons button {
    font-size: 10px !important;
    padding: 5px 9px !important;
  }

  /* --- Passos del TOUR (tg-dialog) --- */
  body .tg-dialog {
    font-size: 11px !important;
    line-height: 1.33 !important;
  }

  body .tg-dialog .tg-dialog-title {
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  body .tg-dialog .tg-dialog-body {
    font-size: 11px !important;
    line-height: 1.33 !important;
    padding: 10px 14px !important;
  }

  body .tg-dialog .tg-dialog-footer,
  body .tg-dialog .tg-step-progress {
    font-size: 11px !important;
  }
}


/* Floating "Take the tour" help button */
#scw-tour-help-btn{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 99999;

  width: 44px;
  height: 44px;
  border-radius: 999px;

  /* IMPORTANT: centrat real a iPad */
  display: none;              /* JS will set to flex */
  align-items: center;
  justify-content: center;

  padding: 0;                 /* evita descentrat per padding default */
  line-height: 1;             /* ok, però no confiem només en això */
  -webkit-appearance: none;   /* Safari iOS */
  appearance: none;

  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 20px;
  font-weight: 700;

  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}

#scw-tour-help-btn:hover{ background: rgba(0,0,0,0.85); }
#scw-tour-help-btn:active{ transform: translateY(1px); }