/* ============================================================
   PEMP FRONTEND - PREMIUM DESIGN SYSTEM v12
   Philosophy: editorial luxury meets modern utility
   ============================================================ */

/* -- CSS custom properties (overridden by PHP inline style) -- */
:root {
  --pemp-primary:        #215E56;
  --pemp-secondary:      #173E37;
  --pemp-accent:         #F4C4B6;
  --pemp-accent-2:       #EBE1D8;
  --pemp-page-bg:        #FBF7F3;
  --pemp-card-bg:        #FFFFFF;
  --pemp-text:           #102B27;
  --pemp-muted:          #64736F;
  --pemp-border:         #D8E5DF;
  --pemp-button-bg:      #215E56;
  --pemp-button-text:    #FFFFFF;
  --pemp-button-hover-bg:  #173E37;
  --pemp-button-hover-text:#FFFFFF;
  --pemp-link:           #215E56;
  --pemp-link-hover:     #F4C4B6;
  --pemp-badge-bg:       #F4C4B6;
  --pemp-badge-text:     #173E37;
  --pemp-cal-cell-bg:    #FBFAF8;
  --pemp-rsvp-bg:        #FFFFFF;
  --pemp-input-focus:    #215E56;
  --pemp-heading-font:   "Inter", sans-serif;
  --pemp-body-font:      "Inter", sans-serif;
  --pemp-card-radius:    24px;
  --pemp-button-radius:  999px;
  --pemp-image-radius:   20px;
  --pemp-shadow-strength:18;
  --pemp-hover-lift:     8px;
  --pemp-desktop-cols:   3;
  --pemp-tablet-cols:    2;
  --pemp-mobile-cols:    1;

  /* internal design tokens */
  --pemp-ease:           cubic-bezier(.25,.46,.45,.94);
  --pemp-ease-bounce:    cubic-bezier(.34,1.56,.64,1);
  --pemp-duration:       .28s;
}

/* ==============================================
   BROWSER COMPATIBILITY - color-mix() fallbacks
   For browsers that don't support color-mix()
   (Safari < 16.2, Chrome < 111, Firefox < 113)
============================================== */

@supports not (color: color-mix(in srgb, red, blue)) {
  /* Cards */
  .pemp-card { border-color: #D8E5DF; box-shadow: 0 18px 50px rgba(15,35,31,.07); }
  .pemp-card:hover { border-color: #8ab8ae; box-shadow: 0 32px 90px rgba(15,35,31,.13); }
  .pemp-card::before { background: none; }
  .pemp-card-image { border-bottom-color: #D8E5DF; background-color: #EBE1D8; }

  /* Buttons */
  .pemp-btn-light { background: #EBE1D8 !important; color: #173E37 !important; border-color: #D8E5DF !important; }
  .pemp-btn-light:hover { background: #173E37 !important; color: #fff !important; border-color: #173E37 !important; }

  /* Countdown */
  .pemp-countdown > div { background: #fff; border-color: #D8E5DF; }

  /* Calendar */
  .pemp-cal-cell { background: #FBFAF8; border-color: #D8E5DF; }
  .pemp-cal-cell:hover { background: #f0ede8; border-color: #acd4c8; }
  .pemp-calendar-tabs a { background: #f5f1ee; border-color: #D8E5DF; }
  .pemp-cal-event { background: rgba(33,94,86,.09); border-color: rgba(33,94,86,.14); }
  .pemp-calendar-filter { background: #faf8f5; border-color: #D8E5DF; }
  .pemp-cal-list-item { background: #fff; border-color: #D8E5DF; }
  .pemp-cal-list-item span { background: #F4C4B6; }

  /* RSVP & Info */
  .pemp-rsvp-box { background: #fff; border-color: #D8E5DF; }
  .pemp-info-box { background: #fff; border-color: #D8E5DF; }
  .pemp-capacity { background: rgba(33,94,86,.08); border-color: rgba(33,94,86,.16); }
  .pemp-speakers li { background: #f0ebe4; border-color: #D8E5DF; }

  /* Template cards */
  .pemp-template-card { background: #fff; border-color: #D8E5DF; }
  .pemp-template-card:hover { border-color: #8ab8ae; }
  .pemp-template-image { background-color: #EBE1D8; }
  .pemp-template-meta strong { background: rgba(33,94,86,.1); color: #215E56; }
  .pemp-template-meta em { background: rgba(235,225,216,.6); color: #173E37; }

  /* Dashboard */
  .pemp-dashboard { background: #faf8f5; border-color: #D8E5DF; }
  .pemp-dashboard-stats > div { background: #fff; border-color: #D8E5DF; }

  /* Share tools */
  .pemp-share-tools a { background: #f0ebe4; border-color: #D8E5DF; }
  .pemp-share-tools a:hover { background: #173E37 !important; color: #fff !important; }

  /* Promo */
  .pemp-promo-content { background: #fff; }
  .pemp-card-body { background: #fff; }
  .pemp-calendar { background: #fff; border-color: #D8E5DF; }
  .pemp-empty { background: #fff; border-color: #D8E5DF; }
}


/* ==============================================
   BASE TYPOGRAPHY & SHARED PRIMITIVES
============================================== */

.pemp-events-grid,
.pemp-card,
.pemp-countdown,
.pemp-calendar,
.pemp-rsvp-box,
.pemp-single,
.pemp-promo-card,
.pemp-dashboard,
.pemp-ticket-lookup,
.pemp-attendee-badge,
.pemp-template-showcase,
.pemp-template-timeline,
.pemp-template-slider,
.pemp-template-masonry {
  font-family: var(--pemp-body-font);
  color: var(--pemp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -- Eyebrow / kicker label -- */
.pemp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pemp-primary);
}

.pemp-eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--pemp-primary);
  border-radius: 2px;
}

/* -- Empty state -- */
.pemp-empty {
  font-family: var(--pemp-body-font);
  padding: 48px 28px;
  background: var(--pemp-card-bg);
  border-radius: var(--pemp-card-radius);
  border: 1.5px dashed color-mix(in srgb, var(--pemp-border) 80%, transparent);
  color: var(--pemp-muted);
  text-align: center;
  font-size: 15px;
}

/* -- Badge -- */
.pemp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: absolute;
  left: 16px;
  top: 16px;
  background: var(--pemp-badge-bg);
  color: var(--pemp-badge-text);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pemp-badge-bg) 45%, transparent);
  backdrop-filter: blur(4px);
}

/* -- Button -- */
.pemp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--pemp-button-bg), color-mix(in srgb, var(--pemp-button-bg) 75%, #000));
  color: var(--pemp-button-text) !important;
  border-radius: var(--pemp-button-radius);
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  line-height: 1.2;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--pemp-button-bg) 28%, transparent);
  transition:
    transform var(--pemp-duration) var(--pemp-ease),
    box-shadow var(--pemp-duration) var(--pemp-ease),
    background var(--pemp-duration) var(--pemp-ease);
  font-family: var(--pemp-body-font);
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
}

.pemp-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.12);
  opacity: 0;
  transition: opacity var(--pemp-duration) var(--pemp-ease);
}

.pemp-btn:hover,
.pemp-btn:focus {
  background: linear-gradient(135deg, var(--pemp-button-hover-bg), color-mix(in srgb, var(--pemp-button-hover-bg) 72%, #000)) !important;
  color: var(--pemp-button-hover-text) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--pemp-button-hover-bg) 36%, transparent);
}

.pemp-btn:hover::after { opacity: 1; }

.pemp-btn-light {
  background: var(--pemp-accent-2) !important;
  color: var(--pemp-secondary) !important;
  box-shadow: none !important;
  border: 1px solid color-mix(in srgb, var(--pemp-border) 80%, transparent) !important;
}

.pemp-btn-light:hover {
  background: var(--pemp-button-hover-bg) !important;
  color: var(--pemp-button-hover-text) !important;
  border-color: var(--pemp-button-hover-bg) !important;
}

.pemp-btn-wide { width: 100%; }

.pemp-link {
  color: var(--pemp-link) !important;
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
  transition: color var(--pemp-duration) var(--pemp-ease);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pemp-link::after {
  content: "→";
  font-size: 12px;
  transition: transform var(--pemp-duration) var(--pemp-ease-bounce);
}

.pemp-link:hover {
  color: var(--pemp-link-hover) !important;
}

.pemp-link:hover::after {
  transform: translateX(3px);
}

.pemp-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* ==============================================
   EVENTS GRID & CARDS
============================================== */

.pemp-events-grid {
  display: grid;
  grid-template-columns: repeat(var(--pemp-desktop-cols, 3), minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.pemp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pemp-card-bg);
  border: 1px solid color-mix(in srgb, var(--pemp-border) 70%, transparent);
  border-radius: var(--pemp-card-radius);
  overflow: hidden;
  box-shadow:
    0 calc(var(--pemp-shadow-strength) * 1px) calc(var(--pemp-shadow-strength) * 2.8px) rgba(15,35,31,.07),
    0 1px 0 rgba(255,255,255,.6) inset;
  transition:
    transform var(--pemp-duration) var(--pemp-ease),
    box-shadow var(--pemp-duration) var(--pemp-ease),
    border-color var(--pemp-duration) var(--pemp-ease);
  isolation: isolate;
}

/* Subtle shimmer gradient on hover */
.pemp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--pemp-accent) 22%, transparent),
    transparent 42%,
    color-mix(in srgb, var(--pemp-primary) 6%, transparent)
  );
  opacity: 0;
  transition: opacity var(--pemp-duration) var(--pemp-ease);
  pointer-events: none;
  z-index: 0;
}

.pemp-card:hover {
  transform: translateY(calc(var(--pemp-hover-lift) * -1));
  border-color: color-mix(in srgb, var(--pemp-primary) 30%, var(--pemp-border));
  box-shadow:
    0 calc((var(--pemp-shadow-strength) + 14) * 1px) calc((var(--pemp-shadow-strength) + 14) * 3px) rgba(15,35,31,.13),
    0 1px 0 rgba(255,255,255,.7) inset;
}

.pemp-card:hover::before { opacity: 1; }

/* -- Card image area -- */
.pemp-card-image {
  display: block;
  min-height: 230px;
  background: var(--pemp-accent-2) center / cover no-repeat;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--pemp-border) 60%, transparent);
  text-decoration: none;
  flex-shrink: 0;
}

/* Pan/zoom on hover */
.pemp-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  transition: transform .55s var(--pemp-ease);
  z-index: 0;
}

.pemp-card:hover .pemp-card-image::after { transform: scale(1.07); }

/* Gradient overlay for readability */
.pemp-card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15,35,31,.35));
  z-index: 1;
  pointer-events: none;
}

.pemp-card-image > * { position: relative; z-index: 2; }

/* -- Card body -- */
.pemp-card-body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 2;
  background: linear-gradient(
    180deg,
    var(--pemp-card-bg),
    color-mix(in srgb, var(--pemp-card-bg) 85%, var(--pemp-accent-2))
  );
}

.pemp-date-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--pemp-primary);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

.pemp-date-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pemp-date-row span + span::before {
  content: "·";
  opacity: .5;
}

.pemp-card h3 {
  font-family: var(--pemp-heading-font);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 10px;
}

.pemp-card h3 a {
  color: var(--pemp-text) !important;
  text-decoration: none;
  transition: color var(--pemp-duration) var(--pemp-ease);
}

.pemp-card h3 a:hover { color: var(--pemp-primary) !important; }

.pemp-location {
  font-size: 13px;
  color: var(--pemp-muted) !important;
  margin: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding-bottom: 14px;
}

.pemp-location::before {
  content: "◎";
  font-size: 11px;
  opacity: .6;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Push actions to bottom of card */
.pemp-card .pemp-actions { margin-top: auto; padding-top: 14px; }

/* -- Featured card layout -- */
.pemp-featured-wrap .pemp-events-grid { grid-template-columns: 1fr; }
.pemp-card-featured { display: grid; grid-template-columns: 1.1fr .9fr; }
.pemp-card-featured .pemp-card-image { min-height: 400px; }
.pemp-card-featured .pemp-card-body { justify-content: center; }

/* ==============================================
   COUNTDOWN TIMER
============================================== */

.pemp-countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.pemp-countdown > div {
  background: linear-gradient(
    160deg,
    var(--pemp-card-bg),
    color-mix(in srgb, var(--pemp-accent-2) 55%, var(--pemp-card-bg))
  );
  border: 1px solid color-mix(in srgb, var(--pemp-border) 70%, transparent);
  border-radius: 18px;
  text-align: center;
  padding: 16px 8px 14px;
  box-shadow: 0 4px 16px rgba(15,35,31,.06);
  position: relative;
  overflow: hidden;
}

.pemp-countdown > div::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pemp-primary), var(--pemp-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--pemp-ease);
}

.pemp-countdown:hover > div::after { transform: scaleX(1); }

.pemp-countdown strong {
  display: block;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  color: var(--pemp-secondary);
  font-family: var(--pemp-heading-font);
  font-variant-numeric: tabular-nums;
}

.pemp-countdown span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pemp-muted);
  font-weight: 800;
  margin-top: 5px;
}

/* mini variant */
.pemp-countdown-mini > div { padding: 10px 6px 9px; border-radius: 12px; }
.pemp-countdown-mini strong { font-size: 20px; }
.pemp-countdown-mini span { font-size: 9px; }

/* ==============================================
   CALENDAR
============================================== */

.pemp-calendar {
  background: linear-gradient(
    160deg,
    var(--pemp-card-bg),
    color-mix(in srgb, var(--pemp-page-bg) 55%, var(--pemp-card-bg))
  );
  border: 1px solid var(--pemp-border);
  border-radius: var(--pemp-card-radius);
  padding: 28px;
  box-shadow:
    0 20px 60px rgba(15,35,31,.08),
    0 1px 0 rgba(255,255,255,.5) inset;
}

.pemp-calendar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.pemp-calendar-head h3 {
  margin: 0;
  font-family: var(--pemp-heading-font);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 900;
  color: var(--pemp-text);
  letter-spacing: -.02em;
}

.pemp-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--pemp-button-bg) !important;
  color: var(--pemp-button-text) !important;
  text-decoration: none !important;
  font-size: 20px;
  line-height: 1;
  transition: all var(--pemp-duration) var(--pemp-ease-bounce);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--pemp-button-bg) 28%, transparent);
}

