/* SmileStore: Gestaltung der Cal.com-Terminartenliste.
 *
 * Ausgeliefert unter https://booking.smilestore.rs/ss-booking.css, eingebunden vom
 * nginx-Snippet /etc/nginx/snippets/calcom-css.conf im </head>-Filter. Diese Datei
 * ersetzt die frueher inline im Snippet stehenden Regeln: dort war jede Aenderung
 * eine nginx-Mutation mit Quoting-Kaskade, hier ist sie ein Dateiaustausch.
 *
 * Zwei Dinge, die man beim Pruefen wissen muss:
 *  - Die Einbettung rendert ANDERE Klassen als die Direktansicht. Nur unter
 *    /admin/embed traegt <main> die Klasse border-booker und damit den aeusseren
 *    Rahmen. Wer das CSS nur auf /admin prueft, sieht ihn nie.
 *  - Auf der Website steckt der Embed in einem weissen Wrapper. Rein weisse Karten
 *    verschwinden darin, deshalb der leichte Farbstich und die sichtbare Kante.
 */

/* ---- 1. Aeussere Booker-Box, nur auf der Listenseite ---------------------- */
/* :has() grenzt auf die Liste ein; der Kalender traegt die Klasse ohnehin nicht,
   aber eine Regel, die nur dort greifen soll, sagt das besser selbst. */
main:has([data-testid="event-types"]) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 2px 14px !important;
}

