/* =============================================================
   Art Spot Events Calendar — Frontend Styles
   Warm cream + terracotta palette to match myartspot.ca
   ============================================================= */

:root {
  --asc-primary:       #D4724A;
  --asc-primary-lt:    #E8956D;
  --asc-primary-dk:    #B55A34;
  --asc-bg:            #FBF8F4;
  --asc-card:          #FFFFFF;
  --asc-text:          #2A1F16;
  --asc-muted:         #8A7265;
  --asc-border:        #E8D9CC;
  --asc-today-bg:      #FFF0E8;
  --asc-shadow-sm:     0 2px 8px  rgba(42,31,22,.08);
  --asc-shadow-lg:     0 20px 60px rgba(42,31,22,.22);
  --asc-radius:        14px;
  --asc-radius-sm:     9px;
  --asc-transition:    0.18s ease;

  /* Appearance settings — overridden via inline style on .asc-wrapper */
  --asc-cal-bg:              var(--asc-bg);
  --asc-cal-cell-bg:         transparent;
  --asc-cal-weekend-bg:      transparent;
  --asc-cal-today-bg:        var(--asc-today-bg);
  --asc-cal-toolbar-bg:      var(--asc-card);
  --asc-cal-accent:          var(--asc-primary);
  --asc-cal-event-text:      #ffffff;
  --asc-cal-font:            inherit;
  --asc-cal-font-size-event: .82rem;
  --asc-cal-font-size-time:  .72rem;
  --asc-cal-font-size-label: .72rem;
}

/* ── Wrapper ─────────────────────────────────────────────── */

.asc-wrapper {
  font-family: var(--asc-cal-font);
  background: var(--asc-cal-bg);
  border-radius: var(--asc-radius);
  padding: 28px 28px 32px;
  box-shadow: var(--asc-shadow-sm);
  border: 1px solid var(--asc-border);
}

/* ── Filter bar ──────────────────────────────────────────── */

.asc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.asc-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}

.asc-filter-label {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--asc-muted);
  white-space: nowrap;
}

/* Pill filter buttons */
.asc-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.asc-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 50px;
  /* Full category colour as background; "All Events" falls back to primary.
     !important overrides any theme button reset. */
  background-color: var(--pill-color, var(--asc-primary)) !important;
  background-image: none !important;
  border: 3px solid transparent;
  color: #fff;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
  transition: box-shadow var(--asc-transition), transform var(--asc-transition),
              border-color var(--asc-transition), opacity var(--asc-transition);
  /* Inactive pills are slightly faded so the active one stands out */
  opacity: .72;
}

/* No dot needed — the whole pill is the colour */
.asc-filter-pill::before { display: none; }

.asc-filter-pill:hover {
  opacity: .9;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
  transform: translateY(-1px);
}

/* Active: full opacity + white border ring to show selection */
.asc-filter-pill-active {
  opacity: 1;
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 3px 12px rgba(0,0,0,.22);
  transform: translateY(-1px);
}

.asc-filter-pill:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  opacity: 1;
}

/* ── Calendar container ──────────────────────────────────── */

#artspot-calendar {
  background: var(--asc-card);
  border-radius: var(--asc-radius-sm);
  border: 1px solid var(--asc-border);
  overflow: hidden;
}

/* loading pulse */
#artspot-calendar.asc-loading {
  opacity: .6;
  pointer-events: none;
}

/* ── FullCalendar overrides ──────────────────────────────── */

.fc {
  font-family: var(--asc-cal-font);
  color: var(--asc-text);
}

/* toolbar */
.fc .fc-toolbar {
  padding: 18px 22px;
  background: var(--asc-cal-toolbar-bg);
  border-bottom: 1px solid var(--asc-border);
  gap: 8px;
  flex-wrap: wrap;
}

.fc .fc-toolbar-title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--asc-text);
}

/* nav buttons */
.fc .fc-button {
  background: var(--asc-bg);
  border: 2px solid var(--asc-border);
  color: var(--asc-text);
  padding: 6px 14px;
  border-radius: 50px;
  font-family: inherit;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: none !important;
  transition: background var(--asc-transition), border-color var(--asc-transition), color var(--asc-transition);
}

.fc .fc-button:hover:not(:disabled) {
  background: var(--asc-cal-accent);
  border-color: var(--asc-cal-accent);
  color: #fff;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--asc-cal-accent) !important;
  border-color: var(--asc-cal-accent) !important;
  color: #fff !important;
}

.fc .fc-button-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(212,114,74,.28) !important;
  outline: none;
}

