/* Sparkflow Advent Calendar — Storefront Styles */

.sf-calendar__snow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.sf-calendar {
  --sf-bg: #f2f2f2;
  --sf-door-bg: #ffffff;
  --sf-door-open-bg: #fff8e6;
  --sf-accent: #AE8F4C;
  --sf-text: #1a1a1a;
  --sf-border: #1a1a1a;
  --sf-radius: 8px;

  position: relative;
  box-sizing: border-box;
  padding: 32px 16px;
  background-color: var(--sf-bg);
  color: var(--sf-text);
  font-family: inherit;
  overflow: hidden;
}

.sf-calendar > *:not(.sf-calendar__snow):not(.sf-calendar__overlay):not(.sf-calendar__modal) {
  position: relative;
  z-index: 2;
}

.sf-calendar--fullwidth {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

.sf-calendar--fullwidth .sf-calendar__intro,
.sf-calendar--fullwidth .sf-calendar__grid {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.sf-calendar *,
.sf-calendar *::before,
.sf-calendar *::after {
  box-sizing: inherit;
}

.sf-calendar__intro {
  max-width: 640px;
  margin: 0 auto 24px;
  text-align: center;
  color: var(--sf-intro, var(--sf-text));
}

.sf-calendar__subtitle {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-accent);
}

.sf-calendar__title {
  margin: 0 0 12px;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.1;
  color: var(--sf-intro, var(--sf-text));
}

.sf-calendar__paragraph {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sf-intro, var(--sf-text));
}

.sf-calendar__today {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--sf-intro, var(--sf-text));
  opacity: 0.75;
}

/* Feste Spaltenzahl statt `auto-fill` mit Mindestbreite.
   Vorher entschied die verfuegbare Breite, wie viele Tuerchen in eine Reihe
   passen. Dasselbe Raster sah im Theme-Editor achtspaltig aus und auf der
   Seite neunspaltig, mit einer angebrochenen letzten Reihe. Bei einem
   Adventskalender ist die Anordnung Gestaltung, keine Nebensache, also gibt
   der Haendler sie vor. Die Zahl der Reihen ergibt sich daraus von selbst.

   Die Zahl steht im Sparkflow-Admin, weil die Tuerchen dort angeordnet werden;
   der Baustein setzt sie als Inline-Variable auf dieses Element. Das Feld im
   Theme-Editor ueberschreibt sie nur, wenn es nicht auf „aus dem Kalender"
   steht. */
.sf-calendar__grid {
  display: grid;
  grid-template-columns: repeat(var(--sf-door-columns, 6), minmax(0, 1fr));
  gap: 10px;
  max-width: 960px;
  margin: 0 auto;
}

/* Auf schmalen Schirmen wuerden acht Spalten zu Briefmarken. Deshalb eine
   eigene Zahl fuers Telefon. 640px ist die Breite, ab der ein Telefon quer
   liegt oder ein kleines Tablet anfaengt. */
@media (max-width: 640px) {
  .sf-calendar__grid {
    grid-template-columns: repeat(var(--sf-door-columns-mobile, 2), minmax(0, 1fr));
  }
}

.sf-calendar__door {
  position: relative;
  aspect-ratio: var(--sf-door-aspect, 1 / 1);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  background: var(--sf-door-bg);
  color: var(--sf-text);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.sf-calendar__door:hover,
.sf-calendar__door:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  outline: 2px solid var(--sf-accent);
  outline-offset: 2px;
}

.sf-calendar__door-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 700;
  color: var(--sf-text);
}

.sf-calendar__door-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sf-calendar__door-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.sf-calendar__door--has-cover .sf-calendar__door-number {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.sf-calendar__door-badge {
  position: absolute;
  inset: auto 6px 6px auto;
  padding: 2px 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.sf-calendar__door-lock {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  color: var(--sf-text);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.sf-calendar__door[data-state="locked"] .sf-calendar__door-lock { display: flex; }
.sf-calendar__door[data-state="past"] .sf-calendar__door-badge   { opacity: 1; }
.sf-calendar__door[data-state="past"] { opacity: 0.65; }
.sf-calendar__door[data-state="open"] { background: var(--sf-door-open-bg); }

.sf-calendar__door.is-shaking {
  animation: sf-shake 0.4s ease;
}

@keyframes sf-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* Overlay + Modal */
.sf-calendar__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
  z-index: 9998;
}

.sf-calendar__overlay[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.sf-calendar__modal {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -40%);
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: #fff;
  color: #1a1a1a;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease;
  z-index: 9999;
}

.sf-calendar__modal[data-open="true"] {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.sf-calendar__modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

.sf-calendar__modal-body {
  padding: 8px 0 0;
}

.sf-modal__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 8px;
  margin: 0 auto 16px;
  background: rgba(0, 0, 0, 0.04);
}

.sf-modal__title {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sf-text);
}

.sf-modal__title--center { text-align: center; }
.sf-modal__text--center { text-align: center; }

.sf-modal__info {
  padding: 16px 8px 8px;
}

.sf-modal__icon {
  display: flex;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--sf-accent);
}

.sf-modal__text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.sf-modal__code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 2px dashed var(--sf-accent, #AE8F4C);
  border-radius: 8px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  cursor: pointer;
  background: #fff9ea;
  transition: background 0.18s ease;
}

.sf-modal__code:hover { background: #fff0cc; }
.sf-modal__code.is-copied { background: #e6f5e3; border-color: #2f855a; color: #2f855a; }

.sf-modal__code-label { font-size: 12px; opacity: 0.65; }

.sf-modal__cta {
  display: inline-block;
  padding: 12px 20px;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
}

.sf-modal__cta:hover { opacity: 0.9; }

/* Branding */
.sf-branding {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  margin: 24px auto 0;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--sf-intro, var(--sf-text));
  opacity: 0.85;
  text-decoration: none;
  justify-content: center;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 0 4px rgba(0, 0, 0, 0.25);
}

.sf-calendar .sf-branding {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.sf-branding:hover { opacity: 1; text-decoration: underline; }
.sf-branding__name { color: var(--sf-accent, #AE8F4C); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .sf-calendar__door,
  .sf-calendar__overlay,
  .sf-calendar__modal {
    transition: none !important;
    animation: none !important;
  }
}

/* Theme-Editor-Hinweis (nur bei request.design_mode gerendert) */
.sf-calendar__notice {
  display: block;
  max-width: 720px;
  margin: 0 auto 20px;
  padding: 12px 14px;
  border: 2px solid #b45309;
  border-radius: 8px;
  background: #fffbeb;
  color: #7c2d12;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.sf-calendar__notice[data-state="auto"] {
  border-color: #1d4ed8;
  background: #eff6ff;
  color: #1e3a8a;
}

.sf-calendar__notice-label {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
}

@media (min-width: 750px) {
  .sf-calendar__notice {
    padding: 14px 18px;
  }
}