/* ---- 2. Liste als Stapel ------------------------------------------------- */
[data-testid="event-types"] {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* ---- 3. Karte ------------------------------------------------------------ */
a[data-testid="event-type-link"] {
  --ss: #193139;
  --ss-weich: #E4EFF6;
  --ss-ik: none;
  position: relative !important;
  border: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(25, 49, 57, .08),
              0 2px 5px -2px rgba(25, 49, 57, .10),
              0 16px 34px -22px rgba(25, 49, 57, .5) !important;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1),
              box-shadow .22s ease,
              background-color .22s ease !important;
}
/* color-mix kommt nach dem Vollton, damit aeltere Browser bei Weiss bleiben */
a[data-testid="event-type-link"][href] {
  background: color-mix(in srgb, var(--ss) 3.5%, #ffffff) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ss) 13%, transparent),
              0 2px 5px -2px rgba(25, 49, 57, .10),
              0 16px 34px -22px rgba(25, 49, 57, .5) !important;
}
a[data-testid="event-type-link"]:hover {
  transform: translateY(-3px) !important;
}
a[data-testid="event-type-link"][href]:hover {
  background: color-mix(in srgb, var(--ss) 5.5%, #ffffff) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ss) 22%, transparent),
              0 5px 10px -4px rgba(25, 49, 57, .13),
              0 28px 54px -26px rgba(25, 49, 57, .62) !important;
}

/* Icon-Kachel und Icon: zwei Pseudo-Elemente, weil eine Maske sonst auch den
   Kachelhintergrund beschneiden wuerde. */
a[data-testid="event-type-link"]::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 22px;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--ss-weich);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
a[data-testid="event-type-link"]::after {
  content: "";
  position: absolute;
  left: 34px;
  top: 34px;
  width: 22px;
  height: 22px;
  background: var(--ss);
  -webkit-mask: var(--ss-ik) center / 22px 22px no-repeat;
  mask: var(--ss-ik) center / 22px 22px no-repeat;
}
a[data-testid="event-type-link"]:hover::before {
  transform: scale(1.07);
}

/* ---- 4. Farbe und Icon je Terminart -------------------------------------- */
/* Die Farben sind die Servicefarben von /cenovnik/. Der Slug muss stimmen:
   bis 20.09.2026 stand hier besplatan-pregled, die alte URL von Event 1, und die
   Regel lief deshalb ins Leere. */
/* Der Zahnbogen ist derselbe, den die Startseite im Therapieabschnitt fuehrt,
   aus /images/icons/aligner.webp mit aligner_maske.py in eine Maske uebersetzt.
   Er ist breiter als hoch und braucht deshalb eigene Masse. */
a[data-testid="event-type-link"][href*="pregled-3d-sken"] {
  --ss: #193139;
  --ss-weich: #E4EFF6;
  --ss-ik: url("/ss-ikone-aligner.png");
}
a[data-testid="event-type-link"][href*="pregled-3d-sken"]::after {
  left: 31px;
  top: 38px;
  width: 28px;
  height: 15px;
  -webkit-mask-size: 28px 15px;
  mask-size: 28px 15px;
}
a[data-testid="event-type-link"][href*="izbeljivanje-zuba"] {
  --ss: #3A8A67;
  --ss-weich: #E6F5ED;
  --ss-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M18.5 16.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E");
}
/* Mond, weil Bruksizam das naechtliche Knirschen ist und die Schiene nachts getragen wird.
   Slug seit 01.10.2026 folije-za-bruksizam, vorher predaja-folija; beide Selektoren, damit
   die Karte waehrend der Umstellung und aus alten Cache-Staenden heraus gleich aussieht. */
a[data-testid="event-type-link"][href*="folije-za-bruksizam"],
a[data-testid="event-type-link"][href*="predaja-folija"] {
  --ss: #C06040;
  --ss-weich: #FAEBE4;
  --ss-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 14.6A8.6 8.6 0 0 1 9.4 3.6a8.6 8.6 0 1 0 11 11z'/%3E%3C/svg%3E");
}
a[data-testid="event-type-link"][href*="povratni-poziv"] {
  --ss: #4A626B;
  --ss-weich: #EBF1F3;
  --ss-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}

/* ---- 5. Text ------------------------------------------------------------- */
a[data-testid="event-type-link"] > div {
  padding: 22px 52px 20px 84px !important;
}
a[data-testid="event-type-link"] h2 {
  font-size: 1.0625rem !important;
  font-weight: 650 !important;
  letter-spacing: -.012em !important;
  line-height: 1.3 !important;
  color: #193139 !important;
}
a[data-testid="event-type-link"] h2 + * {
  margin-top: 2px !important;
}
a[data-testid="event-type-link"] p {
  font-size: .8438rem !important;
  line-height: 1.6 !important;
  color: #61777F !important;
}

/* ---- 6. Dauer als Umriss-Chip in der Servicefarbe ------------------------ */
[data-testid="event-type-link"] li:first-child > div {
  background: transparent !important;
  color: var(--ss) !important;
  border: 1px solid color-mix(in srgb, var(--ss) 24%, transparent) !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  font-size: .6875rem !important;
  letter-spacing: .02em !important;
  padding: 3px 10px !important;
}
[data-testid="event-type-link"] li:first-child > div svg {
  color: var(--ss) !important;
  stroke: var(--ss) !important;
}
/* Beim Rueckruf keine Minutenzahl: 15 Minuten ist die Slotlaenge im Kalender, kein
   Versprechen an den Anrufer. Raphael, 20.09.2026. Die Karte auf der Buchungsseite
   nennt sie aus demselben Grund nicht. */
a[data-testid="event-type-link"][href*="povratni-poziv"] li:first-child {
  display: none !important;
}
/* Dieselbe Zahl im Kopf der Buchungsseite. Die Marke setzt ss-vorwahl.js aus der
   URL, weil das DOM dort nichts traegt, woran CSS die Terminart erkennen koennte.
   Gezielt ueber das Uhr-Icon statt ueber die Position: die Meta-Liste fuehrt Dauer,
   Ort und Zeitzone, und welche Zeilen sie zeigt, haengt am Termintyp. Ein
   :first-child haette bei fehlender Dauer den Ort erwischt. */
html.ss-bez-trajanja [data-testid="event-meta"] .stack-y-4 > div:has(use[href="#clock"]) {
  display: none !important;
}

/* ---- 7. Pfeil ------------------------------------------------------------ */
a[data-testid="event-type-link"] > svg {
  opacity: .42 !important;
  color: var(--ss) !important;
  width: 18px !important;
  height: 18px !important;
  top: 50% !important;
  right: 24px !important;
  margin-top: -9px !important;
  transition: opacity .22s ease, right .22s cubic-bezier(.2, .8, .2, 1) !important;
}
a[data-testid="event-type-link"]:hover > svg {
  opacity: .95 !important;
  right: 19px !important;
}

/* ---- 8. Was Cal.com zeigt und wir nicht brauchen -------------------------- */
/* Bestaetigungs-Abzeichen: steht auf allen Terminarten und sagt dem Patienten nichts. */
[data-testid="requires-confirmation-badge"],
[data-testid="requires-confirmation-badge"] + li {
  display: none !important;
}
/* Profilkopf mit leerem Avatar: die Seite ist schon als SmileStore erkennbar. */
div:has(> div > [data-testid="name-title"]) {
  display: none !important;
}

/* ---- 9. Handy ------------------------------------------------------------ */
@media (max-width: 640px) {
  a[data-testid="event-type-link"] > div {
    padding: 18px 20px 17px 70px !important;
  }
  a[data-testid="event-type-link"]::before {
    left: 16px;
    top: 18px;
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }
  a[data-testid="event-type-link"]::after {
    left: 26px;
    top: 28px;
    width: 20px;
    height: 20px;
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
  }
  a[data-testid="event-type-link"][href*="pregled-3d-sken"]::after {
    left: 24px;
    top: 32px;
    width: 24px;
    height: 13px;
    -webkit-mask-size: 24px 13px;
    mask-size: 24px 13px;
  }
  a[data-testid="event-type-link"] h2 {
    font-size: 1rem !important;
  }
  /* Der Pfeil kostet auf dem Handy Textbreite und sagt nichts, was die Karte
     nicht schon sagt. */
  a[data-testid="event-type-link"] > svg {
    display: none !important;
  }
}