@charset "UTF-8";
@keyframes MoveUpInitial {
  to {
    transform: translateY(-105%);
  }
}
@keyframes MoveUpEnd {
  from {
    transform: translateY(105%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes scoopAnimation {
  0% {
    background-position: -12px -12px, 0% 0%, 0 0;
  }
  100% {
    background-position: -12px -12px, 200% 0%, 0 0;
  }
}
@keyframes animationBg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Category Animation on Load */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes section2BgAnim {
  0% {
    background-position: 85% 30%, 15% 90%, center;
  }
  33% {
    background-position: 60% 10%, 40% 70%, center;
  }
  66% {
    background-position: 10% 40%, 90% 20%, center;
  }
  100% {
    background-position: 85% 30%, 15% 90%, center;
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}
@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes borderGrowShadow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 109, 79, 0.25);
  }
  50% {
    box-shadow: 0 0 0 24px rgba(255, 109, 79, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 109, 79, 0);
  }
}
@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  40% {
    transform: translateY(-6px);
    opacity: 1;
  }
}
/* ═══════════════════════════════════════════════════════════════
   Checkout v6 — modal-based ticket purchase flow.

   All selectors prefixed `.ck-` to avoid colliding with the legacy
   tmv2 / rc-* / pmv4 / pmv5 work. Lives at global scope (not nested
   under any wrapper) because the modal is injected at <body> level.

   Phase 1 scope: shell + header + identity strip + summary card +
   CTA button. Step body content + interactions land in later phases.
   ═══════════════════════════════════════════════════════════════ */
/* ── Backdrop + lock the page behind the modal ─────────────── */
.ck-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 15, 35, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}

/* Scroll-lock is applied by JS (_lockBodyScroll/_unlockBodyScroll)
 * via inline `position: fixed; top: -<scrollY>px` on <body>.
 * This is the only technique that reliably blocks desktop wheel
 * AND iOS touch-momentum scrolling. The class is kept solely as
 * a hook for other modal-aware styles. */
body.ck-modal-open {
  /* Defensive — iOS Safari sometimes still leaks touch when
     * position:fixed alone is set. touch-action stops that. */
  touch-action: none;
}

/* Phase 23 — Free-cart confirmation notice (replaces the card UI
 * on Step 4 when the cart total is 0). */
.ck-free-cart-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  margin: 8px 0 16px;
  border: 1.5px solid #bbf7d0;
  background: #f0fdf4;
  border-radius: 12px;
  color: #166534;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.ck-free-cart-notice .ck-free-cart-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ck-free-cart-notice .ck-free-cart-text {
  flex: 1;
}

/* Phase 42 — `.ck-pay-processing-notice` SCSS removed. The notice
 * is now rendered with inline Tailwind utilities (amber-50 box) by
 * _showPayProcessingNotice() in checkout.js, and the spinner is the
 * global `#ripLoader` overlay shown via show_loader(). */
/* ── Inner card ─────────────────────────────────────────────── */
/* Phase 33 — inner is a flex column with max-height 85vh so only the
 * .ck-modal-body scrolls (header + identity stay pinned at top). The
 * old per-card padding is moved into .ck-modal-chrome + .ck-modal-body
 * so each section can independently control its own padding. */
.ck-modal-inner {
  width: 100%;
  max-width: 976px;
  margin: auto;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 4px 30px 5px rgba(0, 0, 0, 0.08);
  padding: 0;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
@media (max-width: 640px) {
  .ck-modal-inner {
    border-radius: 14px;
    max-height: 92vh;
  }
}

.ck-modal-chrome {
  flex-shrink: 0;
}

/* Phase 45 — Step 5 ("Purchase Confirmed") narrower modal modifier.
 * The shell adds this class when the controller passes
 * shell_modifier=ck-modal-inner--narrow. Shrinks the inner card
 * from the wide shopping layout (976px) used by Steps 1–4 down to
 * a tighter receipt-style width. */
.ck-modal-inner--narrow {
  max-width: 640px;
}

.ck-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px 24px;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
  .ck-modal-body {
    padding: 24px 28px 28px;
  }
}
@media (max-width: 640px) {
  .ck-modal-body {
    padding: 16px 18px 18px;
  }
}

.ck-summary-card .gradient-divider {
  margin: 26px 0 20px 0;
  border: 0;
}

.ck-summary-gradient-divider {
  margin: 12px 0;
  border: 0;
  height: 1px;
}

.ck-summary-gradient-divider[hidden] {
  display: none !important;
}

.ck-date-card.is-selected {
  border-color: var(--color-coral, #ff6d4f);
  background-color: var(--color-coral-light-hover, rgb(254, 246, 243));
}
.ck-date-card.is-hidden {
  display: none;
}

/* Brand indigo for the "N left" metric — matches legacy .rc-tickets-left
 * and stays in sync if the brand purple is retuned in app.scss. */
.ck-date-list.is-show-all .ck-date-card.is-hidden {
  display: flex;
}

/* Show-all chevron flips when the list is expanded. JS toggles
 * .is-open on the button alongside .is-show-all on #ck-date-list. */
.ck-show-all-btn .ck-show-all-caret {
  transition: transform 0.25s ease;
}

.ck-show-all-btn.is-open .ck-show-all-caret {
  transform: rotate(180deg);
}

.ck-ticket-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ck-addons-section {
  margin-top: 24px;
}

.ck-addons-heading {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: #111;
  margin: 0 0 12px;
}

.ck-ticket-card {
  --ck-band-color: var(--color-coral, #ff6d4f);
  --ck-notch-r: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 12px 26px 11px 12px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-right: none;
  border-radius: 12px;
  overflow: visible;
  transition: border-color 0.2s;
  background-image: url("../../public/themes/advanced/images/ticket-card.png");
  background-size: contain;
  background-position: right;
  background-repeat: repeat-y;
}

.ck-ticket-band {
  position: absolute;
  left: 12px;
  top: 12px;
  height: 44px;
  width: 8px;
  border-radius: 25px;
  background: var(--ck-band-color);
}

/* Kind-driven band color. Defined AFTER `.ck-ticket-card` so the
 * per-kind `--ck-band-color` wins the cascade (equal specificity →
 * later wins). Used by `.ck-ticket-band` for the small pill next
 * to the ticket name — NOT the card outline. */
.ck-ticket-card--free {
  --ck-band-color: var(--color-success, #34a853);
}

.ck-ticket-card--paid {
  --ck-band-color: #f59e0b;
}

.ck-ticket-card--donation {
  --ck-band-color: #1877f2;
}

.ck-ticket-card--addon {
  --ck-band-color: #f59e0b;
}

.ck-ticket-card[data-has-qty="1"] {
  border-color: #ff6d4f;
  background-image: url("../../public/themes/advanced/images/ticket-card-active.png");
  background-color: #fef6f3;
}

.ck-ticket-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ck-ticket-id {
  display: flex;
  flex-direction: column;
  padding-left: 14px;
  flex: 1;
  gap: 6px;
  min-width: 0;
}

.ck-ticket-name {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  margin: 0;
}

.ck-ticket-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ck-ticket-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background: var(--ck-band-color);
}

.ck-ticket-pill--free {
  background: var(--color-success, #34a853);
}

.ck-ticket-pill--paid {
  background: #ff6d4f;
}

.ck-ticket-pill--donation {
  background: #1877f2;
}

.ck-ticket-pill--addon {
  background: #ff6d4f;
}

.ck-ticket-money {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
  text-align: right;
}

.ck-ticket-price {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

.ck-ticket-price--donation {
  font-size: 14px;
  font-weight: 500;
  color: black;
}

.ck-ticket-left {
  font-size: 14px;
  font-weight: 500;
  color: #696969;
}
.ck-ticket-left strong {
  color: #696969;
  font-weight: 500;
}

.ck-ticket-end-sale {
  font-size: 12px;
  color: #696969;
  text-wrap: nowrap;
}
.ck-ticket-end-sale strong {
  color: #111;
  font-weight: 500;
}

/* ── Card row 2 — bottom: description vs actions ──────── */
.ck-ticket-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ck-ticket-desc {
  font-size: 12px;
  color: #343434;
  font-style: italic;
  margin: 0;
  flex: 1;
  min-width: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.ck-ticket-description {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.ck-ticket-description-info {
  flex-shrink: 0;
}

.ck-ticket-description-info:hover,
.ck-ticket-description-info:focus-within {
  z-index: 60;
}

.ck-ticket-description-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid #333;
  border-radius: 50%;
  background: #333;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.ck-ticket-description-tooltip {
  position: absolute;
  right: 0;
  bottom: 100%;
  z-index: 50;
  width: min(280px, 100%);
  max-height: 40vh;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 6px;
  background: #333;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  white-space: pre-line;
  overflow-wrap: anywhere;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ck-ticket-description-info:hover .ck-ticket-description-tooltip,
.ck-ticket-description-info:focus-within .ck-ticket-description-tooltip,
.ck-ticket-description-button[aria-expanded=true] + .ck-ticket-description-tooltip {
  display: block;
  visibility: visible;
  opacity: 1;
}

.ck-ticket-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Trash (RED square) — sits to the LEFT of the stepper.
 * Phase 49 — switched from coral to pure red (#EF4444) per
 * reference; the disabled (inactive-card) state shows a faded
 * light-pink wash so the button stays visible but reads as muted. */
.ck-ticket-delete {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 4px;
  background: #fee2e2;
  color: #fff;
  cursor: not-allowed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  pointer-events: none;
}
.ck-ticket-delete img {
  filter: brightness(0) invert(1);
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

.ck-ticket-card[data-has-qty="1"] .ck-ticket-delete {
  background: var(--color-danger);
  cursor: pointer;
  pointer-events: auto;
}
.ck-ticket-card[data-has-qty="1"] .ck-ticket-delete img {
  opacity: 1;
}
.ck-ticket-card[data-has-qty="1"] .ck-ticket-delete:hover {
  background: var(--color-danger);
}

/* Stepper — INDIGO solid circular buttons. Disabled state shows
 * a light-indigo wash (not full opacity drop) so it stays visible
 * the same way the reference does. */
.ck-ticket-stepper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ck-stepper-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9999px;
  background: var(--color-indigo, #7b7ee7);
  color: #fff;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, background-color 0.15s, filter 0.15s;
}
.ck-stepper-btn:hover:not(:disabled) {
  filter: brightness(1.06);
}
.ck-stepper-btn:disabled {
  background: var(--color-indigo-light, #e7e8fb);
  color: #fff;
  cursor: not-allowed;
}

.ck-stepper-value {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  color: #111;
  display: inline-block;
}

/* Ticket count translate-Y bump when the +/− buttons change the quantity.
   The number slides up (increase) or down (decrease) while fading in.
   Retriggered from JS by removing + re-adding the class (with a reflow). */
@keyframes ck-qty-bump-up {
  0% {
    transform: translateY(-70%);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes ck-qty-bump-down {
  0% {
    transform: translateY(70%);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.ck-stepper-value.ck-qty-anim-up {
  animation: ck-qty-bump-up 0.22s ease-out;
}

.ck-stepper-value.ck-qty-anim-down {
  animation: ck-qty-bump-down 0.22s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ck-stepper-value.ck-qty-anim-up,
  .ck-stepper-value.ck-qty-anim-down {
    animation: none;
  }
}
.ck-ticket-group-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Donation amount input */
.ck-donation-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 10px;
}
.ck-donation-input .ck-donation-currency {
  font-size: 14px;
  font-weight: 500;
  color: black;
}
.ck-donation-input input {
  width: 90px;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  color: #111;
}
.ck-donation-input input::placeholder {
  font-weight: 400;
  color: #9ca3af;
}
.ck-donation-input input {
  /* Hide native number-input spinner arrows.
   * Scoped to .ck-donation-input so other number inputs
   * across the app are untouched. */
}
.ck-donation-input input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.ck-donation-input input[type=number]::-webkit-outer-spin-button, .ck-donation-input input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.ck-summary-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ck-summary-empty {
  list-style: none;
  color: black;
  font-size: 14px;
  font-style: italic;
  padding: 4px 0;
}

.ck-summary-row {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0 4px 12px;
  font-size: 14px;
  color: #111;
  position: relative;
  /* Small colored bar on the left — color comes via inline
     * `style="--ck-row-band:<color>"` set by the JS renderer. */
}
.ck-summary-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0px;
  width: 4px;
  border-radius: 6px;
  background: var(--ck-row-band, var(--color-coral, #ff6d4f));
}
.ck-summary-row-name {
  color: #111;
}
.ck-summary-row-amount {
  font-weight: 600;
  color: #111;
  flex-shrink: 0;
}

.ck-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: #696969;
  padding: 2px 0;
}
.ck-summary-line-amount {
  font-weight: 600;
  color: #111;
}

.ck-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0 2px;
}
.ck-summary-total-label {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}
.ck-summary-total-amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-coral, #ff6d4f);
}

/* Step 4 only — "N tickets • buyer@email.com" line inside the cart
 * card, beneath the items list. */
.ck-summary-meta {
  font-size: 14px;
  color: #696969;
  margin: 14px 0 0;
  padding: 0;
}

/* Phase 43 — both elements use Tailwind utilities (`flex`, etc.)
 * inline on the view, which beats the browser-default
 * `[hidden] { display: none }` rule and was leaking the SSL note
 * onto Step 2 / Step 3. Force-hide via attribute selector. */
#ck-summary-ssl[hidden],
#ck-summary-meta[hidden] {
  display: none !important;
}

/* Phase 44 — chevron-down (rotated -90°) lives inside the CTA so it
 * can be a real <img> rather than a CSS glyph. Hide by default; show
 * only when the CTA host carries `.is-step3` (the "Your Details"
 * step). Matches both the original <img> and the inlined <svg> the
 * site-wide svg-icon inliner produces from it. */
#ck-summary-cta .ck-cta-chevron {
  display: none;
}

#ck-summary-cta.is-step3 .ck-cta-chevron {
  display: inline-block;
}

/* The standalone close X sits relative to the modal body content
 * since the standard header is hidden on this view. Keep its z-index
 * above the lock badge so it's always tappable. */
.ck-gate-close {
  z-index: 2;
}

/* Strip form-card chrome from the form (same trick used in Step 3
 * + Step 4 forms — `fields-section` only contributes spacing). */
.ck-gate-form {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ck-step3-form {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ck-step3 .iti {
  width: 100%;
}

.ck-step3 .iti input.form-input {
  width: 100%;
  padding: 11.5px 14px;
}

.ck-sms-delivery {
  border: 1px solid #ffd0c2;
  border-radius: 8px;
  background: #fffaf8;
  padding: 14px 16px;
  margin: 0 0 22px;
  font-size: 13px;
  color: #292929;
}

.ck-sms-delivery__channels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 600;
}

.ck-sms-delivery__badge {
  padding: 2px 9px;
  border: 1px solid #e7e2df;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
}

.ck-sms-delivery__choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 11px;
  cursor: pointer;
  font-weight: 400;
}

.ck-sms-delivery__choice input {
  margin: 3px 0 0;
  flex-shrink: 0;
}

.ck-sms-delivery__note {
  margin: 7px 0 0;
  color: #696969;
  font-size: 12px;
}

.ck-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-self: stretch;
  margin-bottom: 30px;
}
@media (min-width: 640px) {
  .ck-field-row {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 650px) {
  .ck-field-row {
    margin-bottom: 20px;
  }
}
.ck-field-row .field-group:not(:last-child) {
  margin-bottom: 0;
}

/* Email icon adornment */
.ck-input-icon-wrap {
  position: relative;
  display: block;
}

.ck-input-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.ck-select-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px !important;
  background-image: none;
  box-shadow: none !important;
}

/* Helper text under an input — matches the muted style used in the
 * Figma reference ("Tickets will be sent to this email"). */
.ck-field-helper {
  font-size: 14px;
  color: #696969;
  margin: 6px 0 0;
}

/* ── Step 4 — Payment (Phase 35) ─────────────────────────── */
.ck-step4-form {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ck-stripe-field {
  min-height: 42px;
  padding: 11.5px 14px !important;
  display: flex;
  align-items: center;
  background: #fff;
  cursor: text;
}
.ck-stripe-field > * {
  width: 100%;
}
.ck-stripe-field.StripeElement--focus {
  border-color: var(--color-input-focus, #ff6d4f) !important;
  outline: none;
}
.ck-stripe-field.StripeElement--invalid {
  border-color: var(--color-danger, #dc2626) !important;
}

.ck-input.is-invalid {
  border-color: var(--color-danger);
}

.ck-stripe-field {
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ck-stripe-field.StripeElement--focus {
  border-color: var(--color-coral, #ff6d4f);
}
.ck-stripe-field.StripeElement--invalid {
  border-color: var(--color-danger);
}

.ck-summary-cta.is-busy {
  opacity: 0.85;
  cursor: wait;
}

/* ── Phase 10 polish ──────────────────────────────────────── */
/* .ck-ticket-meta / .ck-ticket-meta-item — Phase 28 converted to
   Tailwind utility classes inline on _step2_tickets.php. */
.ck-ticket-required-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #fee2e2;
  color: var(--color-danger);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.ck-ticket-card.is-missing-required {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
  background: #fef2f2;
}

.ck-inline-error {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  color: var(--color-danger);
  font-size: 14px;
  font-weight: 400;
}

.ck-seatsio-chart {
  position: relative;
  width: 100%;
  height: 418px;
  min-height: 418px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  overflow: hidden;
}
@media (max-width: 640px) {
  .ck-seatsio-chart {
    height: 418px;
  }
}

.ck-seatsio-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: -418px;
  height: 418px;
  color: #6b7280;
  font-weight: 600;
  pointer-events: none;
}

.ck-seatsio-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid #e5e7eb;
  border-top-color: var(--color-coral, #ff6d4f);
  border-radius: 50%;
  animation: ckSpin 0.8s linear infinite;
}

@keyframes ckSpin {
  to {
    transform: rotate(360deg);
  }
}
.ck-promo-feedback {
  margin: 6px 0 0;
  font-size: 14px;
}
.ck-promo-feedback.is-err {
  color: var(--color-danger);
}
.ck-promo-feedback.is-ok {
  color: var(--color-success);
}

.ck-summary-divider {
  height: 1px;
  margin: 4px 0 6px;
  background: linear-gradient(90deg, transparent 0%, #ff7f6e 30%, #f97316 70%, transparent 100%);
}

.spinner-box {
  position: relative;
  width: 180px;
  height: 180px;
}

.spinner-bar {
  position: absolute;
  width: 41.24px;
  height: 2px;
  border-radius: 4px;
  left: 20.2px;
  top: 99px;
  transform-origin: 79.8px 50%;
}

.dark-pipe {
  background: #4c5863;
}

.blue-pipe {
  background: var(--color-indigo);
}

.pink-pipe {
  background: var(--color-coral);
}

/* ── DARK keyframes ─────────────────────────────────── */
@keyframes d1 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.672, 0.13, 0.833, 1);
    transform: rotate(450deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes d2 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.672, 0.13, 0.833, 1);
    transform: rotate(390deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes d3 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.672, 0.065, 0.833, 1);
    transform: rotate(330deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes d4 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.672, 0.043, 0.833, 1);
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes d5 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.672, 0.032, 0.833, 1);
    transform: rotate(210deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes d6 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.672, 0.026, 0.833, 1);
    transform: rotate(150deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
/* ── BLUE keyframes ─────────────────────────────────── */
@keyframes b1 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.449, 0.061, 0.833, 1);
    transform: rotate(450deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes b2 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.449, 0.061, 0.833, 1);
    transform: rotate(390deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes b3 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.449, 0.031, 0.833, 1);
    transform: rotate(330deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes b4 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.449, 0.02, 0.833, 1);
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes b5 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.449, 0.015, 0.833, 1);
    transform: rotate(210deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes b6 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.449, 0.012, 0.833, 1);
    transform: rotate(150deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
/* ── PINK keyframes ─────────────────────────────────── */
@keyframes p1 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.757, 0.294, 0.833, 1);
    transform: rotate(450deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes p2 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.757, 0.294, 0.833, 1);
    transform: rotate(390deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes p3 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.757, 0.147, 0.833, 1);
    transform: rotate(330deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes p4 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.757, 0.098, 0.833, 1);
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes p5 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.757, 0.073, 0.833, 1);
    transform: rotate(210deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
@keyframes p6 {
  0% {
    animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1);
    transform: rotate(90deg);
  }
  52.11% {
    animation-timing-function: cubic-bezier(0.757, 0.059, 0.833, 1);
    transform: rotate(150deg);
  }
  100% {
    transform: rotate(450deg);
  }
}
/* ── Assign animations (duration = 71/24 = 2.9583s) ── */
.d1 {
  animation: d1 2.9583s infinite;
}

.d2 {
  animation: d2 2.9583s infinite;
}

.d3 {
  animation: d3 2.9583s infinite;
}

.d4 {
  animation: d4 2.9583s infinite;
}

.d5 {
  animation: d5 2.9583s infinite;
}

.d6 {
  animation: d6 2.9583s infinite;
}

.b1 {
  animation: b1 2.9583s infinite;
}

.b2 {
  animation: b2 2.9583s infinite;
}

.b3 {
  animation: b3 2.9583s infinite;
}

.b4 {
  animation: b4 2.9583s infinite;
}

.b5 {
  animation: b5 2.9583s infinite;
}

.b6 {
  animation: b6 2.9583s infinite;
}

.p1 {
  animation: p1 2.9583s infinite;
}

.p2 {
  animation: p2 2.9583s infinite;
}

.p3 {
  animation: p3 2.9583s infinite;
}

.p4 {
  animation: p4 2.9583s infinite;
}

.p5 {
  animation: p5 2.9583s infinite;
}

.p6 {
  animation: p6 2.9583s infinite;
}

.scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem 2rem;
  user-select: none;
}

.anim-wrap {
  position: relative;
  width: 200px;
  height: 200px;
}

/* Ripple rings */
.ring-rip {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(209, 209, 209, 0.85);
  animation: ripple 2s cubic-bezier(0.2, 0, 0.4, 1) infinite;
  opacity: 0;
}

.ring-rip:nth-child(1) {
  animation-delay: 0s;
}

.ring-rip:nth-child(2) {
  animation-delay: 0.32s;
}

.ring-rip:nth-child(3) {
  animation-delay: 0.65s;
}

.ring-rip:nth-child(4) {
  animation-delay: 0.97s;
}

.ring-rip:nth-child(5) {
  animation-delay: 1.29s;
}

.ring-rip:nth-child(6) {
  animation-delay: 1.61s;
}

@keyframes ripple {
  0% {
    transform: scale(0.18);
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
/* Magnifying glass orbit wrapper */
.glass-wrap {
  position: absolute;
  inset: 0;
  animation: orbit 3.95s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes orbit {
  0% {
    transform: translate(0px, -15px);
  }
  32% {
    transform: translate(15px, 0px);
  }
  50% {
    transform: translate(0px, 15px);
  }
  68% {
    transform: translate(-15px, 0px);
  }
  100% {
    transform: translate(0px, -15px);
  }
}
/* Magnifying glass centered inside wrapper */
.glass-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sidebar-wrapper {
  width: 195px;
  position: absolute;
  top: 0;
  left: 96px;
  border-radius: var(--radius-lrg);
  background: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  gap: 3px;
}
@media (max-width: 1024px) {
  .sidebar-wrapper {
    left: 24px;
  }
}
@media (max-width: 768px) {
  .sidebar-wrapper {
    /* Switch to horizontal scrollable top bar */
    position: static;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 16px;
    gap: 6px;
    border-radius: var(--radius-lrg);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 20px;
  }
  .sidebar-wrapper::-webkit-scrollbar {
    display: none;
  }
}
:lang(fr) .sidebar-wrapper, :lang(es) .sidebar-wrapper {
  width: 210px;
  left: 86px;
}
@media (max-width: 1024px) {
  :lang(fr) .sidebar-wrapper, :lang(es) .sidebar-wrapper {
    left: 20px;
  }
}
@media (max-width: 768px) {
  :lang(fr) .sidebar-wrapper, :lang(es) .sidebar-wrapper {
    width: auto;
  }
}
.sidebar-step {
  width: 100%;
  max-width: 156px;
  border: none;
  border-radius: var(--radius-lrg);
  cursor: pointer;
  text-align: left;
  transition: opacity 0.2s, border-color 0.2s;
}
.sidebar-step-active {
  padding: 12px 18px;
  background: linear-gradient(90deg, #ff6d4f 0%, #7b7ee7 100%);
}
.sidebar-step-active:hover {
  opacity: 0.9;
}
@media (max-width: 768px) {
  .sidebar-step-active {
    padding: 8px 14px;
  }
}
.sidebar-step-inactive {
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--color-disabled) !important;
}
@media (max-width: 768px) {
  .sidebar-step-inactive {
    padding: 8px 14px;
  }
}
.sidebar-step-inactive:hover {
  border-color: #b3b3b3 !important;
}
.sidebar-step-completed {
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--color-success) !important;
  font-weight: 500;
}
@media (max-width: 768px) {
  .sidebar-step-completed {
    padding: 8px 14px;
  }
}
.sidebar-step-incomplete {
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--color-danger) !important;
  font-weight: 500;
}
@media (max-width: 768px) {
  .sidebar-step-incomplete {
    padding: 8px 14px;
  }
}
@media (max-width: 768px) {
  .sidebar-step {
    width: auto;
    max-width: none;
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}
:lang(fr) .sidebar-step, :lang(es) .sidebar-step {
  max-width: 170px;
}
@media (max-width: 768px) {
  :lang(fr) .sidebar-step, :lang(es) .sidebar-step {
    max-width: 300px;
  }
}

.content-area {
  align-self: stretch;
  position: relative;
  z-index: 9;
  flex-shrink: 0;
  padding-bottom: 170px;
}
@media (max-width: 768px) {
  .content-area {
    padding-bottom: 80px;
  }
}

.main-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 30px;
  padding-left: 335px;
  padding-right: 6rem;
  padding-top: 0;
  text-align: left;
  font-size: 14px;
  color: #000;
}
@media (max-width: 1024px) {
  .main-content {
    padding-left: 240px;
    padding-right: 24px;
  }
}
@media (max-width: 768px) {
  .main-content {
    padding-left: 0;
    padding-right: 0;
    gap: 16px;
    align-items: stretch;
  }
}

.form-card {
  align-self: stretch;
  border-radius: var(--radius-lrg);
  background: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 42px 3rem;
}
@media (max-width: 768px) {
  .form-card {
    padding: 20px 20px 2rem;
  }
}
@media (max-width: 650px) {
  .form-card {
    padding: 18px 18px 1.5rem;
  }
}
.form-title {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 32px;
}
@media (max-width: 650px) {
  .form-title {
    gap: 0.875rem;
    margin-bottom: 2rem;
  }
}
.form-title .title-text {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #000000;
}
@media (max-width: 650px) {
  .form-title .title-text {
    font-size: 1.5rem;
  }
}
.form-title .title-brief {
  align-self: stretch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #474747;
  text-align: center;
}
.form-input {
  align-self: stretch;
  width: 100%;
  border-radius: 8px !important;
  background: #fff;
  border: 1px solid var(--color-dim-gray);
}
.form-input:where(:not(.iti__tel-input)) {
  padding: 11.5px 14px !important;
}
.form-input {
  color: black;
  font-size: 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder {
  color: var(--color-dim-gray);
  opacity: 0.7;
}
.form-input:hover:not(:focus) {
  border-color: black !important;
}
.form-input:focus {
  border-color: var(--color-input-focus) !important;
  outline: none;
}
.form-input.is-error {
  border-color: var(--color-danger) !important;
}
.form-textarea {
  align-self: stretch;
  width: 100%;
  border-radius: 8px !important;
  background: #fff;
  border: 1px solid var(--color-dim-gray);
  padding: 17px 14px !important;
  color: black;
  font-size: 14px !important;
  min-height: 110px;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-textarea::placeholder {
  color: var(--color-dim-gray);
  opacity: 0.7;
}
.form-textarea:hover:not(:focus) {
  border-color: black !important;
}
.form-textarea:focus {
  border-color: var(--color-coral) !important;
  outline: none;
}
.form-textarea.is-error {
  border-color: var(--color-danger) !important;
}
.form-radio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-pink);
  background-color: rgba(255, 22, 111, 0.08);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-pink);
  transition: all 0.2s ease-in-out;
}
.form-radio-btn > span:first-of-type {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-pink);
  background-color: white;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  background-image: url("../../public/themes/advanced/svgs/tick.svg");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: center;
}
.form-radio-btn > span:first-of-type.active {
  background-color: var(--color-pink);
}
.form-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  background-color: #f9f9f9;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.form-toggle-content {
  flex: 1;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.form-toggle-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #000;
}
.form-toggle-desc {
  margin: 0;
  font-size: 14px;
  color: var(--color-dim-gray);
}
.form-toggle-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.form-toggle-label input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.form-toggle-label .toggle-track {
  width: 41px;
  height: 21px;
  border-radius: 100px;
  background: var(--color-disabled);
  position: relative;
  transition: background 0.25s ease;
  overflow: hidden;
}
.form-toggle-label .toggle-thiumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.25s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transform: translateX(0);
}
.form-toggle-label .toggle-thiumb::before {
  content: "|";
  position: absolute;
  top: 0;
  left: -20px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 500;
  color: #fff;
}
.form-toggle-label .toggle-thiumb::after {
  content: "o";
  position: absolute;
  top: 0;
  left: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #b2b2b2;
}
.form-toggle-label input:checked + .toggle-track {
  background: #1acd1a;
}
.form-toggle-label input:checked + .toggle-track .toggle-thiumb {
  transform: translateX(20px);
}
.form-toggle-label input:focus-visible + .toggle-track {
  outline: 2px solid var(--color-coral);
  outline-offset: 2px;
}
.form-toggle-label input:disabled + .toggle-track {
  background: #d1d5db;
}
.form-toggle-label input:disabled + .toggle-track .toggle-thiumb {
  background: #f3f3f3;
  box-shadow: none;
}
.form-toggle-label:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}
.form-toggle-label:has(input:disabled):hover .toggle-track {
  background: #d1d5db;
}
.form-toggle-label:hover:not(:has(input:disabled)) .toggle-track {
  filter: brightness(0.97);
}
.form-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-pink);
  background: rgba(255, 22, 111, 0.08);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-pink);
  transition: all 0.2s ease-in-out;
  user-select: none;
}
@media (max-width: 768px) {
  .form-radio-label {
    font-size: 14px;
    padding: 8px 10px;
  }
}
.form-radio-label input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.form-radio-label .form-radio-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid var(--color-pink);
  background-color: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease-in-out;
  background-image: url("../../public/themes/advanced/svgs/tick.svg");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: center;
}
.form-radio-label input[type=radio]:checked ~ .form-radio-dot {
  background-color: var(--color-pink);
}
.form-radio-label:has(input[type=radio]:checked) {
  border-color: var(--color-pink);
  background-color: rgba(255, 22, 111, 0.15);
}
.form-radio-label:has(input[type=radio]:focus-visible) {
  outline: 1px solid var(--color-pink);
  outline-offset: 2px;
}
.form-radio-label:hover {
  background-color: rgba(255, 22, 111, 0.12);
}
.form-radio-label:has(input[type=radio]:disabled) {
  cursor: not-allowed;
}