.pemp-cal-nav:hover {
  background: var(--pemp-button-hover-bg) !important;
  transform: scale(1.08);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--pemp-button-hover-bg) 36%, transparent);
}

/* View tabs */
.pemp-calendar-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  background: color-mix(in srgb, var(--pemp-accent-2) 40%, var(--pemp-card-bg));
  padding: 5px;
  border-radius: 999px;
  border: 1px solid var(--pemp-border);
  width: fit-content;
}

.pemp-calendar-tabs a {
  padding: 9px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--pemp-muted) !important;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  transition: all var(--pemp-duration) var(--pemp-ease);
  letter-spacing: .01em;
}

.pemp-calendar-tabs a.is-active,
.pemp-calendar-tabs a:hover {
  background: var(--pemp-button-bg) !important;
  color: var(--pemp-button-text) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pemp-button-bg) 28%, transparent);
}

/* Filter bar */
.pemp-calendar-filter {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 10px;
  margin: 0 0 20px;
  padding: 16px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--pemp-accent-2) 50%, var(--pemp-card-bg)),
    var(--pemp-card-bg)
  );
  border: 1px solid var(--pemp-border);
  border-radius: 18px;
}

.pemp-calendar-filter input,
.pemp-calendar-filter select {
  min-height: 46px;
  border: 1px solid var(--pemp-border);
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  background: var(--pemp-card-bg);
  color: var(--pemp-text);
  transition: border-color var(--pemp-duration) var(--pemp-ease), box-shadow var(--pemp-duration) var(--pemp-ease);
}

.pemp-calendar-filter input:focus,
.pemp-calendar-filter select:focus {
  outline: none;
  border-color: var(--pemp-input-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pemp-input-focus) 14%, transparent);
}

/* Month grid */
.pemp-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.pemp-calendar-labels { margin-bottom: 8px; }

.pemp-calendar-labels strong {
  display: block;
  text-align: center;
  color: var(--pemp-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
  padding: 6px 0;
}

.pemp-cal-cell {
  min-height: 112px;
  background: var(--pemp-cal-cell-bg);
  border: 1px solid color-mix(in srgb, var(--pemp-border) 65%, transparent);
  border-radius: 14px;
  padding: 10px;
  overflow: hidden;
  transition: all var(--pemp-duration) var(--pemp-ease);
}

.pemp-cal-cell:hover {
  background: color-mix(in srgb, var(--pemp-accent-2) 40%, var(--pemp-card-bg));
  border-color: color-mix(in srgb, var(--pemp-primary) 28%, var(--pemp-border));
}

.pemp-cal-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--pemp-card-bg);
  color: var(--pemp-secondary);
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(15,35,31,.07);
  flex-shrink: 0;
}

/* Today highlight */
.pemp-cal-cell.pemp-today .pemp-cal-day {
  background: var(--pemp-primary);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pemp-primary) 35%, transparent);
}

.pemp-cal-event {
  display: block;
  margin-top: 7px;
  background: color-mix(in srgb, var(--pemp-primary) 11%, var(--pemp-card-bg));
  color: var(--pemp-secondary) !important;
  text-decoration: none !important;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  border: 1px solid color-mix(in srgb, var(--pemp-primary) 15%, transparent);
  transition: all var(--pemp-duration) var(--pemp-ease);
}

.pemp-cal-event:hover {
  background: var(--pemp-primary);
  color: #fff !important;
  transform: translateX(2px);
  border-color: var(--pemp-primary);
}

.pemp-cal-event strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
}

.pemp-cal-event small {
  display: block;
  font-size: 10px;
  opacity: .72;
  margin-top: 2px;
}

.pemp-empty-cell {
  background: transparent !important;
  border-color: transparent !important;
}

/* Calendar list view */
.pemp-calendar-list { display: grid; gap: 12px; }

.pemp-cal-list-item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--pemp-card-bg), var(--pemp-cal-cell-bg));
  border: 1px solid var(--pemp-border);
  box-shadow: 0 6px 24px rgba(15,35,31,.05);
  transition: all var(--pemp-duration) var(--pemp-ease);
}

.pemp-cal-list-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(15,35,31,.11);
  border-color: color-mix(in srgb, var(--pemp-primary) 28%, var(--pemp-border));
}

.pemp-cal-list-item time {
  font-weight: 900;
  font-size: 13px;
  color: var(--pemp-primary);
  letter-spacing: .01em;
}

.pemp-cal-list-item h4 {
  margin: 0;
  font-family: var(--pemp-heading-font);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.pemp-cal-list-item h4 a {
  color: var(--pemp-text) !important;
  text-decoration: none;
  transition: color var(--pemp-duration) var(--pemp-ease);
}

.pemp-cal-list-item h4 a:hover { color: var(--pemp-primary) !important; }

.pemp-cal-list-item p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--pemp-muted) !important;
}

.pemp-cal-list-item span {
  justify-self: end;
  background: var(--pemp-badge-bg);
  color: var(--pemp-badge-text);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* -- Filtered events wrapper -- */
.pemp-filtered-events {
  font-family: var(--pemp-body-font);
  display: grid;
  gap: 20px;
}

.pemp-filtered-events > h3 {
  font-family: var(--pemp-heading-font);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  margin: 0;
  color: var(--pemp-text);
  letter-spacing: -.02em;
}

/* ==============================================
   RSVP FORM
============================================== */

.pemp-rsvp-box {
  background: linear-gradient(
    160deg,
    var(--pemp-rsvp-bg),
    color-mix(in srgb, var(--pemp-accent-2) 30%, var(--pemp-rsvp-bg))
  );
  border: 1px solid var(--pemp-border);
  border-radius: var(--pemp-card-radius);
  padding: 36px;
  box-shadow: 0 20px 60px rgba(15,35,31,.09);
  margin-top: 28px;
}

.pemp-rsvp-box h3 {
  font-family: var(--pemp-heading-font);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 900;
  margin: 0 0 24px;
  color: var(--pemp-text);
  letter-spacing: -.02em;
}

.pemp-rsvp-form {
  display: grid;
  gap: 16px;
}

.pemp-rsvp-form label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pemp-secondary);
  letter-spacing: .02em;
}

.pemp-rsvp-form input,
.pemp-rsvp-form textarea,
.pemp-rsvp-form select {
  width: 100%;
  border: 1px solid var(--pemp-border);
  border-radius: 14px;
  padding: 13px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--pemp-text);
  background: var(--pemp-card-bg);
  transition:
    border-color var(--pemp-duration) var(--pemp-ease),
    box-shadow var(--pemp-duration) var(--pemp-ease),
    transform var(--pemp-duration) var(--pemp-ease);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.pemp-rsvp-form input:focus,
.pemp-rsvp-form textarea:focus,
.pemp-rsvp-form select:focus {
  outline: none;
  border-color: var(--pemp-input-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pemp-input-focus) 14%, transparent);
  transform: translateY(-1px);
}

.pemp-rsvp-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23215E56' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
  cursor: pointer;
}

.pemp-rsvp-form .pemp-btn {
  margin-top: 6px;
  padding: 15px 28px;
  font-size: 16px;
}

/* Notification banners */
.pemp-rsvp-success,
.pemp-rsvp-error {
  padding: 14px 18px;
  border-radius: 14px;
  margin-bottom: 18px;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pemp-rsvp-success {
  background: color-mix(in srgb, #16a34a 10%, var(--pemp-card-bg));
  color: #166534;
  border: 1px solid color-mix(in srgb, #16a34a 20%, transparent);
}

.pemp-rsvp-error {
  background: color-mix(in srgb, #dc2626 9%, var(--pemp-card-bg));
  color: #991b1b;
  border: 1px solid color-mix(in srgb, #dc2626 18%, transparent);
}

.pemp-capacity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pemp-primary) 10%, var(--pemp-card-bg));
  color: var(--pemp-primary);
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 18px;
  border: 1px solid color-mix(in srgb, var(--pemp-primary) 18%, transparent);
}

/* Honeypot */
.pemp-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ==============================================
   SINGLE EVENT PAGE
============================================== */

.pemp-single { font-family: var(--pemp-body-font); }

.pemp-single-hero {
  min-height: 480px;
  border-radius: calc(var(--pemp-card-radius) + 6px);
  background: center / cover no-repeat var(--pemp-accent-2);
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15,35,31,.15);
}

/* Cinematic gradient overlay */
.pemp-single-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 30%,
    color-mix(in srgb, var(--pemp-secondary) 55%, transparent)
  );
}

.pemp-single-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 38px;
  align-items: start;
}

.pemp-single-main,
.pemp-single-sidebar { min-width: 0; }

.pemp-single-sidebar {
  position: sticky;
  top: 32px;
  align-self: start;
}

/* Info box in sidebar */
.pemp-info-box {
  background: linear-gradient(
    160deg,
    var(--pemp-card-bg),
    color-mix(in srgb, var(--pemp-accent-2) 28%, var(--pemp-card-bg))
  );
  border: 1px solid var(--pemp-border);
  border-radius: var(--pemp-card-radius);
  padding: 26px;
  box-shadow: 0 12px 40px rgba(15,35,31,.07);
  margin-bottom: 16px;
}

.pemp-info-box p {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--pemp-border) 55%, transparent);
}

.pemp-info-box p:last-child {
  margin: 0;
  padding: 0;
  border: none;
}

.pemp-info-box strong {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pemp-primary);
}

.pemp-info-box span {
  font-size: 15px;
  font-weight: 600;
  color: var(--pemp-text) !important;
}

.pemp-section { margin-top: 32px; }

.pemp-section h3 {
  font-family: var(--pemp-heading-font);
  font-size: 20px;
  font-weight: 900;
  color: var(--pemp-text);
  margin: 0 0 16px;
  letter-spacing: -.01em;
}

.pemp-speakers {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pemp-speakers li {
  background: color-mix(in srgb, var(--pemp-accent-2) 50%, var(--pemp-card-bg));
  border: 1px solid color-mix(in srgb, var(--pemp-border) 70%, transparent);
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 700;
  color: var(--pemp-secondary);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pemp-speakers li::before {
  content: "◆";
  font-size: 8px;
  color: var(--pemp-primary);
  opacity: .8;
}

/* -- Share tools -- */
.pemp-share-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.pemp-share-tools a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pemp-accent-2) 45%, var(--pemp-card-bg));
  color: var(--pemp-primary) !important;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  border: 1px solid var(--pemp-border);
  transition: all var(--pemp-duration) var(--pemp-ease);
  letter-spacing: .02em;
}