.fc .fc-today-button:not(:disabled) {
  background: var(--asc-cal-accent);
  border-color: var(--asc-cal-accent);
  color: #fff;
}

.fc .fc-today-button:hover:not(:disabled) {
  background: var(--asc-primary-dk);
  border-color: var(--asc-primary-dk);
}

.fc .fc-today-button:disabled {
  opacity: .45;
}

/* column headers (day names) */
.fc .fc-col-header {
  background: var(--asc-cal-bg);
}

.fc .fc-col-header-cell {
  border-color: var(--asc-border);
}

.fc .fc-col-header-cell-cushion {
  font-size: var(--asc-cal-font-size-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--asc-muted);
  padding: 10px 4px;
  text-decoration: none;
}

/* day cells */
.fc .fc-daygrid-day {
  border-color: var(--asc-border);
  background-color: var(--asc-cal-cell-bg);
}

/* weekend shading — transparent by default, overridden via --asc-cal-weekend-bg */
.fc .fc-day-sat,
.fc .fc-day-sun {
  background-color: var(--asc-cal-weekend-bg);
}

.fc .fc-daygrid-day-number {
  font-size: var(--asc-cal-font-size-label);
  font-weight: 600;
  color: var(--asc-muted);
  padding: 6px 9px;
  text-decoration: none;
  transition: color var(--asc-transition);
}

.fc .fc-daygrid-day:hover .fc-daygrid-day-number {
  color: var(--asc-text);
}

/* today highlight */
.fc .fc-day-today {
  background-color: var(--asc-cal-today-bg) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
  background: var(--asc-cal-accent);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px;
  padding: 0;
}

/* day cell minimum height — gives events more room in month view */
.fc .fc-daygrid-day-frame {
  min-height: 90px;
}

/* events pills */
.fc .fc-event {
  border: none !important;
  border-radius: 6px;
  padding: 3px 8px 4px;
  font-size: var(--asc-cal-font-size-event);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  color: var(--asc-cal-event-text) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: opacity var(--asc-transition), transform var(--asc-transition), box-shadow var(--asc-transition);
}

.fc .fc-event:hover {
  opacity: .9;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
}


.fc .fc-event-title {
  font-weight: 700;
  font-size: var(--asc-cal-font-size-event);
  color: var(--asc-cal-event-text) !important;
  white-space: normal;
  overflow: visible;
  line-height: 1.3;
}

/* month view: keep title on one line but slightly larger */
.fc-daygrid-event .fc-event-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc .fc-event-time {
  font-size: var(--asc-cal-font-size-time);
  font-weight: 600;
  color: var(--asc-cal-event-text) !important;
  opacity: .9;
  margin-right: 4px;
  flex-shrink: 0;
}

/* "more events" link */
.fc .fc-more-link {
  color: var(--asc-cal-accent);
  font-weight: 700;
  font-size: .75rem;
}

.fc .fc-more-link:hover {
  color: var(--asc-primary-dk);
}

/* popover (shown when clicking "+N more") */
.fc .fc-popover {
  border: 1px solid var(--asc-border);
  border-radius: var(--asc-radius-sm);
  box-shadow: var(--asc-shadow-sm);
}

.fc .fc-popover-header {
  background: var(--asc-bg);
  font-weight: 700;
  font-size: .82rem;
  padding: 8px 12px;
}

/* time grid (week/day views) */
.fc .fc-timegrid-slot {
  height: 44px;
  border-color: var(--asc-border);
}

.fc .fc-timegrid-slot-label-cushion {
  font-size: var(--asc-cal-font-size-time);
  color: var(--asc-muted);
  font-weight: 600;
}

.fc .fc-timegrid-now-indicator-line {
  border-color: var(--asc-cal-accent);
}

.fc .fc-timegrid-now-indicator-arrow {
  border-top-color: var(--asc-cal-accent);
  border-bottom-color: var(--asc-cal-accent);
}

.fc .fc-scrollgrid {
  border-color: transparent;
}

.fc .fc-scrollgrid td,
.fc .fc-scrollgrid th {
  border-color: var(--asc-border);
}

/* ── Modal ───────────────────────────────────────────────── */

.asc-modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(42,31,22,.52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ascFadeIn .18s ease both;
}

.asc-modal-overlay[hidden] {
  display: none !important;
}

@keyframes ascFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.asc-modal {
  position: relative;
  background: var(--asc-card);
  border-radius: var(--asc-radius);
  max-width: 580px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--asc-shadow-lg);
  animation: ascSlideUp .22s ease both;
  overscroll-behavior: contain;
}

