/* Simple Events Manager - Event Styles (matches Live Preview) */

/* Root variables (populated by inline style from Appearance Settings) */
:root {
  /* These will be dynamically set by the plugin
  --sem-primary-main: #6c3cff;
  --sem-primary-dark: #4b2bb3;
  --sem-primary-light: #a18fff;
  --sem-text-primary: #222;
  --sem-text-secondary: #666;
  --sem-text-light: #fff;
  --sem-ui-border: #e0e0e0;
  --sem-ui-separator: #eeeeee;
  --sem-title-font: 'Inter', Arial, sans-serif;
  --sem-title-size: 2.25rem;
  --sem-title-weight: 700;
  --sem-subtitle-font: 'Inter', Arial, sans-serif;
  --sem-subtitle-size: 1.125rem;
  --sem-subtitle-weight: 600;
  --sem-meta-font: 'Inter', Arial, sans-serif;
  --sem-meta-size: 0.95rem;
  --sem-meta-weight: 400;
  --sem-content-font: 'Inter', Arial, sans-serif;
  --sem-content-size: 1.05rem;
  --sem-content-weight: 400;
  --sem-button-font: 'Inter', Arial, sans-serif;
  --sem-button-size: 1rem;
  --sem-button-weight: 500;
   */
}


.sem-event-preview hr {
  border: none;
  border-top: 1px solid var(--sem-ui-separator);
  margin: 1rem 0;
}

/* Main event preview wrapper */
.sem-event-preview {
  padding-block: 125px;
  margin: 0 auto;
  font-family: var(--sem-content-font);
  color: var(--sem-text-primary);
  background-color: #fff;
}

/* Article */
.sem-event-preview article {
  background: transparent;
  box-shadow: none;
  border: none;
}

/* Title */
.event-title {
  font-family: var(--sem-title-font);
  font-size: var(--sem-title-size);
  font-weight: var(--sem-title-weight);
  margin-bottom: 0.5rem;
  color: var(--sem-text-primary);
}

/* Meta row */
.event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  font-family: var(--sem-meta-font);
  font-size: var(--sem-meta-size);
  color: var(--sem-text-secondary);
}
.event-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.event-meta .btn {
  margin-left: 0.5rem;
}

/* Featured image */
.event-featured-image {
  width: 100%;
  margin-bottom: 1.5rem;
}
.event-featured-image img,
.event-featured-image > div {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 8px;
  background: #f5f5f5;
  border: 1px solid var(--sem-ui-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Description */
.event-description {
  font-family: var(--sem-content-font);
  font-size: var(--sem-content-size);
  color: var(--sem-text-primary);
  margin-bottom: 1.5rem;
}
.event-description p {
  margin-bottom: 1rem;
}
.event-description a {
  color: var(--sem-primary-main);
  text-decoration: underline;
  transition: color 0.2s;
}
.event-description a:hover {
  color: var(--sem-primary-dark);
}

/* Section subtitles */
.section-subtitle {
  font-family: var(--sem-subtitle-font);
  font-size: var(--sem-subtitle-size);
  font-weight: var(--sem-subtitle-weight);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--sem-text-primary);
}

/* Pricing */
.event-pricing {
  margin-bottom: 2rem;
}
.pricing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--sem-ui-separator);
}
.pricing-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--sem-ui-separator);
  font-size: 1rem;
}
.pricing-list strong {
  font-weight: 600;
  margin-right: 0.5rem;
}