.pemp-share-tools a:hover {
  background: var(--pemp-button-hover-bg) !important;
  color: var(--pemp-button-hover-text) !important;
  border-color: var(--pemp-button-hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--pemp-button-hover-bg) 30%, transparent);
}

/* ==============================================
   PROMO CARD
============================================== */

.pemp-promo-card {
  display: grid;
  grid-template-columns: minmax(240px, 44%) 1fr;
  background: var(--pemp-card-bg);
  border-radius: var(--pemp-card-radius);
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(15,35,31,.13);
  border: 1px solid var(--pemp-border);
  margin: 28px 0;
  transition: all var(--pemp-duration) var(--pemp-ease);
}

.pemp-promo-card:hover {
  transform: translateY(calc(var(--pemp-hover-lift) * -1));
  box-shadow: 0 38px 100px rgba(15,35,31,.18);
}

.pemp-promo-image {
  min-height: 360px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  background-color: var(--pemp-accent-2);
}

.pemp-promo-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  transition: transform .55s var(--pemp-ease);
  z-index: 0;
}

.pemp-promo-card:hover .pemp-promo-image::after { transform: scale(1.07); }

.pemp-promo-content {
  padding: 44px 42px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--pemp-card-bg),
    color-mix(in srgb, var(--pemp-accent-2) 38%, var(--pemp-card-bg))
  );
  position: relative;
  z-index: 2;
}

.pemp-promo-kicker {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  background: var(--pemp-badge-bg);
  color: var(--pemp-badge-text);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.pemp-promo-content h3 {
  font-family: var(--pemp-heading-font);
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1.05;
  font-weight: 900;
  margin: 0;
  color: var(--pemp-text);
  letter-spacing: -.03em;
}

.pemp-promo-content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--pemp-muted) !important;
  margin: 0;
}

.pemp-promo-content strong {
  font-weight: 800;
  font-size: 14px;
  color: var(--pemp-primary);
  letter-spacing: .02em;
}

/* ==============================================
   PREMIUM LAYOUT TEMPLATES
============================================== */

/* -- Showcase -- */
.pemp-template-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: 22px;
  align-items: stretch;
  margin: 24px 0;
}

.pemp-showcase-main,
.pemp-showcase-side { min-width: 0; }

.pemp-showcase-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.pemp-showcase-side-empty { align-content: center; }

/* -- Template card (shared) -- */
.pemp-template-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pemp-border);
  border-radius: var(--pemp-card-radius);
  background: linear-gradient(
    160deg,
    var(--pemp-card-bg),
    color-mix(in srgb, var(--pemp-accent-2) 22%, var(--pemp-card-bg))
  );
  box-shadow: 0 calc(var(--pemp-shadow-strength) * 1px) calc(var(--pemp-shadow-strength) * 2.5px) rgba(15,35,31,.07);
  transition:
    transform var(--pemp-duration) var(--pemp-ease),
    box-shadow var(--pemp-duration) var(--pemp-ease),
    border-color var(--pemp-duration) var(--pemp-ease);
}

.pemp-template-card:hover {
  transform: translateY(calc(var(--pemp-hover-lift) * -1));
  border-color: color-mix(in srgb, var(--pemp-primary) 30%, var(--pemp-border));
  box-shadow: 0 32px 90px rgba(15,35,31,.14);
}

.pemp-template-image {
  display: block;
  min-height: 240px;
  background-size: cover;
  background-position: center;
  background-color: var(--pemp-accent-2);
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--pemp-card-radius) - 2px) calc(var(--pemp-card-radius) - 2px) 0 0;
}

.pemp-template-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 35%,
    color-mix(in srgb, var(--pemp-secondary) 42%, transparent)
  );
  transition: opacity .28s var(--pemp-ease), transform .5s var(--pemp-ease);
  opacity: .6;
}

.pemp-template-card:hover .pemp-template-image::after {
  opacity: .8;
  transform: scale(1.05);
}

.pemp-template-content {
  padding: 24px;
  position: relative;
  z-index: 2;
}

/* Hero variant */
.pemp-template-hero .pemp-template-image { min-height: 400px; }
.pemp-template-hero .pemp-template-content { padding: 32px; }

/* Compact variant */
.pemp-template-compact {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: stretch;
}

.pemp-template-compact .pemp-template-image {
  min-height: 100%;
  border-radius: calc(var(--pemp-card-radius) - 2px) 0 0 calc(var(--pemp-card-radius) - 2px);
}

.pemp-template-compact .pemp-template-content { padding: 18px 20px; }
.pemp-template-compact .pemp-actions { margin-top: 10px; }
.pemp-template-compact .pemp-btn { padding: 9px 14px; font-size: 12px; }
.pemp-template-compact .pemp-countdown { display: none; }
.pemp-template-compact h3 { font-size: 17px; line-height: 1.3; }

/* Meta row */
.pemp-template-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin: 0 0 12px;
}

.pemp-template-meta span,
.pemp-template-meta strong,
.pemp-template-meta em {
  font-style: normal;
  font-size: 11px;
  line-height: 1;
  border-radius: 999px;
  padding: 6px 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.pemp-template-meta span {
  background: var(--pemp-badge-bg);
  color: var(--pemp-badge-text);
  text-transform: uppercase;
}

.pemp-template-meta strong {
  background: color-mix(in srgb, var(--pemp-primary) 12%, var(--pemp-card-bg));
  color: var(--pemp-primary);
}

.pemp-template-meta em {
  background: color-mix(in srgb, var(--pemp-accent-2) 60%, var(--pemp-card-bg));
  color: var(--pemp-secondary);
}

.pemp-template-card h3 {
  font-family: var(--pemp-heading-font);
  font-size: clamp(19px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 10px;
  letter-spacing: -.02em;
}

.pemp-template-card h3 a {
  color: var(--pemp-text) !important;
  text-decoration: none;
  transition: color var(--pemp-duration) var(--pemp-ease);
}

.pemp-template-card h3 a:hover { color: var(--pemp-primary) !important; }

.pemp-template-excerpt,
.pemp-template-location {
  margin: 8px 0 0;
}

.pemp-template-excerpt {
  font-size: 16px;
  line-height: 1.7;
  color: var(--pemp-muted) !important;
}

.pemp-template-location {
  font-size: 13px;
  font-weight: 700;
  color: var(--pemp-muted) !important;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.pemp-template-location::before {
  content: "◎";
  font-size: 11px;
  flex-shrink: 0;
  opacity: .6;
  margin-top: 1px;
}

/* -- Timeline layout -- */
.pemp-template-timeline {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 24px 0;
  padding-left: 32px;
}

.pemp-template-timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--pemp-primary),
    color-mix(in srgb, var(--pemp-accent) 80%, transparent)
  );
  border-radius: 2px;
}

.pemp-template-timeline .pemp-template-card { overflow: visible; }

.pemp-template-timeline .pemp-template-content { padding: 22px 24px; }

.pemp-timeline-dot {
  position: absolute;
  left: -30px;
  top: 22px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--pemp-accent);
  border: 4px solid var(--pemp-primary);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pemp-primary) 12%, transparent);
  transition: transform var(--pemp-duration) var(--pemp-ease-bounce);
}

.pemp-template-card:hover .pemp-timeline-dot {
  transform: scale(1.3);
}

/* -- Slider layout -- */
.pemp-template-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(310px, 390px);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 4px 24px;
  margin: 18px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--pemp-primary) 40%, var(--pemp-border)) transparent;
}

.pemp-template-slider::-webkit-scrollbar { height: 6px; }

.pemp-template-slider::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--pemp-border) 40%, transparent);
  border-radius: 999px;
}

.pemp-template-slider::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--pemp-primary) 45%, var(--pemp-border));
  border-radius: 999px;
}

.pemp-slider-item { scroll-snap-align: start; }
.pemp-slider-item .pemp-card { height: 100%; }

/* -- Masonry layout -- */
.pemp-template-masonry {
  columns: 3 280px;
  column-gap: 24px;
  margin: 22px 0;
}

.pemp-masonry-item {
  break-inside: avoid;
  margin: 0 0 24px;
}

.pemp-masonry-item .pemp-card { display: block; }
.pemp-masonry-item:nth-child(2n) .pemp-card-image { min-height: 300px; }
.pemp-masonry-item:nth-child(3n) .pemp-card-image { min-height: 220px; }
.pemp-masonry-item:nth-child(4n) .pemp-card-image { min-height: 350px; }

/* ==============================================
   DASHBOARD
============================================== */

.pemp-dashboard {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--pemp-page-bg) 60%, var(--pemp-card-bg)),
    var(--pemp-card-bg)
  );
  border: 1px solid var(--pemp-border);
  border-radius: var(--pemp-card-radius);
  padding: 30px;
  box-shadow: 0 calc(var(--pemp-shadow-strength) * 1px) 50px rgba(15,35,31,.08);
}

.pemp-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.pemp-dashboard-stats > div {
  background: var(--pemp-card-bg);
  border: 1px solid var(--pemp-border);
  border-radius: 20px;
  padding: 22px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all var(--pemp-duration) var(--pemp-ease);
}

.pemp-dashboard-stats > div::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pemp-primary), var(--pemp-accent));
}

.pemp-dashboard-stats > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(15,35,31,.1);
}

.pemp-dashboard-stats strong {
  display: block;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  color: var(--pemp-primary);
  font-family: var(--pemp-heading-font);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.pemp-dashboard-stats span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--pemp-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 7px;
}

.pemp-dashboard-body {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 24px;
  align-items: start;
}

.pemp-dashboard-list h3 {
  font-family: var(--pemp-heading-font);
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 16px;
  color: var(--pemp-text);
  letter-spacing: -.01em;
}

/* ==============================================
   TICKET LOOKUP & ATTENDEE BADGE
============================================== */

.pemp-ticket-lookup {
  background: linear-gradient(
    160deg,
    var(--pemp-rsvp-bg),
    color-mix(in srgb, var(--pemp-accent-2) 28%, var(--pemp-rsvp-bg))
  );
  border: 1px solid var(--pemp-border);
  border-radius: var(--pemp-card-radius);
  padding: 32px;
  box-shadow: 0 calc(var(--pemp-shadow-strength) * 1px) 50px rgba(15,35,31,.08);
}

.pemp-ticket-lookup h3 {
  font-family: var(--pemp-heading-font);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 900;
  margin: 0 0 20px;
  color: var(--pemp-text);
  letter-spacing: -.01em;
}

.pemp-ticket-form label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--pemp-secondary);
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pemp-ticket-form input {
  width: 100%;
  border: 1px solid var(--pemp-border);
  border-radius: 14px;
  padding: 14px 18px;
  font: inherit;
  font-size: 15px;
  color: var(--pemp-text);
  background: var(--pemp-card-bg);
  box-sizing: border-box;
  transition: border-color var(--pemp-duration) var(--pemp-ease), box-shadow var(--pemp-duration) var(--pemp-ease);
  margin-bottom: 14px;
}

.pemp-ticket-form input:focus {
  outline: none;
  border-color: var(--pemp-input-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pemp-input-focus) 14%, transparent);
}

.pemp-message {
  border-radius: 14px;
  padding: 13px 17px;
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 14px;
}

.pemp-success {
  background: color-mix(in srgb, #16a34a 10%, var(--pemp-card-bg));
  color: #145c2e;
  border: 1px solid color-mix(in srgb, #16a34a 20%, transparent);
}

.pemp-error {
  background: color-mix(in srgb, #dc2626 9%, var(--pemp-card-bg));
  color: #8a1f1f;
  border: 1px solid color-mix(in srgb, #dc2626 18%, transparent);
}

/* Attendee badge – premium physical ticket feel */
.pemp-attendee-badge {
  margin-top: 20px;
  max-width: 480px;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 30px 80px rgba(15,35,31,.26),
    0 1px 0 rgba(255,255,255,.12) inset;
}

/* Top section – dark */
.pemp-badge-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 22px 28px 18px;
  background: linear-gradient(135deg, var(--pemp-secondary), var(--pemp-primary));
  position: relative;
}

.pemp-badge-top::after {
  content: "";
  position: absolute;
  right: -50px; bottom: -50px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: var(--pemp-accent);
  opacity: .14;
}

.pemp-badge-top span {
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,.75);
}

.pemp-badge-top strong {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* Middle section – cream/white */
.pemp-attendee-badge h3 {
  font-family: var(--pemp-heading-font);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  color: var(--pemp-secondary);
  margin: 0;
  letter-spacing: -.02em;
  padding: 22px 28px 6px;
  background: var(--pemp-accent-2);
}

.pemp-attendee-badge p {
  margin: 0;
  padding: 0 28px 18px;
  font-size: 15px;
  color: var(--pemp-muted);
  background: var(--pemp-accent-2);
}

/* Tear line separator */
.pemp-badge-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--pemp-accent-2);
  border-top: 2px dashed color-mix(in srgb, var(--pemp-border) 90%, transparent);
  position: relative;
}

.pemp-badge-meta::before,
.pemp-badge-meta::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--pemp-page-bg, #fff);
}

