@charset "UTF-8";

/* =========================================================================
   Common icon treatment — single source for every heading/meta icon.
   %icon-style-box / .w-icon-box → the square icon container
   %icon-style-glyph / .w-icon   → a bare glyph with no container
   Component files @extend these instead of re-declaring the tokens.
   ========================================================================= */

.wn-cl-check,
.wn-brand-logo,
.wty-stat-icon,
.wty-section-icon,
.wty-brand-logo,
.areg .areg-facts-icon,
.areg .areg-brand-logo,
.w-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--icon-style-box-bg-color);
  border: var(--icon-style-box-border);
  border-radius: var(--icon-style-box-border-radius);
  color: var(--icon-style-box-color);
}

.wn-ico,
.wn-ico--success,
.wn-ico--warning,
.wn-ico--primary,
.wn-meta-icon,
.areg .areg-reg-meta .areg-icon,
.areg .areg-checklist .areg-icon,
.areg .areg-card-head .areg-icon,
.w-icon-glyph {
  display: inline-flex;
  color: var(--icon-style-box-base-color);
}

/* =========================================================================
   Shared modal backdrop. WebinarLiveKitRoom forces body[data-theme="dark"],
   so every --color-* token below resolves from themes/dark-theme.css —
   nothing here re-declares palette values.
   ========================================================================= */

.wsp-overlay,
.wea-overlay {
  background: rgba(0, 0, 0, 0.72);
}

/* Base for the module-wide icon set (webinarIcons.js). Unscoped so every page
   gets the same glyph size and inherits color; page rules still override. */

.areg-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: currentColor;
}

/* =========================================================================
   Common modal — single source for every popup (uses --modal-* tokens)
   .cw-modal-overlay  → backdrop
   .cw-modal          → panel surface + text
   .cw-modal-title    → heading
   .cw-modal-muted    → subtitle / muted text
   .cw-modal-close    → close (X) button
   ========================================================================= */

.cw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.cw-modal {
  background: var(--modal-bg);
  color: var(--modal-text);
  border-radius: var(--modal-radius, 12px);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow: auto;
}

.cw-modal-title {
  color: var(--modal-title);
}

.cw-modal-muted {
  color: var(--modal-muted);
}

.cw-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--modal-close-bg);
  color: var(--modal-text);
  cursor: pointer;
  transition: background 0.15s;
}

.cw-modal-close:hover {
  background: var(--modal-close-bg-hover);
}

/* =========================================================================
   Utility Buttons
   ========================================================================= */

.w3nbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  border: none;
  cursor: pointer;
}

.w3nbtn.orangebtn {
  background: var(--color-primary);
  color: #fff;
}

.w3nbtn.whtborbtn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.w3nbtn.greengradient {
  background: linear-gradient(90deg, var(--color-success) 0%, var(--color-success) 100%);
  color: #fff;
}

.w3nbtn.danger {
  background: var(--color-error);
  color: #fff;
}

/* =========================================================================
   Other Shared Utilities
   ========================================================================= */

.add-another-btn {
  color: var(--wizard-link);
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  display: inline-flex;
  width: -moz-max-content;
  width: max-content;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 0;
  gap: 8px;
  background: transparent;
}

.add-another-btn:hover {
  color: var(--wizard-link-hover);
}

/* =========================================================================
   Webinar-only button classes (avoid clashing with global .orangebtn/.whtborbtn)
   Theme-adaptive via --btn-* tokens.
   ========================================================================= */

.cw-btn-primary,
.cw-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-padding);
  border: var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  line-height: normal;
  cursor: pointer;
  color: var(--btn-primary-color);
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.2s ease, transform 0.2s ease;
}

.cw-btn-primary svg:not([fill=none]),
.cw-btn-secondary svg:not([fill=none]) {
  fill: currentColor;
}

.cw-btn-primary {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color) !important;
  border: 1px solid transparent !important;
  border-radius: var(--btn-radius) !important;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding);
}

.cw-btn-primary:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover) !important;
  box-shadow: var(--btn-primary-accent-shadow-hover) !important;
  transform: translateY(-2px);
}

.cw-btn-primary:disabled,
.cw-btn-primary[disabled] {
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.cw-btn-primary {
  /* Saving in progress — stays disabled but keeps the brand fill so the
     button doesn't flash grey while the request is in flight. */
}

.cw-btn-primary.is-busy:disabled,
.cw-btn-primary.is-busy[disabled] {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color) !important;
  opacity: 0.75;
  transform: none;
}

.cw-btn-secondary {
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
  border: var(--btn-secondary-border);
}

.cw-btn-secondary:hover:not(:disabled) {
  background: var(--btn-secondary-bg-white);
  box-shadow: var(--btn-secondary-dark-box-shadow);
}

.cw-btn-secondary:disabled,
.cw-btn-secondary[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.cw-btn-primary svg,
.cw-btn-secondary svg {
  width: 18px;
  height: 18px;
}

/* =========================================================================
   Common delete/danger icon button
   ========================================================================= */

.fm-del-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.fm-del-btn svg,
.fm-del-btn svg path {
  fill: currentColor;
  stroke: currentColor;
}

.fm-del-btn svg[fill=none],
.fm-del-btn svg[fill=none] path {
  fill: none;
}

/* =========================================================================
   Common edit icon button
   ========================================================================= */

.fm-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary) !important;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.fm-edit-btn svg {
  fill: none;
}

.fm-edit-btn svg path {
  fill: none;
  stroke: currentColor;
}

.fm-edit-btn:hover {
  background: var(--color-surface-2);
  border-color: var(--color-dim);
  color: var(--color-text) !important;
}

/* =========================================================================
   Common restore/refresh icon button
   ========================================================================= */

.fm-restore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.fm-restore-btn svg,
.fm-restore-btn svg path {
  fill: currentColor;
  stroke: currentColor;
}

.fm-restore-btn svg[fill=none],
.fm-restore-btn svg[fill=none] path {
  fill: none;
}

/* =========================================================================
   Common hyperlink — gold, no hover state change
   ========================================================================= */

.cw-link,
.cw-link:hover,
.cw-link:focus,
.cw-link:active {
  color: var(--color-primary-dark) !important;
  text-decoration: none;
}

/* =========================================================================
   Common pill-tab class (--wiz-tab-*)
   Single source for every tab: webinar listing tabs, attendance filter tabs,
   thumbnail platform chips, and any future tab. Add `.cw-tab` for the base
   colours and `.cw-tab.active` for the selected state. Shape (radius/padding)
   stays per-component.
   ========================================================================= */

.cw-tab,
.cw-tab:hover,
.cw-tab:focus {
  background: var(--wiz-tab-bg-color) !important;
  border: 1px solid var(--wiz-tab-border-color) !important;
  color: var(--wiz-tab-text-color) !important;
  box-shadow: none !important;
  transform: none !important;
}

.cw-tab.active,
.cw-tab.active:hover,
.cw-tab.active:focus {
  background: var(--wiz-tab-active-bg-color) !important;
  border: 1px solid var(--wiz-tab-active-border-color) !important;
  color: var(--wiz-tab-active-text-color) !important;
}

/* Common text color classes */

.cw-text {
  color: var(--color-text) !important;
}

.cw-text-secondary {
  color: var(--color-text-secondary) !important;
}

.cw-text-muted {
  color: var(--color-text-muted) !important;
}

/* Common input + label classes */

.cw-input {
  font-family: var(--input-font-family);
  font-size: var(--input-font-size);
  font-weight: var(--input-font-weight);
  height: var(--input-height);
  margin: var(--input-margin);
  border-width: var(--input-border-width);
}

.cw-form-label {
  display: block;
  color: var(--form-label-color);
  font-size: var(--form-label-font-size);
  font-weight: var(--form-label-font-weight);
  margin: var(--form-label-margin);
}

.cw-form-label-seo {
  color: var(--seo-label-color);
}

.cw-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
}

/* =========================================================================
   CommonSpeakerList – shared speaker-row styles (csl-*)
   Used by both the step form (CreateSpeaker) and the SpeakerGate.
   ========================================================================= */

.csl-empty {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  margin: 4px 0 0;
}

.csl-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.csl-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 14px;
}

.csl-item.is-editing {
  border-color: var(--color-primary);
}

.csl-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--color-accent-orange);
  color: #ffffff;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  text-transform: uppercase;
  overflow: hidden;
}

.csl-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.csl-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.csl-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.csl-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.csl-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(74, 163, 223, 0.15);
  color: var(--color-primary);
  text-transform: capitalize;
  flex-shrink: 0;
}

.csl-meta {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.csl-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.csl-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  padding: 0;
  font-weight: var(--font-weight-medium);
  font-size: 16px;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.2s;
}

.csl-act:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* .csl-act-edit colours come from the common .fm-edit-btn class */

.csl-act-edit:hover {
  transform: translateY(-2px);
}

/* .csl-act-remove colours come from the common .fm-del-btn class */

.csl-act-remove:hover {
  transform: translateY(-2px);
}

/* =========================================================================
   Promo studio shared primitives (wt-*)
   Used by MORE THAN ONE promo step — the Social step's status filters and the
   Schedule step's status + platform filters — so they live here instead of in
   either step's partial. Colours come from the --wt-* tokens mapped on
   .wt-page (_WebinarThumbnail.scss); these elements always render inside it,
   so custom-property resolution doesn't depend on import order.
   ========================================================================= */

.wt-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto 18px;
}

.wt-filter-label {
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wt-muted);
  margin-right: 2px;
}

.wt-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--wiz-tab-border-color);
  border-radius: var(--wiz-tab-border-radius);
  background: var(--wiz-tab-bg-color);
  color: var(--wiz-tab-text-color);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wt-filter-pill:hover:not(:disabled) {
  border-color: var(--wiz-tab-active-border-color);
  color: var(--wiz-tab-text-color);
}

.wt-filter-pill:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wt-filter-pill.is-active {
  border-color: var(--wiz-tab-active-border-color);
  background: var(--wiz-tab-active-bg-color);
  color: var(--wiz-tab-active-text-color);
}

.wt-filter-count {
  border-radius: 999px;
  font-size: 10px;
  line-height: 16px;
}

/* Empty / filtered-to-nothing state, shared by both step lists. */

.wt-nomatch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  background: var(--wt-surface);
  border: 1px dashed var(--wt-border);
  border-radius: 14px;
  color: var(--wt-muted);
  font-size: var(--font-size-base);
  text-align: center;
}

.wt-nomatch-clear {
  border: none;
  background: none;
  color: var(--wt-teal);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.wt-nomatch-clear:hover {
  text-decoration: underline;
}

/* Global Webinar Badge Overrides */

body .badge,
body .wcpv-hero-badge,
body .wcpv-role-badge,
body .sws-badge,
body .csl-badge,
body .sws-badge--access,
body .webinar-listing-badge,
body .webinar-listing-badge .listing-badge,
body .webinar-listing-section .webinar-listing-timedate span,
body .webinar-speakers-badge span,
body .wty-hero-badge,
body .wty-meta-badge,
body .wes-aud-badge,
body .wss-pill-badge,
body .webinar-precreated-badge {
  border-radius: var(--radius-lg) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-regular) !important;
}

/* ===========================================================================


   Component files may still override where a field needs a bespoke look.
   =========================================================================== */

.cw-create-webinar-wrapper input[type=text],
.cw-create-webinar-wrapper input[type=email],
.cw-create-webinar-wrapper input[type=number],
.cw-create-webinar-wrapper input[type=url],
.cw-create-webinar-wrapper input[type=search],
.cw-create-webinar-wrapper input[type=tel],
.cw-create-webinar-wrapper input[type=password],
.cw-create-webinar-wrapper input[type=datetime-local],
.cw-create-webinar-wrapper input[type=date],
.cw-create-webinar-wrapper input[type=time],
.cw-create-webinar-wrapper textarea,
.cw-create-webinar-wrapper select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.cw-create-webinar-wrapper textarea {
  border-radius: var(--radius-md) !important;
}

.cw-create-webinar-wrapper {
  /* React-Select specific overrides for margin/padding */
}

.cw-create-webinar-wrapper .css-153opun,
.cw-create-webinar-wrapper .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.cw-create-webinar-wrapper .css-hlgwow {
  padding: 0px 8px;
}

.cw-create-webinar-wrapper input::-moz-placeholder, .cw-create-webinar-wrapper textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.cw-create-webinar-wrapper input::placeholder,
.cw-create-webinar-wrapper textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.cw-create-webinar-wrapper :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.cw-create-webinar-wrapper input:-webkit-autofill,
.cw-create-webinar-wrapper input:-webkit-autofill:hover,
.cw-create-webinar-wrapper input:-webkit-autofill:focus,
.cw-create-webinar-wrapper input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.cw-create-webinar-wrapper input[type=radio] {
  accent-color: var(--radio-primary);
}

.cw-create-webinar-wrapper {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.cw-create-webinar-wrapper input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.cw-create-webinar-wrapper input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.cw-create-webinar-wrapper input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.cw-create-webinar-wrapper input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.cw-create-webinar-wrapper input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.wbes-theme-shell input[type=text],
.wbes-theme-shell input[type=email],
.wbes-theme-shell input[type=number],
.wbes-theme-shell input[type=url],
.wbes-theme-shell input[type=search],
.wbes-theme-shell input[type=tel],
.wbes-theme-shell input[type=password],
.wbes-theme-shell input[type=datetime-local],
.wbes-theme-shell input[type=date],
.wbes-theme-shell input[type=time],
.wbes-theme-shell textarea,
.wbes-theme-shell select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.wbes-theme-shell textarea {
  border-radius: var(--radius-md) !important;
}

.wbes-theme-shell {
  /* React-Select specific overrides for margin/padding */
}

.wbes-theme-shell .css-153opun,
.wbes-theme-shell .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.wbes-theme-shell .css-hlgwow {
  padding: 0px 8px;
}

.wbes-theme-shell input::-moz-placeholder, .wbes-theme-shell textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.wbes-theme-shell input::placeholder,
.wbes-theme-shell textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.wbes-theme-shell :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.wbes-theme-shell input:-webkit-autofill,
.wbes-theme-shell input:-webkit-autofill:hover,
.wbes-theme-shell input:-webkit-autofill:focus,
.wbes-theme-shell input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.wbes-theme-shell input[type=radio] {
  accent-color: var(--radio-primary);
}

.wbes-theme-shell {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.wbes-theme-shell input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.wbes-theme-shell input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.wbes-theme-shell input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.wbes-theme-shell input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.wbes-theme-shell input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.wl-theme-shell input[type=text],
.wl-theme-shell input[type=email],
.wl-theme-shell input[type=number],
.wl-theme-shell input[type=url],
.wl-theme-shell input[type=search],
.wl-theme-shell input[type=tel],
.wl-theme-shell input[type=password],
.wl-theme-shell input[type=datetime-local],
.wl-theme-shell input[type=date],
.wl-theme-shell input[type=time],
.wl-theme-shell textarea,
.wl-theme-shell select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.wl-theme-shell textarea {
  border-radius: var(--radius-md) !important;
}

.wl-theme-shell {
  /* React-Select specific overrides for margin/padding */
}

.wl-theme-shell .css-153opun,
.wl-theme-shell .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.wl-theme-shell .css-hlgwow {
  padding: 0px 8px;
}

.wl-theme-shell input::-moz-placeholder, .wl-theme-shell textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.wl-theme-shell input::placeholder,
.wl-theme-shell textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.wl-theme-shell :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.wl-theme-shell input:-webkit-autofill,
.wl-theme-shell input:-webkit-autofill:hover,
.wl-theme-shell input:-webkit-autofill:focus,
.wl-theme-shell input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.wl-theme-shell input[type=radio] {
  accent-color: var(--radio-primary);
}

.wl-theme-shell {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.wl-theme-shell input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.wl-theme-shell input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.wl-theme-shell input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.wl-theme-shell input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.wl-theme-shell input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.wt-page input[type=text],
.wt-page input[type=email],
.wt-page input[type=number],
.wt-page input[type=url],
.wt-page input[type=search],
.wt-page input[type=tel],
.wt-page input[type=password],
.wt-page input[type=datetime-local],
.wt-page input[type=date],
.wt-page input[type=time],
.wt-page textarea,
.wt-page select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.wt-page textarea {
  border-radius: var(--radius-md) !important;
}

.wt-page {
  /* React-Select specific overrides for margin/padding */
}

.wt-page .css-153opun,
.wt-page .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.wt-page .css-hlgwow {
  padding: 0px 8px;
}

.wt-page input::-moz-placeholder, .wt-page textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.wt-page input::placeholder,
.wt-page textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.wt-page :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.wt-page input:-webkit-autofill,
.wt-page input:-webkit-autofill:hover,
.wt-page input:-webkit-autofill:focus,
.wt-page input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.wt-page input[type=radio] {
  accent-color: var(--radio-primary);
}

.wt-page {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.wt-page input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.wt-page input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.wt-page input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.wt-page input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.wt-page input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.wss-shell input[type=text],
.wss-shell input[type=email],
.wss-shell input[type=number],
.wss-shell input[type=url],
.wss-shell input[type=search],
.wss-shell input[type=tel],
.wss-shell input[type=password],
.wss-shell input[type=datetime-local],
.wss-shell input[type=date],
.wss-shell input[type=time],
.wss-shell textarea,
.wss-shell select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.wss-shell textarea {
  border-radius: var(--radius-md) !important;
}

.wss-shell {
  /* React-Select specific overrides for margin/padding */
}

.wss-shell .css-153opun,
.wss-shell .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.wss-shell .css-hlgwow {
  padding: 0px 8px;
}

.wss-shell input::-moz-placeholder, .wss-shell textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.wss-shell input::placeholder,
.wss-shell textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.wss-shell :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.wss-shell input:-webkit-autofill,
.wss-shell input:-webkit-autofill:hover,
.wss-shell input:-webkit-autofill:focus,
.wss-shell input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.wss-shell input[type=radio] {
  accent-color: var(--radio-primary);
}

.wss-shell {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.wss-shell input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.wss-shell input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.wss-shell input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.wss-shell input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.wss-shell input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.attendee-registration-page input[type=text],
.attendee-registration-page input[type=email],
.attendee-registration-page input[type=number],
.attendee-registration-page input[type=url],
.attendee-registration-page input[type=search],
.attendee-registration-page input[type=tel],
.attendee-registration-page input[type=password],
.attendee-registration-page input[type=datetime-local],
.attendee-registration-page input[type=date],
.attendee-registration-page input[type=time],
.attendee-registration-page textarea,
.attendee-registration-page select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.attendee-registration-page textarea {
  border-radius: var(--radius-md) !important;
}

.attendee-registration-page {
  /* React-Select specific overrides for margin/padding */
}

.attendee-registration-page .css-153opun,
.attendee-registration-page .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.attendee-registration-page .css-hlgwow {
  padding: 0px 8px;
}

.attendee-registration-page input::-moz-placeholder, .attendee-registration-page textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.attendee-registration-page input::placeholder,
.attendee-registration-page textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.attendee-registration-page :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.attendee-registration-page input:-webkit-autofill,
.attendee-registration-page input:-webkit-autofill:hover,
.attendee-registration-page input:-webkit-autofill:focus,
.attendee-registration-page input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.attendee-registration-page input[type=radio] {
  accent-color: var(--radio-primary);
}

.attendee-registration-page {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.attendee-registration-page input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.attendee-registration-page input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.attendee-registration-page input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.attendee-registration-page input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.attendee-registration-page input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.podup-webinar-create input[type=text],
.podup-webinar-create input[type=email],
.podup-webinar-create input[type=number],
.podup-webinar-create input[type=url],
.podup-webinar-create input[type=search],
.podup-webinar-create input[type=tel],
.podup-webinar-create input[type=password],
.podup-webinar-create input[type=datetime-local],
.podup-webinar-create input[type=date],
.podup-webinar-create input[type=time],
.podup-webinar-create textarea,
.podup-webinar-create select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.podup-webinar-create textarea {
  border-radius: var(--radius-md) !important;
}

.podup-webinar-create {
  /* React-Select specific overrides for margin/padding */
}

.podup-webinar-create .css-153opun,
.podup-webinar-create .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.podup-webinar-create .css-hlgwow {
  padding: 0px 8px;
}

.podup-webinar-create input::-moz-placeholder, .podup-webinar-create textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.podup-webinar-create input::placeholder,
.podup-webinar-create textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.podup-webinar-create :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.podup-webinar-create input:-webkit-autofill,
.podup-webinar-create input:-webkit-autofill:hover,
.podup-webinar-create input:-webkit-autofill:focus,
.podup-webinar-create input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.podup-webinar-create input[type=radio] {
  accent-color: var(--radio-primary);
}

.podup-webinar-create {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.podup-webinar-create input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.podup-webinar-create input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.podup-webinar-create input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.podup-webinar-create input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.podup-webinar-create input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.webinar-stripe-settings-page input[type=text],
.webinar-stripe-settings-page input[type=email],
.webinar-stripe-settings-page input[type=number],
.webinar-stripe-settings-page input[type=url],
.webinar-stripe-settings-page input[type=search],
.webinar-stripe-settings-page input[type=tel],
.webinar-stripe-settings-page input[type=password],
.webinar-stripe-settings-page input[type=datetime-local],
.webinar-stripe-settings-page input[type=date],
.webinar-stripe-settings-page input[type=time],
.webinar-stripe-settings-page textarea,
.webinar-stripe-settings-page select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.webinar-stripe-settings-page textarea {
  border-radius: var(--radius-md) !important;
}

.webinar-stripe-settings-page {
  /* React-Select specific overrides for margin/padding */
}

.webinar-stripe-settings-page .css-153opun,
.webinar-stripe-settings-page .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.webinar-stripe-settings-page .css-hlgwow {
  padding: 0px 8px;
}

.webinar-stripe-settings-page input::-moz-placeholder, .webinar-stripe-settings-page textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.webinar-stripe-settings-page input::placeholder,
.webinar-stripe-settings-page textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.webinar-stripe-settings-page :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.webinar-stripe-settings-page input:-webkit-autofill,
.webinar-stripe-settings-page input:-webkit-autofill:hover,
.webinar-stripe-settings-page input:-webkit-autofill:focus,
.webinar-stripe-settings-page input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.webinar-stripe-settings-page input[type=radio] {
  accent-color: var(--radio-primary);
}

.webinar-stripe-settings-page {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.webinar-stripe-settings-page input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.webinar-stripe-settings-page input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.webinar-stripe-settings-page input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.webinar-stripe-settings-page input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.webinar-stripe-settings-page input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.wty-page input[type=text],
.wty-page input[type=email],
.wty-page input[type=number],
.wty-page input[type=url],
.wty-page input[type=search],
.wty-page input[type=tel],
.wty-page input[type=password],
.wty-page input[type=datetime-local],
.wty-page input[type=date],
.wty-page input[type=time],
.wty-page textarea,
.wty-page select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.wty-page textarea {
  border-radius: var(--radius-md) !important;
}

.wty-page {
  /* React-Select specific overrides for margin/padding */
}

.wty-page .css-153opun,
.wty-page .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.wty-page .css-hlgwow {
  padding: 0px 8px;
}

.wty-page input::-moz-placeholder, .wty-page textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.wty-page input::placeholder,
.wty-page textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.wty-page :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.wty-page input:-webkit-autofill,
.wty-page input:-webkit-autofill:hover,
.wty-page input:-webkit-autofill:focus,
.wty-page input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.wty-page input[type=radio] {
  accent-color: var(--radio-primary);
}

.wty-page {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.wty-page input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.wty-page input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.wty-page input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.wty-page input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.wty-page input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.wod-page input[type=text],
.wod-page input[type=email],
.wod-page input[type=number],
.wod-page input[type=url],
.wod-page input[type=search],
.wod-page input[type=tel],
.wod-page input[type=password],
.wod-page input[type=datetime-local],
.wod-page input[type=date],
.wod-page input[type=time],
.wod-page textarea,
.wod-page select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.wod-page textarea {
  border-radius: var(--radius-md) !important;
}

.wod-page {
  /* React-Select specific overrides for margin/padding */
}

.wod-page .css-153opun,
.wod-page .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.wod-page .css-hlgwow {
  padding: 0px 8px;
}

.wod-page input::-moz-placeholder, .wod-page textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.wod-page input::placeholder,
.wod-page textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.wod-page :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.wod-page input:-webkit-autofill,
.wod-page input:-webkit-autofill:hover,
.wod-page input:-webkit-autofill:focus,
.wod-page input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.wod-page input[type=radio] {
  accent-color: var(--radio-primary);
}

.wod-page {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.wod-page input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.wod-page input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.wod-page input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.wod-page input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.wod-page input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

#webinar-settings input[type=text],
#webinar-settings input[type=email],
#webinar-settings input[type=number],
#webinar-settings input[type=url],
#webinar-settings input[type=search],
#webinar-settings input[type=tel],
#webinar-settings input[type=password],
#webinar-settings input[type=datetime-local],
#webinar-settings input[type=date],
#webinar-settings input[type=time],
#webinar-settings textarea,
#webinar-settings select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

#webinar-settings textarea {
  border-radius: var(--radius-md) !important;
}

#webinar-settings {
  /* React-Select specific overrides for margin/padding */
}

#webinar-settings .css-153opun,
#webinar-settings .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

#webinar-settings .css-hlgwow {
  padding: 0px 8px;
}

#webinar-settings input::-moz-placeholder, #webinar-settings textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

#webinar-settings input::placeholder,
#webinar-settings textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

#webinar-settings :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

#webinar-settings input:-webkit-autofill,
#webinar-settings input:-webkit-autofill:hover,
#webinar-settings input:-webkit-autofill:focus,
#webinar-settings input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

#webinar-settings input[type=radio] {
  accent-color: var(--radio-primary);
}

#webinar-settings {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

#webinar-settings input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

#webinar-settings input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

#webinar-settings input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

#webinar-settings input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

#webinar-settings input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

#guest-enter input[type=text],
#guest-enter input[type=email],
#guest-enter input[type=number],
#guest-enter input[type=url],
#guest-enter input[type=search],
#guest-enter input[type=tel],
#guest-enter input[type=password],
#guest-enter input[type=datetime-local],
#guest-enter input[type=date],
#guest-enter input[type=time],
#guest-enter textarea,
#guest-enter select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

#guest-enter textarea {
  border-radius: var(--radius-md) !important;
}

#guest-enter {
  /* React-Select specific overrides for margin/padding */
}

#guest-enter .css-153opun,
#guest-enter .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

#guest-enter .css-hlgwow {
  padding: 0px 8px;
}

#guest-enter input::-moz-placeholder, #guest-enter textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

#guest-enter input::placeholder,
#guest-enter textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

#guest-enter :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

#guest-enter input:-webkit-autofill,
#guest-enter input:-webkit-autofill:hover,
#guest-enter input:-webkit-autofill:focus,
#guest-enter input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

#guest-enter input[type=radio] {
  accent-color: var(--radio-primary);
}

#guest-enter {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

#guest-enter input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

#guest-enter input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

#guest-enter input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

#guest-enter input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

#guest-enter input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

#studio-invitation input[type=text],
#studio-invitation input[type=email],
#studio-invitation input[type=number],
#studio-invitation input[type=url],
#studio-invitation input[type=search],
#studio-invitation input[type=tel],
#studio-invitation input[type=password],
#studio-invitation input[type=datetime-local],
#studio-invitation input[type=date],
#studio-invitation input[type=time],
#studio-invitation textarea,
#studio-invitation select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

#studio-invitation textarea {
  border-radius: var(--radius-md) !important;
}

#studio-invitation {
  /* React-Select specific overrides for margin/padding */
}

#studio-invitation .css-153opun,
#studio-invitation .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

#studio-invitation .css-hlgwow {
  padding: 0px 8px;
}

#studio-invitation input::-moz-placeholder, #studio-invitation textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

#studio-invitation input::placeholder,
#studio-invitation textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

#studio-invitation :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

#studio-invitation input:-webkit-autofill,
#studio-invitation input:-webkit-autofill:hover,
#studio-invitation input:-webkit-autofill:focus,
#studio-invitation input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

#studio-invitation input[type=radio] {
  accent-color: var(--radio-primary);
}

#studio-invitation {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

#studio-invitation input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

#studio-invitation input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

#studio-invitation input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

#studio-invitation input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

#studio-invitation input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

#studio-detail input[type=text],
#studio-detail input[type=email],
#studio-detail input[type=number],
#studio-detail input[type=url],
#studio-detail input[type=search],
#studio-detail input[type=tel],
#studio-detail input[type=password],
#studio-detail input[type=datetime-local],
#studio-detail input[type=date],
#studio-detail input[type=time],
#studio-detail textarea,
#studio-detail select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

#studio-detail textarea {
  border-radius: var(--radius-md) !important;
}

#studio-detail {
  /* React-Select specific overrides for margin/padding */
}

#studio-detail .css-153opun,
#studio-detail .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

#studio-detail .css-hlgwow {
  padding: 0px 8px;
}

#studio-detail input::-moz-placeholder, #studio-detail textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

#studio-detail input::placeholder,
#studio-detail textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

#studio-detail :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

#studio-detail input:-webkit-autofill,
#studio-detail input:-webkit-autofill:hover,
#studio-detail input:-webkit-autofill:focus,
#studio-detail input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

#studio-detail input[type=radio] {
  accent-color: var(--radio-primary);
}

#studio-detail {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

#studio-detail input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

#studio-detail input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

#studio-detail input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

#studio-detail input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

#studio-detail input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.recording-urls-section input[type=text],
.recording-urls-section input[type=email],
.recording-urls-section input[type=number],
.recording-urls-section input[type=url],
.recording-urls-section input[type=search],
.recording-urls-section input[type=tel],
.recording-urls-section input[type=password],
.recording-urls-section input[type=datetime-local],
.recording-urls-section input[type=date],
.recording-urls-section input[type=time],
.recording-urls-section textarea,
.recording-urls-section select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.recording-urls-section textarea {
  border-radius: var(--radius-md) !important;
}

.recording-urls-section {
  /* React-Select specific overrides for margin/padding */
}

.recording-urls-section .css-153opun,
.recording-urls-section .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.recording-urls-section .css-hlgwow {
  padding: 0px 8px;
}

.recording-urls-section input::-moz-placeholder, .recording-urls-section textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.recording-urls-section input::placeholder,
.recording-urls-section textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.recording-urls-section :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.recording-urls-section input:-webkit-autofill,
.recording-urls-section input:-webkit-autofill:hover,
.recording-urls-section input:-webkit-autofill:focus,
.recording-urls-section input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.recording-urls-section input[type=radio] {
  accent-color: var(--radio-primary);
}

.recording-urls-section {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.recording-urls-section input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.recording-urls-section input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.recording-urls-section input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.recording-urls-section input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.recording-urls-section input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.webinar-speakers-dropdown input[type=text],
.webinar-speakers-dropdown input[type=email],
.webinar-speakers-dropdown input[type=number],
.webinar-speakers-dropdown input[type=url],
.webinar-speakers-dropdown input[type=search],
.webinar-speakers-dropdown input[type=tel],
.webinar-speakers-dropdown input[type=password],
.webinar-speakers-dropdown input[type=datetime-local],
.webinar-speakers-dropdown input[type=date],
.webinar-speakers-dropdown input[type=time],
.webinar-speakers-dropdown textarea,
.webinar-speakers-dropdown select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.webinar-speakers-dropdown textarea {
  border-radius: var(--radius-md) !important;
}

.webinar-speakers-dropdown {
  /* React-Select specific overrides for margin/padding */
}

.webinar-speakers-dropdown .css-153opun,
.webinar-speakers-dropdown .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.webinar-speakers-dropdown .css-hlgwow {
  padding: 0px 8px;
}

.webinar-speakers-dropdown input::-moz-placeholder, .webinar-speakers-dropdown textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.webinar-speakers-dropdown input::placeholder,
.webinar-speakers-dropdown textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.webinar-speakers-dropdown :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.webinar-speakers-dropdown input:-webkit-autofill,
.webinar-speakers-dropdown input:-webkit-autofill:hover,
.webinar-speakers-dropdown input:-webkit-autofill:focus,
.webinar-speakers-dropdown input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.webinar-speakers-dropdown input[type=radio] {
  accent-color: var(--radio-primary);
}

.webinar-speakers-dropdown {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.webinar-speakers-dropdown input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.webinar-speakers-dropdown input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.webinar-speakers-dropdown input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.webinar-speakers-dropdown input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.webinar-speakers-dropdown input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.attendee-state-page input[type=text],
.attendee-state-page input[type=email],
.attendee-state-page input[type=number],
.attendee-state-page input[type=url],
.attendee-state-page input[type=search],
.attendee-state-page input[type=tel],
.attendee-state-page input[type=password],
.attendee-state-page input[type=datetime-local],
.attendee-state-page input[type=date],
.attendee-state-page input[type=time],
.attendee-state-page textarea,
.attendee-state-page select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.attendee-state-page textarea {
  border-radius: var(--radius-md) !important;
}

.attendee-state-page {
  /* React-Select specific overrides for margin/padding */
}

.attendee-state-page .css-153opun,
.attendee-state-page .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.attendee-state-page .css-hlgwow {
  padding: 0px 8px;
}

.attendee-state-page input::-moz-placeholder, .attendee-state-page textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.attendee-state-page input::placeholder,
.attendee-state-page textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.attendee-state-page :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.attendee-state-page input:-webkit-autofill,
.attendee-state-page input:-webkit-autofill:hover,
.attendee-state-page input:-webkit-autofill:focus,
.attendee-state-page input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.attendee-state-page input[type=radio] {
  accent-color: var(--radio-primary);
}

.attendee-state-page {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.attendee-state-page input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.attendee-state-page input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.attendee-state-page input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.attendee-state-page input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.attendee-state-page input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.cw-st-modal-overlay input[type=text],
.cw-st-modal-overlay input[type=email],
.cw-st-modal-overlay input[type=number],
.cw-st-modal-overlay input[type=url],
.cw-st-modal-overlay input[type=search],
.cw-st-modal-overlay input[type=tel],
.cw-st-modal-overlay input[type=password],
.cw-st-modal-overlay input[type=datetime-local],
.cw-st-modal-overlay input[type=date],
.cw-st-modal-overlay input[type=time],
.cw-st-modal-overlay textarea,
.cw-st-modal-overlay select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.cw-st-modal-overlay textarea {
  border-radius: var(--radius-md) !important;
}

.cw-st-modal-overlay {
  /* React-Select specific overrides for margin/padding */
}

.cw-st-modal-overlay .css-153opun,
.cw-st-modal-overlay .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.cw-st-modal-overlay .css-hlgwow {
  padding: 0px 8px;
}

.cw-st-modal-overlay input::-moz-placeholder, .cw-st-modal-overlay textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.cw-st-modal-overlay input::placeholder,
.cw-st-modal-overlay textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.cw-st-modal-overlay :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.cw-st-modal-overlay input:-webkit-autofill,
.cw-st-modal-overlay input:-webkit-autofill:hover,
.cw-st-modal-overlay input:-webkit-autofill:focus,
.cw-st-modal-overlay input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.cw-st-modal-overlay input[type=radio] {
  accent-color: var(--radio-primary);
}

.cw-st-modal-overlay {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.cw-st-modal-overlay input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.cw-st-modal-overlay input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.cw-st-modal-overlay input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.cw-st-modal-overlay input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.cw-st-modal-overlay input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.cw-stripe-modal-overlay input[type=text],
.cw-stripe-modal-overlay input[type=email],
.cw-stripe-modal-overlay input[type=number],
.cw-stripe-modal-overlay input[type=url],
.cw-stripe-modal-overlay input[type=search],
.cw-stripe-modal-overlay input[type=tel],
.cw-stripe-modal-overlay input[type=password],
.cw-stripe-modal-overlay input[type=datetime-local],
.cw-stripe-modal-overlay input[type=date],
.cw-stripe-modal-overlay input[type=time],
.cw-stripe-modal-overlay textarea,
.cw-stripe-modal-overlay select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.cw-stripe-modal-overlay textarea {
  border-radius: var(--radius-md) !important;
}

.cw-stripe-modal-overlay {
  /* React-Select specific overrides for margin/padding */
}

.cw-stripe-modal-overlay .css-153opun,
.cw-stripe-modal-overlay .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.cw-stripe-modal-overlay .css-hlgwow {
  padding: 0px 8px;
}

.cw-stripe-modal-overlay input::-moz-placeholder, .cw-stripe-modal-overlay textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.cw-stripe-modal-overlay input::placeholder,
.cw-stripe-modal-overlay textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.cw-stripe-modal-overlay :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.cw-stripe-modal-overlay input:-webkit-autofill,
.cw-stripe-modal-overlay input:-webkit-autofill:hover,
.cw-stripe-modal-overlay input:-webkit-autofill:focus,
.cw-stripe-modal-overlay input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.cw-stripe-modal-overlay input[type=radio] {
  accent-color: var(--radio-primary);
}

.cw-stripe-modal-overlay {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.cw-stripe-modal-overlay input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.cw-stripe-modal-overlay input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.cw-stripe-modal-overlay input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.cw-stripe-modal-overlay input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.cw-stripe-modal-overlay input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

.amm-overlay input[type=text],
.amm-overlay input[type=email],
.amm-overlay input[type=number],
.amm-overlay input[type=url],
.amm-overlay input[type=search],
.amm-overlay input[type=tel],
.amm-overlay input[type=password],
.amm-overlay input[type=datetime-local],
.amm-overlay input[type=date],
.amm-overlay input[type=time],
.amm-overlay textarea,
.amm-overlay select {
  background-color: var(--input-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  height: var(--input-height);
  transition: border-color 0.2s;
}

.amm-overlay textarea {
  border-radius: var(--radius-md) !important;
}

.amm-overlay {
  /* React-Select specific overrides for margin/padding */
}

.amm-overlay .css-153opun,
.amm-overlay .css-19bb58m {
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.amm-overlay .css-hlgwow {
  padding: 0px 8px;
}

.amm-overlay input::-moz-placeholder, .amm-overlay textarea::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.amm-overlay input::placeholder,
.amm-overlay textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.amm-overlay :is(input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=date],
input[type=time],
textarea,
select):focus {
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
}

.amm-overlay input:-webkit-autofill,
.amm-overlay input:-webkit-autofill:hover,
.amm-overlay input:-webkit-autofill:focus,
.amm-overlay input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: var(--input-bg) !important;
}

.amm-overlay input[type=radio] {
  accent-color: var(--radio-primary);
}

.amm-overlay {
  /* Square checkbox — driven by --checkbox-* tokens (spec). No hover.
     Excludes Bootstrap switch inputs (.form-check-input) so toggles keep
     their pill+knob styling. */
}

.amm-overlay input[type=checkbox]:not(.form-check-input):not([role=switch]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.amm-overlay input[type=checkbox]:not(.form-check-input):not([role=switch])::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  /* --form-knob is #ffffff in both themes; --color-text-baselight
     is not defined anywhere, which left the tick invisible. */
  background: var(--form-knob);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.amm-overlay input[type=checkbox]:not(.form-check-input):not([role=switch]):checked {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-bg);
}

.amm-overlay input[type=checkbox]:not(.form-check-input):not([role=switch]):checked::before {
  transform: scale(1);
}

.amm-overlay input[type=checkbox]:not(.form-check-input):not([role=switch]):focus {
  outline: none;
  box-shadow: none;
}

/* ===========================================================================
   COMMON STEP / SECTION HEADER — single source across the Webinar module.
   Headline (.create_ep_section h3) + sub-headline (.create_ep_section p) read
   theme vars so every component matches: title-size gold-agnostic heading in
   --color-text, muted description in --color-text-secondary. Component files
   may still override where a bespoke look is needed.
   =========================================================================== */

.cw-create-webinar-wrapper .create_ep_section h3 {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--font-size-xl) + 2px);
  margin: 0 0 8px;
}

.cw-create-webinar-wrapper .create_ep_section p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  margin: 0;
}

.cs-theme-shell .create_ep_section h3 {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--font-size-xl) + 2px);
  margin: 0 0 8px;
}

.cs-theme-shell .create_ep_section p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  margin: 0;
}

.es-theme-shell .create_ep_section h3 {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--font-size-xl) + 2px);
  margin: 0 0 8px;
}

.es-theme-shell .create_ep_section p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  margin: 0;
}

.sl-theme-shell .create_ep_section h3 {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--font-size-xl) + 2px);
  margin: 0 0 8px;
}

.sl-theme-shell .create_ep_section p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  margin: 0;
}

.wbes-theme-shell .create_ep_section h3 {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--font-size-xl) + 2px);
  margin: 0 0 8px;
}

.wbes-theme-shell .create_ep_section p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  margin: 0;
}

.wl-theme-shell .create_ep_section h3 {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--font-size-xl) + 2px);
  margin: 0 0 8px;
}

.wl-theme-shell .create_ep_section p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  margin: 0;
}

.podup-webinar-create .create_ep_section h3 {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--font-size-xl) + 2px);
  margin: 0 0 8px;
}

.podup-webinar-create .create_ep_section p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  margin: 0;
}

.webinar-stripe-settings-page .create_ep_section h3 {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--font-size-xl) + 2px);
  margin: 0 0 8px;
}

.webinar-stripe-settings-page .create_ep_section p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────
   Shared AI assistant UI (`wai-*`)

   One set of classes for every "write it with AI" surface in the module:
   the email settings brief box, the social caption modal, and anything
   added later. Built on the global theme tokens only, so it inherits
   light/dark from whatever page hosts it — never restyle these per
   component; add a modifier here instead.
   ────────────────────────────────────────────────────────────── */

/* ── inline brief box (renders inside a form/card) ── */

.wai-box {
  margin-top: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  overflow: hidden;
}

.wai-box-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.wai-box-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--icon-style-box-border-radius);
  border: var(--icon-style-box-border);
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-base-color) !important;
}

.wai-box-titles {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.wai-box-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.wai-box-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.wai-box-toggle {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  padding: 4px 10px;
  cursor: pointer;
}

.wai-box-body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--color-border);
}

/* ── trigger button (sits next to a field label) ── */

.wai-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-primary);
}

/* ── brief fields ── */

.wai-field {
  margin-top: 14px;
}

.wai-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.wai-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.wai-optional {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.wai-textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  padding: 10px 12px;
  font-size: var(--font-size-md);
  color: var(--input-color);
  background-color: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  outline: none;
}

.wai-textarea:focus {
  border-color: var(--input-hover-border-blue);
}

.wai-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.wai-error {
  color: var(--color-error);
}

/* ── chip groups ── */

.wai-chips-row {
  margin-top: 12px;
}

.wai-chips-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.wai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Shape only — colours come from the common .cw-tab class (see
   _shared-components.scss), so AI chips match every other tab in the module. */

.wai-chip {
  font-size: var(--font-size-xs);
  padding: 6px 12px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

/* ── "how many" selector ── */

.wai-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.wai-count select {
  background: var(--input-bg);
  color: var(--input-color);
  border: var(--input-border);
  border-radius: var(--input-radius);
  padding: 4px 8px;
  outline: none;
}

/* ── modal shell (results / full brief) ── */

.wai-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.wai-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.wai-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.wai-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

.wai-modal-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.wai-modal-body {
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wai-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ── result options ── */

.wai-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 11px 13px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
}

.wai-option.is-active {
  border-color: var(--color-primary);
}

.wai-option-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

.wai-option-body {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wai-empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ── buttons ── */

.wai-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

/* ── credit cost line ──
   Text only; hovering shows a dark bubble (the ::after below reads data-tip) with
   the service description and how many credits get deducted — same look the
   Onboarder gets from Bootstrap. Sits inline with the action buttons, immediately
   before Generate. */

.wai-credit-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: help;
  /* Tooltip bubble — centred above the line, wraps like Bootstrap's. */
}

.wai-credit-line::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: -moz-max-content;
  width: max-content;
  max-width: 220px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
  z-index: 10;
}

.wai-credit-line {
  /* Arrow */
}

.wai-credit-line::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
  z-index: 10;
}

.wai-credit-line:hover::after,
.wai-credit-line:hover::before {
  opacity: 1;
  visibility: visible;
}

.wai-credit-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.wai-credit-count {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.wai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: var(--btn-radius);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
}

.wai-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wai-btn-primary {
  border-color: transparent;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
}

.wai-btn-primary:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
}

/* Webinar Listing Page CSS Start */

.webinar-listing-tabs {
  border: 0;
  gap: 12px;
}

.webinar-listing-tabs .nav-item + .nav-item,
.webinar-listing-tabs .nav-tabs .nav-item {
  margin: 0;
}

/* Shape only — colours come from the common tab rule in _shared-components.scss */

.nav.nav-tabs.webinar-listing-tabs .nav-item .nav-link:hover:not(.active),
.nav.nav-tabs.webinar-listing-tabs .nav-item .nav-link {
  border-radius: 12px;
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  padding: 10px 20px;
}

.webinar-listing-search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.webinar-listing-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid var(--color-border);
  margin-right: 16px;
  padding-right: 16px;
}

.webinar-listing-filter .css-b62m3t-container {
  min-width: 136px;
}

.webinar-listing-search .search {
  max-width: 220px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface) !important;
  height: auto;
  padding: 10px 32px 10px 10px;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z' fill='%23829DB3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center right 10px !important;
  background-size: 16px 16px !important;
}

.webinar-listing-search .search:hover,
.webinar-listing-search .search:focus {
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z' fill='%23829DB3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center right 10px !important;
  background-size: 16px 16px !important;
  color: var(--color-text);
  border-color: var(--input-hover-border-blue) !important;
  box-shadow: none !important;
  outline: none !important;
}

body[data-theme=dark] .webinar-listing-search .search,
body[data-theme=dark] .webinar-listing-search .search:hover,
body[data-theme=dark] .webinar-listing-search .search:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z' fill='%23C2A032'/%3E%3C/svg%3E") !important;
}

.webinar-listing-search select.form-control {
  padding: 4px 8px !important;
  border: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M169.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 306.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z' fill='%23829DB3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center right 10px;
  background-size: 16px 16px;
  padding-right: 35px !important;
  background-color: transparent;
}

.webinar-listing-search .form-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  margin: 0;
  flex-shrink: 0;
}

.webinar-listing-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 30px 0;
}

.webinar-listing-section .webinar-listing-list {
  margin: 0px 0px 30px;
  border-radius: 16px;
  border: 1px solid var(--color-info-bg);
  background: var(--color-surface);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  padding: 12px 30px 12px 12px;
}

.webinar-listing-section .webinar-listing-img {
  position: relative;
}

.webinar-listing-section .webinar-listing-timedate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.webinar-listing-section .webinar-listing-timedate span {
  border-radius: var(--icon-style-box-border-radius) !important;
  border: var(--icon-style-box-border) !important;
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
  padding: 4px 12px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 16px;
  text-transform: uppercase;
  display: inline-block;
}

.webinar-listing-section .webinar-listing-timedate ul {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  list-style: none;
}

.webinar-listing-section .webinar-listing-timedate ul li {
  padding-left: 18px;
  position: relative;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.webinar-listing-section .webinar-listing-timedate ul li::after {
  position: absolute;
  content: "";
  left: 6px;
  background: var(--color-text-muted);
  width: 4px;
  height: 4px;
  top: 8px;
  border-radius: 50%;
}

.webinar-listing-section .webinar-listing-list h2 a,
.webinar-listing-section .webinar-listing-list h2 {
  color: var(--color-text);
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  padding: 0;
  margin: 0 0 10px;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.webinar-listing-section .webinar-listing-list p {
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  padding: 0;
  margin: 0 0 20px;
}

.webinar-listing-section .webinar-listing-list .webinar-description-wrap,
.webinar-listing-section .webinar-listing-list .webinar-description-wrap * {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
}

.webinar-listing-section .webinar-listing-list .webinar-description-wrap :is(h1, h2, h3, h4, h5, h6, p, div, ul, ol, li, blockquote, pre, table, figure) {
  padding: 0;
  margin: 0;
  font-weight: var(--font-weight-regular);
}

.webinar-listing-section .webinar-listing-list .webinar-description-wrap :is(ul, ol) {
  padding-left: 20px;
}

.webinar-listing-section .webinar-listing-list .webinar-description-wrap :is(strong, b) {
  font-weight: var(--font-weight-regular);
}

.webinar-listing-section .webinar-listing-list .webinar-description-wrap :is(em, i) {
  font-style: italic;
}

.webinar-listing-section .webinar-listing-list .webinar-description-wrap a {
  text-decoration: underline;
}

.webinar-listing-section .webinar-listing-user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.webinar-listing-section .webinar-listing-username {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 32px;
  border-right: 1px solid var(--color-border);
}

.webinar-listing-section .webinar-listing-username img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 100%;
}

.webinar-listing-section .webinar-listing-username h3 {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  padding: 0;
  margin: 0 0 var(--space-1) 0;
}

.webinar-listing-section .webinar-listing-username p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: 0;
  margin: 0;
}

.webinar-listing-section .webinar-listing-timede {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.webinar-listing-section .wl-timede-link {
  color: var(--wizard-link) !important;
}

.webinar-listing-section .webinar-listing-timede svg {
  margin-right: 6px;
}

.webinar-listing-section .wl-timede-link:hover {
  color: var(--wizard-link-hover);
}

.webinar-listing-section .webinar-listing-img {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  border-radius: 14px;
  overflow: hidden;
  align-items: center;
  aspect-ratio: 16/9;
}

.webinar-listing-section .webinar-listing-img:before {
  content: "";
  display: none;
  padding: 75% 0 0 0;
  border-radius: 0;
}

/* Badge overlay on the thumbnail (kept in this stylesheet so it applies
   even where _WebinarList.scss isn't loaded, e.g. attendees info card). */

.webinar-listing-section .webinar-listing-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

/* Attendees info card — image fills the box (no gray frame), badges overlay */

.attendees-section .webinar-listing-img {
  padding: 0;
  align-items: stretch;
  min-height: 160px;
}

.attendees-section .webinar-listing-img img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}

.webinar-listing-section .webinar-listing-img img {
  border-radius: 14px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* Ensure the image stretches to match the content height in the list view */

.webinar-listing-list .row.align-items-center {
  align-items: stretch !important;
}

.webinar-listing-section .webinar-listing-btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  height: 100%;
  text-wrap-mode: nowrap;
}

.webinar-listing-section .webinar-listing-btn .w3nbtn.lightgraybtn.showplatform-cancel-save {
  color: var(--btn-quaternary-color);
  background: var(--btn-quaternary-bg);
  border: 1px solid var(--btn-quaternary-border);
  box-shadow: none !important;
  height: auto;
  padding: 8px 15px !important;
  border-radius: 50px;
  font-size: 14px !important;
  font-weight: var(--font-weight-regular);
}

.webinar-listing-section .webinar-listing-btn .w3nbtn.lightgraybtn.showplatform-cancel-save:hover {
  background: var(--btn-quaternary-bg-hover);
  box-shadow: var(--btn-quaternary-shadow-hover);
}

.webinar-listing-section .webinar-listing-btn .w3nbtn.lightgraybtn.showplatform-cancel-save.danger {
  color: var(--btn-quinary-color) !important;
  background: var(--btn-quinary-bg);
  border: 1px solid var(--btn-quinary-border);
}

.selected-platforms-btn,
.webinar-listing-section .webinar-listing-btn > a:not(.fm-edit-btn):not(.fm-del-btn):not(.fm-restore-btn),
.webinar-listing-section .webinar-listing-btn > .webinar-resend-btn {
  color: var(--btn-primary-color);
  text-align: center;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: normal;
  border-radius: var(--btn-radius);
  padding: 12px 24px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  width: auto;
  border: none;
  transition: 0.3s all;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding);
}

.webinar-listing-section .webinar-listing-btn > .webinar-resend-btn:hover {
  background: var(--btn-secondary-bg-white) !important;
  box-shadow: var(--btn-secondary-dark-box-shadow) !important;
}

.webinar-listing-section .webinar-listing-btn > a.webinar-listing-save {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border: var(--btn-secondary-border);
  box-shadow: none;
}

.webinar-listing-section .webinar-listing-btn > a.webinar-listing-save:hover {
  background: var(--btn-secondary-bg-hover);
  box-shadow: var(--btn-secondary-shadow-hover);
}

.webinar-listing-btn .hamburgerdotswrap .dropdown-toggle {
  background: var(--btn-secondary-bg);
  padding: 10px;
  color: var(--btn-secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: 0.2s all;
  outline: none !important;
  box-shadow: none !important;
}

.webinar-listing-btn .hamburgerdotswrap .dropdown-menu {
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 8px;
  min-width: 180px;
}

.webinar-listing-btn .hamburgerdotswrap .dropdown-item {
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  width: 100%;
  margin: 0;
  border: none;
}

.webinar-listing-btn .hamburgerdotswrap .dropdown-item:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.podup-webinar-listing .glpagination .pagination .page-link {
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: transparent;
}

.podup-webinar-listing .glpagination .pagination .page-link.prevpagi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z' fill='%2394A3B8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.podup-webinar-listing .glpagination .pagination .page-link.nextpagi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M247.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L179.2 256 41.9 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z' fill='%2394A3B8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.podup-webinar-listing .glpagination {
  padding: 0;
}

/* Webinar Listing Page CSS End */

/* Webinar Left Sidebar CSS Start */

.podup-webinar-create .whitecardbox {
  min-height: auto;
}

.podup-webinar-create .create_ep_section h3 {
  margin: 0 0 4px;
  color: var(--color-text);
  font-size: calc(var(--font-size-xl) + 2px);
}

.podup-webinar-create .form-label {
  color: var(--form-label-color) !important;
  font-size: var(--form-label-font-size);
  font-weight: var(--form-label-font-weight);
  line-height: normal;
  margin: 0 0 8px;
}

.podup-webinar-create .form_note {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  font-style: normal;
  padding-top: 8px;
}

.podup-webinar-create .form_note svg {
  width: 10px;
  height: 13px;
  margin-right: 4px;
}

.podup-webinar-create .form_note span {
  color: var(--color-text-muted);
  float: right;
}

.webinar-icon {
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: var(--icon-bg-color) !important; */
  /* color: var(--color-text-baselight) !important; */
}

.webinar-icon.blue-icon {
  color: var(--color-primary) !important;
  background: var(--color-info-bg) !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
}

.webinar-icon.green-icon {
  border-radius: var(--icon-style-box-border-radius) !important;
  border: var(--icon-style-box-border) !important;
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
}

.webinar-icon.green-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor !important;
}

.webinar-icon.pink-icon {
  color: var(--color-error) !important;
  background: var(--color-error-bg) !important;
  border-radius: 50% !important;
}

.webinar-icon.yellow-icon {
  color: var(--color-warning);
  background: var(--color-warning-bg);
}

.webinar-icon.dark-green-icon {
  color: var(--color-success);
  background: var(--color-success-bg);
}

.webinar-icon.dark-blue-icon {
  color: var(--color-primary);
  background: var(--color-info-bg);
}

.webinar-icon.purple-icon {
  color: var(--color-accent-purple);
  background: var(--color-accent-purple-bg);
}

.webinar-icon.red-icon {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.webinar-icon.lightblue-icon {
  background: var(--color-info-bg);
  color: var(--color-primary);
}

.webinar-icon.orange-icon {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.webinar-plan-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.webinar-plan-wrapper .plan-option {
  margin: 0;
}

.webinar-plan-wrapper .plan-option input {
  display: none;
}

.webinar-plan-wrapper .plan-box {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 40px;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  border: 2px solid var(--color-text-muted);
  background: var(--color-surface);
  justify-content: center;
  box-shadow: none;
  text-align: center;
}

.webinar-plan-wrapper .plan-box:hover,
.webinar-plan-wrapper .plan-option input:checked + .plan-box {
  border-color: var(--tab-active-color);
  background: var(--tab-active-bg);
  color: var(--tab-active-color);
}

.webinar-plan-wrapper.webinar-type-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.webinar-plan-wrapper.webinar-type-wrapper.edit {
  grid-template-columns: repeat(4, 1fr);
}

.webinar-plan-wrapper.webinar-type-wrapper.edit .plan-box .icon img {
  max-width: 26px;
}

.local-time-section.wb-local-time-section {
  padding-left: 24px;
}

.webinar-plan-wrapper.webinar-type-wrapper .plan-box {
  flex-direction: column;
  padding: 18px 20px;
  color: var(--color-text);
}

.webinar-plan-wrapper.webinar-type-wrapper .plan-box .icon {
  width: 48px;
  height: 48px;
  background: var(--plan-box-icon-bg-color);
  border: 1px solid var(--plan-box-icon-border-color);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-lg);
  margin: 0 auto 3px;
  color: var(--color-text-secondary);
}

.webinar-plan-wrapper.webinar-type-wrapper .plan-box h6 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: normal;
}

.webinar-plan-wrapper.webinar-type-wrapper .plan-box:hover .add-another-btn,
.webinar-plan-wrapper.webinar-type-wrapper .plan-option input:checked + .webinar-plan-wrapper.webinar-type-wrapper .plan-box:hover,
.webinar-plan-wrapper.webinar-type-wrapper .plan-option input:checked + .plan-box {
  border-color: var(--tab-active-color);
  background: var(--tab-active-bg);
  color: var(--color-text);
}

.webinar-plan-wrapper.webinar-type-wrapper .plan-box:hover .icon,
.webinar-plan-wrapper.webinar-type-wrapper .plan-option input:checked + .plan-box .icon {
  background: var(--plan-box-hover-icon-bg-color);
  border-color: var(--plan-box-hover-icon-border-color);
  color: var(--tab-active-color);
}

.webinar-plan-wrapper.webinar-type-wrapper.webinar-audience-wrapper {
  grid-template-columns: repeat(4, 1fr);
}

.webinar-plan-wrapper.webinar-type-wrapper.webinar-audience-wrapper .plan-box {
  padding: 14px;
  gap: 0;
}

.webinar-plan-wrapper.webinar-type-wrapper.webinar-lavel-wrapper {
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.webinar-plan-wrapper.webinar-type-wrapper.webinar-lavel-wrapper .plan-box {
  padding: 10px 16px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

.webinar-plan-wrapper.webinar-lavel-wrapper .plan-box:hover,
.webinar-plan-wrapper.webinar-lavel-wrapper .plan-option input:checked + .plan-box {
  color: var(--tab-active-color);
}

.podup-webinar-switch {
  border-top: 1px solid var(--color-border);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.podup-webinar-switch h5 {
  color: var(--color-text);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  padding: 0;
  margin: 0;
}

.podup-webinar-switch p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  padding: 0;
  margin: 0;
}

.podup-webinar-switch .form-switch {
  padding-left: 0;
}

/* Pill toggle. `appearance: none` is required: without it the input renders as a
   native checkbox (square + check glyph, tinted by the dark theme's accent-color)
   and every rule below has nothing to paint on. */

.podup-webinar-switch .form-switch .form-check-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  accent-color: auto;
  width: 44px;
  height: 24px;
  background-color: var(--switch-off-bg);
  border-radius: 50px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease;
  display: block;
  float: none;
  border: 0;
  background-image: none;
  box-shadow: none;
}

.podup-webinar-switch .form-switch .form-check-input:focus {
  box-shadow: none;
}

.podup-webinar-switch .form-switch .form-check-input:checked {
  background-color: var(--switch-on-bg);
}

.podup-webinar-switch .form-yellow-switch .form-check-input:checked {
  background-color: var(--color-warning);
}

.podup-webinar-switch .form-switch .form-check-input::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background: var(--switch-knob);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.podup-webinar-switch .form-switch .form-check-input:checked::before {
  transform: translateX(20px);
}

.webinar-upload-box {
  position: relative;
  border-radius: 8px;
  border: 2px dashed var(--upload-box-border-color);
  padding: 34px;
  text-align: center;
  background: var(--upload-box-bg);
  cursor: pointer;
}

.webinar-upload-box .upload-icon {
  display: flex;
  width: 64px;
  height: 64px;
  min-height: 64px;
  justify-content: center;
  align-items: center;
  border-radius: 100% !important;
  background: var(--upload-box-icon-bg-color) !important;
  border: 1px solid var(--upload-box-icon-border-color) !important;
  color: var(--upload-box-icon-text-color) !important;
  margin: 0 auto 6px !important;
}

.webinar-upload-box p {
  color: var(--upload-box-heading-color);
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  margin: 0 0 4px;
}

.webinar-upload-box small {
  display: block;
  color: var(--upload-box-text-color);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: normal;
}

.webinar-upload-box .upload-btn {
  display: inline-flex;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--color-text-muted);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  margin-top: 4px;
}

.webinar-upload-box input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Upload Preview Styles */

.webinar-upload-box .upload-preview {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.webinar-upload-box .upload-preview-image {
  position: relative;
  width: 85px;
  height: 85px;
  border-radius: 8px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px auto;
}

.webinar-upload-box .upload-preview-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  max-height: 300px;
  border-radius: 8px;
}

.webinar-upload-box .upload-preview-remove {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  border: none;
  color: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  padding: 0;
}

.webinar-upload-box .upload-preview-remove:hover {
  background: var(--color-error);
  transform: scale(1.1);
}

.webinar-upload-box .upload-preview-remove svg {
  width: 16px;
  height: 16px;
}

.webinar-upload-box .upload-preview-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 12px;
  /* background: var(--color-success-bg); */
  /* border-radius: 6px; */
  /* border: 1px solid var(--color-success-border); */
}

.webinar-upload-box .upload-preview-info.video-upload-info {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}

.webinar-upload-box .upload-preview-info.video-upload-info p {
  margin: 0;
}

.webinar-upload-box .upload-preview-info.video-upload-info p:first-child svg {
  margin-right: 6px;
  vertical-align: middle;
  margin-top: -2px;
}

.webinar-upload-box .upload-preview-info.video-upload-info p:not(:first-child) {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
}

.webinar-upload-box .upload-preview-info .text-success {
  color: var(--color-success);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: 6px;
}

.webinar-upload-box .upload-preview-info .text-success svg {
  flex-shrink: 0;
  color: var(--color-success);
}

.color-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.color-row .form-control {
  flex: 1;
}

.color-row input[type=color] {
  border-radius: 8px;
  border: 1px solid var(--color-text-muted);
  background: var(--color-border);
  height: 42px;
  width: 72px;
  padding: 4px;
}

.add-another-objective {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.add-another-objective .add-another-list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.add-another-objective .number {
  display: flex;
  width: var(--input-height, 44px);
  height: var(--input-height, 44px);
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--color-info-bg);
  color: var(--color-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: normal;
}

.webinar-right-btn,
.webinar-left-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.webinar-left-btn .webinar-back-btn {
  color: var(--color-text-secondary);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.webinar-upload-box.attendee-benefits-img-upload {
  padding: 40px 24px !important;
}

.uploaded-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.uploaded-benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.uploaded-benefit-item:hover {
  border-color: var(--color-info-border);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}

.benefit-file-preview {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface-2);
  color: var(--color-primary);
}

.benefit-file-preview.is-document {
  border: 1px solid var(--color-border);
}

.benefit-file-preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.benefit-file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-file-details {
  min-width: 0;
  flex: 1;
}

.benefit-file-title {
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.benefit-file-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 18px;
  margin-top: 2px;
}

.benefit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.benefit-action-btn {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.benefit-preview-btn {
  padding: 0 12px;
  border-color: var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.benefit-preview-btn:hover {
  border-color: var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.benefit-remove-btn {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 8px;
  border: 1px solid var(--color-error);
  color: var(--color-error);
}

.benefit-remove-btn:hover {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
}

.webinar-left-btn .webinar-back-btn:hover {
  color: var(--primary);
}

/* AttendeeMessagesModal — theme-aware (light/dark) via --color-* tokens. */

.amm-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}

.amm-modal {
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--modal-bg);
  color: var(--modal-text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.amm-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border);
}

/* colour/close from common .cw-modal-* classes */

.amm-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

.amm-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
}

.amm-close {
  cursor: pointer;
  font-size: var(--font-size-xl);
  line-height: 1;
}

.amm-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}

.amm-empty {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  text-align: center;
  padding: 20px 0;
}

.amm-selectall {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.amm-selectall label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.amm-selectall-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.amm-message {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  cursor: pointer;
  background: var(--color-bg);
}

.amm-message.is-selected {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
}

.amm-message-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.amm-message-head label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}

.amm-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.amm-message-text {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  white-space: pre-line;
  word-break: break-word;
}

.amm-replies {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

.amm-reply {
  background: var(--color-surface-2);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}

.amm-reply-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.amm-reply-subject {
  font-size: 12.5px;
  color: var(--color-text-secondary);
}

.amm-reply-status {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  padding: 1px 7px;
  border-radius: 10px;
  color: var(--color-text);
  background: var(--color-surface);
}

.amm-reply-status.is-sent {
  color: var(--color-success);
  background: var(--color-success-bg);
}

.amm-reply-status.is-failed {
  color: var(--color-error);
  background: var(--color-error-bg);
}

.amm-reply-status.is-pending {
  color: var(--color-warning);
  background: var(--color-warning-bg);
}

.amm-reply-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  white-space: pre-line;
  word-break: break-word;
}

.amm-reply-date {
  font-size: 11px;
  color: var(--color-text-muted);
}

.amm-form {
  border-top: 1px solid var(--color-border);
  padding: 16px 22px;
}

.amm-input,
.amm-textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: var(--font-size-md);
  outline: none;
  color: var(--color-text);
  background: var(--color-bg);
}

.amm-input::-moz-placeholder, .amm-textarea::-moz-placeholder {
  color: var(--color-text-muted);
}

.amm-input::placeholder,
.amm-textarea::placeholder {
  color: var(--color-text-muted);
}

.amm-input {
  margin-bottom: 10px;
}

.amm-textarea {
  resize: vertical;
}

.amm-form-error {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: 6px;
}

.amm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* Attendance filter tabs (All / Joined / Not Joined). */

/* Shape only — colours come from the common .cw-tab class (_shared-components.scss) */

.attendance-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  height: 36px;
  min-height: 36px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
  transition: all 0.2s ease;
}

/* Page subtitle under the heading. */

.webinar-page-subtitle {
  font-size: var(--font-size-md);
  line-height: normal;
  color: var(--color-text-secondary);
}

/* Attendee row action dropdown — hover follows theme. */

.attendee-action-dropdown .attendee-action-item:hover {
  background: var(--color-surface-2);
}

.attendee-action-dropdown .attendee-action-item.attendee-action-item-danger:hover {
  background: var(--color-error-bg);
}

/* Bootstrap spinner-border loaders — one color + size everywhere. */

.spinner-border,
.spinner-border.text-primary {
  width: 40px !important;
  height: 40px !important;
  border-width: 3px !important;
  color: var(--form-accent) !important;
}

.spinner-border.spinner-border-sm {
  width: 16px !important;
  height: 16px !important;
  border-width: 2px !important;
  color: currentColor !important;
  /* button spinners follow button text */
}

.webinar-right-btn {
  justify-content: flex-end;
}

.auto-saved-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  margin: 0;
}

.webinar-email-preview {
  border-radius: 8px;
  border: 1px solid var(--color-primary);
  background: var(--color-info-bg);
  padding: 16px;
  display: flex;
  gap: 12px;
}

.webinar-email-preview h3 {
  color: var(--color-primary);
  font-size: calc(var(--font-size-xl) + 2px);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  padding: 0;
  margin: 0 0 4px;
}

.webinar-email-preview p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: normal;
  padding: 0;
  margin: 0 0 12px;
}

.webinar-email-danger {
  border: 1px solid var(--color-error);
  background: var(--color-error-bg);
  margin-bottom: 24px;
}

.webinar-email-previewyellow {
  border: 1px solid var(--color-warning-bg);
  background: var(--color-warning-bg);
  margin-bottom: 24px;
}

.webinar-email-previeworange {
  border: 1px solid var(--color-warning-bg);
  background: var(--color-warning-bg);
}

.webinar-email-premium {
  border: 1px solid var(--color-border);
  background: var(--color-border);
}

.webinar-email-premium h3,
.webinar-email-danger h3,
.webinar-email-previewyellow h3 {
  font-size: calc(var(--font-size-xl) + 2px);
  color: var(--color-text);
}

.webinar-email-premium p,
.webinar-email-danger p,
.webinar-email-previewyellow p {
  color: var(--color-text-secondary);
  margin: 0;
}

.webinar-email-premium a {
  display: inline-flex;
  margin-top: 12px;
}

.webinar-filter-sort {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.webinar-filter-sort select {
  border-radius: 8px;
  border: 1px solid var(--color-text-muted);
  background: rgba(0, 0, 0, 0);
  color: var(--color-text-secondary);
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  padding: 11px 17px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  max-width: 110px;
  padding-left: 40px;
  width: 100%;
  outline: none;
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: left 18px center;
  text-align: left;
}

.webinar-filter-sort .webinar-filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23374151' viewBox='0 0 640 640'%3E%3Cpath d='M96 128C83.1 128 71.4 135.8 66.4 147.8C61.4 159.8 64.2 173.5 73.4 182.6L256 365.3L256 480C256 488.5 259.4 496.6 265.4 502.6L329.4 566.6C338.6 575.8 352.3 578.5 364.3 573.5C376.3 568.5 384 556.9 384 544L384 365.3L566.6 182.7C575.8 173.5 578.5 159.8 573.5 147.8C568.5 135.8 556.9 128 544 128L96 128z'/%3E%3C/svg%3E");
}

.webinar-filter-sort .webinar-sort-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23374151' viewBox='0 0 640 640'%3E%3Cpath d='M130.4 268.2C135.4 280.2 147 288 160 288L480 288C492.9 288 504.6 280.2 509.6 268.2C514.6 256.2 511.8 242.5 502.7 233.3L342.7 73.3C330.2 60.8 309.9 60.8 297.4 73.3L137.4 233.3C128.2 242.5 125.5 256.2 130.5 268.2zM130.4 371.7C125.4 383.7 128.2 397.4 137.3 406.6L297.3 566.6C309.8 579.1 330.1 579.1 342.6 566.6L502.6 406.6C511.8 397.4 514.5 383.7 509.5 371.7C504.5 359.7 492.9 352 480 352L160 352C147.1 352 135.4 359.8 130.4 371.8z'/%3E%3C/svg%3E");
}

.webinar-speakers-boxs {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.webinar-speakers-list {
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0);
  padding: 25px;
}

.webinar-speakers-list .webinar-speakers-name {
  display: flex;
  gap: 16px;
}

/* Recording-send selection: the checkbox itself is the shared control from
   _FormControls.scss — only placement/label colour live here. */

.speaker-select-checkbox {
  margin-top: 24px;
}

.speaker-select-all {
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.speaker-select-count {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* Contextual bulk actions — only rendered once rows are selected, so they stay
   compact and never compete with the primary Add Speaker action. */

.sl-theme-shell .speaker-bulk-bar {
  flex-wrap: wrap;
  padding: 6px 2px;
}

.sl-theme-shell .speaker-bulk-sep {
  width: 1px;
  height: 14px;
  margin: 0 2px;
  background: var(--color-border);
}

.sl-theme-shell .speaker-bulk-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--wizard-link);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
}

.sl-theme-shell .speaker-bulk-action svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.sl-theme-shell .speaker-bulk-action:hover:not(:disabled) {
  background: var(--color-surface-2);
  color: var(--wizard-link-hover);
}

.sl-theme-shell .speaker-bulk-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.webinar-speakers-list .webinar-speakers-name img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 12px;
  -o-object-fit: contain;
     object-fit: contain;
  background: var(--color-surface-2);
}

.webinar-speakers-list .webinar-speakers-content h3 {
  color: var(--color-text);
  font-size: calc(var(--font-size-xl) + 2px);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  padding: 0;
  margin: 0 0 8px;
}

.webinar-speakers-list .webinar-speakers-content p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  padding: 0;
  margin: 0 0 12px;
}

.webinar-speakers-list .webinar-speakers-badge {
  display: inline-block;
  margin-left: 18px;
}

.webinar-speakers-list .webinar-speakers-badge span {
  display: inline-block;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-regular) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  backdrop-filter: blur(6px);
  line-height: normal;
  border-radius: var(--radius-lg) !important;
  border: var(--icon-style-box-border) !important;
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
  text-align: center;
  margin: 0 4px;
}

.webinar-speakers-list .webinar-speakers-social {
  display: inline-flex;
  gap: 30px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.webinar-speakers-list .webinar-speakers-link {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: normal;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.webinar-speakers-list .webinar-speakers-link:hover {
  color: var(--color-primary);
}

.webinar-speakers-list .webinar-speakers-tags span {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  text-align: center;
  font-size: var(--font-size-sm);
  margin-right: 8px;
}

.webinar-speakers-list .webinar-speakers-access {
  border-top: 1px solid var(--color-border);
  padding: 16px 0;
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.webinar-speakers-list .webinar-access-list {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
}

.webinar-speakers-action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.webinar-resend-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 0 solid var(--color-border);
  background: var(--color-primary);
  color: var(--color-surface);
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  padding: 12px 16px;
}

.webinar-resend-btn:hover {
  color: var(--color-surface);
}

.webinar-blue-btn {
  background: var(--btn-primary-bg-hover) !important;
  color: var(--btn-primary-color) !important;
  box-shadow: var(--btn-primary-shadow);
  border: none !important;
}

.webinar-blue-btn:hover {
  background: var(--btn-primary-bg-hover) !important;
  color: var(--btn-primary-color) !important;
  box-shadow: var(--btn-primary-shadow-hover);
}

.webinar-speakers-action .webinar-speakers-btn {
  display: inline-flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--color-text-muted);
  background: rgba(0, 0, 0, 0);
  color: var(--color-text-secondary);
}

.webinar-speakers-action .webinar-speakers-delete {
  border: 1px solid var(--color-error);
  color: var(--color-error);
}

.webinar-speakers-dropdown {
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  padding: 12px;
}

.webinar-speakers-dropdown .webinar-dropdown-top {
  width: 100%;
  display: flex;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 8px;
  text-align: left;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M8.20542 11.0864C8.64487 11.47 9.35854 11.47 9.798 11.0864L15.423 6.17551C15.8625 5.79185 15.8625 5.16878 15.423 4.78512C14.9835 4.40146 14.2699 4.40146 13.8304 4.78512L8.99995 9.00234L4.16948 4.78819C3.73003 4.40453 3.01636 4.40453 2.5769 4.78819C2.13745 5.17185 2.13745 5.79492 2.5769 6.17858L8.2019 11.0895L8.20542 11.0864Z' fill='%23727272'/%3E%3C/svg%3E");
}

.webinar-speakers-dropdown .webinar-dropdown-top svg {
  display: inline-flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  color: var(--icon-style-box-color) !important;
}

.webinar-speakers-dropdown .webinar-dropdown-top.presenter-icon svg {
  background: var(--color-bg);
  color: var(--color-accent-orange);
}

.webinar-speakers-dropdown .webinar-dropdown-top.panelist-icon svg {
  background: var(--color-primary);
  color: var(--color-primary);
}

.webinar-speakers-dropdown h4 {
  color: var(--color-text);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: 24px;
  padding: 0;
  margin: 0;
}

.webinar-speakers-dropdown .webinar-dropdown-top p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  padding: 0;
  margin: 0;
}

.webinar-speakers-dropdown .webinar-dropdown-list {
  border-radius: 0 0 12px 12px;
  padding: 12px 0;
  grid-template-columns: repeat(2, 1fr);
  display: grid;
  gap: 16px 24px;
  border-top: 0;
  border: 0;
  border-radius: 0;
}

.webinar-speakers-dropdown .webinar-dropdown-list .podup-webinar-switch {
  padding: 0;
  border: 0;
}

.webinar-footer-bottom {
  /* padding-top: 16px;
  border-top: 1px solid var(--color-border); */
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.webinar-chatvisibility {
  border-top: 1px solid var(--color-border);
  padding-top: 25px;
}

.webinar-chatvisibility .webinar-plan-wrapper.webinar-type-wrapper {
  grid-template-columns: repeat(1, 1fr);
}

.webinar-chatvisibility .webinar-plan-wrapper.webinar-type-wrapper .plan-box {
  flex-direction: initial;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  align-items: flex-start;
}

.webinar-chatvisibility .webinar-plan-wrapper.webinar-type-wrapper .plan-box .icon {
  margin: 0;
}

.webinar-chatvisibility .webinar-plan-wrapper.webinar-type-wrapper .plan-box h6 {
  margin-top: 7px;
}

.webinar-chatvisibility .webinar-plan-wrapper.webinar-type-wrapper .plan-box .icon {
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-border);
  background: transparent;
  border-radius: 30px;
  position: relative;
  margin-top: 6px;
  flex-shrink: 0;
}

.webinar-chatvisibility .webinar-plan-wrapper.webinar-type-wrapper .plan-option input:checked + .plan-box .icon {
  border-color: var(--color-primary);
  background: transparent;
}

.webinar-chatvisibility .webinar-plan-wrapper.webinar-type-wrapper .plan-option input:checked + .plan-box .icon::before {
  width: 13px;
  height: 13px;
  background: var(--color-primary);
  border-radius: 30px;
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.podup-webinar-switchtwo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.podup-webinar-switchtwo .podup-webinar-switch {
  border-radius: 8px;
  background: var(--color-border);
  padding: 16px;
  border: 0;
}

.webinar-chatratelimiting {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.webinar-chatratelimiting input {
  max-width: 100px;
}

.webinar-chatratelimiting select {
  max-width: 135px;
  margin-left: 16px;
}

.webinar-autoresponse-templates {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-border);
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}

.webinar-autoresponse-templates h5 {
  color: var(--color-text);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  padding: 0;
  margin: 0 0 8px;
}

.webinar-autoresponse-templates p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  padding: 0;
  margin: 0;
}

.autoresponse-edit {
  position: absolute;
  right: 16px;
  top: 20px;
  color: var(--color-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  border: 0;
  padding: 0;
  background: transparent;
}

.autoresponse-btn {
  border-radius: 8px;
  border: 2px dashed var(--color-text-muted);
  background: var(--color-surface);
  padding: 14px 20px;
  color: var(--color-text-secondary);
  text-align: center;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  transition: 0.3s all;
}

.autoresponse-btn svg {
  width: 16px;
  height: 16px;
}

.autoresponse-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.webinar-precreated-polls {
  border-top: 1px solid var(--color-border);
  padding: 24px 0;
}

.webinar-precreated-polls h6 {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  padding: 0;
  margin: 0;
}

.webinar-precreated-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.webinar-precreated-lnner {
  border-radius: 8px;
  border: 1px solid var(--color-primary);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 100%);
  padding: 16px;
}

.webinar-precreated-lnner .webinar-precreated-iconlist {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.webinar-precreated-lnner .webinar-precreated-iconlist svg {
  display: inline-flex;
  width: 40px;
  height: 40px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  color: var(--color-surface);
  background: var(--color-primary);
  flex-shrink: 0;
}

.webinar-precreated-lnner .webinar-precreated-content h5 {
  color: var(--color-text);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  padding: 0;
  margin: 0 0 2px;
}

.webinar-precreated-lnner .webinar-precreated-content p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  padding: 0;
  margin: 0;
}

.webinar-precreated-badge {
  display: inline-block;
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  text-align: center;
  font-size: var(--font-size-sm);
  line-height: normal;
  padding: 5px 12px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.webinar-precreated-btnlist {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.webinar-precreated-btnlist .webinar-precreated-btn {
  display: inline-block;
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  padding: 5px 12px;
}

.webinar-precreated-green {
  border: 1px solid var(--color-success-border);
  background: linear-gradient(90deg, var(--color-success-bg) 0%, var(--color-success-bg) 100%);
}

.webinar-precreated-green .webinar-precreated-iconlist svg {
  background: var(--color-success);
}

.recording-layout-box {
  border-radius: 4px;
  border: 0 solid var(--color-border);
  background: linear-gradient(135deg, var(--color-text-muted) 0%, var(--color-text-secondary) 70.71%);
  width: 100%;
  height: 80px;
  margin-bottom: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.recording-layout-box .recording-layout-inner {
  border-radius: 4px;
  opacity: 0.8;
  background: var(--color-surface);
  width: 64px;
  height: 64px;
}

.recording-layout-box .recording-layout-four {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 6px;
}

.recording-layout-box .recording-layout-four .recording-layout-inner {
  width: 28px;
  height: 20px;
  border-radius: 4px;
}

.recording-layout-speaker .recording-layout-box .recording-layout-inner {
  height: 48px;
}

.webinar-plan-wrapper.webinar-type-wrapper .plan-option:hover .plan-box .recording-layout-box,
.webinar-plan-wrapper.webinar-type-wrapper .plan-option input:checked + .plan-box .recording-layout-box {
  background: linear-gradient(135deg, var(--color-info-border) 0%, var(--color-primary) 70.71%);
}

.webinar-socialmedia-integration {
  display: grid;
  gap: 16px;
}

.webinar-integration {
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--color-bg);
  background: var(--color-bg);
}

.webinar-integration .webinar-integration-content {
  display: flex;
  gap: 16px;
}

.webinar-integration .webinar-integration-content svg {
  display: inline-flex;
  width: 48px;
  height: 48px;
  padding: 10px 15px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: var(--color-accent-orange);
  color: var(--color-surface);
  flex-shrink: 0;
}

.webinar-integration h5 {
  color: var(--color-text);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: 24px;
  padding: 0;
  margin: 0;
}

.webinar-integration h4 {
  color: var(--color-text);
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  padding: 0;
  margin: 0 0 2px;
}

.webinar-integration p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: 20px;
  padding: 0;
  margin: 0;
}

.webinar-integration .webinar-integration-followers p {
  font-size: var(--font-size-sm);
}

.webinar-integration .webinar-integration-connected {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.webinar-integration .webinar-connected {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 20px;
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  justify-content: center;
  text-align: center;
  padding: 4px 14px;
}

.webinar-integration .webinar-integration-setting {
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  padding: 0;
}

.webinar-integration .webinar-integration-followers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.webinar-integration .webinar-integration-followerslist {
  border-radius: 8px;
  background: var(--color-surface);
  padding: 12px;
  text-align: center;
}

.webinar-integration-btn {
  border-radius: 8px;
  border: 0;
  background: var(--color-accent-orange);
  display: flex;
  width: 100%;
  padding: 12px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--color-surface);
  text-align: center;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: normal;
}

.webinar-integration-btn:hover {
  color: var(--color-surface);
}

.webinar-integration-info {
  margin-right: 6px;
  flex-shrink: 0;
}

.webinar-integration-linkedin {
  border: 1px solid var(--color-primary);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 100%);
}

.webinar-integration-linkedin .webinar-integration-content svg {
  background: var(--color-primary);
}

.webinar-integration-linkedin .webinar-integration-btn {
  background: var(--color-primary);
}

.webinar-integration-linkedin .webinar-integration-info {
  color: var(--color-primary);
}

.webinar-integration-twitter {
  border: 1px solid var(--color-info-bg);
  background: linear-gradient(90deg, var(--color-info-bg) 0%, var(--color-info-bg) 100%);
}

.webinar-integration-twitter .webinar-integration-content svg {
  background: var(--color-primary);
}

.webinar-integration-twitter .webinar-integration-btn {
  background: var(--color-primary);
}

.webinar-integration-twitter .webinar-integration-info {
  color: var(--color-primary);
}

.webinar-integration-facebook {
  border: 1px solid var(--color-primary);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-info-bg) 100%);
}

.webinar-integration-facebook .webinar-integration-content svg {
  background: var(--color-primary);
}

.webinar-integration-facebook .webinar-integration-btn {
  background: var(--color-primary);
}

.webinar-integration-facebook .webinar-integration-info {
  color: var(--color-primary);
}

.webinar-integration-instagram {
  border: 1px solid var(--color-error-bg);
  background: linear-gradient(90deg, var(--color-error-bg) 0%, var(--color-error-bg) 100%);
}

.webinar-integration-instagram .webinar-integration-content svg {
  background: linear-gradient(135deg, var(--color-accent-orange) 0%, var(--color-error) 70.71%);
}

.webinar-integration-instagram .webinar-integration-btn {
  background: linear-gradient(135deg, var(--color-accent-orange) 0%, var(--color-error) 70.71%);
}

.webinar-integration-instagram .webinar-integration-info {
  color: var(--color-error);
}

.webinar-integration-youtube {
  border: 1px solid var(--color-error);
  background: linear-gradient(90deg, var(--color-error-bg) 0%, var(--color-warning-bg) 100%);
}

.webinar-integration-youtube .webinar-integration-content svg {
  background: var(--color-error);
}

.webinar-integration-youtube .webinar-integration-btn {
  background: var(--color-error);
}

.webinar-integration-youtube .webinar-integration-info {
  color: var(--color-error);
}

.webinar-plan-wrapper.webinar-type-wrapper.webinar-platforms-wrapper {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.webinar-plan-wrapper.webinar-platforms-wrapper .plan-box:hover,
.webinar-plan-wrapper.webinar-platforms-wrapper .plan-box {
  flex-direction: row;
  gap: 8px;
  padding: 14px 18px;
  font-weight: var(--font-weight-medium);
  border-radius: 8px;
  border: 2px solid var(--color-text-muted);
  background: rgba(0, 0, 0, 0);
  color: var(--color-text-secondary);
}

.webinar-plan-wrapper.webinar-platforms-wrapper .plan-option .plan-box .checkplatforms {
  display: none;
}

.webinar-plan-wrapper.webinar-platforms-wrapper .plan-option input:checked + .plan-box .checkplatforms {
  display: block;
}

.webinar-plan-wrapper.webinar-platforms-wrapper .plan-option .webinar-platforms-linkedin:checked + .plan-box {
  border: 2px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary);
}

.webinar-plan-wrapper.webinar-platforms-wrapper .plan-option .webinar-platforms-twitter:checked + .plan-box {
  border: 2px solid var(--color-primary);
  background: var(--color-info-bg);
  color: var(--color-primary);
}

.webinar-plan-wrapper.webinar-platforms-wrapper .plan-option .webinar-platforms-facebook:checked + .plan-box {
  border: 2px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary);
}

.webinar-plan-wrapper.webinar-platforms-wrapper .plan-option .webinar-platforms-instagram:checked + .plan-box {
  border: 2px solid var(--color-error);
  background: var(--color-primary);
  color: var(--color-error);
}

.form_note_more_btn {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.webinar-plan-wrapper.webinar-options-wrapper {
  grid-template-columns: repeat(2, 1fr);
}

.webinar-plan-wrapper.webinar-options-wrapper .plan-box {
  justify-content: flex-start;
  align-items: flex-start;
}

.webinar-plan-wrapper.webinar-options-wrapper .plan-option .plan-box svg {
  color: var(--color-text-secondary);
}

.webinar-plan-wrapper.webinar-options-wrapper .plan-option input:checked + .plan-box svg {
  color: var(--color-primary);
}

.post_selected_platforms_btn {
  gap: 12px;
}

.post_selected_platforms_btn .selected-platforms-btn {
  flex: 1 0 0;
  max-width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
}

.webinar-promotional-materials {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 24px;
}

.webinar-promotional-materials .webinar-integration {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.webinar-promotional-materials h5 {
  margin-bottom: 8px;
}

.webinar-promotional-materials p {
  margin-bottom: 4px;
}

.webinar-promotional-materials span {
  color: var(--color-text-secondary);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--color-surface-2);
  margin: 8px 8px 0 0;
}

.webinar-promotional-materials .webinar-integration-btn {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  gap: 4px;
  padding: 8px 20px;
}

.webinar-additional-fields .icon.phone-number svg,
.webinar-promotional-materials .webinar-promotional-mediagraphics .webinar-integration-content svg {
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-primary);
}

.webinar-promotional-materials .webinar-promotional-mediagraphics .webinar-integration-btn {
  background: var(--color-primary);
}

.webinar-additional-fields .icon.company-name svg,
.webinar-promotional-materials .webinar-promotional-emailtemplates .webinar-integration-content svg {
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-accent-orange);
}

.webinar-promotional-materials .webinar-promotional-emailtemplates .webinar-integration-btn {
  background: var(--color-accent-orange);
}

.webinar-additional-fields .icon.job-title svg,
.webinar-promotional-materials .webinar-promotional-pagecode .webinar-integration-content svg {
  border-radius: 8px;
  background: var(--color-success-bg);
  color: var(--color-success);
}

.webinar-promotional-materials .webinar-promotional-pagecode .webinar-integration-btn {
  background: var(--color-success);
}

.webinar-additional-fields .icon.country svg,
.webinar-promotional-materials .webinar-promotional-qrcode .webinar-integration-content svg {
  border-radius: 8px;
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.webinar-promotional-materials .webinar-promotional-qrcode .webinar-integration-btn {
  background: var(--color-warning);
}

.webinar-plan-wrapper.webinar-emailtemplate-wrapper .plan-box {
  padding: 0 0 12px;
  background: var(--color-surface);
}

.webinar-plan-wrapper.webinar-emailtemplate-wrapper .plan-box .icon {
  width: 100%;
  height: auto;
  padding: 45px 15px;
  margin-bottom: 4px;
  border-radius: 6px 6px 0 0;
}

.webinar-plan-wrapper.webinar-emailtemplate-wrapper .plan-box .icon.modernbox {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 70.71%);
  color: var(--color-primary);
}

.webinar-plan-wrapper.webinar-emailtemplate-wrapper .plan-box .icon.professionalbox {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-bg) 0.71%);
  color: var(--color-accent-orange);
}

.webinar-plan-wrapper.webinar-emailtemplate-wrapper .plan-box .icon.minimalbox {
  background: linear-gradient(135deg, var(--color-success-bg) 0%, var(--color-success-bg) 70.71%);
  color: var(--color-success);
}

.webinar-plan-wrapper.webinar-emailtemplate-wrapper .plan-box:hover .icon,
.webinar-plan-wrapper.webinar-emailtemplate-wrapper .plan-option input:checked + .plan-box .icon {
  background: var(--color-info-bg);
}

.webinar-plan-wrapper.webinar-emailtemplate-wrapper .plan-box:hover,
.webinar-plan-wrapper.webinar-emailtemplate-wrapper .plan-option input:checked + .plan-box {
  background: var(--color-surface);
}

.podup-webinar-switchschedulesend {
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}

.generate-tracking-btn {
  background: var(--color-warning) !important;
  max-width: none;
  border-color: var(--color-warning) !important;
}

.webinar-baseregistrationURL {
  padding: 25px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-border);
}

.webinar-baseregistrationURL .form-label {
  color: var(--color-text);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  margin-bottom: 18px;
}

.webinar-baseregistrationURL .form-control {
  flex: 1;
}

/* Empty State Styles */

.webinar-empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  padding: 60px 20px;
  text-align: center;
}

.webinar-empty-state-content {
  max-width: 500px;
  width: 100%;
}

.webinar-empty-icon {
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
}

.webinar-empty-icon-circle {
  width: 80px;
  height: 80px;
  border-radius: var(--icon-style-box-border-radius, 12px);
  background: var(--icon-style-box-bg-color, var(--tab-active-bg));
  border: var(--icon-style-box-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: var(--icon-style-box-color);
}

.webinar-empty-icon-circle svg {
  width: 40px;
  height: 40px;
  fill: currentColor !important;
}

.webinar-empty-icon-circle svg path,
.webinar-empty-icon-circle svg circle {
  fill: currentColor !important;
}

.webinar-empty-icon-circle svg path circle,
.webinar-empty-icon-circle svg path path,
.webinar-empty-icon-circle svg circle circle,
.webinar-empty-icon-circle svg circle path {
  fill: currentColor;
}

.webinar-empty-heading {
  color: var(--color-text);
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  margin: 0 0 12px 0;
  padding: 0;
}

.webinar-empty-subtext {
  color: var(--color-text-secondary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  margin: 0 0 32px 0;
  padding: 0;
}

.webinar-schedule-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  border: var(--btn-secondary-border);
}

.webinar-schedule-btn:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--btn-primary-accent-shadow-hover);
}

.webinar-schedule-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 4px;
}

/* Create Webinar Button in Header */

/* Shape only — colours come from the common .cw-btn-secondary class */

.webinar-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 12px;
  white-space: nowrap;
}

.webinar-create-btn:hover {
  transform: translateY(-2px);
}

.webinar-create-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 2px;
}

/* Shape only — style from common .cw-btn-secondary; text uses secondary colour */

.webinar-payment-settings-btn {
  line-height: 20px;
  margin-left: 12px;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-text-secondary) !important;
}

.webinar-payment-settings-btn:hover {
  color: var(--color-text-secondary) !important;
  transform: translateY(-2px);
  text-decoration: none;
}

.webinar-payment-settings-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.webinar-baseregistrationURL .selected-platforms-btn {
  padding: 8px 16px;
  max-width: -moz-max-content;
  max-width: max-content;
  border-radius: 8px;
}

.campaign-specific-links .webinar-integration {
  padding: 16px;
  border-radius: 8px;
}

.campaign-specific-links .webinar-integration-content svg {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  padding: 12px;
}

.campaign-specific-links .webinar-integration-content {
  gap: 12px;
  align-items: center;
}

.campaign-specific-links .webinar-integration h5 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: normal;
}

.campaign-specific-links .webinar-integration p {
  font-size: var(--font-size-sm);
  word-break: break-all;
}

.campaign-specific-links .webinar-connected {
  background: var(--color-bg);
  color: var(--color-accent-orange);
}

.campaign-specific-links .webinar-integration-linkedin .webinar-connected {
  color: var(--color-primary);
  background: var(--color-info-bg);
}

.campaign-specific-links .webinar-integration-twitter .webinar-connected {
  background: var(--color-info-bg);
  color: var(--color-primary);
}

.campaign-specific-links .webinar-integration-setting {
  color: var(--color-accent-orange);
}

.campaign-specific-links .webinar-integration-linkedin .webinar-integration-setting {
  color: var(--color-primary);
}

.campaign-specific-links .webinar-integration-twitter .webinar-integration-setting {
  color: var(--color-primary);
}

.webinar-email-automation {
  margin-bottom: 24px;
  padding: 24px;
}

.webinar-email-automation h3 {
  font-size: calc(var(--font-size-xl) + 2px);
  color: var(--color-text);
}

.webinar-email-automation .webinar-email-automationpoint,
.webinar-email-automation p {
  color: var(--color-text-secondary);
}

.webinar-reminder-emails {
  border-radius: 8px;
  border: 2px solid var(--color-primary);
  background: var(--color-info-bg);
  padding: 24px;
  margin-bottom: 24px;
}

.webinar-reminder-emails .lightblue-icon {
  border-radius: 8px;
  background: var(--color-primary);
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  color: var(--color-surface);
  flex-shrink: 0;
}

.webinar-reminder-emails a {
  color: var(--color-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

.webinar-plan-wrapper.webinar-emailanalytics-wrapper,
.webinar-plan-wrapper.webinar-callaction-wrapper {
  grid-template-columns: repeat(2, 1fr);
}

.webinar-plan-wrapper.webinar-emailanalytics-wrapper .plan-box {
  text-align: left;
  align-items: flex-start;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-medium);
  position: relative;
}

.webinar-options-check .plan-box svg,
.webinar-plan-wrapper.webinar-emailanalytics-wrapper .plan-box svg {
  position: absolute;
  top: 20px;
  right: 20px;
  display: none;
}

.webinar-plan-wrapper.webinar-emailanalytics-wrapper .plan-box h6 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

.webinar-plan-wrapper.webinar-emailanalytics-wrapper .trackopens input:checked + .plan-box,
.webinar-plan-wrapper.webinar-emailanalytics-wrapper .trackopens .plan-box {
  border-radius: 8px;
  border: 1px solid var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 70.71%);
}

.webinar-plan-wrapper.webinar-emailanalytics-wrapper .trackclicks input:checked + .plan-box,
.webinar-plan-wrapper.webinar-emailanalytics-wrapper .trackclicks .plan-box {
  border: 1px solid var(--color-success-border);
  background: linear-gradient(135deg, var(--color-success-bg) 0%, var(--color-success-bg) 70.71%);
}

.webinar-options-check input:checked + .plan-box svg,
.webinar-plan-wrapper.webinar-emailanalytics-wrapper .trackclicks input:checked + .plan-box svg,
.webinar-plan-wrapper.webinar-emailanalytics-wrapper .trackopens input:checked + .plan-box svg {
  display: block;
}

.webinar-best-practice {
  padding: 16px;
}

.webinar-best-practice svg {
  border-radius: 8px;
  background: var(--color-info-bg);
  color: var(--color-primary);
}

.podup-webinar-switchborder {
  grid-template-columns: repeat(1, 1fr);
  gap: 12px;
}

.podup-webinar-switchborder .podup-webinar-switch {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-border);
}

.webinar-border-checkbox .form-check {
  border-radius: 8px;
  border: 1px solid var(--color-text-muted);
  padding: 12px;
  margin-bottom: 8px;
}

.webinar-border-checkbox .form-check .form-check-label {
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
}

.webinar-border-checkbox .form-check .form-check-label img {
  width: 18px;
}

.webinar-calendar {
  margin-bottom: 24px;
}

.webinar-calendar .fc-toolbar-title {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

.webinar-calendar .fc-toolbar-chunk {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.webinar-calendar .fc-toolbar-chunk button.fc-today-button.fc-button:active,
.webinar-calendar .fc-toolbar-chunk button.fc-today-button.fc-button:focus,
.webinar-calendar .fc-toolbar-chunk button.fc-today-button.fc-button {
  border-radius: 8px;
  border: 1px solid var(--color-text-muted) !important;
  background: var(--color-surface) !important;
  padding: 10px 16px;
  color: var(--color-text-secondary) !important;
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  text-transform: capitalize;
  outline: none;
  box-shadow: none !important;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
}

.webinar-calendar .fc-toolbar-chunk .fc-button-group {
  margin: 0 !important;
  gap: 90px;
}

.webinar-calendar .fc-toolbar-chunk .fc-button-group .fc-button {
  border-radius: 8px !important;
  border: 1px solid var(--color-text-muted) !important;
  background: var(--color-surface) !important;
  padding: 0;
  color: var(--color-text-secondary);
  box-shadow: none !important;
  width: 36px;
  height: 36px;
}

.webinar-calendar .fc-daygrid-day-frame {
  padding: 14px;
  padding-bottom: 5px;
}

.webinar-calendar .fc-col-header-cell-cushion {
  color: var(--color-text-secondary);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  text-transform: uppercase;
}

.webinar-calendar th .fc-scrollgrid-sync-inner {
  background: var(--color-border);
  padding: 12px;
}

.webinar-calendar .fc-daygrid-day-top {
  color: var(--color-text);
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  justify-content: center;
}

.webinar-calendar .fc-daygrid-day.fc-day-today {
  background-color: var(--color-primary);
  opacity: 1;
}

.webinar-calendar .fc-bg-event .fc-event-title {
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  margin-top: 45px;
  margin-bottom: 0;
}

.webinar-calendar .fc-bg-event.Webinar {
  background-color: var(--color-primary);
  opacity: 1;
  color: var(--color-surface);
}

.webinar-calendar .fc-bg-event.Holiday {
  background-color: var(--color-error-bg);
  opacity: 1;
  color: var(--color-error);
}

.webinar-calendar .fc-day-today .fc-daygrid-day-number::after {
  content: "Today";
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-regular);
  margin-top: 4px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

.webinar-email-automation .withoutstyle {
  gap: 8px;
  margin-top: 10px;
}

.webinar-email-automation .withoutstyle svg {
  width: auto;
  height: auto;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.webinar-layout-stylebox {
  height: 70px;
}

.webinar-layout-style {
  border-radius: 8px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  padding: 14px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-wrap: wrap;
}

.webinar-layout-style .layout-style {
  border-radius: 4px;
  background: var(--color-border);
  width: 100%;
  height: 8px;
}

.webinar-layout-style .layout-style.active {
  background: var(--color-text-muted);
}

.webinar-layout-style.two-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.webinar-plan-wrapper.webinar-type-wrapper .plan-box:hover .webinar-layout-style,
.webinar-plan-wrapper.webinar-type-wrapper .plan-option input:checked + .plan-box .webinar-layout-style {
  border-color: var(--color-info-border);
}

.webinar-plan-wrapper.webinar-type-wrapper .plan-box:hover .layout-style.active,
.webinar-plan-wrapper.webinar-type-wrapper .plan-option input:checked + .plan-box .layout-style.active {
  background: var(--color-info-border);
}

.webinar-plan-wrapper.webinar-type-wrapper .plan-box:hover .layout-style,
.webinar-plan-wrapper.webinar-type-wrapper .plan-option input:checked + .plan-box .layout-style {
  background: var(--color-info-bg);
}

.webinar-upload-logo {
  margin-bottom: 16px;
  cursor: default;
  padding: 26px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  border: 2px dashed var(--color-text-muted) !important;
}

.webinar-upload-logo .upload-icon {
  margin: 0;
  border-radius: 8px;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.webinar-upload-logo .upload-btn {
  background: var(--color-primary);
  color: var(--color-surface);
  margin-top: 8px;
}

.webinar-color-wrapper {
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.webinar-color-wrapper .plan-option p {
  color: var(--color-text);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  margin: 6px 0 0;
}

.webinar-color-wrapper .plan-box {
  border: 2px solid transparent;
  color: var(--color-surface);
  padding: 26px 10px 10px;
  display: block;
}

.webinar-color-wrapper .plan-box svg {
  opacity: 0;
  transition: 0.3s all;
}

.webinar-color-wrapper .plan-option input:checked + .plan-box svg {
  opacity: 1;
}

.webinar-color-wrapper .plan-box.indigo-color {
  background: linear-gradient(135deg, var(--color-accent-skyblue) 0%, var(--color-accent-orange) 70.71%) !important;
}

.webinar-color-wrapper .plan-box.ocean-color {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 70.71%) !important;
}

.webinar-color-wrapper .plan-box.forest-color {
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-primary) 70.71%) !important;
}

.webinar-color-wrapper .plan-box.sunset-color {
  background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-error) 70.71%) !important;
}

.webinar-color-wrapper .plan-box.rose-color {
  background: linear-gradient(135deg, var(--color-accent-orange) 0%, var(--color-error) 70.71%) !important;
}

.webinar-color-wrapper .plan-box:hover,
.webinar-color-wrapper .plan-option input:checked + .plan-box {
  border-color: var(--color-primary);
  color: var(--color-surface);
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 10px 15px 0 rgba(0, 0, 0, 0.1);
}

.webinar-emailaddress-templates .icon svg {
  display: inline-flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--color-info-bg);
  color: var(--color-primary);
  margin-right: 6px;
  padding: 12px;
}

.webinar-emailaddress-templates .required {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  background: var(--color-text-muted);
  color: var(--color-text);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.webinar-additional-fields {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 24px 0 12px;
  margin: 12px 0 24px;
}

.nav-tabs {
  border-bottom: 0px solid var(--color-border) !important;
}

.webinar-additional-fields select.form-control {
  height: 30px;
  font-size: var(--font-size-sm);
}

/* Webinar Left Sidebar CSS End */

/* Webinar Protips CSS Start */

.podup-webinar-protips {
  position: sticky;
  top: 70px;
}

.webinar-protips-inner {
  border: 1px solid var(--color-info-border);
  background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-bg) 100%);
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.webinar-protips-inner .webinar-icon {
  margin: 0 12px 0 0;
  display: inline-flex;
  justify-content: center;
  background: linear-gradient(95.37deg, var(--color-success) 3.96%, var(--color-success) 100%);
  color: var(--color-surface);
  width: 40px;
  height: 40px;
}

.webinar-protips-inner h3 {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--font-size-xl) + 2px);
  line-height: normal;
  margin: 0;
  padding: 0;
}

.webinar-protips-inner .webinar-protips-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-success-bg);
  color: var(--color-success);
  padding: 4px;
}

.webinar-protips-inner > .webinar-protips-list:nth-of-type(4n + 1) .webinar-protips-icon {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.webinar-protips-inner > .webinar-protips-list:nth-of-type(4n + 2) .webinar-protips-icon {
  background: var(--color-primary);
  color: var(--color-primary);
}

.webinar-protips-inner > .webinar-protips-list:nth-of-type(4n + 3) .webinar-protips-icon {
  background: var(--color-bg);
  color: var(--color-accent-orange);
}

.webinar-protips-inner > .webinar-protips-list:nth-of-type(4n) .webinar-protips-icon {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.webinar-protips-inner h4 {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  line-height: normal;
  margin: 0 0 4px;
  padding: 0;
}

.webinar-protips-inner p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: normal;
  margin: 0;
  padding: 0;
}

.webinar-protips-inner .webinar-protips-list {
  background: var(--color-surface);
  border: 1px solid var(--color-info-bg);
  padding: 16px;
  border-radius: 8px;
  margin: 16px 0 0;
  display: flex;
  gap: 12px;
}

.webinar-quick-setup-inner {
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 24px 30px 50px;
  text-align: center;
}

.webinar-quick-setup-inner .webinar-icon {
  background: linear-gradient(90deg, var(--color-warning) 0%, var(--color-error) 100%);
  color: var(--color-surface);
  width: 64px;
  height: 64px;
  margin: 0 auto 6px;
}

.webinar-quick-setup-inner h3 {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--font-size-xl) + 2px);
  line-height: normal;
  margin: 0;
  padding: 0;
}

.webinar-quick-setup-inner p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: normal;
  margin: 0;
  padding: 0;
}

.webinar-quick-setup-inner .quick-setup-list {
  display: grid;
  text-align: left;
  margin-top: 35px;
  gap: 12px 35px;
  grid-template-columns: repeat(2, 1fr);
}

.webinar-email-automationpoint,
.webinar-quick-setup-inner .quick-setup-point {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  padding-left: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M6 12C9.31149 12 12 9.31149 12 6C12 2.68851 9.31149 0 6 0C2.68851 0 0 2.68851 0 6C0 9.31149 2.68851 12 6 12ZM8.64844 4.89844L5.64844 7.89844C5.42812 8.11875 5.07188 8.11875 4.85391 7.89844L3.35391 6.39844C3.13359 6.17812 3.13359 5.82188 3.35391 5.60391C3.57188 5.38359 3.93047 5.38359 4.14844 5.60391L5.25 6.70547L7.85156 4.10156C8.07187 3.88125 8.42812 3.88125 8.64609 4.10156C8.86641 4.32188 8.86641 4.67812 8.64609 4.89609L8.64844 4.89844Z' fill='%2322C55E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: top 2px left;
}

button.btn.btn-sm.text-danger.attendees-remove-btns {
  padding: 0;
  border: 0;
  width: 30px;
  height: 30px;
  background: var(--color-error-bg);
  border-radius: 8px;
}

button.btn.btn-sm.text-danger.attendees-remove-btns svg {
  width: 18px;
  height: 18px;
}

button.btn.btn-sm.text-danger.attendees-remove-btns path {
  fill: var(--color-error);
}

/* Webinar Protips CSS End */

@media (max-width: 1460.98px) {
  .webinar-plan-wrapper.webinar-type-wrapper.webinar-platforms-wrapper .plan-box {
    padding: 8px 5px;
    gap: 4px;
  }
}

@media (max-width: 1199.98px) {
  .webinar-protips-inner {
    padding: 14px;
  }

  .webinar-quick-setup-inner {
    padding: 20px 14px;
  }

  .webinar-quick-setup-inner .quick-setup-list {
    margin-top: 25px;
    gap: 12px;
    grid-template-columns: repeat(1, 1fr);
  }

  .webinar-plan-wrapper.webinar-type-wrapper .plan-box {
    padding: 14px 12px;
    font-size: var(--font-size-md);
  }

  .webinar-speakers-action {
    justify-content: flex-start;
    margin-bottom: 15px;
  }

  .webinar-speakers-list .webinar-speakers-access,
  .webinar-speakers-list .webinar-speakers-social {
    gap: 10px;
  }

  .webinar-speakers-dropdown .webinar-dropdown-list {
    grid-template-columns: repeat(1, 1fr);
  }

  .webinar-plan-wrapper.webinar-emailtemplate-wrapper .plan-box {
    padding: 0 0 10px;
  }

  .webinar-plan-wrapper.webinar-type-wrapper.webinar-platforms-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991.98px) {
  .webinar-right-btn {
    justify-content: flex-start;
    padding-top: 15px;
  }

  .webinar-protips-inner {
    margin-top: 24px;
  }

  .webinar-plan-wrapper.webinar-type-wrapper.webinar-lavel-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }

  .webinar-plan-wrapper.webinar-type-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }

  .webinar-filter-sort {
    justify-content: flex-start;
    margin-bottom: 25px;
  }

  .webinar-resend-btn {
    gap: 8px;
    padding: 12px;
  }

  .webinar-speakers-list .webinar-speakers-badge {
    display: block;
    margin: 5px 0 0;
  }

  .webinar-speakers-list .webinar-speakers-tags span {
    margin-right: 6px;
    padding: 4px 10px;
    margin-top: 6px;
  }

  .webinar-chatratelimiting {
    gap: 10px;
  }

  .webinar-precreated-btnlist {
    justify-content: flex-start;
    margin-top: 10px;
  }
}

@media (max-width: 767.98px) {
  .webinar-plan-wrapper.webinar-type-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }

  .webinar-plan-wrapper.webinar-type-wrapper.webinar-audience-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .webinar-plan-wrapper .plan-box {
    padding: 12px 20px;
    font-size: var(--font-size-md);
  }

  .color-row .form-control {
    flex: auto;
  }

  .podup-webinar-create .create_ep_section h3 {
    font-size: calc(var(--font-size-xl) + 2px);
  }

  .podup-webinar-switch {
    gap: 6px;
    padding: 18px 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .webinar-upload-box {
    padding: 18px;
  }

  .webinar-icon {
    width: 40px;
    height: 40px;
  }

  .webinar-icon svg {
    width: 20px;
  }

  .webinar-upload-box .upload-icon {
    width: 50px;
    height: 50px;
  }

  .webinar-upload-box .upload-icon svg {
    width: 24px;
  }

  .webinar-quick-setup-inner .webinar-icon {
    width: 50px;
    height: 50px;
  }

  .podup-webinar-protips {
    position: initial;
  }

  .webinar-speakers-list .webinar-speakers-name {
    flex-direction: column;
  }

  .webinar-speakers-list .webinar-speakers-badge span {
    margin: 0 6px 0 0;
  }

  .webinar-speakers-list {
    padding: 16px;
  }

  .webinar-speakers-action .webinar-speakers-btn {
    width: 34px;
    height: 34px;
  }

  .webinar-resend-btn {
    padding: 8px 10px;
  }

  .webinar-email-preview {
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }

  .webinar-speakers-dropdown .webinar-dropdown-top svg {
    width: 36px;
    height: 36px;
    padding: 6px 9px;
  }

  .podup-webinar-switchtwo {
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }

  .webinar-precreated-polls h6 {
    margin-bottom: 12px;
  }

  .autoresponse-btn {
    font-size: var(--font-size-md);
    padding: 12px;
    gap: 6px;
  }

  .webinar-chatratelimiting select {
    max-width: 100px;
    margin-left: 0;
  }

  .webinar-precreated-lnner .webinar-precreated-iconlist {
    flex-direction: column;
  }

  .webinar-integration .webinar-integration-followers,
  .webinar-promotional-materials {
    grid-template-columns: repeat(1, 1fr);
  }

  .webinar-integration .webinar-integration-connected {
    justify-content: flex-start;
  }

  .webinar-integration .webinar-integration-content {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
    align-items: flex-start;
  }

  .webinar-integration {
    padding: 16px;
  }

  .webinar-plan-wrapper.webinar-platforms-wrapper .plan-box {
    padding: 10px;
    font-size: var(--font-size-sm);
    gap: 6px;
  }

  .post_selected_platforms_btn {
    flex-direction: column;
  }

  .webinar-plan-wrapper.webinar-emailtemplate-wrapper .plan-box .icon {
    padding: 25px 16px;
  }

  .webinar-baseregistrationURL {
    padding: 16px;
  }

  .webinar-baseregistrationURL .form-label {
    font-size: var(--font-size-md);
    margin-bottom: 12px;
  }

  .webinar-baseregistrationURL .d-flex {
    flex-direction: column;
  }

  .webinar-baseregistrationURL .form-control {
    flex: auto;
  }

  .webinar-baseregistrationURL .selected-platforms-btn {
    max-width: 100%;
  }

  .webinar-reminder-emails {
    padding: 16px;
  }

  .selected-platforms-btn {
    font-size: var(--font-size-md);
  }

  .autoresponse-edit {
    right: 10px;
    top: 10px;
  }

  .webinar-calendar .fc-toolbar-title {
    font-size: var(--font-size-md);
  }

  .webinar-calendar .fc-toolbar-chunk .fc-button-group {
    gap: 60px;
  }

  .webinar-calendar .fc-toolbar-chunk button.fc-today-button.fc-button {
    padding: 8px;
  }

  .webinar-calendar .fc-toolbar-chunk .fc-button-group .fc-button {
    width: 30px;
    height: 30px;
  }

  .webinar-calendar th .fc-scrollgrid-sync-inner {
    padding: 10px 0;
  }

  .webinar-calendar .fc-daygrid-day-frame {
    padding: 2px;
  }

  .webinar-color-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* invite attendees css start */

.content-wrapper .attendees-heading h2 {
  color: var(--textShade1);
  font-size: var(--font-size-30) !important;
  font-weight: var(--font-weight-medium) !important;
}

.attendees-heading p {
  font-size: var(--font-size-lg);
  line-height: 28px;
  font-weight: 300;
  max-width: 640px;
  margin-top: 6px;
}

/* The next section is a .whitecardbox with its own 32px top padding, so the
   card needs no bottom margin of its own. */

.webinar-listing-section.attendees-section {
  margin: 0px;
}

.webinar-attendees-column {
  padding: 12px 0px;
}

.webinar-listing-section.attendees-section .webinar-listing-timedate ul li {
  font-weight: var(--font-weight-regular);
}

.webinar-listing-section.attendees-section .webinar-listing-img:before {
  display: none;
}

.webinar-listing-section.attendees-section .webinar-listing-img:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  pointer-events: none;
}

.webinar-listing-section.attendees-section .webinar-listing-img {
  height: 100%;
  aspect-ratio: 16/9;
}

.webinar-listing-section.attendees-section .webinar-listing-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  -o-object-position: center;
     object-position: center;
}

/* Override global max-width (1200px) specifically for webinar pages */

@media (min-width: 1460px) {
  .app-content.content .content-body.webinar-page-content {
    max-width: 80% !important;
  }
}

.invitation-attendees-section .row {
  margin: 0px;
}

.whitecardbox.invitation-attendees-section .create_ep_section h3 {
  font-size: calc(var(--font-size-xl) + 2px);
  font-weight: var(--font-weight-medium);
}

.whitecardbox.invitation-attendees-img-upload .webinar-switch-content {
  margin-bottom: 12px;
}

.whitecardbox.invitation-attendees-img-upload {
  box-shadow: none;
  border: 1px solid var(--color-border);
}

.whitecardbox.invitation-attendees-img-upload .webinar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--icon-style-box-bg-color) !important;
  border: var(--icon-style-box-border) !important;
  border-radius: var(--icon-style-box-border-radius) !important;
  color: var(--icon-style-box-color) !important;
  flex-shrink: 0;
}

.whitecardbox.invitation-attendees-img-upload .webinar-icon svg,
.whitecardbox.invitation-attendees-img-upload .webinar-icon svg path {
  fill: var(--icon-style-box-color) !important;
  color: var(--icon-style-box-color) !important;
  width: 20px;
  height: 20px;
}

.whitecardbox.invitation-attendees-img-upload.share-registration .webinar-icon svg {
  width: 20px;
  height: 20px;
}

.whitecardbox.invitation-attendees-img-upload .form-group h5 {
  margin: 0;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: 24px;
  color: var(--color-text);
}

.whitecardbox.invitation-attendees-img-upload .form-group p {
  margin: 0;
  color: var(--color-text-muted);
}

.whitecardbox.invitation-attendees-img-upload .webinar-upload-box {
  border: 2px dashed var(--upload-box-border-color) !important;
  border-radius: 20px;
  padding: 20px 24px;
  background: var(--upload-box-bg);
  color: var(--upload-box-text-color);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  min-height: 170px;
  height: 100%;
}

.whitecardbox.invitation-attendees-img-upload .webinar-upload-box .upload-icon svg {
  width: 30px;
  height: 30px;
}

.whitecardbox.invitation-attendees-img-upload .webinar-upload-box .upload-icon {
  display: flex;
  width: 64px;
  height: 64px;
  min-height: 64px;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  background: var(--upload-box-icon-bg-color);
  border: 1px solid var(--upload-box-icon-border-color);
  color: var(--upload-box-icon-text-color);
  margin: 0 auto;
}

.whitecardbox.invitation-attendees-img-upload .webinar-upload-box .upload-icon svg path {
  fill: currentColor;
}

.whitecardbox.invitation-attendees-img-upload .webinar-upload-box .upload-text p {
  color: var(--upload-box-heading-color);
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  margin: 0 0 4px;
}

.whitecardbox.invitation-attendees-img-upload .webinar-upload-box .upload-text small {
  color: var(--color-text-muted);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: normal;
}

.webinar-attendee-download-file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.webinar-attendee-download-file a {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--wizard-link) !important;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.webinar-attendee-download-file a:hover {
  color: var(--wizard-link-hover) !important;
}

.webinar-attendee-download-file a svg {
  margin-right: 4px;
  width: 16px;
  height: 16px;
}

.webinar-attendee-download-file a svg path {
  fill: currentColor;
}

.webinar-attendee-download-file span {
  color: var(--color-text-muted);
  line-height: 20px;
  font-weight: 300;
}

.whitecardbox.invitation-attendees-img-upload.email-invitations .webinar-icon svg {
  width: 20px;
  height: 20px;
}

.full-width.email-invitations-address label.field-label {
  line-height: 20px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  margin: 0px 0px 8px 0px;
}

.full-width.email-invitations-address textarea.email-area.full-width,
.full-width.email-invitations-address input.email-area.full-width {
  border: var(--input-border);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: var(--font-size-md);
  font-weight: 300;
  line-height: 20px;
  color: var(--input-color);
  background: var(--input-bg);
  min-height: 106px;
}

.full-width.email-invitations-address input.email-area.full-width {
  min-height: auto;
  height: auto;
}

.full-width.email-invitations-address textarea:focus,
.full-width.email-invitations-address input.email-area.full-width:focus {
  outline: 0;
}

.full-width.email-invitations-address .field-hint {
  margin-top: 6px;
  font-size: var(--font-size-md);
  line-height: 20px;
  color: var(--color-text-muted);
}

.full-width.email-invitations-address textarea::-moz-placeholder, .full-width.email-invitations-address input.email-area.full-width::-moz-placeholder {
  color: var(--input-placeholder);
}

.full-width.email-invitations-address textarea::placeholder,
.full-width.email-invitations-address input.email-area.full-width::placeholder {
  color: var(--input-placeholder);
}

.full-width.email-invitations-address textarea.email-area.full-width.personal-message {
  min-height: 86px;
}

.whitecardbox.invitation-attendees-img-upload .email-invitations-submit-btn {
  margin-top: 16px;
  width: -moz-fit-content;
  width: fit-content;
}

.whitecardbox.invitation-attendees-img-upload .email-invitations-submit-btn button.w3nbtn.orangebtn span svg {
  width: 16px;
}

.whitecardbox.invitation-attendees-img-upload .email-invitations-submit-btn button.w3nbtn.orangebtn span svg path {
  fill: var(--color-surface);
}

.whitecardbox.invitation-attendees-img-upload.email-invitations .webinar-icon {
  background: var(--icon-bg-color);
  border-radius: var(--radius-md);
}

.whitecardbox.invitation-attendees-img-upload.share-registration .webinar-icon {
  background: var(--color-success-bg);
  border-radius: 8px;
}

.whitecardbox.invitation-attendees-img-upload.share-registration .webinar-icon svg path {
  fill: var(--color-success);
}

/* One unified pill: input + copy icon share a single border/height
   (matches the Social Publish share row). */

.invitation-attendees-img-upload .link-row,
.cw-stripe-modal .link-row,
.webinar-stripe-settings-page .link-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  background: var(--color-surface);
  overflow: hidden;
}

.invitation-attendees-img-upload .link-row input.webhook-url-input,
.invitation-attendees-img-upload .link-row input.webhook-url-input[readonly],
.cw-stripe-modal .link-row input.webhook-url-input,
.cw-stripe-modal .link-row input.webhook-url-input[readonly],
.webinar-stripe-settings-page .link-row input.webhook-url-input,
.webinar-stripe-settings-page .link-row input.webhook-url-input[readonly] {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  border-radius: 0;
  padding: 11px 16px;
  height: auto;
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  box-shadow: none !important;
  outline: none !important;
}

.invitation-attendees-img-upload .link-row .webhook-copy-btn,
.cw-stripe-modal .link-row .webhook-copy-btn,
.webinar-stripe-settings-page .link-row .webhook-copy-btn {
  flex-shrink: 0;
  width: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.invitation-attendees-img-upload .link-row .webhook-copy-btn svg,
.cw-stripe-modal .link-row .webhook-copy-btn svg,
.webinar-stripe-settings-page .link-row .webhook-copy-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.invitation-attendees-img-upload .link-row .webhook-copy-btn:hover,
.cw-stripe-modal .link-row .webhook-copy-btn:hover,
.webinar-stripe-settings-page .link-row .webhook-copy-btn:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.invitation-attendees-img-upload .share-registration-social-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* Style comes from the common .cw-btn-secondary class */

.invitation-attendees-img-upload .share-registration-social-row .share-registration-btn-social svg {
  width: 16px;
  height: 16px;
}

.invitation-attendees-img-upload .share-registration-social-row .share-registration-btn-social.linkedin {
  background: var(--color-primary);
}

.invitation-attendees-img-upload .share-registration-social-row .share-registration-btn-social.twitter {
  background: var(--color-primary);
}

.attendees-card {
  background: var(--color-surface) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  border: 0px solid var(--color-info-bg) !important;
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.05) !important;
}

.attendees-card:not(:last-child) {
  margin-bottom: 32px;
}

.attendees-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-text) !important;
  margin-bottom: 16px !important;
  line-height: 28px;
}

.attendees-card .attendees-wraper {
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  padding: 0px !important;
  background: var(--color-surface) !important;
}

.attendees-subject-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  border-radius: 8px 8px 0px 0px;
  padding: 10px 10px;
  margin-bottom: 0px;
}

.attendees-subject-row span {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  color: var(--color-text-muted);
}

.attendees-subject-row span.attendees-subject-label {
  text-wrap-mode: nowrap;
  color: var(--color-text) !important;
}

.attendees-subject-row span.attendees-subject-value {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.attendees-email-body {
  padding: 16px;
  margin-bottom: 0;
}

.attendees-email-body p {
  font-size: var(--font-size-md);
  line-height: 20px;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
  font-weight: var(--font-weight-regular);
}

.attendees-email-body .attendees-email-text {
  color: var(--color-text-secondary);
}

.attendees-event-box {
  background: var(--color-surface-2) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
}

.attendees-event-box-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 20px;
}

.attendees-event-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--color-text-secondary);
}

.attendees-event-detail-row:last-child {
  margin-bottom: 0;
}

.attendees-event-icon svg {
  width: 18px;
  height: 18px;
}

.attendees-event-icon svg path {
  fill: var(--color-text-muted);
}

.attendees-event-detail-text {
  font-size: var(--font-size-sm);
  line-height: 16px;
  color: var(--color-text-secondary);
}

.attendees-btn-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0px;
  background: var(--btn-secondary-bg-white);
  border: var(--btn-secondary-border);
  border-radius: 40px;
  padding: 9px 16px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--btn-secondary-dark-color);
  cursor: pointer;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, transform 0.1s, box-shadow 0.2s;
}

.attendees-btn-register:hover {
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
  box-shadow: var(--btn-secondary-dark-box-shadow) !important;
  transform: translateY(-2px);
}

.attendees-btn-register:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
  box-shadow: none !important;
  transform: none;
}

.attendees-email-footer {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 16px;
}

.attendees-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 0 10px 0px;
}

.attendees-stat-left {
  display: flex;
  align-items: center;
  gap: 9px;
}

.attendees-stat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.attendees-stat-dot.attendees-green {
  background: var(--color-success);
}

.attendees-stat-dot.attendees-blue {
  background: var(--color-accent-skyblue);
}

.attendees-stat-row span {
  font-size: var(--font-size-md);
  line-height: 20px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}

.podup-webinar-protips .attendees-stat-row span.attendees-stat-value {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.attendees-conversion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0px 0px;
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
}

.attendees-conversion-row span {
  font-size: var(--font-size-md);
  line-height: 20px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.attendees-conversion-row span.attendees-conversion-value {
  font-weight: var(--font-weight-medium);
  color: var(--color-success);
}

.attendees-invite-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--color-surface-2);
}

.attendees-avatar-placeholder {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attendees-avatar-placeholder img {
  width: 100%;
}

.attendees-invite-info {
  flex: 1;
}

.attendees-invite-name {
  font-size: var(--font-size-md);
  line-height: 20px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0;
}

.attendees-invite-email {
  font-size: 13px;
  line-height: 16px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.attendees-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.attendees-status-dot.attendees-online {
  background: var(--color-success);
}

.attendees-status-dot.attendees-pending {
  background: var(--color-primary);
}

.attendees-status-dot.attendees-inactive {
  background: var(--color-text-muted);
}

.attendees-status-ancer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.attendees-view-all {
  line-height: 20px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--wizard-link) !important;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 0px;
}

.attendees-view-all:hover {
  color: var(--wizard-link) !important;
}

/* invite attendees css end */

@media (max-width: 767.98px) {
  /* attendees page responsive */

  .content-wrapper .page_titlemn.attendees-heading {
    flex-wrap: wrap;
  }

  .whitecardbox.invitation-attendees-section {
    margin-bottom: 20px;
  }
}

/* attendee list */

.attendees-heading nav ol.breadcrumb {
  gap: 4px;
}

.attendees-heading nav ol.breadcrumb li.breadcrumb-item:before {
  display: none;
}

.attendees-heading nav ol.breadcrumb li.breadcrumb-item a {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  line-height: 17px;
}

.attendees-heading nav ol.breadcrumb svg {
  width: 15px;
  height: 15px;
}

.attendees-heading nav ol.breadcrumb svg path {
  fill: var(--color-text-muted);
}

.attendees-heading nav ol.breadcrumb li.breadcrumb-item.active {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.attendees-send-btn a.w3nbtn {
  background: transparent;
  color: var(--color-text-secondary);
}

.attendees-send-btn a.w3nbtn svg path {
  fill: var(--color-text-secondary);
}

.attendees-send-btn .w3nbtn {
  height: unset;
  line-height: 24px;
  padding: 11px 27px;
}

.attendees-send-btn .w3nbtn {
  gap: 8px;
}

.attendees-send-btn button.w3nbtn svg path {
  fill: var(--color-surface);
}

.invitation-attendees-table-section .table-header {
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.invitation-attendees-table-section .table-header h2 {
  line-height: 28px;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.invitation-attendees-table-section .table-actions {
  gap: 12px;
}

.invitation-attendees-table-section .search-box {
  position: relative;
  border: 1px solid var(--color-surface-2);
  background-color: var(--color-surface-2);
  align-items: center;
  padding: 0px 14px;
  gap: 8px;
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  min-width: 180px;
  max-width: 260px;
}

.invitation-attendees-table-section .search-box svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.invitation-attendees-table-section .search-box svg path {
  fill: var(--color-text-muted);
}

.invitation-attendees-table-section .search-box input {
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: var(--font-size-md);
  color: var(--color-text);
  line-height: 20px;
  width: 100%;
  outline: none !important;
}

.invitation-attendees-table-section .search-box input:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.invitation-attendees-table-section .search-box input::-moz-placeholder {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.invitation-attendees-table-section .search-box input::placeholder {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.invitation-attendees-table-section .table-actions .select-box {
  border: 1px solid var(--color-surface-2);
  background-color: var(--color-surface-2);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  min-width: 110px;
}

.invitation-attendees-table-section .table-actions .select-box select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  padding: 4px 34px 4px 14px;
  width: 100%;
  font-size: var(--font-size-md);
  color: var(--color-text);
  background: transparent;
  cursor: pointer;
  outline: none !important;
}

.invitation-attendees-table-section .table-actions .select-box select option {
  color: var(--color-text);
  background: var(--color-surface);
}

/* Kill the browser's blue highlight on the selected/hovered option */

.invitation-attendees-table-section .table-actions .select-box select option:checked,
.invitation-attendees-table-section .table-actions .select-box select option:hover,
.invitation-attendees-table-section .table-actions .select-box select option:focus {
  color: var(--color-text);
  background: var(--color-surface-2);
  box-shadow: 0 0 10px 100px var(--color-surface-2) inset;
}

.invitation-attendees-table-section .table-actions .select-box .custom-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text);
  display: flex;
  align-items: center;
}

.invitation-attendees-table-section .table-actions .select-box .custom-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.invitation-attendees-table-section .table-actions .select-box select:focus {
  outline: none;
  box-shadow: none;
}

.invitation-attendees-table-section .table-container .table-responsive {
  overflow-x: auto;
  min-height: auto;
}

.invitation-attendees-table-section .table-container .table-responsive table {
  width: 100%;
  border-collapse: collapse;
  text-wrap-mode: nowrap;
}

.invitation-attendees-table-section .table-container .table-responsive table th,
.invitation-attendees-table-section .table-container .table-responsive table td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  line-height: 17px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.invitation-attendees-table-section .table-container .table-responsive table td.attendee {
  display: flex;
  align-items: center;
  gap: 12px;
}

.invitation-attendees-table-section .table-container .table-responsive table td.attendee .avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.attendee img {
  width: 100%;
  height: 100%;
}

.invitation-attendees-table-section .table-container .table-responsive table td.attendee div strong {
  font-size: var(--font-size-md);
  color: var(--color-text);
  /* line-height: 20px; */
  font-weight: var(--font-weight-medium);
}

.invitation-attendees-table-section .table-container .table-responsive table td.attendee div p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 16px;
}

.invitation-attendees-table-section .table-container .table-responsive table td {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: 20px;
  font-weight: var(--font-weight-regular);
}

.invitation-attendees-table-section .table-container .table-responsive table td:last-child {
  min-width: 116px;
}

.invitation-attendees-table-section .table-container .table-responsive table td span.badge {
  padding: 6px 12px 6px 22px;
  border-radius: 30px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 15px;
  position: relative;
  background: none;
}

.invitation-attendees-table-section .table-container .table-responsive table td span.badge.green {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.invitation-attendees-table-section .table-container .table-responsive table td span.badge:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 10px;
}

.invitation-attendees-table-section .table-container .table-responsive table td span.badge.green:before {
  background: var(--color-success);
}

.invitation-attendees-table-section .table-container .table-responsive table td span.badge.yellow {
  background: var(--color-warning-bg);
  color: var(--color-warning) !important;
}

.invitation-attendees-table-section .table-container .table-responsive table td span.badge.yellow:before {
  background: var(--color-primary);
}

.invitation-attendees-table-section .table-container .table-responsive table td span.badge.gray {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
}

.invitation-attendees-table-section .table-container .table-responsive table td span.badge.gray:before {
  background: var(--color-text-muted);
}

.invitation-attendees-table-section .table-container .table-responsive table td .actions {
  display: flex;
  gap: 10px;
}

.invitation-attendees-table-section .table-container .table-responsive table td .actions .act-tooltip {
  position: relative;
}

.invitation-attendees-table-section .table-container .table-responsive table td .actions .act-tooltip svg {
  width: 18px;
  height: 18px;
}

.invitation-attendees-table-section .table-container .table-responsive table td .actions .act-tooltip svg path {
  fill: var(--color-text-muted);
}

.invitation-attendees-table-section .table-container .table-responsive table td .actions .act-tooltip:hover svg path {
  fill: var(--color-surface);
}

.invitation-attendees-table-section .table-container .table-responsive table td .actions .act-tooltip .act-tooltip-text {
  position: absolute;
  left: -8px;
  top: -26px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.8);
  padding: 2px 7px;
  color: var(--color-surface);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  bottom: auto;
}

.invitation-attendees-table-section .table-container .table-responsive table td .actions .act-tooltip:hover .act-tooltip-text {
  opacity: 1;
}

.invitation-attendees-table-section .table-container .pagination {
  display: flex;
  justify-content: space-between !important;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.invitation-attendees-table-section .table-container .pagination .pages {
  display: flex;
  gap: 6px;
  align-items: center;
}

.invitation-attendees-table-section .table-container .pagination .pages button {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  background: white;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: normal;
}

.invitation-attendees-table-section .table-container .pagination .pages button.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.invitation-attendees-table-section .table-container .pagination .pages button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  th:nth-child(3),
  td:nth-child(3) {
    display: none;
  }

  .invite-attendees-columns {
    flex-wrap: wrap;
  }

  .invitation-attendees-table-section .table-actions {
    flex-wrap: wrap;
  }

  .invitation-attendees-table-section .table-container .pagination .pages {
    flex-wrap: wrap;
  }

  .invitation-attendees-table-section .search-box {
    width: 100%;
  }
}

.attendees-stat-dot.attendees-yellow {
  background: var(--color-primary);
}

.attendees-stat-dot.attendees-gray {
  background: var(--color-text-muted);
}

.attendees-conversion-row span.attendees-conversion-value.value-sky {
  color: var(--color-primary);
}

.attendees-invite-row.attendees-send-invite-row {
  background: none;
  padding-top: 0;
}

.webinar-listing-section .webinar-listing-btn .hamburgerdotswrap {
  width: -moz-fit-content;
  width: fit-content;
}

.webinar-listing-section .webinar-listing-btn .hamburgerdotswrap button.dropdown-toggle {
  width: 100%;
  background: var(--color-surface-2);
  height: 42px;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  gap: 6px;
}

.attendees-send-btn button.w3nbtn.whtborbtn svg {
  position: relative;
  top: -2px;
}

.attendees-send-btn button.w3nbtn.whtborbtn svg path {
  fill: var(--color-text-secondary);
}

.webinar-listing-section .webinar-listing-btn > .webinar-resend-btn svg {
  min-width: 14px;
}

.webinar-listing-section .webinar-listing-btn > .webinar-resend-btn {
  background: var(--btn-secondary-bg-white) !important;
  box-shadow: none !important;
  color: var(--btn-secondary-dark-color) !important;
  border: 1px solid var(--color-border) !important;
}

/* Table Container */

.invitation-attendees-table-section {
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Table Responsive Fix - Remove default overflow */

.webinar-custom-table.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}

/* Modern Table Styling */

.webinar-custom-table.table-responsive table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
  font-size: 13px;
  line-height: 1.6;
}

/* Table Header */

.webinar-custom-table.table-responsive thead {
  background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-surface-2) 100%);
  border-bottom: 2px solid var(--color-border);
}

.webinar-custom-table.table-responsive thead tr {
  height: 56px;
}

.webinar-custom-table.table-responsive thead th {
  padding: 14px 16px;
  text-align: left;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  vertical-align: middle;
  background-color: transparent;
}

.webinar-custom-table.table-responsive thead th:first-child {
  width: 48px;
  padding-left: 20px;
}

.webinar-custom-table.table-responsive thead th:last-child {
  text-align: center;
  width: 100px;
}

/* Table Body Rows */

.webinar-custom-table.table-responsive tbody tr {
  height: 60px;
  border-bottom: 1px solid var(--color-surface-2);
}

.webinar-custom-table.table-responsive tbody tr:last-child {
  border-bottom: none;
}

/* Table Data Cells */

.webinar-custom-table.table-responsive tbody td {
  padding: 14px 16px;
  color: var(--color-text-secondary);
  vertical-align: middle;
  font-weight: var(--font-weight-regular);
}

.webinar-custom-table.table-responsive tbody td:first-child {
  padding-left: 20px;
  width: 48px;
}

.webinar-custom-table.table-responsive tbody td:last-child {
  padding-right: 20px;
  text-align: center;
}

/* Attendee Cell - with Avatar */

.webinar-custom-table.table-responsive td.attendee {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.webinar-custom-table.table-responsive td.attendee .avatar-img {
  flex-shrink: 0;
}

.webinar-custom-table.table-responsive td.attendee .bg-secondary {
  background: linear-gradient(135deg, var(--color-accent-skyblue) 0%, var(--color-accent-orange) 100%) !important;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.webinar-custom-table.table-responsive td.attendee > div:last-child {
  flex: 1;
  min-width: 0;
}

.webinar-custom-table.table-responsive td.attendee strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--font-weight-medium);
  color: var(--color-border);
  margin: 0 0 4px 0;
}

.webinar-custom-table.table-responsive td.attendee p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge Styling */

.webinar-custom-table.table-responsive .badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-transform: capitalize;
}

.webinar-custom-table.table-responsive .badge.green {
  background-color: var(--color-success-bg);
  color: var(--color-primary);
}

.webinar-custom-table.table-responsive .badge.yellow {
  background-color: var(--color-primary);
  color: var(--color-warning);
}

.webinar-custom-table.table-responsive .badge.gray {
  background-color: var(--color-surface-2);
  color: var(--color-text-secondary);
}

/* Checkbox inherits the shared square style from _FormControls.scss */

/* Actions Cell */

.webinar-custom-table.table-responsive .actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.webinar-custom-table.table-responsive .act-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: var(--color-surface-2);
  transition: all 0.25s ease;
  cursor: pointer;
}

.webinar-custom-table.table-responsive .act-tooltip:hover {
  background-color: var(--color-primary);
}

.webinar-custom-table.table-responsive .act-tooltip svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  transition: color 0.25s ease;
}

.webinar-custom-table.table-responsive .act-tooltip:hover svg {
  color: var(--color-surface);
}

.webinar-custom-table.table-responsive .act-tooltip-text {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-border);
  color: var(--color-surface);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 10;
}

.webinar-custom-table.table-responsive .act-tooltip:hover .act-tooltip-text {
  opacity: 1;
}

/* Opacity on Loading */

.webinar-custom-table.table-responsive table.opacity-50 {
  opacity: 0.6;
  pointer-events: none;
}

/* Empty State */

.webinar-custom-table.table-responsive tbody tr td[colspan] {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  padding: 40px 20px !important;
}

/* Pagination Styling */

.glpagination {
  --pagination-size: 40px;
  --pagination-radius: 10px;
  --pagination-gap: 8px;
  --pagination-bg: var(--pagination-bgcolor-new);
  --pagination-color: var(--pagination-textcolor-new);
  --pagination-border: 1px solid var(--pagination-bordercolor-new);
  --pagination-hover-border: var(--pagination-hover-border);
  --pagination-hover-color: var(--pagination-textcolor-new);
  --pagination-active-bg: #f0ede6;
  --pagination-active-color: #0f0f0f;
  --pagination-disabled-color: var(--color-text-muted);
  --pagination-nav-bg: transparent;
  --pagination-nav-color: var(--color-text-secondary);
  --pagination-nav-hover-color: var(--color-text);
  --pagination-prev-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M6 1L1 6L6 11' stroke='%23c8c4bc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pagination-next-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M1 1L6 6L1 11' stroke='%23c8c4bc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  margin-top: 24px;
  padding-top: 20px;
}

.glpagination .pagination {
  display: flex;
  gap: var(--pagination-gap);
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

html body .glpagination .pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pagination-radius);
  border: var(--pagination-border) !important;
  background: var(--pagination-bg);
  color: var(--pagination-color);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  transition: all 0.25s ease;
  text-decoration: none;
  cursor: pointer;
}

.glpagination .pagination .page-item.prev-item .page-link,
.glpagination .pagination .page-item.next-item .page-link {
  background: var(--pagination-nav-bg);
  color: var(--pagination-nav-color);
}

.glpagination .pagination .page-item .page-link:hover:not(:disabled) {
  border-color: var(--pagination-hover-border) !important;
  color: var(--pagination-hover-color);
}

.glpagination .pagination .page-item.prev-item .page-link:hover:not(:disabled),
.glpagination .pagination .page-item.next-item .page-link:hover:not(:disabled) {
  color: var(--pagination-nav-hover-color);
}

.glpagination .pagination .page-item.active .page-link {
  border-color: var(--pagination-active-bg) !important;
  color: var(--pagination-active-color) !important;
  background-color: var(--pagination-active-bg) !important;
}

.glpagination .pagination .prev-item .page-link,
.glpagination .pagination .next-item .page-link {
  width: auto;
  padding: 0 14px;
  gap: 8px;
}

.glpagination .pagination .disabled .page-link {
  cursor: not-allowed;
  color: var(--pagination-disabled-color);
}

/* Hide Prev when disabled (i.e. on the first page); shows on other pages */

.glpagination .pagination .prev-item.disabled {
  display: none;
}

/* Shared wizard nav buttons (Back / Skip) — common style everywhere */

.wizard-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.2s ease;
  text-decoration: none;
}

.wizard-nav-btn svg {
  fill: currentColor;
}

.wizard-nav-btn:hover:not(:disabled) {
  color: var(--color-text);
}

.wizard-nav-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.wizard-nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Table Header Section */

.table-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-surface-2);
}

.table-header h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-border);
  margin: 0;
}

.table-actions {
  gap: 12px;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  background-color: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.search-box:focus-within {
  border-color: var(--color-primary);
  background-color: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(50, 103, 136, 0.1);
}

.search-box svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.search-box input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 13px;
  color: var(--input-color);
  outline: none;
}

.search-box input::-moz-placeholder {
  color: var(--input-placeholder);
}

.search-box input::placeholder {
  color: var(--input-placeholder);
}

.select-box {
  position: relative;
  background-color: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 12px;
  transition: all 0.25s ease;
}

.select-box:focus-within {
  border-color: var(--color-primary);
  background-color: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(50, 103, 136, 0.1);
}

.select-box select {
  border: none;
  background: transparent;
  padding: 6px 0;
  padding-right: 24px;
  font-size: 13px;
  color: var(--input-color);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: light;
}

.select-box select option {
  color: var(--navyBlueDark);
  background: var(--whiteText);
}

.select-box select option:checked,
.select-box select option:hover,
.select-box select option:focus {
  color: var(--navyBlueDark);
  background: var(--whiteText);
  box-shadow: 0 0 10px 100px var(--whiteText) inset;
}

.select-box .custom-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
}

/* Responsive Design - Tablet */

@media (max-width: 1024px) {
  .webinar-custom-table.table-responsive thead th,
  .webinar-custom-table.table-responsive tbody td {
    padding: 12px 12px;
    font-size: var(--font-size-sm);
  }

  .webinar-custom-table.table-responsive tbody td.attendee {
    padding: 10px 12px;
  }

  .webinar-custom-table.table-responsive .actions {
    gap: 4px;
  }

  .webinar-custom-table.table-responsive .act-tooltip {
    width: 32px;
    height: 32px;
  }

  .webinar-custom-table.table-responsive .act-tooltip svg {
    width: 16px;
    height: 16px;
  }

  .search-box {
    max-width: 250px;
  }

  .table-actions {
    width: 100%;
    margin-top: 12px;
  }

  .table-header {
    flex-direction: column;
    gap: 16px;
  }
}

/* Responsive Design - Mobile */

@media (max-width: 768px) {
  .webinar-custom-table.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .webinar-custom-table.table-responsive table {
    min-width: 600px;
  }

  .webinar-custom-table.table-responsive thead th,
  .webinar-custom-table.table-responsive tbody td {
    padding: 10px 8px;
    font-size: 11px;
  }

  .webinar-custom-table.table-responsive thead th:first-child {
    padding-left: 12px;
  }

  .webinar-custom-table.table-responsive tbody td:first-child {
    padding-left: 12px;
  }

  .webinar-custom-table.table-responsive tbody td:last-child {
    padding-right: 12px;
  }

  .webinar-custom-table.table-responsive tbody td.attendee {
    padding: 8px;
  }

  .webinar-custom-table.table-responsive td.attendee .bg-secondary {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
  }

  .webinar-custom-table.table-responsive td.attendee p {
    font-size: 11px;
  }

  .webinar-custom-table.table-responsive .actions {
    gap: 4px;
  }

  .webinar-custom-table.table-responsive .act-tooltip {
    width: 30px;
    height: 30px;
  }

  .webinar-custom-table.table-responsive .act-tooltip svg {
    width: 15px;
    height: 15px;
  }

  .search-box {
    min-width: 150px;
    max-width: 100%;
  }

  .search-box input::-moz-placeholder {
    font-size: 11px;
  }

  .search-box input::placeholder {
    font-size: 11px;
  }

  .select-box select {
    font-size: 11px;
    padding: 4px 0;
  }

  .table-header h2 {
    font-size: var(--font-size-16);
  }

  .table-header {
    margin-bottom: 16px;
  }

  .glpagination .pagination .page-item .page-link {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
  }

  .glpagination .pagination .prev-item .page-link,
  .glpagination .pagination .next-item .page-link {
    padding: 0 10px;
    gap: 6px;
    font-size: 11px;
  }
}

/* Responsive Design - Small Mobile */

@media (max-width: 480px) {
  .webinar-custom-table.table-responsive table {
    min-width: 500px;
    font-size: 10px;
  }

  .webinar-custom-table.table-responsive thead th,
  .webinar-custom-table.table-responsive tbody td {
    padding: 8px 6px;
    font-size: 10px;
  }

  .webinar-custom-table.table-responsive thead th {
    height: auto;
  }

  .webinar-custom-table.table-responsive tbody tr {
    height: auto;
  }

  .webinar-custom-table.table-responsive .badge {
    padding: 4px 8px;
    font-size: 10px;
  }

  .table-actions {
    flex-direction: column;
  }

  .search-box {
    width: 100%;
    min-width: auto;
  }

  .select-box {
    flex: 1;
  }

  .webinar-custom-table.table-responsive .act-tooltip {
    width: 28px;
    height: 28px;
  }

  .webinar-custom-table.table-responsive .act-tooltip svg {
    width: 13px;
    height: 13px;
  }

  .webinar-custom-table.table-responsive td.attendee .bg-secondary {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .glpagination .pagination {
    gap: 4px;
  }

  .glpagination .pagination .page-item .page-link {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .webinar-custom-table.table-responsive tbody td[colspan] {
    padding: 20px 10px !important;
    font-size: var(--font-size-sm);
  }
}

/* Fix for horizontal scroll issue */

.invitation-attendees-table-section {
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.invitation-attendees-table-section .table-container {
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* Disable horizontal scroll on the parent container */

.whitecardbox.invitation-attendees-table-section {
  overflow: visible;
  width: 100%;
}

/* Scrollbar styling for table */

.webinar-custom-table.table-responsive::-webkit-scrollbar {
  height: 6px;
}

.webinar-custom-table.table-responsive::-webkit-scrollbar-track {
  background: var(--color-surface-2);
  border-radius: 10px;
}

.webinar-custom-table.table-responsive::-webkit-scrollbar-thumb {
  background: var(--color-text-muted);
  border-radius: 10px;
}

.webinar-custom-table.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ============================================================
   Webinar Thank You Page (wty-*)
   ============================================================ */

.wty-page {
  min-height: 100vh;
  background: var(--color-info-bg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 32px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wty-card {
  background: var(--color-surface);
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.07);
  border: 1px solid var(--color-border);
  padding: 32px;
  width: 100%;
  max-width: 780px;
  margin-bottom: 20px;
}

/* Hero */

.wty-hero {
  text-align: center;
  padding: 40px 32px;
}

.wty-hero-logo {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid var(--color-border);
  margin-bottom: 16px;
}

.wty-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.wty-hero-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 8px;
  line-height: 1.2;
}

.wty-hero-webinar {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}

.wty-hero-desc {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 auto 20px;
  max-width: 520px;
}

/* webinar meta badges in hero */

.wty-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 16px;
}

.wty-meta-badge {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: capitalize;
}

/* description / long text */

.wty-description-text {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 12px 0 0;
  white-space: pre-line;
}

.wty-speakers-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.wty-speaker-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 40px;
  padding: 6px 14px 6px 6px;
}

.wty-speaker-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wty-speaker-name {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.wty-speaker-role {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Section headings */

.wty-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0 0 6px;
}

.wty-section-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 20px;
}

/* Stats grid — column count set inline dynamically; fallback to auto-fit */

.wty-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.wty-stat-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px 12px;
  text-align: center;
}

.wty-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.wty-icon-blue {
  background: var(--color-primary);
}

.wty-icon-orange {
  background: var(--color-warning-bg);
}

.wty-icon-green {
  background: var(--color-success-bg);
}

.wty-icon-purple {
  background: var(--color-bg);
}

.wty-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}

.wty-stat-label {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.wty-stat-sublabel {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* What's Next */

.wty-next-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.wty-next-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   Webinar Thank You Page (wty-*)
   ============================================================ */

.webinar-stripe-settings-page .speakers-page-heading h2 {
  color: var(--color-text);
}

.webinar-stripe-settings-page .create_ep_section h3 {
  color: var(--color-text) !important;
  font-weight: var(--font-weight-medium) !important;
  font-size: calc(var(--font-size-xl) + 2px);
  margin: 0 0 8px !important;
}

.webinar-stripe-settings-page .form-control {
  border-radius: var(--input-radius) !important;
  border: var(--input-border) !important;
  padding: var(--input-padding) !important;
  font-size: var(--font-size-md) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 20px !important;
  color: var(--input-color) !important;
  background-color: var(--input-bg) !important;
  transition: border-color 0.2s !important;
}

.webinar-stripe-settings-page .webhook-url-input,
.cw-stripe-modal .webhook-url-input,
.invitation-attendees-img-upload .webhook-url-input {
  border-radius: 0 !important;
  border-right: none !important;
  color: var(--color-text) !important;
  background: var(--input-bg) !important;
}

.webinar-stripe-settings-page .webhook-url-input:focus,
.webinar-stripe-settings-page .webhook-url-input:hover,
.webinar-stripe-settings-page .webhook-url-input:active,
.cw-stripe-modal .webhook-url-input:focus,
.cw-stripe-modal .webhook-url-input:hover,
.cw-stripe-modal .webhook-url-input:active,
.invitation-attendees-img-upload .webhook-url-input:focus,
.invitation-attendees-img-upload .webhook-url-input:hover,
.invitation-attendees-img-upload .webhook-url-input:active {
  border-color: var(--pill-border-color) !important;
  outline: none !important;
}

.webinar-stripe-settings-page .webhook-copy-btn,
.cw-stripe-modal .webhook-copy-btn,
.invitation-attendees-img-upload .webhook-copy-btn {
  border-radius: 0 !important;
  height: 46px !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.webinar-stripe-settings-page .webhook-copy-btn:hover,
.invitation-attendees-img-upload .webhook-copy-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}

.webinar-stripe-settings-page .form-control::-moz-placeholder {
  color: var(--input-placeholder) !important;
  opacity: 0.6 !important;
}

.webinar-stripe-settings-page .form-control::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 0.6 !important;
}

.webinar-stripe-settings-page .form-control:focus {
  border-color: var(--input-hover-border-blue) !important;
  box-shadow: none !important;
  outline: none !important;
}

.webinar-stripe-settings-page .form-control:-webkit-autofill,
.webinar-stripe-settings-page .form-control:-webkit-autofill:hover,
.webinar-stripe-settings-page .form-control:-webkit-autofill:focus,
.webinar-stripe-settings-page .form-control:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  border: 1px solid var(--color-border) !important;
}

/* PodUp logo: light vs dark (gold) variant swap */

.cw-podup-logo--dark {
  display: none !important;
}

.cw-podup-logo--light {
  display: inline-block !important;
}

body[data-theme=dark] .cw-podup-logo--dark {
  display: inline-block !important;
}

body[data-theme=dark] .cw-podup-logo--light {
  display: none !important;
}

.webinar-speakers-boxs .webinar-speakers-dropdown.role-permissions-preview .header-icon svg {
  width: auto;
  height: auto;
}

.webinar-listing-btn a.cw-btn-primary svg {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

/* Webinar Module Buttons Line-Height Normalization */

.cw-btn-primary,
.cw-btn-secondary,
.cw-btn-outline,
.cw-btn-danger,
.cw-btn-danger-outline,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn,
.attendee-reg-btn-primary,
.attendee-reg-btn-outline,
.attendee-reg-btn,
.cw-suggest-titles-btn,
button[class*=btn-],
button[class*=-btn] {
  line-height: 20px !important;
}

.attendees-card.attendees-email-preview-card {
  background: none !important;
  padding: 24px !important;
}

html body .attendees-card.attendees-email-preview-card {
  padding: 0px !important;
  background: none !important;
}

html body .attendees-card.attendees-stats-card {
  background: var(--color-surface) !important;
  padding: 20px !important;
}

/* ---- Fix browser autofill colors in dark mode ---- */

body[data-theme=dark] input:-webkit-autofill,
body[data-theme=dark] input:-webkit-autofill:hover,
body[data-theme=dark] input:-webkit-autofill:focus,
body[data-theme=dark] input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

/* ===========================================================================
   WebinarDark.css — Consolidated DARK THEME stylesheet for the Webinar module.

   Single source of truth for every dark-mode rule across the Webinar module.
   Replaces the previous per-component *.dark.css files. Light theme is never
   affected by anything in this file — every rule is gated by either:
       body.cw-dark-mode  ...        (global toggle on <body>)
       [data-cw-theme="dark"] ...    (per-shell wrapper attribute)

   Token palette (kept identical to the previous files so visuals don't change):
       Page bg          var(--color-text)
       Card bg          var(--color-surface-2)
       Inner surface    var(--color-bg) / var(--color-bg)
       Border           var(--color-surface-2) / var(--color-surface-2) / var(--color-surface-2)
       Gold accent      var(--color-primary) (hover var(--color-primary))
       Gold gradient    linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 49.52%, var(--color-primary) 100%)
       Text strong      var(--color-surface) / var(--color-surface-2)
       Text body        var(--color-border) / var(--color-text-muted)
       Text muted       var(--color-text-muted) / var(--color-text-secondary)
   =========================================================================== */

/* ===========================================================================
   1. PER-PAGE THEME TOGGLE SHELLS (light + dark, scoped to wrapper class)
   These rules are intentionally NOT gated by .cw-dark-mode — the toggle pill
   itself must render in both themes. Each wrapper hides the toggle when the
   global toggle is preferred.
   =========================================================================== */

:root {
  --cw-seafoam-green: var(--color-accent-seafoam);
  --cw-bright-sky-blue: var(--color-primary);
  --cw-light-gold: var(--color-primary-light);
  --cw-dark-gold: var(--color-primary);
  --cw-burnt-orange: var(--color-accent-orange);
  --cw-sky-blue: var(--color-accent-skyblue);
  --cw-button-primary: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 49.52%, var(--color-primary) 100%);
  --cw-button-primary-hover: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 49.52%, var(--color-primary) 100%);
  /* Wizard step-indicator tokens (black theme) */
  --cw-step-unvisited: var(--color-text);
  --cw-text-muted: var(--color-text-muted);
  --cw-active-tint: rgba(68,167,206,0.12);
  /* Wizard step-indicator tokens (light/base theme) */
  --cw-step-circle-pending: var(--color-success);
  --cw-step-active: var(--color-primary);
  --cw-step-completed-grad: linear-gradient(95deg,var(--color-success) 3.96%,var(--color-success) 100%);
  --cw-step-line: var(--color-text-muted);
  --cw-step-line-completed: var(--color-success);
  --cw-text-strong: var(--color-text);
  --cw-back-arrow: var(--color-primary);
  /* Shared hyperlink-style action tokens */
  --wizard-link: var(--color-primary);
  --wizard-link-hover: var(--color-primary-light);
}

/* Common square icon edit-button. Apply via class `.ew-yl-edit-btn`. */

.webinar-listing-btn a.ew-yl-edit-btn,
.ew-yl-edit-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border-radius: 8px;
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface-2) !important;
  color: var(--color-text) !important;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.ew-yl-edit-btn svg,
.ew-yl-edit-btn svg path {
  width: 14px !important;
  height: 14px !important;
  display: block;
  flex-shrink: 0;
  fill: currentColor !important;
  stroke: none !important;
}

/* PodUp fallback logo — show the standard logo in the light theme and the
   dark-theme variant under body.cw-dark-mode (see PodupLogo.js). Only the
   inactive variant is hidden, so the visible one keeps its own display/size. */

.cs-theme-shell {
  position: relative;
}

.cs-theme-toggle {
  position: absolute;
  top: 16px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  z-index: 10;
  padding: 0;
}

.cs-theme-toggle:hover {
  transform: rotate(20deg);
}

.cs-theme-toggle:focus {
  outline: none;
}

.cs-theme-toggle svg {
  width: 20px;
  height: 20px;
}

.es-theme-shell {
  position: relative;
}

.es-theme-toggle {
  position: absolute;
  top: 16px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  z-index: 10;
  padding: 0;
}

.es-theme-toggle:hover {
  transform: rotate(20deg);
}

.es-theme-toggle:focus {
  outline: none;
}

.es-theme-toggle svg {
  width: 20px;
  height: 20px;
}

.wl-theme-shell {
  position: relative;
}

.wl-theme-toggle {
  position: absolute;
  top: -8px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  z-index: 50;
  padding: 0;
}

.wl-theme-toggle:hover {
  transform: rotate(20deg);
}

.wl-theme-toggle:focus {
  outline: none;
}

.wl-theme-toggle svg {
  width: 18px;
  height: 18px;
}

.wbes-theme-shell {
  position: relative;
}

.wbes-theme-toggle {
  position: absolute;
  top: 16px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  z-index: 10;
  padding: 0;
}

.wbes-theme-toggle:hover {
  transform: rotate(20deg);
}

.wbes-theme-toggle:focus {
  outline: none;
}

.wbes-theme-toggle svg {
  width: 20px;
  height: 20px;
}

/* Global Webinar-module theme toggle (rendered from WebinarApp.js, fixed
   top-right, visible on every webinar route in both themes). */

.cw-global-theme-toggle {
  position: fixed;
  top: 70px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  z-index: 9999;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.cw-global-theme-toggle:hover {
  transform: rotate(20deg);
}

.cw-global-theme-toggle:focus {
  outline: none;
}

.cw-global-theme-toggle svg {
  width: 20px;
  height: 20px;
}

/* ===========================================================================
   2. GLOBAL PAGE-LEVEL SURFACES (body / header / breadcrumb / content area)
   Activated by body.cw-dark-mode — applies to every webinar route while dark
   mode is active. Cleaned up on theme switch back to light.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Wizard step indicator — BASE (light / theme-agnostic) styles.
   Relocated out of StepForm.js so the component carries no hardcoded colors;
   every color references a centralized :root token. These rules are NOT gated
   by a theme — they provide the light defaults, and the body.cw-dark-mode
   block below overrides them for the black theme.
   --------------------------------------------------------------------------- */

.webinar-progress-wrapper {
  width: 100%;
}

.webinar-progress-wrapper .steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 0;
  justify-content: space-between;
}

.webinar-progress-wrapper .step-item-new {
  flex-direction: column;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.webinar-progress-wrapper .circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  background: var(--color-dim);
  color: var(--cw-text-muted);
  font-weight: var(--font-weight-medium);
  transition: all 0.3s ease;
}

.webinar-progress-wrapper .step-item-new span {
  font-size: var(--font-size-md);
  color: var(--cw-text-muted);
  font-weight: var(--font-weight-medium);
  transition: color 0.3s ease;
}

.webinar-progress-wrapper .line {
  flex-grow: 1;
  height: 2px;
  background: var(--cw-step-line);
  margin: 0 12px;
  min-width: 20px;
  transform: translateY(-50%);
}

.webinar-progress-wrapper .step-item-new.completed .circle {
  background: var(--cw-step-completed-grad);
  color: var(--color-text-baselight);
}

.webinar-progress-wrapper .line.completed {
  background: var(--cw-step-line-completed);
}

.webinar-progress-wrapper .step-item-new.active .circle {
  background: var(--color-warning-bg);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.webinar-progress-wrapper .line.active {
  background: var(--color-primary);
}

.webinar-progress-wrapper .step-item-new.completed span {
  color: var(--color-success);
}

.webinar-progress-wrapper .step-item-new.active span {
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Wizard LEFT SIDEBAR — mirrors the ProRepurposer project sidebar (.prp-sidebar)
   1:1 so the two flows look identical. Uses the same global --wizard-* tokens.
   Only restyles the existing step markup; wizard logic is unchanged.
   --------------------------------------------------------------------------- */

.step-form-main.wizard-sidebar-layout {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.wz-sidebar {
  flex: 0 0 220px;
  width: 220px;
  min-width: 220px;
  background: var(--wizard-nav-bg);
  display: flex;
  flex-direction: column;
  align-self: stretch;
  border-right: 1px solid var(--color-border);
}

.wizard-sidebar-layout .wizard-main {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 28px;
}

/* Header: back arrow + module brand */

.wz-sidebar-header {
  padding: 16px 11px 11px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.wz-sidebar-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.wz-sidebar-back:hover {
  filter: brightness(0.93);
}

.wz-sidebar-back svg,
.wz-sidebar-back svg path {
  fill: #fff;
  color: #fff;
}

.wz-module-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wz-module-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--IconlistColor);
}

.wz-module-icon svg {
  display: block;
}

.wz-module-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  color: var(--WizardTextColorLogo);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nav list */

.wz-sidebar-nav {
  flex: 1;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}

.wz-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--wizard-sidebar-item);
  font-size: var(--font-size-base);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: all 0.15s ease;
}

.wz-sidebar-item:hover:not(.is-disabled) {
  background: rgba(128, 128, 128, 0.1);
  color: var(--wizard-sidebar-item);
}

.wz-sidebar-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border: 1px solid var(--wizard-sidebar-num-fg);
  color: var(--wizard-sidebar-num-fg);
  background: var(--wizard-sidebar-num-bg);
  transition: all 0.15s ease;
}

.wz-sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

.wz-sidebar-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active */

.wz-sidebar-item.is-active {
  color: var(--wizard-sidebar-item);
  font-weight: var(--font-weight-semibold);
}

.wz-sidebar-item.is-active .wz-sidebar-num {
  background: var(--wizard-step-active-bg);
  color: var(--wizard-step-active-icon);
  border-color: var(--wizard-step-active-icon-border);
}

/* No left bar / focus box on the active step — just the gold number + label. */

.wz-sidebar-item.is-active::before {
  content: none;
}

.wz-sidebar-item:focus,
.wz-sidebar-item:focus-visible {
  outline: none;
  box-shadow: none;
  border: none;
}

/* Completed */

.wz-sidebar-item.is-completed {
  color: var(--wizard-sidebar-item);
}

.wz-sidebar-item.is-completed .wz-sidebar-num {
  background: var(--wizard-complete-bg-icon);
  color: var(--wizard-complete-text-color);
  border-color: var(--wizard-complete-icon-border);
}

/* Skipped — same numbered gold-outline look as an unvisited step. */

.wz-sidebar-item.is-skipped {
  color: var(--wizard-sidebar-item);
}

.wz-sidebar-item.is-skipped .wz-sidebar-num {
  background: var(--wizard-sidebar-num-bg);
  color: var(--wizard-sidebar-num-fg);
  border-color: var(--wizard-sidebar-num-fg);
}

/* Disabled */

.wz-sidebar-item.is-disabled {
  cursor: not-allowed;
  color: var(--color-text-secondary);
  opacity: 0.65;
}

/* Responsive — collapse to an icon rail like the reference */

@media (max-width: 1280px) {
  .wz-sidebar {
    flex-basis: 56px;
    width: 56px;
    min-width: 56px;
  }

  .wz-module-name,
  .wz-sidebar-text {
    display: none;
  }

  .wz-sidebar-header {
    justify-content: center;
    padding: 14px 8px 10px;
  }

  .wz-module-brand {
    gap: 0;
  }

  .wz-sidebar-item {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
  }

  .wz-sidebar-item.is-active::before {
    display: none;
  }

  .wizard-sidebar-layout .wizard-main {
    padding-left: 16px;
  }
}

@media (max-width: 767px) {
  .step-form-main.wizard-sidebar-layout {
    flex-direction: column;
  }

  .wz-sidebar {
    flex-basis: auto;
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .wz-sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .wz-module-name,
  .wz-sidebar-text {
    display: inline;
  }

  .wizard-sidebar-layout .wizard-main {
    padding-left: 0;
    padding-top: 16px;
  }
}

.backpagebtn a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  /* width: 40px;
  height: 40px; */
  border-radius: 50% !important;
  background: var(--whiteBg) !important;
  border: none !important;
  color: var(--color-surface) !important;
  transition: filter 0.2s ease;
}

.backpagebtn a:hover {
  filter: brightness(0.93);
}

.backpagebtn a svg,
.backpagebtn a svg path {
  fill: var(--IconlistColor) !important;
  color: var(--IconlistColor) !important;
}

/* StepForm progress bar — dark theme overrides, aligned to the PodUp Wizard SOP.
   Colors are driven by centralized tokens (see :root above) so they stay
   reusable and free of one-off hex values. The light theme base now lives in
   the block above — every rule here is gated by body.cw-dark-mode. */

/* Unvisited: gray numbered circle + light-gray text */

/* Active: subtle blue row tint, blue text, outline circle — all from global vars */

/* Completed: solid green circle, white checkmark, green text */

/* Skipped: gold circle with warning glyph, gold text */

/* Connector track + standalone progress bar */

/* ---------------------------------------------------------------------------
   Common heading / subheading system (use across all Webinar pages)
   cw-page-title / cw-page-subtitle  → page header
   cw-section-title / cw-section-subtext → card/section header
   --------------------------------------------------------------------------- */

.cw-page-title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: normal;
  margin: 0;
}

.cw-page-subtitle {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: normal;
  margin: 0;
}

.cw-section-title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: normal;
  margin: 0;
}

.cw-section-subtext {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: normal;
  margin: 0;
}

/* Step label in the content area: PodUp light blue, ALL CAPS, no badge */

.wizard-step-label {
  margin: 4px 0 12px;
  color: var(--color-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
}

/* Wizard step header — the single title/description block for every step.
   Rendered only by StepForm, so page components print no header of their own. */

.wz-step-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}

.wz-step-header-text {
  min-width: 0;
}

.wz-step-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.wz-step-header-actions:empty {
  display: none;
}

.wz-step-eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-primary);
  letter-spacing: 0.6px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.wz-step-title {
  margin: 0 0 6px;
  color: var(--color-text);
  font-size: var(--font-size-title, 30px);
  font-weight: 500;
  line-height: 1.2;
}

.wz-step-desc {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: 1.5;
}

@media (max-width: 767px) {
  .wz-step-header {
    margin-bottom: 18px;
  }

  .wz-step-title {
    font-size: 24px;
  }
}

/* Those steps keep their action buttons but lose their own heading, so the
   remaining actions align to the right of the row. */

.wizard-main .wt-header,
.wizard-main .wcpv-intro {
  justify-content: flex-end;
}

.step-content-wrapper {
  padding: 36px 67px 0px 67px !important;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 61px);
}

/* Content column grows so the sticky footer always sits at the bottom and the
   last field clears its 62px bar instead of hiding behind it. */

.step-content-wrapper > .wz-content-col {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 24px;
}

/* ---------------------------------------------------------------------------
   Flat card surfaces — single source of truth for the module.
   Webinar cards carry no background, border, or shadow. This beats the global
   `.whitecardbox` paint in app-style.css / theme.css (`body[data-theme="…"]`)
   and each component's own card rule, so component files never repeat it.
   --------------------------------------------------------------------------- */

body .cw-create-webinar-wrapper .whitecardbox,
body[data-theme=dark] .cw-create-webinar-wrapper .whitecardbox,
body[data-theme=light] .cw-create-webinar-wrapper .whitecardbox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body .podup-webinar-create .whitecardbox,
body[data-theme=dark] .podup-webinar-create .whitecardbox,
body[data-theme=light] .podup-webinar-create .whitecardbox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body .step-form-main .whitecardbox,
body[data-theme=dark] .step-form-main .whitecardbox,
body[data-theme=light] .step-form-main .whitecardbox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body .wizard-main .whitecardbox,
body[data-theme=dark] .wizard-main .whitecardbox,
body[data-theme=light] .wizard-main .whitecardbox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body .wt-page .whitecardbox,
body[data-theme=dark] .wt-page .whitecardbox,
body[data-theme=light] .wt-page .whitecardbox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body .cs-theme-shell .whitecardbox,
body[data-theme=dark] .cs-theme-shell .whitecardbox,
body[data-theme=light] .cs-theme-shell .whitecardbox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body .es-theme-shell .whitecardbox,
body[data-theme=dark] .es-theme-shell .whitecardbox,
body[data-theme=light] .es-theme-shell .whitecardbox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body .app-content.content .content-body .whitecardbox,
body[data-theme=dark] .app-content.content .content-body .whitecardbox,
body[data-theme=light] .app-content.content .content-body .whitecardbox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body .wt-page,
body[data-theme=dark] .wt-page,
body[data-theme=light] .wt-page {
  border: 0 !important;
  box-shadow: none !important;
}

/* Step pages carry their own top padding/rows from the standalone layout; the
   wizard already spaces them with .wz-step-header, so drop the extra gap. */

.wizard-main .cw-create-webinar-wrapper.pt-4 {
  padding-top: 0 !important;
}

/* Thumbnail / Social pages bring their own page padding + full-height frame;
   inside the wizard .step-content-wrapper already provides that spacing. */

.wizard-main .wt-page {
  padding: 0 !important;
  min-height: 0 !important;
}

/* Their action row (Apply to All …) rides up next to the step title, and the
   platform chips sit directly under it — no empty band in between. */

@media (min-width: 992px) {
  /* Only the Thumbnail studio has visible header actions to align with the
     step title; the Social step would just overlap its own heading. */

  .wizard-main .wt-page-thumb > .wt-header {
    margin-top: -78px;
    margin-bottom: 10px;
  }
}

.wizard-main .wt-thumb-platforms-scroll {
  margin-bottom: 12px;
}

.wizard-main .wt-thumb-platforms {
  padding: 4px 0;
}

.wizard-main .podup-webinar-create > .row.py-4 {
  padding-top: 0 !important;
}

.content-wrapper .page_titlemn.webinar_module_page_title {
  padding-bottom: 32px !important;
}

/* Exit button — top-right of the wizard header */

.page_titlemn .wizard-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  border: var(--btn-secondary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.page_titlemn .wizard-exit-btn:hover {
  background: var(--btn-primary-bg-hover);
  box-shadow: var(--btn-primary-accent-shadow-hover);
  transform: translateY(-2px);
}

.page_titlemn .wizard-exit-btn .wizard-exit-icon {
  font-size: calc(var(--btn-font-size) - 2px);
  line-height: 1;
}

.page_titlemn h2 {
  font-size: var(--font-size-title) !important;
  font-weight: var(--font-weight-medium) !important;
}

/* ===========================================================================
   3. WebinarList — dashboard / listing page
   =========================================================================== */

/* Hide the light-gray divider between "Sort by" and Search in dark mode. */

/* Secondary button (Edit / Join) */

/* Remind button (WebinarList) — same look in every interaction state */

/* ===========================================================================
   4. CreateSpeaker / EditSpeaker / CreateWebinar / EditWebinar shared rules
   Wrappers: .cs-theme-shell / .es-theme-shell / .cw-create-webinar-wrapper
   =========================================================================== */

/* ===========================================================================
   5. SpeakerList
   =========================================================================== */

/* ===========================================================================
   6. InviteAttendees + AttendeeList (AttendeesShared)
   =========================================================================== */

/* body.cw-dark-mode .attendees-send-invite-row:hover {
    background: rgba(194,160,50,0.08) !important;
} */

/* ===========================================================================
   7. AttendeeRegistration
   =========================================================================== */

/* body.cw-dark-mode .attendee-reg-timer-item {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
} */

/* ===========================================================================
   8. ShowWebinarSpeaker + ShowWebinarAttendee (split banner / form layout)
   =========================================================================== */

/* ===========================================================================
   9. WebinarCountdown
   =========================================================================== */

/* ===========================================================================
   10. WebinarThankYou
   =========================================================================== */

/* ===========================================================================
   11. WebinarEnded
   =========================================================================== */

/* ===========================================================================
   12. WebinarLinkExpired
   =========================================================================== */

/* ===========================================================================
   13. WebinarEmailSettings
   =========================================================================== */

/* Toggle switches inside the Email Settings page render in teal (var(--color-success))
   instead of the global gold. Scoped to .wbes-theme-shell so the rest of the
   webinar module (Create/Edit Webinar, Create/Edit Speaker) keeps gold. */

/* ===========================================================================
   14. SuccessPopup (partials/)
   =========================================================================== */

/* ===========================================================================
   15. ErrorPopup (partials/)
   =========================================================================== */

/* ===========================================================================
   16. WebinarOnDemandVideo — watch page
   =========================================================================== */

.wod-page {
  position: fixed;
  /* Sit beside the app's left icon dock and below the header, never under them. */
  left: var(--wod-left-offset, 0px);
  right: 0;
  top: var(--wod-top-offset, 0px);
  bottom: 0;
  /* Explicit height: an ancestor with a transform/filter would otherwise make
     `top`/`bottom` resolve against it instead of the viewport. */
  height: calc(100dvh - var(--wod-top-offset, 0px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
}

.wod-page .wod-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 20px 72px 72px;
  transition: padding-left 0.2s ease, padding-right 0.2s ease;
}

.wod-page {
  /* Fill the available box in both axes — the canvas cover-crops the source,
     so there is no side letterboxing. */
}

.wod-page .wod-player-wrap {
  width: 100%;
  height: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.wod-page .wod-canvas-container {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}

.wod-page .wod-control-bar {
  flex: 0 0 auto;
}

/* Chat open: reserve space on the left so the video sits beside the panel.
   .wod-page already starts after the dock, so only the panel width is added. */

body.wod-chat-open .wod-page .wod-body {
  padding-left: 412px;
}

/* Short viewports: the control bar eats a bigger share, so trim its padding. */

@media (max-height: 720px) {
  .wod-page .wod-control-bar {
    padding: 8px 14px 10px;
  }

  .wod-page .wod-progress-row {
    margin-bottom: 8px;
  }
}

/* Responsive gutters. These must be scoped to .wod-page — the unscoped
   .wod-body breakpoints in _Webinarthankyou.scss lose on specificity. */

@media (max-width: 1280px) {
  .wod-page .wod-body {
    padding: 16px 40px 48px;
  }

  body.wod-chat-open .wod-page .wod-body {
    padding-left: 380px;
  }
}

@media (max-width: 900px) {
  .wod-page .wod-body {
    padding: 12px 20px 32px;
  }

  /* Too narrow to sit beside the panel — the chat just overlays the video. */

  body.wod-chat-open .wod-page .wod-body {
    padding-left: 20px;
  }
}

@media (max-width: 600px) {
  .wod-page .wod-body {
    padding: 8px 12px 24px;
  }

  body.wod-chat-open .wod-page .wod-body {
    padding-left: 12px;
  }
}

@media (min-width: 1460px) {
  .app-content.content .content-body.webinar-page-content {
    max-width: 99% !important;
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 0;
  }
}

/* Wizard flush-to-shell: remove wrapper padding so the left sidebar connects
   with the global menu (left) and header (top). Scoped to the wizard route via
   the body class toggled by StepForm. */

body.webinar-wizard-embedded .app-content.content {
  padding: 0 !important;
}

body.webinar-wizard-embedded .content-wrapper.studiopage,
body.webinar-wizard-embedded .content-body.webinar-page-content,
body.webinar-wizard-embedded .studiomainwrap {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  min-height: calc(100vh - 61px);
}

body.webinar-wizard-embedded .step-form-main.wizard-sidebar-layout {
  min-height: calc(100vh - 61px);
  align-items: stretch;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.webinar-wizard-embedded .wz-sidebar {
  position: sticky;
  top: 61px;
  align-self: flex-start;
  height: calc(100vh - 61px);
  overflow-y: auto;
}

body.webinar-wizard-embedded .wizard-sidebar-layout .wizard-main {
  padding: 24px 28px 0;
}

body.webinar-wizard-embedded .wizard-main .wz-footer-bar {
  margin-left: -67px;
  margin-right: -67px;
}

body.webinar-wizard-embedded {
  /* Native per-step footers are replaced by the global fixed footer.
     .cs-step-actions is the exception: the speaker form keeps its own
     Cancel / Add Speaker pair, which is not what the wizard footer does. */
}

body.webinar-wizard-embedded .wizard-main .webinar-footer-bottom:not(.cs-step-actions),
body.webinar-wizard-embedded .wizard-main .webinar-left-btn,
body.webinar-wizard-embedded .wizard-main .wes-actions,
body.webinar-wizard-embedded .wizard-main .wcpv-footer {
  display: none !important;
}

body.webinar-wizard-embedded .wizard-main .webinar-footer-bottom.cs-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Fixed wizard footer — mirrors the ProRepurposer bottom bar */

.wz-footer-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  padding: 0 28px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.wizard-sidebar-layout .wizard-main {
  margin-bottom: 0;
}

.wz-footer-left,
.wz-footer-right {
  flex: 1;
  display: flex;
  align-items: center;
}

.wz-footer-right {
  justify-content: flex-end;
  gap: 16px;
}

.wz-footer-center {
  flex: 0 0 auto;
}

.wz-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  color: var(--wizard-status-neutral, var(--color-text-secondary));
  font-size: var(--font-size-base);
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
}

.wz-btn-back svg {
  stroke: currentColor;
}

.wz-footer-progress {
  width: min(360px, 42vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.wz-footer-progress-track {
  width: 100%;
  height: 5px;
  border-radius: 6px;
  background: var(--color-dim);
  overflow: hidden;
}

.wz-footer-progress-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--wizard-success-text, var(--color-success));
  transition: width 0.3s ease;
}

.wz-footer-progress-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1;
}

.wz-btn-skip {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--wizard-accent, var(--color-primary));
  cursor: pointer;
}

.wz-btn-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-padding, 10px 24px);
  height: calc(var(--btn-height) - 3px);
  border: none;
  border-radius: var(--btn-radius, 999px);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color, #fff);
  font-size: var(--btn-font-size, 15px);
  font-weight: var(--btn-font-weight, 600);
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--btn-primary-shadow);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.wz-btn-next:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--btn-primary-shadow-hover);
}

.wz-btn-next:active {
  transform: translateY(0);
}

.wz-btn-next:disabled,
.wz-btn-next.is-loading {
  cursor: not-allowed;
  opacity: 0.75;
  transform: none;
  box-shadow: var(--btn-primary-shadow);
}

/* Primary buttons — one rule for every `*btn-primary` / `*btn--primary` variant
   in the module plus the wizard next button. Kills the browser default focus
   ring, which the dark color-scheme paints white and reads as a stray border;
   focus stays visible through the accent-tinted shadow. */

[class*=btn-primary],
[class*=btn-primary]:focus,
[class*=btn-primary]:focus-visible,
[class*=btn-primary]:active,
[class*=btn--primary],
[class*=btn--primary]:focus,
[class*=btn--primary]:focus-visible,
[class*=btn--primary]:active,
.wz-btn-next,
.wz-btn-next:focus,
.wz-btn-next:focus-visible,
.wz-btn-next:active {
  outline: none;
  border: none;
}

[class*=btn-primary]:focus,
[class*=btn-primary]:focus-visible,
[class*=btn--primary]:focus,
[class*=btn--primary]:focus-visible,
.wz-btn-next:focus,
.wz-btn-next:focus-visible {
  box-shadow: var(--btn-primary-shadow-hover);
}

/* ───────────────────────────────────────────────────────────────
   Shared text-colour utilities. Use these instead of repeating
   `color: var(--color-text-*)` per component.
   ─────────────────────────────────────────────────────────────── */

.w-text {
  color: var(--color-text);
}

/* Icon wrapper — SVGs inside inherit via currentColor, so one variable drives
   every icon instead of per-platform brand hex values. */

.w-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

.w-icon svg {
  width: 18px;
  height: 18px;
}

.w-text-secondary {
  color: var(--color-text-secondary);
}

.w-text-muted {
  color: var(--color-text-muted);
}

/* ───────────────────────────────────────────────────────────────
   Shared pill toggle (`w-toggle`)

   One switch for the whole module — stream settings, email settings,
   the created-preview card. Colour comes from the global --switch-*
   tokens (on = gold), so never restyle it per component; add a
   modifier here instead.

   Markup:
     <label class="w-toggle">
       <input type="checkbox" ... />
       <span class="w-toggle-track"><span class="w-toggle-thumb" /></span>
     </label>
   ─────────────────────────────────────────────────────────────── */

.w-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}

.w-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.w-toggle.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.w-toggle.is-saving {
  opacity: 0.6;
  pointer-events: none;
}

.w-toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 9999px;
  background: var(--switch-off-bg);
  transition: background 0.2s ease;
  display: inline-block;
  flex-shrink: 0;
}

.w-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--switch-knob);
  transition: transform 0.2s ease;
}

.w-toggle input:checked + .w-toggle-track,
.w-toggle.is-on .w-toggle-track {
  background: var(--switch-on-bg);
}

.w-toggle input:checked + .w-toggle-track .w-toggle-thumb,
.w-toggle.is-on .w-toggle-thumb {
  transform: translateX(18px);
}

.w-toggle input:focus-visible + .w-toggle-track {
  outline: 2px solid var(--switch-on-bg);
  outline-offset: 2px;
}

/* The dark theme paints `input[type=checkbox]:checked + span` as a filled
   checkbox box (!important). This span is the track, so out-specify it. */

body[data-theme=dark] .w-toggle input[type=checkbox]:checked + span.w-toggle-track {
  background-color: var(--switch-on-bg) !important;
  border-color: transparent !important;
}

.wz-btn-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: wz-btn-spin 0.6s linear infinite;
}

@keyframes wz-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===========================================================================
   Webinar List — Repurposer-style grid/card layout (wl-rp-*)
   Theme-aware via the shared --color-* vars (remap under [data-cw-theme=dark]).
   Ported from the ProRepurposer SummaryList design under webinar-prefixed
   class names so it is independent of the ProRepurposer bundle/CSS.
   =========================================================================== */

.wl-rp-wrap {
  padding-top: 0;
  margin-top: 0;
  /* ── Header ─────────────────────────────────────────── */
}

.wl-rp-wrap .wl-rp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 0;
  margin-bottom: 16px;
}

.wl-rp-wrap .wl-rp-header-left h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--color-text);
  letter-spacing: -0.5px;
}

.wl-rp-wrap .wl-rp-header-left p {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}

.wl-rp-wrap .wl-rp-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.wl-rp-wrap .wl-rp-header-right .cw-btn-secondary {
  color: var(--color-text-secondary);
}

.wl-rp-wrap {
  /* ── Buttons ────────────────────────────────────────── */
}

.wl-rp-wrap .wl-rp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1;
}

.wl-rp-wrap .wl-rp-btn .wl-rp-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wl-rp-wrap .wl-rp-btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.wl-rp-wrap .wl-rp-btn-primary:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: #fff;
  transform: translateY(-1px);
}

.wl-rp-wrap .wl-rp-btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.wl-rp-wrap .wl-rp-btn-secondary:hover {
  background: rgba(0, 0, 0, 0.03);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.wl-rp-wrap {
  /* ── Toolbar (filters + controls) ───────────────────── */
}

.wl-rp-wrap .wl-rp-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.wl-rp-wrap .wl-rp-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wl-rp-wrap .wl-rp-pill {
  padding: 6px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  transition: all 0.2s;
}

.wl-rp-wrap .wl-rp-pill:hover {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

.wl-rp-wrap .wl-rp-pill.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.wl-rp-wrap .wl-rp-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.wl-rp-wrap .wl-rp-sort {
  min-width: 180px;
}

.wl-rp-wrap .wl-rp-search input.search {
  min-width: 180px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 8px;
}

.wl-rp-wrap .wl-rp-layout-toggles {
  display: flex;
  gap: 8px;
}

.wl-rp-wrap .wl-rp-layout-toggles button {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.wl-rp-wrap .wl-rp-layout-toggles button:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.wl-rp-wrap .wl-rp-layout-toggles button.is-active {
  border-color: var(--color-primary);
  color: #fff;
  background: var(--color-primary);
}

.wl-rp-wrap {
  /* ── Projects area ──────────────────────────────────── */
}

.wl-rp-wrap .wl-rp-projects {
  position: relative;
  min-height: 300px;
}

.wl-rp-wrap {
  /* ── Grid ───────────────────────────────────────────── */
}

.wl-rp-wrap .wl-rp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  width: 100%;
}

.wl-rp-wrap .wl-rp-grid-item {
  min-width: 0;
}

.wl-rp-wrap .wl-rp-card {
  background: var(--color-surface-2);
  border-radius: 10px;
  overflow: visible;
  /* allow the actions dropdown to escape the card */
  box-shadow: var(--shadow-md, 0 1px 2px rgba(0, 0, 0, 0.06));
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
}

.wl-rp-wrap .wl-rp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.25);
}

.wl-rp-wrap .wl-rp-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--color-bg);
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  /* keep top corners rounded now card overflow is visible */
}

.wl-rp-wrap .wl-rp-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
}

.wl-rp-wrap .wl-rp-thumb:hover img {
  transform: scale(1.05);
}

.wl-rp-wrap .wl-rp-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.wl-rp-wrap .wl-rp-thumb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.3);
}

.wl-rp-wrap .wl-rp-play-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  padding: 5px 11px;
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.wl-rp-wrap .wl-rp-play-duration .wl-rp-play {
  display: inline-flex;
  align-items: center;
}

.wl-rp-wrap .wl-rp-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.wl-rp-wrap .wl-rp-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  word-break: break-word;
  min-height: 42px;
}

.wl-rp-wrap .wl-rp-title:hover {
  color: var(--color-primary);
}

.wl-rp-wrap .wl-rp-submeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
}

.wl-rp-wrap .wl-rp-submeta .wl-rp-dot {
  opacity: 0.4;
  font-size: 7px;
}

.wl-rp-wrap .wl-rp-submeta .wl-rp-submeta-link {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.wl-rp-wrap .wl-rp-submeta .wl-rp-submeta-link:hover {
  color: var(--color-primary);
}

.wl-rp-wrap .wl-rp-card-footer {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  min-height: 34px;
  /* keep footer height consistent when no primary action */
}

.wl-rp-wrap .wl-rp-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  width: 100%;
  /* Primary action sits left, overflow menu pinned right (matches reference). */
}

.wl-rp-wrap .wl-rp-actions .wl-action-btn,
.wl-rp-wrap .wl-rp-actions .fm-edit-btn,
.wl-rp-wrap .wl-rp-actions .fm-restore-btn,
.wl-rp-wrap .wl-rp-actions .cw-btn-primary,
.wl-rp-wrap .wl-rp-actions .wl-archived-actions {
  margin-right: auto;
}

.wl-rp-wrap .wl-rp-actions .wl-rp-footer-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
  /* spacing before the 3-dots menu */
}

.wl-rp-wrap .wl-rp-actions .wl-rp-footer-status.completed {
  color: var(--status-completed) !important;
}

.wl-rp-wrap .wl-rp-actions .wl-rp-footer-status.upcoming {
  color: var(--status-processing);
}

.wl-rp-wrap .wl-rp-actions .wl-rp-footer-status.ongoing {
  color: var(--status-completed);
}

.wl-rp-wrap .wl-rp-actions .wl-rp-footer-status.draft {
  color: var(--color-text);
}

.wl-rp-wrap .wl-rp-actions .wl-rp-footer-status.ondemand {
  color: var(--status-pending);
}

.wl-rp-wrap .wl-rp-actions .wl-rp-footer-status.live {
  color: var(--status-completed);
}

.wl-rp-wrap .wl-rp-actions .wl-rp-footer-status svg {
  width: 14px;
  height: 14px;
}

.wl-rp-wrap .wl-rp-actions .wl-rp-footer-status .live-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-error);
  animation: pulse-red 1.5s infinite;
}

.wl-rp-wrap {
  /* Overflow menu must stay collapsed until Bootstrap opens it (no stray bar). */
}

.wl-rp-wrap .wl-rp-actions .hamburgerdotswrap {
  position: relative;
  flex: 0 0 auto;
}

.wl-rp-wrap .wl-rp-actions .hamburgerdotswrap > .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.wl-rp-wrap .wl-rp-actions .hamburgerdotswrap > .dropdown-toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.wl-rp-wrap .wl-rp-actions .hamburgerdotswrap > .dropdown-toggle::after {
  display: none;
}

.wl-rp-wrap .wl-rp-actions .hamburgerdotswrap > .dropdown-toggle {
  /* kill Bootstrap caret */
}

.wl-rp-wrap .wl-rp-actions .hamburgerdotswrap .dropdown-menu {
  display: none;
  z-index: 1200;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.wl-rp-wrap .wl-rp-actions .hamburgerdotswrap .dropdown-menu.show {
  display: block;
}

.wl-rp-wrap {
  /* Keep the card (and its open dropdown) above sibling cards */
}

.wl-rp-wrap .wl-rp-grid-item {
  position: relative;
}

.wl-rp-wrap .wl-rp-grid-item:hover,
.wl-rp-wrap .wl-rp-grid-item:focus-within {
  z-index: 20;
}

.wl-rp-wrap {
  /* ── List view ──────────────────────────────────────── */
}

.wl-rp-wrap .wl-rp-list-wrap {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: visible;
}

.wl-rp-wrap .wl-rp-list-row {
  position: relative;
}

.wl-rp-wrap .wl-rp-list-row:hover {
  z-index: 5;
}

.wl-rp-wrap .wl-rp-actions {
  position: relative;
}

.wl-rp-wrap .wl-rp-actions .btn-group.hamburgerdotswrap {
  position: static;
}

.wl-rp-wrap .wl-rp-actions .dropdown-menu {
  z-index: 1200;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.wl-rp-wrap .wl-rp-list-header,
.wl-rp-wrap .wl-rp-list-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 130px 150px 120px 200px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}

.wl-rp-wrap .wl-rp-list-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.wl-rp-wrap .wl-rp-list-header span {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wl-rp-wrap .wl-rp-list-header span:last-child {
  justify-self: end;
}

.wl-rp-wrap .wl-rp-actions {
  justify-self: end;
}

.wl-rp-wrap .wl-rp-list-row {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
}

.wl-rp-wrap .wl-rp-list-row:first-of-type {
  border-top: none;
}

.wl-rp-wrap .wl-rp-list-row:hover {
  background: var(--color-surface);
}

.wl-rp-wrap .wl-rp-list-thumb {
  width: 64px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.wl-rp-wrap .wl-rp-list-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wl-rp-wrap .wl-rp-list-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wl-rp-wrap .wl-rp-list-title .wl-rp-list-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wl-rp-wrap .wl-rp-list-title .wl-rp-list-sub {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.wl-rp-wrap .wl-rp-list-date,
.wl-rp-wrap .wl-rp-list-reg {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.wl-rp-wrap {
  /* STATUS column: icon + colored text (no filled pill) */
}

.wl-rp-wrap .wl-rp-list-row .listing-badge.wl-status {
  background: transparent !important;
  backdrop-filter: none;
  padding: 0;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  text-transform: none;
  letter-spacing: 0;
}

.wl-rp-wrap .wl-rp-list-row .listing-badge.wl-status svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.wl-rp-wrap .wl-rp-list-row .listing-badge.wl-status.live {
  color: var(--color-error) !important;
  border: none !important;
}

.wl-rp-wrap .wl-rp-list-row .listing-badge.wl-status.live .live-pulse-dot {
  background: var(--color-error);
}

.wl-rp-wrap .wl-rp-list-row .listing-badge.wl-status.upcoming {
  color: var(--color-graph-gold) !important;
  text-decoration: underline !important;
  border: none !important;
  cursor: pointer;
}

.wl-rp-wrap .wl-rp-list-row .listing-badge.wl-status.ongoing {
  color: var(--color-graph-teal) !important;
  text-decoration: underline !important;
  border: none !important;
  cursor: pointer;
}

.wl-rp-wrap .wl-rp-list-row .listing-badge.wl-status.draft {
  color: var(--engager-notif-color) !important;
  text-decoration: underline !important;
  border: none !important;
  cursor: pointer;
}

.wl-rp-wrap .wl-rp-list-row .listing-badge.wl-status.completed {
  color: var(--color-graph-teal) !important;
  text-decoration: underline !important;
  border: none !important;
  cursor: pointer;
}

.wl-rp-wrap .wl-rp-list-row .listing-badge.wl-status.ondemand {
  color: var(--color-graph-blue) !important;
  text-decoration: underline !important;
  border: none !important;
  cursor: pointer;
}

@media (max-width: 640px) {
  .wl-rp-wrap .wl-rp-list-header {
    display: none;
  }

  .wl-rp-wrap .wl-rp-list-row {
    grid-template-columns: 64px 1fr auto;
    row-gap: 4px;
  }

  .wl-rp-wrap .wl-rp-list-date,
  .wl-rp-wrap .wl-rp-list-reg {
    display: none;
  }
}

/* ===========================================================================
   End of WebinarDark.css
   =========================================================================== */

.content-body {
  max-width: 99% !important;
  margin-left: 5%;
  margin-right: 5%;
}

body .app-content.content .content-body .whitecardbox.invitation-attendees-img-upload:not(:last-child),
body[data-theme=dark] .app-content.content .content-body .whitecardbox.invitation-attendees-img-upload:not(:last-child),
body[data-theme=light] .app-content.content .content-body .whitecardbox.invitation-attendees-img-upload:not(:last-child) {
  border-bottom: 1px solid var(--color-border) !important;
  padding-bottom: 30px !important;
}

/* Wizard confirm dialog (unsaved thumbnail changes, etc.) */

.wz-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}

.wz-confirm-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 26px 26px 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #16161a;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  text-align: center;
  color: #fff;
}

.wz-confirm-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.wz-confirm-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.wz-confirm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(212, 169, 74, 0.14);
  color: #d4a94a;
}

.wz-confirm-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
}

.wz-confirm-text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.wz-confirm-actions {
  display: flex;
  gap: 10px;
}

.wz-confirm-actions button {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wz-confirm-btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
}

.wz-confirm-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

.wz-confirm-btn-primary {
  border: 1px solid #d4a94a;
  background: #d4a94a;
  color: #1a1a1a;
}

.wz-confirm-btn-primary:hover {
  filter: brightness(1.06);
}

/* ---------------------------------------------------------------------------
   Toast notifications — markup + lifecycle live in
   js/components/Notification.js (showNotification). Accent color is passed in
   per toast via --wb-toast-accent / --wb-toast-glow.
   --------------------------------------------------------------------------- */

#wb-toast-wrap {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
}

.wb-toast {
  pointer-events: auto;
  min-width: 300px;
  max-width: 380px;
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--color-surface);
  background-image: linear-gradient(90deg, transparent 50%, var(--wb-toast-glow) 100%);
  background-repeat: no-repeat;
  border: 1px solid var(--wb-toast-glow);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: wb-toast-in 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}

.wb-toast.is-out {
  animation: none;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.3s, transform 0.3s;
}

.wb-toast__body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 10px;
}

.wb-toast__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--wb-toast-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wb-toast__text {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.wb-toast__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--wb-toast-accent);
  margin-bottom: 3px;
}

.wb-toast__msg {
  font-size: 12.5px;
  color: var(--color-text);
  line-height: 1.5;
  word-break: break-word;
}

.wb-toast__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  font-size: 18px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.5;
}

.wb-toast__close:hover {
  opacity: 1;
}

.wb-toast__track {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
}

.wb-toast__bar {
  height: 100%;
  width: 100%;
  background: var(--wb-toast-accent);
}

@keyframes wb-toast-in {
  from {
    opacity: 0;
    transform: translateX(calc(100% + 24px));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   AttendeeDetailModal.css
   Premium redesign — matches PodUp light-theme design system.
   Class prefix: .adm-
============================================================ */

/* ---------- Overlay ---------- */

.adm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10050;
  padding: 20px;
  animation: adm-fade-in 0.18s ease-out;
  font-family: var(--font-primary);
}

/* ---------- Modal shell ---------- */

.adm-modal {
  background: var(--modal-bg);
  color: var(--modal-text);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: adm-slide-up 0.22s ease-out;
}

/* ============================================================
   HEADER
============================================================ */

.adm-header {
  position: relative;
  padding: 22px 28px 24px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.adm-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.adm-header-eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 4px;
}

.adm-header-title {
  margin: 0;
  font-size: 17px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.adm-close-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}

.adm-close-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-dim);
}

/* ---------- Identity row ---------- */

.adm-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.adm-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success) 100%);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-surface);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xl);
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--color-success-bg);
  letter-spacing: -0.02em;
}

.adm-identity-info {
  min-width: 0;
  flex: 1;
}

.adm-name {
  font-size: 17px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.adm-email {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  word-break: break-all;
  margin: 0;
  font-weight: var(--font-weight-medium);
}

.adm-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.adm-live-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-success);
  animation: adm-pulse-dot 1.8s ease-in-out infinite;
}

@keyframes adm-pulse-dot {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* ============================================================
   BODY
============================================================ */

.adm-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  background: var(--color-surface-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Custom scrollbar */

.adm-body::-webkit-scrollbar {
  width: 8px;
}

.adm-body::-webkit-scrollbar-track {
  background: transparent;
}

.adm-body::-webkit-scrollbar-thumb {
  background: var(--color-dim);
  border-radius: var(--radius-md);
}

.adm-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ---------- Section card ---------- */

.adm-section {
  background: var(--color-surface);
  border-radius: 14px;
  padding: 18px 20px 16px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.adm-section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.adm-section-title::before {
  content: "";
  width: 4px;
  height: 14px;
  background: linear-gradient(180deg, var(--color-success) 0%, var(--color-success) 100%);
  border-radius: 2px;
}

/* ---------- Data grid ---------- */

.adm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}

.adm-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.adm-row-full {
  grid-column: 1/-1;
}

.adm-row-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-medium);
}

.adm-row-value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  word-break: break-word;
  min-width: 0;
  line-height: 1.4;
}

/* ---------- Badges ---------- */

.adm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  line-height: 1.4;
}

.adm-badge-green {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success-border);
}

.adm-badge-yellow {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-primary);
}

.adm-badge-gray {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.adm-badge-blue {
  background: var(--color-info-bg);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.adm-badge-red {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error-border);
}

/* ============================================================
   FOOTER
============================================================ */

.adm-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.adm-btn {
  padding: 10px 22px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
}

.adm-btn:hover {
  background: var(--color-surface-2);
  border-color: var(--color-dim);
  color: var(--color-text);
}

.adm-btn-primary {
  background: linear-gradient(95deg, var(--color-success) 3.96%, var(--color-success) 100%);
  color: var(--color-surface);
  border-color: transparent;
}

.adm-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--color-success-bg);
  background: linear-gradient(95deg, var(--color-success) 3.96%, var(--color-success) 100%);
  color: var(--color-surface);
  border-color: transparent;
}

/* ============================================================
   LOADER & EMPTY STATES
============================================================ */

.adm-loader-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}

.adm-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  font-weight: var(--font-weight-medium);
}

/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes adm-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes adm-slide-up {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

@media (max-width: 640px) {
  .adm-overlay {
    padding: 12px;
    align-items: flex-end;
  }

  .adm-modal {
    max-height: 94vh;
    border-radius: 16px 16px 0 0;
    max-width: 100%;
  }

  .adm-header {
    padding: 18px 20px 20px;
  }

  .adm-header-title {
    font-size: 16px;
  }

  .adm-avatar {
    width: 48px;
    height: 48px;
    font-size: 19px;
  }

  .adm-name {
    font-size: 16px;
  }

  .adm-body {
    padding: 16px 16px;
    gap: 10px;
  }

  .adm-section {
    padding: 16px 16px 14px;
  }

  .adm-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .adm-footer {
    padding: 12px 16px;
  }
}

@media (max-width: 400px) {
  .adm-identity {
    gap: 12px;
  }

  .adm-row-value {
    font-size: var(--font-size-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  .adm-overlay,
  .adm-modal,
  .adm-live-pill::before {
    animation: none !important;
  }

  .adm-btn,
  .adm-close-btn,
  .adm-btn-primary {
    transition: none !important;
    transform: none !important;
  }
}

.err-popup-card,
.err-popup-card * {
  font-family: inherit;
}

.err-popup-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.err-popup-card {
  background-color: var(--color-surface);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
  position: relative;
  text-align: center;
  overflow: hidden;
}

.err-popup-progress-bar {
  height: 5px;
  background: linear-gradient(90deg, var(--color-error), var(--color-error));
  width: 100%;
}

.err-popup-body {
  padding: 36px 32px 28px;
}

.err-popup-close-btn {
  position: absolute;
  top: 18px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  font-family: inherit;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.err-popup-icon-outer {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: var(--color-error-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.err-popup-icon-inner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.err-popup-title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.err-popup-subtitle {
  margin: 0 0 20px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-error);
}

.err-popup-info-box {
  background-color: var(--color-error-bg);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.err-popup-message {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: 1.55;
  text-align: center;
}

.err-popup-message--with-code {
  margin: 0 0 14px;
}

.err-popup-message--no-code {
  margin: 0;
}

.err-popup-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.err-popup-code-label {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.err-popup-code-value {
  display: inline-block;
  min-width: 44px;
  padding: 6px 14px;
  border: 2px solid var(--color-error-border);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-error);
  text-align: center;
  background-color: var(--color-surface);
}

.err-popup-what-happened {
  background-color: var(--color-surface-2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 22px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.err-popup-what-happened-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--color-error-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.err-popup-what-happened-icon span {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-error);
}

.err-popup-what-happened-title {
  margin: 0 0 4px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.err-popup-what-happened-message {
  margin: 0 0 8px;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.err-popup-bullets {
  margin: 0;
  padding-left: 18px;
}

.err-popup-bullets li {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.err-popup-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.err-popup-btn {
  flex: 1;
  padding: 11px 18px;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.2;
}

.err-popup-btn svg {
  flex-shrink: 0;
}

.err-popup-btn--secondary {
  color: var(--btn-primary-color) !important;
  background: var(--btn-primary-bg) !important;
  border: 1px solid transparent !important;
  border-radius: var(--btn-radius) !important;
}

.err-popup-btn--primary {
  border: 1px solid var(--btn-quinary-border);
  background: var(--btn-quinary-bg);
  color: var(--btn-quinary-color) !important;
}

/* ── Keyframe animations ─────────────────────────────────────── */

@keyframes popup-overlay-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes popup-card-enter {
  from {
    opacity: 0;
    transform: translateY(48px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes popup-icon-pop {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }

  55% {
    opacity: 1;
    transform: scale(1.18);
  }

  75% {
    transform: scale(0.93);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes popup-checkmark-draw {
  from {
    stroke-dashoffset: 32;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes popup-progress-fill {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes popup-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popup-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(8, 210, 89, 0.35);
  }

  70% {
    box-shadow: 0 0 0 14px rgba(8, 210, 89, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(8, 210, 89, 0);
  }
}

/* ── Base ────────────────────────────────────────────────────── */

.popup-card,
.popup-card * {
  font-family: inherit;
}

.popup-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: popup-overlay-enter 0.25s ease both;
}

.popup-card {
  background-color: var(--color-surface);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
  position: relative;
  text-align: center;
  overflow: hidden;
  animation: popup-card-enter 0.38s cubic-bezier(0.34, 1.48, 0.64, 1) 0.05s both;
}

.popup-progress-bar {
  height: 5px;
  background: linear-gradient(90deg, var(--color-success), var(--color-success));
  width: 100%;
  animation: popup-progress-fill 0.65s ease 0.15s both;
}

.popup-body {
  padding: 36px 32px 28px;
}

.popup-close-btn {
  position: absolute;
  top: 18px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  font-family: inherit;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.popup-close-btn:hover {
  color: var(--color-text);
  transform: rotate(90deg);
}

/* ── Icon ────────────────────────────────────────────────────── */

.popup-icon-outer {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: var(--color-success-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  animation: popup-icon-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both, popup-pulse-ring 1.4s ease 0.8s 100;
}

.popup-icon-inner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Checkmark draw-on animation */

.popup-checkmark-path {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: popup-checkmark-draw 0.45s ease 0.65s forwards;
}

/* ── Text content (staggered fade-up) ─────────────────────────── */

.popup-title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  animation: popup-fade-up 0.35s ease 0.45s both;
}

.popup-subtitle {
  margin: 0 0 20px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-success);
  animation: popup-fade-up 0.35s ease 0.52s both;
}

.popup-info-box {
  background-color: var(--color-surface-2);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  animation: popup-fade-up 0.35s ease 0.6s both;
}

.popup-message {
  font-size: var(--font-size-md);
  color: var(--color-text);
  line-height: 1.55;
  text-align: center;
  white-space: pre-line;
}

.popup-message--with-id {
  margin: 0 0 14px;
}

.popup-message--no-id {
  margin: 0;
}

.popup-summary-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.popup-summary-label {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.popup-summary-value {
  display: inline-block;
  min-width: 44px;
  padding: 6px 14px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: center;
  background-color: var(--color-surface);
}

/* ── Next-step section ───────────────────────────────────────── */

.popup-next-step {
  background-color: var(--color-surface-2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 22px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  animation: popup-fade-up 0.35s ease 0.67s both;
}

.popup-next-step-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.popup-next-step-title {
  margin: 0 0 4px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.popup-next-step-message {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ── Buttons ─────────────────────────────────────────────────── */

.popup-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  animation: popup-fade-up 0.35s ease 0.74s both;
}

.popup-btn {
  flex: 1;
  padding: 11px 18px;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.popup-btn:hover {
  transform: translateY(-2px);
}

.popup-btn:active {
  transform: translateY(0);
}

.popup-btn--secondary {
  border: var(--btn-primary-border, 1px solid transparent);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
}

.popup-btn--secondary:hover {
  box-shadow: var(--btn-primary-shadow-hover);
  background: var(--btn-primary-bg-hover);
}

.popup-btn--secondary .popup-btn-icon {
  font-size: 16px;
}

.popup-btn--primary {
  border: var(--btn-primary-border, 1px solid transparent);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
}

.popup-btn--primary:hover {
  box-shadow: var(--btn-primary-shadow-hover);
  background: var(--btn-primary-bg-hover);
}

.popup-btn--primary .popup-btn-icon {
  font-size: 16px;
}

.studio_wrap h2 {
  padding: 0 0 0 0 !important;
}

html body.fixed-navbar.fullpagebody.recorderpages {
  overflow: auto;
}

/* Attendee-facing pages only. This bundle is also loaded by the in-app webinar
   pages (list, create wizard), which must keep the header AI credit pill. */

body:has(.attendee-registration-page) #ai-credit-badge {
  display: none !important;
}

.attendee-registration-page,
.attendee-registration-page * {
  box-sizing: border-box;
}

.attendee-registration-page {
  min-height: 100vh;
  background: var(--color-surface-2);
  color: var(--color-text);
}

.attendee-reg-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.attendee-reg-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
}

.attendee-reg-hero {
  position: relative;
  min-height: 350px;
  display: flex;
  align-items: center;
  padding: 40px 0;
  color: var(--color-surface);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 100%);
  overflow: hidden;
  isolation: isolate;
}

.attendee-reg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(6, 37, 59, 0.94) 0%, rgba(15, 23, 42, 0.8) 56%, rgba(15, 23, 42, 0.64) 100%);
}

.attendee-reg-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.attendee-reg-hero-content {
  position: relative;
  z-index: 1;
}

.attendee-reg-badges,
.attendee-reg-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.attendee-reg-badges {
  gap: 8px;
  margin-bottom: 18px;
}

.attendee-reg-badge {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--color-surface);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.attendee-reg-badge.is-live {
  background: var(--color-error);
}

.attendee-reg-badge.is-scheduled {
  background: linear-gradient(95deg, var(--color-success) 3.96%, var(--color-success) 100%);
}

.attendee-reg-badge.is-completed,
.attendee-reg-badge.is-cancelled,
.attendee-reg-badge.is-default {
  background: var(--color-text-muted);
}

.attendee-reg-badge.is-draft {
  background: var(--color-warning);
}

.attendee-reg-badge.is-soft,
.attendee-reg-badge.is-muted {
  background: rgba(255, 255, 255, 0.14);
}

.attendee-reg-live-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: currentColor;
}

.attendee-reg-hero h1 {
  max-width: 760px;
  margin: 0 0 18px;
  color: var(--color-text);
  font-size: 44px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
}

.attendee-reg-hero p {
  max-width: 700px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  line-height: 28px;
}

.attendee-reg-hero-meta {
  gap: 14px;
}

.attendee-reg-hero-meta span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
}

.attendee-reg-main {
  position: relative;
  z-index: 2;
  margin-top: -46px;
  padding-bottom: 64px;
}

.attendee-reg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
}

.attendee-reg-content,
.attendee-reg-speaker-body {
  min-width: 0;
}

.attendee-reg-section,
.attendee-reg-speaker-card,
.attendee-reg-recording-card,
.attendee-reg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.attendee-reg-section,
.attendee-reg-recording-card {
  padding: 26px;
  margin-bottom: 18px;
}

.attendee-reg-section h2,
.attendee-reg-speakers-section h2,
.attendee-reg-recordings-section h2 {
  margin: 0 0 16px;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  line-height: 28px;
  font-weight: 750;
  letter-spacing: 0;
}

.attendee-reg-section h3,
.attendee-reg-recording-card h3 {
  margin: 0 0 10px;
  color: var(--color-text);
  font-size: calc(var(--font-size-xl) + 2px);
  line-height: 22px;
  font-weight: var(--font-weight-medium);
}

.attendee-reg-rich-text,
.attendee-reg-rich-text :is(p, span, div, li, blockquote),
.attendee-reg-section p,
.attendee-reg-recording-card p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: 26px;
}

.attendee-reg-rich-text :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote) {
  margin: 0 0 14px;
}

.attendee-reg-rich-text :is(ul, ol) {
  padding-left: 20px;
  list-style: initial;
}

.attendee-reg-objectives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.attendee-reg-objective {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.attendee-reg-objective .attendee-reg-icon {
  margin-top: 3px;
  color: var(--color-success);
}

.attendee-reg-objective span,
.attendee-reg-benefits-list li {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: 22px;
}

.attendee-reg-benefits-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.attendee-reg-benefits-list li {
  position: relative;
  padding: 10px 12px 10px 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.attendee-reg-benefits-list li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.attendee-reg-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.attendee-reg-pill {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 18px;
  text-transform: capitalize;
}

.attendee-reg-speakers-section,
.attendee-reg-recordings-section {
  margin-bottom: 18px;
}

.attendee-reg-speakers-list,
.attendee-reg-recordings-list {
  display: grid;
  gap: 14px;
}

.attendee-reg-speaker-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px;
}

.attendee-reg-speaker-photo,
.attendee-reg-speaker-avatar {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 50%;
}

.attendee-reg-speaker-photo {
  -o-object-fit: cover;
     object-fit: cover;
  border: 3px solid var(--color-primary);
}

.attendee-reg-speaker-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-orange);
  color: #ffffff;
  font-size: 26px;
  font-weight: 800;
}

.attendee-reg-speaker-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.attendee-reg-speaker-heading strong {
  color: var(--color-text);
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
}

.attendee-reg-speaker-heading span {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-info-bg);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 16px;
}

.attendee-reg-speaker-body p {
  margin: 0 0 10px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 21px;
}

.attendee-reg-speaker-meta {
  color: var(--color-text-secondary) !important;
  font-weight: var(--font-weight-medium);
}

.attendee-reg-speaker-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.attendee-reg-speaker-links a {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.attendee-reg-recording-video {
  width: 100%;
  max-height: 380px;
  margin-top: 10px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.attendee-reg-sidebar {
  position: sticky;
  top: 22px;
}

.attendee-reg-card {
  overflow: hidden;
}

.attendee-reg-price-block {
  padding: 24px 26px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
}

.attendee-reg-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.attendee-reg-price-row img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
}

.attendee-reg-price-row strong {
  color: var(--color-text);
  font-size: 32px;
  line-height: 1;
  font-weight: 850;
}

.attendee-reg-price-row strong.is-free {
  color: var(--color-success);
}

.attendee-reg-price-row span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 18px;
}

.attendee-reg-free-label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid var(--color-success-border);
  border-radius: 999px;
  background: var(--color-success-bg);
  color: var(--color-success) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium);
  line-height: 16px !important;
  text-transform: uppercase;
}

.attendee-reg-offer-pill {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 16px;
}

.attendee-reg-session-meta,
.attendee-reg-ended-block {
  padding: 22px 26px 0;
}

.attendee-reg-session-meta {
  display: grid;
  gap: 10px;
}

.attendee-reg-session-meta span,
.attendee-reg-capacity {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
}

.attendee-reg-session-meta .attendee-reg-icon,
.attendee-reg-capacity .attendee-reg-icon {
  margin-top: 2px;
  color: var(--color-text-secondary);
}

.attendee-reg-timer-card {
  margin: 20px 26px 0;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.attendee-reg-timer-card.is-live {
  border-color: var(--color-border);
  background: var(--color-surface-2);
}

.attendee-reg-timer-card p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 10px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.attendee-reg-timer-card.is-live p {
  color: var(--color-text);
}

.attendee-reg-timer-card.is-live p .attendee-reg-live-dot {
  background: var(--color-error);
}

.attendee-reg-timer-grid {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.attendee-reg-timer-item {
  text-align: center;
}

.attendee-reg-timer-item strong {
  min-width: 42px;
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-lg);
  line-height: 22px;
  font-weight: 800;
}

.attendee-reg-timer-item strong.is-live {
  background: var(--color-bg);
}

.attendee-reg-timer-item span {
  display: block;
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 14px;
  font-weight: var(--font-weight-medium);
}

.attendee-reg-form {
  padding-bottom: 26px;
}

.attendee-reg-form-field {
  margin-bottom: 14px;
}

.attendee-reg-form-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 18px;
  font-weight: var(--font-weight-medium);
}

.attendee-reg-form-field label span {
  color: var(--color-error);
}

.attendee-reg-input-wrap {
  position: relative;
}

.attendee-reg-input-wrap img {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  width: 16px;
  transform: translateY(-50%);
  opacity: 0.48;
  pointer-events: none;
}

.attendee-reg-input-wrap input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  line-height: 20px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.attendee-reg-input-wrap.has-error input {
  border-color: var(--color-error);
}

.attendee-reg-error {
  display: block;
  margin-top: 5px;
  color: var(--color-error);
  font-size: var(--font-size-xs);
  line-height: 16px;
}

.attendee-reg-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  /* margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-2); */
}

.attendee-reg-checkbox-row input {
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

.attendee-reg-checkbox-row label {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 18px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.attendee-reg-checkbox-row a,
.attendee-reg-speaker-links a:hover {
  color: var(--color-primary);
  font-weight: 800;
  text-decoration: none;
}

.attendee-reg-approval-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid var(--color-warning-border, var(--color-warning));
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--font-size-sm);
  line-height: 18px;
}

.attendee-reg-approval-note .attendee-reg-icon {
  margin-top: 1px;
  color: var(--color-warning);
}

.attendee-reg-approval-note span {
  flex: 1;
  min-width: 0;
}

.attendee-reg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  box-shadow: var(--btn-primary-shadow);
  font-size: var(--font-size-md);
  line-height: 20px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.attendee-reg-btn:hover {
  background: var(--btn-primary-bg-hover) !important;
  box-shadow: var(--btn-primary-shadow-hover);
  color: var(--btn-primary-color);
  text-decoration: none;
}

.attendee-reg-btn:disabled {
  background: var(--color-text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

.attendee-reg-ended-block {
  padding-bottom: 26px;
  text-align: center;
}

.attendee-reg-ended-block p {
  margin: 0 0 14px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: 22px;
}

.attendee-reg-capacity {
  justify-content: center;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.attendee-reg-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: 20px;
  text-align: center;
}

/* Attendee join/verification page */

.attendee-join-page {
  min-height: calc(100vh - 60px);
  display: grid !important;
  grid-template-columns: minmax(420px, 45%) minmax(0, 1fr);
}

.attendee-join-banner {
  position: relative;
  min-height: calc(100vh - 60px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 64px 52px !important;
  overflow: hidden;
  color: var(--color-surface) !important;
  isolation: isolate;
}

.attendee-join-banner-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.attendee-join-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(6, 37, 59, 0.94) 0%, rgba(15, 23, 42, 0.84) 60%, rgba(15, 23, 42, 0.72) 100%);
}

.attendee-join-banner-content {
  max-width: 460px !important;
  position: relative;
  z-index: 1;
}

.attendee-join-status {
  margin-bottom: 20px;
}

.attendee-join-banner .attendee-reg-badge {
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.attendee-join-banner h1 {
  margin: 0 0 18px !important;
  color: var(--btn-secondary-color) !important;
  font-size: 38px !important;
  line-height: 46px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.attendee-join-banner h1 + p {
  margin: 0 0 28px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: var(--font-size-md) !important;
  line-height: 25px !important;
}

.attendee-join-meta-list {
  display: grid !important;
  gap: 12px !important;
  margin-bottom: 22px !important;
  grid-template-columns: repeat(2, 1fr);
}

.attendee-join-meta-item {
  min-height: 40px;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9) !important;
}

.attendee-join-meta-item .attendee-reg-icon {
  flex-shrink: 0;
}

.attendee-join-precountdown.has-speakers {
  margin-bottom: 28px;
}

.attendee-join-banner .webinar-pre-countdown,
.attendee-join-banner [class*=countdown] {
  border-radius: var(--radius-md);
}

.attendee-join-speakers p {
  margin: 0 0 14px !important;
  color: rgba(255, 255, 255, 0.54) !important;
  font-size: var(--font-size-xs) !important;
  line-height: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.attendee-join-speaker-list {
  display: grid !important;
  gap: 12px !important;
}

.attendee-join-speaker {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0;
}

.attendee-join-speaker-avatar {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  border: 2px solid rgba(255, 255, 255, 0.72) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-bg));
  color: var(--color-surface);
  font-size: 17px;
  font-weight: 800;
}

.attendee-join-speaker-copy {
  min-width: 0;
}

.attendee-join-speaker-copy strong {
  display: block;
  color: var(--color-surface) !important;
  font-size: var(--font-size-md) !important;
  line-height: 20px !important;
  font-weight: var(--font-weight-medium) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendee-join-speaker-copy span,
.attendee-join-more-speakers {
  display: block;
  color: rgba(255, 255, 255, 0.56) !important;
  font-size: var(--font-size-sm);
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendee-join-banner footer,
.attendee-join-banner > p,
.attendee-join-footer {
  margin-top: auto !important;
  padding-top: 48px !important;
  color: rgba(255, 255, 255, 0.32) !important;
  font-size: var(--font-size-sm) !important;
  line-height: 18px !important;
}

.attendee-join-form-panel {
  min-height: calc(100vh - 60px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 56px 32px !important;
  background: var(--color-surface-2) !important;
}

.attendee-join-form-card {
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  /* padding: 32px !important;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); */
}

.attendee-join-form-header {
  margin-bottom: 28px !important;
}

.attendee-join-form-header img {
  height: 50px !important;
  width: auto;
  display: block !important;
  margin: 0 0 22px !important;
  opacity: 0.9 !important;
}

.attendee-join-form-header h2 {
  margin: 0 0 8px !important;
  color: var(--color-text) !important;
  font-size: 28px !important;
  line-height: 36px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.attendee-join-form-header p {
  margin: 0 !important;
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-md) !important;
  line-height: 22px !important;
}

.attendee-join-form {
  padding: 0 !important;
}

.attendee-join-form > div {
  margin-bottom: 16px !important;
}

.attendee-join-form label {
  display: block !important;
  margin-bottom: 7px !important;
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-base) !important;
  line-height: 18px !important;
  font-weight: var(--font-weight-medium) !important;
}

.attendee-join-form label span {
  color: var(--color-error) !important;
}

.attendee-join-form input[type=text],
.attendee-join-form input[type=email],
.attendee-join-form input[type=password] {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px 0 42px !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--font-size-md) !important;
  line-height: 20px !important;
  outline: none !important;
}

.attendee-join-form a {
  color: var(--color-primary) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.attendee-join-forgot-row {
  margin-top: -4px;
  margin-bottom: 20px !important;
  text-align: right;
}

.attendee-reg-error-spaced {
  margin-bottom: 14px;
}

.attendee-join-form button[type=submit],
.attendee-join-form .attendee-reg-btn {
  margin-top: 20px !important;
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color) !important;
  box-shadow: var(--btn-primary-shadow) !important;
}

.attendee-join-form button[type=submit]:hover,
.attendee-join-form .attendee-reg-btn:hover {
  background: var(--btn-primary-bg-hover) !important;
  box-shadow: var(--btn-primary-shadow-hover) !important;
}

.attendee-join-form-card > p,
.attendee-join-form-card footer,
.attendee-join-card-footer {
  margin: 28px 0 0 !important;
  color: var(--color-text-muted) !important;
  font-size: var(--font-size-sm) !important;
  line-height: 18px !important;
  text-align: center !important;
}

.attendee-state-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-primary) 100%);
  color: var(--color-text);
}

.attendee-state-page,
.attendee-state-page * {
  box-sizing: border-box;
}

.attendee-state-logo {
  width: 42px;
  height: 42px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 28px;
}

.attendee-state-card {
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.attendee-state-header {
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-bg) 100%);
}

.attendee-state-header h2 {
  margin: 0;
  color: var(--color-surface);
  font-size: var(--font-size-lg);
  line-height: 28px;
  font-weight: 800;
}

.attendee-state-header p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--font-size-base);
  line-height: 20px;
}

.attendee-state-body {
  padding: 40px 32px;
  text-align: center;
}

.attendee-state-body.is-form {
  padding: 28px 32px;
  text-align: left;
}

.attendee-state-icon {
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border-radius: 50%;
}

.attendee-state-icon svg {
  width: 36px;
  height: 36px;
}

.attendee-state-icon.warning {
  background: var(--color-warning-bg);
  color: var(--color-primary);
  box-shadow: 0 0 0 10px var(--color-warning-bg);
}

.attendee-state-icon.danger {
  background: var(--color-error-bg);
  color: var(--color-error);
  box-shadow: 0 0 0 10px var(--color-error-border);
}

.attendee-state-body h3 {
  margin: 0 0 12px;
  color: var(--color-text);
  font-size: calc(var(--font-size-xl) + 2px);
  line-height: 32px;
  font-weight: 800;
}

.attendee-state-body p {
  margin: 0 0 28px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: 24px;
}

.attendee-state-next-steps {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  text-align: left;
}

.attendee-state-next-steps div {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.attendee-state-next-steps strong,
.attendee-state-next-steps span {
  display: block;
}

.attendee-state-next-steps strong {
  margin-bottom: 2px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: 16px;
  font-weight: 800;
  text-transform: uppercase;
}

.attendee-state-next-steps span {
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: 20px;
  font-weight: 650;
}

.attendee-state-footer {
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.34);
  font-size: var(--font-size-sm);
  line-height: 18px;
}

.attendee-reg-success-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--color-surface-2);
}

.attendee-reg-success-card {
  width: 100%;
  max-width: 520px;
  padding: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.12);
  text-align: center;
}

.attendee-reg-success-icon {
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--color-success-bg);
  color: var(--color-success);
}

.attendee-reg-success-icon .attendee-reg-icon {
  width: 36px;
  height: 36px;
}

.attendee-reg-success-card h2 {
  margin: 0 0 10px;
  color: var(--color-text);
  font-size: 28px;
  line-height: 36px;
  font-weight: 800;
}

.attendee-reg-success-card p {
  margin: 0 0 24px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: 25px;
}

.attendee-reg-success-webinar,
.attendee-reg-success-note {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  text-align: left;
}

.attendee-reg-success-webinar strong,
.attendee-reg-success-webinar span {
  display: block;
}

.attendee-reg-success-webinar strong {
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: 22px;
}

.attendee-reg-success-webinar span,
.attendee-reg-success-note span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 20px;
}

.attendee-reg-success-note {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-info-bg);
}

.attendee-reg-success-note .attendee-reg-icon {
  color: var(--color-primary);
}

.attendee-reg-success-card small {
  display: block;
  margin-top: 24px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.we-page {
  min-height: 100vh;
  background: var(--color-surface-2);
  padding: 40px 24px 56px;
  display: flex;
  justify-content: center;
}

.we-container {
  width: 100%;
  max-width: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.we-logo {
  height: 60px;
  margin-bottom: 28px;
}

.we-card {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.we-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--color-border);
}

.we-card-header-text {
  min-width: 0;
  flex: 1;
}

.we-card-header-title {
  margin: 0 0 4px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  letter-spacing: -0.01em;
  word-break: break-word;
}

.we-card-header-sub {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.we-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-info-bg);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.we-card-body {
  padding: 40px 28px 36px;
  text-align: center;
}

.we-status-visual {
  position: relative;
  width: 85px;
  height: 85px;
  margin: 0 auto 24px;
}

.we-status-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.we-status-icon-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.we-status-svg {
  width: 40px;
  height: 40px;
}

.we-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.we-status-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.we-headline {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 10px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.we-subhead {
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 auto 6px;
  max-width: 440px;
}

.we-note {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 28px;
}

.we-meta-strip {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
}

.we-meta-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.we-meta-value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
  word-break: break-word;
}

.we-meta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.we-meta-dot--mint {
  background: var(--color-success);
}

.we-meta-dot--amber {
  background: var(--color-primary);
}

.we-role-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.we-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.we-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}

.we-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 10px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
}

.we-btn--primary {
  background: linear-gradient(95deg, var(--color-success) 3.96%, var(--color-success) 100%);
  color: var(--color-surface) !important;
  border: none;
  transition: 0.3s all;
}

.we-btn--primary:hover {
  background: linear-gradient(95deg, var(--color-success) 3.96%, var(--color-success) 100%);
}

.we-btn--secondary {
  background: var(--color-surface);
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.we-btn--secondary:hover {
  background: var(--color-surface-2);
  border-color: var(--color-dim);
}

.we-quick-card {
  width: 100%;
  margin-top: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

.we-quick-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0 0 14px;
}

.we-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.we-quick-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  transition: background 0.15s ease, transform 0.12s ease;
}

.we-quick-link:hover {
  background: var(--color-surface);
  transform: translateY(-1px);
}

.we-quick-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.we-quick-icon--blue {
  background: var(--color-info-bg);
  color: var(--color-primary);
}

.we-quick-icon--mint {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.we-quick-icon--pink {
  background: var(--color-error-bg);
  color: var(--color-accent-orange);
}

.we-footer {
  margin-top: 28px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* ---------- Responsive: Desktop (rev row of actions) ---------- */

@media (min-width: 641px) {
  .we-actions {
    flex-direction: row-reverse;
    max-width: 480px;
  }
}

/* ---------- Responsive: Mobile ---------- */

@media (max-width: 991.98px) {
  .attendee-reg-hero {
    min-height: auto;
    padding: 56px 0 78px;
  }

  .attendee-reg-hero h1 {
    font-size: 34px;
    line-height: 42px;
  }

  .attendee-reg-layout {
    grid-template-columns: 1fr;
  }

  .attendee-reg-sidebar {
    position: static;
    order: -1;
  }

  .attendee-join-page {
    grid-template-columns: 1fr !important;
  }

  .attendee-join-banner {
    min-height: auto !important;
    padding: 48px 24px 54px !important;
  }

  .attendee-join-banner > div:first-child {
    max-width: 720px !important;
  }

  .attendee-join-banner footer,
  .attendee-join-banner > p {
    display: none;
  }

  .attendee-join-form-panel {
    min-height: auto !important;
    padding: 24px !important;
  }
}

@media (max-width: 767.98px) {
  .we-card-header {
    padding: 20px 20px 18px;
  }

  .we-card-body {
    padding: 32px 20px 28px;
  }

  .we-headline {
    font-size: var(--font-size-xl);
  }

  .we-subhead {
    font-size: var(--font-size-md);
  }

  .we-meta-strip {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 16px;
  }

  .we-quick-grid {
    grid-template-columns: 1fr;
  }

  .we-quick-card {
    padding: 18px;
  }

  .we-status-visual {
    width: 84px;
    height: 84px;
  }

  .we-status-svg {
    width: 34px;
    height: 34px;
  }

  .attendee-reg-container {
    padding: 0 16px;
  }

  .attendee-reg-hero {
    padding: 42px 0 66px;
  }

  .attendee-reg-hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .attendee-reg-hero p {
    font-size: var(--font-size-md);
    line-height: 24px;
  }

  .attendee-reg-hero-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .attendee-reg-hero-meta span {
    width: 100%;
  }

  .attendee-reg-main {
    margin-top: -34px;
    padding-bottom: 42px;
  }

  .attendee-reg-section,
  .attendee-reg-speaker-card,
  .attendee-reg-recording-card,
  .attendee-reg-price-block,
  .attendee-reg-form,
  .attendee-reg-ended-block {
    padding: 18px;
  }

  .attendee-reg-session-meta {
    padding: 18px 18px 0;
  }

  .attendee-reg-timer-card {
    margin: 18px 18px 0;
  }

  .attendee-reg-speaker-card {
    flex-direction: column;
  }

  .attendee-reg-success-card {
    padding: 30px 20px;
  }

  .attendee-join-banner {
    padding: 38px 16px 44px !important;
  }

  .attendee-join-banner h1 {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .attendee-join-form-panel {
    padding: 16px !important;
  }

  .attendee-join-form-card {
    padding: 22px !important;
  }
}

.attendee-state-page {
  min-height: calc(100vh - 0px);
  background: var(--color-surface-2);
  padding: 40px 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

.attendee-state-logo {
  width: 42px;
  height: 42px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
  margin-bottom: 28px;
}

.attendee-state-card {
  width: 100%;
  max-width: 540px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.attendee-state-header {
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.attendee-state-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
  word-break: break-word;
  text-align: left;
}

/* Optional eyebrow above the title if you ever add one as a span/small element */

.attendee-state-header h2::before {
  content: "WEBINAR SESSION";
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* ---------- Card body ---------- */

.attendee-state-body {
  padding: 40px 32px 36px;
  text-align: center;
}

/* ---------- Status icon medallion ---------- */

.attendee-state-icon {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg) 100%);
  color: var(--color-primary);
}

.attendee-state-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.18;
  pointer-events: none;
}

.attendee-state-icon svg {
  width: 38px;
  height: 38px;
  display: block;
}

/* Variant modifiers */

.attendee-state-icon.info {
  background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg) 100%);
  color: var(--color-primary);
}

.attendee-state-icon.danger {
  background: linear-gradient(135deg, var(--color-error-bg) 0%, var(--color-error-bg) 100%);
  color: var(--color-error);
}

.attendee-state-icon.warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.attendee-state-icon.success {
  background: linear-gradient(135deg, var(--color-success-bg) 0%, var(--color-success-bg) 100%);
  color: var(--color-success);
}

/* ---------- Headline (h3) ---------- */

.attendee-state-body h3 {
  font-size: calc(var(--font-size-xl) + 2px);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 10px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* ---------- Message paragraph ---------- */

.attendee-state-body p {
  font-size: var(--font-size-md);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 auto 24px;
  max-width: 420px;
}

.attendee-state-body p:last-child {
  margin-bottom: 0;
}

/* ---------- Children (action buttons, etc.) ---------- */

.attendee-state-body > *:not(.attendee-state-icon):not(h3):not(p) {
  font-size: calc(var(--font-size-xl) + 2px);
  margin-top: 8px;
}

/* If buttons / links are dropped in directly as children */

.attendee-state-body a,
.attendee-state-body button {
  font-family: inherit;
}

/* ---------- Footer ---------- */

.attendee-state-footer {
  margin-top: 28px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .attendee-state-page {
    padding: 28px 16px 40px;
  }

  .attendee-state-header {
    padding: 18px 20px 16px;
  }

  .attendee-state-body {
    padding: 32px 22px 28px;
  }

  .attendee-state-body h3 {
    font-size: calc(var(--font-size-xl) + 2px);
  }

  .attendee-state-body p {
    font-size: var(--font-size-md);
  }

  .attendee-state-icon {
    width: 78px;
    height: 78px;
  }

  .attendee-state-icon svg {
    width: 32px;
    height: 32px;
  }

  .attendee-state-logo {
    width: 38px;
    height: 38px;
    margin-bottom: 22px;
  }

  .attendee-state-header h2 {
    font-size: 16px;
  }
}

/* ══════════════════════════════════════════════════════════════
   ATTENDEE REGISTRATION — REBUILD (.areg)
   Dark surfaces + white text + gold accents, single grid system.
   ══════════════════════════════════════════════════════════════ */

.areg {
  --areg-gap: 20px;
  --areg-radius: 16px;
  --areg-line: var(--color-border);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
}

.areg *,
.areg *::before,
.areg *::after {
  box-sizing: border-box;
}

.areg .areg-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.areg .areg-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: currentColor;
}

.areg .areg-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.areg {
  /* ── HERO ───────────────────────────────────────────────── */
}

.areg .areg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 56px 0 64px;
  background: var(--color-surface);
}

.areg .areg-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.28;
}

.areg .areg-hero.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.82) 55%, rgba(0, 0, 0, 0.62) 100%);
}

.areg .areg-hero-inner {
  position: relative;
  z-index: 1;
}

.areg {
  /* Brand tile — mirrors the countdown page .wn-brand */
}

.areg .areg-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  min-width: 0;
}

.areg .areg-brand-logo {
  width: 42px;
  height: 42px;
  overflow: hidden;
}

.areg .areg-brand-logo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.areg .areg-brand-copy {
  min-width: 0;
}

.areg .areg-brand-name {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.areg .areg-brand-sub {
  font-size: 12px;
  color: var(--wt-muted, #9aa0a6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.areg .areg-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.areg .areg-hero-logo {
  height: 44px;
  width: auto;
  max-width: 180px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 auto;
}

.areg .areg-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.areg .areg-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--areg-line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.areg .areg-badge.is-live {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
  color: var(--color-error);
}

.areg .areg-badge.is-scheduled {
  border-color: var(--color-primary);
  background: var(--color-warning-bg);
  color: var(--color-primary-light);
}

.areg .areg-badge.is-completed,
.areg .areg-badge.is-cancelled,
.areg .areg-badge.is-draft,
.areg .areg-badge.is-default {
  color: var(--color-text-muted);
}

.areg .areg-hero h1 {
  max-width: 900px;
  margin: 0 0 14px;
  color: var(--color-text);
  font-size: 40px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.areg .areg-hero-sub {
  max-width: 780px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 1.7;
}

.areg {
  /* Aligned fact strip — one row of icon + label/value pairs */
}

.areg .areg-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--areg-line);
  border-radius: var(--areg-radius);
  background: var(--areg-line);
  overflow: hidden;
}

.areg .areg-facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--color-surface);
  min-width: 0;
}

.areg .areg-facts-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.areg .areg-facts-icon .areg-icon {
  width: 15px;
  height: 15px;
  color: var(--color-text);
}

.areg .areg-facts-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.areg .areg-facts-text em {
  font-style: normal;
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.areg .areg-facts-text strong {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--color-text);
  word-break: break-word;
}

.areg {
  /* ── BODY GRID ──────────────────────────────────────────── */
}

.areg .areg-main {
  flex: 1;
  padding-top: 32px;
  padding-bottom: 56px;
}

.areg .areg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--areg-gap);
  align-items: start;
}

.areg .areg-col-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--areg-gap);
}

.areg .areg-col-side {
  min-width: 0;
  position: sticky;
  top: 20px;
}

.areg {
  /* ── CARDS ──────────────────────────────────────────────── */
}

.areg .areg-card {
  border: 1px solid var(--areg-line);
  border-radius: var(--areg-radius);
  background: var(--color-surface);
  padding: 24px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.areg .areg-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--areg-line);
}

.areg .areg-card-head .areg-icon {
  width: 15px;
  height: 15px;
}

.areg .areg-card-head h2 {
  margin: 0;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.areg .areg-rich {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.75;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.areg .areg-rich :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) {
  margin: 0 0 12px;
}

.areg .areg-rich :is(p, span, div, li, blockquote) {
  color: var(--color-text-secondary);
}

.areg .areg-rich :is(ul, ol) {
  padding-left: 20px;
  list-style: initial;
}

.areg .areg-rich :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
}

.areg .areg-rich > :last-child {
  margin-bottom: 0;
}

.areg .areg-rich a {
  color: var(--color-primary-light);
}

.areg .areg-rich img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-10);
}

.areg {
  /* Checklists — icon column stays aligned across wrapped lines */
}

.areg .areg-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.areg .areg-checklist li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--areg-line);
  border-radius: var(--radius-10);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.areg .areg-checklist .areg-icon {
  width: 14px;
  height: 14px;
  margin-top: 3px;
}

.areg .areg-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.areg .areg-split h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.areg .areg-split p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.areg .areg-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 2px 8px;
  border: var(--icon-style-box-border) !important;
  border-radius: var(--icon-style-box-border-radius) !important;
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  text-transform: capitalize;
}

.areg {
  /* ── SPEAKERS ───────────────────────────────────────────── */
}

.areg .areg-speakers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.areg .areg-speaker {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--areg-line);
  border-radius: var(--radius-12);
  background: var(--color-surface-2);
}

.areg .areg-speaker-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--color-primary);
}

.areg .areg-speaker-photo.is-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-warning-bg);
  color: var(--color-primary-light);
  font-size: 20px;
  font-weight: 800;
}

.areg .areg-speaker-body {
  min-width: 0;
}

.areg .areg-speaker-body strong {
  display: block;
  color: var(--color-text);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
}

.areg .areg-speaker-body .areg-speaker-role {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.areg .areg-speaker-body p {
  margin: 10px 0 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.areg .areg-speaker-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.areg .areg-speaker-links a {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--areg-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary-light);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.areg .areg-speaker-links a:hover {
  border-color: var(--color-primary);
  text-decoration: none;
}

.areg {
  /* ── SPEC TABLE ─────────────────────────────────────────── */
}

.areg .areg-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 28px;
  margin: 0;
}

.areg .areg-spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--areg-line);
}

.areg .areg-spec dt {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.3px;
}

.areg .areg-spec dd {
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  text-align: right;
  text-transform: capitalize;
  word-break: break-word;
}

.areg {
  /* ── RECORDINGS ─────────────────────────────────────────── */
}

.areg .areg-recordings {
  display: grid;
  gap: 16px;
}

.areg .areg-recording h3 {
  margin: 0 0 10px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
}

.areg .areg-recording p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.areg .areg-recording-video {
  width: 100%;
  max-height: 420px;
  border-radius: var(--radius-12);
  background: #000;
}

.areg {
  /* ── REGISTRATION CARD ──────────────────────────────────── */
}

.areg .areg-reg-card {
  border: 1px solid var(--areg-line);
  border-radius: var(--areg-radius);
  background: var(--color-surface);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.areg .areg-reg-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.areg .areg-reg-price {
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--areg-line);
  background: var(--color-surface-2);
}

.areg .areg-reg-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.areg .areg-reg-price-row img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
}

.areg .areg-reg-price-row strong {
  color: var(--color-text);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.areg .areg-reg-price-row strong.is-free {
  color: var(--color-text);
}

.areg .areg-reg-price-row span:not(.areg-tag) {
  color: var(--color-text-muted);
  font-size: 13px;
}

.areg .areg-tag {
  display: inline-flex;
  align-items: center;
  /* height: 24px; */
  margin-top: 0;
  padding: 2px 8px;
  border: var(--icon-style-box-border) !important;
  border-radius: var(--icon-style-box-border-radius) !important;
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  align-self: flex-start;
}

.areg .areg-reg-price .areg-tag:not(:first-child) {
  /* margin-top: 10px; */
}

.areg {
  /* Countdown / elapsed */
}

.areg .areg-timer {
  padding: 20px 24px;
  border-bottom: 1px solid var(--areg-line);
}

.areg .areg-timer p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 0 12px;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.areg .areg-timer.is-live p {
  color: var(--color-error);
}

.areg .areg-timer-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}

.areg .areg-timer-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 6px;
  border: 1px solid var(--areg-line);
  border-radius: var(--radius-10);
  background: var(--color-bg);
}

.areg .areg-timer-cell strong {
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.areg .areg-timer-cell span {
  font-size: 9px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.areg .areg-timer-cell.is-live {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
}

.areg .areg-timer-cell.is-live strong {
  color: var(--color-error);
}

.areg {
  /* Summary rows */
}

.areg .areg-reg-meta {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 20px 24px;
  list-style: none;
  border-bottom: 1px solid var(--areg-line);
}

.areg .areg-reg-meta li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.areg .areg-reg-meta .areg-icon {
  width: 14px;
  height: 14px;
  margin-top: 3px;
}

.areg {
  /* ── FORM ───────────────────────────────────────────────── */
}

.areg .areg-form {
  padding: 24px;
}

.areg .areg-form-head {
  margin-bottom: 20px;
}

.areg .areg-form-head .areg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--color-text);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.areg .areg-form-head .areg-eyebrow .areg-icon {
  width: 11px;
  height: 11px;
}

.areg .areg-form-head h2 {
  margin: 0 0 5px;
  color: var(--color-text);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.areg .areg-form-head p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.areg .areg-form-row {
  margin-bottom: 14px;
}

.areg .areg-form-row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.areg .areg-field {
  min-width: 0;
}

.areg .areg-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.areg .areg-field label span {
  color: var(--color-text);
}

.areg .areg-input {
  position: relative;
  display: block;
}

.areg .areg-input img {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  opacity: 0.4;
  pointer-events: none;
}

.areg .areg-input input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--areg-line);
  border-radius: var(--radius-10);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.areg .areg-input input:-webkit-autofill,
.areg .areg-input input:-webkit-autofill:hover,
.areg .areg-input input:-webkit-autofill:focus,
.areg .areg-input input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--color-bg) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s !important;
  background-color: var(--color-bg) !important;
}

.areg .areg-input input::-moz-placeholder {
  color: var(--color-text-muted);
}

.areg .areg-input input::placeholder {
  color: var(--color-text-muted);
}

.areg .areg-input input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-warning-bg);
}

.areg .areg-input.has-error input {
  border-color: var(--color-error);
}

.areg .areg-error {
  display: block;
  margin-top: 5px;
  color: var(--color-error);
  font-size: 11px;
  line-height: 1.4;
}

.areg .areg-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  /* Box + tick come from the shared checkbox rule in _FormControls.scss
     (driven by the --checkbox-* theme tokens). No override here. */
}

.areg .areg-check label {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 12.5px;
  line-height: 1.5;
  cursor: pointer;
}

.areg .areg-check a {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.areg .areg-check a:hover {
  text-decoration: underline;
}

.areg .areg-note {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-10);
  background: var(--color-warning-bg);
  color: var(--color-text);
  font-size: 12.5px;
  line-height: 1.5;
}

.areg .areg-note .areg-icon {
  width: 13px;
  height: 13px;
  margin-top: 2px;
}

.areg .areg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--radius-10);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  box-shadow: var(--btn-primary-shadow);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.areg .areg-btn .areg-icon {
  width: 14px;
  height: 14px;
}

.areg .areg-btn:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
  box-shadow: var(--btn-primary-shadow-hover);
  color: var(--btn-primary-color);
  transform: translateY(-1px);
}

.areg .areg-btn:disabled {
  background: var(--color-dim);
  color: var(--color-text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

.areg .areg-form-foot {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  color: var(--color-text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.areg .areg-form-foot .areg-icon {
  width: 13px;
  height: 13px;
}

.areg .areg-ended {
  padding: 24px;
  text-align: center;
}

.areg .areg-ended p {
  margin: 0 0 16px;
  color: var(--color-text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
}

.areg {
  /* ── FOOTER ─────────────────────────────────────────────── */
}

.areg .areg-footer {
  padding: 18px 24px;
  border-top: 1px solid var(--areg-line);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
}

.areg {
  /* ── RESPONSIVE ─────────────────────────────────────────── */
}

@media (max-width: 1100px) {
  .areg .areg-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

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

  .areg .areg-col-side {
    position: static;
    order: -1;
  }

  .areg .areg-hero h1 {
    font-size: 32px;
  }
}

@media (max-width: 600px) {
  .areg .areg-wrap {
    padding: 0 16px;
  }

  .areg .areg-hero {
    padding: 36px 0 40px;
  }

  .areg .areg-hero h1 {
    font-size: 26px;
  }

  .areg .areg-hero-sub {
    font-size: 14.5px;
  }

  .areg .areg-hero-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .areg .areg-facts {
    grid-template-columns: 1fr;
  }

  .areg .areg-card,
  .areg .areg-form,
  .areg .areg-reg-price,
  .areg .areg-reg-meta,
  .areg .areg-timer,
  .areg .areg-ended {
    padding-left: 18px;
    padding-right: 18px;
  }

  .areg .areg-card {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .areg .areg-form-row.two {
    grid-template-columns: 1fr;
  }

  .areg .areg-speaker {
    grid-template-columns: 1fr;
  }

  .areg .areg-speaker-photo {
    width: 52px;
    height: 52px;
  }

  .areg .areg-spec dd {
    text-align: left;
  }

  .areg .areg-spec {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Icon sizing for the shared success screen (uses .areg-icon markup) */

.attendee-reg-success-icon .areg-icon {
  width: 34px;
  height: 34px;
  fill: currentColor;
}

.attendee-reg-success-note .areg-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  color: var(--color-primary);
}

.attendee-reg-btn .areg-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.fullpagebody.recorderpages .header {
  display: none;
}

html body.fixed-navbar.fullpagebody {
  padding: 0;
}

.podup-dual-stream-page a.back-btn-login {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  transition: 0.3s all;
  margin-left: 25px;
  margin-bottom: 25px;
  width: -moz-fit-content;
  width: fit-content;
}

.linkbtn-dualstream {
  display: inline-flex;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 10px auto 0;
  text-decoration: none;
  align-items: center;
  gap: 5px;
  color: var(--color-primary);
}

.linkbtn-dualstream i {
  font-size: var(--font-size-lg);
}

.podup-dual-stream-page a.back-btn-login:hover {
  color: var(--color-text);
}

.podup-dual-stream-page .w3nbtn.orangebtn i {
  font-size: var(--font-size-lg);
  margin-left: 3px;
}

.podup-dual-stream-page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: var(--color-bg);
}

.podup-dual-stream-page .podup-dual-stream-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding: 10px 12px 10px 28px;
  gap: 12px;
}

.podup-dual-stream-page .podup-dual-stream-header .breadcrumb .breadcrumb-item {
  color: var(--color-text);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
}

.podup-dual-stream-page .podup-dual-stream-logo img {
  margin-top: 50px;
}

.podup-dual-stream-page .breadcrumb .breadcrumb-item a {
  text-decoration: none;
}

.podup-dual-stream-page .breadcrumb li.breadcrumb-item::before {
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

.podup-dual-stream-page .podup-dual-stream-header .iconbox a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: solid 1px var(--color-border);
  background: var(--color-surface);
  font-size: 1.8rem;
  color: var(--color-text-muted);
  box-shadow: 0px 1px 2px 0px rgba(9, 25, 36, 0.1);
  position: relative;
  text-decoration: none;
}

.podup-dual-stream-page .podup-dual-stream-header .breadcrumb .breadcrumb-item img {
  width: auto;
  height: 22px;
  margin-right: 8px;
}

.podup-dual-stream-page .podup-dual-stream-logobg {
  background-color: var(--color-primary);
}

.podup-dual-stream-page .podup-dual-stream-logo,
.podup-dual-stream-page .podup-dual-stream-content-login {
  min-height: calc(100vh - 130px);
  overflow-y: auto;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.podup-dual-stream-page .podup-dual-stream-leftside {
  min-height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 28px;
}

.podup-dual-stream-page .podup-dual-stream-content-login {
  gap: 50px;
}

.podup-dual-stream-page .podup-dual-stream-logo {
  padding: 0;
  max-width: 100%;
  min-height: 100vh;
}

.podup-dual-stream-page .footer-steam {
  text-align: center;
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  margin: 0;
}

.podup-dual-stream-page .podup-dual-stream-logo .logo {
  margin: 0 auto 50px;
  max-width: 250px;
}

.podup-dual-stream-page .podup-dual-stream-content {
  padding: 50px;
}

.podup-dual-stream-page h1 {
  color: var(--color-primary);
  font-size: 36px;
  font-weight: var(--font-weight-medium);
  margin-bottom: 30px;
  line-height: normal;
}

.podup-dual-stream-page .podup-dual-stream-logo p {
  color: var(--color-border);
  font-size: var(--font-size-lg);
  font-weight: 400;
  margin-bottom: 50px;
  line-height: normal;
}

.podup-dual-stream-page .btn-outline {
  border: 2px solid var(--color-primary);
  border-radius: 5px;
  color: var(--color-surface);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  padding: 8px 30px;
  background: transparent;
  height: auto;
}

.podup-dual-stream-page .btn-outline:hover {
  background: var(--color-primary);
}

.podup-dual-stream-page .podup-dual-stream-content-login h2 {
  font-size: 32px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: 15px;
}

.podup-dual-stream-page .podup-dual-stream-content-login p {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-bottom: 5px;
}

.podup-dual-stream-page label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: left;
  margin: 0 0 5px;
  font-size: var(--font-size-md);
}

.podup-dual-stream-page .form-control {
  background: var(--input-bg);
  border-radius: var(--radius-md);
  padding: 10px 12px 10px 35px;
  font-size: 16px;
  color: var(--input-color);
  text-align: left;
  height: auto;
  border: var(--input-border);
  font-weight: 400;
  margin-bottom: 24px;
}

.podup-dual-stream-page .form-control.is-invalid {
  margin-bottom: 4px;
}

.podup-dual-stream-page .invalid-feedback {
  margin-bottom: 16px;
}

.podup-dual-stream-page .icon-input {
  position: absolute;
  left: 12px;
  top: 12px;
  max-width: 24px;
}

.podup-dual-stream-page .podup-dual-stream-content-login .icon-input {
  top: 16px;
}

.podup-dual-stream-page .icon-input::-moz-placeholder {
  color: var(--input-placeholder) !important;
}

.podup-dual-stream-page .icon-input::placeholder {
  color: var(--input-placeholder) !important;
}

.podup-dual-stream-page .podup-dual-stream-content-login .btn.btn-submit-custom {
  padding: 16px;
  border-radius: 5px;
  font-size: 24px;
  font-weight: var(--font-weight-medium);
  line-height: normal;
  margin: 30px 0;
  width: 100%;
}

.podup-dual-stream-page .podup-dual-stream-session h3 {
  font-size: calc(var(--font-size-xl) + 2px);
  color: var(--color-text);
  margin-bottom: 4px;
}

.podup-dual-stream-page .podup-dual-stream-content-login .podup-dual-stream-session p {
  margin-bottom: 30px;
  font-size: 16px;
}

.podup-dual-stream-page .podup-dual-stream-content-login label.radio-item {
  padding: 25px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: 0.3s all;
  cursor: pointer;
  background: var(--color-surface);
}

.podup-dual-stream-page .podup-dual-stream-content-login label.radio-item:hover {
  border-color: var(--color-primary);
}

.podup-dual-stream-page .podup-dual-stream-content-login label.radio-item input[type=radio] {
  display: none;
}

.podup-dual-stream-page .radio-item .radio-content svg {
  color: var(--color-text-muted);
  margin-bottom: 8px;
  transition: 0.3s all;
}

.podup-dual-stream-page .radio-item:hover .radio-content svg {
  color: var(--color-primary);
}

.podup-dual-stream-page .radio-item .radio-content h4 {
  margin: 4px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.podup-dual-stream-page .radio-item .radio-content p {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  margin: 0;
}

body .modal.podup-dualstream-modal .modal-body {
  padding: 0 40px 50px;
}

.modal.podup-dualstream-modal h5.modal-title {
  font-size: 24px;
  color: var(--color-text);
  margin-bottom: 20px;
}

.modal.podup-dualstream-modal .accordion {
  margin-bottom: 30px;
}

.modal.podup-dualstream-modal .accordion-item {
  margin-bottom: 10px;
  background: var(--color-surface-2);
  border-radius: 5px;
  border: 1px solid var(--color-border);
}

.modal.podup-dualstream-modal .accordion-body {
  padding: 10px 20px 20px;
}

.modal.podup-dualstream-modal .accordion-button:not(.collapsed) {
  background: var(--color-surface-2) !important;
  border: 5px;
  box-shadow: none;
  color: var(--color-text) !important;
  font-weight: var(--font-weight-medium);
  height: auto;
}

.modal.podup-dual-stream-page .form-control {
  border-radius: var(--input-radius) !important;
  border: var(--input-border) !important;
  padding: var(--input-padding) !important;
  font-size: var(--font-size-md) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 20px !important;
  color: var(--input-color) !important;
  background-color: var(--input-bg) !important;
  transition: border-color 0.2s !important;
}

.modal.podup-dualstream-modal .accordion-button {
  color: var(--color-text-secondary) !important;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  padding: 16px 20px 16px 50px;
  background: var(--color-surface) !important;
  border-radius: 5px !important;
  box-shadow: none;
  text-align: left;
  position: relative;
}

.modal.podup-dualstream-modal .accordion-button:after {
  position: absolute;
  content: "";
  margin-right: auto;
  right: 20px;
  top: 18px;
}

.modal.podup-dualstream-modal .accordion-header {
  position: relative;
}

.modal.podup-dualstream-modal .accordion-checkbox {
  position: absolute;
  top: 14px;
  z-index: 10;
  left: 20px;
}

.modal.podup-dualstream-modal .accordion-button::after {
  background-image: url(/images/faPlus.png?e4ee7908e25f6796ac9d89b06f3bbe7b);
  background-size: 18px;
  width: 18px;
  height: 18px;
}

.modal.podup-dualstream-modal .accordion-button:not(.collapsed)::after {
  background-image: url(/images/faMinus.png?fb048b0a7a5be13610b15c5447cdf8ea);
  transform: none;
}

.podup-dualstream-destinations {
  margin-top: 50px;
}

.podup-dualstream-destinations h6 {
  font-size: var(--font-size-lg);
  margin: 0 0 20px;
}

.podup-dualstream-destinations .podup-dualstream-destinations-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.podup-dualstream-destinations .podup-dualstream-destinations-list {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  align-items: center;
  padding: 12px 14px;
}

.podup-dualstream-destinations .podup-dualstream-destinations-icon {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.podup-dualstream-destinations .dropdown button i {
  color: var(--color-text-muted);
  font-size: 25px;
  margin: 0;
}

.podup-dualstream-destinations .dropdown button.show {
  background: var(--color-surface-2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2509803922);
  border-radius: 5px 5px 0 0;
}

.podup-dualstream-destinations .podup-dualstream-destinations-icon img {
  width: 32px;
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
}

.podup-dualstream-destinations .dropdown-menu.show {
  display: block;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
  background: var(--color-surface-2);
  border-radius: 5px 0 5px 5px;
  border: 0;
  padding: 0;
  margin-top: -2px !important;
}

.podup-dualstream-destinations .dropdown .dropdown-menu .dropdown-item {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  padding: 5px 10px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.podup-dualstream-destinations .dropdown .dropdown-menu li:first-child .dropdown-item {
  border: 0;
}

.limited_user {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.limited_user .limited_icon {
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-primary) 100%);
  width: 60px;
  height: 60px;
  flex-shrink: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  padding: 16px;
}

.limited_user h3 {
  color: var(--color-primary);
  font-size: calc(var(--font-size-xl) + 2px);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  margin: 0 0 12px;
  text-align: left;
}

.limited_user h3 span {
  color: var(--color-text-secondary);
  font-size: calc(var(--font-size-xl) + 2px);
  font-weight: 400;
}

.limited_badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50px;
  padding: 8px 12px;
  color: var(--color-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  gap: 4px;
}

@media (max-width: 767.98px) {
  html body.fixed-navbar.fullpagebody.recorderpages {
    padding: 0;
  }

  html body.fixed-navbar.fullpagebody.recorderpages {
    overflow: auto;
  }

  .podup-dual-stream-page .podup-dual-stream-content {
    padding: 20px 15px;
  }

  .podup-dual-stream-page .podup-dual-stream-logo .logo {
    margin: 0 auto 30px;
    max-width: 130px;
  }

  .podup-dual-stream-page h1 {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .podup-dual-stream-page .podup-dual-stream-logo p {
    font-size: var(--font-size-md);
    margin-bottom: 25px;
  }

  .podup-dual-stream-page .podup-dual-stream-content-login h2 {
    font-size: var(--font-size-lg);
  }

  .podup-dual-stream-page .podup-dual-stream-content-login {
    gap: 25px;
    padding: 0 15px;
  }

  .podup-dual-stream-page .podup-dual-stream-header {
    padding: 15px;
  }

  body .modal.podup-dualstream-modal .modal-body {
    padding: 0 15px 25px;
  }

  .modal.podup-dualstream-modal .accordion-body {
    padding: 10px 15px 5px;
  }

  .modal.podup-dualstream-modal h5.modal-title {
    font-size: var(--font-size-lg);
    margin-bottom: 10px;
  }

  .podup-dual-stream-page .podup-dual-stream-session h3 {
    font-size: calc(var(--font-size-xl) + 2px);
  }

  .podup-dual-stream-page .podup-dual-stream-content-login .podup-dual-stream-session p {
    margin-bottom: 15px;
    font-size: var(--font-size-md);
  }

  .podup-dual-stream-page .podup-dual-stream-content-login label.radio-item {
    padding: 15px;
    margin-bottom: 15px;
  }

  .podup-dual-stream-page .podup-dual-stream-logo img {
    margin-top: 30px;
  }

  .podup-dual-stream-page .podup-dual-stream-leftside,
  .podup-dual-stream-page .podup-dual-stream-logo,
  .podup-dual-stream-page .podup-dual-stream-content-login,
  .podup-dual-stream-page {
    min-height: auto;
  }
}

/* ==========================================================================
   Speaker gate — "Do you want to add speakers?"
   ========================================================================== */

.spk-gate-card {
  /* LIGHT */
  --spk-card-bg: var(--color-surface);
  --spk-card-border: var(--color-border);
  --spk-icon-bg: var(--color-surface-2);
  --spk-icon-color: var(--color-success);
  --spk-title: var(--color-text);
  --spk-sub: var(--color-text-secondary);
  --spk-yes-bg: var(--color-success);
  --spk-yes-color: var(--color-text);
  --spk-yes-bg-hover: var(--color-success);
  --spk-no-bg: var(--color-surface);
  --spk-no-border: var(--color-border);
  --spk-no-color: var(--color-text);
  --spk-no-hover-border: var(--color-border);
  background: var(--spk-card-bg);
  border: 1px solid var(--spk-card-border);
  border-radius: 16px;
  padding: 32px;
  margin-top: 32px;
  text-align: center;
  font-family: var(--font-primary);
}

/* Background / border / shadow: see the shared flat-card rule in _WebinarBase.scss. */

.app-content.content .content-body .whitecardbox {
  border-radius: 16px;
  padding: 0x;
}

.spk-gate-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--icon-style-box-border-radius);
  border: var(--icon-style-box-border);
  background: var(--icon-style-box-bg-color);
  color: var(--icon-style-box-color);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
}

.spk-gate-icon svg {
  stroke: currentColor !important;
}

.spk-gate-title {
  margin: 0;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.spk-gate-sub {
  margin: 8px auto 0;
  max-width: 460px;
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--spk-sub);
}

.spk-gate-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
}

.spk-gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.spk-gate-yes {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
}

.spk-gate-yes:hover {
  background: var(--btn-primary-bg-hover);
  box-shadow: var(--btn-primary-accent-shadow-hover);
  transform: translateY(-2px);
}

.spk-gate-no {
  background: var(--btn-secondary-bg-white);
  border: var(--btn-secondary-border);
  color: var(--btn-secondary-dark-color);
}

.spk-gate-no:hover {
  background: var(--btn-secondary-bg-white);
  box-shadow: var(--btn-secondary-dark-box-shadow);
}

@media (max-width: 480px) {
  .spk-gate-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Added speakers list */

.spk-gate-list {
  margin: 28px 0 0;
  width: 100%;
  text-align: left;
  border-top: 1px solid var(--spk-card-border);
  padding-top: 20px;
}

.spk-gate-list-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--spk-sub);
  margin-bottom: 12px;
}

/* Speaker rows are styled by the shared .csl-* rules (see _common-speaker-list.scss). */

.whitecardbox.invitation-attendees-section .whitecardbox.invitation-attendees-img-upload {
  border: none;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0px;
  padding: 0px 0px 18px 0px;
  margin-bottom: 18px !important;
}

.whitecardbox.invitation-attendees-section .whitecardbox.invitation-attendees-img-upload:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* ---------- Theme tokens ---------- */

.cw-create-webinar-wrapper,
.cw-stripe-modal-overlay,
.cw-st-modal-overlay,
.wt-page {
  --cw-bg: var(--color-surface);
  --cw-page-bg: transparent;
  --cw-card-bg: var(--color-surface);
  --cw-card-border: var(--color-border);
  --cw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --cw-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --cw-title: var(--color-text);
  --cw-text: var(--color-text);
  --cw-text-muted: var(--color-text-secondary);
  --cw-label: var(--color-text);
  --cw-input-bg: var(--color-surface);
  --cw-input-border: var(--color-border);
  --cw-input-text: var(--color-text);
  --cw-input-placeholder: var(--color-text-muted);
  --cw-input-focus-border: var(--form-accent);
  --cw-dtp-accent: var(--color-primary);
  --cw-dtp-accent-text: var(--color-surface);
  --cw-dtp-hover-bg: var(--color-info-bg);
  --cw-plan-box-bg: var(--color-surface);
  --cw-plan-box-border: var(--color-border);
  --cw-plan-box-text: var(--color-text);
  --cw-plan-box-active-bg: var(--tab-active-bg);
  --cw-plan-box-active-text: var(--color-text);
  --cw-plan-box-active-border: var(--tab-active-color);
  --cw-plan-box-active-icon: var(--tab-active-color);
  --cw-plan-box-h6: var(--color-text-secondary);
  --cw-switch-bg: var(--color-surface-2);
  --cw-switch-border: var(--color-border);
  --cw-upload-bg: var(--color-surface);
  --cw-upload-border: var(--color-border);
  --cw-upload-hover-border: var(--form-accent);
  --cw-upload-icon-bg: var(--color-surface);
  --cw-upload-icon-color: var(--color-primary);
  --cw-section-icon-bg: rgba(23, 72, 108, 0.1);
  --cw-section-icon-color: var(--color-primary);
  --cw-cta-bg: linear-gradient(95deg, var(--color-success) 3.96%, var(--color-success) 100%);
  --cw-cta-bg-hover: linear-gradient(95deg, var(--color-success) 3.96%, var(--color-success) 100%);
  --cw-cta-text: var(--color-surface);
  --cw-cta-shadow: 0 10px 15px -3px rgba(23, 72, 108, 0.3);
  --cw-cta-shadow-hover: 0 20px 25px -5px rgba(23, 72, 108, 0.4);
  --cw-secondary-bg: var(--color-surface);
  --cw-secondary-text: var(--color-text);
  --cw-secondary-border: var(--color-border);
  --cw-tz-bg: var(--color-surface-2);
  --cw-tz-border: var(--color-border);
  --cw-tz-text: var(--color-text);
  --cw-tz-label: var(--color-text-secondary);
  --cw-tz-message: var(--color-text-secondary);
  --cw-tz-divider: var(--color-border);
  --cw-toggle-bg: var(--color-surface-2);
  --cw-toggle-border: var(--color-border);
  --cw-toggle-icon: var(--color-primary);
  --cw-required: var(--color-error);
  --cw-error: var(--color-error);
  --cw-quill-toolbar-bg: var(--color-surface);
  --cw-quill-toolbar-border: var(--color-border);
  --cw-quill-editor-bg: var(--color-surface);
  --cw-quill-editor-text: var(--color-text);
  --cw-quill-icon: var(--color-text-secondary);
  /* AI "Suggest titles" accent — LIGHT theme (brand blue) */
  --cw-ai-accent: var(--form-accent);
  --cw-ai-accent-text: var(--color-primary);
  --cw-ai-accent-soft: var(--color-info-bg);
  --cw-ai-accent-soft-hover: var(--color-info-bg);
  --cw-ai-accent-border: var(--color-info-bg);
  --cw-ai-accent-border-hover: rgba(36, 170, 224, 0.6);
  --cw-ai-accent-ring: var(--color-info-bg);
  --cw-ai-gradient: linear-gradient(135deg, var(--color-primary), var(--color-primary));
  --cw-ai-gradient-hover: linear-gradient(135deg, var(--color-primary), var(--color-primary));
  --cw-ai-on-accent: var(--color-surface);
  --cw-ai-overlay: rgba(15, 23, 42, 0.55);
  --cw-ai-modal-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
}

/* ---------- Wrapper / page background ---------- */

.cw-create-webinar-wrapper {
  background: var(--cw-page-bg);
  color: var(--color-text);
  min-height: 100vh;
  transition: background-color 0.25s ease, color 0.25s ease;
  position: relative;
}

/* ---------- Theme toggle button ---------- */

.cw-theme-toggle {
  position: absolute;
  top: 16px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cw-toggle-bg) !important;
  border: 1px solid var(--cw-toggle-border) !important;
  color: var(--cw-toggle-icon) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  z-index: 10;
  padding: 0;
}

.cw-theme-toggle:hover {
  transform: rotate(20deg);
}

.cw-theme-toggle:focus {
  outline: none;
}

.cw-theme-toggle svg {
  width: 20px;
  height: 20px;
}

/* ---------- Card sections ---------- */

/* Background / border / shadow come from the shared flat-card rule in
   _WebinarBase.scss — only geometry here. */

.cw-create-webinar-wrapper .whitecardbox {
  border-radius: 20px !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease !important;
}

.create_ep_section {
  margin-bottom: 16px;
}

.cw-create-webinar-wrapper .create_ep_section h3 {
  color: var(--color-text) !important;
  font-weight: var(--font-weight-medium) !important;
  font-size: calc(var(--font-size-xl) + 2px);
  margin: 0 0 0px !important;
}

.cw-create-webinar-wrapper .create_ep_section p {
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-md) !important;
  margin: 0 !important;
}

.cw-create-webinar-wrapper .webinar-icon {
  width: 42px !important;
  height: 42px !important;
  background: var(--icon-style-box-bg-color) !important;
  border: var(--icon-style-box-border) !important;
  border-radius: var(--icon-style-box-border-radius) !important;
  color: var(--icon-style-box-color) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cw-create-webinar-wrapper .webinar-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* ---------- Form labels and inputs ---------- */

.cw-create-webinar-wrapper .form_note {
  color: var(--color-text-secondary) !important;
}

.cw-create-webinar-wrapper .required {
  color: var(--cw-required) !important;
}

.cw-create-webinar-wrapper .invalid-feedback.d-block {
  color: var(--cw-error) !important;
}

.cw-create-webinar-wrapper .form-control {
  border-radius: var(--input-radius) !important;
  border: var(--input-border) !important;
  padding: var(--input-padding) !important;
  font-size: var(--font-size-md) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 20px !important;
  height: var(--input-height) !important;
  color: var(--input-color) !important;
  background-color: var(--input-bg) !important;
  transition: border-color 0.2s !important;
}

.cw-create-webinar-wrapper textarea.form-control {
  border-radius: var(--radius-md) !important;
}

.cw-create-webinar-wrapper .form-control::-moz-placeholder {
  color: var(--input-placeholder) !important;
  opacity: 1 !important;
}

.cw-create-webinar-wrapper .form-control::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 1 !important;
}

.cw-create-webinar-wrapper .form-control:focus {
  border-color: var(--input-hover-border-blue) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---------- Plan boxes (radio cards) ---------- */

.cw-create-webinar-wrapper .webinar-plan-wrapper .plan-box {
  border-radius: 14px !important;
  border: 2px solid var(--plan-box-border-color) !important;
  padding: 16px 20px !important;
  background: var(--plan-box-bg) !important;
  color: var(--plan-box-heading-color) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 100px !important;
}

.cw-create-webinar-wrapper .webinar-plan-wrapper .plan-box h6 {
  color: var(--plan-box-text-color) !important;
}

.cw-create-webinar-wrapper .webinar-plan-wrapper .plan-option input:checked + .plan-box {
  border-color: var(--plan-box-hover-border-color) !important;
  background: var(--plan-box-hover-bg) !important;
  color: var(--plan-box-hover-heading-color) !important;
  box-shadow: none !important;
  outline: none !important;
}

.cw-create-webinar-wrapper .webinar-plan-wrapper .plan-box:hover,
.cw-create-webinar-wrapper .webinar-plan-wrapper .plan-box:focus,
.cw-create-webinar-wrapper .webinar-plan-wrapper .plan-option:focus-within .plan-box {
  box-shadow: none !important;
  outline: none !important;
}

.cw-create-webinar-wrapper .webinar-plan-wrapper .plan-option {
  background: transparent !important;
  border: none !important;
  border-radius: 14px !important;
  overflow: hidden;
}

.cw-create-webinar-wrapper .webinar-plan-wrapper .plan-option input:checked + .plan-box h6 {
  color: var(--plan-box-text-color) !important;
}

.cw-create-webinar-wrapper .webinar-plan-wrapper .plan-box .icon svg,
.cw-create-webinar-wrapper .webinar-plan-wrapper .plan-option input:checked + .plan-box .icon svg {
  color: var(--plan-box-icon-text-color) !important;
  fill: var(--plan-box-icon-text-color) !important;
  width: 20px !important;
  height: 20px !important;
}

.cw-create-webinar-wrapper .webinar-plan-wrapper .plan-box:hover,
.cw-create-webinar-wrapper .webinar-plan-wrapper.webinar-settings-plan-column .plan-option input:checked + .plan-box {
  border-color: var(--plan-box-hover-border-color) !important;
  background: var(--plan-box-hover-bg) !important;
  color: var(--plan-box-hover-heading-color) !important;
}

.cw-create-webinar-wrapper .webinar-plan-wrapper.webinar-settings-plan-column label.plan-option span.plan-box {
  flex-direction: row !important;
  min-height: unset !important;
}

.cw-create-webinar-wrapper .webinar-plan-wrapper.webinar-type-wrapper.webinar-audience-wrapper span.plan-box {
  min-height: auto !important;
}

/* Grid columns */

.cw-create-webinar-wrapper .webinar-plan-wrapper.webinar-callaction-wrapper {
  grid-template-columns: repeat(4, 1fr);
}

.cw-create-webinar-wrapper .webinar-plan-wrapper.webinar-settings-plan-column {
  grid-template-columns: repeat(6, 1fr);
}

.cw-create-webinar-wrapper .webinar-plan-wrapper.webinar-type-wrapper.webinar-type-select {
  grid-template-columns: repeat(4, 1fr);
}

.cw-create-webinar-wrapper .webinar-plan-wrapper.webinar-type-wrapper.webinar-audience-wrapper {
  grid-template-columns: repeat(8, 1fr);
}

/* ---------- Upload boxes ---------- */

.cw-create-webinar-wrapper .webinar-upload-box {
  border: 2px dashed var(--upload-box-border-color) !important;
  border-radius: 20px !important;
  padding: 20px 24px !important;
  background: var(--upload-box-bg) !important;
  color: var(--upload-box-text-color) !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  min-height: 170px !important;
  height: 100% !important;
}

/* Footer submit buttons — colours from global button tokens, pill shape */

.cw-create-webinar-wrapper .webinar-footer-bottom .podsubmitbtn {
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
  border: var(--btn-secondary-border);
}

.cw-create-webinar-wrapper .webinar-footer-bottom .podsubmitbtn:hover:not(:disabled) {
  background: var(--btn-secondary-bg-white);
  box-shadow: var(--btn-secondary-dark-box-shadow);
}

.cw-create-webinar-wrapper .webinar-footer-bottom .podwebinar-submit-btn {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color) !important;
  border-radius: var(--radius-lg) !important;
}

.cw-create-webinar-wrapper .webinar-footer-bottom .podwebinar-submit-btn:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover) !important;
  box-shadow: var(--btn-primary-accent-shadow-hover) !important;
}

/* Branding row: keep both upload boxes identical, fixed height / same row */

.cw-create-webinar-wrapper .cw-branding-row {
  align-items: stretch;
}

.cw-create-webinar-wrapper .upload-text p {
  color: var(--upload-box-heading-color) !important;
}

.cw-create-webinar-wrapper .upload-text small {
  color: var(--upload-box-text-color) !important;
}

.cw-create-webinar-wrapper .webinar-upload-box .upload-preview-remove {
  background: var(--color-error);
}

/* ---------- Submit / CTA buttons ---------- */

.cw-create-webinar-wrapper .w3nbtn {
  height: 48px;
}

.cw-create-webinar-wrapper button.w3nbtn.orangebtn.btn-submit-webinar.podwebinar-submit-btn {
  padding: 16px 28px !important;
}

/* ---------- Switch rows ---------- */

.cw-create-webinar-wrapper .podup-webinar-switch {
  background: var(--cw-switch-bg) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  border: 1px solid var(--cw-switch-border) !important;
}

.cw-create-webinar-wrapper .podup-webinar-switch h5 {
  color: var(--color-text) !important;
}

.cw-create-webinar-wrapper .podup-webinar-switch p {
  color: var(--color-text-secondary) !important;
}

/* ---------- Full description Quill ---------- */

.cw-create-webinar-wrapper .form-group.full-description-column .ql-container.ql-snow {
  min-height: 120px !important;
}

.cw-create-webinar-wrapper .ql-toolbar.ql-snow {
  background: var(--cw-quill-toolbar-bg) !important;
  border-color: var(--cw-quill-toolbar-border) !important;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.cw-create-webinar-wrapper .ql-container.ql-snow {
  background: var(--cw-quill-editor-bg) !important;
  border-color: var(--cw-quill-toolbar-border) !important;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  color: var(--cw-quill-editor-text) !important;
}

.cw-create-webinar-wrapper .ql-editor {
  color: var(--cw-quill-editor-text) !important;
}

.cw-create-webinar-wrapper .ql-editor.ql-blank::before {
  color: var(--cw-input-placeholder) !important;
}

/* Quill Hover Overrides */

.cw-create-webinar-wrapper .ql-snow.ql-toolbar button:hover,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar button:hover,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar button:focus,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar button:focus,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar button.ql-active,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar button.ql-active,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar .ql-picker-label:hover,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar .ql-picker-label:hover,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar .ql-picker-label.ql-active,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar .ql-picker-item:hover,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar .ql-picker-item:hover,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: var(--form-label-color) !important;
}

.cw-create-webinar-wrapper .ql-snow.ql-toolbar button:hover .ql-stroke,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar button:hover .ql-stroke,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar button:focus .ql-stroke,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar button:focus .ql-stroke,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar button.ql-active .ql-stroke,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
  stroke: var(--form-label-color) !important;
}

.cw-create-webinar-wrapper .ql-snow.ql-toolbar button:hover .ql-fill,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar button:hover .ql-fill,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar button:focus .ql-fill,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar button:focus .ql-fill,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar button.ql-active .ql-fill,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar button.ql-active .ql-fill,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.cw-create-webinar-wrapper .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.cw-create-webinar-wrapper .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill {
  fill: var(--form-label-color) !important;
}

/* ---------- Add Another Objective ---------- */

.cw-create-webinar-wrapper .add-another-objective .add-another-list button.btn,
.cw-create-webinar-wrapper .add-another-objective .add-another-list .objective-remove-btn {
  width: 40px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--color-error) !important;
  color: var(--color-error) !important;
  background: transparent !important;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.cw-create-webinar-wrapper .add-another-objective .add-another-list button.btn:hover,
.cw-create-webinar-wrapper .add-another-objective .add-another-list .objective-remove-btn:hover {
  border-color: var(--color-error) !important;
  color: var(--color-error) !important;
  background: var(--color-error-bg) !important;
}

.cw-create-webinar-wrapper .add-another-objective .add-another-list .number {
  color: var(--color-text) !important;
}

/* ---------- Timezone diff box ---------- */

.cw-create-webinar-wrapper .timezone-diff-box {
  margin-top: 16px !important;
  background: var(--cw-tz-bg) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid var(--cw-tz-border) !important;
  font-size: var(--font-size-md) !important;
  color: var(--cw-tz-text) !important;
}

.cw-create-webinar-wrapper .local-time-section {
  padding-right: 24px !important;
  border-right: 1px solid var(--cw-tz-divider) !important;
  flex-shrink: 0 !important;
}

.cw-create-webinar-wrapper .local-time-label {
  color: var(--cw-tz-label) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  margin-bottom: 2px !important;
}

.cw-create-webinar-wrapper .local-time-value {
  font-weight: var(--font-weight-medium) !important;
  color: var(--cw-tz-text) !important;
}

.cw-create-webinar-wrapper .diff-message-section {
  padding-left: 24px !important;
  color: var(--cw-tz-message) !important;
  line-height: 1.5 !important;
}

.cw-create-webinar-wrapper .timezone-diff-box.past-warning {
  background: var(--color-error-bg) !important;
  border-color: var(--color-error) !important;
  color: var(--color-error) !important;
}

/* ---------- Schedule type icons ---------- */

.cw-create-webinar-wrapper span.icon.immediately-icon img,
.cw-create-webinar-wrapper span.icon.scheduled-icon img {
  width: 26px;
}

/* ---------- Uploaded benefits list (dark text adjustments) ---------- */

.cw-create-webinar-wrapper .uploaded-benefit-item {
  background: var(--cw-switch-bg);
  border: 1px solid var(--cw-switch-border);
  color: var(--color-text);
}

.cw-create-webinar-wrapper .benefit-file-title {
  color: var(--color-text) !important;
}

.cw-create-webinar-wrapper .benefit-file-meta {
  color: var(--color-text-secondary) !important;
}

/* ---------- Back button (light mode keeps default; dark mode uses .btn-gold-outline) ---------- */

.cw-create-webinar-wrapper .webinar-back-btn {
  color: var(--wizard-status-neutral) !important;
}

[data-theme=dark] .btn-gold {
  background: var(--btn-primary-bg) !important;
  border-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-width: 0 !important;
  font-weight: var(--font-weight-medium);
  box-shadow: none;
}

[data-theme=dark] .btn-gold:hover {
  transform: translateY(-1px);
  background: var(--btn-primary-bg) !important;
  box-shadow: 0px 4px 20px 10px rgba(241, 212, 131, 0.231372549) !important;
}

[data-theme=dark] .btn-gold-outline {
  color: var(--color-surface);
  background: rgba(176, 132, 44, 0.2);
  border: 1px solid rgba(224, 192, 128, 0.3);
}

[data-theme=dark] .btn-gold-outline:hover {
  background: rgba(255, 255, 255, 0.1098039216) !important;
  border-color: var(--color-primary-light) !important;
  box-shadow: 0px 4px 33.1px 1px rgba(241, 212, 131, 0.231372549);
}

/* ============================================================
   Dark-mode icon colour + button class wiring for this page.
   - Every icon in dark mode = var(--color-icon-gold)
   - Save / Next buttons get .btn-gold (added via JS)
   - Back / secondary buttons get .btn-gold-outline (added via JS)
   - The Back text link stays a link (gold colour only, no button)
   ============================================================ */

.cw-create-webinar-wrapper .webinar-plan-wrapper.webinar-settings-plan-column span.icon {
  background: transparent !important;
}

/* ============================================================
   Stripe Settings Modal — CreateWebinar inline popup
   ============================================================ */

/* Overlay */

.cw-stripe-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: cw-modal-fade-in 0.2s ease;
}

@keyframes cw-modal-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Modal card */

.cw-stripe-modal {
  background: var(--modal-bg);
  color: var(--modal-text);
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  box-shadow: var(--shadow-lg), 0 8px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: cw-modal-slide-up 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cw-modal-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */

.cw-stripe-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--modal-close-bg);
}

.cw-stripe-modal-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cw-stripe-modal-icon {
  width: 42px;
  height: 42px;
  background: var(--icon-style-box-bg-color);
  border: var(--icon-style-box-border);
  border-radius: var(--icon-style-box-border-radius);
  color: var(--icon-style-box-color) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* colour/close from common .cw-modal-* classes */

.cw-stripe-modal-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  margin: 0 0 2px;
}

.cw-stripe-modal-subtitle {
  font-size: var(--font-size-sm);
  margin: 0;
}

.cw-stripe-modal-close {
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Body */

.cw-stripe-modal-body {
  padding: 24px 28px 28px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

/* Loading state */

.cw-stripe-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  gap: 10px;
}

/* Info banner */

.cw-stripe-modal-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--stripe-banner-bg);
  border: 1px solid var(--stripe-banner-border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: var(--font-size-base);
  color: var(--stripe-banner-text);
  margin-bottom: 22px;
  line-height: 1.5;
}

/* Field errors */

.cw-stripe-field-error {
  font-size: var(--font-size-sm);
  color: var(--cw-error);
  margin: 6px 0 0;
}

/* Footer */

.cw-stripe-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cw-card-border);
}

/* Ensure form-controls inside the modal use the same themed inputs */

.cw-stripe-modal .form-control {
  height: auto;
  color: var(--input-color);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  border-radius: var(--input-radius);
  border: var(--input-border);
  padding: var(--input-padding);
  background-color: var(--input-bg);
  transition: border-color 0.2s;
}

.cw-stripe-modal .form-control:focus {
  border-color: transparent !important;
  box-shadow: none;
  outline: none;
}

.cw-stripe-modal .form-control.is-invalid {
  border-color: var(--cw-error);
}

.cw-stripe-modal .form-control::-moz-placeholder {
  color: var(--input-placeholder);
  opacity: 0.6;
}

.cw-stripe-modal .form-control::placeholder {
  color: var(--input-placeholder);
  opacity: 0.6;
}

.cw-stripe-modal .form-label {
  color: var(--color-text);
}

.cw-stripe-modal .form_note {
  color: var(--color-text-secondary);
}

/* Footer buttons — theme to match the rest of the form (modal lives outside the wrapper) */

.cw-stripe-modal .w3nbtn {
  height: 48px;
}

/* ── Dark theme overrides ── */

.cw-theme-dark .cw-stripe-modal {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   Custom Date & Time Picker (WebinarDateTimePicker)
   Themed entirely via the existing --cw-* tokens.
   ============================================================ */

/* Accent used for selected day / time / OK button.
   Light = brand blue (matches plan-box active), dark = gold. */

.cw-create-webinar-wrapper,
.wt-page {
  --cw-dtp-accent: var(--color-primary);
  --cw-dtp-accent-text: var(--color-surface);
  --cw-dtp-hover-bg: var(--cw-plan-box-active-bg);
}

.cw-dtp {
  position: relative;
  width: 100%;
}

/* Trigger field — looks like the other .form-control inputs */

.cw-dtp-field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: var(--input-radius) !important;
  border: 1px solid var(--color-border) !important;
  padding: var(--input-padding) !important;
  font-size: var(--font-size-md) !important;
  height: var(--input-height) !important;
  background-color: var(--input-bg) !important;
  color: var(--color-text) !important;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.25s ease, color 0.25s ease !important;
}

.cw-dtp-field.has-value {
  color: var(--color-text) !important;
}

.cw-dtp-field:hover,
.cw-dtp-field:focus {
  background-color: var(--input-bg) !important;
  outline: none;
}

.cw-dtp-field-text {
  flex: 1;
}

.cw-dtp-field-icon {
  display: inline-flex;
  align-items: center;
  color: inherit;
  flex-shrink: 0;
}

/* Popup */

.cw-dtp-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 9999;
  background: var(--cw-card-bg);
  border: 1px solid var(--cw-card-border);
  border-radius: 14px;
  box-shadow: var(--cw-shadow-hover);
  padding: 14px;
  min-width: 320px;
  max-width: calc(100vw - 16px);
  animation: cw-dtp-fade 0.15s ease;
}

/* keep the popup inside the viewport when the field sits near an edge
   (e.g. the last card of the social publish grid) */

.cw-dtp-popup.is-flip-x {
  left: auto;
  right: 0;
}

.cw-dtp-popup.is-flip-y {
  top: auto;
  bottom: calc(100% + 8px);
}

@keyframes cw-dtp-fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cw-dtp-body {
  display: flex;
  gap: 14px;
}

/* Calendar side */

.cw-dtp-cal {
  width: 252px;
}

.cw-dtp-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cw-dtp-month {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.cw-dtp-nav {
  display: inline-flex;
  gap: 6px;
}

.cw-dtp-nav-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--cw-input-border);
  background: var(--cw-input-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cw-dtp-nav-btn:hover {
  border-color: var(--cw-dtp-accent);
  background: var(--cw-dtp-hover-bg);
}

.cw-dtp-weekdays,
.cw-dtp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cw-dtp-weekday {
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  padding: 4px 0;
}

.cw-dtp-day {
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.cw-dtp-day:hover:not(.is-disabled) {
  background: var(--cw-dtp-hover-bg);
}

.cw-dtp-day.is-muted {
  color: var(--color-text-secondary);
  opacity: 0.55;
}

.cw-dtp-day.is-today {
  box-shadow: inset 0 0 0 1px var(--cw-dtp-accent);
  font-weight: var(--font-weight-medium);
}

.cw-dtp-day.is-selected,
.cw-dtp-day.is-selected:hover {
  background: var(--cw-dtp-accent) !important;
  color: var(--cw-dtp-accent-text) !important;
  font-weight: var(--font-weight-medium);
}

.cw-dtp-day.is-disabled {
  color: var(--color-text-secondary);
  opacity: 0.35;
  cursor: not-allowed;
}

/* Time side */

.cw-dtp-time {
  border-left: 1px solid var(--cw-card-border);
  padding-left: 14px;
  display: flex;
  flex-direction: column;
}

.cw-dtp-time-cols {
  display: flex;
  gap: 10px;
  flex: 1;
}

.cw-dtp-time-col {
  width: 52px;
  max-height: 210px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 6px;
  /* keep the scrollbar off the numbers */
  scrollbar-width: thin;
  scrollbar-color: var(--cw-input-border) transparent;
}

.cw-dtp-time-col.cw-dtp-time-col-ampm {
  padding-right: 0;
  overflow: visible;
}

.cw-dtp-time-col::-webkit-scrollbar {
  width: 5px;
}

.cw-dtp-time-col::-webkit-scrollbar-track {
  background: transparent;
}

.cw-dtp-time-col::-webkit-scrollbar-thumb {
  background: var(--cw-input-border);
  border-radius: 3px;
}

.cw-dtp-time-opt {
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 7px 0;
  font-size: var(--font-size-base);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.cw-dtp-time-opt:hover {
  background: var(--cw-dtp-hover-bg);
}

/* Current time marker — ring only, matches the calendar's "today" cell */

.cw-dtp-time-opt.is-now {
  box-shadow: inset 0 0 0 1px var(--cw-dtp-accent);
  font-weight: var(--font-weight-medium);
}

.cw-dtp-time-opt.is-active {
  background: var(--cw-dtp-accent);
  color: var(--cw-dtp-accent-text);
  font-weight: var(--font-weight-medium);
}

/* When the current time is also the active selection, the filled style wins */

.cw-dtp-time-opt.is-now.is-active {
  box-shadow: none;
}

.cw-dtp-time-opt.is-disabled {
  color: var(--color-text-secondary);
  opacity: 0.35;
  cursor: not-allowed;
}

.cw-dtp-time-opt.is-disabled:hover {
  background: transparent;
}

/* Footer actions */

.cw-dtp-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--cw-card-border);
}

.cw-dtp-link {
  background: transparent;
  border: none;
  color: var(--cw-dtp-accent);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  padding: 6px 4px;
}

.cw-dtp-link:hover {
  text-decoration: underline;
}

.cw-dtp-actions .cw-dtp-ok {
  margin-left: auto;
  background: var(--cw-dtp-accent);
  color: var(--cw-dtp-accent-text);
  border: none;
  border-radius: 10px;
  padding: 8px 22px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.cw-dtp-actions .cw-dtp-ok:hover:not(:disabled) {
  transform: translateY(-1px);
}

.cw-dtp-actions .cw-dtp-ok:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dark-theme gold OK button glyph/text already uses accent-text (var(--color-surface-2)) */

@media (max-width: 575.98px) {
  .cw-dtp-body {
    flex-direction: column;
  }

  .cw-dtp-cal {
    width: 100%;
  }

  .cw-dtp-time {
    border-left: none;
    border-top: 1px solid var(--cw-card-border);
    padding-left: 0;
    padding-top: 12px;
  }

  .cw-dtp-time-col {
    width: 100%;
    max-height: 140px;
  }
}

/* ==========================================================================
   AI "Suggest titles" — button + modal
   ========================================================================== */

/* Title label row: label on the left, suggest button on the right */

.cw-title-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.cw-title-label-row .form-label {
  margin-bottom: 0;
}

.cw-suggest-titles-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: var(--btn-secondary-border);
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  padding: 9px 16px;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  white-space: nowrap;
}

.cw-suggest-titles-btn:hover {
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
  box-shadow: var(--btn-secondary-dark-box-shadow);
}

.cw-suggest-titles-btn:active {
  transform: translateY(1px);
}

.cw-suggest-titles-btn svg {
  color: var(--btn-secondary-dark-color);
}

/* Shared hyperlink-style action — common class + tokens for every text link */

.wizard-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--wizard-link);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Anchors carrying .wizard-link must not inherit the global
   `body[data-theme=dark] a` colour — they match the button variant. */

body[data-theme=dark] a.wizard-link {
  color: var(--wizard-link);
}

.wizard-link:hover,
.wizard-link:focus {
  color: var(--wizard-link-hover);
  text-decoration: underline;
}

body[data-theme=dark] a.wizard-link:hover,
body[data-theme=dark] a.wizard-link:focus {
  color: var(--wizard-link-hover);
}

.wizard-link svg {
  color: var(--icon-style-box-base-color);
}

.wizard-link svg:not([fill=none]) {
  fill: var(--icon-style-box-base-color);
}

.wizard-link svg[fill=none] {
  fill: none;
  stroke: var(--icon-style-box-base-color);
}

.wizard-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Group of AI buttons (e.g. Write description + Improve) */

.cw-ai-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Generate with AI banner ---------- */

.cw-ai-generate-box {
  border: 1px solid var(--cw-card-border);
  background: var(--cw-card-bg);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 24px;
}

/* Open accordion: square off the bottom so the brief panel joins it seamlessly. */

.cw-ai-generate-box:has(.cw-ai-brief-toggle.is-open) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.cw-ai-generate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cw-ai-generate-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cw-ai-generate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--icon-style-box-bg-color);
  border: var(--icon-style-box-border);
  border-radius: var(--icon-style-box-border-radius);
  color: var(--icon-style-box-color);
  flex-shrink: 0;
}

.cw-ai-generate-icon svg,
.cw-ai-generate-icon svg path {
  fill: var(--icon-style-box-base-color) !important;
  color: var(--icon-style-box-base-color) !important;
  width: 20px;
  height: 20px;
}

.cw-ai-generate-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.cw-ai-generate-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--light-green-contrast-15);
  color: var(--light-green);
  border: 1px solid var(--light-green-contrast-30);
}

.cw-ai-generate-sub {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.cw-ai-generate-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.cw-ai-generate-collapse.is-open {
  grid-template-rows: 1fr;
}

.cw-ai-generate-collapse-inner {
  overflow: hidden;
  min-height: 0;
  padding-top: 16px;
}

.cw-ai-generate-input {
  width: 100%;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid var(--cw-input-border);
  background: var(--cw-input-bg);
  color: var(--cw-input-text);
  font-size: var(--font-size-md);
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cw-ai-generate-input::-moz-placeholder {
  color: var(--cw-input-placeholder);
}

.cw-ai-generate-input::placeholder {
  color: var(--cw-input-placeholder);
}

.cw-ai-generate-input:focus {
  border-color: var(--cw-ai-accent);
  box-shadow: 0 0 0 3px var(--cw-ai-accent-ring);
}

.cw-ai-generate-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.cw-ai-brief-btn,
.cw-ai-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  border-radius: 40px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.cw-ai-brief-btn {
  padding: 9px 16px;
  border: var(--btn-secondary-border);
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
}

.cw-ai-brief-btn:hover {
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
  box-shadow: var(--btn-secondary-dark-box-shadow);
}

.cw-ai-brief-btn svg {
  color: var(--btn-secondary-dark-color);
}

.cw-ai-generate-btn {
  padding: 10px 20px;
  border: none;
  background: var(--cw-ai-gradient);
  color: var(--cw-ai-on-accent);
}

.cw-ai-generate-btn:hover {
  background: var(--cw-ai-gradient-hover);
  box-shadow: 0 8px 16px -6px var(--cw-ai-accent-ring);
}

.cw-ai-brief-btn:active,
.cw-ai-generate-btn:active {
  transform: translateY(1px);
}

/* Accordion caret — rotates when the brief panel is open */

.cw-ai-brief-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  border: var(--btn-secondary-border);
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cw-ai-brief-toggle:hover {
  box-shadow: var(--btn-secondary-dark-box-shadow);
}

.cw-ai-brief-toggle svg {
  color: inherit;
  transition: transform 0.25s ease;
}

.cw-ai-brief-toggle.is-open svg {
  transform: rotate(180deg);
}

@media (max-width: 640px) {
  .cw-ai-generate-head {
    flex-direction: column;
  }
}

/* Overlay */

.cw-st-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--cw-ai-overlay);
  backdrop-filter: blur(2px);
  animation: cw-st-fade 0.15s ease;
}

@keyframes cw-st-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Modal shell */

.cw-st-modal {
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--modal-bg);
  color: var(--modal-text);
  border: 1px solid var(--cw-card-border);
  border-radius: 16px;
  box-shadow: var(--cw-ai-modal-shadow);
  animation: cw-st-pop 0.18s ease;
}

@keyframes cw-st-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */

.cw-st-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cw-st-modal-header-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cw-st-modal-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-bg-color);
  color: var(--color-text-baselight);
}

/* colour/close from common .cw-modal-* classes */

.cw-st-modal-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

.cw-st-modal-subtitle {
  margin: 2px 0 0;
  font-size: var(--font-size-base);
}

.cw-st-modal-close {
  flex-shrink: 0;
  cursor: pointer;
  line-height: 0;
  /* Header's left block is hidden, so pin the X to the right edge. */
  margin-left: auto;
}

.cw-st-modal-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Body */

.cw-st-modal-body {
  padding: 20px 35px 20px;
}

/* Inline (accordion) mode — same panel rendered in the page flow instead of
   over it, used by the "Generate full draft" box on the create form. */

.cw-st-modal-overlay.is-inline {
  position: static;
  inset: auto;
  display: block;
  padding: 0;
  background: none;
  backdrop-filter: none;
  z-index: auto;
}

.cw-st-modal-overlay.is-inline .cw-st-modal {
  width: 100%;
  max-width: none;
  max-height: none;
  /* Pull up over the AI box's bottom margin so the two read as one panel. */
  margin: -24px 0 24px;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: none;
  animation: none;
  /* Inline mode has no scroller, so keep it unclipped — otherwise a date
     picker that flips upward gets cut off by the panel's top edge. */
  overflow: visible;
}

.cw-st-field {
  margin-bottom: 14px;
}

.cw-st-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
}

/* Brief stays visible while a generation is in flight; the overlay just dims it
   and parks the spinner over the fields instead of replacing them. */

.cw-st-brief {
  position: relative;
}

.cw-st-brief.is-generating > *:not(.cw-st-brief-overlay) {
  opacity: 0.35;
  pointer-events: none;
}

.cw-st-brief-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  opacity: 1;
}

.cw-st-brief-overlay p {
  margin: 0;
}

.cw-st-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .cw-st-grid-2 {
    grid-template-columns: 1fr;
  }
}

.cw-st-label {
  display: block;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: 8px;
}

.cw-st-hint {
  font-weight: 400;
  color: var(--color-text-secondary);
}

.cw-st-optional {
  font-weight: 400;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.cw-st-input,
.cw-st-textarea {
  width: 100%;
  background: var(--cw-input-bg);
  border: 1px solid var(--cw-input-border);
  color: var(--cw-input-text);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: var(--font-size-md);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
}

.cw-st-input::-moz-placeholder, .cw-st-textarea::-moz-placeholder {
  color: var(--cw-input-placeholder);
}

.cw-st-input::placeholder,
.cw-st-textarea::placeholder {
  color: var(--cw-input-placeholder);
}

.cw-st-input:focus,
.cw-st-textarea:focus {
  border-color: var(--cw-ai-accent);
  box-shadow: 0 0 0 3px var(--cw-ai-accent-ring);
}

.cw-st-textarea.is-invalid {
  border-color: var(--cw-error);
}

/* _FormControls forces textarea to --radius-md + fixed --input-height; keep the
   brief field square-ish like the other inputs and let it grow, then scroll. */

.cw-st-modal-overlay .cw-st-textarea {
  border-radius: 10px !important;
  height: auto !important;
  min-height: 84px;
  max-height: 220px;
  overflow-y: auto;
}

.cw-st-field-error {
  margin: 6px 0 0;
  font-size: var(--font-size-sm);
  color: var(--cw-error);
}

.cw-st-field-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cw-st-charcount {
  margin-top: 3px;
  font-size: var(--font-size-xs);
  line-height: 1.2;
  color: var(--cw-text-muted);
  flex: 0 0 auto;
}

/* Chip groups */

.cw-st-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Shape only — colours come from the common .cw-tab class */

.cw-st-chip {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  padding: 8px 16px;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Footer */

.cw-st-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.cw-st-modal-footer-split {
  justify-content: space-between;
}

.cw-st-skip-link {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.cw-st-skip-link:hover:not(:disabled) {
  color: var(--color-text);
  text-decoration: underline;
}

.cw-st-skip-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cw-st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  cursor: pointer;
  border: 1px solid transparent;
  line-height: normal;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.2s ease, transform 0.2s ease;
}

.cw-st-btn:disabled,
.cw-st-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.cw-st-btn-primary {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color) !important;
  border: 1px solid transparent !important;
}

.cw-st-btn-primary:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover) !important;
  box-shadow: var(--btn-primary-accent-shadow-hover) !important;
  transform: translateY(-2px);
}

.cw-st-btn-ghost {
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
  border: var(--btn-secondary-border);
}

.cw-st-btn-ghost:hover:not(:disabled) {
  background: var(--btn-secondary-bg-white);
  box-shadow: var(--btn-secondary-dark-box-shadow);
}

/* Results list */

.cw-st-results-hint {
  margin: 0 0 12px;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.cw-st-results-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Same flat treatment as the full-draft preview: plain text on the panel, no
   card per option. Selection reads as an accent bar + brighter text. */

.cw-st-result-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--color-text-secondary);
  padding: 6px 0 6px 12px;
  box-shadow: inset 2px 0 0 transparent;
  font-size: var(--font-size-md);
  line-height: 1.5;
  white-space: normal;
  cursor: pointer;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

.cw-st-result-item:hover {
  background: none;
  color: var(--color-text);
}

.cw-st-result-item svg {
  flex-shrink: 0;
  color: var(--cw-ai-accent);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cw-st-result-item:hover svg {
  opacity: 1;
}

.cw-st-result-item.active {
  background: none;
  color: var(--color-text);
  box-shadow: inset 2px 0 0 var(--cw-ai-accent);
}

.cw-st-result-item.active svg {
  opacity: 1;
}

/* Radio indicator so a picked title/description reads as an explicit choice,
   not just a highlighted row. One pick per group. */

.cw-st-result-radio {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  border-radius: 50%;
  border: 1.5px solid var(--cw-input-border);
  background: transparent;
  position: relative;
  transition: border-color 0.15s ease;
}

.cw-st-result-item:hover .cw-st-result-radio {
  border-color: var(--cw-ai-accent);
}

.cw-st-result-item.active .cw-st-result-radio {
  border-color: var(--cw-ai-accent);
}

.cw-st-result-item.active .cw-st-result-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--cw-ai-accent);
}

/* Objectives are multi-select — reuse the native checkbox styling shared with
   the draft picks so the accent stays consistent. */

.cw-st-result-checkbox {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--radio-primary);
  cursor: pointer;
  pointer-events: none;
}

/* The global dark theme paints `input:checked + span` as a filled badge. The text
   next to this checkbox is plain copy, so out-specify that rule (same trick as
   .cw-st-draft-label) instead of touching the global one. */

.cw-st-result-item input[type=checkbox]:checked + span,
body[data-theme=dark] .cw-st-result-item input[type=checkbox]:checked + span {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--color-text) !important;
  padding: 0;
  border-radius: 0;
}

/* Group heading above a result list ("TITLES", "DESCRIPTIONS") — matches the
   draft preview's field labels. */

.cw-st-results-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cw-st-results-group-label {
  margin: 0 0 6px;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* Full draft preview */

.cw-st-draft {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cw-st-draft-image {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--cw-input-border);
}

.cw-st-draft-image img {
  display: block;
  width: 100%;
  height: auto;
}

.cw-st-draft-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cw-st-draft-pick {
  border-radius: 12px;
  padding: 0px 0px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cw-st-draft-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cw-st-draft-head input {
  width: 16px;
  height: 16px;
  accent-color: var(--radio-primary);
  cursor: pointer;
}

.cw-st-draft-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--color-text) !important;
  padding: 0;
  border-radius: 0;
  font-weight: var(--font-weight-medium);
}

/* The global dark theme paints `input:checked + span` as a filled checkbox box.
   This label is plain text, so out-specify that rule instead of touching it. */

body[data-theme=dark] .cw-st-draft-head input[type=checkbox]:checked + span.cw-st-draft-label {
  background-color: transparent !important;
}

.cw-st-draft-title {
  margin: 0;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.cw-st-draft-text {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.cw-st-draft-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cw-st-draft-list li {
  font-size: var(--font-size-md);
  line-height: 1.45;
  color: var(--color-text-secondary);
}

/* Image results (thumbnail generation) */

.cw-st-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.cw-st-result-image {
  padding: 0;
  border: 2px solid var(--cw-input-border);
  background: var(--cw-input-bg);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
  aspect-ratio: 16/9;
}

.cw-st-result-image:hover {
  border-color: var(--cw-ai-accent);
}

.cw-st-result-image.active {
  border-color: var(--cw-ai-accent);
}

.cw-st-result-image:active {
  transform: scale(0.99);
}

.cw-st-result-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Spinner */

.cw-st-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0.85;
  border-radius: 50%;
  animation: cw-st-spin 0.7s linear infinite;
}

@keyframes cw-st-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 575px) {
  .cw-st-modal {
    max-width: 100%;
  }

  .cw-title-label-row {
    flex-wrap: wrap;
  }
}

/* ---------- Theme-driven helpers (moved out of inline styles) ---------- */

/* "Use local timezone" detect link (light/base). Dark theme handled above. */

.wb-tz-detect-link {
  cursor: pointer;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  margin: 0 0 8px;
}

.wb-tz-detect-link svg {
  margin-right: 4px;
}

/* Past-date / error note */

.cw-error-note {
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}

.cw-error-note-icon {
  margin-right: 6px;
  vertical-align: text-bottom;
}

/* No inner scroller here: a 100vh box with a hidden scrollbar swallowed the
   wheel/scrollbar and left the page's own bar inert. The wizard scrolls with
   the document. */

.wz-content-col {
  margin-bottom: 20px;
}

.whitecardbox.cs-step-speakers {
  margin-top: 20px;
}

.csl-badge {
  font-weight: var(--font-weight-regular);
  border-radius: var(--icon-style-box-border-radius) !important;
  border: var(--icon-style-box-border) !important;
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
}

/* ============================================================
   WebinarCreatedPreview — Isolated stylesheet
   All scoped under .wcpv-shell to avoid leaking into other
   components.
   ============================================================ */

/* ---------- Light theme tokens ---------- */

.wcpv-shell {
  --wcpv-bg: var(--color-surface-2);
  --wcpv-surface: var(--color-surface);
  --wcpv-border: var(--color-border);
  --wcpv-shadow: 0 4px 16px rgba(0,0,0,0.06);
  --wcpv-shadow-hover: 0 8px 24px rgba(0,0,0,0.1);
  --wcpv-title: var(--color-text);
  --wcpv-text: var(--color-text);
  --wcpv-muted: var(--color-text-secondary);
  --wcpv-label: var(--color-text-secondary);
  --wcpv-accent: var(--color-primary);
  --wcpv-accent-soft: rgba(23,72,108,0.08);
  --wcpv-accent-text: var(--color-primary);
  --wcpv-green: var(--color-success);
  --wcpv-green-soft: rgba(8,210,89,0.1);
  --wcpv-green-text: var(--color-success);
  --wcpv-hero-from: var(--color-surface);
  --wcpv-hero-to: var(--color-surface-2);
  --wcpv-hero-text: var(--color-text);
  --wcpv-badge-bg: rgba(255,255,255,0.18);
  --wcpv-badge-border: rgba(255,255,255,0.3);
  --wcpv-badge-text: var(--color-surface);
  --wcpv-input-bg: var(--color-surface);
  --wcpv-input-border: var(--color-border);
  --wcpv-input-focus: var(--color-primary);
  --wcpv-input-text: var(--color-text);
  --wcpv-tag-bg: var(--color-surface-2);
  --wcpv-tag-text: var(--color-text-secondary);
  --wcpv-section-icon-bg: rgba(23,72,108,0.1);
  --wcpv-section-icon: var(--color-primary);
  --wcpv-cta-bg: linear-gradient(95deg, var(--color-success) 0%, var(--color-success) 100%);
  --wcpv-cta-text: var(--color-surface);
  --wcpv-cta-shadow: 0 10px 25px rgba(8,210,89,0.35);
  --wcpv-overlay: rgba(0,0,0,0.45);
  --wcpv-edit-btn-bg: rgba(23,72,108,0.08);
  --wcpv-edit-btn-text: var(--color-primary);
  --wcpv-edit-btn-hover: rgba(23,72,108,0.15);
  --wcpv-speaker-bg: var(--color-surface-2);
  --wcpv-pill-green-bg: rgba(8,210,89,0.1);
  --wcpv-pill-green-text: var(--color-success);
  --wcpv-divider: var(--color-border);
  --wcpv-meta-bg: var(--color-surface-2);
  --wcpv-meta-border: var(--color-border);
}

/* ============================================================
   Shell / Layout
   ============================================================ */

.wcpv-shell {
  color: var(--wcpv-text);
  min-height: 100vh;
  font-family: var(--font-primary);
  margin-top: 30px;
}

.wcpv-wrapper {
  /* max-width: 860px; */
  margin: 0 auto;
  width: 100%;
  padding: 0 0 60px;
}

/* Loading */

.wcpv-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 100px 0;
  color: var(--wcpv-muted);
}

/* ============================================================
   INTRO / TOP BAR
   ============================================================ */

.wcpv-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0px 0 24px;
}

.wcpv-intro-text h1 {
  font-size: var(--font-size-xxl) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-text) !important;
  margin: 0 0 4px;
}

.wcpv-intro-text p {
  font-size: var(--font-size-md) !important;
  color: var(--color-text-secondary) !important;
  margin: 0;
}

.wcpv-intro-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   SECTION CARD  (shared wrapper for each editable section)
   ============================================================ */

.wcpv-section-card {
  background: var(--wcpv-surface);
  border: 1px solid var(--wcpv-border);
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: var(--wcpv-shadow);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.wcpv-section-card:hover {
  box-shadow: var(--wcpv-shadow-hover);
}

/* Card header row */

.wcpv-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--wcpv-border);
}

.wcpv-card-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wcpv-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--icon-style-box-border-radius);
  border: var(--icon-style-box-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
  flex-shrink: 0;
}

.wcpv-card-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor !important;
}

.wcpv-card-head-left h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0 0 2px;
}

.wcpv-card-head-left p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.wcpv-card-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wcpv-card-body {
  padding: 22px;
}

/* Edit button */

.wcpv-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--btn-secondary-bg-white) !important;
  border: var(--btn-secondary-border) !important;
  color: var(--btn-secondary-dark-color) !important;
  box-shadow: none !important;
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 20px;
  height: auto;
  white-space: nowrap;
}

.wcpv-edit-btn svg,
.wcpv-edit-btn svg path {
  fill: currentColor !important;
  color: inherit !important;
}

.wcpv-edit-btn:hover {
  background: var(--btn-secondary-bg-white) !important;
  box-shadow: var(--btn-secondary-dark-box-shadow) !important;
  transform: translateY(-2px);
}

.wcpv-edit-btn:hover svg {
  color: inherit;
}

/* ============================================================
   HERO SECTION  (banner + title preview)
   ============================================================ */

.wcpv-hero {
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--wcpv-hero-from), var(--wcpv-hero-to));
  position: relative;
  margin-bottom: 0;
  display: flex;
  align-items: stretch;
  padding: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

/* While the date/time popup is open, let it spill out of the hero instead of
   being clipped. The banner image keeps its own rounding so corners stay neat. */

.wcpv-hero--sched-open {
  overflow: visible;
}

.wcpv-hero-bg {
  width: 100%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Stand-in when the webinar has no thumbnail yet — keeps the hero's shape. */

.wcpv-hero-bg--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cw-card-bg, rgba(255, 255, 255, 0.04));
  border: 1px dashed var(--cw-card-border);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.banner-wrap {
  display: flex;
  align-items: center;
  border-radius: 20px;
  width: 290px;
  max-width: 290px;
  box-sizing: border-box;
}

.wcpv-hero-overlay {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  /* padding: 48px 36px 40px; */
}

/* Inline edit panels (title / banner) should span the full overlay width */

.wcpv-hero-overlay .wcpv-inline-edit {
  width: 100%;
}

.wcpv-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.wcpv-hero-badge {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  backdrop-filter: blur(6px);
  line-height: normal;
  border-radius: var(--icon-style-box-border-radius) !important;
  border: var(--icon-style-box-border) !important;
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
}

.wcpv-hero-badge.live-badge {
  background: var(--color-success-bg);
  border-color: rgba(8, 210, 89, 0.5);
  color: var(--color-success-bg);
  display: flex;
  align-items: center;
  gap: 6px;
}

.wcpv-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  animation: wcpv-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes wcpv-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.wcpv-hero h1 {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0 0 14px;
  line-height: 1.3;
  /* text-shadow: 0 2px 12px rgba(0,0,0,0.5); */
}

.wcpv-hero-short-desc {
  font-size: var(--font-size-md);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 20px;
  line-height: 1.6;
}

.wcpv-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.8);
}

.wcpv-hero-meta span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.wcpv-hero-meta svg,
.wcpv-hero-meta svg path {
  flex-shrink: 0;
  fill: currentColor !important;
  color: inherit !important;
}

.wcpv-chip-edit svg,
.wcpv-chip-edit svg path {
  fill: currentColor !important;
  color: inherit !important;
  width: 15px;
  height: 15px;
}

.wcpv-hero-meta span svg {
  position: relative;
}

.wcpv-chip-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  padding: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.wcpv-chip-edit:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Inline date/time editor (replaces the date text in the hero) */

.wcpv-sched-inline {
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Picker sizes to content (not full width) so Save/X sit right beside the field */

.wcpv-sched-inline .cw-dtp {
  width: auto;
  min-width: 230px;
}

.wcpv-sched-input {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--wcpv-hero-text);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: var(--font-size-base);
  font-family: inherit;
  color-scheme: dark;
}

.wcpv-sched-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.wcpv-sched-tz {
  max-width: 190px;
}

.wcpv-sched-tz option {
  color: var(--color-text);
}

/* Themed date/time picker sits on the hero — force hero (light) colors since
   the .cw-input-* tokens it normally reads are not defined inside .wcpv-shell */

.wcpv-sched-inline .cw-dtp-field {
  background-color: var(--wcpv-badge-bg) !important;
  border-color: var(--wcpv-badge-border) !important;
  color: var(--wcpv-hero-text) !important;
}

.wcpv-sched-inline .cw-dtp-field-icon {
  color: var(--wcpv-hero-text);
}

.wcpv-sched-btn {
  width: 40px;
  /* Stretch to match the picker field height so all three align on one level */
  align-self: stretch;
  border: none;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

/* Both buttons share the picker accent (gold in dark theme) with a white glyph */

.wcpv-sched-btn.save {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary) !important;
}

.wcpv-sched-btn.cancel {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error) !important;
}

.wcpv-sched-btn.save svg,
.wcpv-sched-btn.cancel svg {
  width: 16px;
  height: 16px;
  display: block;
}

.wcpv-sched-btn.save svg path,
.wcpv-sched-btn.cancel svg path {
  fill: currentColor !important;
  stroke: none !important;
  color: inherit !important;
}

.wcpv-sched-btn.save:hover,
.wcpv-sched-btn.cancel:hover {
  opacity: 0.9;
}

.wcpv-sched-btn.save:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---- Rich text (Quill) editor in the description card ---- */

.wcpv-quill .ql-toolbar {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-color: var(--wcpv-input-border);
  background: var(--wcpv-input-bg);
}

.wcpv-quill .ql-container {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-color: var(--wcpv-input-border);
  background: var(--wcpv-input-bg);
  min-height: 150px;
  font-size: var(--font-size-md);
  font-family: inherit;
}

.wcpv-quill .ql-editor {
  color: var(--wcpv-input-text);
}

.wcpv-quill .ql-editor.ql-blank::before {
  color: var(--wcpv-muted);
  font-style: normal;
}

.wcpv-hero-edit-row {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.wcpv-hero-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 20px;
  height: auto;
  white-space: nowrap;
}

.wcpv-hero-edit-btn svg,
.wcpv-hero-edit-btn svg path {
  fill: currentColor !important;
  color: inherit !important;
}

/* Override global secondary button styles for hero edit buttons */

.wcpv-hero-edit-row button.wcpv-hero-edit-btn.wcpv-btn-secondary {
  background: transparent !important;
  border: 0px solid var(--wizard-link) !important;
  color: var(--wizard-link) !important;
  padding: 0px !important;
  border-radius: 40px !important;
  box-shadow: none !important;
}

.wcpv-hero-edit-row button.wcpv-hero-edit-btn.wcpv-btn-secondary:hover {
  background: none !important;
  color: var(--wizard-link-hover) !important;
  border-color: none !important;
}

/* ---------- Invitation eyebrow + register button (in hero) ---------- */

.wcpv-invite-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  /* letter-spacing: 0.08em; */
  color: var(--color-text);
  margin-bottom: 10px;
}

.wcpv-invite-eyebrow svg {
  color: var(--wcpv-green, var(--color-success));
  flex-shrink: 0;
}

.wcpv-invite-cta {
  margin-top: 22px;
}

.wcpv-register-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--wcpv-cta-bg);
  color: var(--wcpv-cta-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  padding: 13px 26px;
  border-radius: 12px;
  box-shadow: var(--wcpv-cta-shadow);
}

/* ============================================================
   ABOUT / DESCRIPTION  (rich text)
   ============================================================ */

.wcpv-rich-text {
  font-size: var(--font-size-md);
  line-height: 1.7;
  color: var(--color-text);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.wcpv-rich-text p {
  margin: 0 0 12px;
}

.wcpv-rich-text p:last-child {
  margin-bottom: 0;
}

.wcpv-rich-text h1,
.wcpv-rich-text h2,
.wcpv-rich-text h3 {
  font-size: calc(var(--font-size-xl) + 2px);
  color: var(--wcpv-title);
}

.wcpv-rich-text ul {
  padding-left: 20px;
}

.wcpv-rich-text img {
  max-width: 100%;
  border-radius: 10px;
}

/* ============================================================
   META GRID  (date, duration, type, etc.)
   ============================================================ */

.wcpv-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.wcpv-meta-item {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wcpv-meta-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.wcpv-meta-value {
  font-size: var(--font-size-md) !important;
  font-weight: var(--font-weight-medium);
  color: var(--color-text) !important;
}

/* ============================================================
   TAGS ROW
   ============================================================ */

.wcpv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.wcpv-tag {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 5px 12px;
  border-radius: 30px;
  background: var(--color-accent-seafoam-contrast-20);
  color: var(--color-accent-seafoam);
}

.wcpv-tag.green {
  background: var(--wcpv-pill-green-bg);
  color: var(--wcpv-pill-green-text);
}

/* ============================================================
   SPEAKERS
   ============================================================ */

.wcpv-speaker-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wcpv-speaker-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--wcpv-speaker-bg);
  border: 1px solid var(--wcpv-border);
  border-radius: 16px;
  padding: 16px 18px;
  transition: box-shadow 0.2s ease;
}

.wcpv-speaker-card:hover {
  box-shadow: var(--wcpv-shadow);
}

.wcpv-speaker-info {
  flex: 1;
  min-width: 0;
}

.wcpv-speaker-edit-btn {
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
}

.wcpv-speaker-avatar,
.wcpv-speaker-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
}

.wcpv-speaker-avatar {
  background: var(--color-accent-orange);
  color: #ffffff;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.wcpv-speaker-img {
  -o-object-fit: cover;
     object-fit: cover;
}

.wcpv-speaker-info h4 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--wcpv-title);
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wcpv-speaker-info p {
  font-size: var(--font-size-base);
  color: var(--wcpv-muted);
  margin: 0 0 3px;
}

.wcpv-speaker-bio {
  font-size: var(--font-size-base);
  color: var(--wcpv-text);
  margin: 4px 0 0;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.wcpv-role-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  padding: 2px 8px;
  border-radius: var(--icon-style-box-border-radius) !important;
  border: var(--icon-style-box-border) !important;
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
  text-transform: capitalize;
}

/* ============================================================
   LEARNING OBJECTIVES GRID
   ============================================================ */

.wcpv-objectives-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wcpv-objective {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--wcpv-meta-bg);
  border: 1px solid var(--wcpv-meta-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: var(--font-size-md);
  color: var(--wcpv-text);
  font-weight: var(--font-weight-medium);
  min-width: 0;
}

.wcpv-objective span {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.wcpv-objective-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wcpv-green-soft);
  color: var(--wcpv-green-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================================
   BENEFITS
   ============================================================ */

.wcpv-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wcpv-benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--wcpv-meta-bg);
  border: 1px solid var(--wcpv-meta-border);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: var(--font-size-md);
  color: var(--wcpv-text);
  font-weight: var(--font-weight-medium);
}

.wcpv-benefit-icon {
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

/* ============================================================
   EMAIL SETTINGS
   ============================================================ */

.wcpv-email-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wcpv-email-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--wcpv-meta-bg);
  border: 1px solid var(--wcpv-meta-border);
  border-radius: 10px;
  padding: 10px 14px;
}

.wcpv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
  flex-shrink: 0;
}

.wcpv-email-row.is-on .wcpv-dot {
  background: var(--wcpv-green);
}

.wcpv-email-label {
  flex: 1;
  font-size: var(--font-size-base);
  color: var(--wcpv-text);
  font-weight: var(--font-weight-medium);
}

.wcpv-email-state {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--wcpv-muted);
}

.wcpv-email-row.is-on .wcpv-email-state {
  color: var(--wcpv-green-text);
}

/* toggle switch */

/* Toggle switches use the shared `w-toggle` classes in _WebinarBase.scss. */

/* ============================================================
   INLINE EDIT OVERLAY
   ============================================================ */

.wcpv-inline-edit {
  margin-top: 14px;
  border: 1px solid var(--wcpv-border);
  border-radius: 14px;
  padding: 16px;
  background: var(--wcpv-input-bg);
  animation: wcpv-slide-in 0.18s ease;
}

@keyframes wcpv-slide-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wcpv-inline-edit label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--wcpv-label);
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wcpv-inline-edit-inner {
  display: flex;
  align-items: center;
  border-radius: 10px;
  gap: 10px;
  padding-left: 0;
  transition: border-color 0.2s ease;
}

.wcpv-inline-edit-inner:focus-within {
  border-color: var(--wcpv-input-focus);
}

.wcpv-inline-edit-inner input[type=text] {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 14px;
  color: var(--wcpv-input-text);
  font-size: var(--font-size-md);
  font-family: inherit;
  outline: none;
  box-shadow: none;
}

.wcpv-inline-edit-inner input[type=text] {
  border: 1px solid var(--wcpv-border);
}

.wcpv-inline-edit textarea {
  width: 100%;
  border: 1px solid var(--wcpv-input-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: var(--font-size-md);
  color: var(--wcpv-input-text);
  background: var(--wcpv-input-bg);
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.wcpv-inline-edit textarea:focus {
  outline: none;
  border-color: var(--wcpv-input-focus);
}

.wcpv-inline-edit-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  justify-content: flex-end;
}

.wcpv-inline-edit-inner .wcpv-inline-edit-actions {
  padding-right: 4px;
}

textarea + .wcpv-inline-edit-actions {
  margin-top: 10px;
}

/* Image upload zone inside inline edit */

.wcpv-img-upload-zone {
  border: 2px dashed var(--wcpv-input-border);
  border-radius: 12px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  background: var(--wcpv-input-bg);
  color: var(--wcpv-muted);
  font-size: var(--font-size-base);
  position: relative;
}

.wcpv-img-upload-zone:hover {
  border-color: var(--wcpv-input-focus);
  background: var(--wcpv-accent-soft);
}

.wcpv-img-upload-zone input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.wcpv-img-preview {
  width: 100%;
  max-height: 180px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  margin-top: 10px;
  display: block;
}

/* ============================================================
   BUTTONS (shared)
   ============================================================ */

.wcpv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  box-shadow: none;
  border: 1px solid transparent;
}

.wcpv-btn:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
  box-shadow: var(--btn-primary-accent-shadow-hover);
  color: var(--btn-primary-color);
}

.wcpv-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.wcpv-btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  box-shadow: none;
  border: 1px solid transparent;
}

.wcpv-btn-primary svg,
.wcpv-btn-primary svg path {
  fill: currentColor !important;
  color: inherit !important;
}

.wcpv-btn-primary:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
  box-shadow: var(--btn-primary-accent-shadow-hover);
  transform: translateY(-1px);
}

.wcpv-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  border-radius: 40px !important;
  padding: 9px 16px !important;
  border: var(--btn-secondary-border) !important;
  background: var(--btn-secondary-bg-white) !important;
  color: var(--btn-secondary-dark-color) !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.wcpv-btn-secondary:hover:not(:disabled) {
  background: var(--btn-secondary-bg-white) !important;
  color: var(--btn-secondary-dark-color) !important;
  box-shadow: var(--btn-secondary-dark-box-shadow) !important;
}

.wcpv-btn-secondary svg,
.wcpv-btn-secondary svg path {
  fill: currentColor !important;
  color: inherit !important;
}

.wcpv-btn-ghost {
  background: transparent;
  color: var(--wizard-link);
  padding: 10px 16px;
}

.wcpv-btn-ghost:hover {
  color: var(--wizard-link-hover);
}

.wcpv-btn-sm {
  padding: 7px 14px;
  font-size: var(--font-size-base);
  border-radius: 10px;
}

/* ============================================================
   FOOTER ACTION ROW
   ============================================================ */

.wcpv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
}

/* ============================================================
   CONFIRM MODAL
   ============================================================ */

.wcpv-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--wcpv-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  backdrop-filter: blur(3px);
}

.wcpv-modal {
  background: var(--wcpv-surface);
  border: 1px solid var(--wcpv-border);
  border-radius: 22px;
  padding: 38px 32px;
  width: 100%;
  max-width: 460px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: wcpv-modal-pop 0.22s ease;
}

@keyframes wcpv-modal-pop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.wcpv-modal-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--wcpv-green-soft);
  color: var(--wcpv-green-text);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.wcpv-modal h3 {
  font-size: calc(var(--font-size-xl) + 2px);
  font-weight: 800;
  color: var(--wcpv-title);
  margin: 0 0 8px;
}

.wcpv-modal p {
  font-size: var(--font-size-md);
  color: var(--wcpv-muted);
  margin: 0 0 24px;
}

.wcpv-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wcpv-modal-actions .wcpv-btn {
  width: 100%;
}

/* ============================================================
   EMPTY BLOCK
   ============================================================ */

.wcpv-empty {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  font-style: italic;
  padding: 8px 0;
}

/* ============================================================
   MISSING WARNING
   ============================================================ */

.wcpv-missing {
  margin-top: 12px;
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: var(--font-size-base);
}

/* ============================================================
   SECTION DIVIDER
   ============================================================ */

.wcpv-divider {
  height: 1px;
  background: var(--wcpv-divider);
  margin: 0 22px;
}

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

@media (max-width: 768px) {
  .wcpv-hero-overlay {
    padding: 32px 20px 28px;
  }

  .wcpv-hero h1 {
    font-size: 22px;
  }

  .wcpv-meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wcpv-objectives-grid {
    grid-template-columns: 1fr;
  }

  .wcpv-email-grid {
    grid-template-columns: 1fr;
  }

  .wcpv-footer {
    flex-direction: column-reverse;
  }

  .wcpv-footer .wcpv-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .wcpv-meta-grid {
    grid-template-columns: 1fr;
  }

  .wcpv-card-body {
    padding: 16px;
  }

  .wcpv-hero h1 {
    font-size: 19px;
  }
}

.wcpv-modal-actions button.wcpv-btn.wcpv-btn-ghost:hover {
  background: none;
  box-shadow: none;
  color: var(--wizard-link-hover);
}

/* =========================================================================
   Shell — token mapping
   ========================================================================= */

.wss-shell {
  --wss-bg: var(--color-surface);
  --wss-surface: var(--color-surface-2);
  --wss-border: var(--color-border);
  --wss-text: var(--color-text);
  --wss-muted: var(--color-text-muted);
  --wss-secondary: var(--color-text-secondary);
  --wss-accent: var(--color-primary);
  --wss-radius: 16px;
  --wss-radius-sm: 10px;
  --wss-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --wss-shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --wss-input-bg: var(--color-surface);
  --wss-input-border: var(--color-border);
  background: var(--wss-bg);
  border-radius: var(--wss-radius);
  border: 1px solid var(--wss-border);
  padding: 28px;
  box-shadow: var(--wss-shadow);
}

/* =========================================================================
   Header
   ========================================================================= */

.wss-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--wss-border);
}

.wss-header-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--icon-bg-color) !important;
  color: var(--color-text-baselight) !important;
}

.wss-header-icon-wrap svg {
  width: 20px;
  height: 20px;
}

.wss-header-title {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0 0 4px;
}

.wss-header-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}

/* =========================================================================
   Connected Accounts Banner
   ========================================================================= */

.wss-accounts-bar {
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--wss-radius-sm);
  padding: 14px 18px;
  margin-bottom: 20px;
}

.wss-accounts-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wss-accounts-bar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.wss-accounts-bar-title svg {
  flex-shrink: 0;
}

.wss-accounts-bar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  padding: 0;
}

.wss-accounts-bar-toggle:hover {
  opacity: 0.8;
}

.wss-accounts-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  align-items: center;
}

/* ---- Individual pill wrapper (for tooltip positioning) ---- */

.wss-pill-wrap {
  position: relative;
}

/* ---- Pill ---- */

.wss-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  cursor: default;
}

.wss-pill--connected {
  background: var(--color-success-bg);
  border-color: var(--color-success);
}

.wss-pill--broken {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  cursor: help;
}

.wss-pill-icon {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}

.wss-pill--connected .wss-pill-icon {
  color: var(--color-success);
}

.wss-pill--broken .wss-pill-icon {
  color: var(--color-error);
}

.wss-pill-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.wss-pill-name {
  color: var(--color-text-secondary);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wss-pill--connected .wss-pill-name {
  color: var(--color-success);
}

.wss-pill--broken .wss-pill-name {
  color: var(--color-error);
}

.wss-pill-badge {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  padding: 2px 8px;
  border-radius: 999px;
}

.wss-pill-badge--connected {
  background: var(--color-success);
  color: var(--color-surface);
}

.wss-pill-badge--broken {
  background: var(--color-error);
  color: #fff;
}

.wss-pill-not-connected {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.wss-pill-connect-btn {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  background: var(--color-info-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 10px;
  text-decoration: none;
  white-space: nowrap;
}

.wss-pill-connect-btn:hover {
  filter: brightness(0.95);
}

.wss-pill-reconnect {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--color-error);
  text-decoration: none;
  white-space: nowrap;
}

.wss-pill-reconnect:hover {
  text-decoration: underline;
}

/* ---- Broken token tooltip ---- */

.wss-pill-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 240px;
  max-width: 340px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.wss-pill-tooltip-title {
  font-weight: var(--font-weight-medium);
  margin-bottom: 6px;
  color: var(--color-error);
}

.wss-pill-tooltip-row {
  margin-bottom: 6px;
}

.wss-pill-tooltip-row:last-child {
  margin-bottom: 0;
}

.wss-pill-tooltip-row strong {
  display: block;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.wss-pill-tooltip-row span {
  color: var(--color-text-secondary);
}

.wss-pill-tooltip-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.wss-pill-tooltip-link:hover {
  text-decoration: underline;
}

/* ---- Manage All button ---- */

.wss-manage-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--color-info-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.wss-manage-all:hover {
  filter: brightness(0.95);
}

/* =========================================================================
   Loading
   ========================================================================= */

.wss-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* =========================================================================
   Platform Grid
   ========================================================================= */

.wss-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* =========================================================================
   Platform Card
   ========================================================================= */

.wss-platform-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--wss-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.wss-platform-card:hover {
  box-shadow: var(--wss-shadow-md);
}

.wss-platform-card--disconnected {
  opacity: 0.65;
}

.wss-platform-card--published {
  border-color: var(--color-success);
  box-shadow: 0 0 0 1px var(--color-success-bg);
}

/* ---- Card Head ---- */

.wss-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.wss-platform-pill {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wss-platform-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.wss-platform-icon-wrap svg {
  display: block;
}

.wss-platform-label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* ---- Status Badge ---- */

.wss-status-badge {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  padding: 3px 10px;
  border-radius: 999px;
}

.wss-status-badge--published {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.wss-status-badge--scheduled {
  background: var(--color-info-bg);
  color: var(--color-primary);
}

.wss-status-badge--failed {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* ---- Card Body ---- */

.wss-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* ---- Not Connected State ---- */

.wss-not-connected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 8px;
  text-align: center;
  background: var(--color-surface-2);
  flex: 1;
}

.wss-not-connected-icon {
  color: var(--color-text-muted);
  opacity: 0.5;
  margin-bottom: 4px;
}

.wss-not-connected p {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

.wss-connect-link {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  margin-top: 4px;
}

.wss-connect-link:hover {
  text-decoration: underline;
}

/* =========================================================================
   Form Fields
   ========================================================================= */

.wss-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wss-label {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.wss-select,
.wss-datetime {
  border-radius: var(--wss-radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  cursor: pointer;
}

.wss-select:disabled,
.wss-datetime:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wss-textarea {
  border-radius: var(--wss-radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  width: 100%;
  resize: vertical;
  min-height: 88px;
  outline: none;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color 0.15s;
}

.wss-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wss-char-count {
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: right;
}

.wss-char-count--warn {
  color: var(--color-warning);
}

.wss-char-count--over {
  color: var(--color-error);
}

/* =========================================================================
   Thumbnail
   ========================================================================= */

.wss-thumbnail-wrap {
  border-radius: var(--wss-radius-sm);
  overflow: hidden;
  background: var(--color-surface-2);
  max-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wss-thumbnail {
  width: 100%;
  height: 140px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  display: block;
}

/* =========================================================================
   Error Message
   ========================================================================= */

.wss-error-msg {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: var(--wss-radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--color-error);
  line-height: 1.5;
}

/* =========================================================================
   Token Warning
   ========================================================================= */

.wss-token-warning {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--wss-radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: #92400e;
  line-height: 1.4;
}

.wss-token-warning svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #d97706;
}

.wss-token-warning span {
  flex: 1;
}

.wss-token-warning--revoked {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

.wss-token-warning--revoked svg {
  color: #dc2626;
}

.wss-token-warning-link {
  color: #d97706;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-decoration: none;
}

.wss-token-warning-link:hover {
  text-decoration: underline;
}

.wss-token-warning--revoked .wss-token-warning-link {
  color: #dc2626;
}

/* =========================================================================
   Publish History List
   ========================================================================= */

.wss-history-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--wss-radius-sm);
  overflow: hidden;
}

.wss-history-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 8px 12px;
  background: var(--color-surface-2, #f8f9fb);
  border-bottom: 1px solid var(--color-border);
}

.wss-history-list {
  display: flex;
  flex-direction: column;
}

.wss-history-entry {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid var(--color-border);
}

.wss-history-entry:last-child {
  border-bottom: none;
}

.wss-history-entry--success {
  background: #f0fdf4;
}

.wss-history-entry--failed {
  background: #fff5f5;
}

.wss-history-entry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wss-history-badge {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  padding: 2px 8px;
  border-radius: 20px;
}

.wss-history-badge--success {
  background: #dcfce7;
  color: #16a34a;
}

.wss-history-badge--failed {
  background: #fee2e2;
  color: #dc2626;
}

.wss-history-date {
  font-size: 11px;
  color: var(--color-text-muted);
}

.wss-history-error {
  font-size: 11px;
  color: #dc2626;
  line-height: 1.4;
  word-break: break-word;
}

.wss-history-caption {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

/* =========================================================================
   Publish History (old — keep for compatibility)
   ========================================================================= */

.wss-publish-history {
  border-radius: var(--wss-radius-sm);
  padding: 10px 12px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wss-publish-history--success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.wss-publish-history--failed {
  background: #fff5f5;
  border: 1px solid #fecaca;
}

.wss-publish-history-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.wss-publish-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wss-publish-history-date {
  font-size: 12px;
  color: var(--color-text);
  font-weight: 500;
}

.wss-publish-history-badge {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.wss-publish-history-badge--published {
  background: #dcfce7;
  color: #16a34a;
}

.wss-publish-history-badge--failed {
  background: #fee2e2;
  color: #dc2626;
}

.wss-publish-history-caption {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

.wss-publish-history-error {
  font-size: 12px;
  color: #dc2626;
  line-height: 1.4;
  word-break: break-word;
}

.wss-publish-history-meta {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* =========================================================================
   Card Actions
   ========================================================================= */

.wss-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
  flex-wrap: wrap;
}

.wss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--wss-radius-sm);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
  flex: 1;
}

.wss-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wss-btn--primary {
  background: var(--color-primary);
  color: var(--color-surface);
}

.wss-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.wss-btn--secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.wss-btn--secondary:hover:not(:disabled) {
  background: var(--color-dim, var(--color-border));
}

.wss-btn--ghost {
  background: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error);
  flex: none;
}

.wss-btn--ghost:hover:not(:disabled) {
  background: var(--color-error-bg);
}

/* ---- Status Chips ---- */

.wss-published-chip {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-success);
  padding: 8px 14px;
  background: var(--color-success-bg);
  border-radius: var(--wss-radius-sm);
  width: 100%;
  text-align: center;
}

.wss-scheduled-chip {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================================
   Spinner
   ========================================================================= */

.wss-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: wss-spin 0.6s linear infinite;
}

@keyframes wss-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 767.98px) {
  .wss-shell {
    padding: 16px;
  }

  .wss-platform-grid {
    grid-template-columns: 1fr;
  }

  .wss-header {
    flex-direction: column;
    gap: 12px;
  }

  .wss-accounts-pills {
    gap: 6px;
  }
}

@media (max-width: 991.98px) {
  .wss-platform-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

.webinar-description-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 8px;
}

.webinar-description-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  width: 100%;
  word-break: break-word;
}

.webinar-show-more-btn {
  display: block;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  text-decoration: underline;
  line-height: 1.4;
  margin-top: 2px;
}

.webinar-show-more-btn:hover {
  color: var(--color-primary);
}

.webinar-desc-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000000;
  backdrop-filter: blur(4px);
  padding: 20px;
  box-sizing: border-box;
}

.webinar-desc-modal-content {
  background: var(--color-surface);
  width: 100%;
  max-width: 600px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

.webinar-desc-modal-header {
  padding: 18px 24px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
}

.webinar-desc-modal-header h3 {
  color: var(--color-text);
  margin: 0;
  font-size: calc(var(--font-size-xl) + 2px);
  font-weight: var(--font-weight-medium);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 12px;
}

.webinar-desc-close-btn {
  background: var(--color-surface-2);
  border: none;
  color: var(--color-text);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.webinar-desc-close-btn:hover {
  background: var(--color-border);
  transform: rotate(90deg);
}

.webinar-desc-modal-body,
.webinar-desc-modal-body * {
  color: var(--color-text-secondary);
}

.webinar-desc-modal-body {
  padding: 20px 24px 24px;
  max-height: 60vh;
  overflow-y: auto;
  font-size: var(--font-size-md);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.webinar-desc-modal-body p,
.webinar-desc-modal-body br {
  white-space: normal;
}

/* ============================================================
   WebinarEmailSettings — colours/buttons come ONLY from the
   global theme files:
     public/css/global/themes/light-theme.css   (:root)
     public/css/global/themes/dark-theme.css    (body[data-theme="dark"])
   Both themes switch automatically via body[data-theme]; no
   per-theme overrides needed here. All classes are wes-* scoped
   to avoid any conflict with existing styles.
   ============================================================ */

.wes-root {
  color: var(--color-text);
}

.wes-loader {
  min-height: 300px;
}

/* ── header ── */

.wes-header {
  margin-bottom: 20px;
}

.wes-header h2 {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0 0 6px;
}

.wes-header p {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0;
  line-height: 1.5;
}

/* ── audience selector ── */

.wes-audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.wes-aud-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 16px;
  border-radius: 14px;
  border: 2px solid var(--plan-box-border-color) !important;
  background: var(--plan-box-bg) !important;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.wes-aud-card:hover,
.wes-aud-card.is-active {
  border-color: var(--plan-box-hover-border-color) !important;
  box-shadow: none;
  color: var(--plan-box-hover-heading-color) !important;
  background: var(--plan-box-hover-bg) !important;
}

.wes-aud-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--plan-box-icon-bg-color);
  border: 1px solid var(--plan-box-icon-border-color);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  margin-bottom: 7px;
}

.wes-aud-icon svg {
  width: 20px;
  height: 20px;
}

.wes-aud-card.is-active .wes-aud-icon {
  background: var(--plan-box-hover-icon-bg-color);
  border-color: var(--plan-box-hover-icon-border-color);
  color: var(--plan-box-icon-text-color) !important;
}

.wes-aud-card:hover .wes-aud-icon,
.wes-aud-card.is-active .wes-aud-icon {
  color: var(--plan-box-icon-text-color) !important;
}

.wes-aud-card:hover .wes-aud-icon {
  background: var(--plan-box-hover-icon-bg-color);
  border-color: var(--plan-box-hover-icon-border-color);
}

.wes-aud-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.wes-aud-title {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.wes-aud-sub {
  font-size: var(--font-size-sm);
  color: var(--plan-box-text-color) !important;
}

.wes-aud-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  color: var(--color-success);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
}

/* ── layout ── */

.wes-grid {
  display: grid;
  /* The preview needs real width — a 600px email scaled into a narrow rail
     is unreadable, so give the sidebar a floor and let the editor flex. */
  grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr);
  gap: 20px;
  align-items: start;
}

.wes-audience {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.wes-col-side {
  position: sticky;
  top: 16px;
}

@media (max-width: 1199px) {
  .wes-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  }
}

@media (max-width: 991px) {
  .wes-grid {
    grid-template-columns: 1fr;
  }

  /* Full-width below the editor — sticky would trap it mid-scroll. */

  .wes-col-side {
    position: static;
  }

  .wes-live-body {
    height: clamp(420px, 78vw, 700px);
  }
}

/* ── email card ── */

.wes-card {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wes-card.is-open {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.wes-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
}

.wes-card-headmain {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.wes-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--icon-style-box-border-radius);
  border: var(--icon-style-box-border);
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
  flex-shrink: 0;
}

.wes-card-icon svg {
  width: 16px;
  height: 16px;
  fill: transparent !important;
}

.wes-card-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wes-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.wes-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted);
  flex-shrink: 0;
}

.wes-dot.on {
  background: var(--color-success);
}

.wes-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.wes-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.wes-chevron {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  display: inline-flex;
  padding: 2px;
}

/* switch — self-contained (no Bootstrap), accent from global success (teal) */

/* Toggle switches use the shared `w-toggle` classes in _WebinarBase.scss. */

/* ── card body ── */

.wes-card-body {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--color-border);
}

.wes-field {
  margin-top: 14px;
}

.wes-field label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.wes-input {
  width: 100%;
  font-size: var(--font-size-md) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 20px !important;
  height: var(--input-height) !important;
  color: var(--input-color) !important;
  background-color: var(--input-bg) !important;
  border-radius: var(--input-radius) !important;
  border: var(--input-border) !important;
  padding: var(--input-padding) !important;
  outline: none;
  transition: border-color 0.2s !important;
}

.wes-input::-moz-placeholder {
  color: var(--input-placeholder);
}

.wes-input::placeholder {
  color: var(--input-placeholder);
}

.wes-input:focus {
  border-color: var(--input-hover-border-blue) !important;
  box-shadow: none !important;
}

/* minutes row */

.wes-minutes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.wes-minutes input {
  width: 76px;
  text-align: center;
  padding: 5px 8px;
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  outline: none;
}

/* insert chips */

.wes-insert {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.wes-insert-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.wes-chip {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-secondary), monospace;
  color: var(--color-success);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
}

.wes-chip:hover {
  border-color: var(--color-success-border);
}

/* ── action buttons (from global button tokens) ── */

.wes-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  gap: 12px;
}

.wes-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  cursor: pointer;
  transition: box-shadow 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}

.wes-btn-outline {
  border: var(--btn-secondary-border);
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.wes-btn-outline:hover {
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
  box-shadow: var(--btn-secondary-dark-box-shadow);
}

.wes-btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
}

.wes-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── live preview (right) ── */

.wes-live {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 16px;
}

.wes-live-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.wes-live-head-text {
  flex: 1;
  min-width: 0;
}

.wes-live-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--icon-style-box-border-radius);
  border: var(--icon-style-box-border);
  background: var(--icon-style-box-bg-color);
  color: var(--icon-style-box-color) !important;
  flex-shrink: 0;
}

.wes-live-eye svg {
  width: 16px;
  height: 16px;
  fill: transparent !important;
}

.wes-live-expand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.wes-live-expand:hover {
  color: var(--color-success);
  border-color: var(--color-success);
}

.wes-live-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.wes-live-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.wes-live-tag {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  color: var(--color-success);
  margin-bottom: 10px;
}

.wes-live-body {
  position: relative;
  /* Grows with the column instead of a hard 480px, so the scaled-down email
     keeps roughly the same proportions on any sidebar width. */
  height: clamp(360px, 60vh, 620px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.wes-live-iframe {
  /* Absolute so the un-scaled 600px layout box can't widen the column —
     transform-origin keeps the scaled frame flush with the top-left corner. */
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  transform-origin: top left;
  background: var(--color-surface);
  opacity: 0;
  transition: opacity 0.2s;
}

.wes-live-iframe.ready {
  opacity: 1;
}

.wes-live-center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  backdrop-filter: blur(1px);
}

.wes-live-error {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
}

.wes-live-error-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.wes-live-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 12px 0 0;
  line-height: 1.5;
}

.wes-live-note code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  color: var(--color-success);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
}

/* ── ReactQuill (scoped, colours from globals) ── */

.wes-root .ql-toolbar.ql-snow,
.wes-root .ql-container.ql-snow {
  border-color: var(--color-border);
}

.wes-root .ql-toolbar.ql-snow {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-surface-2);
}

.wes-root .ql-container.ql-snow {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--input-bg);
}

.wes-root .ql-editor {
  min-height: 120px;
  color: var(--color-text);
}

.wes-root .ql-editor.ql-blank::before {
  color: var(--input-placeholder);
  font-style: normal;
}

.wes-root .ql-snow .ql-stroke {
  stroke: var(--color-text-secondary);
}

.wes-root .ql-snow .ql-fill {
  fill: var(--color-text-secondary);
}

.wes-root .ql-snow .ql-picker {
  color: var(--color-text-secondary);
}

.wes-root .ql-snow.ql-toolbar button:hover .ql-stroke,
.wes-root .ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--color-success);
}

.wes-root .ql-snow.ql-toolbar button:hover .ql-fill,
.wes-root .ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: var(--color-success);
}

/* ── full-size modal preview ── */

.wes-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.wes-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 680px;
  height: 88vh;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.wes-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.wes-modal-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.wes-modal-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--modal-close-bg);
  color: var(--color-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wes-modal-close:hover {
  background: var(--modal-close-bg-hover);
}

.wes-modal-subject {
  padding: 10px 18px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  font-size: var(--font-size-md);
  color: var(--color-text);
  background: var(--color-surface-2);
}

.wes-modal-subject span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-right: 6px;
}

.wes-modal-body {
  flex: 1;
  position: relative;
  background: var(--color-surface);
  overflow: hidden;
}

.wes-modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.wes-modal-iframe.ready {
  opacity: 1;
}

/* AI assistant UI lives in _WebinarAiAssistant.scss (shared `wai-*` classes). */

/* ============================================================
   WebinarThankYou.css
   Premium redesign — all styles for WebinarThankYou component.
   Class prefix: .wty-
============================================================ */

body:has(.wty-page) #ai-credit-badge {
  display: none !important;
}

.wty-page,
.wty-page *,
.wty-page *::before,
.wty-page *::after {
  box-sizing: border-box;
}

/* ---------- Page wrapper ---------- */

.wty-page {
  min-height: 100vh;
  background: var(--color-bg);
  padding: 40px 24px 56px;
  color: var(--color-text);
}

.wty-container {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Brand bar — first band inside the panel ---------- */

.wty-brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: 12px;
}

.wty-brandbar-logo {
  height: 36px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/* A webinar's own logo gets the same brand tile as the registration page:
   rounded icon box with the image cropped inside, not a bare square photo. */

.wty-brand-logo {
  width: 42px;
  height: 42px;
  overflow: hidden;
}

.wty-brand-logo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.wty-help-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.wty-help-link svg {
  width: 18px;
}

.wty-help-link:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

/* ---------- Single panel ----------
   The whole page is one surface: sections are bands separated by a hairline,
   never nested cards. Brand bar and footer stay outside it. */

.wty-shell {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
}

.wty-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 28px 32px;
}

.wty-shell > .wty-card + .wty-card,
.wty-shell > .wty-card + .wty-cta-banner {
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   1. HERO CARD
============================================================ */

.wty-hero {
  text-align: center;
  padding: 48px 40px 44px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(22, 183, 249, 0.05) 0%, transparent 70%), var(--color-surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wty-hero-logo {
  height: 56px;
  width: auto;
  margin: 0 auto 24px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

.wty-hero-checkmark {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-success-bg) 0%, var(--color-success-bg) 100%);
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
}

.wty-hero-checkmark::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--color-success-border);
  opacity: 0.6;
}

.wty-hero-checkmark svg {
  width: 32px;
  height: 32px;
}

.wty-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-lg);
  color: var(--color-success);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.wty-hero-badge svg {
  width: 12px;
  height: 12px;
}

.wty-hero-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 12px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.wty-hero-webinar {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin: 0 0 14px;
  line-height: 1.4;
}

.wty-hero-desc {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin: 0 auto;
  max-width: 560px;
  line-height: 1.65;
}

.wty-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.wty-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.wty-meta-badge--type {
  background: var(--color-info-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.wty-meta-badge--language {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.wty-meta-badge--date {
  background: var(--color-warning-bg);
  border-color: var(--color-primary);
  color: var(--color-warning);
}

.wty-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* ---------- Hero "still live / rejoin" variant ---------- */

.wty-hero-live {
  padding: 56px 40px;
  text-align: center;
}

.wty-hero-live .wty-btn {
  margin-top: 24px;
}

.wty-hero-badge.is-live {
  background: var(--color-danger-bg, rgba(220, 38, 38, 0.12));
  border-color: var(--color-danger-border, rgba(220, 38, 38, 0.35));
  color: var(--color-danger, #ef4444);
}

.wty-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: wty-live-pulse 1.6s ease-in-out infinite;
}

@keyframes wty-live-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

/* ---------- Hero "no webinar" fallback variant ---------- */

.wty-hero-fallback {
  padding: 56px 40px;
  text-align: center;
}

.wty-hero-fallback .wty-btn {
  margin-top: 24px;
}

/* ============================================================
   2. SECTION HEADERS
============================================================ */

.wty-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wty-section-head-text {
  min-width: 0;
  flex: 1;
}

.wty-section-eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 6px;
}

.wty-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.wty-section-subtitle {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* One neutral icon treatment for every section — the module's shared icon box
   (%icon-style-box), not a per-section tint. */

.wty-section-icon {
  width: 40px;
  height: 40px;
}

.wty-section-icon svg {
  width: 20px;
  height: 20px;
}

/* ============================================================
   3. ENGAGEMENT STATS GRID
============================================================ */

.wty-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* Stats are columns within the section card, separated by a rule — not cards. */

.wty-stat-card {
  padding: 4px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid var(--color-border);
}

.wty-stat-card:first-child {
  border-left: 0;
  padding-left: 0;
}

.wty-stat-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
}

.wty-stat-icon svg {
  width: 18px;
  height: 18px;
}

.wty-stat-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.wty-stat-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-top: 6px;
}

.wty-stat-sublabel {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ============================================================
   4. DESCRIPTION CARD
============================================================ */

/* Description is editor-pasted HTML: force wrapping so nowrap/pre or long
   unbroken strings can't push past the panel (which clips via overflow:hidden). */

.wty-description-text {
  font-size: var(--font-size-md);
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

.wty-description-text * {
  max-width: 100%;
  white-space: normal !important;
}

.wty-description-text pre,
.wty-description-text table {
  display: block;
  overflow-x: auto;
  white-space: pre !important;
}

.wty-description-text img,
.wty-description-text iframe,
.wty-description-text video {
  height: auto;
}

.wty-description-text p {
  margin: 0 0 14px;
}

.wty-description-text p:last-child {
  margin-bottom: 0;
}

.wty-description-text strong {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.wty-description-text a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.wty-description-text a:hover {
  text-decoration: underline;
}

.wty-description-text ul,
.wty-description-text ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.wty-description-text li {
  margin-bottom: 6px;
}

/* ============================================================
   5. KEY WINS GRID
============================================================ */

.wty-wins-grid {
  display: flex;
  flex-direction: column;
}

/* Takeaways read as a list inside the section card — no card-within-a-card. */

.wty-win-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.wty-win-card:last-child {
  border-bottom: 0;
}

.wty-win-number {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-surface);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
}

.wty-win-text {
  font-size: var(--font-size-md);
  line-height: 1.55;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  margin: 0;
  flex: 1;
}

/* ============================================================
   6. CTA BANNER (bottom)
============================================================ */

/* Last band of the panel — no radius or border of its own. */

.wty-cta-banner {
  padding: 32px;
  color: var(--color-text);
  position: relative;
  overflow: hidden;
  background: var(--color-surface-2);
}

.wty-cta-banner::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.wty-cta-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.wty-cta-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.wty-cta-subtitle {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.55;
  max-width: 480px;
}

.wty-cta-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ============================================================
   7. BUTTONS
============================================================ */

.wty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, color 0.15s ease;
  white-space: nowrap;
}

.wty-btn--primary {
  background: linear-gradient(95deg, var(--color-success) 3.96%, var(--color-success) 100%);
  color: var(--color-surface);
  border-color: transparent;
}

.wty-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(8, 210, 89, 0.28);
}

.wty-btn--dark {
  background: var(--color-text);
  color: var(--color-surface);
}

.wty-btn--dark:hover {
  background: var(--color-surface-2);
  transform: translateY(-1px);
}

.wty-btn--white {
  background: var(--color-surface);
  color: var(--color-text);
}

.wty-btn--white:hover {
  background: var(--color-surface-2);
  transform: translateY(-1px);
}

.wty-btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--color-text) !important;
  border: var(--btn-secondary-border);
}

.wty-btn--secondary:hover {
  background: var(--btn-secondary-bg-hover);
  box-shadow: var(--btn-secondary-shadow-hover);
  color: var(--color-text) !important;
  transform: translateY(-1px);
}

.wty-btn--ghost {
  background: transparent;
  color: var(--color-surface);
  border-color: rgba(255, 255, 255, 0.28);
}

.wty-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
}

.wty-btn--outline {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.wty-btn--outline:hover {
  background: var(--color-surface-2);
  border-color: var(--color-dim);
  color: var(--color-text);
}

.wty-btn svg {
  width: 14px;
  height: 14px;
}

/* ============================================================
   8. FOOTER
============================================================ */

.wty-footer {
  margin-top: 16px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

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

@media (max-width: 768px) {
  .wty-page {
    padding: 24px 16px 40px;
  }

  .wty-card {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .wty-hero {
    padding: 36px 24px 32px;
  }

  .wty-hero-title {
    font-size: 28px;
  }

  .wty-hero-webinar {
    font-size: var(--font-size-md);
  }

  .wty-hero-desc {
    font-size: var(--font-size-md);
  }

  .wty-section-title {
    font-size: var(--font-size-lg);
  }

  .wty-cta-banner {
    padding: 28px 24px;
    border-radius: 16px;
  }

  .wty-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .wty-cta-title {
    font-size: var(--font-size-lg);
  }

  .wty-cta-actions {
    width: 100%;
  }

  .wty-cta-actions .wty-btn {
    flex: 1;
    justify-content: center;
  }

  .wty-stat-value {
    font-size: 26px;
  }

  .wty-brandbar {
    padding: 0 4px;
  }
}

@media (max-width: 480px) {
  .wty-hero-title {
    font-size: 24px;
  }

  .wty-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .wty-wins-grid {
    grid-template-columns: 1fr;
  }
}

.wod-page {
  min-height: calc(100vh - 0px);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  color: var(--color-text);
}

/* attendee → host message widget textarea (colors from _FormControls via .wod-page textarea) */

.wam-textarea {
  flex: 1;
  resize: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  box-sizing: border-box;
}

.wod-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 10;
}

.wod-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.wod-logo-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--font-size-md);
  color: var(--color-surface);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--color-success-bg);
  color: var(--color-text-baselight) !important;
  border-radius: var(--radius-md);
  background: var(--icon-bg-color);
}

.wod-webinar-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.wod-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.wod-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.wod-meta-item svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
}

.wod-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius-lg);
  padding: 5px 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wod-live-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-error);
}

.wod-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: var(--color-bg);
}

.wod-player-wrap {
  width: 100%;
  max-width: 1100px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.wod-canvas-container {
  position: relative;
  width: 100%;
  background: var(--color-bg);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-bottom: none;
  aspect-ratio: 16/9;
}

.wod-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.wod-hidden-video {
  display: none;
}

/* ---------- Click-to-play overlay ---------- */

.wod-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  cursor: pointer;
  z-index: 5;
}

.wod-big-play-btn {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success) 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-surface);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 8px 24px rgba(8, 210, 89, 0.35);
}

.wod-big-play-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 32px rgba(8, 210, 89, 0.45);
}

.wod-big-play-btn svg {
  width: 32px;
  height: 32px;
  margin-left: 4px;
}

.wod-overlay-text {
  font-size: var(--font-size-md);
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

.wod-control-bar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 12px 18px 14px;
}

.wod-progress-row {
  margin-bottom: 12px;
  position: relative;
}

.wod-progress-track {
  height: 6px;
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: height 0.15s ease;
}

.wod-progress-track:hover {
  height: 8px;
}

.wod-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-success) 0%, var(--color-success) 100%);
  border-radius: var(--radius-lg);
  transition: width 0.4s linear;
  pointer-events: none;
}

.wod-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wod-icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}

.wod-icon-btn:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

.wod-icon-btn svg {
  width: 17px;
  height: 17px;
}

.wod-vol-slider {
  width: 80px;
  accent-color: var(--color-success);
  cursor: pointer;
  height: 4px;
}

.wod-time-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
  padding-left: 4px;
}

.wod-spacer {
  flex: 1;
}

.wod-speed-select {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  min-width: 52px;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.wod-speed-select:hover {
  background: var(--color-surface);
  border-color: var(--color-dim);
}

.wod-speed-select option {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ============================================================
   6. STATUS SCREENS (waiting, error, no video)
============================================================ */

.wod-status-screen {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 56px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.wod-status-icon {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wod-status-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.18;
  pointer-events: none;
}

.wod-status-icon svg {
  width: 40px;
  height: 40px;
}

.wod-status-icon--warning {
  background: linear-gradient(135deg, var(--color-warning-bg) 0%, var(--color-primary) 100%);
  color: var(--color-warning);
}

.wod-status-icon--danger {
  background: linear-gradient(135deg, var(--color-error-border) 0%, var(--color-error-bg) 100%);
  color: var(--color-error);
}

.wod-status-icon--success {
  background: linear-gradient(135deg, var(--color-success-bg) 0%, var(--color-success-bg) 100%);
  color: var(--color-success);
}

.wod-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.wod-status-pill--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-primary);
  color: var(--color-warning);
}

.wod-status-pill--danger {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error);
}

.wod-status-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.wod-status-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.wod-status-sub {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
  max-width: 380px;
}

.wod-status-sub--small {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

/* ---------- Countdown specific ---------- */

.wod-countdown-wrap {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px 24px;
  width: 100%;
  margin: 4px 0;
}

.wod-countdown {
  font-size: 48px;
  font-weight: 800;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.wod-countdown-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--font-weight-medium);
  margin-top: 10px;
}

/* ---------- Action buttons ---------- */

.wod-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 10px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.wod-btn--primary {
  background: linear-gradient(95deg, var(--color-success) 3.96%, var(--color-success) 100%);
  color: var(--color-surface);
}

.wod-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(8, 210, 89, 0.28);
}

.wod-btn--outline {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.wod-btn--outline:hover {
  background: var(--color-surface-2);
  border-color: var(--color-dim);
  color: var(--color-text);
}

/* ============================================================
   7. ENDED MODAL
============================================================ */

.wod-ended-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 24px;
}

.wod-ended-modal {
  background: var(--color-surface);
  padding: 40px 36px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  text-align: center;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ============================================================
   8. RESPONSIVE
============================================================ */

@media (max-width: 768px) {
  .wod-header {
    padding: 0 16px;
    height: 56px;
  }

  .wod-header-right {
    gap: 10px;
  }

  .wod-meta-item {
    display: none;
  }

  .wod-webinar-name {
    font-size: var(--font-size-md);
  }

  .wod-body {
    padding: 16px 12px;
  }

  .wod-player-wrap {
    max-width: 100%;
  }

  .wod-canvas-container {
    border-radius: 12px 12px 0 0;
  }

  .wod-control-bar {
    border-radius: 0 0 12px 12px;
    padding: 10px 14px 12px;
  }

  .wod-vol-slider {
    width: 60px;
  }

  .wod-status-screen {
    padding: 40px 24px;
    border-radius: 16px;
  }

  .wod-status-title {
    font-size: 22px;
  }

  .wod-status-sub {
    font-size: var(--font-size-md);
  }

  .wod-countdown {
    font-size: 36px;
  }

  .wod-big-play-btn {
    width: 64px;
    height: 64px;
  }

  .wod-big-play-btn svg {
    width: 26px;
    height: 26px;
  }

  .wod-ended-modal {
    padding: 32px 24px;
  }
}

@media (max-width: 480px) {
  .wod-control-bar .wod-time-text {
    font-size: var(--font-size-xs);
  }

  .wod-speed-select {
    min-width: 44px;
    padding: 4px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wod-live-indicator,
  .wod-status-pill-dot {
    animation: none !important;
  }

  .wod-big-play-btn,
  .wod-btn,
  .wod-progress-track {
    transition: none !important;
    transform: none !important;
  }
}

/* Rating stars — shared icon glyph, state carried by the class not inline SVG. */

.wty-star {
  width: 30px;
  height: 30px;
  color: var(--color-dim);
  transition: color 0.15s ease;
}

.wty-star.is-filled {
  color: var(--color-warning);
}

/* ---------- Rating controls ---------- */

.wty-rating-email {
  width: 100%;
  max-width: 320px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--font-size-base);
  background: var(--color-surface);
  color: var(--color-text);
}

.wty-rating-stars {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wty-star-btn {
  background: none;
  border: 0;
  padding: 4px;
  line-height: 0;
  cursor: pointer;
}

.wty-star-btn:disabled {
  cursor: default;
}

.wty-rating-note {
  margin-left: 8px;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.wty-rating-error {
  margin: 8px 0 0;
  font-size: var(--font-size-base);
  color: var(--color-error);
}

/* =========================================================================
   Webinar Promo / "Share your webinar" studio.
   Dark theme — true-dark surfaces, white text, teal primary, gold generate.
   All styles namespaced with .wt- ; no inline CSS in the component.
   ========================================================================= */

/* PoppinsThumb — used for the live canvas text overlay */

@font-face {
  font-family: "PoppinsThumb";
  src: url("/fonts/Poppins-SemiBold.woff2") format("woff2"), url("/fonts/Poppins-SemiBold.woff") format("woff");
  font-weight: var(--font-weight-medium);
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PoppinsThumb";
  src: url("/fonts/Poppins-Bold.woff2") format("woff2"), url("/fonts/Poppins-Bold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

.wt-page {
  /* Map module tokens to global theme variables (light-theme.css :root) */
  --wt-bg: var(--color-bg);
  --wt-surface: var(--color-surface);
  --wt-surface-2: var(--color-surface-2);
  --wt-border: var(--color-border);
  --wt-border-hover: var(--color-dim);
  --wt-text: var(--color-text);
  --wt-muted: var(--color-text-muted);
  --wt-teal: var(--color-success);
  --wt-teal-2: var(--color-success);
  --wt-gold: var(--color-primary);
  --wt-gold-2: var(--color-primary-light);
  --wt-btn-hover: var(--color-surface-2);
  --wt-text-dark: var(--color-text);
  --wt-canvas-bg: var(--color-border);
  --wt-chip-hover: var(--color-dim);
  --wt-slider-color: #0ea5e9;
  --wt-slider-thumb-border: var(--whiteText);
  min-height: 100vh;
  color: var(--wt-text);
  padding: 28px 32px 60px;
  box-sizing: border-box;
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  border-radius: 20px !important;
  /* Border/shadow: see the shared flat-card rule in _WebinarBase.scss. */
}

body[data-theme=dark] .wt-page {
  /* Dark overrides — global vars already hold dark values,
     but we override a few module-specific tokens here */
  --wt-text-dark: var(--color-surface);
  --wt-canvas-bg: var(--color-bg);
  --wt-slider-color: var(--wt-gold);
}

.wt-page * {
  box-sizing: border-box;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.wt-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0 auto 22px;
}

.wt-header-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.wt-back {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--wt-teal);
  color: var(--color-surface) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.wt-back:hover {
  transform: translateX(-2px);
}

.wt-title {
  font-size: var(--font-size-30) !important;
  font-weight: var(--font-weight-medium) !important;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.wt-subtitle {
  font-size: 13.5px;
  color: var(--wt-muted);
  margin: 0;
  line-height: 1.6;
  max-width: 640px;
}

.wt-done {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
}

/* ── Webinar summary strip ─────────────────────────────────────────────── */

.wt-summary {
  width: 100%;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--wt-surface);
  border: 1px solid var(--wt-border);
  border-radius: 12px;
}

.wt-summary-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(46, 230, 182, 0.14);
  color: var(--wt-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wt-summary-body {
  flex: 1;
  min-width: 0;
}

.wt-summary-name {
  font-size: 15.5px;
  font-weight: var(--font-weight-medium);
  margin: 0 0 4px;
}

.wt-summary-meta {
  font-size: 12.5px;
  color: var(--wt-muted);
  margin: 0;
}

.wt-badge {
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(46, 230, 182, 0.14);
  color: var(--wt-teal);
  flex-shrink: 0;
}

/* ── Platform Row ─────────────────────────────────────────────────────── */

.wt-thumb-platforms-scroll {
  width: 100%;
  margin: 0 auto 24px;
  overflow-x: auto;
}

.wt-thumb-platforms {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  overflow: visible;
  min-width: -moz-max-content;
  min-width: max-content;
}

.wt-thumb-platforms-label {
  font-size: var(--font-size-base);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wt-muted);
  margin-right: 8px;
  flex-shrink: 0;
}

/* Shape only — colours come from the common tab rule in _shared-components.scss */

.wt-thumb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.wt-thumb-chip.active .wt-thumb-chip-res,
.wt-thumb-chip.active .wt-thumb-chip-saved {
  color: rgba(255, 255, 255, 0.9);
}

.wt-thumb-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.wt-thumb-chip-icon svg {
  width: 16px;
  height: 16px;
}

.wt-thumb-chip-icon svg[fill=none] {
  stroke: currentColor !important;
}

.wt-thumb-chip-icon svg:not([fill=none]) {
  fill: currentColor !important;
}

.wt-thumb-chip-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.wt-thumb-chip-res {
  font-size: var(--font-size-xs);
  color: var(--wt-muted);
}

.wt-thumb-chip-saved {
  color: var(--wt-teal);
  font-weight: var(--font-weight-medium);
  margin-left: 4px;
}

.wt-thumb-chip-dot {
  width: 6px;
  height: 6px;
  background: var(--wt-gold);
  border-radius: 50%;
}

/* ── Chip wrap + popover ─────────────────────────────────────────────── */

.wt-chip-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
}

.wt-chip-wrap {
  position: relative;
  flex-shrink: 0;
}

.wt-chip-popover {
  z-index: 1000;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.wt-chip-popover-title {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.wt-chip-popover-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.wt-chip-popover-acct {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--color-surface-2);
}

.wt-chip-popover-acct.broken {
  background: var(--color-error-bg);
}

.wt-chip-popover-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.wt-chip-popover-avatar-ph {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wt-chip-popover-name {
  flex: 1;
  font-size: 13px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wt-chip-popover-ok {
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
  font-size: 13px;
  flex-shrink: 0;
}

.wt-chip-popover-reconnect {
  font-size: 11px;
  color: var(--color-error);
  text-decoration: none;
  flex-shrink: 0;
}

.wt-chip-popover-reconnect:hover {
  text-decoration: underline;
}

.wt-chip-popover-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.wt-chip-popover-connect {
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: none;
}

.wt-chip-popover-connect:hover {
  text-decoration: underline;
}

.wt-chip-popover-manage {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
  margin-top: 4px;
}

.wt-chip-popover-manage:hover {
  color: var(--color-text);
}

/* ── 2-Column Studio ─────────────────────────────────────────────────── */

.wt-thumb-studio {
  /* Bootstrap .row handles flex and wrapping */
  width: 100%;
  margin: 0 auto;
  align-items: flex-start;
}

.wt-thumb-col.left-col {
  position: sticky;
  top: 0px;
}

.wt-thumb-col.right-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.wt-thumb-preview-panel,
.wt-thumb-card {
  background: var(--wt-surface);
  border: 1px solid var(--wt-border);
  border-radius: 14px;
  padding: 20px;
}

.wt-thumb-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.wt-thumb-preview-hint {
  margin: 0 0 12px;
  font-size: var(--font-size-sm);
  color: var(--wt-muted);
}

/* Preview footer actions — plain links, split left / right */

.wt-preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.wt-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--wt-gold, var(--color-primary));
}

.wt-preview-link svg {
  flex-shrink: 0;
}

.wt-preview-link:hover:not(:disabled) {
  text-decoration: underline;
}

.wt-preview-link:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wt-thumb-preview-head-title {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
}

.wt-thumb-preview-meta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--wt-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wt-thumb-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* ── Center: promo image ───────────────────────────────────────────────── */

.wt-canvas-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--wt-muted);
}

.wt-canvas {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: var(--color-bg);
  border: 1.5px solid var(--wt-border);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1/1;
  container-type: inline-size;
}

.wt-canvas img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.wt-canvas-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wt-muted);
  font-size: var(--font-size-base);
}

.wt-canvas-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wt-canvas-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 4.5cqw 3cqw;
  pointer-events: none;
}

.wt-canvas-brand {
  font-family: "PoppinsThumb", sans-serif;
  font-size: max(4px, 1.84cqw);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.92;
  margin-bottom: 1.012cqw;
}

/* Brand size mirrors title size scale (brandCqw = titleScale * 40, gapCqw = titleScale * 22) */

.wt-canvas-brand.sz-sm {
  font-size: max(4px, 0.88cqw);
  margin-bottom: 0.484cqw;
}

.wt-canvas-brand.sz-md {
  font-size: max(4px, 1.28cqw);
  margin-bottom: 0.704cqw;
}

.wt-canvas-brand.sz-lg {
  font-size: max(4px, 1.84cqw);
  margin-bottom: 1.012cqw;
}

.wt-canvas-title {
  font-family: "PoppinsThumb", sans-serif;
  font-size: max(9px, 4.6cqw);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Per-platform aspect ratios — max-width caps height via aspect-ratio */

.wt-canvas.ratio-1x1 {
  aspect-ratio: 1/1;
  max-width: 360px;
}

.wt-canvas.ratio-16x9 {
  aspect-ratio: 16/9;
}

.wt-canvas.ratio-191x100 {
  aspect-ratio: 191/100;
}

.wt-canvas.ratio-9x16 {
  aspect-ratio: 9/16;
  max-width: 315px;
}

.wt-canvas.ratio-2x3 {
  aspect-ratio: 2/3;
  max-width: 240px;
}

/* Per-ratio vertical padding: padY = 4.5 / aspectRatio (normalises to canvas height) */

.wt-canvas-text.ratio-1x1 {
  padding: 4.5cqw 3cqw;
}

.wt-canvas-text.ratio-16x9 {
  padding: 2.53cqw 3cqw;
}

.wt-canvas-text.ratio-191x100 {
  padding: 2.36cqw 3cqw;
}

.wt-canvas-text.ratio-9x16 {
  padding: 8cqw 3cqw;
}

.wt-canvas-text.ratio-2x3 {
  padding: 6.75cqw 3cqw;
}

/* Overlay tint per display style */

.wt-canvas-overlay.d-dark {
  background: rgba(0, 0, 0, 0.45);
}

.wt-canvas-overlay.d-light {
  background: rgba(255, 255, 255, 0.45);
}

.wt-canvas-overlay.d-blue {
  background: rgba(29, 140, 248, 0.45);
}

.wt-canvas-overlay.d-none {
  background: none;
}

/* Text color / shadow per display style */

.wt-canvas-text.tc-dark,
.wt-canvas-text.tc-blue {
  color: var(--color-surface);
}

.wt-canvas-text.tc-light {
  color: var(--color-text);
}

.wt-canvas-text.tc-none {
  color: var(--color-surface);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Alignment + vertical position */

.wt-canvas-text.al-left {
  text-align: left;
}

.wt-canvas-text.al-center {
  text-align: center;
}

.wt-canvas-text.al-right {
  text-align: right;
}

.wt-canvas-text.va-top {
  justify-content: flex-start;
}

.wt-canvas-text.va-middle {
  justify-content: center;
}

.wt-canvas-text.va-bottom {
  justify-content: flex-end;
}

/* Title size (fraction of canvas width, matches composer $titleScale) */

.wt-canvas-title.sz-sm {
  font-size: max(8px, 2.2cqw);
}

.wt-canvas-title.sz-md {
  font-size: max(9px, 3.2cqw);
}

.wt-canvas-title.sz-lg {
  font-size: max(9px, 4.6cqw);
}

.wt-canvas-title.b {
  font-weight: 800;
}

.wt-canvas-title:not(.b) {
  font-weight: var(--font-weight-medium);
}

.wt-canvas-title.i {
  font-style: italic;
}

/* Actions row under canvas */

.wt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

/* Secondary buttons — Download / Social Publish / Done share one rule */

.wt-btn,
.wt-done {
  border: var(--btn-secondary-border);
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
}

.wt-btn:hover,
.wt-done:hover {
  box-shadow: var(--btn-secondary-dark-box-shadow);
}

.wt-btn {
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: filter 0.15s ease, background 0.15s ease;
}

.wt-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wt-btn-gold {
  flex: 1;
  border: none;
  background: linear-gradient(90deg, var(--wt-gold-2) 0%, var(--wt-gold) 100%);
  color: var(--color-text);
}

.wt-btn-gold:hover {
  filter: brightness(1.05);
  background: linear-gradient(90deg, var(--wt-gold-2) 0%, var(--wt-gold) 100%);
}

.wt-btn-icon {
  width: 46px;
  padding: 11px 0;
  flex-shrink: 0;
}

.wt-btn-teal {
  border: none;
  background: linear-gradient(90deg, var(--wt-teal) 0%, var(--wt-teal-2) 100%);
  color: var(--color-text);
}

.wt-btn-teal:hover {
  /* filter: brightness(1.05); */
  /* background: linear-gradient(90deg, var(--wt-teal) 0%, var(--wt-teal-2) 100%); */
}

.wt-btn-block {
  width: 100%;
}

/* ── Caption editor ────────────────────────────────────────────────────── */

.wt-caption-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 20px 0 8px;
}

.wt-caption-label {
  font-size: var(--font-size-base);
  font-weight: 800;
}

.wt-caption-hint {
  font-size: var(--font-size-sm);
  color: var(--wt-muted);
}

.wt-caption-box {
  border: 1px solid var(--wt-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--wt-surface-2);
}

.wt-caption-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--wt-border);
}

.wt-tool {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--wt-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md);
}

.wt-tool:hover {
  background: var(--wt-surface-2);
  color: var(--wt-text);
}

.wt-caption-area {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border: none;
  outline: none;
  background: transparent;
  color: var(--wt-text);
  font-size: var(--font-size-md);
  line-height: 1.6;
  padding: 14px 16px;
  font-family: inherit;
}

.wt-caption-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.wt-char-count {
  font-size: var(--font-size-sm);
  color: var(--wt-muted);
}

.wt-char-count.near {
  color: var(--wt-gold);
}

.wt-char-count.over {
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}

/* ── Right: share link + post to ───────────────────────────────────────── */

.wt-share-row {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}

.wt-share-input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border-radius: var(--input-radius);
  border: 1px solid var(--wt-border);
  background: var(--wt-surface-2);
  color: var(--wt-text);
  font-size: 12.5px;
}

.wt-share-input:focus {
  outline: none;
  border-color: var(--wt-border);
  box-shadow: none;
}

.wt-post-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.wt-post {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--wt-border);
  background: var(--wt-surface-2);
  color: var(--wt-text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.wt-post:hover {
  background: var(--wt-surface-2);
}

.wt-post svg {
  flex-shrink: 0;
}

/* Schedule block */

.wt-schedule {
  border: 1px solid var(--wt-border);
  border-radius: 10px;
  padding: 14px;
  background: var(--wt-surface-2);
  margin-bottom: 16px;
}

.wt-schedule-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  margin-bottom: 12px;
  color: var(--wt-gold);
}

.wt-schedule-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--wt-border);
  background: var(--wt-bg);
  color: var(--wt-text);
  font-size: var(--font-size-base);
  color-scheme: dark;
}

/* ── Multi-select account dropdown ─────────────────────────────────────── */

.wt-msd {
  position: relative;
  margin-bottom: 14px;
}

.wt-msd-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--input-padding);
  border-radius: var(--input-radius);
  border: 1px solid var(--color-border);
  background-color: var(--input-bg);
  color: var(--color-text);
  font-size: var(--font-size-md, 14px);
  font-weight: var(--font-weight-semibold, 600);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.25s ease, color 0.25s ease;
}

.wt-msd-toggle:hover,
.wt-msd-toggle:focus {
  border-color: var(--input-hover-border-blue);
  background-color: var(--input-bg);
  outline: none;
}

.wt-msd-toggle:hover svg,
.wt-msd-toggle:focus svg {
  color: var(--input-hover-border-blue);
}

.wt-msd-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

.wt-msd-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.wt-msd-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  flex: 1;
  color: var(--color-text);
}

.wt-msd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--wt-surface-2);
  border: 1px solid var(--wt-border);
  border-radius: 10px;
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.wt-msd-empty {
  padding: 10px;
  font-size: 12.5px;
  color: var(--wt-muted);
  text-align: center;
}

.wt-msd-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border: none;
  background: transparent;
  color: var(--wt-text);
  font-size: var(--font-size-base);
  cursor: pointer;
  border-radius: 7px;
  text-align: left;
}

.wt-msd-opt:hover {
  background: var(--wt-surface-2);
}

.wt-msd-opt.on {
  color: var(--wt-teal);
}

.wt-msd-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1.5px solid var(--wt-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

.wt-msd-check.on {
  background: var(--wt-teal);
  border-color: var(--wt-teal);
}

.wt-msd-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.wt-msd-img-ph {
  background: var(--wt-surface-2);
}

.wt-msd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.wt-msd-opt-broken {
  opacity: 0.75;
  cursor: not-allowed !important;
}

.wt-msd-opt-broken:hover {
  background: none !important;
}

.wt-msd-broken-tag {
  font-size: var(--font-size-xs);
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-sm, 4px);
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Publish status + notes */

.wt-status-chip {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 8px;
}

.wt-status-chip.scheduled {
  background: rgba(217, 164, 65, 0.16);
  color: var(--wt-gold);
}

.wt-status-chip.published {
  background: var(--color-success-bg);
  color: var(--wt-teal);
}

.wt-status-chip.failed {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.wt-status-chip.skipped {
  background: var(--wt-surface-2);
  color: var(--wt-muted);
}

.wt-publish-error {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

.wt-publish-note {
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

/* Token warning */

.wt-token-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.wt-token-warning--revoked {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error);
}

.wt-token-warning-link {
  color: inherit;
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  white-space: nowrap;
  margin-left: auto;
}

/* ── Publish form (right column) ── */

/* Per-platform image preview above the caption */

.wt-pf-image-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.wt-pf-image-preview {
  max-width: 260px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  -o-object-fit: cover;
     object-fit: cover;
}

.wt-pf-image-empty {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--wt-muted);
}

/* Caption block */

.wt-pf-caption-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wt-pf-caption-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wt-pf-caption-header .wt-field-label {
  margin-bottom: 0;
}

.wt-pf-char-count {
  font-size: var(--font-size-xs);
  color: var(--wt-muted);
  font-variant-numeric: tabular-nums;
}

.wt-pf-char-count.near {
  color: var(--wt-gold);
  font-weight: var(--font-weight-medium);
}

.wt-pf-char-count.over {
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}

.wt-pf-caption-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* AI assistant UI lives in _WebinarAiAssistant.scss (shared `wai-*` classes). */

.wt-pf-caption-ta {
  width: 100%;
  resize: vertical;
  min-height: 110px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--wt-border);
  background: var(--wt-surface-2);
  color: var(--wt-text);
  font-size: var(--font-size-md);
  font-family: inherit;
  line-height: 1.65;
  outline: none;
  transition: border-color 0.15s;
}

.wt-pf-caption-ta::-moz-placeholder {
  color: var(--wt-muted);
}

.wt-pf-caption-ta::placeholder {
  color: var(--wt-muted);
}

.wt-pf-caption-ta:focus {
  border-color: var(--color-primary);
  background: var(--wt-surface);
}

.wt-pf-caption-ta.over {
  border-color: var(--color-error);
}

/* Account + Schedule row */

.wt-pf-meta-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

@media (max-width: 860px) {
  .wt-pf-meta-row {
    flex-direction: column;
  }
}

.wt-pf-meta-col {
  flex: 1;
  min-width: 0;
}

.wt-pf-meta-col .wt-field-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

.wt-pf-meta-col .wt-field-label svg {
  opacity: 0.7;
}

.wt-pf-schedule-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--wt-border);
  background: var(--wt-surface-2);
  color: var(--wt-text);
  font-size: var(--font-size-md);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  cursor: pointer;
}

.wt-pf-schedule-input:focus {
  border-color: var(--color-primary);
  background: var(--wt-surface);
}

/* Action buttons */

.wt-pf-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Shape only — colours come from the common .cw-btn-secondary class */

.wt-pf-btn-sec {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  cursor: pointer;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  transition: background 0.15s, border-color 0.15s;
}

.wt-pf-btn-sec:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wt-pf-btn-sec svg {
  flex-shrink: 0;
}

.wt-pf-btn-pri {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  cursor: pointer;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 20px;
  background: var(--btn-primary-bg);
  border: var(--btn-secondary-border);
  color: var(--btn-primary-color);
  transition: all 0.3s ease;
}

.wt-pf-btn-pri:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
  box-shadow: var(--btn-primary-accent-shadow-hover);
  transform: translateY(-2px);
}

.wt-pf-btn-pri:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wt-pf-btn-pri svg {
  flex-shrink: 0;
}

.wt-pf-cancel-link {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  color: var(--color-error);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: left;
}

.wt-pf-cancel-link:hover:not(:disabled) {
  text-decoration: underline;
}

.wt-pf-cancel-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Publish history */

.wt-pf-history {
  border-top: 1px solid var(--wt-border);
  padding-top: 16px;
}

.wt-pf-history-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--wt-muted);
  font-weight: var(--font-weight-medium);
  margin-bottom: 10px;
}

.wt-pf-history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wt-pf-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
}

.wt-pf-history-item.success {
  background: var(--color-success-bg);
}

.wt-pf-history-item.failed {
  background: var(--color-error-bg);
}

.wt-pf-history-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.success .wt-pf-history-dot {
  background: var(--color-success);
}

.failed .wt-pf-history-dot {
  background: var(--color-error);
}

.wt-pf-history-chip {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  min-width: 58px;
  flex-shrink: 0;
}

.success .wt-pf-history-chip {
  color: var(--color-success);
}

.failed .wt-pf-history-chip {
  color: var(--color-error);
}

.wt-pf-history-time {
  font-size: var(--font-size-xs);
  color: var(--wt-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.wt-pf-history-err {
  font-size: var(--font-size-xs);
  color: var(--color-error);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  border-left: 1px solid var(--color-error-border);
  padding-left: 10px;
  margin-left: 4px;
}

/* ── Full-width Publish Bar ─────────────────────────────────────────────── */

.wt-social-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 16px;
}

.wt-social-modal {
  position: relative;
  width: 100%;
  max-width: 1280px;
}

.wt-social-close {
  position: absolute;
  top: -10px;
  right: -6px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.wt-social-modal .wt-publish-bar {
  margin: 0;
}

.wt-sched-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wt-sched-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

.wt-sched-icon {
  flex-shrink: 0;
  display: inline-flex;
}

.wt-sched-main {
  flex: 1;
  min-width: 0;
}

.wt-sched-plat {
  font-weight: var(--font-weight-medium);
}

.wt-sched-caption {
  font-size: 12px;
  color: var(--wt-muted, #9aa0a6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wt-sched-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wt-muted, #9aa0a6);
  white-space: nowrap;
  flex-shrink: 0;
}

.wt-publish-bar {
  max-width: 1280px;
  margin: 24px auto 0;
  background: var(--color-surface);
  border-radius: 12px;
  /* no overflow:hidden — lets Account dropdown show */
}

/* Inside the wizard the step header is already left-aligned to the content
   column, so the bar must fill it instead of centring itself. */

.wizard-main .wt-publish-bar {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.wt-publish-bar-inner {
  padding: 20px 24px;
}

.wt-publish-bar-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.wt-publish-bar-icon {
  display: flex;
  align-items: center;
}

.wt-publish-bar-icon svg {
  width: 18px;
  height: 18px;
}

.wt-publish-bar-label {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wt-publish-bar-badge {
  font-size: var(--font-size-xs);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(46, 230, 182, 0.12);
  color: var(--wt-teal);
}

/* Two-column layout */

.wt-publish-bar-cols {
  display: flex;
  gap: 0;
  align-items: stretch;
}

/* LEFT — connected accounts */

.wt-publish-bar-accounts {
  flex: 0 0 260px;
  border-right: 1px solid var(--color-border);
  padding-right: 24px;
  margin-right: 24px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .wt-publish-bar-accounts {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding-right: 0;
    margin-right: 0;
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
}

.wt-publish-acct-loading {
  font-size: 13px;
  color: var(--color-text-muted);
}

.wt-publish-acct-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* Shape only — colours come from the common .cw-tab class */

.wt-publish-acct-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Stream Settings step — per-platform simulcast switch */

/* Toggle switches use the shared `w-toggle` classes in _WebinarBase.scss. */

.wt-publish-acct-row .w-toggle {
  margin-left: auto;
}

.wt-publish-acct-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
}

.wt-publish-acct-icon svg {
  width: 16px;
  height: 16px;
}

.wt-publish-acct-icon svg[fill=none] {
  stroke: currentColor !important;
}

.wt-publish-acct-icon svg:not([fill=none]) {
  fill: currentColor !important;
}

.wt-publish-acct-name {
  flex: 1;
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-bold, 700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wt-publish-acct-badge {
  font-size: var(--font-size-xs, 12px);
  font-weight: 500;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.wt-publish-acct-badge.ok {
  font-weight: var(--font-weight-medium);
}

.wt-publish-acct-badge.broken {
  color: var(--color-text-secondary);
}

.wt-publish-acct-badge.broken:hover {
  text-decoration: underline;
}

.wt-publish-acct-row.active .wt-publish-acct-badge {
  color: var(--color-text-secondary);
}

.wt-publish-acct-row.active .wt-publish-acct-badge.broken {
  color: var(--color-error);
}

.wt-publish-acct-connect {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  flex-shrink: 0;
}

.wt-publish-acct-connect:hover {
  text-decoration: underline;
}

.wt-publish-acct-row.active .wt-publish-acct-connect {
  color: rgba(255, 255, 255, 0.9);
}

.wt-publish-acct-manage {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-top: 10px;
}

.wt-publish-acct-manage:hover {
  color: var(--color-text);
}

/* Stream Settings — RTMP destination health, reason and reconnect */

.wt-stream-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wt-stream-refresh {
  margin-left: auto;
  background: none;
  border: none;
  padding: 0;
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  cursor: pointer;
}

.wt-stream-refresh:hover:not(:disabled) {
  text-decoration: underline;
}

.wt-stream-refresh:disabled {
  color: var(--color-text-muted);
  cursor: default;
}

.wt-stream-alert {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-error);
  margin-bottom: 8px;
}

.wt-stream-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.wt-stream-pill .wt-stream-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.wt-stream-pill.ok {
  color: var(--color-success, #16a34a);
}

.wt-stream-pill.invalid {
  color: var(--color-error);
}

.wt-stream-pill.warning {
  color: var(--color-warning, #d97706);
}

.wt-stream-pill.checking {
  color: var(--color-text-muted);
}

.wt-stream-reconnect {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  padding: 3px 10px;
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
}

.wt-stream-reconnect:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.wt-stream-msg {
  font-size: var(--font-size-xs, 12px);
  line-height: 1.4;
  padding: 0 16px 2px;
  color: var(--color-text-muted);
}

.wt-stream-msg.invalid {
  color: var(--color-error);
}

.wt-stream-msg.warning {
  color: var(--color-warning, #d97706);
}

.wt-stream-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.wt-stream-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wt-stream-field span {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
}

.wt-stream-field input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface, transparent);
  color: var(--color-text);
  font-size: var(--font-size-xs, 12px);
}

.wt-stream-field input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.wt-stream-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.wt-stream-btn {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  border-radius: 9999px;
  padding: 5px 14px;
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.wt-stream-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.wt-stream-btn.ghost {
  background: none;
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* RIGHT — publish form */

.wt-publish-bar-form {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Share link */

.wt-publish-bar-share {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}

.wt-publish-bar-share .wt-field-label {
  margin-bottom: 8px;
}

.wt-publish-bar-share {
  /* One unified pill: input + copy icon share a single border/height */
}

.wt-publish-bar-share .wt-share-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  background: var(--color-surface);
  overflow: hidden;
}

.wt-publish-bar-share .wt-share-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 11px 16px;
  color: var(--color-text-secondary);
}

.wt-publish-bar-share .wt-share-input:focus,
.wt-publish-bar-share .wt-share-input:hover,
.wt-publish-bar-share .wt-share-input:active {
  border: none;
  outline: none;
  box-shadow: none;
}

.wt-publish-bar-share .wt-btn {
  flex-shrink: 0;
  width: 52px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface-2) !important;
  color: var(--color-text-secondary) !important;
  box-shadow: none !important;
}

.wt-publish-bar-share .wt-btn svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  fill: var(--color-text-secondary) !important;
  display: block;
}

.wt-publish-bar-share .wt-btn:hover svg {
  fill: var(--color-text) !important;
}

.wt-publish-bar-share .wt-btn:hover {
  background: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* ── Loader ────────────────────────────────────────────────────────────── */

.wt-loader {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  color: var(--wt-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  gap: 12px;
}

.wt-spin {
  animation: wt-spin 0.9s linear infinite;
}

@keyframes wt-spin {
  to {
    transform: rotate(360deg);
  }
}

.wt-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wt-surface-2);
  border: 1px solid var(--wt-border);
  color: var(--wt-text);
  padding: 11px 18px;
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  z-index: 70;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.wt-toast.error {
  border-color: var(--color-error-border);
  color: var(--color-error);
}

.wt-toast.success {
  border-color: var(--color-success-border);
  color: var(--color-success);
}

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

.wt-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 20px;
}

.wt-modal {
  width: 100%;
  max-width: 560px;
  background: var(--modal-bg);
  color: var(--modal-text);
  border: 1px solid var(--wt-border);
  border-radius: 16px;
  padding: 22px;
  max-height: 86vh;
  overflow-y: auto;
}

.wt-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.wt-modal-title {
  font-size: var(--font-size-md);
  font-weight: 800;
  margin: 0;
}

.wt-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--wt-surface-2);
  color: var(--wt-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wt-modal-close:hover {
  color: var(--wt-text);
}

.wt-modal-section {
  margin-bottom: 18px;
}

.wt-modal-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--wt-muted);
  margin: 0 0 10px;
}

.wt-modal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.wt-canvas-wrapper {
  background: var(--wt-canvas-bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.wt-thumb {
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--wt-surface-3);
  cursor: pointer;
  padding: 0;
}

.wt-thumb.active {
  border-color: var(--wt-teal);
}

.wt-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.wt-field-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: 6px;
}

.wt-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--wt-border);
  border-radius: var(--radius-sm);
  color: var(--wt-text);
  font-size: var(--font-size-md);
  font-family: inherit;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.wt-select {
  width: 100%;
  padding: 10px 12px;
  background-color: var(--wt-surface);
  border: 1px solid var(--wt-border);
  border-radius: var(--radius-sm);
  color: var(--wt-text);
  font-size: var(--font-size-md);
  font-family: inherit;
  transition: border-color 0.15s;
  box-sizing: border-box;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238b8f96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  text-align: left;
}

.wt-input:focus,
.wt-select:focus {
  border-color: var(--wt-teal);
  outline: none;
}

/* Font Selector Dropdown */

.wt-fontsel {
  position: relative;
  width: 100%;
}

.wt-fontsel-trigger {
  cursor: pointer;
}

.wt-fontsel-trigger.is-open {
  border-color: var(--wt-teal);
}

.wt-fontsel-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background-color: var(--wt-surface);
  border: 1px solid var(--wt-border);
  border-radius: var(--radius-sm);
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.wt-fontsel-opt {
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--wt-text);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.wt-fontsel-opt:hover {
  background-color: var(--wt-surface-2, #333);
}

.wt-fontsel-opt.is-selected {
  background-color: #d9a441;
  color: #ffffff;
  font-weight: 600;
}

.wt-toggle-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Shape only — colours come from the common .cw-tab class */

.wt-toggle {
  flex: 1;
  min-width: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--edit-btn-bg-color, var(--wt-surface-2));
  color: var(--edit-btn-color, var(--wt-muted));
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.wt-toggle:hover {
  background: var(--edit-btn-bg-color);
  border-color: var(--edit-btn-border);
}

.wt-toggle.active {
  background: var(--edit-btn-color, var(--wt-teal));
  color: #ffffff;
  border-color: var(--edit-btn-color, var(--wt-teal));
}

.wt-glyph-serif {
  font-family: serif;
}

.wt-thumb-add {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wt-muted);
}

/* ── WtToggle fixed-width variant (grow=false) ─────────────────────────── */

.wt-toggle-fixed {
  flex: 0 0 auto;
  min-width: 38px;
}

/* ── Size label superscript ─────────────────────────────────────────────── */

.wt-size-label sup {
  font-size: 0.65em;
}

/* ── Header actions (Generate All + Done) ──────────────────────────────── */

.wt-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Platform list: custom title dot ──────────────────────────────────── */

.wt-plat-title-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
  margin-left: 2px;
}

/* ── Inline styling controls (below canvas) ───────────────────────────── */

.wt-inline-controls {
  margin-top: 20px;
}

.wt-ctrl-section {
  margin-bottom: 18px;
}

.wt-ctrl-label {
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--wt-muted);
  margin-bottom: 10px;
}

/* Background image grid */

.wt-bg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.wt-bg-thumb {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--wt-border);
  background: var(--wt-surface-3);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.15s ease;
}

.wt-bg-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.wt-bg-thumb.active {
  border-color: var(--wiz-tab-active-bg-color);
}

.wt-bg-thumb:hover:not(.active) {
  border-color: var(--wt-border-hover);
}

.wt-bg-thumb-wrap {
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}

.wt-bg-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--wt-border);
  border-radius: 50%;
  background: var(--wt-surface-1, #1b1b1f);
  color: var(--wt-text, #fff);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.wt-bg-remove:hover {
  background: #b3261e;
  border-color: #b3261e;
  color: #fff;
}

.wt-bg-add {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wt-muted);
  cursor: pointer;
}

.wt-bg-add:hover {
  color: var(--wt-text);
  border-color: var(--wt-border-hover);
}

.wt-show-more {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wt-teal);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 6px 0 0;
  display: block;
}

.wt-show-more:hover {
  text-decoration: underline;
}

/* Two-column controls grid */

.wt-ctrl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.wt-ctrl-panel {
  background: var(--wt-surface-2);
  border: 1px solid var(--wt-border);
  border-radius: 10px;
  padding: 14px;
}

.wt-ctrl-title {
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--wt-muted);
  margin: 0 0 12px;
}

/* Field within a control panel */

.wt-ctrl-field {
  margin-bottom: 12px;
}

.wt-ctrl-field:last-child {
  margin-bottom: 0;
}

.wt-ctrl-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 20px 0px;
}

.wt-ctrl-field-head .wt-field-label {
  margin-bottom: 0;
}

.wt-ctrl-field-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.wt-text-btn {
  cursor: pointer;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: 9px 16px;
  border-radius: var(--btn-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
  border: var(--btn-secondary-border);
}

.wt-text-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wt-text-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.wt-text-btn-muted {
  color: var(--wt-muted);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.wt-text-btn-muted:hover:not(:disabled) {
  color: var(--wt-text);
  text-decoration: none;
  background: var(--wt-surface-2);
  border-color: var(--wt-border);
  box-shadow: none;
}

.wt-textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}

.wt-field-sub {
  color: var(--wt-muted);
  font-weight: var(--font-weight-medium);
}

.wt-field-hint {
  font-size: var(--font-size-xs);
  color: var(--wt-muted);
  margin-top: 5px;
  font-style: italic;
}

/* Toggle group separator */

.wt-toggle-sep {
  width: 1px;
  background: var(--wt-border);
  align-self: stretch;
  margin: 0 2px;
  flex-shrink: 0;
}

/* ── Connected Accounts sticky bar ─────────────────────────────────────── */

.wt-connected-bar-wrap {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.wt-connected-bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px;
}

.wt-connected-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.wt-connected-bar-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.wt-connected-bar-title svg {
  color: var(--color-text-muted);
}

.wt-connected-bar-toggle {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
}

.wt-connected-bar-toggle:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.wt-connected-bar-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.wt-conn-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: 12px;
  color: var(--color-text-muted);
}

.wt-conn-pill--connected {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-text);
}

.wt-conn-pill--broken {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-text);
}

.wt-conn-pill-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.wt-conn-pill-name {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.wt-conn-pill-badge {
  font-size: 11px;
  color: var(--color-success);
  font-weight: 500;
  white-space: nowrap;
}

.wt-conn-pill-badge--broken {
  color: var(--color-error);
}

.wt-conn-pill-connect {
  font-size: 11px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.wt-conn-pill-connect:hover {
  text-decoration: underline;
}

.wt-conn-manage-all {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.wt-conn-manage-all:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* ── Saved Versions gallery ────────────────────────────────────────────── */

.wt-saved {
  max-width: 100%;
  margin: 24px auto 0;
  background: var(--wt-surface);
  border: 1px solid var(--wt-border);
  border-radius: 14px;
  padding: 20px;
}

.wt-saved-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.wt-saved-title {
  font-size: var(--font-size-md);
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--wt-text);
}

.wt-saved-count {
  font-size: var(--font-size-xs);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(46, 230, 182, 0.12);
  color: var(--wt-teal);
}

.wt-saved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.wt-saved-card {
  background: var(--wt-surface-2);
  border: 1.5px solid var(--wt-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.wt-saved-card.active {
  border-color: var(--wt-teal);
}

.wt-saved-preview {
  position: relative;
  width: 100%;
  background: var(--color-bg);
  overflow: hidden;
}

.wt-saved-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.wt-saved-active-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--wt-teal);
  color: var(--wt-bg);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
}

.wt-btn-teal {
  background: var(--btn-secondary-bg-white);
  color: var(--btn-secondary-dark-color);
  border: var(--btn-secondary-border);
}

.wt-saved-card-body {
  padding: 10px 12px 12px;
}

.wt-saved-card-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  margin-bottom: 2px;
}

.wt-saved-card-dim {
  font-size: var(--font-size-xs);
  color: var(--wt-muted);
}

/* Saved preview aspect ratios (mirrors .wt-canvas ratio classes) */

.wt-saved-preview.ratio-1x1 {
  aspect-ratio: 1/1;
}

.wt-saved-preview.ratio-16x9 {
  aspect-ratio: 16/9;
}

.wt-saved-preview.ratio-191x100 {
  aspect-ratio: 191/100;
}

.wt-saved-preview.ratio-9x16 {
  aspect-ratio: 9/16;
}

.wt-saved-preview.ratio-2x3 {
  aspect-ratio: 2/3;
}

/* Per-card download button */

.wt-saved-dl-btn {
  width: 100%;
  margin-top: 8px;
}

/* ── Presets Grid ───────────────────────────────────────────────────────── */

.wt-preset-grid {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.wt-preset-grid::-webkit-scrollbar {
  height: 4px;
}

.wt-preset-grid::-webkit-scrollbar-thumb {
  background: var(--wt-border);
  border-radius: 4px;
}

.wt-preset-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.wt-preset-color {
  width: 44px;
  height: 44px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  transition: transform 0.1s, border-color 0.15s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wt-preset-label {
  font-size: var(--font-size-xs);
  font-weight: 800;
  color: var(--wt-muted);
  transition: color 0.15s;
}

.wt-preset-wrap.active .wt-preset-color {
  border-color: var(--wt-teal);
}

.wt-preset-wrap.active .wt-preset-label {
  color: var(--wt-text);
}

/* ── Slider Controls ─────────────────────────────────────────────────────── */

.wt-slider-group {
  margin-bottom: 18px;
}

.wt-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.wt-slider-header label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--wt-text);
}

.wt-slider-val-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wt-slider-val {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--wt-slider-color);
}

.wt-slider-reset {
  background: none;
  border: none;
  padding: 0;
  color: var(--wt-slider-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.wt-slider-reset:hover {
  text-decoration: underline;
}

.wt-slider-track-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wt-slider-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--wt-border);
  border-radius: var(--radius-sm);
  color: var(--wt-text);
  cursor: pointer;
  flex-shrink: 0;
  font-weight: var(--font-weight-medium);
  font-size: 16px;
  transition: background 0.15s;
}

.wt-slider-btn:hover:not(:disabled) {
  background: var(--wt-surface-2);
}

.wt-slider-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.wt-slider-input-wrap {
  position: relative;
  flex: 1;
  height: 4px;
  background: var(--wt-border);
  border-radius: 999px;
  display: flex;
  align-items: center;
}

.wt-slider-progress {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px !important;
  background: var(--wt-slider-color);
  border-radius: 999px;
  pointer-events: none;
}

.wt-slider-input-wrap input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 4px;
  background: transparent;
  margin: 0;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Kill the engines' own track/fill so only .wt-slider-progress paints the fill. */

.wt-slider-input-wrap input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border: 0;
}

.wt-slider-input-wrap input[type=range]::-moz-range-track {
  height: 4px;
  background: transparent;
  border: 0;
}

.wt-slider-input-wrap input[type=range]::-moz-range-progress {
  height: 4px;
  background: transparent;
}

.wt-slider-input-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: var(--wt-slider-color);
  border: 2px solid var(--wt-slider-thumb-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  margin-top: -5px;
  /* centre the 14px thumb on the 4px track */
}

.wt-slider-input-wrap input[type=range]::-moz-range-thumb {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: var(--wt-slider-color);
  border: 2px solid var(--wt-slider-thumb-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.wt-slider-input-wrap input[type=range]:focus {
  outline: none;
}

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

@media (max-width: 1080px) {
  .wt-cols {
    grid-template-columns: 1fr;
  }

  .wt-ctrl-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .wt-page {
    padding: 18px 14px 48px;
  }

  .wt-header {
    flex-direction: column;
  }

  .wt-header-actions {
    width: 100%;
  }

  .wt-modal-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .wt-saved-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wt-thumb-drag-hint {
  margin-bottom: 8px;
}

/* ── Preview canvas frame ─────────────────────────────────────────────────
   The <canvas> is sized in device pixels (width/height attributes), so without
   an explicit CSS box it lays out at its bitmap width and spills over the
   right-hand controls column. Frame keeps it inside the column. */

.wt-thumb-canvas-frame {
  position: relative;
  width: 100%;
  max-width: var(--wt-thumb-frame-max-w, 100%);
  aspect-ratio: var(--wt-thumb-frame-ratio, 16/9);
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg);
}

.wt-thumb-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: var(--wt-thumb-canvas-cursor, default);
  touch-action: none;
}

.wt-thumb-canvas-empty,
.wt-thumb-canvas-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--wt-muted);
  background: rgba(0, 0, 0, 0.35);
}

/* ── Show Recording page ────────────────────────────────────────────────────
   Cloud recording tracks. Colours all come from the shared webinar tokens,
   so the page follows the dashboard light/dark toggle. */

.wr-page {
  --wr-row-bg: var(--color-surface-2);
  --wr-row-border: var(--color-border);
  --wr-ready-bg: var(--color-success-bg, rgba(22, 211, 154, 0.12));
  --wr-ready-text: var(--color-success);
  --wr-processing-bg: var(--color-warning-bg, rgba(255, 168, 125, 0.12));
  --wr-processing-text: var(--color-warning, #ffa87d);
}

.wr-page .whitecardbox {
  padding: 24px !important;
  background: var(--cw-card-bg) !important;
  border: 1px solid var(--cw-card-border) !important;
}

/* ── Section heading ──────────────────────────────────────────────────────── */

.wr-page .wr-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.wr-page .wr-section-title h4 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold, 600);
}

.wr-page .wr-section-title h4 span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular, 400);
}

/* ── Per-participant groups ───────────────────────────────────────────────── */

/* One section per email, plus the server's own egress capture. The heading sits
   above its own rows, so it needs clearance from the previous group's last row
   rather than the flat list's uniform gap. */

.wr-page .wr-participant-group + .wr-participant-group {
  margin-top: 28px;
}

.wr-page .wr-participant-title {
  margin-bottom: 12px;
}

.wr-page .wr-participant-title h4 {
  font-size: var(--font-size-md, 15px);
}

/* ── Track rows ───────────────────────────────────────────────────────────── */

.wr-page .wr-track-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wr-page .wr-track-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--wr-row-bg);
  border: 1px solid var(--wr-row-border);
}

.wr-page .wr-track-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 260px;
  min-width: 0;
}

.wr-page .wr-track-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 124px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

/* The whole title block opens the player, so the pointer belongs on all of it,
   not just the thumbnail. */

.wr-page .wr-track-play {
  cursor: pointer;
}

.wr-page .wr-track-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.wr-page .wr-track-play:hover .wr-track-thumb-play,
.wr-page .wr-track-play:focus-visible .wr-track-thumb-play {
  opacity: 1;
}

.wr-page .wr-track-thumb video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.wr-page .wr-track-name {
  min-width: 0;
}

.wr-page .wr-track-name h5 {
  margin: 0 0 2px;
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold, 600);
  overflow-wrap: anywhere;
}

.wr-page .wr-track-name span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* ── Status pill ──────────────────────────────────────────────────────────── */

.wr-page .wr-track-status {
  flex: 0 0 auto;
}

.wr-page .wr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium, 500);
}

.wr-page .wr-pill-ready {
  background: var(--wr-ready-bg);
  color: var(--wr-ready-text);
}

.wr-page .wr-pill-processing {
  background: var(--wr-processing-bg);
  color: var(--wr-processing-text);
}

/* ── Row actions ──────────────────────────────────────────────────────────── */

.wr-page .wr-track-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.wr-page .wr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Preview is a <button>, which would otherwise take the UA's own font. */

.wr-page button.wr-btn {
  font-family: inherit;
}

.wr-page .wr-btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.wr-page .wr-btn-ghost {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.wr-page .wr-btn-primary {
  background: var(--btn-primary-bg, var(--color-primary));
  color: var(--btn-primary-color, var(--color-on-primary));
}

.wr-page .wr-btn-primary:hover {
  background: var(--btn-primary-bg-hover, var(--color-primary));
}

/* Preview reuses the shared .cw-btn-secondary colours (gold border, light
   label) — only the pill shape and row sizing are overridden here. */

.wr-page .wr-btn-preview {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-family: inherit;
}

/* Sits beside the participant heading, so it stays visually lighter than the
   row's own actions. */

.wr-page .wr-btn-copy {
  padding: 7px 14px;
  font-size: var(--font-size-xs, 12px);
}

.wr-page .wr-btn-preview svg {
  width: 16px;
  height: 16px;
}

.wr-page .wr-btn-disabled,
.wr-page .wr-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* ── Loading / empty states ───────────────────────────────────────────────── */

.wr-page .wr-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 0;
  color: var(--color-text-secondary);
}

.wr-page .wr-empty {
  text-align: center;
  padding: 60px 24px;
  border-radius: 20px;
  background: var(--cw-card-bg);
  border: 1px solid var(--cw-card-border);
}

.wr-page .wr-empty h4 {
  margin: 0 0 6px;
  color: var(--color-text);
  font-size: var(--font-size-lg);
}

.wr-page .wr-empty p {
  margin: 0 0 18px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
}

@media (max-width: 900px) {
  .wr-page .wr-track-row {
    align-items: flex-start;
  }

  .wr-page .wr-track-actions {
    margin-left: 0;
    width: 100%;
  }

  .wr-page .wr-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ── Player ───────────────────────────────────────────────────────────────── */

/* Clicking a track opens it here rather than navigating away, so the list keeps
   its scroll position. */

.wr-page .wr-player-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.78);
}

.wr-page .wr-player {
  width: 100%;
  max-width: 960px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface, #16161a);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.wr-page .wr-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
}

.wr-page .wr-player-head h5 {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--color-text);
  font-size: var(--font-size-md, 15px);
  font-weight: var(--font-weight-semibold, 600);
}

.wr-page .wr-player-head h5 span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular, 400);
}

.wr-page .wr-player-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.wr-page .wr-player-close:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.08);
}

.wr-page .wr-player video {
  display: block;
  width: 100%;
  max-height: 72vh;
  background: #000;
}

/* =========================================================================
   Social step (publish / schedule per platform).
   Lives inside .wt-page, so every colour here comes from the --wt-* tokens
   _WebinarThumbnail.scss maps onto the global theme vars. Class names follow
   the ProRepurposer social pattern (accounts banner → filter pills → card
   grid) translated into the wt- namespace.
   ========================================================================= */

/* ── Connected accounts banner ──────────────────────────────────────────── */

.wt-accounts-banner {
  width: 100%;
  margin: 0 auto 24px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.wt-accounts-banner:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wt-accounts-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wt-accounts-banner-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wt-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.wt-accounts-banner-toggle {
  border: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--wt-teal);
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wt-accounts-banner-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.wt-accounts-pills {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.wt-accounts-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--wiz-tab-border-color, rgba(255, 255, 255, 0.08));
  font-size: var(--font-size-sm);
  transition: all 0.2s ease;
  cursor: pointer;
}

.wt-accounts-pill:hover,
.wt-accounts-pill.is-connected {
  border-color: var(--wiz-tab-active-border-color) !important;
  color: #ffffff !important;
  background: var(--wiz-tab-active-bg-color) !important;
  box-shadow: none !important;
  transform: none;
}

.wt-accounts-pill:hover .wt-accounts-pill-icon,
.wt-accounts-pill.is-connected .wt-accounts-pill-icon {
  filter: brightness(0) invert(1) !important;
}

.wt-accounts-pill:hover .wt-accounts-pill-action,
.wt-accounts-pill.is-connected .wt-accounts-pill-action,
.wt-accounts-pill:hover .wt-accounts-pill-badge,
.wt-accounts-pill.is-connected .wt-accounts-pill-badge {
  color: #ffffff !important;
}

.wt-accounts-pill.is-broken {
  border-color: rgba(245, 158, 11, 0.7) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.wt-accounts-pill-icon {
  display: inline-flex;
  align-items: center;
}

.wt-accounts-pill-icon svg {
  width: 16px;
  height: 16px;
}

.wt-accounts-pill-name {
  font-weight: 600;
  color: inherit;
}

.wt-accounts-pill-badge {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wt-muted);
  font-size: var(--font-size-xs);
  background: none;
  padding: 2px 0px;
  border-radius: 4px;
}

.wt-accounts-pill-action {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary, var(--wt-muted));
  margin-left: 4px;
  transition: color 0.2s;
}

.wt-accounts-pill-action:hover {
  color: var(--wt-text);
}

.wt-accounts-manage {
  font-size: var(--font-size-sm);
  margin-left: auto;
  color: var(--wt-muted);
  font-weight: 500;
  transition: color 0.2s;
}

.wt-accounts-manage:hover {
  color: var(--wt-text);
  text-decoration: none;
}

/* ── Post card grid ─────────────────────────────────────────────────────── */

/* 300px min matches ProRepurposer's prp-card-grid — three cards fit a normal
   wizard content width, and it drops to 2-up / 1-up on its own as space runs out. */

/* ── Post card grid ─────────────────────────────────────────────────────── */

/* 300px min matches ProRepurposer's prp-card-grid — three cards fit a normal
   wizard content width, and it drops to 2-up / 1-up on its own as space runs out. */

.wt-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 20px;
  align-items: stretch;
  width: 100%;
  margin: 0 auto 24px;
}

.wt-post-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: var(--wt-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  min-width: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  /* below its siblings by default so an open popup can paint over them */
  z-index: 0;
}

.wt-post-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 20px 20px 0 0;
  /* was clipped by overflow:hidden before */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent);
}

/* the card whose date picker is open sits above every other card */

.wt-post-card:has(.cw-dtp-popup) {
  z-index: 50;
}

.wt-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wt-post-card.is-scheduled {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
}

.wt-post-card.is-scheduled::before {
  background: #f59e0b;
}

.wt-post-card.is-published {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
}

.wt-post-card.is-published::before {
  background: #10b981;
}

.wt-post-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.wt-post-card-headtext {
  flex: 1;
  min-width: 0;
}

.wt-post-card-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wt-text);
}

.wt-post-card-substatus {
  font-size: var(--font-size-xs);
  color: var(--wt-muted);
  margin-top: 2px;
}

.wt-post-card-platform {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.9;
}

.wt-avatar-stack {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.wt-avatar-img,
.wt-avatar-letter {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-left: var(--wt-avatar-ml, 0);
  z-index: var(--wt-avatar-z, 1);
  border: 2px solid var(--wt-surface);
  -o-object-fit: cover;
     object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wt-avatar-letter {
  background: var(--wt-chip-hover);
  color: var(--wt-text);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.wt-avatar-more {
  margin-left: -6px;
  padding: 0 6px;
  height: 22px;
  border-radius: 999px;
  background: var(--wt-chip-hover);
  color: var(--wt-muted);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
}

.wt-avatar-platform {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wt-surface-2);
  border: 1px solid var(--wt-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wt-pub-pill {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wt-pub-pill.is-scheduled {
  background: rgba(245, 158, 11, 0.16);
  color: #f59e0b;
}

.wt-pub-pill.is-published {
  background: rgba(16, 185, 129, 0.16);
  color: #10b981;
}

/* Composed thumbnail preview inside the card.
   Height is capped rather than driven by the platform aspect ratio — a 1:1
   Instagram or 9:16 Story frame would otherwise make the card scroll for
   pages. The image crops to fit; the full-size version is on the Share step. */

/* Composed thumbnail preview inside the card.
   Height is capped rather than driven by the platform aspect ratio — a 1:1
   Instagram or 9:16 Story frame would otherwise make the card scroll for
   pages. The image crops to fit; the full-size version is on the Share step. */

.wt-post-card-media {
  position: relative;
  width: 100%;
  max-height: 220px;
  min-height: 80px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wt-post-card-media img {
  display: block;
  width: 100%;
  max-height: 220px;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}

.wt-post-card:hover .wt-post-card-media img {
  transform: scale(1.02);
}

.wt-post-card-media-empty {
  padding: 18px 16px;
  text-align: center;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.3);
  font-weight: 500;
}

.wt-acct-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wt-acct-locked-note,
.wt-acct-not-connected {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--wt-surface-2);
  font-size: var(--font-size-xs);
  color: var(--wt-muted);
  line-height: 1.5;
}

.wt-acct-not-connected a {
  color: var(--wt-teal);
  font-weight: var(--font-weight-medium);
}

.wt-needs-acct,
.wt-overlimit-banner {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.wt-needs-acct {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.wt-overlimit-banner {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.wt-needs-acct svg,
.wt-overlimit-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.wt-post-card-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wt-post-card-schedule {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

/* Footer actions */

.wt-post-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.wt-post-card-footer .wt-pf-btn-sec,
.wt-post-card-footer .wt-pf-btn-pri {
  flex: 0 0 auto;
  min-width: 0;
  padding: 8px 16px;
  gap: 6px;
  font-size: var(--font-size-sm);
  line-height: 18px;
  border-radius: 999px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.wt-post-card-footer .wt-pf-btn-sec {
  background: rgba(255, 255, 255, 0.05);
  color: var(--wt-text);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wt-post-card-footer .wt-pf-btn-sec:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.wt-post-card-footer .wt-pf-btn-pri {
  background: linear-gradient(135deg, var(--wt-teal), #0d9488);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.wt-post-card-footer .wt-pf-btn-pri:hover:not(:disabled) {
  background: linear-gradient(135deg, #2dd4bf, var(--wt-teal));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}

.wt-post-card-footer .wt-pf-btn-pri:disabled,
.wt-post-card-footer .wt-pf-btn-sec:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.wt-post-card-footer .wt-pf-btn-sec svg,
.wt-post-card-footer .wt-pf-btn-pri svg {
  width: 14px;
  height: 14px;
}

.wt-post-card-footer .wt-pf-cancel-link {
  width: auto;
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--wt-muted);
  transition: color 0.2s;
  font-weight: 500;
}

.wt-post-card-footer .wt-pf-cancel-link:hover {
  color: #ef4444;
}

/* Premium Form Elements (Textarea & AI trigger overrides) */

.wt-post-card .wai-trigger {
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: filter 0.2s;
  color: #fff !important;
  border: none;
}

.wt-post-card .wai-trigger svg {
  color: var(--icon-style-box-base-color);
}

.wt-post-card .wai-trigger:hover {
  filter: brightness(1.2) drop-shadow(0 0 4px rgba(217, 164, 65, 0.4));
}

.wt-post-card .wt-pf-caption-ta {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  color: var(--wt-text);
  transition: all 0.3s ease;
  resize: none;
}

.wt-post-card .wt-pf-caption-ta:focus {
  border-color: var(--wt-teal);
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
  outline: none;
}

@media (max-width: 720px) {
  .wt-post-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .wt-accounts-manage {
    margin-left: 0;
  }
}

/* =========================================================================
   Schedule step — cloned from the ProRepurposer ScheduleStep layout:
   a global publish bar, then one row per queued post
   (icon | details | thumb | time | action | cancel).
   Lives inside .wt-page, so all colours come from the --wt-* tokens mapped in
   _WebinarThumbnail.scss.
   ========================================================================= */

.wt-sched-global {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto 18px;
  padding: 14px 18px;
  background: var(--wt-surface);
  border: 1px solid var(--wt-border);
  border-radius: 14px;
}

.wt-sched-global-label {
  font-size: var(--font-size-sm);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wt-muted);
}

.wt-sched-global-hint {
  font-size: var(--font-size-xs);
  color: var(--wt-muted);
}

.wt-sched-input,
.wt-sched-select,
.wt-sched-spacing,
.wt-sched-row-input {
  padding: 8px 10px;
  background: var(--wt-surface-2);
  border: 1px solid var(--wt-border);
  border-radius: 8px;
  color: var(--wt-text);
  font-size: var(--font-size-sm);
  font-family: inherit;
}

.wt-sched-input:focus,
.wt-sched-select:focus,
.wt-sched-spacing:focus,
.wt-sched-row-input:focus {
  border-color: var(--wt-teal);
  outline: none;
}

/* The native picker glyph renders near-black on a dark field without this. */

.wt-sched-input::-webkit-calendar-picker-indicator,
.wt-sched-row-input::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
}

.wt-sched-select {
  max-width: 200px;
}

.wt-sched-spacing {
  width: 74px;
}

.wt-sched-all-btn {
  margin-left: auto;
}

/* ── Rows ───────────────────────────────────────────────────────────────── */

.wt-sched-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0 auto 20px;
}

.wt-sched-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--wt-surface);
  border: 1px solid var(--wt-border);
  border-radius: 12px;
}

.wt-sched-row.is-locked {
  opacity: 0.72;
}

.wt-sched-row-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--wt-surface-2);
  border: 1px solid var(--wt-border);
}

.wt-sched-row-icon-fallback {
  font-size: var(--font-size-xs);
  font-weight: 800;
  color: var(--wt-muted);
}

.wt-sched-row-main {
  flex: 1;
  min-width: 0;
}

.wt-sched-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.wt-sched-platform-tag {
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wt-muted);
}

.wt-sched-row-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wt-sched-row-preview {
  font-size: var(--font-size-xs);
  color: var(--wt-muted);
  line-height: 1.5;
  margin-top: 2px;
}

.wt-sched-row-error {
  margin-top: 6px;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

.wt-sched-row-link {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--wt-teal);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.wt-sched-row-link:hover {
  text-decoration: underline;
}

.wt-sched-row-thumb {
  width: 72px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--wt-border);
  background: var(--wt-canvas-bg);
}

.wt-sched-row-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.wt-sched-row-input {
  flex-shrink: 0;
}

.wt-sched-row-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Account chips — read-only; accounts are picked on the Social step so there is
   a single source of truth for what a scheduled post will publish as. */

.wt-sched-acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 180px;
  padding: 2px 8px 2px 2px;
  border: 1px solid var(--wt-border);
  border-radius: 999px;
  background: var(--wt-surface-2);
  font-size: 11px;
}

.wt-sched-acct-img,
.wt-sched-acct-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wt-chip-hover);
  font-size: 9px;
  font-weight: 800;
}

.wt-sched-acct-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wt-sched-acct-unknown {
  font-size: 11px;
  color: #f59e0b;
}

/* ── Status pill ────────────────────────────────────────────────────────── */

.wt-status-pill {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wt-status-pill.is-draft {
  background: var(--wt-surface-2);
  color: var(--wt-muted);
}

.wt-status-pill.is-publishing {
  background: rgba(29, 78, 216, 0.18);
  color: #60a5fa;
}

.wt-status-pill.is-scheduled {
  background: rgba(245, 158, 11, 0.16);
  color: #f59e0b;
}

.wt-status-pill.is-published {
  background: rgba(16, 185, 129, 0.16);
  color: #10b981;
}

.wt-status-pill.is-failed {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
}

.wt-status-pill.is-skipped {
  background: var(--wt-surface-2);
  color: var(--wt-muted);
}

/* ── Row action buttons ─────────────────────────────────────────────────── */

.wt-sched-action-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-size: var(--font-size-xs);
  font-weight: var(--btn-font-weight);
  cursor: pointer;
  transition: filter 0.15s ease;
}

.wt-sched-action-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.wt-sched-action-btn:disabled {
  cursor: not-allowed;
}

.wt-sched-action-btn.is-draft {
  border: none;
  background: linear-gradient(90deg, var(--wt-teal) 0%, var(--wt-teal-2) 100%);
  color: var(--color-text);
}

.wt-sched-action-btn.is-scheduled {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.wt-sched-action-btn.is-published {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.wt-sched-action-btn.is-publishing {
  border-color: rgba(29, 78, 216, 0.5);
  background: rgba(29, 78, 216, 0.14);
  color: #60a5fa;
}

.wt-sched-action-btn.is-failed {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

/* Gold hyperlink-style secondary actions (Retry / Cancel) */

.wt-sched-link-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
  border: none;
  background: none;
  color: var(--wt-gold);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.wt-sched-link-btn:hover:not(:disabled) {
  text-decoration: underline;
}

.wt-sched-link-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wt-sched-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  padding-top: 6px;
}

.wt-sched-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: var(--wt-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.wt-sched-back-btn:hover {
  color: var(--wt-text);
}

@media (max-width: 900px) {
  .wt-sched-row {
    flex-wrap: wrap;
  }

  /* Details drop to their own line so the time + action stay on one row. */

  .wt-sched-row-main {
    flex-basis: 100%;
    order: 3;
  }

  .wt-sched-all-btn {
    margin-left: 0;
  }
}

/* =========================================================================
   Shell
   ========================================================================= */

.podup-webinar-listing {
  min-height: 100vh;
}

/* =========================================================================
   Card — listing-list
   ========================================================================= */

.webinar-listing-list {
  background: var(--color-surface);
  border-radius: 20px;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 16px !important;
  position: relative;
}

.webinar-listing-list:has(.dropdown-menu.show) {
  z-index: 1000;
}

.webinar-listing-list:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: var(--color-border);
}

.webinar-listing-list:hover .webinar-listing-img img {
  transform: scale(1.05);
}

.webinar-listing-list h2 a {
  color: var(--color-text);
  font-size: var(--font-size-xl);
  font-weight: 800;
  transition: color 0.2s;
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.webinar-listing-list h2 a:hover {
  color: var(--color-text);
}

.webinar-listing-list p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* =========================================================================
   Thumbnail Image
   ========================================================================= */

.webinar-listing-img {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
  width: 100%;
}

.webinar-listing-img img {
  transition: transform 0.5s ease;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 14px;
}

.webinar-listing-img:hover .webinar-play-overlay {
  background: rgba(0, 0, 0, 0.35);
}

.webinar-listing-img:hover .play-button-icon {
  transform: scale(1.1);
  background: var(--color-surface);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* =========================================================================
   Badge Container + Badges
   ========================================================================= */

.webinar-listing-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.listing-badge {
  padding: 5px 5px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: blur(8px);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  line-height: normal;
  gap: 0;
  border-radius: var(--icon-style-box-border-radius) !important;
  border: var(--icon-style-box-border) !important;
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
}

/* =========================================================================
   Live Pulse Dot
   ========================================================================= */

.live-pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--color-surface);
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
  animation: livepulse 1.2s ease-in-out infinite;
}

@keyframes livepulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.6);
  }
}

/* =========================================================================
   Play Overlay
   ========================================================================= */

.webinar-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 10;
}

.play-button-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.play-button-icon svg {
  margin-left: 4px;
}

/* =========================================================================
   Timedate Row
   ========================================================================= */

.webinar-listing-timedate span {
  background: var(--color-info-bg);
  color: var(--color-primary);
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

/* =========================================================================
   User Row
   ========================================================================= */

.webinar-listing-username h3 {
  font-size: calc(var(--font-size-xl) + 2px);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0;
}

.webinar-listing-username p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}

.webinar-listing-timede {
  display: flex;
  gap: 16px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.webinar-listing-timede svg {
  margin-right: 6px;
  opacity: 0.7;
}

/* =========================================================================
   Shared Button — green / resend
   ========================================================================= */

.w3nbtn.greengradient,
.webinar-resend-btn {
  background: var(--color-primary) !important;
  border: none !important;
  color: var(--color-surface) !important;
  border-radius: var(--btn-radius) !important;
  font-weight: var(--font-weight-medium) !important;
  transition: all 0.2s !important;
  height: 40px !important;
  padding: var(--btn-padding) !important;
  width: auto;
  white-space: nowrap;
}

.w3nbtn.greengradient {
  background: var(--btn-quaternary-bg) !important;
  color: var(--btn-quaternary-color) !important;
}

.w3nbtn.greengradient:hover {
  background: var(--btn-quaternary-bg-hover) !important;
  box-shadow: var(--btn-quaternary-shadow-hover) !important;
}

.webinar-resend-btn svg,
.w3nbtn.greengradient svg {
  width: 15px;
  height: 15px;
}

html body .w3nbtn.wl-restore-btn {
  background: var(--edit-btn-bg-color) !important;
  border: 1px solid var(--edit-btn-border) !important;
  color: var(--edit-btn-color) !important;
  border-radius: 8px !important;
  font-weight: var(--font-weight-medium) !important;
  box-shadow: none !important;
  transition: all 0.2s !important;
  height: 40px !important;
  width: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.w3nbtn.wl-restore-btn:hover {
  box-shadow: 0 4px 12px rgba(45, 130, 220, 0.3) !important;
  transform: translateY(-2px);
}

html body .w3nbtn.wl-delete-btn {
  background: var(--color-error-bg) !important;
  border: 1px solid var(--color-error-border) !important;
  color: var(--color-error) !important;
  border-radius: 8px !important;
  font-weight: var(--font-weight-medium) !important;
  box-shadow: none !important;
  transition: all 0.2s !important;
  height: 40px !important;
  width: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.w3nbtn.wl-delete-btn:hover {
  box-shadow: 0 4px 12px rgba(200, 100, 45, 0.3) !important;
  transform: translateY(-2px);
}

.w3nbtn.wl-restore-btn svg,
.w3nbtn.wl-delete-btn svg {
  fill: transparent !important;
}

/* =========================================================================
   Listing action buttons — common secondary style (existing vars)
   Apply .wl-action-btn to Remind / Join / Watch Recording / Host View
   ========================================================================= */

.webinar-listing-btn .wl-action-btn,
.wl-action-btn.wl-action-btn {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-color) !important;
  border: var(--btn-secondary-border) !important;
  box-shadow: none !important;
}

.webinar-listing-btn .wl-action-btn svg,
.wl-action-btn.wl-action-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}

.webinar-listing-btn .wl-action-btn svg,
.webinar-listing-btn .wl-action-btn svg path,
.wl-action-btn.wl-action-btn svg,
.wl-action-btn.wl-action-btn svg path {
  fill: currentColor !important;
}

.webinar-listing-btn .wl-action-btn:hover,
.wl-action-btn.wl-action-btn:hover {
  background: var(--btn-secondary-bg-hover) !important;
  color: var(--color-text-baselight) !important;
  border: var(--btn-secondary-border) !important;
  box-shadow: var(--btn-secondary-shadow-hover) !important;
}

.webinar-listing-btn .wl-action-btn:hover svg,
.webinar-listing-btn .wl-action-btn:hover svg path,
.wl-action-btn.wl-action-btn:hover svg,
.wl-action-btn.wl-action-btn:hover svg path {
  fill: var(--color-text-baselight) !important;
}

/* Primary Yellow Button Override for "Join" button */

.webinar-listing-btn .wl-action-btn.cw-btn-primary,
.wl-action-btn.wl-action-btn.cw-btn-primary {
  background: transparent !important;
  color: var(--wizard-link) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.webinar-listing-btn .wl-action-btn.cw-btn-primary svg,
.webinar-listing-btn .wl-action-btn.cw-btn-primary svg path,
.wl-action-btn.wl-action-btn.cw-btn-primary svg,
.wl-action-btn.wl-action-btn.cw-btn-primary svg path {
  fill: currentColor !important;
  color: inherit !important;
}

.webinar-listing-btn .wl-action-btn.cw-btn-primary:hover,
.wl-action-btn.wl-action-btn.cw-btn-primary:hover {
  background: transparent !important;
  color: var(--wizard-link-hover) !important;
  box-shadow: none !important;
}

.webinar-listing-btn .wl-action-btn.cw-btn-primary:hover svg,
.webinar-listing-btn .wl-action-btn.cw-btn-primary:hover svg path,
.wl-action-btn.wl-action-btn.cw-btn-primary:hover svg,
.wl-action-btn.wl-action-btn.cw-btn-primary:hover svg path {
  fill: currentColor !important;
  color: inherit !important;
}

/* Secondary Button Override for "Host View" button using theme variables */

.webinar-listing-btn .wl-action-btn.webinar-hostview-btn,
.wl-action-btn.wl-action-btn.webinar-hostview-btn {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-color) !important;
  border: var(--btn-secondary-border) !important;
  box-shadow: none !important;
  padding: var(--btn-padding) !important;
  border-radius: var(--btn-radius) !important;
  font-weight: var(--btn-font-weight) !important;
  font-size: var(--btn-font-size) !important;
  letter-spacing: var(--btn-letter-spacing) !important;
  transition: all 0.3s ease !important;
}

.webinar-listing-btn .wl-action-btn.webinar-hostview-btn svg,
.webinar-listing-btn .wl-action-btn.webinar-hostview-btn svg path,
.wl-action-btn.wl-action-btn.webinar-hostview-btn svg,
.wl-action-btn.wl-action-btn.webinar-hostview-btn svg path {
  fill: currentColor !important;
  color: inherit !important;
}

.webinar-listing-btn .wl-action-btn.webinar-hostview-btn:hover,
.wl-action-btn.wl-action-btn.webinar-hostview-btn:hover {
  background: var(--btn-secondary-bg-hover) !important;
  color: var(--btn-secondary-color) !important;
  box-shadow: var(--btn-secondary-shadow-hover) !important;
  transform: translateY(-2px);
}

.webinar-listing-btn .wl-action-btn.webinar-hostview-btn:hover svg,
.webinar-listing-btn .wl-action-btn.webinar-hostview-btn:hover svg path,
.wl-action-btn.wl-action-btn.webinar-hostview-btn:hover svg,
.wl-action-btn.wl-action-btn.webinar-hostview-btn:hover svg path {
  fill: currentColor !important;
  color: inherit !important;
}

/* Icon-only row actions (watch recording / copy link) — matches the 34px overflow toggle */

.wl-icon-btn {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.2s;
}

.wl-icon-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.wl-icon-btn:hover:not(:disabled) {
  background: var(--color-border);
  border-color: var(--color-dim);
}

.wl-icon-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wl-copy-btn svg {
  fill: none;
}

/* =========================================================================
   Hamburger / Dropdown
   ========================================================================= */

.hamburgerdotswrap .dropdown-toggle {
  background: var(--color-surface-2);
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  transition: all 0.2s;
  padding: 0;
}

.hamburgerdotswrap .dropdown-toggle::after {
  display: none;
}

.hamburgerdotswrap .dropdown-toggle:hover {
  background: var(--color-border);
  border-color: var(--color-dim);
}

.hamburgerdotswrap .dropdown-menu {
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  z-index: 1050;
}

.hamburgerdotswrap .dropdown-item {
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
}

.hamburgerdotswrap .dropdown-item:hover,
.hamburgerdotswrap .dropdown-item:focus,
.hamburgerdotswrap .dropdown-item:active,
.hamburgerdotswrap .dropdown-item.active {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.hamburgerdotswrap .dropdown-item span {
  flex-grow: 1;
}

/* =========================================================================
   Tabs
   ========================================================================= */

.webinar-listing-tabs {
  border-radius: 14px;
  display: inline-flex;
  border-bottom: none !important;
  align-items: center;
  margin-bottom: 0 !important;
}

.webinar-listing-tabs .nav-link {
  border-radius: 30px !important;
  padding: 10px 16px !important;
  font-weight: var(--font-weight-medium) !important;
  font-size: var(--font-size-md) !important;
  transition: all 0.2s !important;
  display: inline-flex;
  align-items: center;
}

.webinar-listing-tabs .nav-link.active {
  box-shadow: 0 4px 6px -1px rgba(23, 72, 108, 0.2) !important;
}

.podup-webinar-listing .webinar-listing-tabs .nav-item + .nav-item {
  margin-left: 0px;
}

/* =========================================================================
   More Tabs Dropdown
   ========================================================================= */

.more-tab-wrapper {
  position: relative;
}

.more-tabs-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  z-index: 200;
  min-width: 130px;
  padding: 0;
  overflow: hidden;
}

.more-tabs-dropdown-item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  background: none;
  border: none;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
}

.more-tabs-dropdown-item:hover,
.more-tabs-dropdown-item.active {
  background: var(--select-option-bg-hover);
  color: var(--select-option-text-hover);
  font-weight: var(--font-weight-medium);
}

/* =========================================================================
   Loading State
   ========================================================================= */

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  width: 100%;
  gap: 16px;
}

.loading-container span {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
}

/* =========================================================================
   Separator + User Info
   ========================================================================= */

.webinar-user-info-separator {
  width: 1px;
  height: 32px;
  background: var(--color-border);
  margin: 0 24px;
}

.webinar-listing-user {
  margin-top: 16px;
}

/* =========================================================================
   Invite Buttons
   ========================================================================= */

.webinar-invite-btn-link {
  display: flex;
  align-items: center;
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-decoration: none !important;
  transition: all 0.2s;
}

.webinar-invite-btn-link:hover {
  color: var(--color-primary);
  transform: translateX(4px);
}

.webinar-send-invite-btn {
  width: 100% !important;
}

a.webinar-invite-btn-link.webinar-send-invite-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  gap: 4px;
}

a.webinar-invite-btn-link.webinar-send-invite-btn svg {
  width: 17px;
}

a.webinar-invite-btn-link.webinar-send-invite-btn svg path {
  fill: var(--color-primary);
}

a.webinar-invite-btn-link.webinar-send-invite-btn:hover {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

/* =========================================================================
   Video Modal
   ========================================================================= */

.webinar-video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  backdrop-filter: blur(8px);
}

.webinar-video-modal-content {
  background: var(--modal-bg);
  color: var(--modal-text);
  width: 90%;
  max-width: 1000px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-border);
  padding: 16px;
  padding-top: 0;
}

.webinar-video-modal-header {
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  margin: 0 -16px 16px;
}

.webinar-video-modal-header h3 {
  color: var(--color-text);
  margin: 0;
  font-size: calc(var(--font-size-xl) + 2px);
  font-weight: var(--font-weight-medium);
}

.close-modal-btn {
  background: var(--modal-close-bg);
  border: none;
  color: var(--modal-text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.close-modal-btn:hover {
  background: var(--modal-close-bg-hover);
}

.webinar-video-modal-body {
  padding: 0;
  background: var(--color-bg);
  aspect-ratio: 16/9;
  border-radius: 16px;
}

.webinar-video-player {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 16px;
}

/* =========================================================================
   Theme-Driven Helpers
   ========================================================================= */

.wl-rating {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.wl-rating-star {
  fill: var(--color-icon-gold);
  stroke: var(--color-icon-gold);
  margin-right: 4px;
}

.wl-rating-count {
  color: var(--color-text-muted);
  margin-left: 4px;
}

.wl-danger-item {
  color: var(--color-error);
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

/* =========================================================================
   Inline-style replacements (moved out of WebinarList.js)
   ========================================================================= */

.wl-timede-link {
  color: inherit;
}

.webinar-listing-btn {
  gap: 10px;
}

.wl-archived-actions {
  gap: 8px;
  width: -moz-fit-content;
  width: fit-content;
}

.webinar-hostview-btn {
  background: var(--color-accent-purple);
  color: var(--color-text-baselight);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}

.webinar-hostview-btn svg {
  flex-shrink: 0;
}

.webinar-resend-btn svg,
.w3nbtn.greengradient svg {
  margin-right: 6px;
}

.more-tabs-caret {
  margin-left: 5px;
  transition: transform 0.2s;
}

.more-tabs-caret.is-open {
  transform: rotate(180deg);
}

/* =========================================================================
   Responsive Breakpoints
   ========================================================================= */

@media (max-width: 1199.98px) {
  .webinar-listing-section .webinar-listing-btn a {
    font-size: 14px;
    padding: 10px 12px;
    width: 100%;
    max-width: none;
  }

  .webinar-listing-section .webinar-listing-list h2 a,
  .webinar-listing-section .webinar-listing-list h2 {
    font-size: 18px;
  }
}

@media (max-width: 991.98px) {
  .webinar-listing-tabs {
    margin-bottom: 25px;
  }

  .webinar-listing-search {
    justify-content: flex-start;
  }

  .webinar-listing-section {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 12px;
  }

  .webinar-listing-section .webinar-listing-timede {
    gap: 10px;
    flex: 100% 0 0;
  }

  .webinar-listing-section .webinar-listing-list {
    padding: 12px;
    padding-bottom: 25px;
  }

  .webinar-listing-section .webinar-listing-img {
    margin-bottom: 15px;
  }

  .webinar-listing-section .webinar-listing-btn {
    flex-direction: row;
    margin-top: 24px;
    flex-wrap: wrap;
  }

  .webinar-listing-section .webinar-listing-username {
    margin: 0;
    padding: 0;
    border: 0;
  }
}

@media (max-width: 767.98px) {
  .webinar-listing-filter {
    flex: 100% 0 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .webinar-listing-search {
    flex-wrap: wrap;
  }

  .webinar-listing-search select.form-control {
    width: auto;
  }

  .webinar-listing-search .search {
    max-width: none;
    margin-top: 15px;
  }

  .webinar-listing-section {
    grid-template-columns: repeat(1, 1fr);
  }

  .webinar-listing-section .webinar-listing-btn a {
    font-size: 14px;
  }
}

a.webinar-hostview-btn {
  gap: 8px !important;
}

/* =========================================================================
   Send Recording Email modal (attendee / speaker tabs)
   ========================================================================= */

/* Backdrop, surface, radius and shadow all come from the shared `.cw-modal-overlay`
   / `.cw-modal` pair in _shared-components.scss — only the size and internal
   layout are declared here. */

.wl-sre-modal {
  width: 100%;
  max-width: 720px;
  min-height: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.wl-sre-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}

.wl-sre-header h3 {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
}

.wl-sre-header p {
  margin: 4px 0 0;
  font-size: var(--font-size-base);
}

/* Tabs reuse the listing's `.wl-rp-pill` styling — no second pill definition. */

.wl-sre-tabs {
  display: flex;
  gap: 10px;
  padding: 16px 24px 0;
}

.wl-sre-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.wl-sre-empty {
  margin: 0;
  padding: 24px 0;
  text-align: center;
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.wl-sre-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  font-weight: var(--font-weight-normal);
  /* Box + tick come from the shared checkbox rule in _FormControls.scss
     (--checkbox-* tokens), so every list in the module matches. */
}

.wl-sre-row:last-child {
  border-bottom: 0;
}

.wl-sre-row-head {
  font-weight: var(--font-weight-medium);
}

/* The dark theme paints `input:checked + span` as a filled checkbox box; these
   spans are plain text labels, so out-specify that rule instead of touching it. */

.wl-sre-row input[type=checkbox]:checked + span.wl-sre-name,
body[data-theme=dark] .wl-sre-row input[type=checkbox]:checked + span.wl-sre-name {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--color-text) !important;
  padding: 0;
  border-radius: 0;
}

.wl-sre-name {
  color: var(--color-text);
  font-size: var(--font-size-md);
}

.wl-sre-email {
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}

.wl-sre-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
}

/* Combined Create/Edit Speaker component styles.
   Shared rules target both .cs-theme-shell (CreateSpeaker) and
   .es-theme-shell (EditSpeaker); component-specific overrides follow.
   Colors use global theme variables; dark theme handled by WebinarDark.css. */

/* ---- Shared ---- */

/* Background / border / shadow: see the shared flat-card rule in _WebinarBase.scss. */

.cs-theme-shell .whitecardbox,
.es-theme-shell .whitecardbox {
  border-radius: 20px !important;
  padding: 0px !important;
  margin-bottom: 24px !important;
  transition: all 0.3s ease !important;
}

.cs-theme-shell .create_ep_section h3,
.es-theme-shell .create_ep_section h3 {
  color: var(--color-text) !important;
  font-weight: var(--font-weight-medium) !important;
  font-size: calc(var(--font-size-xl) + 2px);
  margin: 0 0 8px !important;
}

.cs-theme-shell .create_ep_section h4,
.es-theme-shell .create_ep_section h4 {
  color: var(--color-text) !important;
  font-weight: var(--font-weight-medium) !important;
  font-size: var(--font-size-lg) !important;
  margin: 0 0 2px !important;
}

.cs-theme-shell .create_ep_section p,
.es-theme-shell .create_ep_section p {
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-sm) !important;
  margin: 0 !important;
}

.cs-theme-shell .form-label,
.es-theme-shell .form-label {
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-text) !important;
  font-size: var(--font-size-md) !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.cs-theme-shell .form-control,
.es-theme-shell .form-control {
  border-radius: var(--input-radius) !important;
  border: var(--input-border) !important;
  padding: var(--input-padding) !important;
  font-size: var(--font-size-md) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 20px !important;
  height: var(--input-height) !important;
  color: var(--input-color) !important;
  background-color: var(--input-bg) !important;
  transition: border-color 0.2s !important;
}

.cs-theme-shell .form-control::-moz-placeholder, .es-theme-shell .form-control::-moz-placeholder {
  color: var(--input-placeholder) !important;
}

.cs-theme-shell .form-control::placeholder,
.es-theme-shell .form-control::placeholder {
  color: var(--input-placeholder) !important;
}

.cs-theme-shell .webinar-upload-box,
.es-theme-shell .webinar-upload-box {
  border: 2px dashed var(--upload-box-border-color) !important;
  border-radius: 20px !important;
  padding: 40px 20px !important;
  background: var(--upload-box-bg) !important;
  color: var(--upload-box-text-color) !important;
  cursor: pointer !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

.cs-theme-shell .webinar-icon.green-icon,
.es-theme-shell .webinar-icon.green-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cs-theme-shell .webinar-dropdown-top.header-version,
.es-theme-shell .webinar-dropdown-top.header-version {
  cursor: default !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.cs-theme-shell .webinar-dropdown-top.header-version .header-icon,
.es-theme-shell .webinar-dropdown-top.header-version .header-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  padding: 8px 11px !important;
}

.cs-theme-shell .webinar-dropdown-top.header-version .create_ep_section,
.es-theme-shell .webinar-dropdown-top.header-version .create_ep_section {
  text-align: left !important;
}

.cs-theme-shell .webinar-footer-bottom,
.es-theme-shell .webinar-footer-bottom {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  margin-top: 20px !important;
}

/* _FormControls pins every textarea to --input-height; the bio needs a real
   multi-line box (it sits beside the profile-photo dropzone). */

.cs-theme-shell .speaker-bio-textarea,
.es-theme-shell .speaker-bio-textarea {
  height: auto !important;
  min-height: 120px;
  resize: vertical;
}

/* Dropzone fills the height of the Twitter + Bio stack next to it. */

.cs-theme-shell .speaker-photo-col,
.es-theme-shell .speaker-photo-col {
  display: flex;
  flex-direction: column;
}

.cs-theme-shell .speaker-photo-col .form-group,
.es-theme-shell .speaker-photo-col .form-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.cs-theme-shell .speaker-photo-col .webinar-upload-box,
.es-theme-shell .speaker-photo-col .webinar-upload-box {
  flex: 1 1 auto;
}

/* ---- CreateSpeaker only ---- */

.cs-theme-shell .podup-webinar-create {
  background: transparent !important;
}

.cs-theme-shell .webinar-icon.green-icon {
  border-radius: var(--icon-style-box-border-radius) !important;
  border: var(--icon-style-box-border) !important;
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
}

.cs-theme-shell .webinar-icon.green-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor !important;
}

.cs-theme-shell .webinar-plan-wrapper.webinar-type-wrapper.podup-speaker-role {
  grid-template-columns: repeat(4, 1fr);
}

.webinar-speakers-dropdown.role-permissions-preview button.webinar-dropdown-top {
  align-items: center;
}

.webinar-speakers-dropdown.role-permissions-preview .header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--icon-style-box-border-radius) !important;
  border: var(--icon-style-box-border) !important;
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
}

.webinar-speakers-dropdown.role-permissions-preview .header-icon svg {
  fill: currentColor !important;
  color: inherit !important;
  width: 16px;
  height: 16px;
  background: none;
}

.webinar-speakers-dropdown.role-permissions-preview button.webinar-dropdown-top .create_ep_section {
  margin: 0;
}

.webinar-speakers-dropdown.role-permissions-preview button.webinar-dropdown-top .create_ep_section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-md) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-text) !important;
}

/* ---- EditSpeaker only ---- */

.es-theme-shell .podup-webinar-create {
  padding-bottom: 60px;
}

.es-theme-shell .webinar-icon.green-icon {
  border-radius: var(--icon-style-box-border-radius) !important;
  border: var(--icon-style-box-border) !important;
  background: var(--icon-style-box-bg-color) !important;
  color: var(--icon-style-box-color) !important;
}

.es-theme-shell .webinar-icon.green-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor !important;
}

.es-theme-shell .upload-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.es-theme-shell .upload-preview img {
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}

.es-theme-shell .upload-preview-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.es-theme-shell .upload-preview-info span {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.es-theme-shell .upload-preview-remove {
  background: none;
  border: none;
  color: var(--color-error);
  font-size: var(--font-size-base);
  cursor: pointer;
  padding: 0;
  text-align: left;
  font-weight: var(--font-weight-medium);
}

.es-theme-shell .upload-preview-remove:hover {
  text-decoration: underline;
}

.es-theme-shell .webinar-upload-box {
  cursor: pointer;
}

.es-theme-shell .speakers-page-heading {
  margin-left: 8px;
}

.es-theme-shell .speakers-page-heading h2 {
  margin: 0;
  line-height: 1.2;
}

.es-theme-shell .speakers-page-subtitle {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  margin: 4px 0 0;
}

.webinar-listing-username img,
.speaker-avatar-wrapper img,
.speaker-avatar-inner img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid var(--color-surface);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: var(--color-surface-2);
  display: block;
}

.avatar-initials-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent-orange);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

.speaker-avatar-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.webinar-listing-username {
  display: flex;
  align-items: center;
  gap: 12px;
}

.speaker-count-badge {
  position: absolute;
  top: -8px;
  right: -12px;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  color: var(--badge-highlight-text-color, #FFF);
  width: 24px;
  height: 24px;
  border-radius: var(--badge-highlight-border-radius, 40px);
  background: var(--badge-highlight-bg-color, #B0842C);
  border: 1px solid var(--badge-highlight-border-color, #B0842C);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.speaker-listing-link {
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity 0.2s;
}

.speaker-listing-link:hover {
  opacity: 0.85;
}

.webinar-listing-username h3,
.speaker-listing-link h3 {
  font-size: calc(var(--font-size-xl) + 2px);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.webinar-listing-username p,
.speaker-listing-link p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
  line-height: 1.2;
}

/* Header sits close to the speakers card (no card background now) */

.sl-theme-shell .page_titlemn {
  padding-bottom: 0 !important;
  margin-bottom: 0;
}

.sl-theme-shell .whitecardbox {
  padding-top: 8px !important;
}

.webinar-speaker-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent-orange);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.speaker-add-btn.cw-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: 1.2 !important;
  border-radius: 10px !important;
  height: auto !important;
  min-height: 0 !important;
  white-space: nowrap;
  box-shadow: 0 4px 10px -2px rgba(23, 72, 108, 0.25) !important;
  margin-top: 22px;
}

.speaker-add-btn.cw-btn-primary svg {
  width: 16px;
  height: 16px;
}

.webinar-copy-link-btn,
.webinar-speakers-action .webinar-resend-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: 1.2 !important;
  color: var(--btn-secondary-dark-color) !important;
  background: var(--btn-secondary-bg-white) !important;
  border: var(--btn-secondary-border) !important;
  border-radius: 40px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  height: auto !important;
  min-height: 0 !important;
}

.webinar-copy-link-btn:hover,
.webinar-speakers-action .webinar-resend-btn:hover {
  background: var(--btn-secondary-bg-white) !important;
  color: var(--btn-secondary-dark-color) !important;
  box-shadow: var(--btn-secondary-dark-box-shadow) !important;
}

.webinar-copy-link-btn:active,
.webinar-speakers-action .webinar-resend-btn:active {
  transform: translateY(1px);
}

.webinar-copy-link-btn svg,
.webinar-speakers-action .webinar-resend-btn svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--btn-secondary-dark-color) !important;
}

.webinar-speakers-action .webinar-resend-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.webinar-speakers-action .webinar-speakers-btn {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s !important;
}

.webinar-speakers-action .webinar-speakers-btn:hover {
  background: var(--color-surface-2) !important;
  border-color: var(--color-dim) !important;
  color: var(--color-text) !important;
}

.webinar-speakers-action .webinar-speakers-btn svg {
  width: 18px;
  height: 18px;
}

.webinar-speakers-action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.speakers-page-heading {
  margin-left: 8px;
}

.speakers-page-heading h2 {
  margin: 0;
  line-height: 1.2;
}

.speakers-page-subtitle {
  color: var(--color-text-secondary);
  font-size: 13px;
  margin: 4px 0 0;
}

.role-permissions-preview .webinar-dropdown-top {
  cursor: pointer !important;
}

/* Toggle switches use the shared `w-toggle` classes in _WebinarBase.scss. */

body:has(.attendee-join-page) #ai-credit-badge {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* Banner background image (data-driven) */

.attendee-join-banner.has-image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Left banner — fixed background image with dark overlay */

.attendee-join-banner {
  background-image: url("https://storageapi.podup.com/production/778/files/files/OptimizedImage-704d034bd38015f8542ae37ef61601a0d49fc11d.webp");
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 40px 52px !important;
}

/* Footer ko content ke saath rakho, absolute nahi */

.attendee-join-banner > .attendee-join-footer,
.attendee-join-banner > p.attendee-join-footer {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  text-align: center !important;
  margin-top: 24px !important;
  padding-top: 0 !important;
  width: 100% !important;
}

.attendee-join-banner-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 460px !important;
}

.attendee-join-status {
  justify-content: center !important;
}

.attendee-join-meta-list {
  width: 100% !important;
}

.sws-precountdown {
  width: 100% !important;
}

.sws-speaker-card {
  width: 100% !important;
}

/* Remove navbar offset for speaker check-in page only */

.attendee-join-page {
  min-height: 100vh !important;
  grid-template-columns: minmax(auto, 945px) 1fr !important;
}

/* Right form panel - premium background */

.attendee-join-form-panel {
  background: linear-gradient(145deg, #0d1420 0%, #111827 50%, #0a1628 100%) !important;
}

.attendee-join-banner,
.attendee-join-form-panel {
  min-height: 100vh !important;
}

/* ── Form card: no outer box ── */

.attendee-join-form-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 40px 48px !important;
  max-width: 600px !important;
}

/* Logo */

.attendee-join-form-header img {
  height: 44px !important;
  margin-bottom: 24px !important;
  opacity: 1 !important;
}

/* Heading */

.attendee-join-form-header h2 {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.5px !important;
}

/* Subtitle */

.attendee-join-form-header p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 0 28px !important;
  line-height: 1.5 !important;
}

/* Labels */

.attendee-join-form label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 8px !important;
}

/* Inputs */

.attendee-join-form input[type=text],
.attendee-join-form input[type=email],
.attendee-join-form input[type=password] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  height: 50px !important;
  padding: 0 16px 0 44px !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.attendee-join-form input[type=text]:focus,
.attendee-join-form input[type=email]:focus {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: var(--color-primary) !important;
  outline: none !important;
}

/* Notice box */

.sws-notice {
  background: rgba(212, 160, 23, 0.08) !important;
  border: 1px solid rgba(212, 160, 23, 0.3) !important;
  border-radius: 12px !important;
}

/* Submit button */

.sws-submit {
  border-radius: 12px !important;
  height: 52px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* Footer text */

.sws-card-footer {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* Media release label */

.sws-media-label {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ---- Status / access badges ---- */

.sws-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sws-badge.is-live {
  background: var(--color-error);
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.5);
}

.sws-badge.is-scheduled {
  background: linear-gradient(95deg, var(--color-success) 0%, #2ecc71 100%);
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.4);
}

.sws-badge.is-completed,
.sws-badge.is-cancelled,
.sws-badge.is-default {
  background: var(--color-text-muted);
}

/* DRAFT badge — premium gold glow */

.sws-badge.is-draft {
  background: linear-gradient(135deg, #f5c842 0%, #d4960f 100%);
  color: #1a1200;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(212, 160, 23, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 210, 80, 0.4);
}

/* SPEAKER ACCESS badge — frosted glass */

.sws-badge--access {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
}

.sws-badge-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
  animation: pulse 1.2s infinite;
}

/* ---- Banner text ---- */

.attendee-join-desc {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 28px;
}

/* ---- Speaker info card ---- */

.sws-speaker-card {
  padding: 20px 0;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sws-speaker-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}

.sws-speaker-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.sws-speaker-name {
  color: #fff;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  text-align: left;
}

.sws-speaker-role {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  text-align: left;
}

/* ---- Form ---- */

.sws-req {
  color: var(--color-error);
}

.sws-input-wrap {
  position: relative;
}

.sws-input-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}

.sws-input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s;
}

.sws-input::-moz-placeholder {
  color: var(--color-text-muted);
}

.sws-input::placeholder {
  color: var(--color-text-muted);
}

.sws-input:focus {
  border-color: var(--color-primary);
}

.sws-input.is-error {
  border-color: var(--color-error);
}

.sws-error {
  color: var(--color-error);
  font-size: 11px;
  margin-top: 4px;
  display: block;
}

.sws-error--block {
  margin-bottom: 14px;
}

/* ---- Notice box ---- */

.sws-notice {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-primary);
}

.sws-notice svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.sws-notice-text {
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 18px;
}

/* ---- Media release ---- */

.sws-media-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.sws-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

.sws-media-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  line-height: 20px;
}

.sws-media-link {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

/* ---- Submit ---- */

.sws-submit-wrap {
  margin-top: 22px;
}

.sws-submit {
  width: 100%;
  padding: 13px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  box-shadow: var(--btn-primary-shadow);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, box-shadow 0.15s;
}

.sws-submit:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
  box-shadow: var(--btn-primary-shadow-hover);
}

.sws-submit:disabled {
  background: var(--color-text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

.sws-precountdown {
  margin-bottom: 24px;
}

/* ---- Card footer ---- */

.sws-card-footer {
  margin-top: 32px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
}

@media (max-width: 991px) {
  .speaker-left {
    display: none !important;
  }

  .speaker-right {
    padding: 40px 24px !important;
    min-height: 100vh !important;
    background: var(--color-bg) !important;
  }

  .speaker-right-inner {
    max-width: 100% !important;
  }

  .speaker-right h2,
  .speaker-right p {
    color: var(--color-text) !important;
  }

  .speaker-right label {
    color: var(--color-text-secondary) !important;
  }

  /* New attendee-join-page responsive layout */

  .attendee-join-page {
    grid-template-columns: 1fr !important;
  }

  .attendee-join-banner {
    min-height: auto !important;
    padding: 40px 20px !important;
    aspect-ratio: auto !important;
  }

  .attendee-join-form-panel {
    min-height: auto !important;
    padding: 40px 20px !important;
  }

  .attendee-join-form-card {
    padding: 32px 24px !important;
    max-width: 100% !important;
  }
}

.email-tag-input-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-dim);
  border-radius: 8px;
  background: var(--color-surface);
  min-height: 120px;
  align-content: flex-start;
  cursor: text;
  transition: border-color 0.2s;
}

.email-tag-input-container:focus-within {
  border-color: var(--color-primary);
}

.email-chip {
  display: flex;
  align-items: center;
  background: var(--color-surface-2);
  color: var(--color-text);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid var(--color-border);
}

.email-chip .remove-btn {
  margin-left: 8px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.email-chip .remove-btn:hover {
  color: var(--color-error);
}

.email-tag-input {
  border: none;
  outline: none;
  flex-grow: 1;
  padding: 4px;
  font-size: 14px;
  min-width: 150px;
}

.custom-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.bulk-actions-bar {
  background: var(--color-surface-2);
  padding: 15px 20px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.invite_attendee_card {
  margin-bottom: 30px;
}

.show_search {
  max-width: 500px;
  margin-bottom: 25px;
}

.show_search.flxrow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.show_search .inputWrap {
  flex: 1;
}

.show_search .input_text {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 15px;
  font-weight: 500;
  padding: 0 20px;
  outline: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  color: var(--color-text);
}

.show_search .input_text::-moz-placeholder {
  color: var(--color-text-muted);
}

.show_search .input_text::placeholder {
  color: var(--color-text-muted);
}

.show_search .input_text:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(23, 72, 108, 0.1);
}

.show_search .btnWrap {
  margin-left: 0;
}

.show_search .submitbtn {
  height: 46px;
  padding: 0 30px;
  border-radius: 12px;
  font-weight: var(--font-weight-medium);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  transition: all 0.2s;
}

.show_search .submitbtn:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.studio_table th.sorting {
  cursor: pointer;
}

.studio_table th.sorting:hover {
  background: var(--color-surface-2);
}

/* Uploaded CSV row inside the bulk-import drop box */

.wb-csv-file {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
}

.wb-csv-file-icon {
  font-size: 20px;
  color: var(--color-primary);
}

.wb-csv-file-name {
  color: var(--color-text);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@keyframes wn-blink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

/* ---------- Page ---------- */

.wn-page {
  min-height: 100vh;
  background: var(--color-bg);
  padding: 32px 20px 48px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-text);
}

.wn-container {
  width: 100%;
  max-width: 720px;
}

/* ---------- Top bar ---------- */

.wn-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 18px;
}

.wn-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wn-brand-logo {
  width: 42px;
  height: 42px;
  overflow: hidden;
}

.wn-brand-logo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.wn-brand-name {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin: 0;
}

.wn-brand-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
  word-break: break-word;
}

/* ---------- Card ---------- */

.wn-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ---------- Hero ---------- */

.wn-hero {
  padding: 32px 36px 26px;
  border-bottom: 1px solid var(--color-border);
}

.wn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  border: 1px solid transparent;
}

.wn-pill--live {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error-border);
}

.wn-pill--wait {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning-border);
}

.wn-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: wn-blink 1.8s ease-in-out infinite;
}

.wn-headline {
  font-size: 26px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 8px;
}

.wn-sub {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
  max-width: 540px;
}

/* ---------- Meta row ---------- */

.wn-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.wn-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.wn-meta-sep {
  width: 1px;
  height: 14px;
  background: var(--color-border);
}

/* ---------- Body ---------- */

.wn-body {
  padding: 26px 36px 32px;
}

.wn-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.wn-section-title {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.wn-section-meta {
  font-size: 12px;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Countdown ---------- */

.wn-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.wn-countdown--c2 {
  grid-template-columns: repeat(2, 1fr);
}

.wn-countdown--c3 {
  grid-template-columns: repeat(3, 1fr);
}

.wn-cd-cell {
  background: var(--color-surface-2);
  border-radius: 14px;
  padding: 20px 12px;
  text-align: center;
  border: 1px solid var(--color-border);
}

.wn-cd-num {
  font-size: 34px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.wn-cd-num--live {
  color: var(--color-error);
}

.wn-cd-unit {
  font-size: 10px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--font-weight-medium);
  margin-top: 8px;
}

/* ---------- Progress ---------- */

.wn-progress {
  margin-bottom: 24px;
}

.wn-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.wn-progress-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wn-progress-pct {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.wn-progress-track {
  height: 6px;
  background: var(--color-surface-2);
  border-radius: 999px;
  overflow: hidden;
}

.wn-progress-fill {
  height: 100%;
  width: var(--wn-pct, 0%);
  background: var(--color-warning);
  border-radius: 999px;
  transition: width 0.6s ease;
}

/* ---------- Info card / checklist ---------- */

.wn-info-card {
  border-radius: 14px;
  margin-bottom: 20px;
}

.wn-info-title {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wn-cl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.wn-cl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--color-text);
}

.wn-cl-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

/* ---------- Alert ---------- */

.wn-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.wn-alert--warn {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning);
}

/* ---------- Actions ---------- */

.wn-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.wn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

.wn-btn:hover {
  background: var(--color-surface-2);
}

.wn-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.wn-btn-ghost:hover {
  background: var(--color-surface-2);
}

.wn-waiting {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--font-weight-medium);
}

.wn-waiting--live {
  color: var(--color-error);
}

.wn-waiting--wait {
  color: var(--color-warning);
}

.wn-waiting-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: wn-blink 1.4s ease-in-out infinite;
}

/* ---------- Join block ---------- */

.wn-join-block {
  margin-bottom: 20px;
}

.wn-join-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wn-join-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 8px 10px;
}

.wn-join-link {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wn-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  flex-shrink: 0;
}

.wn-copy-btn:hover {
  background: var(--color-surface-2);
}

.wn-join-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 8px;
  line-height: 1.5;
}

/* ---------- Calendar dropdown ---------- */

.wn-cal-wrap {
  position: relative;
}

.wn-cal-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
  padding: 6px;
}

.wn-cal-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}

.wn-cal-menu-item:hover {
  background: var(--color-surface-2);
}

/* ---------- Footer ---------- */

.wn-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.wn-footer-links {
  display: flex;
  gap: 16px;
}

.wn-footer-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

/* ---------- Icon color helpers ---------- */

@media (max-width: 640px) {
  .wn-hero {
    padding: 26px 22px 22px;
  }

  .wn-body {
    padding: 22px 22px 26px;
  }

  .wn-headline {
    font-size: 22px;
  }

  .wn-sub {
    font-size: 14px;
  }

  .wn-cd-num {
    font-size: 26px;
  }

  .wn-cd-cell {
    padding: 16px 8px;
  }

  .wn-cl-grid {
    grid-template-columns: 1fr;
  }

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

  .wn-actions > * {
    width: 100%;
    justify-content: center;
  }

  .wn-waiting {
    margin-left: 0;
    justify-content: center;
    padding-top: 2px;
  }

  .wn-meta-row {
    gap: 10px;
  }

  .wn-meta-sep {
    display: none;
  }

  .wn-topbar {
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Webinar Ending Soon modal — fully token-driven. WebinarLiveKitRoom sets
   body[data-theme="dark"] while mounted, so these resolve to the dark palette. */

.wea-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.wea-modal {
  background: var(--color-surface);
  color: var(--color-text);
  padding: 30px;
  border-radius: 15px;
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  text-align: center;
  max-width: 400px;
  width: 90%;
  position: relative;
  animation: slideUp 0.3s ease;
}

.wea-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0 4px;
  font-weight: 400;
}

.wea-icon {
  margin-bottom: 20px;
  color: var(--color-error);
}

.wea-icon svg {
  margin: 0 auto;
}

.wea-title {
  margin: 0 0 10px;
  color: var(--color-text);
}

.wea-text {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}

.wea-text strong {
  color: var(--color-text);
}

.wea-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 25px;
}

.wea-btn {
  padding: 12px;
  border-radius: 8px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.wea-btn-extend {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  box-shadow: var(--btn-primary-shadow);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wea-btn-end {
  background: var(--color-surface-2);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

/* Host pre-join RTMP gate.

   The markup reuses the shared `.adm-*` modal system (see
   _AttendeeDetailModal.scss) — shell, header, sections, badges and buttons all
   come from there. Only destination-row specifics live here.

   Palette comes from themes/dark-theme.css: WebinarLiveKitRoom sets
   body[data-theme="dark"] while mounted, so every --color-* / --btn-* token
   resolves exactly as it does on a themed page. */

.wsp-overlay {
  z-index: 10060;
  /* above .adm-overlay — this one gates the room */
}

.wsp-modal {
  max-width: 520px;
}

/* Lede sits under the title in the header, outside the .adm-* vocabulary. */

.wsp-lede {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* Status is carried by the section's left accent bar, matching .adm-section-title. */

.wsp-section.invalid .adm-section-title::before {
  background: var(--color-error);
}

.wsp-section.warning .adm-section-title::before {
  background: var(--color-warning);
}

.wsp-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wsp-row-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wsp-row-msg {
  display: block;
  margin: 8px 0 12px;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.45;
  color: var(--color-text-secondary);
}

/* Per-destination action is a link to Integrations, not a button. */

.wsp-row-link {
  display: inline-block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-light);
  text-decoration: none;
}

.wsp-row-link:hover,
.wsp-row-link:focus {
  color: var(--color-primary-light);
  text-decoration: underline;
}

/* `.adm-btn-primary` is hard-wired to --color-success (teal). This is the
   webinar's primary action, so it takes the brand gold button tokens instead —
   the same --btn-primary-* set every other primary button uses. */

.wsp-btn-join.adm-btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: transparent;
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-primary-shadow);
  font-weight: var(--btn-font-weight);
}

.wsp-btn-join.adm-btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-color);
  box-shadow: var(--btn-primary-shadow-hover);
}

body:has(.wle-page) #ai-credit-badge {
  display: none !important;
}

.wle-home-btn {
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.wle-home-btn:hover {
  background: var(--btn-primary-bg-hover) !important;
  box-shadow: var(--btn-primary-shadow-hover) !important;
  transform: translateY(-1px);
}

/* FilePreviewModal — colors from global --color-* tokens (auto light/dark). */

/*
 * Backdrop padding = 20px all sides → 40px consumed each axis.
 * Header height ≈ 53px, so image body height = 100vh - 40px - 53px.
 */

.cw-preview-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.72);
}

.cw-preview-modal-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  background: var(--modal-bg);
  color: var(--modal-text);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  /* Images: fixed to max bounds so body gets a concrete height.
     Docs: auto-sized by iframe content. */
}

.cw-preview-modal-content.is-image {
  width: calc(100vw - 40px);
  height: calc(100vh - 40px);
}

.cw-preview-modal-content.is-doc {
  width: auto;
  height: auto;
  min-width: 480px;
}

.cw-preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 14px 18px;
  background: var(--modal-bg);
  border-bottom: 1px solid var(--modal-close-bg);
}

.cw-preview-modal-title {
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
  font-size: 14px;
  color: var(--modal-title);
}

.cw-preview-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cw-preview-modal-open {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  color: var(--modal-text);
  border: 1px solid var(--modal-close-bg);
}

.cw-preview-modal-open:hover,
.cw-preview-modal-open:focus {
  color: var(--modal-text);
  border-color: var(--modal-close-bg);
  text-decoration: none;
}

.cw-preview-modal-close {
  line-height: 1;
  font-size: 20px;
  cursor: pointer;
}

.cw-preview-modal-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-image .cw-preview-modal-body {
  padding: 12px 20px;
}

.cw-preview-modal-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.cw-preview-modal-frame {
  display: block;
  width: 80vw;
  height: 75vh;
  border: none;
}