/* Event menu */
.event-menu {
  margin-bottom: 2rem;
}
.menu-tabs {
  margin-bottom: 1rem;
}
.menu-tabs .nav-tabs {
  border-bottom: none;
  display: flex;
  gap: 0.5rem;
}
.menu-tabs .nav-link {
  background: none;
  border: none;
  color: var(--sem-primary-main);
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.menu-tabs .nav-link.active,
.menu-tabs .nav-link:focus {
  background: var(--sem-primary-light);
  color: var(--sem-primary-dark);
}
.tab-content {
  background: #fff;
  border: 1px solid var(--sem-ui-border);
  border-radius: 0 0 8px 8px;
  padding: 1rem;
}
.menu-content h5,
.menu-content h6 {
  margin: 0.5rem 0;
  font-weight: 600;
}
.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.menu-item-title {
  font-weight: 500;
}
.menu-item-description {
  color: var(--sem-text-secondary);
  font-size: 0.95rem;
  margin-left: 1rem;
}
.menu-item-price {
  font-weight: 600;
  color: var(--sem-primary-main);
  margin-left: 1rem;
}

/* Registration button */
.event-registration {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.sem-btn {
  display: inline-block;
  background: var(--sem-primary-main);
  color: #fff;
  font-family: var(--sem-button-font);
  font-size: var(--sem-button-size);
  font-weight: var(--sem-button-weight);
  border: none;
  border-radius: 6px;
  padding: 0.75rem 2rem;
  box-shadow: none;
  transition: background 0.2s, color 0.2s;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.sem-btn:hover,
.sem-btn:focus {
  background: var(--sem-primary-dark);
  color: #fff;
  text-decoration: none;
}

/* Primary button */
.sem-btn-primary {
  background: var(--sem-primary-main);
  color: #fff;
}
.sem-btn-primary:hover,
.sem-btn-primary:focus {
  background: var(--sem-primary-dark);
  color: #fff;
}

/* Outline button */
.sem-btn-outline {
  background: #fff;
  color: var(--sem-primary-main);
  border: 2px solid var(--sem-primary-main);
}
.sem-btn-outline:hover,
.sem-btn-outline:focus {
  background: var(--sem-primary-light);
  color: var(--sem-primary-dark);
  border-color: var(--sem-primary-dark);
}

/* Large button */
.sem-btn-lg {
  font-size: 1.15rem;
  padding: 1rem 2.5rem;
}

/* Sidebar */
.event-sidebar {
  background: #fff;
  border: 1px solid var(--sem-ui-border);
  border-radius: 8px;
  padding: 1.5rem 1rem;
  min-width: 260px;
  max-width: 320px;
}
.sidebar-widget.upcoming-widget {
  margin-bottom: 0;
}
.sidebar-widget.upcoming-widget h3,
.sidebar-widget.upcoming-widget .section-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--sem-text-primary);
}
.upcoming-events-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.upcoming-event-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.event-date {
  background: var(--sem-primary-main);
  color: #fff;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  text-align: center;
  min-width: 48px;
}
.event-date .month {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
}
.event-date .day {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
}
.event-details h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.event-details a {
  color: var(--sem-primary-main);
  text-decoration: none;
  transition: color 0.2s;
}
.event-details a:hover {
  color: var(--sem-primary-dark);
}
.event-details p {
  margin: 0.25rem 0 0 0;
  font-size: 0.95rem;
  color: var(--sem-text-secondary);
}

/* Responsive */
@media (max-width: 991px) {
  .event-sidebar {
    margin-top: 2rem;
    max-width: 100%;
  }
}
/* Archive Event Additions */

.event-archive-row img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  background: #f5f5f5;
  border: 1px solid var(--sem-ui-border);
}

/* Fallback block for missing event image */
.event-fallback-block {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 8px;
  transition: background 0.2s;
  border: 1px solid var(--sem-ui-border);
}

.event-fallback-block:hover {
  text-decoration: none;
}

/* Fallback icon styling */
.event-fallback-icon {
  font-size: 2.5rem;
  color: #bbb;
  display: block;
  margin-bottom: 0.5rem;
  transition: color 0.2s;
}

/* Event date badge for archive rows */
.event-date-badge {
  background: var(--sem-primary-main);
  color: #fff;
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  text-align: center;
  min-width: 64px;
  display: inline-block;
}
.event-date-badge .month {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
}
.event-date-badge .day {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
}

/* Button group gap for archive event actions */
.event-btn-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}