.pemp-badge-meta::before { left: -10px; }
.pemp-badge-meta::after  { right: -10px; }

.pemp-badge-meta span {
  background: var(--pemp-card-bg);
  border: 1px solid var(--pemp-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 13px;
  color: var(--pemp-secondary);
}

/* Barcode/code area */
.pemp-badge-code {
  padding: 16px 28px;
  background: var(--pemp-card-bg);
  text-align: center;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--pemp-secondary);
  font-size: 14px;
  border-top: 1px solid color-mix(in srgb, var(--pemp-border) 70%, transparent);
}

.pemp-badge-footer {
  padding: 10px 28px 18px;
  background: var(--pemp-card-bg);
  font-size: 12px;
  font-weight: 700;
  color: var(--pemp-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ==============================================
   RESPONSIVE BREAKPOINTS
============================================== */

@media (max-width: 1200px) {
  .pemp-single-shell { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 1024px) {
  .pemp-events-grid { grid-template-columns: repeat(var(--pemp-tablet-cols, 2), minmax(0, 1fr)); }
  .pemp-card-featured { grid-template-columns: 1fr; }
  .pemp-card-featured .pemp-card-image { min-height: 300px; }
  .pemp-single-shell { grid-template-columns: 1fr; }
  .pemp-single-sidebar { position: relative; top: auto; }
  .pemp-template-showcase { grid-template-columns: 1fr; }
  .pemp-template-hero .pemp-template-image { min-height: 320px; }
  .pemp-template-masonry { columns: 2 250px; }
  .pemp-promo-card { grid-template-columns: 1fr; }
  .pemp-promo-image { min-height: 260px; }
  .pemp-dashboard-body { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .pemp-dashboard-stats { grid-template-columns: repeat(3, 1fr); }
  .pemp-badge-meta { flex-direction: column; align-items: stretch; }
  .pemp-badge-meta span { text-align: center; }
}

@media (max-width: 640px) {
  .pemp-events-grid { grid-template-columns: repeat(var(--pemp-mobile-cols, 1), minmax(0, 1fr)); gap: 18px; }
  .pemp-card-image { min-height: 220px; }
  .pemp-card-body { padding: 20px; }
  .pemp-card h3 { font-size: 20px; }
  .pemp-countdown { gap: 7px; }
  .pemp-countdown strong { font-size: 22px; }
  .pemp-calendar { padding: 16px; border-radius: 20px; }
  .pemp-calendar-head h3 { font-size: 20px; }
  .pemp-cal-nav { width: 36px; height: 36px; font-size: 17px; }
  .pemp-calendar-labels { display: none; }
  .pemp-calendar-grid { grid-template-columns: 1fr; gap: 6px; }
  .pemp-cal-cell { min-height: auto; }
  .pemp-empty-cell { display: none; }
  .pemp-calendar-filter { grid-template-columns: 1fr; }
  .pemp-calendar-filter .pemp-btn { width: 100%; }
  .pemp-calendar-tabs { width: 100%; }
  .pemp-calendar-tabs a { flex: 1; text-align: center; }
  .pemp-cal-list-item { grid-template-columns: 1fr; gap: 6px; }
  .pemp-cal-list-item span { justify-self: start; }
  .pemp-single-hero { min-height: 280px; border-radius: 20px; }
  .pemp-rsvp-box { padding: 22px; }
  .pemp-promo-content { padding: 26px 24px; }
  .pemp-template-compact { grid-template-columns: 1fr; }
  .pemp-template-compact .pemp-template-image {
    min-height: 180px;
    border-radius: calc(var(--pemp-card-radius) - 2px) calc(var(--pemp-card-radius) - 2px) 0 0;
  }
  .pemp-template-slider { grid-auto-columns: 88vw; }
  .pemp-template-timeline { padding-left: 24px; }
  .pemp-timeline-dot { left: -27px; }
  .pemp-template-masonry { columns: 1; }
  .pemp-dashboard { padding: 18px; }
  .pemp-dashboard-stats { grid-template-columns: 1fr; }
  .pemp-actions { flex-direction: column; align-items: stretch; }
  .pemp-actions .pemp-btn,
  .pemp-actions .pemp-link { width: 100%; justify-content: center; }
  .pemp-attendee-badge h3 { font-size: 22px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .pemp-card,
  .pemp-template-card,
  .pemp-cal-list-item,
  .pemp-btn,
  .pemp-cal-nav,
  .pemp-promo-card,
  .pemp-dashboard-stats > div {
    transition: none !important;
  }
  .pemp-card:hover,
  .pemp-template-card:hover,
  .pemp-dashboard-stats > div:hover,
  .pemp-promo-card:hover {
    transform: none !important;
  }
  .pemp-card-image::after,
  .pemp-template-image::after,
  .pemp-promo-image::after {
    transition: none !important;
  }
}


/* ============================================================
   PEMP v13: event lifecycle, past event state, and banner handling
   ============================================================ */
.pemp-event-past {
  opacity: .96;
}

.pemp-event-past .pemp-card-image,
.pemp-event-past .pemp-template-image,
.pemp-event-past .pemp-promo-image {
  filter: saturate(.82);
}

.pemp-card-image::after,
.pemp-card-image::before {
  pointer-events: none;
}

.pemp-card-image::after {
  display: none;
}

.pemp-card-image {
  background: color-mix(in srgb, var(--pemp-accent-2) 55%, var(--pemp-card-bg));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pemp-card-img,
.pemp-template-image img,
.pemp-promo-image img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform .55s var(--pemp-ease), filter .55s var(--pemp-ease);
}

.pemp-card:hover .pemp-card-img,
.pemp-template-card:hover .pemp-template-image img,
.pemp-promo-card:hover .pemp-promo-image img {
  transform: scale(1.035);
}

.pemp-template-image,
.pemp-promo-image {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pemp-accent-2) 55%, var(--pemp-card-bg));
  overflow: hidden;
}

.pemp-status-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pemp-primary);
  box-shadow: 0 12px 28px rgba(15,35,31,.18);
}

.pemp-status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .9;
}

.pemp-status-past {
  background: #334155;
}

.pemp-status-ongoing {
  background: #15803d;
}

.pemp-event-past .pemp-card-body,
.pemp-event-past .pemp-template-content {
  background: linear-gradient(180deg, var(--pemp-card-bg), color-mix(in srgb, #64748b 7%, var(--pemp-card-bg)));
}

.pemp-event-past .pemp-card h3 a,
.pemp-event-past h3 a {
  color: color-mix(in srgb, var(--pemp-text) 80%, #64748b) !important;
}

.pemp-btn-muted {
  background: #334155 !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(51,65,85,.18) !important;
}

.pemp-countdown-ended {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, #334155 25%, var(--pemp-border));
  border-radius: var(--pemp-card-radius);
  background: linear-gradient(135deg, color-mix(in srgb, #334155 10%, var(--pemp-card-bg)), var(--pemp-card-bg));
  color: #334155;
  text-align: center;
}

.pemp-countdown-ended strong {
  font-family: var(--pemp-heading-font);
  font-size: 22px;
  line-height: 1.1;
  color: #334155;
}

.pemp-countdown-ended span {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b;
}

.pemp-rsvp-closed {
  border-color: color-mix(in srgb, #334155 25%, var(--pemp-border));
  background: linear-gradient(135deg, color-mix(in srgb, #334155 8%, var(--pemp-card-bg)), var(--pemp-card-bg));
}

.pemp-single-hero-v13 {
  min-height: auto;
  padding: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pemp-accent-2) 70%, var(--pemp-card-bg)), var(--pemp-card-bg));
  display: grid;
  place-items: center;
}

.pemp-single-hero-v13::after {
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--pemp-secondary) 72%, transparent));
  z-index: 2;
}

.pemp-single-hero-v13 img {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  object-position: center;
  display: block;
  position: relative;
  z-index: 1;
}

.pemp-single-hero-content {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  z-index: 3;
  color: #fff;
  display: grid;
  gap: 8px;
}

.pemp-single-hero-content .pemp-status-badge {
  position: static;
  width: max-content;
}

.pemp-single-hero-content h1 {
  font-family: var(--pemp-heading-font);
  font-size: clamp(28px, 5vw, 58px);
  line-height: .96;
  margin: 0;
  color: #fff;
  text-shadow: 0 12px 36px rgba(0,0,0,.24);
}

.pemp-single-hero-content p {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: rgba(255,255,255,.9);
}

.pemp-single-titlebar {
  margin-bottom: 24px;
  padding: 26px;
  border: 1px solid var(--pemp-border);
  border-radius: var(--pemp-card-radius);
  background: var(--pemp-card-bg);
}

.pemp-single-titlebar .pemp-status-badge {
  position: static;
  margin-bottom: 12px;
}

.pemp-single-titlebar h1 {
  margin: 0;
  font-family: var(--pemp-heading-font);
  color: var(--pemp-text);
}

@media (max-width: 640px) {
  .pemp-status-badge {
    top: 10px;
    right: 10px;
    padding: 7px 10px;
    font-size: 10px;
  }

  .pemp-single-hero-content {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .pemp-single-hero-v13 img {
    max-height: 460px;
  }
}

/* ============================================================
   PEMP v14: stronger past event badge and empty calendar state
   ============================================================ */
.pemp-status-past {
  background: #dc2626 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.24);
}

.pemp-event-past .pemp-card-image::before,
.pemp-event-past .pemp-template-image::before,
.pemp-event-past .pemp-promo-image::before {
  background: linear-gradient(180deg, rgba(220,38,38,.05), rgba(127,29,29,.28));
}

.pemp-event-past .pemp-card {
  border-color: color-mix(in srgb, #dc2626 24%, var(--pemp-border));
}

.pemp-calendar-empty-state {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  padding: clamp(34px, 6vw, 74px) 24px;
  border: 1px solid color-mix(in srgb, var(--pemp-primary) 18%, var(--pemp-border));
  border-radius: calc(var(--pemp-card-radius) + 8px);
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--pemp-accent) 28%, transparent), transparent 30%),
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--pemp-primary) 16%, transparent), transparent 34%),
    linear-gradient(135deg, var(--pemp-card-bg), color-mix(in srgb, var(--pemp-accent-2) 38%, var(--pemp-card-bg)));
  box-shadow: 0 22px 70px rgba(15,35,31,.08);
}

.pemp-calendar-empty-state::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed color-mix(in srgb, var(--pemp-primary) 22%, transparent);
  border-radius: calc(var(--pemp-card-radius) + 2px);
  pointer-events: none;
}

.pemp-calendar-empty-icon {
  width: 82px;
  height: 82px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: var(--pemp-primary);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pemp-primary) 10%, var(--pemp-card-bg)), var(--pemp-card-bg));
  border: 1px solid color-mix(in srgb, var(--pemp-primary) 18%, var(--pemp-border));
  box-shadow: 0 18px 40px rgba(15,35,31,.08);
  position: relative;
  z-index: 2;
}

.pemp-calendar-empty-kicker {
  position: relative;
  z-index: 2;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pemp-primary) 10%, var(--pemp-card-bg));
  color: var(--pemp-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.pemp-calendar-empty-state h4 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--pemp-heading-font);
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: .98;
  color: var(--pemp-text);
}

.pemp-calendar-empty-state p {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0;
  color: var(--pemp-muted);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 600;
}

.pemp-calendar-empty-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .pemp-calendar-empty-state {
    padding: 38px 18px;
  }

  .pemp-calendar-empty-state::before {
    inset: 10px;
  }

  .pemp-calendar-empty-actions {
    width: 100%;
  }

  .pemp-calendar-empty-actions .pemp-btn {
    width: 100%;
  }
}

/* ============================================================
   PEMP v15: past event recap system
   ============================================================ */
.pemp-event-recap {
  margin: 34px 0;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid color-mix(in srgb, var(--pemp-primary) 16%, var(--pemp-border));
  border-radius: calc(var(--pemp-card-radius) + 8px);
  background:
    radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--pemp-accent) 26%, transparent), transparent 28%),
    linear-gradient(135deg, var(--pemp-card-bg), color-mix(in srgb, var(--pemp-accent-2) 32%, var(--pemp-card-bg)));
  box-shadow: 0 22px 70px rgba(15,35,31,.08);
}