.fields-section {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.fields-section:not(:last-child) {
  margin-bottom: 30px;
}
@media (max-width: 650px) {
  .fields-section:not(:last-child) {
    margin-bottom: 20px;
  }
}

.field-group {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.field-group > *:nth-child(2) {
  margin-top: 10px;
}
.field-group:not(:last-child) {
  margin-bottom: 30px;
}
@media (max-width: 650px) {
  .field-group > *:nth-child(2) {
    margin-top: 8px;
  }
  .field-group:not(:last-child) {
    margin-bottom: 20px;
  }
}
.field-error {
  color: var(--color-danger);
  font-size: 14px;
  margin: 0;
}

.highlight-btn {
  cursor: pointer;
  border: 1px solid var(--color-disabled);
  padding: 16.5px 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 13.3px;
  display: flex;
  gap: 7px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 100px;
  min-height: 76px;
  width: 110px;
  transition: border-color 0.2s, background-color 0.2s;
}
@media (max-width: 650px) {
  .highlight-btn {
    min-width: 80px;
    width: calc(33.33% - 14px);
    padding: 12px 6px;
  }
}
.highlight-btn:hover {
  border-color: var(--color-indigo) !important;
}
.highlight-btn-active, .highlight-btn[aria-pressed=true] {
  border-color: var(--color-indigo) !important;
  background-color: var(--color-indigo-light) !important;
  color: var(--color-indigo) !important;
}

.venue-type-card-active,
.venue-type-card[aria-pressed=true] {
  border-color: var(--color-coral) !important;
  background-color: var(--color-coral-light) !important;
}

.category-btn {
  cursor: pointer;
  border: 1px solid var(--color-disabled);
  padding: 16.5px 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 13.3px;
  display: flex;
  gap: 7px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 100px;
  width: 110px;
  transition: border-color 0.2s, background-color 0.2s;
}
@media (max-width: 650px) {
  .category-btn {
    min-width: 80px;
    width: calc(33.33% - 14px);
    padding: 12px 6px;
  }
}
.category-btn:hover {
  border-color: var(--color-coral) !important;
}
.category-btn-active, .category-btn[aria-pressed=true] {
  border-color: var(--color-coral) !important;
  background-color: var(--color-coral-light) !important;
  color: var(--color-coral) !important;
}

.subcategory-btn {
  cursor: pointer;
  border: 1px solid var(--color-disabled);
  padding: 16.5px 24.9px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 13.3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 83px;
  width: 110px;
  transition: border-color 0.2s, background-color 0.2s;
}
@media (max-width: 650px) {
  .subcategory-btn {
    min-width: 70px;
    width: calc(33.33% - 14px);
    padding: 12px 8px;
  }
}
.subcategory-btn:hover {
  border-color: var(--color-indigo) !important;
}
.subcategory-btn-active, .subcategory-btn[aria-pressed=true] {
  border-color: var(--color-indigo) !important;
  background-color: var(--color-indigo-light) !important;
}

.input-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: #fff;
  cursor: pointer;
  border: 1px solid var(--color-dim-gray);
  border-radius: 8px;
  padding: 13px 42px 13px 13px;
  font-family: inherit;
  font-size: 14px !important;
  color: black;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-select:hover:not(:focus) {
  border-color: black;
}
.input-select:focus {
  border-color: var(--color-coral);
  outline: none;
  box-shadow: none;
}
.input-select.is-error {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 2px rgba(255, 27, 51, 0.15);
}

@media (max-width: 768px) {
  .recurrence-card {
    min-width: 80px;
    padding: 14px 12px;
  }
}
.recurrence-card-active {
  border-color: var(--color-coral) !important;
  background: rgba(253, 236, 230, 0.6) !important;
}

.recurrence-radio-active {
  background-color: var(--color-coral);
}

.recurrence-label-active {
  color: var(--color-coral) !important;
  font-weight: 500 !important;
}
.recurrence-label-white {
  color: #fff !important;
  font-weight: 500 !important;
}

.dt-picker-input {
  width: 100%;
  background: #fff;
  cursor: pointer;
  border: 1px solid var(--color-dim-gray);
  border-radius: 8px;
  padding: 11.5px 42px 11.5px 14px !important;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-dim-gray);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dt-picker-input::placeholder {
  color: var(--color-dim-gray);
  opacity: 0.7;
}
.dt-picker-input:hover:not(:focus) {
  border-color: black;
}
.dt-picker-input:focus {
  border-color: var(--color-coral) !important;
  outline: none;
}
.dt-picker-input.is-error {
  border-color: var(--color-danger) !important;
}

.flatpickr-wrapper {
  display: block;
  width: 100%;
}

.flatpickr-calendar {
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
  border: 1px solid #e8e8ef;
  background: #ffffff;
  font-family: inherit;
  font-size: 13.5px;
  padding: 0;
  overflow: hidden;
}
.flatpickr-calendar::before, .flatpickr-calendar::after {
  border-bottom-color: #e8e8ef;
}
.flatpickr-calendar .flatpickr-months {
  background: linear-gradient(135deg, var(--color-coral) 0%, color-mix(in srgb, var(--color-coral), black 8%) 100%);
  border-bottom: none;
  align-items: center;
  height: 50px;
  padding: 0;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month {
  background: transparent;
  height: 50px;
  display: flex;
  align-items: center;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  color: #fff;
  fill: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  height: 50px;
  transition: background 0.2s ease;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
  background: rgba(255, 255, 255, 0.15);
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
  fill: #fff;
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding-top: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper input {
  color: #fff;
  font-weight: 600;
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span.arrowUp::after {
  border-bottom-color: rgba(255, 255, 255, 0.7);
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span.arrowDown::after {
  border-top-color: rgba(255, 255, 255, 0.7);
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month select.flatpickr-monthDropdown-months {
  color: #fff;
  background: transparent;
  font-weight: 600;
  -webkit-appearance: none;
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month select.flatpickr-monthDropdown-months option {
  color: #2d2d3a;
  background: #ffffff;
}
.flatpickr-calendar .flatpickr-weekdays {
  background: #fafafe;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0;
}
.flatpickr-calendar .flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: flex;
  align-items: center;
}
.flatpickr-calendar .flatpickr-weekdays .flatpickr-weekday {
  color: #8a8a9a;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 32px;
}
.flatpickr-calendar .flatpickr-innerContainer {
  padding: 0;
}
.flatpickr-calendar .dayContainer {
  padding: 0;
  min-width: auto;
  max-width: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.flatpickr-calendar .flatpickr-day {
  box-sizing: border-box;
  border-radius: 8px;
  color: #2d2d3a;
  font-weight: 500;
  font-size: 13px;
  height: 36px;
  line-height: 36px;
  max-width: 40px;
  flex-basis: 14.285%;
  margin: 1px 0;
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.flatpickr-calendar .flatpickr-day.today {
  border-color: #29abe2;
  color: #29abe2;
  background: rgba(41, 171, 226, 0.08);
  font-weight: 600;
}
.flatpickr-calendar .flatpickr-day.today:hover {
  background: #29abe2;
  border-color: #29abe2;
  color: #fff;
}
.flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.startRange, .flatpickr-calendar .flatpickr-day.endRange {
  background: var(--color-coral);
  border-color: var(--color-coral);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(var(--color-coral-rgb), 0.3);
}
.flatpickr-calendar .flatpickr-day.selected:hover, .flatpickr-calendar .flatpickr-day.startRange:hover, .flatpickr-calendar .flatpickr-day.endRange:hover {
  background: color-mix(in srgb, var(--color-coral), black 6%);
  border-color: color-mix(in srgb, var(--color-coral), black 6%);
}
.flatpickr-calendar .flatpickr-day.inRange {
  background: rgba(var(--color-coral-rgb), 0.08);
  border-color: transparent;
  box-shadow: -5px 0 0 rgba(var(--color-coral-rgb), 0.08), 5px 0 0 rgba(var(--color-coral-rgb), 0.08);
  color: var(--color-coral);
}
.flatpickr-calendar .flatpickr-day:hover:not(.selected):not(.startRange):not(.endRange):not(.today):not(.disabled) {
  background: rgba(var(--color-coral-rgb), 0.08);
  border-color: rgba(var(--color-coral-rgb), 0.15);
  color: var(--color-coral);
}
.flatpickr-calendar .flatpickr-day.flatpickr-disabled, .flatpickr-calendar .flatpickr-day.prevMonthDay, .flatpickr-calendar .flatpickr-day.nextMonthDay {
  color: rgb(207.9384615385, 207.9384615385, 222.2615384615);
}
.flatpickr-calendar .flatpickr-day.flatpickr-disabled {
  text-decoration: none;
}
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
  background: transparent;
  border-color: transparent;
  cursor: not-allowed;
}

.flatpickr-time {
  border-top: 1px solid #e8e8ef;
  padding: 0;
}
.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute {
  color: #2d2d3a;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
}
.flatpickr-time input.flatpickr-hour:hover,
.flatpickr-time input.flatpickr-minute:hover {
  background: rgba(var(--color-coral-rgb), 0.08);
}
.flatpickr-time input.flatpickr-hour:focus,
.flatpickr-time input.flatpickr-minute:focus {
  background: rgba(var(--color-coral-rgb), 0.08);
  outline: none;
}
.flatpickr-time .numInputWrapper span.arrowUp::after {
  border-bottom-color: #8a8a9a;
}
.flatpickr-time .numInputWrapper span.arrowDown::after {
  border-top-color: #8a8a9a;
}
.flatpickr-time .numInputWrapper span:hover::after {
  border-bottom-color: var(--color-coral);
  border-top-color: var(--color-coral);
}
.flatpickr-time .flatpickr-time-separator {
  color: #8a8a9a;
  font-weight: 600;
}
.flatpickr-time .flatpickr-am-pm {
  color: #2d2d3a;
  font-weight: 600;
  font-size: 12px;
}
.flatpickr-time .flatpickr-am-pm:hover {
  background: rgba(var(--color-coral-rgb), 0.08);
  color: var(--color-coral);
}

@media (max-width: 768px) {
  .dt-row {
    flex-direction: column;
    gap: 16px;
  }
}

.dt-custom-row,
.sio-cat-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  position: relative;
}
.dt-custom-row .dt-custom-action,
.sio-cat-row .dt-custom-action {
  position: absolute;
  right: -42px;
  bottom: 0px;
}
@media (max-width: 1280px) {
  .dt-custom-row .dt-custom-action,
  .sio-cat-row .dt-custom-action {
    position: static;
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}
@media (max-width: 1280px) {
  .dt-custom-row,
  .sio-cat-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .dt-custom-row .dt-custom-col:first-child,
  .sio-cat-row .dt-custom-col:first-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 650px) {
  .dt-custom-row,
  .sio-cat-row {
    grid-template-columns: 1fr;
  }
  .dt-custom-row .dt-custom-col:first-child,
  .sio-cat-row .dt-custom-col:first-child {
    grid-column: 1;
  }
}

.dt-single-date-col {
  max-width: calc(50% - 15px);
}

@media (max-width: 650px) {
  .venue-card {
    min-width: 80px !important;
    width: calc(33.33% - 6px) !important;
    padding: 12px 6px !important;
  }
}
.venue-card-active {
  border-color: var(--color-coral) !important;
  background: rgba(253, 236, 230, 0.6) !important;
}

.venue-map .leaflet-marker-icon {
  height: 24px !important;
  width: 24px !important;
  background-image: url("../../public/themes/advanced/svgs/location.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.venue-map .map-pulse {
  display: none;
}

.tk-layout-select-with-unselect {
  padding-right: 110px !important;
}
@media (max-width: 650px) {
  .tk-layout-select-with-unselect {
    padding-right: 60px !important;
  }
}

.tk-unselect-btn {
  position: absolute;
  right: 74px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: auto;
}
@media (max-width: 650px) {
  .tk-unselect-btn {
    right: 50px;
  }
}
.tk-unselect-btn:hover {
  opacity: 0.7;
}

.tk-type-btn {
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--radius-mid);
  gap: 12px;
}
@media (max-width: 1024px) {
  .tk-type-btn {
    font-size: 16px;
    gap: 8px;
  }
}
@media (max-width: 768px) {
  .tk-type-btn {
    font-size: 14px;
  }
}
@media (max-width: 650px) {
  .tk-type-btn {
    gap: 4px;
    font-size: 13px;
  }
}
.tk-type-btn.tk-type-free {
  background: rgba(52, 168, 83, 0.08);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}
.tk-type-btn.tk-type-free:hover {
  background: rgba(52, 168, 83, 0.16);
}
.tk-type-btn.tk-type-paid {
  background: var(--color-coral-light);
  color: var(--color-coral);
  border: 1px solid var(--color-coral);
}
.tk-type-btn.tk-type-paid:hover {
  background: var(--color-coral-light-hover);
}
.tk-type-btn.tk-type-donation {
  color: var(--color-indigo);
  border: 1px solid var(--color-indigo);
  background: var(--color-indigo-light);
}
.tk-type-btn.tk-type-donation:hover {
  background: var(--color-indigo-light-hover);
}

@media (max-width: 768px) {
  .tk-service-fee-btn,
  .tk-fee-pref-btn {
    font-size: 12px;
    padding: 8px 10px;
  }
}

.recurring-radio-label {
  min-height: 62px;
  background-color: white;
  border-color: var(--color-disabled);
  border-radius: 14px;
  justify-content: center;
  color: black;
}
.recurring-radio-label input[type=radio]:checked ~ .recurring-radio-dot {
  background-color: var(--color-coral);
}
.recurring-radio-label:has(input[type=radio]:checked) {
  border-color: var(--color-coral);
  background-color: var(--color-coral-light);
  color: var(--color-coral);
}
.recurring-radio-label:has(input[type=radio]:focus-visible) {
  outline: 1px solid var(--color-coral);
  outline-offset: 2px;
}
.recurring-radio-label:hover {
  background-color: var(--color-coral-light-hover);
  border-color: var(--color-coral-light);
}

.recurring-radio-dot {
  height: 20px !important;
  width: 20px !important;
  border-color: var(--color-coral) !important;
  background-size: 12px 10px !important;
}

.auth-left-bg {
  background-size: cover;
  background-position: center;
}
.auth-left-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  background: linear-gradient(180deg, #f7f7f7 -58.27%, #000000 50.39%);
  backdrop-filter: blur(500px);
  opacity: 0.6;
  z-index: 1;
}
.auth-left-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  backdrop-filter: blur(500px);
  opacity: 0.5;
  z-index: 2;
}

.login-bg {
  background-image: url("../../public/themes/advanced/images/login-bg.png");
}

.signup-bg {
  background-image: url("../../public/themes/advanced/images/signup-bg.png");
}

.forgot-password-bg {
  background-image: url("../../public/themes/advanced/images/forgot-password-bg.png");
}

.auth-modal-box {
  min-height: 380px;
}
@media (max-width: 768px) {
  .auth-modal-box {
    flex-direction: column;
    max-height: 95vh;
    overflow-y: auto;
  }
}

.auth-input-wrapper {
  position: relative;
  border: 1px solid black;
  box-shadow: none !important;
}
.auth-input-wrapper input {
  border: none;
  outline: none;
  background: transparent;
  line-height: 20px !important;
}
.auth-input-wrapper input:focus + label, .auth-input-wrapper input:not(:placeholder-shown) + label {
  transform: translateY(-150%);
  opacity: 0;
}
.auth-input-wrapper input:-webkit-autofill, .auth-input-wrapper input:-webkit-autofill:hover, .auth-input-wrapper input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-text-fill-color: #000 !important;
  transition: background-color 9999s ease-in-out 0s;
}
.auth-input-wrapper:focus-within {
  border-color: var(--color-input-focus);
}
.auth-input-wrapper.border-danger {
  border-color: var(--color-danger);
}
.auth-input-wrapper label {
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #696969;
  pointer-events: none;
  transition: all 0.3s ease;
}
.auth-input-wrapper label span {
  color: var(--color-danger);
}

.auth-social-icon {
  height: 36px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background-color: #f7f7f7;
  transition: all ease-in 0.2s;
}
.auth-social-icon img {
  transition: all ease-in 0.2s;
}
.auth-social-icon:hover img {
  filter: invert(1) brightness(100) !important;
}

/* Reset-password security-requirements bullets.
       Default = empty grey ring. `.is-met` = filled green check. */
#reset-pw-requirements .rule-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 109, 79, 0.2);
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#reset-pw-requirements .rule-row.is-met .rule-bullet {
  background: #1fb85b;
  border-color: #1fb85b;
}

#reset-pw-requirements .rule-row.is-met .rule-bullet::after {
  content: "";
  display: block;
  width: 7px;
  height: 4px;
  border-left: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg) translate(0px, -1px);
}

#reset-pw-requirements .rule-text {
  line-height: 1.2;
  text-transform: capitalize;
}

.auth-tab-switch {
  background: linear-gradient(90deg, var(--color-coral), var(--color-indigo));
}

.auth-tab-switch-reverse {
  background: linear-gradient(90deg, var(--color-indigo), var(--color-coral));
}

.event-details-wrapper {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: clamp(560px, 100vh, 1160px);
  height: auto;
  width: 100%;
  position: relative;
}
.event-details-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 68.74%);
  pointer-events: none;
}
@media (max-width: 768px) {
  .event-details-wrapper::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.9) 85%);
  }
}
@media (max-width: 1024px) {
  .event-details-wrapper {
    background-position: center;
  }
}
@media (max-height: 700px) {
  .event-details-hero-section {
    min-height: 768px !important;
  }
}
.event-details-gradient-title {
  font-weight: 600;
  font-size: 58px;
  letter-spacing: 0;
  font-style: italic;
  background: linear-gradient(90deg, var(--color-coral) 10%, var(--color-indigo) 50%, var(--color-coral) 90%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 10s linear infinite;
}
@media (max-width: 1024px) {
  .event-details-gradient-title {
    font-size: 36px !important;
  }
}
@media (max-width: 768px) {
  .event-details-gradient-title {
    font-size: 28px !important;
    line-height: 1.2;
  }
}
@media (max-width: 650px) {
  .event-details-gradient-title {
    font-size: 24px !important;
  }
}
.event-details-subheading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 28px;
}
.event-details-subheading::before {
  content: "";
  width: 3px;
  height: 20px;
  background: var(--color-coral);
}
.event-details-faq-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #bdbdbd, #bdbdbd, transparent);
}
.event-details-heightlight-card {
  border-radius: 14px;
  border: 1px solid var(--color-disabled);
  transition: all 0.3s ease;
}
.event-details-heightlight-card:hover {
  background-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.event-details-map .map-pulse {
  background-image: url("../../public/themes/advanced/svgs/location-point.svg");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: center;
}
.event-details-map .map-pulse::before, .event-details-map .map-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: inherit;
  animation: pulse 2s infinite;
  opacity: 0.6;
}
.event-details-map .map-pulse::after {
  animation-delay: 1s;
}
.event-details-map-overlay {
  backdrop-filter: blur(1px);
  background: linear-gradient(180.49deg, rgba(0, 0, 0, 0) 14.65%, rgba(0, 0, 0, 0.9) 105.23%);
}