@keyframes ascSlideUp {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* close button */
.asc-modal-close {
  position: sticky;
  top: 14px;
  float: right;
  margin: 14px 14px 0 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(42,31,22,.08);
  color: var(--asc-text);
  font-size: 1.35rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background var(--asc-transition), color var(--asc-transition);
}

.asc-modal-close:hover {
  background: rgba(212,114,74,.16);
  color: var(--asc-primary);
}

.asc-modal-close:focus-visible {
  outline: 2px solid var(--asc-primary);
  outline-offset: 2px;
}

/* featured image */
.asc-modal-image-wrap {
  display: none;
  width: 100%;
  max-height: 240px;
  overflow: hidden;
  border-radius: var(--asc-radius) var(--asc-radius) 0 0;
  clear: both;
}

.asc-modal-image-wrap.has-image {
  display: block;
}

.asc-modal-image-wrap img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* body */
.asc-modal-body {
  padding: 22px 28px 30px;
  clear: both;
}

.asc-modal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.asc-modal-category {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 50px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #fff;
  background: var(--asc-primary);
}

.asc-modal-proximity {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: #FFF0E8;
  color: #D4724A;
  border: 1px solid #F5C9B0;
}

.asc-modal-proximity[hidden] { display: none; }

.asc-modal-title {
  font-weight: 800;
  color: var(--asc-text);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 8px;
}

.asc-modal-datetime {
  font-size: .86rem;
  font-weight: 600;
  color: var(--asc-muted);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.asc-modal-datetime::before {
  content: '';
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7265' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center / contain;
}

.asc-modal-description {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--asc-text);
  white-space: pre-wrap;
}

.asc-modal-description p {
  margin: 0 0 .9em;
}

.asc-modal-description p:last-child {
  margin-bottom: 0;
}

.asc-modal-description a {
  color: var(--asc-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(212,114,74,.4);
  text-underline-offset: 2px;
  transition: color var(--asc-transition);
}

.asc-modal-description a:hover {
  color: var(--asc-primary-dk);
  text-decoration-color: var(--asc-primary-dk);
}

/* modal footer — Book Now + Add to calendar */
.asc-modal-foot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #F0E8E0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.asc-modal-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--asc-primary);
  color: #fff !important;
  border-radius: 50px;
  padding: 9px 22px;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background var(--asc-transition), transform var(--asc-transition);
  white-space: nowrap;
}

.asc-modal-book-btn:hover {
  background: var(--asc-primary-dk);
  transform: translateY(-1px);
}

.asc-modal-gcal-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8A7265;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--asc-transition);
  white-space: nowrap;
}

.asc-modal-gcal-link:hover { color: var(--asc-primary); }

/* Multiple booking buttons container */
.asc-modal-books {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* Secondary (outline) booking button */
.asc-modal-book-btn-secondary,
.asc-modal-book-btn.asc-modal-book-btn-secondary {
  background: transparent !important;
  color: var(--asc-primary) !important;
  border: 2px solid var(--asc-primary) !important;
}

.asc-modal-book-btn-secondary:hover,
.asc-modal-book-btn.asc-modal-book-btn-secondary:hover {
  background: rgba(212,114,74,.08) !important;
  transform: translateY(-1px);
}

/* Status badge in modal meta row */
.asc-modal-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.asc-modal-status-badge[hidden] { display: none; }

.asc-modal-status-sold-out {
  background: #FFEBEE;
  color: #C62828;
  border: 1px solid #EF9A9A;
  font-weight: 800;
}

.asc-modal-status-cancelled {
  background: #f5f0ee;
  color: #8A7265;
  border: 1px solid #E8D9CC;
}

/* Cancelled event pill on calendar — grey + strikethrough */
.fc .fc-event.asc-event-cancelled {
  opacity: .65;
  text-decoration: line-through;
}

/* Sold-out events — red background, full opacity */
.fc .fc-event.asc-event-sold_out {
  opacity: 1;
  background-color: #C62828 !important;
  border-color:     #B71C1C !important;
}

/* ── Mobile ──────────────────────────────────────────────── */

@media (max-width: 768px) {
  .asc-wrapper {
    padding: 14px 10px 18px;
    border-radius: var(--asc-radius-sm);
  }

  .asc-filters {
    margin-bottom: 14px;
    gap: 8px;
  }

  .asc-filter-pills {
    gap: 6px;
  }

  .asc-filter-pill {
    font-size: .76rem;
    padding: 5px 12px;
  }

  /* Stack toolbar: nav row on top, title below */
  .fc .fc-toolbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 12px 14px;
    gap: 6px;
  }

  .fc .fc-toolbar-title {
    font-size: .95rem;
    text-align: center;
  }

  .fc .fc-button {
    padding: 5px 10px;
    font-size: .72rem;
  }

  .fc .fc-col-header-cell-cushion {
    font-size: .62rem;
    padding: 7px 2px;
    letter-spacing: 0;
  }

  .asc-modal {
    max-height: 96vh;
    border-radius: var(--asc-radius-sm);
  }

  .asc-modal-body {
    padding: 16px 18px 24px;
  }

  .asc-modal-title {
    font-size: 1.2rem;
  }

  .asc-modal-image-wrap img {
    height: 180px;
  }
}

