/* ConventionConnect v14.5.9 — Attendee UI Design System
   This file MUST load after page-specific stylesheets. */
:root{
  --cc-card-bg:#ffffff;
  --cc-card-border:#d4deeb;
  --cc-card-radius:14px;
  --cc-card-hover-bg:#cfe3fb;
  --cc-card-hover-border:#2f6fad;
  --cc-card-hover-text:#0a2a64;
  --cc-card-shadow:0 6px 18px rgba(18,59,136,.07);
  --cc-card-hover-shadow:0 14px 30px rgba(18,59,136,.24);
  --cc-motion-fast:180ms ease;
}

/* Standard interactive card — shared everywhere in the attendee experience. */
.cc-interactive-card,
.attendee-interactive-card,
.overview-link-card,
.quick-action,
.service-card,
.ticket-availability-item,
.ticket-availability-tile,
.featured-event,
.mini-event,
.overview-day-card,
.overview-metric,
.my-connect-tile,
.public-shift-card,
.program-role-grid > label,
.volunteer-areas > label,
.unavailable-grid > label {
  border:1px solid var(--cc-card-border)!important;
  border-radius:var(--cc-card-radius)!important;
  background:var(--cc-card-bg)!important;
  box-shadow:var(--cc-card-shadow)!important;
  transition:background-color var(--cc-motion-fast),border-color var(--cc-motion-fast),box-shadow var(--cc-motion-fast),transform var(--cc-motion-fast),color var(--cc-motion-fast)!important;
}

.cc-interactive-card:hover,
.cc-interactive-card:focus-visible,
.cc-interactive-card:focus-within,
.attendee-interactive-card:hover,
.attendee-interactive-card:focus-visible,
.attendee-interactive-card:focus-within,
.overview-link-card:hover,
.overview-link-card:focus-visible,
.quick-action:hover,
.quick-action:focus-visible,
.service-card:hover,
.service-card:focus-visible,
.service-card:focus-within,
.ticket-availability-item:hover,
.ticket-availability-item:focus-within,
.ticket-availability-tile:hover,
.ticket-availability-tile:focus-within,
.featured-event:hover,
.featured-event:focus-within,
.mini-event:hover,
.mini-event:focus-within,
.overview-day-card:hover,
.overview-day-card:focus-visible,
.overview-metric:hover,
.overview-metric:focus-visible,
.my-connect-tile:hover,
.my-connect-tile:focus-visible,
.public-shift-card:hover,
.public-shift-card:focus-within,
.program-role-grid > label:hover,
.program-role-grid > label:focus-within,
.volunteer-areas > label:hover,
.volunteer-areas > label:focus-within,
.unavailable-grid > label:hover,
.unavailable-grid > label:focus-within {
  background:var(--cc-card-hover-bg)!important;
  border-color:var(--cc-card-hover-border)!important;
  color:var(--cc-card-hover-text)!important;
  box-shadow:var(--cc-card-hover-shadow)!important;
  transform:translateY(-2px)!important;
  outline:none!important;
}

/* Keep all card copy readable during hover. */
.cc-interactive-card:hover strong,
.cc-interactive-card:focus-within strong,
.attendee-interactive-card:hover strong,
.attendee-interactive-card:focus-within strong,
.service-card:hover h3,
.overview-link-card:hover strong,
.overview-link-card:hover span,
.public-shift-card:hover strong,
.program-role-grid > label:hover strong,
.volunteer-areas > label:hover strong,
.unavailable-grid > label:hover strong {
  color:var(--cc-card-hover-text)!important;
}

/* Selected form cards remain visibly selected, while still sharing the system. */
.public-shift-card:has(input:checked),
.program-role-grid > label:has(input:checked),
.volunteer-areas > label:has(input:checked),
.unavailable-grid > label:has(input:checked) {
  background:#dcecff!important;
  border-color:#1f5f9f!important;
  box-shadow:0 0 0 3px rgba(47,111,173,.17),var(--cc-card-shadow)!important;
}

/* Informational cards are intentionally non-interactive. */
.cc-information-card {
  border:1px solid var(--cc-card-border);
  border-radius:var(--cc-card-radius);
  background:#fff;
  box-shadow:var(--cc-card-shadow);
}

@media (prefers-reduced-motion:reduce){
  .cc-interactive-card,.attendee-interactive-card,.overview-link-card,.quick-action,.service-card,
  .ticket-availability-item,.ticket-availability-tile,.featured-event,.mini-event,.overview-day-card,
  .overview-metric,.my-connect-tile,.public-shift-card,.program-role-grid>label,.volunteer-areas>label,
  .unavailable-grid>label{transition:none!important}
}