.dotted-divider {
  background-image: url("../../public/themes/advanced/images/divider.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.vertical-dotted-divider {
  background-image: url("../../public/themes/advanced/images/vertical-divider.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.dotted-divider-wide {
  background-image: url("../../public/themes/advanced/images/ticket-horizontal.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.calendar-bg {
  background-image: url("../../public/themes/advanced/svgs/day.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56px;
}
@media (max-width: 768px) {
  .calendar-bg {
    background-size: 46px;
  }
}

.avatar-ring {
  display: block;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b57, #7a6cf6);
  padding: 2px;
}
.avatar-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: white;
}

.view-toggle {
  width: 90px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.view-toggle .view-btn {
  width: 40px;
  height: 48px;
  z-index: 2;
  border-radius: 6.86px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6d6d78;
  transition: color 0.3s ease;
  background: transparent;
  border: none;
  cursor: pointer;
}
.view-toggle .view-btn.active {
  color: white;
}
.view-toggle .toggle-glider {
  position: absolute;
  top: 7px;
  left: 8px;
  width: 32px;
  height: 32px;
  background: var(--color-coral);
  border-radius: 6.86px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.view-toggle.list-active .toggle-glider {
  transform: translateX(40px);
}

#filterBackdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#filterBackdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

#filterPanel {
  transition: transform 0.3s ease;
}
@media (max-width: 1023px) {
  #filterPanel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 280px;
    z-index: 9999;
    overflow-y: auto;
    transform: translateX(-100%);
  }
}
#filterPanel.is-open {
  transform: translateX(0);
}

body.drawer-open {
  overflow: hidden;
}

.list-view-event-card .left-section {
  background: rgba(255, 255, 255, 0.8);
}
.list-view-event-card .right-section {
  background: rgba(255, 255, 255, 0.8);
}

.active-filter-chip {
  transition: opacity 0.15s ease;
}
.active-filter-chip:hover {
  opacity: 0.85;
}

.me-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  background-color: #ffffff;
  height: 36px;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.icon-dimGray {
  color: var(--color-dim-gray);
}
.icon-dimGray:hover {
  background-color: var(--color-dim-gray);
  color: white;
}

.icon-indigo {
  color: var(--color-indigo);
}
.icon-indigo:hover {
  background-color: var(--color-indigo);
  color: white;
}

.icon-coral {
  color: var(--color-coral);
}
.icon-coral:hover {
  background-color: var(--color-coral);
  color: white;
}

.icon-pink {
  color: var(--color-pink);
}
.icon-pink:hover {
  background-color: var(--color-pink);
}
.icon-pink:hover svg path {
  stroke: white;
  fill: white;
}

.icon-danger {
  color: var(--color-danger);
}
.icon-danger:hover {
  background-color: var(--color-danger);
  color: white;
}

.icon-success {
  color: var(--color-success);
}
.icon-success:hover {
  background-color: var(--color-success);
  color: white;
}

.icon-dark {
  color: black;
}
.icon-dark:hover {
  background-color: black;
  color: white;
}

.icon-dark-red {
  color: #c60101;
}
.icon-dark-red:hover {
  background-color: #c60101;
  color: white;
}

.me-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 8px;
  height: 32px;
  width: 166px;
  border: 1px solid;
  background: white;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  border-color: var(--color-success);
  color: var(--color-success);
}
@media (max-width: 650px) {
  .me-tab-btn {
    width: 140px;
  }
}
.me-tab-btn .me-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  background: var(--color-success);
  color: white;
}
.me-tab-btn.active {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
  font-weight: 600;
}
.me-tab-btn.active .me-tab-count {
  background: white;
  color: var(--color-success);
}
.me-tab-btn--draft {
  border-color: #f59e0b;
  color: #f59e0b;
}
.me-tab-btn--draft .me-tab-count {
  background: #f59e0b;
}
.me-tab-btn--draft.active {
  background: #f59e0b;
  border-color: #f59e0b;
  font-weight: 600;
}
.me-tab-btn--draft.active .me-tab-count {
  background: white;
  color: #f59e0b;
}
.me-tab-btn--completed {
  border-color: var(--color-indigo);
  color: var(--color-indigo);
}
.me-tab-btn--completed .me-tab-count {
  background: var(--color-indigo);
}
.me-tab-btn--completed.active {
  background: var(--color-indigo);
  border-color: var(--color-indigo);
  font-weight: 600;
}
.me-tab-btn--completed.active .me-tab-count {
  background: white;
  color: var(--color-indigo);
}
.me-tab-btn--cancelled {
  border-color: var(--color-dim-gray);
  color: var(--color-dim-gray);
}
.me-tab-btn--cancelled .me-tab-count {
  background: var(--color-dim-gray);
}
.me-tab-btn--cancelled.active {
  background: var(--color-dim-gray);
  border-color: var(--color-dim-gray);
}
.me-tab-btn--cancelled.active .me-tab-count {
  background: white;
  color: var(--color-dim-gray);
}
.me-tab-btn--review {
  border-color: #0077b5;
  color: #0077b5;
}
.me-tab-btn--review .me-tab-count {
  background: #0077b5;
}
.me-tab-btn--review.active {
  background: #0077b5;
  border-color: #0077b5;
}
.me-tab-btn--review.active .me-tab-count {
  background: white;
  color: #0077b5;
}
.me-tab-btn--rejected {
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.me-tab-btn--rejected .me-tab-count {
  background: var(--color-danger);
}
.me-tab-btn--rejected.active {
  background: var(--color-danger);
  border-color: var(--color-danger);
}
.me-tab-btn--rejected.active .me-tab-count {
  background: white;
  color: var(--color-danger);
}
@media (max-width: 640px) {
  .me-tab-btn {
    padding: 5px 11px;
    font-size: 12px;
    gap: 6px;
  }
  .me-tab-btn .me-tab-count {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
  }
}
@media (max-width: 400px) {
  .me-tab-btn {
    padding: 5px 8px;
    font-size: 11px;
  }
}

:lang(fr) .me-tab-btn {
  width: 194px;
}
@media (max-width: 650px) {
  :lang(fr) .me-tab-btn {
    width: 154px;
  }
}

:lang(es) .me-tab-btn {
  width: auto;
}

.me-tab-panel {
  display: none;
}
.me-tab-panel.active {
  display: block;
}

.me-badge {
  display: inline-block;
  padding: 4px 18px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
  color: white;
}
.me-badge--active {
  background: var(--color-success);
}
.me-badge--draft {
  background: #f59e0b;
}
.me-badge--completed {
  background: var(--color-indigo);
}
.me-badge--cancelled {
  background: var(--color-dim-gray);
}
.me-badge--review {
  background: #0077b5;
}
.me-badge--rejected {
  background: var(--color-danger);
}

.me-progress-bar {
  height: 8px;
  background: #e9e9e9;
  border-radius: 10px;
  overflow: hidden;
}

.me-progress-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(to right, var(--color-coral), var(--color-indigo));
  transition: width 0.4s ease;
}