/* Portrait phones — two-row toolbar so view switcher stays accessible */
@media (max-width: 540px) {
  .asc-wrapper {
    padding: 10px 6px 14px;
    border-radius: 8px;
    border-width: 0;
    box-shadow: none;
  }

  /* Row 1: nav buttons + title  |  Row 2: Month/Week/Day (full width) */
  .fc .fc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 10px 8px;
    gap: 6px;
  }

  .fc .fc-toolbar-chunk:first-child { order: 1; flex-shrink: 0; }
  .fc .fc-toolbar-chunk:nth-child(2) { order: 2; flex: 1; text-align: center; }

  /* View switcher wraps onto its own full-width row */
  .fc .fc-toolbar-chunk:last-child {
    order: 3;
    display: flex;
    width: 100%;
    justify-content: center;
    padding-top: 2px;
  }

  .fc .fc-toolbar-title {
    font-size: .88rem;
  }

  .fc .fc-button {
    padding: 4px 8px;
    font-size: .7rem;
  }

  /* Tighter column headers — show first 1–3 letters only */
  .fc .fc-col-header-cell-cushion {
    font-size: .6rem;
    padding: 6px 1px;
  }

  .fc .fc-daygrid-day-number {
    font-size: .68rem;
    padding: 3px 4px;
  }

  .fc .fc-daygrid-day-frame {
    min-height: 52px;
  }

  .fc .fc-event {
    font-size: .68rem;
    padding: 2px 5px 2px;
    border-radius: 4px;
  }

  .fc .fc-event-title {
    font-size: .68rem;
  }

  /* Reduce "more" link size */
  .fc .fc-more-link {
    font-size: .65rem;
  }

  /* Today circle smaller */
  .fc .fc-day-today .fc-daygrid-day-number {
    width: 22px;
    height: 22px;
    font-size: .65rem;
    margin: 2px;
  }

  .asc-modal-body {
    padding: 12px 14px 20px;
  }
}

/* Tiny phones */
@media (max-width: 380px) {
  .asc-filter-pill {
    font-size: .7rem;
    padding: 4px 10px;
  }

  .fc .fc-toolbar-title {
    font-size: .8rem;
  }
}

/* ── Subscribe to Calendar button ─────────────────────────── */

.asc-subscribe-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  border: 1.5px solid var(--asc-secondary, #3B7A8C);
  border-radius: 50px;
  color: var(--asc-secondary, #3B7A8C);
  font-size: .78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.asc-subscribe-btn:hover {
  background: var(--asc-secondary, #3B7A8C);
  color: #fff;
}

/* ── Subscribe modal overlay ──────────────────────────────── */

/* Prevent themes that override [hidden]{display:block!important} from showing this overlay */
.asc-subscribe-overlay[hidden] {
  display: none !important;
}

.asc-subscribe-overlay {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background: rgba(0,0,0,.58);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000000;
  padding: 16px;
  box-sizing: border-box;
}

.asc-subscribe-modal {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}

.asc-subscribe-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: #8a7265;
  padding: 4px 8px;
  border-radius: 6px;
}
.asc-subscribe-close:hover { background: #f5ede6; }

.asc-subscribe-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
  padding-right: 32px;
}
.asc-subscribe-header svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--asc-secondary, #3B7A8C);
}
.asc-subscribe-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 4px;
  color: #2a1f16;
}
.asc-subscribe-sub {
  font-size: .82rem;
  color: #8a7265;
  margin: 0;
  line-height: 1.5;
}