.pemp-recap-head {
  max-width: 760px;
  margin-bottom: 22px;
}

.pemp-recap-head span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pemp-primary) 10%, var(--pemp-card-bg));
  color: var(--pemp-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.pemp-recap-head h3 {
  margin: 0 0 10px;
  font-family: var(--pemp-heading-font);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1;
  color: var(--pemp-text);
}

.pemp-recap-head p {
  margin: 0;
  color: var(--pemp-muted);
  font-size: 16px;
  line-height: 1.8;
}

.pemp-recap-impact {
  margin: 0 0 22px;
  padding: 18px 20px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--pemp-primary) 10%, var(--pemp-card-bg));
  color: var(--pemp-primary);
}

.pemp-recap-impact strong {
  font-size: clamp(20px, 3vw, 34px);
  font-family: var(--pemp-heading-font);
  line-height: 1.1;
}

.pemp-recap-video {
  margin: 0 0 22px;
}

.pemp-recap-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}

.pemp-recap-gallery a {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: var(--pemp-accent-2);
  min-height: 180px;
}

.pemp-recap-gallery img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--pemp-ease), filter .45s var(--pemp-ease);
}

.pemp-recap-gallery a:hover img {
  transform: scale(1.05);
  filter: saturate(1.08);
}

.pemp-recap-highlights {
  margin-top: 24px;
  padding: 22px;
  border-radius: 20px;
  background: var(--pemp-card-bg);
  border: 1px solid color-mix(in srgb, var(--pemp-border) 80%, transparent);
}

.pemp-recap-highlights h4 {
  margin: 0 0 14px;
  font-family: var(--pemp-heading-font);
  color: var(--pemp-text);
  font-size: 22px;
}

.pemp-recap-highlights ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pemp-recap-highlights li {
  position: relative;
  padding-left: 28px;
  color: var(--pemp-text);
  font-weight: 650;
  line-height: 1.6;
}

.pemp-recap-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pemp-primary);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--pemp-primary) 10%, transparent);
}