.me-event-row {
  transition: all 0.2s ease;
}

.me-event-row.me-recur-expanded:hover {
  transform: none;
  box-shadow: none;
  background-color: var(--color-off-white);
}

.me-earning-status {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
}
.me-earning-status--withdraw {
  color: var(--color-success);
  background: #def1ec;
}
.me-earning-status--pending {
  color: var(--color-danger);
  background: transparent;
}
.me-earning-status--due {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}
.me-earning-status--paid {
  color: var(--color-success);
  background: #def1ec;
}
.me-earning-status--cancelled {
  color: var(--color-dim-gray);
  background: rgba(100, 100, 100, 0.1);
}

.me-recur-toggle .me-recur-chevron {
  transition: transform 0.25s ease;
}
.me-recur-toggle.me-recur-open .me-recur-chevron {
  transform: rotate(180deg);
}

.alls > .me-recur-panel {
  margin-top: 0 !important;
}

.me-recur-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  padding: 0 16px;
}
.me-recur-panel.open {
  grid-template-rows: 1fr;
  padding-top: 20px;
  padding-bottom: 16px;
  margin-top: -10px !important;
}
.me-recur-panel .me-recur-inner {
  overflow: hidden;
  min-height: 0;
}

.ed-sidebar-card {
  background: #fff;
  border: 1px solid var(--color-disabled);
  border-radius: 12px;
  padding: 18px 28px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 767.98px) {
  .ed-sidebar-card {
    flex-direction: row;
    overflow-x: auto;
    align-items: flex-start;
    padding: 12px 14px;
    gap: 10px;
    border-radius: 8px;
    scrollbar-width: none;
  }
  .ed-sidebar-card::-webkit-scrollbar {
    display: none;
  }
}

.ed-sidebar-active-row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.ed-sidebar-step {
  width: 100%;
  border: 1px solid var(--color-disabled);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-dim-gray);
  background: #fff;
}
.ed-sidebar-step:hover {
  border-color: #b3b3b3;
}
.ed-sidebar-step svg,
.ed-sidebar-step img {
  flex-shrink: 0;
}

.ed-sidebar-step-active {
  background: linear-gradient(90deg, #FF6D4F 0%, #7B7EE7 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  width: 100%;
}
.ed-sidebar-step-active:hover {
  opacity: 0.9;
  border-color: transparent;
}
.ed-sidebar-step-active svg {
  opacity: 1 !important;
  stroke: #fff;
}

.ed-sidebar-parent .ed-sidebar-chevron {
  margin-left: auto;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.ed-sidebar-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  opacity: 0;
  gap: 0;
}
.ed-sidebar-submenu.open {
  max-height: 400px;
  opacity: 1;
  gap: 8px;
  overflow: visible;
}

.ed-sidebar-group:has(.ed-sidebar-submenu.open) > .ed-sidebar-parent .ed-sidebar-chevron {
  transform: rotate(180deg);
}

.ed-tabs-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  background-color: white;
  padding: 6px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  scrollbar-width: none;
}
.ed-tabs-container::-webkit-scrollbar {
  display: none;
}
.ed-tabs-container::before {
  content: "";
  position: absolute;
  top: 6px;
  width: var(--indicator-width, 0px);
  left: calc(var(--indicator-left, 0px) + 10px);
  height: calc(100% - 12px);
  background-color: #111;
  border-radius: 12px;
  transition: left 0.3s ease, width 0.3s ease;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 768px) {
  .ed-tabs-container {
    width: 100%;
  }
}

.ed-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  flex-shrink: 0;
  padding: 11px 16px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  background: #f7f7f7;
  border: none;
  border-radius: 12px;
  margin-right: 10px;
  margin-left: 10px;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.2s ease;
}
.ed-tab::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  height: 55%;
  border-right: 1px solid #8e8e93;
}
.ed-tab:last-child::after {
  border-right: none;
}
.ed-tab:has(+ .ed-tab.active)::after {
  border-right: none;
}
.ed-tab.active {
  color: #fff !important;
  background-color: transparent !important;
  border: transparent !important;
}
.ed-tab.active::after {
  border-right: none;
}
.ed-tab:hover:not(.active) {
  background-color: rgba(0, 0, 0, 0.15);
}

.ed-tab-panel {
  display: none;
}
.ed-tab-panel.active {
  display: block;
}

.ed-date-filter-row {
  display: none;
  gap: 10px;
  align-items: center;
}
.ed-date-filter-row.visible {
  display: flex;
}

.ed-breakdown-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f1f1;
}
.ed-breakdown-row:last-child {
  border-bottom: none;
}

.ed-breakdown-name {
  flex: 1;
  min-width: 0;
}
.ed-breakdown-name span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ed-breakdown-name p {
  font-size: 12px;
  color: #999;
  margin: 2px 0 0;
}

.ed-breakdown-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-coral);
  white-space: nowrap;
}

.ed-order-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-coral);
  border: 1px solid var(--color-coral);
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}

.ed-morris-chart {
  min-height: 320px;
  width: 100%;
}

.ed-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 16px;
  margin-top: 8px;
}
.ed-pagination a,
.ed-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: all 0.15s ease;
}
.ed-pagination a:hover,
.ed-pagination span:hover {
  background-color: #f5f5f5;
}
.ed-pagination .active,
.ed-pagination strong {
  background-color: #111;
  color: #fff;
}
.ed-pagination .active:hover,
.ed-pagination strong:hover {
  background-color: #333;
}

.cof-field-table {
  background-color: white;
  padding: 11px 12px;
  border-radius: 8px !important;
}
.cof-field-table th {
  padding: 8px 9px !important;
}
.cof-field-table th:first-child {
  text-align: left !important;
  font-size: 14px;
  font-weight: 700 !important;
  color: #111;
  border-radius: 6px 0 0 6px;
  width: 220px;
}
.cof-field-table th:last-child {
  border-radius: 0 6px 6px 0;
}
.cof-field-table th:not(:first-child) {
  font-weight: 400 !important;
}
.cof-field-table th:nth-last-child(1), .cof-field-table th:nth-last-child(2) {
  width: 24%;
}
.cof-field-table td {
  padding: 8px 9px !important;
  font-weight: 400 !important;
}
.cof-field-table td:not(:first-child) {
  text-align: center;
}
.cof-field-table td:nth-last-child(1), .cof-field-table td:nth-last-child(2) {
  width: 24%;
}
.cof-field-table .cof-checkbox {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 4.5px !important;
  background-color: #ffffff !important;
  border: 1px solid var(--color-coral) !important;
  position: relative;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.cof-field-table .cof-checkbox::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../public/themes/advanced/svgs/tick.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 9px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cof-field-table .cof-checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cof-field-table .cof-checkbox:checked {
  background-color: var(--color-coral) !important;
  border-color: var(--color-coral) !important;
}
.cof-field-table .cof-checkbox:checked::after {
  opacity: 1;
}

.ed-stat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}
.ed-stat-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 10px 22px rgba(16, 24, 40, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .ed-stat-card {
    transition: none;
  }
  .ed-stat-card:hover {
    transform: none;
  }
}

.ed-ring {
  transition: opacity 0.15s ease;
  cursor: pointer;
}
.ed-ring:hover {
  opacity: 0.5;
}

.ed-tier-tip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 6px;
  transform: translate(-50%, -145%);
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.18);
}

.inv-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.inv-status-badge::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("../../public/themes/advanced/svgs/tick.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.inv-status-badge-scheduled {
  color: #f59e0b;
  border: 1px solid #f59e0b;
}
.inv-status-badge-scheduled::before {
  background-image: url("../../public/themes/advanced/svgs/scheduled.svg");
}
.inv-status-badge-sent {
  color: var(--color-success);
  border: 1px solid var(--color-success);
}
.inv-status-badge-sent::before {
  background-image: url("../../public/themes/advanced/svgs/check-circle.svg");
}
.inv-status-badge-draft {
  color: #6d6d78;
  border: 1px solid #6d6d78;
}
.inv-status-badge-draft::before {
  background-image: url("../../public/themes/advanced/svgs/draft.svg");
}

.inv-schedule-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-pink);
  background: rgba(255, 22, 111, 0.08);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-pink);
  transition: all 0.2s ease-in-out;
  user-select: none;
}
@media (max-width: 768px) {
  .inv-schedule-pill {
    font-size: 14px;
    padding: 8px 12px;
    justify-content: flex-start;
  }
}
.inv-schedule-pill-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid var(--color-pink);
  background-color: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease-in-out;
  background-image: url("../../public/themes/advanced/svgs/tick.svg");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: center;
}
.inv-schedule-pill-active {
  border-color: var(--color-pink);
  background-color: rgba(255, 22, 111, 0.15);
}
.inv-schedule-pill-active .inv-schedule-pill-dot {
  background-color: var(--color-pink);
}
.inv-schedule-pill:hover {
  background-color: rgba(255, 22, 111, 0.12);
}

.dark-radio-btn.inv-schedule-pill {
  border-color: #000;
  background: white;
  color: #000;
}
.dark-radio-btn.inv-schedule-pill .inv-schedule-pill-dot {
  border-color: #000;
  background-color: #fff;
}
.dark-radio-btn.inv-schedule-pill.inv-schedule-pill-active {
  border-color: #000;
  background-color: white;
}
.dark-radio-btn.inv-schedule-pill.inv-schedule-pill-active .inv-schedule-pill-dot {
  background-color: #000;
}
.dark-radio-btn.inv-schedule-pill:hover {
  background-color: rgba(0, 0, 0, 0.12);
}

.my-inbox-layout {
  min-height: 500px;
}

.my-inbox-sidebar {
  max-height: 600px;
  overflow-y: auto;
}
@media (max-width: 767px) {
  .my-inbox-sidebar {
    max-height: 350px;
  }
}

.my-inbox-card {
  display: block;
  background: #fff;
  border: 1px solid var(--color-disabled);
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none !important;
}
.my-inbox-card:hover {
  border-color: var(--color-coral);
  box-shadow: 0 2px 8px rgba(255, 109, 79, 0.1);
}
.my-inbox-card--active {
  border-color: var(--color-coral);
  border-width: 1px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18);
}
.my-inbox-card--unread {
  background: #fff8f6;
}
.my-inbox-card p {
  margin: 0;
  line-height: 1.5 !important;
}

.my-inbox-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background-color: var(--color-coral-light);
  border: 1px solid var(--color-coral);
  color: var(--color-coral);
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.my-inbox-avatar--me {
  background-color: var(--color-coral-light);
  border: 1px solid var(--color-coral);
  color: var(--color-coral);
}

.my-inbox-chat {
  max-height: 600px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 768px) {
  .my-inbox-chat {
    gap: 20px;
  }
}

.my-inbox-bubble-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.my-inbox-bubble-row--me {
  justify-content: flex-end;
  align-items: flex-end;
}
.my-inbox-bubble-row--other {
  justify-content: flex-start;
}

.my-inbox-bubble-content {
  max-width: 65%;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
}
@media (max-width: 767px) {
  .my-inbox-bubble-content {
    max-width: 80%;
  }
}

.my-inbox-bubble {
  padding: 10px 15px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.55 !important;
  word-break: break-word;
}
.my-inbox-bubble--other {
  background-color: #f0f0f0;
  color: black;
  border-bottom-left-radius: 3px;
}
.my-inbox-bubble--me {
  background-color: var(--color-indigo);
  color: #fff;
  border-bottom-right-radius: 3px;
  align-self: flex-end;
}

.my-inbox-bubble-time {
  font-size: 12px;
  color: var(--color-dim-gray);
  padding: 0 4px;
}

.my-account-content-area {
  align-self: stretch;
  position: relative;
  z-index: 9;
  flex-shrink: 0;
  padding-bottom: 80px;
}
@media (max-width: 1024px) {
  .my-account-content-area {
    padding-bottom: 40px;
  }
}

.my-account-sidebar-wrapper {
  width: 250px;
  position: absolute;
  top: 0;
  left: 96px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--color-disabled);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 28px 18px 18px;
  gap: 18px;
}
@media (max-width: 1024px) {
  .my-account-sidebar-wrapper {
    position: static;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 16px;
    gap: 16px;
    border-radius: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 20px;
  }
  .my-account-sidebar-wrapper::-webkit-scrollbar {
    display: none;
  }
}
:lang(fr) .my-account-sidebar-wrapper {
  width: 280px;
  left: 76px;
}
@media (max-width: 1024px) {
  :lang(fr) .my-account-sidebar-wrapper {
    width: 100%;
  }
}
@media (min-width: 1025px) {
  :lang(es) .my-account-sidebar-step span {
    white-space: normal;
  }
}
.my-account-sidebar-step {
  width: 100%;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.2s, border-color 0.2s;
}
.my-account-sidebar-step-active {
  padding: 12px 18px;
  background: linear-gradient(90deg, #ff6d4f 0%, #7b7ee7 100%);
}
.my-account-sidebar-step-active:hover {
  opacity: 0.9;
}
@media (max-width: 1024px) {
  .my-account-sidebar-step-active {
    padding: 8px 14px;
  }
}
.my-account-sidebar-step-inactive {
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--color-disabled) !important;
}
@media (max-width: 1024px) {
  .my-account-sidebar-step-inactive {
    padding: 8px 14px;
  }
}
.my-account-sidebar-step-inactive:hover {
  border-color: #b3b3b3 !important;
}
.my-account-sidebar-step-danger {
  padding: 12px 18px;
  background: rgba(255, 27, 51, 0.1);
}
@media (max-width: 1024px) {
  .my-account-sidebar-step-danger {
    padding: 8px 14px;
  }
}
.my-account-sidebar-step-danger:hover {
  opacity: 0.8;
}
@media (max-width: 1024px) {
  .my-account-sidebar-step {
    width: auto;
    max-width: none;
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0;
  border-radius: 6px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.sc-btn:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.sc-btn__logo {
  height: 28px;
  width: auto;
  display: block;
}
.sc-btn--connect {
  background: rgba(123, 126, 231, 0.1);
  border-color: rgb(123, 126, 231);
}
.sc-btn--connected {
  background: #e6f9ee;
  border-color: #28a745;
  transition: box-shadow 0.2s, border-color 0.2s, border-radius 0.25s ease;
}
.sc-btn--review {
  background: #fff8e1;
  border-color: #f0ad4e;
}
.sc-btn--review:hover {
  border-color: #e09800;
}
.sc-btn__disconnect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 30px;
  padding: 0;
  background: #ef4444;
  border: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  overflow: hidden;
  transition: width 0.25s ease, padding 0.25s ease;
  text-decoration: none;
  flex-shrink: 0;
}
.sc-btn__disconnect:hover {
  background: #dc2626;
}

.sc-btn-wrap {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
}
.sc-btn-wrap:hover .sc-btn--connected {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.sc-btn-wrap:hover .sc-btn__disconnect {
  width: 28px;
  padding: 0 6px;
}

.my-account-main-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  padding-left: 390px;
  padding-right: 6rem;
  padding-top: 0;
  text-align: left;
  font-size: 14px;
  color: #000;
}
@media (max-width: 1024px) {
  .my-account-main-content {
    padding-left: 0;
    padding-right: 0;
    gap: 16px;
    align-items: stretch;
  }
}

/* ================= Common styles ================= */
/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: "";
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
  tab-size: 4;
  /* 3 */
  font-family: "Albert Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/
button,
[role=button] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
  background-color: var(--color-disabled) !important;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden=until-found])) {
  display: none;
}

input,
textarea {
  box-shadow: none !important;
}

input:where(:not(.iti__tel-input)),
textarea {
  padding: 0 !important;
}

.custom-checkbox, .custom-checkbox-success, .custom-checkbox-indigo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 14px;
}
.custom-checkbox input[type=checkbox], .custom-checkbox-success input[type=checkbox], .custom-checkbox-indigo input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background-color: #ffffff;
  border: 1px solid var(--color-coral);
  position: relative;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.custom-checkbox input[type=checkbox]::after, .custom-checkbox-success input[type=checkbox]::after, .custom-checkbox-indigo input[type=checkbox]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../public/themes/advanced/svgs/tick.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 9px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.custom-checkbox input[type=checkbox]:checked, .custom-checkbox-success input[type=checkbox]:checked, .custom-checkbox-indigo input[type=checkbox]:checked {
  background-color: var(--color-coral) !important;
  border-color: var(--color-coral) !important;
}
.custom-checkbox input[type=checkbox]:checked::after, .custom-checkbox-success input[type=checkbox]:checked::after, .custom-checkbox-indigo input[type=checkbox]:checked::after {
  opacity: 1;
}

.custom-checkbox-indigo input[type=checkbox] {
  border-color: var(--color-indigo) !important;
}
.custom-checkbox-indigo input[type=checkbox]:checked {
  background-color: var(--color-indigo) !important;
  border-color: var(--color-indigo) !important;
}
.custom-checkbox-indigo input[type=checkbox]:checked::after {
  opacity: 1;
}

.custom-checkbox-success input[type=checkbox] {
  border-color: var(--color-success) !important;
}
.custom-checkbox-success input[type=checkbox]:checked {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}
.custom-checkbox-success input[type=checkbox]:checked::after {
  opacity: 1;
}