.asc-subscribe-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.asc-subscribe-filter-label {
  font-size: .82rem;
  font-weight: 700;
  color: #6b5a4e;
  white-space: nowrap;
}
.asc-subscribe-select {
  padding: 6px 10px;
  border: 1.5px solid #c8b8aa;
  border-radius: 8px;
  font-size: .83rem;
  font-family: inherit;
  background: #fbf8f4;
  color: #2a1f16;
  cursor: pointer;
}
.asc-subscribe-select:focus { outline: none; border-color: var(--asc-secondary, #3B7A8C); }

.asc-subscribe-url-section { margin-bottom: 20px; }
.asc-subscribe-url-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8a7265;
  margin-bottom: 6px;
}
.asc-subscribe-url-row {
  display: flex;
  gap: 8px;
}
.asc-subscribe-url-input {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid #c8b8aa;
  border-radius: 8px;
  font-size: .78rem;
  font-family: monospace;
  background: #f5f0ea;
  color: #2a1f16;
  min-width: 0;
}
.asc-subscribe-copy-btn {
  padding: 8px 16px;
  background: var(--asc-secondary, #3B7A8C);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .83rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.asc-subscribe-copy-btn:hover { background: #2e6070; }
.asc-subscribe-copy-msg {
  font-size: .78rem;
  color: #27ae60;
  font-weight: 600;
  margin-top: 5px;
}

.asc-subscribe-apps { display: flex; flex-direction: column; gap: 8px; }

.asc-subscribe-app-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 12px;
  background: #f9f5f1;
  border: 1.5px solid #e8d9cc;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, transform .12s;
  cursor: pointer;
}
a.asc-subscribe-app-btn:hover {
  background: #edf5fb;
  border-color: var(--asc-secondary, #3B7A8C);
  transform: translateY(-1px);
}
.asc-subscribe-app-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #e8d9cc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.asc-subscribe-apple  .asc-subscribe-app-icon { background: #1c1c1e; }
.asc-subscribe-google .asc-subscribe-app-icon { background: #fff; border: 1.5px solid #dadce0; }
.asc-subscribe-outlook .asc-subscribe-app-icon { background: #0078d4; }

.asc-subscribe-app-btn > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.asc-subscribe-app-btn strong { font-size: .88rem; color: #2a1f16; display: block; }
.asc-subscribe-app-btn > div > span { font-size: .75rem; color: #8a7265; line-height: 1.4; display: block; }
.asc-subscribe-app-arrow { color: #c8b8aa; font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
a.asc-subscribe-app-btn:hover .asc-subscribe-app-arrow { color: var(--asc-secondary, #3B7A8C); }

/* ── ATC service brand icons ──────────────────────────────── */

.asc-svc-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.asc-svc-apple   { background: #1c1c1e; color: #fff; }
.asc-svc-google  { background: #fff; border: 1.5px solid #dadce0; }
.asc-svc-outlook { background: #0078d4; }

/* ── Add to Calendar dropdown ─────────────────────────────── */

.asc-modal-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.asc-atc-wrap {
  position: relative;
}

.asc-atc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: #faf6f2;
  border: 1.5px solid #ddd0c5;
  border-radius: 50px;
  color: #4a3a30;
  font-size: .8rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.asc-atc-toggle:hover,
.asc-atc-toggle.is-open {
  background: var(--asc-primary, #D4724A);
  border-color: var(--asc-primary, #D4724A);
  color: #fff;
}
.asc-atc-toggle:hover svg,
.asc-atc-toggle.is-open svg { stroke: #fff; }
.asc-atc-caret { font-size: .6rem; transition: transform .2s; opacity: .7; }
.asc-atc-toggle.is-open .asc-atc-caret { transform: rotate(180deg); }

/* Prevent themes that override [hidden]{display:block} from showing the dropdown */
.asc-atc-dropdown[hidden] { display: none !important; }

.asc-atc-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1.5px solid #e8d9cc;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(42,31,22,.16), 0 2px 8px rgba(42,31,22,.08);
  z-index: 9999;
  min-width: 210px;
  overflow: hidden;
  animation: ascAtcIn .14s ease both;
}
@keyframes ascAtcIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.asc-atc-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  text-align: left;
  font-size: .84rem;
  font-family: inherit;
  color: #2a1f16;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s;
  white-space: nowrap;
}
.asc-atc-option:hover { background: #faf6f2; }

/* ── Capacity badges (Phase 1) ──────────────────────────────────────────── */

.asc-cap-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}

/* Green — plenty of spots */
.asc-cap-ok {
  background: rgba(255,255,255,.28);
  color: #fff;
}

/* Orange — 3 or fewer spots */
.asc-cap-low {
  background: rgba(255,150,0,.35);
  color: #fff;
}

/* Red — sold out */
.asc-cap-soldout {
  background: rgba(0,0,0,.25);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.asc-atc-option + .asc-atc-option { border-top: 1px solid #f2ebe4; }