/*
  Styles du widget public ShowDates.
  Base: font-size 1.6rem sur .showdates-widget.
  Sur un site à HTML 10px (62.5%), 1.6rem = 16px → 1em = 16px.
  Les variables CSS (--sd-*) sont injectées par class-settings.php via wp_head.
*/

.showdates-widget {
  font-family: inherit;
  text-align: left;
}

/* Reset minimal */
.showdates-widget ul,
.showdates-widget li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.showdates-widget * {
  box-sizing: border-box;
}

/* ───── Filter bar ───── */
.showdates-widget .sd-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.showdates-widget .sd-filter-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 0.875em;
  border: none;
  border-bottom: var(--sd-filter-tab-border-width, 2px) solid transparent;
  border-radius: var(--sd-filter-tab-radius, 0px);
  background: var(--sd-filter-tab-bg, transparent);
  font-size: var(--sd-size-filter-tab, 16px);
  font-weight: var(--sd-fw-filter-tab, 500);
  line-height: 1;
  cursor: pointer;
  color: var(--sd-text, inherit);
  opacity: 0.5;
  font-family: inherit;
  margin-bottom: -1px;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}

.showdates-widget .sd-filter-tab[data-active="true"] {
  opacity: 1;
  color: var(--sd-filter-tab-color, var(--sd-primary, #1447e6));
  border-bottom-color: var(--sd-filter-tab-border, var(--sd-primary, #1447e6));
}

.showdates-widget .sd-filter-tab:hover {
  opacity: 0.8;
}

.showdates-widget .sd-filter-select {
  padding: 0.35em 2em 0.35em 0.625em;
  border-radius: var(--sd-select-radius, 6px);
  font-size: var(--sd-size-filter-tab, 16px);
  border: var(--sd-select-border-width, 1px) solid var(--sd-select-border, #e2e8f0);
  background-color: var(--sd-select-bg, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2364748b%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5em center;
  appearance: none;
  -webkit-appearance: none;
  color: var(--sd-select-color, var(--sd-text, inherit));
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  margin-left: auto;
  margin-bottom: 6px;
}

/* ───── Year header ───── */
.showdates-widget .sd-year-header {
  padding: 0.75em 0 0.25em;
  font-size: var(--sd-size-year, 24px);
  font-weight: var(--sd-fw-year, 700);
  line-height: var(--sd-lh-year, 1.2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-year, #94a3b8);
  border-bottom: 1px solid var(--sd-border, #e2e8f0);
}

/* ───── List item — CSS Grid ───── */
.showdates-widget .sd-date-item {
  display: grid;
  grid-template-columns: 60px 1px 1fr auto;
  align-items: start;
  padding: 0.875em 0;
  border-bottom: 1px solid var(--sd-border, #e2e8f0);
  list-style: none;
  font-family: inherit;
  text-align: left;
  animation: sd-fadein 0.35s ease both;
}

.showdates-widget .sd-date-item:last-child {
  border-bottom: none;
}

@keyframes sd-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ───── Date column ───── */
.showdates-widget .sd-col-date {
  padding-right: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.showdates-widget .sd-day {
  font-size: var(--sd-size-date, 18px);
  font-weight: var(--sd-fw-date, 700);
  line-height: var(--sd-lh-date, 1);
  color: var(--sd-primary, #1447e6);
  display: block;
}

.showdates-widget .sd-month {
  font-size: var(--sd-size-month, 14px);
  font-weight: var(--sd-fw-month, 600);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sd-primary, #1447e6);
  display: block;
}

.showdates-widget .sd-time-val {
  font-size: var(--sd-size-time, 11px);
  font-weight: var(--sd-fw-time, 400);
  line-height: var(--sd-lh-time, 1.3);
  color: var(--sd-time, #64748b);
  margin-top: 0.35em;
  display: block;
}

/* ───── Vertical rule ───── */
.showdates-widget .sd-rule {
  align-self: stretch;
  background: var(--sd-border, #e2e8f0);
}

/* ───── Content column ───── */
.showdates-widget .sd-col-content {
  padding: 0 1em;
  min-width: 0;
}

.showdates-widget .sd-show-label {
  font-size: var(--sd-size-show-title, 13px);
  font-weight: var(--sd-fw-show-title, 400);
  line-height: var(--sd-lh-show-title, 1.3);
  color: var(--sd-show-title, #94a3b8);
  margin-bottom: 0.15em;
  display: block;
  text-decoration: none;
}

.showdates-widget a.sd-show-label:hover {
  text-decoration: underline;
}

.showdates-widget .sd-venue-name {
  font-size: var(--sd-size-venue-name, 16px);
  font-weight: var(--sd-fw-venue-name, 500);
  line-height: var(--sd-lh-venue-name, 1.3);
  color: var(--sd-text, inherit);
  display: block;
}

.showdates-widget .sd-venue-location {
  font-size: var(--sd-size-venue-city, 14px);
  font-weight: var(--sd-fw-venue-city, 400);
  line-height: var(--sd-lh-venue-city, 1.3);
  color: var(--sd-venue-city, #94a3b8);
  margin-top: 0.15em;
  display: block;
}

.showdates-widget .sd-date-range {
  font-size: var(--sd-size-venue-city, 14px);
  font-weight: var(--sd-fw-venue-city, 400);
  line-height: var(--sd-lh-venue-city, 1.3);
  color: var(--sd-text, inherit);
  opacity: 0.6;
  display: block;
}

/* ───── Actions column ───── */
.showdates-widget .sd-col-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3em;
  padding-left: 1em;
}

.showdates-widget .sd-ticket {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-size: var(--sd-size-ticket, 14px);
  font-weight: var(--sd-fw-ticket, 500);
  line-height: 1;
  color: var(--sd-ticket-color, var(--sd-primary, #1447e6));
  text-decoration: none;
  white-space: nowrap;
  background: var(--sd-ticket-bg, transparent);
  border: var(--sd-ticket-border-width, 1px) solid var(--sd-ticket-border, transparent);
  border-radius: var(--sd-ticket-radius, 4px);
  padding: 0.35em 0.6em;
}

.showdates-widget .sd-ticket:hover {
  opacity: 0.8;
  text-decoration: none;
}

.showdates-widget .sd-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--sd-size-status, 14px);
  font-weight: var(--sd-fw-status, 500);
  line-height: 1;
  white-space: nowrap;
}

/* ───── Responsive ───── */

/* Tablet : actions passent en 2e ligne sous le contenu */
@media (max-width: 640px) {
  .showdates-widget .sd-date-item {
    grid-template-columns: 56px 1px 1fr;
    grid-template-rows: auto auto;
  }

  .showdates-widget .sd-col-actions {
    grid-column: 3 / 4;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5em 0 0 1em;
    gap: 0.75em;
  }
}

/* Mobile : 2 colonnes, filet masqué */
@media (max-width: 420px) {
  .showdates-widget .sd-date-item {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.75em;
  }

  .showdates-widget .sd-rule {
    display: none;
  }

  .showdates-widget .sd-col-date {
    padding-right: 0;
  }

  .showdates-widget .sd-col-content {
    grid-column: 2;
    padding-left: 0;
  }

  .showdates-widget .sd-col-actions {
    grid-column: 2;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0.4em 0 0;
    gap: 0.75em;
  }
}