.circle-checkbox-indigo, .circle-checkbox-pink, .circle-checkbox-success, .circle-checkbox-coral {
  height: 32px;
  border-radius: 10px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-indigo);
  background-color: var(--color-indigo-light);
  border: 1px solid var(--color-indigo);
}
.circle-checkbox-indigo input[type=checkbox], .circle-checkbox-pink input[type=checkbox], .circle-checkbox-success input[type=checkbox], .circle-checkbox-coral input[type=checkbox] {
  border-color: var(--color-indigo);
  border-radius: 50%;
  height: 16px;
  width: 16px;
  cursor: pointer;
}
.circle-checkbox-indigo input[type=checkbox]:checked, .circle-checkbox-pink input[type=checkbox]:checked, .circle-checkbox-success input[type=checkbox]:checked, .circle-checkbox-coral input[type=checkbox]:checked {
  background-color: var(--color-indigo);
  border-color: var(--color-indigo);
}
.circle-checkbox-indigo input[type=checkbox]:checked::after, .circle-checkbox-pink input[type=checkbox]:checked::after, .circle-checkbox-success input[type=checkbox]:checked::after, .circle-checkbox-coral input[type=checkbox]:checked::after {
  opacity: 1;
}
@media (max-width: 768px) {
  .circle-checkbox-indigo, .circle-checkbox-pink, .circle-checkbox-success, .circle-checkbox-coral {
    height: 30px;
  }
}

.circle-checkbox-coral {
  color: var(--color-coral);
  background-color: var(--color-coral-light);
  border: 1px solid var(--color-coral);
}
.circle-checkbox-coral input[type=checkbox] {
  border-color: var(--color-coral);
}
.circle-checkbox-coral input[type=checkbox]:checked {
  background-color: var(--color-coral);
  border-color: var(--color-coral);
}

.circle-checkbox-success {
  color: var(--color-success);
  background-color: rgba(16, 185, 129, 0.08);
  border: 1px solid var(--color-success);
}
.circle-checkbox-success input[type=checkbox] {
  border-color: var(--color-success);
}
.circle-checkbox-success input[type=checkbox]:checked {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.circle-checkbox-pink {
  color: var(--color-pink);
  background-color: rgba(255, 22, 111, 0.08);
  border: 1px solid var(--color-pink);
}
.circle-checkbox-pink input[type=checkbox] {
  border-color: var(--color-pink);
}
.circle-checkbox-pink input[type=checkbox]:checked {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
}

.slider-card {
  --clr-low: var(--color-coral);
  --clr-mid: var(--color-indigo);
  --clr-high: #eeeeee;
  --thumb-size: 20px;
  --track-h: 8px;
  /* Track container */
}
.slider-card .slider-track-wrap {
  position: relative;
  height: var(--thumb-size);
  display: flex;
  align-items: center;
  /* Gradient filled track */
}
.slider-card .slider-track-wrap .slider-track {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--track-h);
  border-radius: 999px;
  background: linear-gradient(to right, var(--clr-low) 0%, var(--clr-mid) var(--fill-pct, 70%), var(--clr-high) var(--fill-pct, 70%));
  pointer-events: none;
}
.slider-card .slider-track-wrap {
  /* Native range input */
}
.slider-card .slider-track-wrap input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  background: transparent;
  margin: 0;
  cursor: pointer;
  z-index: 2;
  /* WebKit thumb */
}
.slider-card .slider-track-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--clr-mid);
  transition: transform 0.15s ease;
}
.slider-card .slider-track-wrap input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.slider-card .slider-track-wrap input[type=range] {
  /* Firefox thumb */
}
.slider-card .slider-track-wrap input[type=range]::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid var(--clr-mid);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: grab;
  transition: transform 0.15s ease;
}
.slider-card .slider-track-wrap input[type=range]::-moz-range-thumb:hover {
  transform: scale(1.15);
}
.slider-card .slider-track-wrap input[type=range] {
  /* Hide native tracks */
}
.slider-card .slider-track-wrap input[type=range]::-webkit-slider-runnable-track {
  background: transparent;
}
.slider-card .slider-track-wrap input[type=range]::-moz-range-track {
  background: transparent;
}
.slider-card .slider-track-wrap input[type=range] {
  /* Focus ring */
}
.slider-card .slider-track-wrap input[type=range]:focus-visible {
  outline: none;
}
.slider-card .slider-track-wrap input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.35);
}
.slider-card {
  /* Min / Max labels */
}
.slider-card .slider-labels {
  display: flex;
  justify-content: space-between;
}
.slider-card .slider-labels span {
  font-size: 14px;
  color: var(--color-dim-gray);
}
.slider-card {
  /* Live value badge */
}
.slider-card .slider-value-badge {
  position: absolute;
  top: -2.2rem;
  transform: translateX(-50%);
  background: #111827;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.slider-card .slider-value-badge::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #111827;
  border-bottom: 0;
}
.slider-card .slider-track-wrap:hover .slider-value-badge, .slider-card input[type=range]:focus ~ .slider-value-badge {
  opacity: 1;
}

.flex-col-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.lh-36 {
  line-height: 36px !important;
}

.lh-22 {
  line-height: 22px !important;
}

.lh-24 {
  line-height: 24px !important;
}

.lh-28 {
  line-height: 28px !important;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gradient-title, .page-heading {
  font-weight: 600;
  font-size: 128px;
  letter-spacing: 8px !important;
  background: linear-gradient(90deg, var(--color-coral) 10%, var(--color-indigo) 50%, var(--color-coral) 90%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  animation: gradientFlow 10s linear infinite;
}
@media (max-width: 1440px) {
  .gradient-title, .page-heading {
    font-size: 84px;
  }
}
@media (max-width: 1024px) {
  .gradient-title, .page-heading {
    font-size: 60px;
    font-weight: 600;
    letter-spacing: 4px !important;
  }
}
@media (max-width: 768px) {
  .gradient-title, .page-heading {
    font-size: 50px;
  }
}

.page-heading {
  font-size: 84px;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.15 !important;
}
@media (max-width: 768px) {
  .page-heading {
    font-size: 48px;
  }
}
@media (max-width: 650px) {
  .page-heading {
    font-size: 40px;
  }
}

.bg-pattern {
  position: relative;
}
.bg-pattern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 680px;
  width: 100%;
  background-image: url("../../public/themes/advanced/images/bg-pattern.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
@media (max-width: 1280px) {
  .bg-pattern::before {
    height: 520px;
    background-size: cover;
  }
}

.stroke-title span, .page-stroke-heading span {
  position: relative;
  display: inline-block;
  color: transparent;
  background: linear-gradient(90deg, var(--color-coral) 10%, var(--color-indigo) 50%, var(--color-coral) 90%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 10s linear infinite;
  font-size: 128px;
  font-weight: 300;
  letter-spacing: 8px !important;
  text-transform: uppercase;
}
@media (max-width: 1440px) {
  .stroke-title span, .page-stroke-heading span {
    font-size: 84px;
  }
}
@media (max-width: 1024px) {
  .stroke-title span, .page-stroke-heading span {
    font-size: 60px;
    letter-spacing: 4px !important;
  }
}
@media (max-width: 768px) {
  .stroke-title span, .page-stroke-heading span {
    font-size: 50px;
  }
}
.stroke-title span::before, .page-stroke-heading span::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.9);
  transform: translate(-2px, -2px);
}
@media (max-width: 768px) {
  .stroke-title span::before, .page-stroke-heading span::before {
    stroke-width: 0.5px;
  }
}
.stroke-title span::after, .page-stroke-heading span::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.9);
  transform: translate(2px, 2px);
}
@media (max-width: 768px) {
  .stroke-title span::after, .page-stroke-heading span::after {
    stroke-width: 0.5px;
  }
}

.page-stroke-heading span {
  font-size: 84px;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.page-stroke-heading span::before {
  content: attr(data-text);
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.9);
  transform: translate(-1.5px, -1.5px);
}
.page-stroke-heading span::after {
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.9);
  transform: translate(1.5px, 1.5px);
}
@media (max-width: 768px) {
  .page-stroke-heading span {
    font-size: 48px;
  }
}
@media (max-width: 650px) {
  .page-stroke-heading span {
    font-size: 40px !important;
  }
}

:where(:lang(fr)) .gradient-title, :where(:lang(fr)) .page-heading {
  font-size: 128px;
}
@media (max-width: 1900px) {
  :where(:lang(fr)) .gradient-title, :where(:lang(fr)) .page-heading {
    font-size: 94px;
  }
}
@media (max-width: 1440px) {
  :where(:lang(fr)) .gradient-title, :where(:lang(fr)) .page-heading {
    font-size: 64px;
  }
}
@media (max-width: 1024px) {
  :where(:lang(fr)) .gradient-title, :where(:lang(fr)) .page-heading {
    font-size: 46px;
  }
}
@media (max-width: 499px) {
  :where(:lang(fr)) .gradient-title, :where(:lang(fr)) .page-heading {
    font-size: 40px;
  }
}
:where(:lang(fr)) .stroke-title span, :where(:lang(fr)) .page-stroke-heading span {
  font-size: 128px;
}
@media (max-width: 1900px) {
  :where(:lang(fr)) .stroke-title span, :where(:lang(fr)) .page-stroke-heading span {
    font-size: 94px;
  }
}
@media (max-width: 1440px) {
  :where(:lang(fr)) .stroke-title span, :where(:lang(fr)) .page-stroke-heading span {
    font-size: 64px;
  }
}
@media (max-width: 1024px) {
  :where(:lang(fr)) .stroke-title span, :where(:lang(fr)) .page-stroke-heading span {
    font-size: 46px;
  }
}
@media (max-width: 499px) {
  :where(:lang(fr)) .stroke-title span, :where(:lang(fr)) .page-stroke-heading span {
    font-size: 40px;
  }
}
:where(:lang(fr)) .page-heading {
  font-size: 80px;
}
@media (max-width: 768px) {
  :where(:lang(fr)) .page-heading {
    font-size: 42px;
  }
}
@media (max-width: 650px) {
  :where(:lang(fr)) .page-heading {
    font-size: 38px;
  }
}
:where(:lang(fr)) .page-stroke-heading span {
  font-size: 80px;
}
@media (max-width: 768px) {
  :where(:lang(fr)) .page-stroke-heading span {
    font-size: 42px;
  }
}
@media (max-width: 650px) {
  :where(:lang(fr)) .page-stroke-heading span {
    font-size: 38px !important;
  }
}

.gradient-divider {
  display: inline-block;
  margin: 40px 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-coral), var(--color-indigo), transparent);
}

.vertical-separator {
  display: flex;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-coral) 0%, var(--color-indigo) 100%);
  clip-path: polygon(50% 0%, 65% 15%, 75% 50%, 65% 85%, 50% 100%, 35% 85%, 25% 50%, 35% 15%);
}

.animated-gradient-bg {
  background: radial-gradient(at 20% 30%, var(--color-coral-light-hover) 0%, transparent 50%), radial-gradient(at 80% 20%, var(--color-indigo-light-hover) 0%, transparent 50%), radial-gradient(at 50% 80%, var(--color-indigo-light-hover) 0%, transparent 50%), radial-gradient(at 90% 70%, var(--color-coral-light-hover) 0%, transparent 50%), radial-gradient(at 10% 85%, rgba(255, 22, 111, 0.135) 0%, transparent 50%), radial-gradient(at 85% 90%, rgba(177, 250, 99, 0.25) 0%, transparent 50%);
  background-size: 200% 200%;
  animation: animationBg 12s ease-in-out infinite;
}