@media (max-width: 760px) {
  .pemp-recap-gallery {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PEMP v16: theme font inheritance and past color variables
   ============================================================ */
.pemp-status-past {
  background: var(--pemp-past-bg, #dc2626) !important;
  color: var(--pemp-past-text, #fff) !important;
}

.pemp-single,
.pemp-card,
.pemp-calendar,
.pemp-rsvp-box,
.pemp-promo-card,
.pemp-template-card,
.pemp-event-recap {
  font-family: var(--pemp-body-font, inherit);
}

.pemp-card h3,
.pemp-calendar-head h3,
.pemp-single-hero-content h1,
.pemp-single-titlebar h1,
.pemp-recap-head h3,
.pemp-calendar-empty-state h4,
.pemp-section h3 {
  font-family: var(--pemp-heading-font, inherit);
}

/* ============================================================
   PEMP v17: full color control expansion
   ============================================================ */
.pemp-status-upcoming {
  background: var(--pemp-upcoming-bg, var(--pemp-primary)) !important;
  color: var(--pemp-upcoming-text, #fff) !important;
}

.pemp-status-ongoing {
  background: var(--pemp-ongoing-bg, #15803d) !important;
  color: var(--pemp-ongoing-text, #fff) !important;
}

.pemp-status-past {
  background: var(--pemp-past-bg, #dc2626) !important;
  color: var(--pemp-past-text, #fff) !important;
}

.pemp-countdown-ended {
  background: var(--pemp-ended-bg, #fee2e2) !important;
  border-color: var(--pemp-ended-border, #fca5a5) !important;
  color: var(--pemp-ended-text, #7f1d1d) !important;
}

.pemp-countdown-ended strong,
.pemp-countdown-ended span {
  color: var(--pemp-ended-text, #7f1d1d) !important;
}

.pemp-calendar-empty-state {
  background: var(--pemp-empty-bg, #fff) !important;
}

.pemp-calendar-empty-icon,
.pemp-calendar-empty-kicker {
  color: var(--pemp-empty-icon, var(--pemp-primary)) !important;
}

.pemp-calendar-empty-state h4 {
  color: var(--pemp-empty-heading, var(--pemp-text)) !important;
}

.pemp-calendar-empty-state p {
  color: var(--pemp-empty-text, var(--pemp-muted)) !important;
}

.pemp-event-recap {
  background: var(--pemp-recap-bg, var(--pemp-card-bg)) !important;
}

.pemp-recap-head h3,
.pemp-recap-highlights h4 {
  color: var(--pemp-recap-title, var(--pemp-text)) !important;
}

.pemp-recap-head p,
.pemp-recap-highlights li {
  color: var(--pemp-recap-text, var(--pemp-muted)) !important;
}

.pemp-recap-head span,
.pemp-recap-impact,
.pemp-recap-impact strong,
.pemp-recap-highlights li::before {
  color: var(--pemp-recap-highlight, var(--pemp-primary)) !important;
}

.pemp-recap-highlights li::before {
  background: var(--pemp-recap-highlight, var(--pemp-primary)) !important;
}

.pemp-rsvp-closed {
  background: var(--pemp-rsvp-closed-bg, var(--pemp-card-bg)) !important;
  border-color: var(--pemp-rsvp-closed-border, var(--pemp-border)) !important;
  color: var(--pemp-rsvp-closed-text, #334155) !important;
}

.pemp-rsvp-closed h3,
.pemp-rsvp-closed p {
  color: var(--pemp-rsvp-closed-text, #334155) !important;
}

/* ============================================================
   PEMP v19: Prolink branding cleanup and event title controls
   ============================================================ */
.pemp-card h3 {
  font-size: var(--pemp-card-title-size, 26px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em;
}

.pemp-card h3 a {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.pemp-single-hero-content h1,
.pemp-single-titlebar h1,
body.single-pemp_event .entry-title,
body.single-pemp_event h1.entry-title {
  font-size: var(--pemp-single-title-size, 56px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em;
  word-break: normal;
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  .pemp-card h3 {
    font-size: var(--pemp-card-title-mobile-size, 28px) !important;
    line-height: 1.05 !important;
  }

  .pemp-single-hero-content h1,
  .pemp-single-titlebar h1,
  body.single-pemp_event .entry-title,
  body.single-pemp_event h1.entry-title {
    font-size: var(--pemp-single-title-mobile-size, 36px) !important;
    line-height: 1.02 !important;
  }
}

/* ============================================================
   PEMP v20: event banner display controls
   ============================================================ */
.pemp-card-image {
  min-height: var(--pemp-card-image-height-desktop, 230px) !important;
  height: var(--pemp-card-image-height-desktop, 230px) !important;
}

.pemp-card-img,
.pemp-template-image img,
.pemp-promo-image img {
  object-fit: var(--pemp-card-image-fit, contain) !important;
  object-position: var(--pemp-card-image-position, center center) !important;
}

.pemp-template-image,
.pemp-promo-image {
  min-height: var(--pemp-card-image-height-desktop, 230px);
}

.pemp-single-hero-v13 img {
  max-height: var(--pemp-single-banner-max-height-desktop, 620px) !important;
  object-fit: var(--pemp-single-banner-fit, contain) !important;
  object-position: var(--pemp-single-banner-position, center center) !important;
}

.pemp-single-hero-v13 {
  background-position: var(--pemp-single-banner-position, center center) !important;
}

@media (max-width: 900px) {
  .pemp-card-image {
    min-height: var(--pemp-card-image-height-tablet, 220px) !important;
    height: var(--pemp-card-image-height-tablet, 220px) !important;
  }

  .pemp-template-image,
  .pemp-promo-image {
    min-height: var(--pemp-card-image-height-tablet, 220px);
  }
}

@media (max-width: 640px) {
  .pemp-card-image {
    min-height: var(--pemp-card-image-height-mobile, 220px) !important;
    height: var(--pemp-card-image-height-mobile, 220px) !important;
  }

  .pemp-template-image,
  .pemp-promo-image {
    min-height: var(--pemp-card-image-height-mobile, 220px);
  }

  .pemp-single-hero-v13 img {
    max-height: var(--pemp-single-banner-max-height-mobile, 460px) !important;
  }
}

/* ============================================================
   PEMP v23: event categories and frontend filters pro
   ============================================================ */
.pemp-filtered-events-pro {
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid var(--pemp-border);
  border-radius: calc(var(--pemp-card-radius) + 6px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pemp-accent-2) 35%, var(--pemp-card-bg)), var(--pemp-card-bg));
}

.pemp-filtered-head {
  display: grid;
  gap: 6px;
}

.pemp-filtered-head span {
  color: var(--pemp-primary);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
}

.pemp-filtered-head p {
  margin: 0;
  color: var(--pemp-muted);
}

.pemp-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 0;
}

.pemp-filter-tabs a {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--pemp-border);
  background: var(--pemp-card-bg);
  color: var(--pemp-text);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  transition: all var(--pemp-duration) var(--pemp-ease);
}

.pemp-filter-tabs a:hover,
.pemp-filter-tabs a.is-active {
  background: var(--pemp-button-bg);
  color: var(--pemp-button-text);
  border-color: var(--pemp-button-bg);
  transform: translateY(-1px);
}

.pemp-filter-pro {
  grid-template-columns: 2fr 1.2fr 1.1fr auto auto;
  align-items: center;
}

.pemp-filter-reset {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--pemp-border);
  color: var(--pemp-muted);
  text-decoration: none;
  font-weight: 800;
}

.pemp-filter-reset:hover {
  color: var(--pemp-link-hover);
  border-color: var(--pemp-link-hover);
}

@media (max-width: 900px) {
  .pemp-filter-pro {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .pemp-filter-pro {
    grid-template-columns: 1fr;
  }
  .pemp-filter-reset {
    width: 100%;
  }
}

/* ============================================================
   PEMP v24: final mobile polish, accessibility, and performance
   ============================================================ */
.pemp-cal-nav:focus-visible,
.pemp-filter-tabs a:focus-visible,
.pemp-filter-reset:focus-visible,
.pemp-card a:focus-visible,
.pemp-btn:focus-visible,
.pemp-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pemp-input-focus) 45%, transparent);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .pemp-card-body {
    padding: 20px;
  }

  .pemp-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .pemp-actions .pemp-btn,
  .pemp-actions .pemp-link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .pemp-calendar-head {
    gap: 10px;
  }

  .pemp-calendar-head h3 {
    font-size: 20px;
    text-align: center;
  }

  .pemp-filter-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .pemp-filter-tabs a {
    text-align: center;
  }

  .pemp-single-shell {
    gap: 22px;
  }
}

/* ============================================================
   PEMP v26: RSVP save fix and beautiful confirmation feedback
   ============================================================ */
.pemp-rsvp-feedback {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(8px);
  animation: pempFadeIn .25s ease both;
}

.pemp-rsvp-feedback-card {
  width: min(520px, 100%);
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: center;
  padding: 28px;
  border-radius: 28px;
  background: var(--pemp-card-bg);
  color: var(--pemp-text);
  border: 1px solid color-mix(in srgb, var(--pemp-border) 80%, transparent);
  box-shadow: 0 30px 90px rgba(2, 6, 23, .28);
}

.pemp-rsvp-feedback-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 34px;
  font-weight: 900;
  background: var(--pemp-ongoing-bg, #15803D);
  color: var(--pemp-ongoing-text, #fff);
}

.pemp-rsvp-feedback-error .pemp-rsvp-feedback-icon {
  background: var(--pemp-past-bg, #DC2626);
  color: var(--pemp-past-text, #fff);
}

.pemp-rsvp-feedback-card strong {
  display: block;
  font-family: var(--pemp-heading-font);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: -.03em;
}

.pemp-rsvp-feedback-card p {
  margin: 8px 0 0;
  color: var(--pemp-muted);
  font-size: 16px;
  line-height: 1.55;
}

.pemp-rsvp-feedback-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  color: var(--pemp-muted);
  background: color-mix(in srgb, var(--pemp-border) 45%, transparent);
  font-size: 22px;
  line-height: 1;
}

.pemp-rsvp-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 100000;
  width: min(420px, calc(100vw - 28px));
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--pemp-card-bg);
  color: var(--pemp-text);
  border: 1px solid var(--pemp-border);
  box-shadow: 0 20px 60px rgba(2, 6, 23, .18);
  animation: pempToastIn .4s ease both;
}

.pemp-rsvp-toast span {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--pemp-ongoing-bg, #15803D);
  color: var(--pemp-ongoing-text, #fff);
  font-weight: 900;
  flex: 0 0 auto;
}

.pemp-rsvp-toast-error span {
  background: var(--pemp-past-bg, #DC2626);
  color: var(--pemp-past-text, #fff);
}

.pemp-rsvp-toast strong { display: block; font-weight: 900; }
.pemp-rsvp-toast p { margin: 2px 0 0; color: var(--pemp-muted); font-size: 13px; line-height: 1.35; }

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

@media (max-width: 640px) {
  .pemp-rsvp-feedback {
    align-items: end;
    padding: 12px;
  }
  .pemp-rsvp-feedback-card {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: 30px 22px 26px;
    border-radius: 26px 26px 18px 18px;
  }
  .pemp-rsvp-toast {
    right: 14px;
    bottom: 14px;
  }
}

/* ============================================================
   PEMP v27: clean single banner and RSVP modal only
   ============================================================ */
.pemp-single-hero-clean::after,
.pemp-single-hero-clean::before {
  display: none !important;
}

.pemp-single-hero-clean {
  box-shadow: 0 18px 54px rgba(15,35,31,.12);
}

.pemp-single-hero-clean img {
  width: 100%;
  display: block;
}

.pemp-field-help {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--pemp-muted);
}

.pemp-rsvp-toast {
  display: none !important;
}

.pemp-rsvp-feedback {
  transition: opacity .28s ease;
}

/* ============================================================
   PEMP v28: frontend admin portal and seat allocation UI
   ============================================================ */
/* ============================================================
   PEMP FRONTEND ADMIN PORTAL v29 — Premium SaaS Design
   All classes scoped to .pemp-portal-* and .pemp-portal
   ============================================================ */

/* ── SHARED FONT INHERITANCE ── */
.pemp-portal,
.pemp-portal-login-wrap {
  font-family: var(--pemp-body-font, inherit);
  color: var(--pemp-text, #102B27);
  box-sizing: border-box;
}
.pemp-portal *,
.pemp-portal-login-wrap * { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════════════════════════════ */
.pemp-portal-login-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(20px, 6vw, 60px) clamp(16px, 4vw, 32px);
  overflow: hidden;
  background: linear-gradient(145deg, #f0f7f5 0%, #fdf6f0 50%, #f5ede8 100%);
}

/* Decorative blobs */
.pemp-portal-login-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.pemp-portal-login-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
}
.pemp-portal-blob-1 {
  width: 480px; height: 480px;
  top: -140px; left: -120px;
  background: radial-gradient(circle, #215E56, transparent 70%);
}
.pemp-portal-blob-2 {
  width: 360px; height: 360px;
  bottom: -100px; right: -80px;
  background: radial-gradient(circle, #F4C4B6, transparent 70%);
}

/* Login card */
.pemp-portal-login-card {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  padding: clamp(28px, 5vw, 48px) clamp(24px, 5vw, 44px);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 28px;
  box-shadow:
    0 4px 6px -1px rgba(16,43,39,.06),
    0 20px 60px -12px rgba(16,43,39,.20),
    0 0 0 1px rgba(33,94,86,.07);
}

/* Brand row */
.pemp-portal-login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.pemp-portal-login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #215E56, #2d7a6e);
  color: #fff;
  flex-shrink: 0;
}
.pemp-portal-login-brand-name {
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #215E56;
}

/* Headline */
.pemp-portal-login-headline {
  margin-bottom: 28px;
}
.pemp-portal-login-headline h2 {
  margin: 0 0 8px;
  font-family: var(--pemp-heading-font, inherit);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--pemp-text, #102B27);
}
.pemp-portal-login-headline p {
  margin: 0;
  color: var(--pemp-muted, #64736F);
  font-size: 14px;
  line-height: 1.6;
}

/* WordPress login form overrides — scoped */
.pemp-portal-login-form-wrap .login-username,
.pemp-portal-login-form-wrap .login-password {
  margin-bottom: 18px;
}
.pemp-portal-login-form-wrap label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--pemp-text, #102B27);
  margin-bottom: 7px;
  letter-spacing: .01em;
}
.pemp-portal-login-form-wrap input[type="text"],
.pemp-portal-login-form-wrap input[type="password"] {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1.5px solid var(--pemp-border, #D8E5DF);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  color: var(--pemp-text, #102B27);
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.pemp-portal-login-form-wrap input[type="text"]:focus,
.pemp-portal-login-form-wrap input[type="password"]:focus {
  border-color: #215E56;
  box-shadow: 0 0 0 3.5px rgba(33,94,86,.14);
}

/* Password wrapper — injected by JS */
.pemp-portal-pwd-wrap {
  position: relative;
}
.pemp-portal-pwd-wrap input[type="password"],
.pemp-portal-pwd-wrap input[type="text"] {
  padding-right: 50px;
}
.pemp-portal-eye {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--pemp-muted, #64736F);
  border-radius: 6px;
  padding: 0;
  transition: color .16s, background .16s;
  z-index: 2;
}
.pemp-portal-eye:hover {
  color: #215E56;
  background: rgba(33,94,86,.08);
}
.pemp-portal-eye svg { display: block; pointer-events: none; }

/* Remember me */
.pemp-portal-login-form-wrap .login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.pemp-portal-login-form-wrap .login-remember label {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  color: var(--pemp-muted, #64736F);
  cursor: pointer;
}
.pemp-portal-login-form-wrap input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #215E56;
}

/* Submit button */
.pemp-portal-login-form-wrap .login-submit {
  margin-top: 4px;
}
.pemp-portal-login-form-wrap .login-submit input[type="submit"] {
  display: block;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #215E56 0%, #2d7a6e 100%);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  transition: opacity .18s, transform .14s, box-shadow .18s;
  box-shadow: 0 4px 14px rgba(33,94,86,.32);
  -webkit-appearance: none;
  appearance: none;
}
.pemp-portal-login-form-wrap .login-submit input[type="submit"]:hover {
  opacity: .9;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(33,94,86,.38);
}
.pemp-portal-login-form-wrap .login-submit input[type="submit"]:active {
  transform: translateY(0);
  opacity: 1;
}

/* Forgot password */
.pemp-portal-login-footer {
  margin-top: 20px;
  text-align: center;
}
.pemp-portal-forgot {
  font-size: 13px;
  font-weight: 700;
  color: #215E56;
  text-decoration: none;
  transition: opacity .16s;
}
.pemp-portal-forgot:hover { opacity: .7; text-decoration: underline; }

/* No-access message */
.pemp-portal-no-access {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px;
  border: 1px solid var(--pemp-border, #D8E5DF);
  border-radius: 24px;
  background: var(--pemp-card-bg, #fff);
}
.pemp-portal-no-access-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: #fef2f2;
  color: #dc2626;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.pemp-portal-no-access h3 { margin: 0 0 8px; font-size: 20px; color: var(--pemp-text,#102B27); }
.pemp-portal-no-access p  { margin: 0; color: var(--pemp-muted,#64736F); max-width: 360px; }

/* ═══════════════════════════════════════════════════════════
   PORTAL DASHBOARD LAYOUT
═══════════════════════════════════════════════════════════ */
.pemp-portal {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 100%;
}

/* ── HEADER / HERO ── */
.pemp-portal-header {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}
.pemp-portal-header-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #215E56 0%, #173E37 60%, #102B27 100%);
}
.pemp-portal-header-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(244,196,182,.18) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(61,214,140,.1) 0%, transparent 50%);
}
.pemp-portal-header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(24px, 3.5vw, 36px) clamp(24px, 3.5vw, 36px);
  flex-wrap: wrap;
}

.pemp-portal-profile {
  display: flex;
  align-items: center;
  gap: 18px;
}
.pemp-portal-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.pemp-portal-avatar {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.55);
  object-fit: cover;
}
.pemp-portal-avatar-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.22);
  animation: pemp-portal-spin 18s linear infinite;
  pointer-events: none;
}
@keyframes pemp-portal-spin { to { transform: rotate(360deg); } }

.pemp-portal-profile-info { color: #fff; }
.pemp-portal-greeting {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 4px;
}
.pemp-portal-name {
  margin: 0 0 5px;
  font-family: var(--pemp-heading-font, inherit);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
}
.pemp-portal-email {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
}
.pemp-portal-email svg { flex-shrink: 0; }

.pemp-portal-logout {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 12px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s, border-color .18s, transform .12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.pemp-portal-logout:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}

/* ── STATS GRID ── */
.pemp-portal-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .pemp-portal-stats { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px)  { .pemp-portal-stats { grid-template-columns: repeat(2,1fr); } }

.pemp-portal-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px,2.5vw,26px) clamp(16px,2.2vw,22px);
  border-radius: 20px;
  background: var(--pemp-card-bg, #fff);
  border: 1px solid var(--pemp-border, #D8E5DF);
  box-shadow: 0 2px 8px rgba(16,43,39,.06), 0 8px 28px rgba(16,43,39,.06);
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.pemp-portal-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 20px 20px 0 0;
}
.pemp-portal-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16,43,39,.08), 0 16px 40px rgba(16,43,39,.10);
}
.pemp-pstat-events::before  { background: linear-gradient(90deg, #215E56, #3dd68c); }
.pemp-pstat-pending::before  { background: linear-gradient(90deg, #d97706, #fbbf24); }
.pemp-pstat-confirmed::before{ background: linear-gradient(90deg, #16a34a, #4ade80); }
.pemp-pstat-checkin::before  { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.pemp-pstat-total::before    { background: linear-gradient(90deg, #7c3aed, #a78bfa); }

.pemp-portal-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
}
.pemp-pstat-events .pemp-portal-stat-icon  { background: rgba(33,94,86,.10); color: #215E56; }
.pemp-pstat-pending .pemp-portal-stat-icon  { background: rgba(217,119,6,.10); color: #d97706; }
.pemp-pstat-confirmed .pemp-portal-stat-icon{ background: rgba(22,163,74,.10); color: #16a34a; }
.pemp-pstat-checkin .pemp-portal-stat-icon  { background: rgba(37,99,235,.10); color: #2563eb; }
.pemp-pstat-total .pemp-portal-stat-icon    { background: rgba(124,58,237,.10); color: #7c3aed; }

.pemp-portal-stat-num {
  font-family: var(--pemp-heading-font, inherit);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 900;
  line-height: 1;
  color: var(--pemp-text, #102B27);
}
.pemp-portal-stat-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--pemp-muted, #64736F);
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* ── RSVP PANEL ── */
.pemp-portal-panel {
  border: 1px solid var(--pemp-border, #D8E5DF);
  border-radius: 22px;
  background: var(--pemp-card-bg, #fff);
  box-shadow: 0 2px 8px rgba(16,43,39,.05), 0 10px 30px rgba(16,43,39,.06);
  overflow: hidden;
}
.pemp-portal-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--pemp-border, #D8E5DF);
  background: linear-gradient(135deg, rgba(33,94,86,.03), rgba(244,196,182,.05));
}
.pemp-portal-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #215E56;
}
.pemp-portal-panel-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--pemp-text, #102B27);
}
.pemp-portal-panel-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--pemp-muted, #64736F);
  background: rgba(33,94,86,.08);
  padding: 4px 12px;
  border-radius: 999px;
}

/* ── DESKTOP TABLE ── */
.pemp-portal-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pemp-portal-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}
.pemp-portal-table thead tr {
  background: rgba(33,94,86,.04);
  border-bottom: 1.5px solid var(--pemp-border, #D8E5DF);
}
.pemp-portal-table th {
  padding: 13px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pemp-muted, #64736F);
  white-space: nowrap;
}
.pemp-portal-table td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--pemp-border, #D8E5DF);
  vertical-align: middle;
  font-size: 14px;
}
.pemp-portal-row:last-child td { border-bottom: none; }
.pemp-portal-row:hover td { background: rgba(33,94,86,.025); }

/* Guest cell */
.pemp-portal-guest-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 180px;
}
.pemp-portal-guest-init {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #215E56, #2d7a6e);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  flex-shrink: 0;
}
.pemp-portal-guest-cell strong { display: block; font-size: 14px; font-weight: 700; color: var(--pemp-text,#102B27); }
.pemp-portal-guest-cell small  { display: block; font-size: 12px; color: var(--pemp-muted,#64736F); margin-top: 2px; }

.pemp-portal-event-title { font-size: 13px; font-weight: 600; color: var(--pemp-text,#102B27); }
.pemp-portal-ticket-type {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(33,94,86,.08);
  color: #215E56;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.pemp-portal-seat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 8px;
  background: rgba(37,99,235,.08);
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
}
.pemp-portal-seat-none { color: var(--pemp-muted,#64736F); font-size: 13px; }

/* Status badges */
.pemp-portal-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pemp-portal-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pemp-pstatus-confirmed { background: #dcfce7; color: #15803d; }
.pemp-pstatus-confirmed::before { background: #16a34a; }
.pemp-pstatus-pending   { background: #fef3c7; color: #b45309; }
.pemp-pstatus-pending::before   { background: #d97706; }
.pemp-pstatus-waitlist  { background: #fff7ed; color: #c2410c; }
.pemp-pstatus-waitlist::before  { background: #ea580c; }
.pemp-pstatus-cancelled { background: #fee2e2; color: #b91c1c; }
.pemp-pstatus-cancelled::before { background: #dc2626; }
.pemp-pstatus-checkin   { background: #dbeafe; color: #1d4ed8; }
.pemp-pstatus-checkin::before   { background: #2563eb; }

/* QR cell */
.pemp-portal-qr-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.pemp-portal-qr-img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  border: 1px solid var(--pemp-border, #D8E5DF);
  padding: 4px;
  background: #fff;
  object-fit: contain;
}
.pemp-portal-qr-code {
  font-size: 10px;
  color: var(--pemp-muted, #64736F);
  word-break: break-all;
  text-align: center;
  max-width: 90px;
}

/* Check-in cell */
.pemp-portal-checkin-yes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #16a34a;
  font-size: 12px;
  font-weight: 700;
}
.pemp-portal-checkin-time {
  display: block;
  font-size: 11px;
  color: var(--pemp-muted, #64736F);
  margin-top: 3px;
}
.pemp-portal-checkin-no {
  font-size: 12px;
  color: var(--pemp-muted, #64736F);
}

/* Action buttons */
.pemp-portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pemp-pa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 10px;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .02em;
  transition: filter .16s, transform .12s, box-shadow .16s;
  line-height: 1;
}
.pemp-pa:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  text-decoration: none !important;
}
.pemp-pa:active { transform: translateY(0); filter: brightness(.95); }
.pemp-pa svg { flex-shrink: 0; }

.pemp-pa-approve  { background: linear-gradient(135deg, #16a34a, #15803d); box-shadow: 0 2px 8px rgba(22,163,74,.30); }
.pemp-pa-waitlist { background: linear-gradient(135deg, #d97706, #b45309); box-shadow: 0 2px 8px rgba(217,119,6,.28); }
.pemp-pa-checkin  { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 2px 8px rgba(37,99,235,.30); }
.pemp-pa-cancel   { background: linear-gradient(135deg, #dc2626, #b91c1c); box-shadow: 0 2px 8px rgba(220,38,38,.28); }

/* ── MOBILE CARDS (hidden on desktop) ── */
.pemp-portal-cards { display: none; }

.pemp-portal-card {
  border-bottom: 1px solid var(--pemp-border, #D8E5DF);
  padding: 18px 20px;
}
.pemp-portal-card:last-child { border-bottom: none; }

.pemp-pcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.pemp-pcard-guest {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pemp-pcard-init {
  width: 44px; height: 44px;
  font-size: 18px;
  flex-shrink: 0;
}
.pemp-pcard-guest-info { min-width: 0; }
.pemp-pcard-guest-info strong { display: block; font-size: 14px; font-weight: 700; color: var(--pemp-text,#102B27); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pemp-pcard-guest-info small  { display: block; font-size: 12px; color: var(--pemp-muted,#64736F); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pemp-pcard-body {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
}
.pemp-pcard-meta { flex: 1; min-width: 0; }
.pemp-pcard-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.pemp-pcard-meta-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pemp-muted, #64736F);
  text-transform: uppercase;
  letter-spacing: .05em;
  min-width: 44px;
  padding-top: 2px;
}
.pemp-pcard-meta-val { font-size: 13px; color: var(--pemp-text,#102B27); font-weight: 500; }
.pemp-pcard-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pemp-pcard-qr img {
  width: 80px; height: 80px;
  border-radius: 10px;
  border: 1px solid var(--pemp-border, #D8E5DF);
  padding: 4px;
  background: #fff;
  object-fit: contain;
}
.pemp-pcard-qr code {
  font-size: 10px;
  color: var(--pemp-muted, #64736F);
  word-break: break-all;
  text-align: center;
  max-width: 80px;
}
.pemp-pcard-actions { gap: 7px; }
.pemp-pcard-actions .pemp-pa { flex: 1; justify-content: center; min-width: 0; font-size: 12px; }

/* Empty state */
.pemp-portal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  color: var(--pemp-muted, #64736F);
}
.pemp-portal-empty svg { opacity: .3; margin-bottom: 16px; }
.pemp-portal-empty h4 { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: var(--pemp-text,#102B27); }
.pemp-portal-empty p  { margin: 0; font-size: 14px; max-width: 320px; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════════════════ */

/* Tablet: hide table, show cards */
@media (max-width: 860px) {
  .pemp-portal-table-wrap { display: none; }
  .pemp-portal-cards      { display: block; }
}

/* Mobile */
@media (max-width: 520px) {
  .pemp-portal-header-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pemp-portal-logout { align-self: flex-start; }
  .pemp-portal-profile { flex-direction: row; align-items: center; }
  .pemp-pcard-body { flex-direction: column; }
  .pemp-pcard-qr { flex-direction: row; align-items: center; }
  .pemp-pcard-qr img { width: 64px; height: 64px; }
  .pemp-portal-panel-head { flex-wrap: wrap; }
}

/* Tiny screens — no overflow */
@media (max-width: 360px) {
  .pemp-portal-login-card { padding: 24px 18px; border-radius: 20px; }
  .pemp-portal-stats { grid-template-columns: 1fr 1fr; }
  .pemp-pa { font-size: 11px; padding: 6px 10px; }
}

/* ============================================================
   PEMP v30: frontend portal management controls
   ============================================================ */
.pemp-portal-alert{
  padding:14px 18px;border-radius:16px;border:1px solid rgba(33,94,86,.18);
  background:#ecfdf5;color:#166534;font-weight:800;box-shadow:0 8px 26px rgba(16,43,39,.08)
}
.pemp-portal-alert-email_failed,.pemp-portal-alert-bulk_empty{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.pemp-portal-filter,.pemp-portal-bulkbar{
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:16px;border:1px solid var(--pemp-border,#D8E5DF);
  border-radius:20px;background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(16,43,39,.05)
}
.pemp-pfilter-field{display:flex;flex-direction:column;gap:6px;min-width:180px;flex:1}
.pemp-pfilter-search{flex:1.6;min-width:240px}
.pemp-pfilter-field label{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--pemp-muted,#64736F)}
.pemp-pfilter-field input,.pemp-pfilter-field select,.pemp-portal-bulkbar select{
  width:100%;min-height:44px;border:1.5px solid var(--pemp-border,#D8E5DF);border-radius:13px;background:#fff;color:var(--pemp-text,#102B27);
  padding:0 13px;font:inherit;font-size:14px;outline:none
}
.pemp-pfilter-field input:focus,.pemp-pfilter-field select:focus,.pemp-portal-bulkbar select:focus{border-color:#215E56;box-shadow:0 0 0 3px rgba(33,94,86,.12)}
.pemp-pfilter-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pemp-pfilter-btn,.pemp-pbulk-btn,.pemp-pfilter-export,.pemp-pfilter-link{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border-radius:13px;border:0;text-decoration:none!important;
  font:inherit;font-size:13px;font-weight:900;cursor:pointer;white-space:nowrap
}
.pemp-pfilter-btn,.pemp-pbulk-btn{background:linear-gradient(135deg,#215E56,#2d7a6e);color:#fff;box-shadow:0 6px 18px rgba(33,94,86,.22)}
.pemp-pfilter-export{background:#102B27;color:#fff!important}
.pemp-pfilter-link{background:rgba(33,94,86,.08);color:#215E56!important}
.pemp-portal-bulkbar{align-items:center;margin-top:-8px;background:linear-gradient(135deg,rgba(33,94,86,.04),rgba(244,196,182,.08))}
.pemp-portal-bulkbar select{max-width:220px;flex:1}
.pemp-pbulk-hint{font-size:12px;color:var(--pemp-muted,#64736F);font-weight:700}
.pemp-select-col{width:34px;text-align:center!important}
.pemp-select-col input,.pemp-pcard-select input{accent-color:#215E56;width:16px;height:16px}
.pemp-pcard-select{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:12px;font-weight:800;color:#215E56;background:rgba(33,94,86,.07);padding:8px 10px;border-radius:12px;width:max-content;max-width:100%}
.pemp-pa-resend{background:linear-gradient(135deg,#7c3aed,#6d28d9);box-shadow:0 2px 8px rgba(124,58,237,.28)}
.pemp-pa-delete{background:linear-gradient(135deg,#374151,#111827);box-shadow:0 2px 8px rgba(17,24,39,.24)}
@media (max-width:760px){
  .pemp-portal-filter,.pemp-portal-bulkbar{display:grid;grid-template-columns:1fr;align-items:stretch;padding:14px;gap:12px}
  .pemp-pfilter-field,.pemp-pfilter-search{min-width:0;width:100%}
  .pemp-pfilter-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .pemp-pfilter-btn,.pemp-pfilter-export{grid-column:span 2}
  .pemp-portal-bulkbar select,.pemp-pbulk-btn{max-width:none;width:100%}
  .pemp-pbulk-hint{display:block;text-align:center}
}

/* ============================================================
   PEMP v32: mobile portal fix and frontend event creation
   ============================================================ */
.pemp-portal-event-create{
  border:1px solid var(--pemp-border,#D8E5DF);border-radius:22px;background:#fff;box-shadow:0 8px 28px rgba(16,43,39,.06);overflow:hidden
}
.pemp-portal-event-create summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;
  background:linear-gradient(135deg,rgba(33,94,86,.07),rgba(244,196,182,.12));font-weight:900;color:var(--pemp-text,#102B27)
}
.pemp-portal-event-create summary::-webkit-details-marker{display:none}
.pemp-portal-event-create summary small{font-size:12px;font-weight:700;color:var(--pemp-muted,#64736F)}
.pemp-portal-event-form{padding:18px 20px 20px}
.pemp-pevent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pemp-pevent-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--pemp-muted,#64736F)}
.pemp-pevent-wide{grid-column:1 / -1}
.pemp-pevent-grid input,.pemp-pevent-grid textarea{
  width:100%;border:1.5px solid var(--pemp-border,#D8E5DF);border-radius:13px;background:#fff;color:var(--pemp-text,#102B27);
  padding:12px 13px;font:inherit;font-size:14px;text-transform:none;letter-spacing:0;outline:none
}
.pemp-pevent-grid input:focus,.pemp-pevent-grid textarea:focus{border-color:#215E56;box-shadow:0 0 0 3px rgba(33,94,86,.12)}
.pemp-pevent-options{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0;color:var(--pemp-text,#102B27);font-size:13px;font-weight:700}
.pemp-pevent-options input{accent-color:#215E56}
.pemp-pevent-submit{border:0;border-radius:14px;background:linear-gradient(135deg,#215E56,#2d7a6e);color:#fff;font-weight:900;padding:13px 18px;cursor:pointer;box-shadow:0 8px 20px rgba(33,94,86,.25)}
@media (max-width:760px){
  .pemp-portal-event-create summary{align-items:flex-start;flex-direction:column;padding:16px}
  .pemp-portal-event-form{padding:16px}
  .pemp-pevent-grid{grid-template-columns:1fr;gap:12px}
  .pemp-pevent-options{display:grid;grid-template-columns:1fr;gap:9px}
  .pemp-pevent-submit{width:100%;min-height:48px}
  .pemp-pcard-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  .pemp-pcard-actions .pemp-pa{width:100%;min-height:42px;padding:10px 8px;font-size:11px;border-radius:12px;white-space:normal;text-align:center;line-height:1.2}
  .pemp-pcard-actions .pemp-pa svg{display:none}
}
@media (max-width:380px){
  .pemp-pcard-actions{grid-template-columns:1fr!important}
}


/* ============================================================
   PEMP v32.1: stronger mobile portal action button wrapping
   ============================================================ */
@media (max-width: 760px){
  .pemp-portal .pemp-pcard-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
  }
  .pemp-portal .pemp-pcard-actions .pemp-pa{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    height:auto !important;
    padding:10px 7px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:hidden !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    line-height:1.15 !important;
    font-size:10.5px !important;
    letter-spacing:0 !important;
    border-radius:12px !important;
  }
  .pemp-portal .pemp-pcard-actions .pemp-pa svg{
    display:none !important;
  }
}
@media (max-width: 380px){
  .pemp-portal .pemp-pcard-actions{
    grid-template-columns:1fr 1fr !important;
  }
  .pemp-portal .pemp-pcard-actions .pemp-pa{
    font-size:10px !important;
    padding-left:5px !important;
    padding-right:5px !important;
  }
}
@media (max-width: 320px){
  .pemp-portal .pemp-pcard-actions{
    grid-template-columns:1fr !important;
  }
  .pemp-portal .pemp-pcard-actions .pemp-pa{
    font-size:11px !important;
  }
}

/* ============================================================
   PEMP v33: desktop portal event builder polish
   ============================================================ */
.pemp-pevent-grid select{
  width:100%;border:1.5px solid var(--pemp-border,#D8E5DF);border-radius:13px;background:#fff;color:var(--pemp-text,#102B27);
  padding:12px 13px;font:inherit;font-size:14px;text-transform:none;letter-spacing:0;outline:none;min-height:46px
}
.pemp-pevent-grid input[type="file"]{padding:10px;background:#fbfaf8;border-style:dashed}
.pemp-pevent-grid small{font-size:11px;font-weight:700;color:var(--pemp-muted,#64736F);text-transform:none;letter-spacing:0;margin-top:2px}
@media (min-width: 900px){
  .pemp-portal-event-form{padding:24px 26px 26px}
  .pemp-pevent-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .pemp-pevent-wide{grid-column:1 / -1}
  .pemp-pevent-options{margin-top:18px}
  .pemp-pevent-submit{min-width:220px}
}

/* ============================================================
   PEMP v34: per-event banner controls in portal
   ============================================================ */
.pemp-portal-banner-settings{display:none;padding:14px;border:1px dashed var(--pemp-border,#D8E5DF);border-radius:16px;background:rgba(33,94,86,.04)}
.pemp-portal-banner-settings.pemp-banner-settings-visible{display:block}
.pemp-portal-banner-settings strong{display:block;font-size:13px;color:var(--pemp-text,#102B27);margin-bottom:4px}
.pemp-portal-banner-settings p{margin:0 0 10px;color:var(--pemp-muted,#64736F);font-size:12px;font-weight:700}
.pemp-pevent-inline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:760px){.pemp-pevent-inline{grid-template-columns:1fr}}

/* ============================================================
   PEMP v35: portal WordPress Media Library banner picker
   ============================================================ */
.pemp-portal-banner-upload{display:flex;flex-direction:column;gap:8px}
.pemp-portal-banner-upload > label{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--pemp-muted,#64736F)}
.pemp-portal-banner-preview{min-height:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pemp-portal-banner-preview img{max-width:220px;max-height:130px;border-radius:14px;border:1px solid var(--pemp-border,#D8E5DF);object-fit:contain;background:#fff;padding:4px}
.pemp-portal-media-btn,.pemp-portal-media-remove{border:0;border-radius:13px;padding:12px 14px;font:inherit;font-size:13px;font-weight:900;cursor:pointer;width:max-content;max-width:100%}
.pemp-portal-media-btn{background:linear-gradient(135deg,#215E56,#2d7a6e);color:#fff;box-shadow:0 6px 16px rgba(33,94,86,.22)}
.pemp-portal-media-remove{background:rgba(220,38,38,.08);color:#b91c1c}
@media(max-width:760px){.pemp-portal-media-btn,.pemp-portal-media-remove{width:100%;min-height:46px}.pemp-portal-banner-preview img{max-width:100%;width:100%;max-height:220px}}

/* ============================================================
   PEMP v36: portal action notification polish
   ============================================================ */
.pemp-portal-alert{
  display:flex !important;
  align-items:center;
  gap:10px;
  position:relative;
  margin:0 0 18px;
  padding:14px 48px 14px 16px !important;
  border-radius:16px !important;
  line-height:1.35;
  transition:opacity .28s ease, transform .28s ease, max-height .28s ease, margin .28s ease, padding .28s ease;
}
.pemp-portal-alert-icon{
  width:24px;
  height:24px;
  min-width:24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(22,101,52,.12);
  color:#166534;
  font-weight:1000;
  font-size:14px;
}
.pemp-portal-alert-close{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border:0;
  border-radius:999px;
  background:rgba(16,43,39,.08);
  color:inherit;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.pemp-portal-alert-close:hover{background:rgba(16,43,39,.14)}
.pemp-portal-alert-hide{
  opacity:0 !important;
  transform:translateY(-8px) !important;
  max-height:0 !important;
  margin:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  overflow:hidden !important;
}
.pemp-portal-alert-email_failed,
.pemp-portal-alert-approved_email_failed,
.pemp-portal-alert-action_failed,
.pemp-portal-alert-delete_failed,
.pemp-portal-alert-bulk_empty,
.pemp-portal-alert-event_missing,
.pemp-portal-alert-event_failed{
  background:#fef2f2 !important;
  color:#991b1b !important;
  border-color:#fecaca !important;
}
.pemp-portal-alert-email_failed .pemp-portal-alert-icon,
.pemp-portal-alert-approved_email_failed .pemp-portal-alert-icon,
.pemp-portal-alert-action_failed .pemp-portal-alert-icon,
.pemp-portal-alert-delete_failed .pemp-portal-alert-icon,
.pemp-portal-alert-bulk_empty .pemp-portal-alert-icon,
.pemp-portal-alert-event_missing .pemp-portal-alert-icon,
.pemp-portal-alert-event_failed .pemp-portal-alert-icon{
  background:rgba(153,27,27,.10);
  color:#991b1b;
}
@media(max-width:760px){
  .pemp-portal-alert{
    align-items:flex-start;
    font-size:13px;
    padding:13px 44px 13px 13px !important;
  }
  .pemp-portal-alert-close{right:10px;top:12px;transform:none}
}

/* ============================================================
   PEMP v37: premium QR pass, mobile reset, and resend button polish
   ============================================================ */
.pemp-portal-qr-cell,
.pemp-pcard-qr{
  border:1px solid rgba(33,94,86,.12);
  background:linear-gradient(180deg,#ffffff,#f8fbfa);
  border-radius:16px;
  padding:8px;
  box-shadow:0 6px 18px rgba(16,43,39,.06);
}
.pemp-portal-qr-code,
.pemp-pcard-qr code{
  display:block;
  max-width:120px;
  margin:6px auto 0;
  padding:5px 7px;
  border-radius:999px;
  background:rgba(33,94,86,.08);
  color:#215E56;
  font-size:10px;
  font-weight:900;
  line-height:1.1;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
}
.pemp-portal-qr-note{
  display:block;
  max-width:145px;
  margin:6px auto 0;
  color:var(--pemp-muted,#64736F);
  font-size:9.5px;
  font-weight:800;
  line-height:1.25;
  text-align:center;
  overflow-wrap:anywhere;
}
.pemp-pa-resend{
  white-space:normal !important;
  text-align:center;
  line-height:1.1 !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
@media (max-width:760px){
  .pemp-pfilter-actions{
    grid-template-columns:1fr !important;
  }
  .pemp-pfilter-btn,
  .pemp-pfilter-link,
  .pemp-pfilter-export{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-height:52px !important;
    border-radius:18px !important;
  }
  .pemp-pfilter-link{
    background:linear-gradient(135deg,rgba(33,94,86,.08),rgba(33,94,86,.04)) !important;
    border:1px solid rgba(33,94,86,.12) !important;
    color:#215E56 !important;
    box-shadow:0 6px 16px rgba(16,43,39,.04) !important;
  }
  .pemp-pcard-qr{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .pemp-pcard-qr img{
    width:74px !important;
    height:74px !important;
  }
  .pemp-pcard-qr .pemp-portal-qr-note{
    max-width:100%;
    font-size:10px;
  }
  .pemp-portal .pemp-pcard-actions .pemp-pa-resend{
    font-size:10px !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }
}

/* ============================================================
   PEMP v38: Elementor editor preview and QR scanner check-in
   ============================================================ */
.pemp-elementor-preview{
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:10px;
  padding:28px;
  border:1px dashed rgba(33,94,86,.35);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(33,94,86,.08),rgba(244,196,182,.14),#fff);
  color:var(--pemp-text,#102B27);
  box-shadow:0 14px 36px rgba(16,43,39,.08);
}
.pemp-elementor-preview-badge{
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  background:#215E56;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pemp-elementor-preview h3{margin:0;font-size:26px;font-weight:950;color:inherit}
.pemp-elementor-preview p{margin:0;max-width:620px;color:var(--pemp-muted,#64736F);font-size:14px;font-weight:700;line-height:1.55}
.pemp-elementor-preview-grid{display:grid;grid-template-columns:repeat(3,80px);gap:10px;margin-top:6px}
.pemp-elementor-preview-grid span{height:54px;border-radius:15px;background:rgba(255,255,255,.82);border:1px solid rgba(33,94,86,.10)}
.pemp-qr-scanner{
  padding:22px;
  border:1px solid var(--pemp-border,#D8E5DF);
  border-radius:26px;
  background:linear-gradient(180deg,#fff,#f8fbfa);
  box-shadow:0 18px 46px rgba(16,43,39,.10);
  color:var(--pemp-text,#102B27);
}
.pemp-qr-scanner-head{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.pemp-qr-scanner-icon{width:52px;height:52px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#215E56,#2d7a6e);color:#fff;font-size:28px;font-weight:900;box-shadow:0 12px 26px rgba(33,94,86,.22)}
.pemp-qr-scanner h3{margin:0;font-size:24px;font-weight:950;color:inherit}
.pemp-qr-scanner p{margin:4px 0 0;color:var(--pemp-muted,#64736F);font-size:13px;font-weight:700;line-height:1.45}
.pemp-qr-camera-box{position:relative;overflow:hidden;border-radius:24px;background:#061b18;min-height:260px;display:flex;align-items:center;justify-content:center;margin:14px 0;border:1px solid rgba(33,94,86,.18)}
.pemp-qr-video{width:100%;height:320px;object-fit:cover;background:#061b18}
.pemp-qr-frame{position:absolute;inset:38px;pointer-events:none;border:1px solid rgba(255,255,255,.25);border-radius:24px}
.pemp-qr-frame span{position:absolute;width:42px;height:42px;border-color:#3DD68C;border-style:solid}
.pemp-qr-frame span:nth-child(1){left:-1px;top:-1px;border-width:4px 0 0 4px;border-radius:20px 0 0 0}
.pemp-qr-frame span:nth-child(2){right:-1px;top:-1px;border-width:4px 4px 0 0;border-radius:0 20px 0 0}
.pemp-qr-frame span:nth-child(3){left:-1px;bottom:-1px;border-width:0 0 4px 4px;border-radius:0 0 0 20px}
.pemp-qr-frame span:nth-child(4){right:-1px;bottom:-1px;border-width:0 4px 4px 0;border-radius:0 0 20px 0}
.pemp-qr-camera-note{position:absolute;left:18px;right:18px;bottom:14px;margin:0!important;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.92);color:#102B27!important;text-align:center;font-size:12px!important}
.pemp-qr-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.pemp-qr-form textarea{width:100%;border:1.5px solid var(--pemp-border,#D8E5DF);border-radius:16px;padding:12px;font:inherit;min-height:92px;background:#fff;color:var(--pemp-text,#102B27)}
@media(max-width:760px){
  .pemp-elementor-preview{padding:22px;min-height:190px;border-radius:20px}
  .pemp-elementor-preview h3{font-size:21px}
  .pemp-elementor-preview-grid{grid-template-columns:repeat(3,1fr);width:100%}
  .pemp-qr-scanner{padding:16px;border-radius:22px}
  .pemp-qr-scanner-head{align-items:flex-start}
  .pemp-qr-scanner-icon{width:44px;height:44px;min-width:44px;border-radius:15px;font-size:22px}
  .pemp-qr-scanner h3{font-size:20px}
  .pemp-qr-video{height:280px}
  .pemp-qr-frame{inset:30px 24px}
  .pemp-qr-actions .pemp-btn{width:100%}
}