.horizontal-text-saperator {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.horizontal-text-saperator::before, .horizontal-text-saperator::after {
  content: "";
  display: inline-flex;
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #ee2a7b);
}
.horizontal-text-saperator::after {
  background: linear-gradient(to left, transparent, #ee2a7b);
}

.hover-underline {
  width: max-content;
  background: linear-gradient(currentColor 0 0) var(--p, 0) 100%/var(--d, 0) 1px no-repeat;
  transition: 0.3s, background-position 0s 0.3s;
}
.hover-underline:hover {
  --d: 100%;
  --p: 100%;
}

.social-icon {
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background-color: #f7f7f7;
  transition: all ease-in 0.2s;
}
.social-icon img {
  transition: all ease-in 0.2s;
}
.social-icon:hover img {
  filter: invert(1) brightness(100) !important;
}

.instagram-icon:hover {
  background-color: #ee2a7b !important;
  cursor: pointer;
}

.facebook-icon:hover {
  background-color: #1877f2 !important;
  cursor: pointer;
}

.x-icon:hover {
  background-color: black !important;
  cursor: pointer;
}

.linkedin-icon:hover {
  background-color: #0077b5 !important;
  cursor: pointer;
}

.google-icon:hover {
  background-color: rgba(66, 133, 244, 0.3607843137);
  cursor: pointer;
}
.google-icon:hover img {
  filter: none !important;
}

.primary-btn, .primary-icon-btn {
  width: 154px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  text-wrap: nowrap;
  padding: 8px;
  font-size: 18px;
  transition: border-radius 0.3s ease;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
@media (max-width: 375px) {
  .primary-btn, .primary-icon-btn {
    text-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .primary-btn, .primary-icon-btn {
    height: 42px;
    font-size: 16px;
    padding: 6px;
  }
}
.primary-btn:hover, .primary-icon-btn:hover {
  border-radius: 0;
}
.primary-btn:disabled, .primary-icon-btn:disabled {
  background-color: var(--color-disabled) !important;
  color: black;
  cursor: not-allowed;
}
.primary-icon-btn {
  width: auto;
  padding: 8px;
  line-height: normal !important;
}
@media (max-width: 768px) {
  .primary-icon-btn {
    padding: 12px;
  }
  .primary-icon-btn img {
    height: 16px;
    width: 16px;
  }
}
.primary-icon-btn img {
  height: 20px;
  width: 20px;
  flex-shrink: 0;
}
.primary-icon-btn svg {
  flex-shrink: 0;
}
.primary-btn > span {
  display: block;
  position: relative;
  transition: transform 0.3s;
  transform: translateY(0px);
  overflow: hidden;
}
.primary-btn > span > span {
  display: block;
  line-height: normal !important;
}
.primary-btn:hover > span {
  transform: translateY(0px);
}
.primary-btn:hover > span > span {
  animation: MoveUpInitial 0.15s forwards, MoveUpEnd 0.15s forwards 0.15s;
}

@media (max-width: 639.98px) {
  :lang(es) .send-email-all-btn {
    height: auto;
    text-wrap: wrap;
    white-space: normal;
  }
}

.gradient-button {
  background: linear-gradient(90deg, var(--color-coral) 0%, var(--color-indigo) 100%);
}

.coral-btn {
  background-color: var(--color-coral);
  color: white;
}

.dark-btn {
  color: white;
  background-color: black;
}

.indigo-btn {
  color: white;
  background-color: var(--color-indigo);
}

.light-indigo-btn {
  color: var(--color-indigo);
  background-color: var(--color-indigo-light-hover);
}

.lime-neon-btn {
  color: black;
  background-color: var(--color-lime-neon);
}

.pink-btn {
  color: white;
  background-color: var(--color-pink);
}

.dim-gray-btn {
  color: white;
  background-color: #696969;
}

.white-btn {
  color: black;
  background-color: white;
}

.success-btn {
  background-color: var(--color-success);
  color: white;
}

.animated-border {
  background: linear-gradient(90deg, var(--color-coral) 10%, var(--color-indigo) 50%, var(--color-coral) 90%);
  background-size: 200% 100%;
  animation: gradientFlow 3s linear infinite;
}

.scoop-badge {
  display: inline-block;
  background: unset;
  border: unset;
  padding: unset;
  appearance: unset;
  text-decoration: none;
  --bg-color: transparent;
  color: #fff;
}
.scoop-badge-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  background: var(--bg-color);
  --mask: radial-gradient(
      calc(8px - 1.8px) at 8px 8px,
      #0000 98%,
      #000
    ) -8px -8px;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}
.scoop-badge-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-clip: padding-box;
}
.scoop-badge-animated .scoop-badge-inner::before {
  background: radial-gradient(8px at 8px 8px, rgba(0, 0, 0, 0) calc(98% - 1.8px), var(--color-lime-neon) calc(100% - 1.8px) 98%, rgba(0, 0, 0, 0)) -8px -8px, linear-gradient(90deg, var(--color-lime-neon), #fff, var(--color-lime-neon)) 50%/200% 100%, var(--bg-color);
  --mask:
    radial-gradient(
        8px at 8px 8px,
        #0000 calc(98% - 1.8px),
        #000 calc(100% - 1.8px) 98%,
        #0000
      ) -8px -8px,
    linear-gradient(90deg, #000 1.8px, #0000 0 calc(100% - 1.8px), #000 0)
      50% / 100% calc(100% - 20px + 8px) no-repeat,
    linear-gradient(#000 1.8px, #0000 0 calc(100% - 1.8px), #000 0) 50% /
      calc(100% - 20px + 8px) 100% no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  animation: scoopAnimation 2s linear infinite;
}
.scoop-badge-static .scoop-badge-inner::before {
  background: radial-gradient(8px at 8px 8px, rgba(0, 0, 0, 0) calc(98% - 1.8px), var(--color-lime-neon) calc(100% - 1.8px) 98%, rgba(0, 0, 0, 0)) -8px -8px, linear-gradient(var(--color-lime-neon) 0 0);
  --mask:
    radial-gradient(
        8px at 8px 8px,
        #0000 calc(98% - 1.8px),
        #000 calc(100% - 1.8px) 98%,
        #0000
      ) -8px -8px,
    linear-gradient(90deg, #000 1.8px, #0000 0 calc(100% - 1.8px), #000 0)
      50% / 100% calc(100% - 20px + 8px) no-repeat,
    linear-gradient(#000 1.8px, #0000 0 calc(100% - 1.8px), #000 0) 50% /
      calc(100% - 20px + 8px) 100% no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

.svg-stroke path {
  stroke: currentColor;
}
.svg-fill path {
  fill: currentColor;
}

.tooltip-info {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.tooltip-info::before, .tooltip-info::after {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 50;
}
.tooltip-info::after {
  content: attr(data-info);
  background: #333;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 6px;
  max-width: 210px;
  width: max-content;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
}
.tooltip-info::before {
  content: "";
  border-style: solid;
}
.tooltip-info:hover {
  z-index: 60;
}
.tooltip-info:hover::before, .tooltip-info:hover::after {
  opacity: 1;
  visibility: visible;
}
.tooltip-info::after, .tooltip-info[data-info-pos=top]::after {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip-info::before, .tooltip-info[data-info-pos=top]::before {
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-color: #333 transparent transparent;
}
.tooltip-info[data-info-pos=top-right]::after {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip-info[data-info-pos=top-right]::before {
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-color: #333 transparent transparent;
}
@media (max-width: 650px) {
  .tooltip-info[data-info-pos=top-right]::after {
    left: auto;
    right: -22px;
    transform: translateX(0);
  }
  .tooltip-info[data-info-pos=top-right]::before {
    left: auto;
    right: 2px;
    transform: translateX(0);
  }
}
.tooltip-info[data-info-pos=top-right-full]::after {
  bottom: calc(100% + 8px);
  left: auto;
  right: -22px;
  transform: translateX(0);
}
.tooltip-info[data-info-pos=top-right-full]::before {
  bottom: calc(100% + 2px);
  left: auto;
  right: 2px;
  transform: translateX(0);
  border-width: 6px 6px 0;
  border-color: #333 transparent transparent;
}
.tooltip-info[data-info-pos=bottom]::after {
  top: calc(100% + 10px);
  bottom: unset;
  left: 50%;
  transform: translateX(-50%);
  min-width: max-content !important;
}
.tooltip-info[data-info-pos=bottom]::before {
  top: calc(100% + 4px);
  bottom: unset;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 6px 6px;
  border-color: transparent transparent #333;
}
.tooltip-info[data-info-pos=right]::after {
  left: calc(100% + 8px);
  bottom: unset;
  top: 50%;
  transform: translateY(-50%);
}
.tooltip-info[data-info-pos=right]::before {
  left: calc(100% + 2px);
  bottom: unset;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 6px 6px 0;
  border-color: transparent #333 transparent transparent;
}
.tooltip-info[data-info-pos=left]::after {
  right: calc(100% + 8px);
  left: unset;
  bottom: unset;
  top: 50%;
  transform: translateY(-50%);
}
.tooltip-info[data-info-pos=left]::before {
  right: calc(100% + 2px);
  left: unset;
  bottom: unset;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent #333;
}

.tooltip-wrapper {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}
.tooltip-wrapper:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}
.tooltip-text {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 6px;
  width: 210px;
  line-height: 1.4 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 99999;
}
@media (max-width: 768px) {
  .tooltip-text {
    width: 210px;
  }
}
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 6px 6px 0;
  border-color: #333 transparent transparent;
}

.swiper {
  cursor: grab;
}
.swiper:active {
  cursor: grabbing;
}

.legend-bars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
@media (max-width: 650px) {
  .legend-bars {
    gap: 4px;
  }
}
.legend-bars span {
  height: 18px;
  width: 1.5px;
  background: #111;
  border-radius: 2px;
  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s ease;
}
@media (max-width: 650px) {
  .legend-bars span {
    height: 12px;
    width: 1px;
  }
}
.legend-bars span:nth-child(5n) {
  width: 2.5px;
}
@media (max-width: 650px) {
  .legend-bars span:nth-child(5n) {
    width: 1.5px;
  }
}
.legend-bars span.is-active, .legend-bars span.is-l1 {
  height: 38px;
}
@media (max-width: 650px) {
  .legend-bars span.is-active, .legend-bars span.is-l1 {
    height: 24px;
  }
}
.legend-bars span.is-l2 {
  height: 36px;
}
@media (max-width: 650px) {
  .legend-bars span.is-l2 {
    height: 22px;
  }
}
.legend-bars span.is-l3 {
  height: 34px;
}
@media (max-width: 650px) {
  .legend-bars span.is-l3 {
    height: 21px;
  }
}
.legend-bars span.is-l4 {
  height: 32px;
}
@media (max-width: 650px) {
  .legend-bars span.is-l4 {
    height: 20px;
  }
}
.legend-bars span.is-l5 {
  height: 30px;
  opacity: 1;
}
@media (max-width: 650px) {
  .legend-bars span.is-l5 {
    height: 19px;
  }
}
.legend-bars span.is-l6 {
  height: 28px;
}
@media (max-width: 650px) {
  .legend-bars span.is-l6 {
    height: 17px;
  }
}
.legend-bars span.is-l7 {
  height: 26px;
}
@media (max-width: 650px) {
  .legend-bars span.is-l7 {
    height: 15px;
  }
}
.legend-bars span.is-far {
  height: 22px;
}
@media (max-width: 650px) {
  .legend-bars span.is-far {
    height: 12px;
  }
}

.animate-float {
  animation: floatUpDown 1.5s ease-in-out infinite;
}

.animate-float-delay {
  animation-delay: 0.75s;
}

.animate-border-grow {
  animation: borderGrowShadow 1.5s ease-out infinite;
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.box-shadow-dual {
  box-shadow: 0px 4px 30px 5px rgba(123, 126, 231, 0.3);
  box-shadow: 4px 0px 30px 5px rgba(255, 109, 79, 0.3);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}
@media (max-width: 650px) {
  .modal-backdrop {
    padding: 8px;
  }
}

/* ================= HEADER styles ================= */
/* ================= HEADER styles ================= */
.header-right-section::before {
  content: "";
  position: absolute;
  top: -80px;
  bottom: 0;
  left: 0;
  width: 106%;
  height: 144%;
  background-image: url("../../public/themes/advanced/images/header-bg.png");
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
@media (max-width: 768px) {
  .header-right-section::before {
    display: none;
  }
}
.header-wrapper {
  width: 576px;
  max-width: calc(100% - 24px);
  overflow: hidden;
  transition: width 0.45s ease;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}
.header-wrapper.expanding {
  width: 1026px;
}
.header-wrapper.expanded {
  max-height: 2000px;
}
@media (max-width: 768px) {
  .header-wrapper.expanded {
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.header-wrapper.expanded .header-nav-items-wrapper {
  opacity: 1;
  transform: translateY(0);
  margin-top: 15px;
  overflow: visible;
}
.header-wrapper.expanded .header-email-icon {
  width: auto;
  gap: 10px;
  margin-right: 190px;
}
@media (max-width: 768px) {
  .header-wrapper.expanded .header-email-icon {
    margin-right: 0;
  }
}
.header-wrapper.expanded .header-email-icon-text {
  display: flex;
}
@media (max-width: 768px) {
  .header-wrapper.expanded .header-email-icon-text {
    display: none !important;
  }
}
.header-nav-items-wrapper {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition: max-height 0.5s ease, opacity 0.3s ease, transform 0.3s ease;
}
@media (max-width: 768px) {
  .header-nav-items-wrapper {
    flex-direction: column;
    gap: 0;
  }
}
@media (max-width: 768px) {
  .header-nav-items-wrapper .header-right-section {
    order: -1;
  }
  .header-nav-items-wrapper .header-nav-col {
    order: 1;
  }
}
.header-email-icon {
  width: 28px;
  text-wrap: nowrap;
  overflow: hidden;
  gap: 0;
  cursor: pointer;
  transition: margin-right ease-in 0.2s;
}
.header-email-icon-text {
  display: none;
}

@media (max-width: 768px) {
  .header-nav-col {
    width: 100% !important;
    margin-top: 8px !important;
  }
  .header-nav-items-wrapper ul {
    font-size: 15px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .header-nav-items-wrapper li {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .header-socials-block {
    margin-top: 12px !important;
  }
  .header-right-section {
    width: 100% !important;
    margin-top: 8px !important;
    padding-bottom: 16px;
  }
  .header-right-section > .flex.items-center.justify-center.gap-5 {
    justify-content: flex-start !important;
    gap: 12px !important;
  }
  .header-right-section .header-cta-block {
    margin-top: 20px !important;
    align-items: flex-start !important;
  }
  .header-right-section .header-cta-block p {
    font-size: 20px !important;
    margin-bottom: 16px !important;
    text-align: left !important;
  }
  .header-right-section > .flex.items-center.justify-between.gap-5 > p {
    font-size: 18px !important;
  }
  .header-right-section .mb-0.\!text-coral {
    font-size: 16px !important;
  }
  .header-right-section .primary-icon-btn {
    font-size: 14px !important;
    height: 40px !important;
  }
  .header-nav-items-wrapper .primary-btn {
    width: 120px !important;
    height: 38px !important;
    font-size: 14px !important;
  }
}
.list-link, .discover-category.active .discover-category-label {
  position: relative;
  cursor: pointer;
}
.list-link::after, .discover-category.active .discover-category-label::after {
  content: "";
  display: inline-block;
  height: 16px;
  width: 0;
  margin-right: 0;
  background-color: var(--color-coral);
  mask-image: url("../../public/themes/advanced/svgs/arrow-right.svg");
  mask-position: center;
  mask-size: 16px;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("../../public/themes/advanced/svgs/arrow-right.svg");
  -webkit-mask-position: center;
  -webkit-mask-size: 16px;
  -webkit-mask-repeat: no-repeat;
  vertical-align: middle;
  overflow: hidden;
  transition: width 0.3s ease, margin-left 0.3s ease;
}
.list-link:hover::after, .discover-category.active .discover-category-label:hover::after {
  width: 16px;
  margin-left: 6px;
}
.list-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
}
.list-link-icon img {
  height: 18px;
  width: auto;
  object-fit: contain;
}

.hamburger {
  width: 20px;
  height: 20px;
  position: relative;
}
@media (max-width: 768px) {
  .hamburger {
    height: 18px;
    width: 18px;
  }
}
.hamburger span {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
  left: 0;
  transition: transform 0.4s ease, top 0.4s ease;
  border-radius: 4px !important;
}
.hamburger span:nth-child(1) {
  top: 4px;
}
.hamburger span:nth-child(2) {
  top: 12px;
}
.hamburger.active span:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  top: 8px;
  transform: rotate(-45deg);
}

.logout-btn {
  background-color: #000;
  height: 28px;
  width: 28px;
  border-radius: 4px;
  transition: all ease-in 0.2s;
  border: 1px solid transparent;
  cursor: pointer;
}
.logout-btn img {
  height: 15px;
  width: 15px;
  transition: all ease-in 0.2s;
}
.logout-btn:hover {
  background-color: white;
  border: 1px solid black;
}
.logout-btn:hover img {
  filter: invert(1) brightness(0);
}

.profile-img-wrapper {
  height: 42px;
  width: 42px;
  border-radius: 50%;
}
.profile-img-wrapper img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ================= Footer styles ================= */
.qr-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("../../public/themes/advanced/svgs/qr-bg.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  gap: 16px;
  width: 196px;
  height: 202px;
}
.qr-placeholder {
  width: 92px;
  height: 92px;
  background: #ffffff;
  border-radius: 16px;
}

.footer-links li {
  width: max-content;
  background: linear-gradient(white 0 0) var(--p, 0) 100%/var(--d, 0) 1px no-repeat;
  transition: 0.3s, background-position 0s 0.3s;
}
.footer-links li:hover {
  --d: 100%;
  --p: 100%;
  cursor: pointer;
}
.footer-links li a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.language-switcher-wrapper {
  background-image: url("../../public/themes/advanced/svgs/language-swich.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: white;
}

.footer-bg {
  position: relative;
}
.footer-bg::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 700px;
  height: 550px;
  background-image: url("../../public/themes/advanced/images/header-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 768px) {
  .footer-bg::before {
    display: none;
  }
}

/* ================= Homepage styles ================= */
.hero-section {
  position: relative;
  min-height: clamp(560px, 100vh, 1160px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
  z-index: 1;
  opacity: 0.3;
  backdrop-filter: blur(500px);
  -webkit-backdrop-filter: blur(500px);
}
.hero-section--image::before {
  background: linear-gradient(90deg, var(--color-coral) 10%, var(--color-indigo) 50%, var(--color-coral) 90%);
  animation: gradientFlow 10s linear infinite;
  opacity: 0.25;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-section-title {
  font-size: 110px;
  line-height: 1.1 !important;
  text-align: center;
  background: linear-gradient(90deg, var(--color-coral) 10%, var(--color-indigo) 50%, var(--color-coral) 90%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 10s linear infinite;
}
@media (max-width: 1440px) {
  .hero-section-title {
    font-size: 90px;
  }
}
@media (max-width: 1280px) {
  .hero-section-title {
    font-size: 72px;
  }
}
@media (max-width: 768px) {
  .hero-section-title {
    font-size: 56px;
    line-height: 50px !important;
  }
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 3;
}
.hero-overlay--image {
  background-image: url("../../public/themes/advanced/images/bnw-overlay.png");
}
.hero-content {
  position: relative;
  z-index: 4;
}

.spotlight-search-wrapper {
  box-shadow: 0px 4px 30px 5px rgba(var(--color-indigo-rgb), 0.3), 4px 0px 30px 5px rgba(var(--color-coral-rgb), 0.3);
}

.svg-brand-gradient stop:first-child {
  stop-color: var(--color-coral);
}

.svg-brand-gradient stop:last-child {
  stop-color: var(--color-indigo);
}

.location-suggestion-box {
  height: 86px;
  width: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 14px;
  gap: 14px;
  border-radius: 10px;
  background-color: #f7f7f7;
  flex-shrink: 0;
}

.faq-item {
  transition: all 0.3s ease;
  position: relative;
}
.faq-item:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-coral), var(--color-indigo), transparent);
}
.faq-item.active .faq-answer {
  max-height: 400px;
  padding: 0 32px 24px 32px;
}
.faq-item.active .faq-icon::before {
  background: #e91e63;
}
.faq-item.active .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  cursor: pointer;
  text-align: left;
  background: transparent;
  border: 0;
  transition: all 0.3s ease;
}
.faq-question h3 {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  padding-right: 20px;
}
.faq-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
  transition: transform 0.3s ease;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ee2a7b;
  transition: all 0.3s ease;
}
.faq-icon::before {
  width: 20px;
  height: 1.5px;
}
.faq-icon::after {
  width: 1.5px;
  height: 20px;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-answer p {
  color: black;
  font-size: 16px;
  line-height: 26px;
  margin: 0;
}

.faqs-bottom-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% -30%, rgba(var(--color-indigo-rgb), 0.25) 0%, rgba(var(--color-indigo-rgb), 0.25) 6%, rgba(var(--color-indigo-rgb), 0.15) 10%, transparent 14%), linear-gradient(180deg, rgba(var(--color-indigo-rgb), 0.95) 0%, #1a1b22 50%, #111217 100%);
}
.faqs-bottom-section::before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  height: 100%;
  width: 100%;
  background-image: url("../../public/themes/advanced/images/faq-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
  pointer-events: none;
}
.faqs-bottom-section > * {
  position: relative;
  z-index: 1;
}

.text-lime-neon {
  color: var(--color-lime-neon);
}

.text-coral-on-dark {
  color: var(--color-coral-on-dark, var(--color-coral));
}

@media (max-width: 768px) {
  .faq-question {
    padding: 20px 24px;
  }
  .faq-question h3 {
    font-size: 16px;
  }
  .faq-item.active .faq-answer {
    padding: 0 24px 20px 24px;
  }
  .faq-answer p {
    font-size: 14px;
  }
}
.discover-category-label {
  color: #000;
  transition: all 0.3s ease;
}
.discover-category-label::after {
  content: "";
  width: 0;
  transition: all 0.3s ease;
}
.discover-categories:has(.discover-category.active) .discover-category:not(.active) .discover-category-label {
  color: #fff;
}
.discover-categories:has(.discover-category.active) .discover-icon-circle {
  background-color: #fff;
}
.discover-category {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
  transition: all 0.3s ease;
}
.discover-category.active .discover-category-label {
  color: var(--color-lime-neon);
  transition: all 0.3s ease;
}
.discover-category.active .discover-category-label::after {
  width: 16px;
  height: 14px;
  margin-left: 8px;
  background-color: var(--color-lime-neon);
}
.discover-icon-circle {
  box-shadow: 0px 6px 4px 0px rgba(0, 0, 0, 0.15) inset;
  transition: background-color 0.3s ease;
}

.event-card-wrapper {
  height: 100%;
}
.event-card-wrapper .event-card {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  transform-origin: center center;
  box-shadow: 0 5.47px 21.88px 0 rgba(102, 102, 102, 0.1);
}
.event-card-wrapper .event-card:hover {
  transform: translateY(-15px) !important;
  z-index: 10;
}
.event-card-wrapper .event-card::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 74.38%);
  box-shadow: 0px 5.47px 21.88px 0px rgba(102, 102, 102, 0.1);
  pointer-events: none;
}
.event-card-wrapper .event-card::before {
  content: "";
  position: absolute;
  height: 18px;
  left: 0;
  width: 100%;
  bottom: -17px;
  pointer-events: none;
  background-image: url("../../public/themes/advanced/images/ticket-cuts.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.populer-events-swiper {
  padding: 18px 0 !important;
  margin: -30px 0 0 0;
}
.populer-events-swiper .swiper-slide {
  height: auto;
  width: 270px;
  display: flex;
  overflow: visible !important;
}

/* ── Page Loader (matches Default Theme bar-style loader) ────────────────── */
.rip_loader {
  display: none;
  position: fixed;
  background: rgba(219, 219, 221, 0.74);
  backdrop-filter: blur(3px);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  z-index: 99998;
}
.rip_loader.is-visible {
  display: flex;
}

.rip_loader-line {
  width: 7px;
  height: 40px;
  margin: 0 5px;
  border: none;
  border-radius: 20px;
  animation: rip_loader_size 1s infinite linear;
}

@keyframes rip_loader_size {
  0% {
    height: 40px;
  }
  25% {
    height: 60px;
  }
  50% {
    height: 90px;
  }
  75% {
    height: 60px;
  }
  100% {
    height: 40px;
  }
}
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(110%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(110%);
  }
}
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
@media (max-width: 768px) {
  .toast-container {
    top: 16px;
    right: 16px;
    left: 16px;
  }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 300px;
  max-width: 420px;
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  pointer-events: all;
  animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  backdrop-filter: blur(8px);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .toast {
    min-width: unset;
    max-width: 100%;
    width: 100%;
  }
}
.toast::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  border-radius: 0 0 12px 12px;
  animation: toastProgress 5s linear forwards;
  transform-origin: left;
}
.toast.is-hiding {
  animation: toastSlideOut 0.3s ease forwards;
}
.toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.toast__body {
  flex: 1;
}
.toast__body p {
  font-size: 14px;
  line-height: 1.5 !important;
  margin: 0;
  font-weight: 500;
}
.toast__body small {
  font-size: 12px;
  opacity: 0.75;
  display: block;
  margin-top: 2px;
}
.toast__close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  right: 5px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.2s;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  color: inherit;
}
.toast__close:hover {
  opacity: 1;
}
.toast--success {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #bbf7d0;
  color: #14532d;
}
.toast--success::before {
  background: #22c55e;
}
.toast--success .toast__icon {
  color: #16a34a;
}
.toast--danger {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  border-color: #fecdd3;
  color: #881337;
}
.toast--danger::before {
  background: #ef4444;
}
.toast--danger .toast__icon {
  color: #dc2626;
}
.toast--warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fde68a;
  color: #78350f;
}
.toast--warning::before {
  background: #f59e0b;
}
.toast--warning .toast__icon {
  color: #d97706;
}
.toast--info {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #bfdbfe;
  color: #1e3a5f;
}
.toast--info::before {
  background: #3b82f6;
}
.toast--info .toast__icon {
  color: #2563eb;
}

@keyframes toastProgress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
.alert-success,
.alert-danger,
.alert-warning,
.alert-info {
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 99998 !important;
  min-width: 300px;
  max-width: 420px;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
@media (max-width: 768px) {
  .alert-success,
  .alert-danger,
  .alert-warning,
  .alert-info {
    left: 16px !important;
    right: 16px !important;
    min-width: unset !important;
    max-width: unset !important;
  }
}

.alert-success {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  border-color: #bbf7d0 !important;
  color: #14532d !important;
}

.alert-danger {
  background: linear-gradient(135deg, #fff1f2, #ffe4e6) !important;
  border-color: #fecdd3 !important;
  color: #881337 !important;
}

.alert-warning {
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  border-color: #fde68a !important;
  color: #78350f !important;
}

.alert-info {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  border-color: #bfdbfe !important;
  color: #1e3a5f !important;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
table * {
  box-shadow: none !important;
  border: none;
  outline: none !important;
}
table th {
  font-weight: 600 !important;
  background-color: #f5f5f5 !important;
  color: black !important;
  font-size: 14px;
  padding: 14px !important;
  vertical-align: middle !important;
  position: relative;
}
table th::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 55%;
  border-right: 1px solid #d7d7d8;
}
table th:first-child {
  border-radius: 8px 0 0 8px;
}
table th:last-child {
  border-radius: 0 8px 8px 0;
  border-right: none;
}
table th:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 55%;
  border-right: none;
}
@media (max-width: 1280px) {
  table th {
    padding: 14px !important;
  }
}
@media (max-width: 768px) {
  table th {
    font-size: 12px;
    padding: 12px !important;
  }
}
table td {
  font-size: 14px;
  background-color: #f9f9f9 !important;
  color: black !important;
  vertical-align: middle !important;
  padding: 10px 14px !important;
}
@media (max-width: 768px) {
  table td {
    font-size: 12px;
  }
}
table td:first-child {
  border-radius: 8px 0 0 8px;
}
table td:last-child {
  border-radius: 0 8px 8px 0;
}
table tr:has(> td:only-child) > td {
  border-radius: 8px !important;
}

.earning-status {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.earning-status--withdraw {
  color: #ff6d4f;
  border: 1px solid #ff6d4f;
  border-radius: 6px;
  padding: 3px 10px;
}
.earning-status--pending {
  color: #ff6d4f;
}
.earning-status--due {
  color: #e6a817;
}
.earning-status--paid {
  color: #22c55e;
}
.earning-status--cancelled {
  color: #ef4444;
}

.modal-input-field {
  padding: 6.5px 7px !important;
}
.modal-subheading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}
.modal-subheading::before {
  content: "";
  width: 3px;
  height: 20px;
  background: var(--color-coral);
}

.cards-hov {
  transition: all 0.3s ease;
}
.cards-hov:hover {
  background-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.view-order-bg {
  background: url("../../public/themes/advanced/images/view-order-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 110px;
}

.ticket-confirm-bg {
  background: url("../../public/themes/advanced/images/confirm-ticket-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100px;
}

.auth-error-msg {
  display: none;
  background: linear-gradient(135deg, #fff1f2);
  color: var(--color-danger);
  border-radius: 8px;
  border: 1px solid var(--color-danger);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
}

.redactor_organizer-description-input-box {
  min-height: 20px !important;
  height: 80px !important;
}

.redactor_box {
  width: 100% !important;
}

.back-btn {
  border: 1px solid black;
  border-radius: 6px;
  height: 28px !important;
  padding: 4px 8px !important;
  gap: 6px;
  background-color: transparent;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.back-btn svg path {
  transition: all 0.3s ease;
}
.back-btn:hover {
  background: black;
  color: white;
}
.back-btn:hover svg path {
  fill: white !important;
}

.processing-overlay {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
.processing-overlay.is-visible {
  display: flex;
}

.processing-box {
  margin-top: 350px;
  border: 1px solid var(--color-indigo);
  border-radius: 10px;
  padding: 18px 24px;
  text-align: center;
  min-width: 320px;
}

.processing-title {
  font-size: 20px;
  font-weight: 600;
  color: black;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.processing-text {
  font-size: 14px;
  color: black;
}

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.typing-dots span {
  width: 6px;
  height: 6px;
  background: black;
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1.4s infinite ease-in-out;
}
.typing-dots span:nth-child(1) {
  animation-delay: 0s;
}
.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

.passcode-eye-toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

/* ================= Captcha refresh button — spinner state ============= */
.captcha-refresh-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.captcha-refresh-btn.is-loading .captcha-refresh-icon {
  display: none;
}
.captcha-refresh-btn:not(.is-loading) .captcha-refresh-spinner {
  display: none;
}
.captcha-refresh-btn[data-busy=true] {
  pointer-events: none;
  opacity: 0.6;
  cursor: wait;
}

.captcha-refresh-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: captcha-refresh-spin 0.7s linear infinite;
}

@keyframes captcha-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ───────────────────────────────────────────────────────────────
   Ticket Selection Modal — v2 (reference-match)
   Scoped under `.tmv2`. The view uses Tailwind utilities for most
   of the layout / typography / colors; this block only carries
   the few rules that Tailwind cannot express cleanly:
   - table→div display rules (block layout on legacy cells)
   - card grid-template-areas
   - colored left band injected via per-row CSS variable
   - progress-bar gradient
   - cart-divider gradient
   - hidden underlying <select> kept for form submit
   No backend / functionality / AJAX behavior is touched. The
   markup, the qty <select> elements, the form#purchase, the
   promo input + Apply button (re-styled by JS at runtime), the
   buy button and the CSRF flow all remain untouched.
   ─────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   Step 1 / Step 2 SHARED progress bar.
   Promoted out of Step 1's inline <style> block so Step 2 picks
   up the same height (8px), pill rounding, and coral→indigo
   gradient. Both views render `<div class="rc-progress-track">
   <div class="rc-progress-fill"/></div>` in their header.
   ───────────────────────────────────────────────────────────── */
.rc-progress-track {
  height: 8px;
  border-radius: 9999px;
  background: #efefef;
  overflow: hidden;
}

.rc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-coral) 0%, var(--color-indigo) 100%);
  border-radius: 9999px;
}

.tmv2 {
  /* Hide the legacy date line in event_detail (the new header
       carries date + time as pills). */
}
.tmv2 .event_detail-table > .text-center.text-sm.text-darkGray {
  display: none;
}
.tmv2 {
  /* Progress-bar gradient — coral → indigo, matches the
       recurring_event_list_view.php pattern so Step 1 and Step 2
       share a consistent brand fill across modals. Follows the
       Theme Settings primary/secondary colours. */
}
.tmv2 .tmv2-progress__bar,
.tmv2 .rc-progress-fill {
  background: linear-gradient(90deg, var(--color-coral) 0%, var(--color-indigo) 100%);
}
.tmv2 {
  /* Modal subheading: shrink the legacy coral-bar style */
}
.tmv2 .modal-subheading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b6b6b;
  margin: 4px 0 10px;
}
.tmv2 .modal-subheading::before {
  display: none;
}
.tmv2 {
  /* Table → div flow: existing markup uses `.event_view_list`
       (formerly <table>), `.ticket-list` (formerly <tbody>),
       `.ticket-row` (formerly <tr>), `.ticket-cell` (formerly <td>).
       Keep them as block-flow vertical lists. */
}
.tmv2 .event_view_list,
.tmv2 .ticket-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
  border: 0;
  background: transparent;
}
.tmv2 {
  /* Group header row — quiet pill style */
}
.tmv2 .ticket-row.group-tr {
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 14px 0 6px;
}
.tmv2 .ticket-row.group-tr h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2b2b2b;
}
.tmv2 {
  /* Ticket card layout — the LEFT column (ticket name cell,
       which already contains title + pill + description) spans
       all 3 rows; the RIGHT column stacks price / "N left" /
       quantity stepper top-to-bottom. */
}
.tmv2 .ticket-row:not(.group-tr) {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 16px;
  padding: 14px 16px 14px 22px;
  margin: 0 0 14px;
  background: #fff7f5;
  border: 1px solid #f7e1dc;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* Colored left band — comes from per-row CSS variable
         injected by the JS decorator (defaults to coral). */
}
.tmv2 .ticket-row:not(.group-tr)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--tmv2-band, #ff5a5f);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
.tmv2 .ticket-row:not(.group-tr):hover {
  border-color: #f3c8c0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.tmv2 {
  /* LEFT side: title cell already wraps title + pill +
       description (the description div lives inside this cell
       in the original PHP). Span all 3 rows. */
}
.tmv2 .event_view_table_td_ticket_name {
  grid-column: 1;
  grid-row: 1/span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: #111;
  line-height: 1.25;
  min-width: 0;
  /* Description div */
}
.tmv2 .event_view_table_td_ticket_name > div[id^=desc_] {
  font-size: 13px;
  font-weight: 400;
  color: #5b5b5b;
  font-style: italic;
  line-height: 1.4;
  margin-top: 2px;
}
.tmv2 .event_view_table_td_ticket_name > a {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-indigo, #6366f1);
  text-decoration: underline;
}
.tmv2 {
  /* RIGHT column: price → available → qty stacked vertically */
}
.tmv2 .event_view_table_td_price {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-size: 20px;
  font-weight: 800;
  color: #111;
  line-height: 1.1;
  text-align: right;
}
.tmv2 .event_view_table_td_sales_ends {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  font-size: 12px;
  color: #6b6b6b;
  text-align: right;
}
.tmv2 .event_view_table_td_available {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  font-size: 13px;
  font-weight: 500;
  color: #6b6b6b;
  text-align: right;
}
.tmv2 .event_view_table_td_available::after {
  content: " left";
}
.tmv2 .event_view_table_td_quantity {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: end;
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.tmv2 {
  /* Sales-ended / disabled status — pill style */
}
.tmv2 .link-sales-end,
.tmv2 .link-status-disabled {
  font-size: 12px;
  padding: 4px 10px;
  background: #f3f4f6;
  border-radius: 999px;
  font-weight: 600;
  color: #9ca3af !important;
}
.tmv2 {
  /* Hide the underlying qty <select> — kept in the DOM as the
       single source of truth for the form#purchase submit. */
}
.tmv2 .tmv2-hidden-select,
.tmv2 .tmv2-stepper-hosted select.select-pad {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
}
.tmv2 {
  /* ── Free / Paid pill (uniform coral, per Figma) ──────────── */
}
.tmv2 .tmv2-pill--tag {
  display: inline-block;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: capitalize;
  color: #fff;
  background: #ff5a5f;
  border-radius: 999px;
}
.tmv2 {
  /* ── Quantity stepper (Tailwind-purge-proof: pure SCSS) ──── */
}
.tmv2 .tmv2-stepper-hosted {
  display: inline-flex;
}
.tmv2 .tmv2-stepper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tmv2 .tmv2-stepper__value {
  min-width: 24px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: #1f1f1f;
  line-height: 1;
}
.tmv2 .tmv2-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.tmv2 .tmv2-stepper__btn:hover:not(:disabled) {
  filter: brightness(1.08);
}
.tmv2 .tmv2-stepper__btn:active:not(:disabled) {
  transform: translateY(1px);
}
.tmv2 .tmv2-stepper__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.tmv2 .tmv2-stepper__btn--trash {
  border-radius: 8px;
  background: #ff4d4f;
}
.tmv2 .tmv2-stepper__btn--trash svg {
  display: block;
}
.tmv2 .tmv2-stepper__btn--minus,
.tmv2 .tmv2-stepper__btn--plus {
  border-radius: 50%;
  background: #6366f1;
}
.tmv2 {
  /* Tooltip anchor (`.tool_tip_class`) renders empty after the
       <select> — pushed off-screen so it doesn't appear in stepper. */
}
.tmv2 .tmv2-stepper-hosted ~ a.tool_tip_class,
.tmv2 .tmv2-stepper-hosted + .clear,
.tmv2 .event_view_table_td_quantity > .posrel > a.tool_tip_class {
  display: none !important;
}
.tmv2 {
  /* ── Description displayed inline (no View More toggle) ──── */
}
.tmv2 .event_view_table_td_ticket_name > a[onclick*=desc_] {
  display: none !important;
}
.tmv2 .event_view_table_td_ticket_name > div[id^=desc_] {
  display: block !important;
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: #5b5b5b;
  line-height: 1.4;
  margin-top: 4px;
}
.tmv2 {
  /* ── Hide the sales-end date cell (date already shown in
       the header pills above the card grid). ─────────────── */
}
.tmv2 .event_view_table_td_sales_ends {
  display: none !important;
}
.tmv2 {
  /* ── Hide the legacy purple "Buy Tickets" button + label;
       the lime "Continue with N Tickets" in the right column
       is the only buy CTA in v2. ─────────────────────────── */
}
.tmv2 .buy-btn-wrapper {
  display: none !important;
}
.tmv2 .promo-code-wrapper label {
  display: none !important;
}
.tmv2 {
  /* ── Cart count pill stays inline with the title ─────────── */
}
.tmv2 #tmv2CartCount {
  white-space: nowrap;
}
.tmv2 {
  /* ── Cart line item (Tailwind-purge-proof: pure SCSS) ───── */
}
.tmv2 .tmv2-cart__line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 6px 14px;
}
.tmv2 .tmv2-cart__line-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tmv2 .tmv2-cart__line-price {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
}
.tmv2 {
  /* ── Promo / Access-code card ───────────────────────────────
       Shown when the event has any promo or access code (the
       view template gates on getAllPromotionalCode($eid)).
       Carries the soft pink glow shadow + houses the scalloped
       coral badge and the gradient-pill Apply button. */
}
.tmv2 .tmv2-promo-card {
  box-shadow: 0 4px 18px -8px rgba(255, 109, 79, 0.35);
}
.tmv2 .tmv2-promo-badge {
  /* Sized by the inner SVG (40x40); the SVG itself draws the
         scalloped silhouette and the % glyph. text color drives
         the silhouette fill via `currentColor`. */
  color: #ff6d4f;
  line-height: 0;
  filter: drop-shadow(0 2px 6px rgba(255, 109, 79, 0.25));
}
.tmv2 {
  /* Coral gradient pill — used by the Apply button when JS
       moves the existing #promo input + button into the card. */
}
.tmv2 .tmv2-promo-apply {
  background: linear-gradient(90deg, #ff8a6e 0%, #ff6d4f 50%, #f0573a 100%);
  transition: filter 0.15s ease, transform 0.05s ease;
}
.tmv2 .tmv2-promo-apply:hover {
  filter: brightness(1.05);
}
.tmv2 .tmv2-promo-apply:active {
  transform: translateY(1px);
}
.tmv2 {
  /* Cart line — colored left bar driven by --tmv2-band */
}
.tmv2 .tmv2-cart__line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 999px;
  background: var(--tmv2-band, #ccc);
}
.tmv2 {
  /* Gradient divider used inside the cart, just above Total */
}
.tmv2 .tmv2-divider {
  background: linear-gradient(90deg, transparent 0%, #ff7f6e 30%, #f97316 70%, transparent 100%);
}
.tmv2 {
  /* Empty-state visual: dim the standalone Continue button */
}
.tmv2 .tmv2-cart.is-empty ~ #tmv2ContinueBtn,
.tmv2 #tmv2Cart.is-empty + #tmv2ContinueBtn {
  opacity: 0.55;
  pointer-events: none;
}
.tmv2 {
  /* Sticky right column on desktop */
}
@media (min-width: 1024px) {
  .tmv2 .tmv2-aside {
    position: sticky;
    top: 12px;
  }
}
.tmv2 {
  /* Mobile fine-tuning: stack cells vertically inside each card */
}
@media (max-width: 1023px) {
  .tmv2 .ticket-row:not(.group-tr) {
    grid-template-columns: 1fr;
  }
  .tmv2 .event_view_table_td_ticket_name {
    grid-column: 1;
    grid-row: auto;
  }
  .tmv2 .event_view_table_td_price,
  .tmv2 .event_view_table_td_quantity,
  .tmv2 .event_view_table_td_available,
  .tmv2 .event_view_table_td_sales_ends {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }
}

/* =====================================================================
 *  Help-centre FAQs page (advanced/home/faqs.php)
 *  Only the bits Tailwind utilities can't express cleanly: the filter
 *  chips, the category icon badge and the smooth accordion collapse.
 *  Everything else on the page is Tailwind-first.
 * ===================================================================== */
/* Classes are `hc-faq-*` (help-centre) scoped so they never collide with the
   separate per-event `.faq-item` accordion component defined earlier. */
/* Category filter chips */
.hc-faq-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-disabled);
  background: #fff;
  color: #696969;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.hc-faq-chip:hover {
  border-color: var(--color-coral);
}
.hc-faq-chip--active {
  background: var(--color-coral);
  border-color: var(--color-coral);
  color: #fff;
  font-weight: 600;
}

/* Rounded icon badge used on section headers and the contact CTA */
.hc-faq-cat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #fdece6;
}

/* Accordion item */
.hc-faq-item {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hc-faq-item:hover {
  border-color: var(--color-coral);
}
.hc-faq-item .hc-faq-q {
  cursor: pointer;
  background: transparent;
  border: 0;
}
.hc-faq-item {
  /* Smooth height animation via the 0fr → 1fr grid-rows technique so we
     never have to hard-code a max-height. The inner wrapper owns the
     overflow clip and the vertical padding. */
}
.hc-faq-item .hc-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.hc-faq-item .hc-faq-a-inner {
  overflow: hidden;
  min-height: 0;
}
.hc-faq-item {
  /* Compound `&.hc-faq-item--open` (0,2,0) so the coral border beats Tailwind's
     later-loaded, equal-specificity `.border-disabled` utility on the card. */
}
.hc-faq-item.hc-faq-item--open {
  border-color: var(--color-coral);
}
.hc-faq-item.hc-faq-item--open .hc-faq-a {
  grid-template-rows: 1fr;
}
.hc-faq-item.hc-faq-item--open .hc-faq-chevron {
  transform: rotate(180deg);
}
.hc-faq-item {
  /* FAQ answers come from CKEditor — keep their inline lists/links legible. */
}
.hc-faq-item .hc-faq-a-inner p {
  margin-bottom: 8px;
}
.hc-faq-item .hc-faq-a-inner p:last-child {
  margin-bottom: 0;
}
.hc-faq-item .hc-faq-a-inner ul,
.hc-faq-item .hc-faq-a-inner ol {
  margin: 0 0 8px 18px;
  list-style: revert;
}
.hc-faq-item .hc-faq-a-inner a {
  color: var(--color-coral);
  text-decoration: underline;
}

/* Contact CTA panel — subtle tint so it lifts off the gradient background */
.hc-faq-cta {
  background: linear-gradient(90deg, rgba(255, 109, 79, 0.16) 0%, rgba(123, 126, 231, 0.16) 100%);
}

/* =====================================================================
 *  Blogs (advanced/home/blogs.php, blog_detail.php)
 *  `bl-*` scoped classes; only what Tailwind utilities can't express
 *  cleanly. Everything else on the pages is Tailwind-first.
 * ===================================================================== */
/* Blog detail back button — white pill. The theme's `.back-btn` sets a
   transparent background and loads after `.white-btn`, so a compound
   `.back-btn.bl-back-btn` (0,2,0) is needed to actually paint it white. */
.back-btn.bl-back-btn {
  background-color: #fff;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* "Featured" badge over the featured card image */
.bl-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--color-lime-neon, #b6f13a);
  color: #14210a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Featured + small cards — coral border + subtle lift on hover.
   Compound `.bl-item.bl-featured` / `.bl-item.bl-card` (0,2,0) so the coral
   border beats Tailwind's later-loaded, equal-specificity `.border-disabled`. */
.bl-item {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.bl-item.bl-featured:hover,
.bl-item.bl-card:hover {
  border-color: var(--color-coral);
  box-shadow: 0 10px 30px rgba(37, 37, 37, 0.08);
}

.bl-item.bl-card:hover {
  transform: translateY(-3px);
}

/* "Read Article" pill button on the featured card */
.bl-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  height: 34px;
  padding: 0 22px;
  border-radius: 6px;
  background: var(--color-coral);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.bl-item:hover .bl-read-btn {
  opacity: 0.9;
  border-radius: 0;
}

/* Line clamps (guaranteed regardless of Tailwind's line-clamp availability) */
.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
}

/* Disabled action icon — muted with COLOUR, never opacity.
   `opacity` on a .tooltip-info host fades its ::after bubble too, because
   opacity applies to an element and its whole subtree atomically. That made
   the tooltip translucent and let the adjacent buttons read straight through
   it, and no descendant rule can undo it.
   The colours below are the danger red pre-blended 50% with white, so the
   icon and its hover fill look exactly as they did at opacity .5 — but the
   host stays fully opaque, so the tooltip is crisp. */
.me-action-icon.is-disabled {
  cursor: not-allowed;
}

.me-action-icon.icon-danger.is-disabled {
  color: #ff8d99;
  color: color-mix(in srgb, var(--color-danger) 50%, #fff);
}

.me-action-icon.icon-danger.is-disabled:hover {
  background-color: #ff8d99;
  background-color: color-mix(in srgb, var(--color-danger) 50%, #fff);
  color: #fff;
}

/* ── Redactor description output (front end) ──────────────────────────────
   Mirrors css/redactor.css (.redactor_editor) so an event description looks
   the same on the event page as it did inside the editor. Rendered through
   RenderEditorContent() in app/Helpers/custom_helper.php. Inline styles the
   editor writes (font colour, highlight, alignment) are kept as-is. */
.editor-content {
  max-width: 100%;
  color: #000;
  font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.45em;
  overflow-wrap: break-word;
  word-break: normal;
}
.editor-content > :first-child {
  margin-top: 0;
}
.editor-content > :last-child {
  margin-bottom: 0;
}
.editor-content div,
.editor-content p,
.editor-content ul,
.editor-content ol,
.editor-content table,
.editor-content dl,
.editor-content blockquote,
.editor-content pre {
  margin: 0 0 15px;
}
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6 {
  color: #000;
  font-weight: bold;
  margin: 0 0 10px;
  padding: 0;
}
.editor-content h1 {
  font-size: 36px;
  line-height: 40px;
}
.editor-content h2 {
  font-size: 30px;
  line-height: 38px;
  margin-bottom: 15px;
}
.editor-content h3 {
  font-size: 24px;
  line-height: 30px;
}
.editor-content h4 {
  font-size: 18px;
  line-height: 24px;
}
.editor-content h5,
.editor-content h6 {
  font-size: 1em;
}
.editor-content strong,
.editor-content b {
  font-weight: bold;
}
.editor-content em,
.editor-content i {
  font-style: italic;
}
.editor-content u {
  text-decoration: underline;
}
.editor-content del,
.editor-content s,
.editor-content strike {
  text-decoration: line-through;
}
.editor-content a {
  color: #15c;
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.editor-content img,
.editor-content video,
.editor-content iframe,
.editor-content object,
.editor-content embed {
  max-width: 100%;
}
.editor-content img,
.editor-content video {
  display: inline-block;
  width: auto;
  height: auto;
}
.editor-content iframe {
  margin-bottom: 15px;
}
.editor-content hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 0 0 15px;
}
.editor-content blockquote {
  margin-left: 3em;
  font-style: italic;
  color: #777;
}
.editor-content ul,
.editor-content ol {
  padding-left: 2em;
}
.editor-content ul {
  list-style: disc outside;
}
.editor-content ol {
  list-style: decimal outside;
}
.editor-content ul ul,
.editor-content ol ol,
.editor-content ul ol,
.editor-content ol ul {
  margin: 2px;
  padding: 0 0 0 2em;
}
.editor-content ul ul {
  list-style-type: circle;
}
.editor-content ul ul ul {
  list-style-type: square;
}
.editor-content dl dt {
  font-weight: bold;
}
.editor-content dd {
  margin-left: 1em;
}
.editor-content table {
  border-collapse: collapse;
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.editor-content td,
.editor-content th {
  border: 1px solid #ddd;
  padding: 5px;
  vertical-align: top;
}
.editor-content thead td {
  border-bottom: 2px solid #000;
  font-weight: bold;
}
.editor-content code {
  background-color: #d8d7d7;
  font-family: Menlo, Monaco, monospace, sans-serif;
}
.editor-content pre {
  font-family: Menlo, Monaco, monospace, sans-serif;
  font-size: 90%;
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 1em;
  white-space: pre;
  overflow: auto;
}

/* ── Rich-text editor output ───────────────────────────────────────────────
   Tailwind's preflight resets `ol, ul, menu { list-style: none }` site-wide.
   That is right for nav menus and card lists, but it also strips the numbers
   and bullets an organiser typed into an event description — the <li> text
   renders as plain lines with no 1. 2. 3.
   Restore normal list rendering inside editor output only, so the reset keeps
   applying everywhere else. */
.rte-content {
  max-width: 100%;
  color: #242424;
  font-size: 1rem;
  line-height: 1.75;
}
.rte-content > :first-child {
  margin-top: 0;
}
.rte-content > :last-child {
  margin-bottom: 0;
}
.rte-content p,
.rte-content > div {
  margin: 0 0 1rem;
}
.rte-content h1,
.rte-content h2,
.rte-content h3,
.rte-content h4,
.rte-content h5,
.rte-content h6 {
  color: #101010;
  font-weight: 700;
  line-height: 1.25;
  margin: 1.75rem 0 0.75rem;
}
.rte-content h1 {
  font-size: 2rem;
}
.rte-content h2 {
  font-size: 1.625rem;
}
.rte-content h3 {
  font-size: 1.375rem;
}
.rte-content h4 {
  font-size: 1.125rem;
}
.rte-content h5,
.rte-content h6 {
  font-size: 1rem;
}
.rte-content strong,
.rte-content b {
  color: #111;
  font-weight: 700;
}
.rte-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.25rem 0;
  border-radius: 0.75rem;
}
.rte-content figure {
  max-width: 100%;
  margin: 1.25rem 0;
}
.rte-content figure img {
  margin: 0;
}
.rte-content figcaption {
  color: #686868;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  text-align: center;
}
.rte-content a {
  color: var(--color-indigo);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.rte-content hr {
  border: 0;
  border-top: 1px solid #dedede;
  margin: 1.5rem 0;
}
.rte-content blockquote {
  border-left: 3px solid var(--color-coral);
  color: #4c4c4c;
  font-style: italic;
  margin: 1.25rem 0;
  padding-left: 1rem;
}
.rte-content table {
  border-collapse: collapse;
  display: block;
  margin: 1.25rem 0;
  max-width: 100%;
  overflow-x: auto;
}
.rte-content th,
.rte-content td {
  border: 1px solid #dedede;
  padding: 0.625rem 0.75rem;
  text-align: left;
}
.rte-content th {
  background: #f7f7f7;
  font-weight: 700;
}
.rte-content ol,
.rte-content ul {
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}
.rte-content ol {
  list-style: decimal outside;
}
.rte-content ul {
  list-style: disc outside;
}
.rte-content li {
  margin: 0.25rem 0;
}
.rte-content {
  /* Nested levels, matching browser defaults. */
}
.rte-content ol ol {
  list-style: lower-alpha outside;
}
.rte-content ol ol ol {
  list-style: lower-roman outside;
}
.rte-content ul ul {
  list-style: circle outside;
}
.rte-content ul ul ul {
  list-style: square outside;
}

html[data-brand-bg=animated] .animated-gradient-bg {
  background: radial-gradient(at 20% 30%, var(--color-coral-light-hover) 0%, transparent 50%), radial-gradient(at 80% 20%, var(--color-indigo-light-hover) 0%, transparent 50%), radial-gradient(at 50% 80%, var(--color-indigo-light-hover) 0%, transparent 50%), radial-gradient(at 90% 70%, var(--color-coral-light-hover) 0%, transparent 50%);
  background-size: 200% 200%;
  animation: animationBg 12s ease-in-out infinite;
}

html[data-brand-bg=animated_default] .animated-gradient-bg {
  background: radial-gradient(at 20% 30%, rgba(255, 109, 79, 0.16) 0%, transparent 50%), radial-gradient(at 80% 20%, rgba(123, 126, 231, 0.16) 0%, transparent 50%), radial-gradient(at 50% 80%, rgba(123, 126, 231, 0.16) 0%, transparent 50%), radial-gradient(at 90% 70%, rgba(255, 109, 79, 0.16) 0%, transparent 50%), radial-gradient(at 10% 85%, rgba(255, 22, 111, 0.135) 0%, transparent 50%), radial-gradient(at 85% 90%, rgba(177, 250, 99, 0.25) 0%, transparent 50%);
  background-size: 200% 200%;
  animation: animationBg 12s ease-in-out infinite;
}

html[data-brand-bg=static_default] .animated-gradient-bg {
  background: radial-gradient(at 20% 30%, rgba(255, 109, 79, 0.16) 0%, transparent 50%), radial-gradient(at 80% 20%, rgba(123, 126, 231, 0.16) 0%, transparent 50%), radial-gradient(at 50% 80%, rgba(123, 126, 231, 0.16) 0%, transparent 50%), radial-gradient(at 90% 70%, rgba(255, 109, 79, 0.16) 0%, transparent 50%), radial-gradient(at 10% 85%, rgba(255, 22, 111, 0.135) 0%, transparent 50%), radial-gradient(at 85% 90%, rgba(177, 250, 99, 0.25) 0%, transparent 50%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  animation: none;
}

html[data-brand-bg=static_custom] .animated-gradient-bg {
  background: radial-gradient(at 20% 30%, var(--color-coral-light-hover) 0%, transparent 50%), radial-gradient(at 80% 20%, var(--color-indigo-light-hover) 0%, transparent 50%), radial-gradient(at 50% 80%, var(--color-indigo-light-hover) 0%, transparent 50%), radial-gradient(at 90% 70%, var(--color-coral-light-hover) 0%, transparent 50%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  animation: none;
}

html[data-brand-bg=solid] .animated-gradient-bg {
  background: var(--color-coral);
  animation: none;
}

html[data-brand-bg=solid][data-brand-bg-solid=secondary] .animated-gradient-bg {
  background: var(--color-indigo);
}

html[data-brand-bg=solid][data-brand-bg-solid=custom] .animated-gradient-bg {
  background: var(--brand-bg-solid, var(--color-coral));
}

html[data-brand-heading=animated_default] .gradient-title, html[data-brand-heading=animated_default] .page-heading, html[data-brand-heading=animated_default] .hero-section-title, html[data-brand-heading=animated_default] .stroke-title span, html[data-brand-heading=animated_default] .page-stroke-heading span, html[data-brand-heading=animated_default] .event-details-gradient-title {
  background-image: linear-gradient(90deg, #ff6d4f 10%, #7b7ee7 50%, #ff6d4f 90%);
}

html[data-brand-heading=static_default] .gradient-title, html[data-brand-heading=static_default] .page-heading, html[data-brand-heading=static_default] .hero-section-title, html[data-brand-heading=static_default] .stroke-title span, html[data-brand-heading=static_default] .page-stroke-heading span, html[data-brand-heading=static_default] .event-details-gradient-title {
  background-image: linear-gradient(90deg, #ff6d4f 10%, #7b7ee7 50%, #ff6d4f 90%);
  background-position: 0% 50%;
  animation: none;
}

html[data-brand-heading=static_custom] .gradient-title, html[data-brand-heading=static_custom] .page-heading, html[data-brand-heading=static_custom] .hero-section-title, html[data-brand-heading=static_custom] .stroke-title span, html[data-brand-heading=static_custom] .page-stroke-heading span, html[data-brand-heading=static_custom] .event-details-gradient-title {
  background-position: 0% 50%;
  animation: none;
}

html[data-brand-heading=solid] .gradient-title, html[data-brand-heading=solid] .page-heading, html[data-brand-heading=solid] .hero-section-title, html[data-brand-heading=solid] .stroke-title span, html[data-brand-heading=solid] .page-stroke-heading span, html[data-brand-heading=solid] .event-details-gradient-title {
  background-image: none;
  color: var(--color-coral);
  -webkit-text-fill-color: var(--color-coral);
  animation: none;
}

html[data-brand-heading=solid][data-brand-heading-solid=secondary] .gradient-title, html[data-brand-heading=solid][data-brand-heading-solid=secondary] .page-heading, html[data-brand-heading=solid][data-brand-heading-solid=secondary] .hero-section-title, html[data-brand-heading=solid][data-brand-heading-solid=secondary] .stroke-title span, html[data-brand-heading=solid][data-brand-heading-solid=secondary] .page-stroke-heading span, html[data-brand-heading=solid][data-brand-heading-solid=secondary] .event-details-gradient-title {
  color: var(--color-indigo);
  -webkit-text-fill-color: var(--color-indigo);
}

html[data-brand-heading=solid][data-brand-heading-solid=custom] .gradient-title, html[data-brand-heading=solid][data-brand-heading-solid=custom] .page-heading, html[data-brand-heading=solid][data-brand-heading-solid=custom] .hero-section-title, html[data-brand-heading=solid][data-brand-heading-solid=custom] .stroke-title span, html[data-brand-heading=solid][data-brand-heading-solid=custom] .page-stroke-heading span, html[data-brand-heading=solid][data-brand-heading-solid=custom] .event-details-gradient-title {
  color: var(--brand-heading-solid, var(--color-coral));
  -webkit-text-fill-color: var(--brand-heading-solid, var(--color-coral));
}

html[data-brand-button=static_default] .gradient-button, html[data-brand-button=static_default] .sidebar-step-active, html[data-brand-button=static_default] .ed-sidebar-step-active, html[data-brand-button=static_default] .my-account-sidebar-step-active {
  background: linear-gradient(90deg, #ff6d4f 0%, #7b7ee7 100%);
}

html[data-brand-button=static_custom] .gradient-button, html[data-brand-button=static_custom] .sidebar-step-active, html[data-brand-button=static_custom] .ed-sidebar-step-active, html[data-brand-button=static_custom] .my-account-sidebar-step-active {
  background: linear-gradient(90deg, var(--color-coral) 0%, var(--color-indigo) 100%);
}

html[data-brand-button=solid] .gradient-button, html[data-brand-button=solid] .sidebar-step-active, html[data-brand-button=solid] .ed-sidebar-step-active, html[data-brand-button=solid] .my-account-sidebar-step-active {
  background: var(--color-coral);
}

html[data-brand-button=solid][data-brand-button-solid=secondary] .gradient-button, html[data-brand-button=solid][data-brand-button-solid=secondary] .sidebar-step-active, html[data-brand-button=solid][data-brand-button-solid=secondary] .ed-sidebar-step-active, html[data-brand-button=solid][data-brand-button-solid=secondary] .my-account-sidebar-step-active {
  background: var(--color-indigo);
}

html[data-brand-button=solid][data-brand-button-solid=custom] .gradient-button, html[data-brand-button=solid][data-brand-button-solid=custom] .sidebar-step-active, html[data-brand-button=solid][data-brand-button-solid=custom] .ed-sidebar-step-active, html[data-brand-button=solid][data-brand-button-solid=custom] .my-account-sidebar-step-active {
  background: var(--brand-button-solid, var(--color-coral));
}

:root {
  /* Colors */
  /* store RGB values */
  --color-coral-rgb: 255, 109, 79;
  --color-indigo-rgb: 123, 126, 231;
  /* main colors */
  --color-coral: rgb(var(--color-coral-rgb));
  --color-indigo: rgb(var(--color-indigo-rgb));
  /* auto light variants */
  --color-coral-light: rgba(var(--color-coral-rgb), 0.1);
  --color-coral-light-hover: rgba(var(--color-coral-rgb), 0.16);
  --color-indigo-light: rgba(var(--color-indigo-rgb), 0.1);
  --color-indigo-light-hover: rgba(var(--color-indigo-rgb), 0.16);
  --color-lime-neon: #b1fa63;
  --color-off-white: #f7f7f7;
  --color-snow-white: #fafafa;
  --color-pink: #ff166f;
  --color-dim-gray: #696969;
  --color-light-gray: #f1f1f1;
  --color-dark-gray: #474747;
  --color-very-light-gray: #f9f9f9;
  --color-input-focus: var(--color-coral);
  --color-disabled: #dddddd;
  --color-success: #34a853;
  --color-danger: #ff1b33;
  /* Radius */
  --radius-base: 4px;
  --radius-mid: 10px;
  --radius-lrg: 12px;
}

[x-cloak] {
  display: none !important;
}

body {
  font-family: "Albert Sans", sans-serif;
}

*,
body {
  box-sizing: border-box !important;
  line-height: 100% !important;
  letter-spacing: 0;
  scroll-behavior: smooth;
}

body.modal-open {
  overflow: hidden;
  padding-inline-end: 4px;
}

*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

*::-webkit-scrollbar-thumb {
  background-color: #e1e1e1;
}

*::-webkit-scrollbar-track {
  background: transparent;
}