/* ==========================================================================
   FINENDAR FX — compatibility skin
   Re-skins Bootstrap 5 / Tailwind 2 / legacy theme markup into the FX dark
   futuristic look. Loaded only on pages whose body has .fx-compat.
   ========================================================================== */
body.fx-compat {
  --bs-body-bg: transparent; --bs-body-color: #efeaf9; --bs-border-color: rgba(199,125,255,.16);
  --bs-primary: #9900cc; --bs-primary-rgb: 153,0,204; --bs-secondary-color: #b9aed3; --bs-link-color: #c77dff;
  --bs-heading-color: #efeaf9; --bs-emphasis-color: #fff; --bs-tertiary-bg: rgba(255,255,255,.04);
  --bodyColor: #efeaf9; --headingColor: #efeaf9; --contentColor: #b9aed3; --contentColor2: #b9aed3;
  --whiteColor: rgba(255,255,255,.04); --blackColor: #efeaf9; --blackColor2: #efeaf9; --primaryColor: #9900cc;
  --borderColor: rgba(199,125,255,.14); --borderColor1: rgba(199,125,255,.14); --borderColor2: rgba(199,125,255,.14);
  --borderColor3: rgba(199,125,255,.1); --borderColor4: rgba(199,125,255,.2);
  --brand-purple: #a347e6; --brand-purple-hover: #b866f0; --brand-white: #ffffff;
  color: var(--text);
}
body.fx-compat, body.fx-compat button, body.fx-compat input, body.fx-compat select, body.fx-compat textarea,
body.fx-compat p, body.fx-compat li, body.fx-compat td, body.fx-compat th, body.fx-compat label, body.fx-compat a,
body.fx-compat h1, body.fx-compat h2, body.fx-compat h3, body.fx-compat h4, body.fx-compat h5, body.fx-compat h6 { font-family: var(--font); }
body.fx-compat h1, body.fx-compat h2, body.fx-compat h3, body.fx-compat h4, body.fx-compat h5, body.fx-compat h6 { font-family: var(--font-display); color: var(--text); letter-spacing: -0.01em; }
body.fx-compat p { color: var(--text-2); }
body.fx-compat hr { border-color: var(--line); opacity: 1; }
body.fx-compat .fx-content h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
body.fx-compat .fx-content h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
body.fx-compat .fx-content h3 { font-size: 1.2rem; }

/* ---- Shell resets for legacy wrappers ---- */
body.fx-compat .main_wrapper { padding: 0 !important; overflow: visible !important; background: none !important; }
body.fx-compat .fx-content > .main_wrapper > .container-fluid,
body.fx-compat .fx-content > .main_wrapper > .container,
body.fx-compat .fx-content > main > .container-fluid,
body.fx-compat .fx-content > main > .container { max-width: none !important; margin-top: 0 !important; padding-left: 0; padding-right: 0; }
body.fx-compat .fx-maincol { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
body.fx-compat .theme__shadow__circle, body.fx-compat .preloader, body.fx-compat #preloader, body.fx-compat .loader-wrapper { display: none !important; }
body.fx-compat .d-md-none > .btn[data-bs-toggle="offcanvas"] { display: none !important; }

/* ---- Surfaces ---- */
body.fx-compat .card, body.fx-compat .modal-content, body.fx-compat .list-group-item, body.fx-compat .accordion-item,
body.fx-compat .dashboard__content__wraper, body.fx-compat .dashboard__single__counter, body.fx-compat .dashboard__inner,
body.fx-compat .offcanvas, body.fx-compat .toast, body.fx-compat .popover {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important;
  border: 1px solid var(--line) !important; color: var(--text); border-radius: var(--r-lg);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}
body.fx-compat .card { backdrop-filter: blur(12px); }
body.fx-compat .card-header, body.fx-compat .card-footer, body.fx-compat .modal-header, body.fx-compat .modal-footer {
  background: rgba(255,255,255,.03) !important; border-color: var(--line) !important; color: var(--text);
}
body.fx-compat .modal-content { background: linear-gradient(180deg, #170d2b, #0e0819) !important; }
body.fx-compat .modal-backdrop.show { opacity: .75; background: #04020a; }
body.fx-compat .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
body.fx-compat .dropdown-menu { background: rgba(18,11,34,.98) !important; border: 1px solid var(--line-2) !important; border-radius: 14px; padding: 6px; box-shadow: 0 24px 50px -16px rgba(0,0,0,.85); }
body.fx-compat .dropdown-item { color: var(--text-2) !important; border-radius: 10px; padding: 9px 12px; }
body.fx-compat .dropdown-item:hover, body.fx-compat .dropdown-item:focus { background: var(--surface-2) !important; color: #fff !important; }
body.fx-compat .dropdown-divider { border-color: var(--line); }

/* ---- Colour utilities ---- */
body.fx-compat .bg-white, body.fx-compat .bg-light, body.fx-compat .bg-body, body.fx-compat .bg-gray-50, body.fx-compat .bg-gray-100,
body.fx-compat .bg-gray-200, body.fx-compat .bg-purple-50, body.fx-compat .bg-purple-100, body.fx-compat .bg-indigo-50,
body.fx-compat .bg-blue-50, body.fx-compat .bg-body-tertiary, body.fx-compat .bg-body-secondary { background-color: rgba(255,255,255,.04) !important; }
body.fx-compat .bg-green-50, body.fx-compat .bg-green-100 { background-color: rgba(34,211,166,.1) !important; }
body.fx-compat .bg-red-50, body.fx-compat .bg-red-100 { background-color: rgba(251,90,122,.1) !important; }
body.fx-compat .bg-yellow-50, body.fx-compat .bg-yellow-100 { background-color: rgba(251,191,36,.1) !important; }
body.fx-compat .bg-dark { background-color: #120b22 !important; }
body.fx-compat .bg-primary, body.fx-compat .bg-purple-500, body.fx-compat .bg-purple-600, body.fx-compat .bg-purple-700, body.fx-compat .bg-indigo-600 { background: var(--grad) !important; color: #fff !important; }
body.fx-compat .text-dark, body.fx-compat .text-black, body.fx-compat .text-body, body.fx-compat .text-body-emphasis,
body.fx-compat .text-gray-900, body.fx-compat .text-gray-800, body.fx-compat .text-gray-700 { color: var(--text) !important; }
body.fx-compat .text-muted, body.fx-compat .text-secondary, body.fx-compat .text-body-secondary, body.fx-compat .text-gray-600,
body.fx-compat .text-gray-500, body.fx-compat .text-gray-400 { color: var(--muted) !important; }
body.fx-compat .text-primary, body.fx-compat .text-purple-600, body.fx-compat .text-purple-700, body.fx-compat .text-purple-800,
body.fx-compat .text-indigo-600 { color: var(--neon) !important; }
body.fx-compat .text-success, body.fx-compat .text-green-600, body.fx-compat .text-green-700 { color: #5eead4 !important; }
body.fx-compat .text-danger, body.fx-compat .text-red-600, body.fx-compat .text-red-700 { color: #ff8aa3 !important; }
body.fx-compat .text-warning, body.fx-compat .text-yellow-600 { color: #fcd34d !important; }
body.fx-compat .text-info { color: #7dd3fc !important; }
body.fx-compat .border, body.fx-compat .border-top, body.fx-compat .border-bottom, body.fx-compat .border-start, body.fx-compat .border-end,
body.fx-compat .border-gray-100, body.fx-compat .border-gray-200, body.fx-compat .border-gray-300, body.fx-compat .divide-y > * + * { border-color: var(--line) !important; }
body.fx-compat .shadow, body.fx-compat .shadow-sm, body.fx-compat .shadow-lg, body.fx-compat .shadow-md, body.fx-compat .shadow-xl { box-shadow: 0 10px 30px -12px rgba(0,0,0,.65) !important; }

/* ---- Buttons ---- */
body.fx-compat .btn { border-radius: 12px; font-weight: 600; font-family: var(--font); transition: all .2s; }
body.fx-compat .btn-primary, body.fx-compat .btn-purple, body.fx-compat .default__button, body.fx-compat .btn-brand {
  background: var(--grad) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #fff !important;
  box-shadow: 0 8px 26px -8px rgba(153,0,204,.7);
}
body.fx-compat .btn-primary:hover, body.fx-compat .btn-purple:hover, body.fx-compat .default__button:hover { filter: brightness(1.12); transform: translateY(-1px); }
body.fx-compat .btn-outline-primary, body.fx-compat .btn-outline-secondary, body.fx-compat .btn-outline-dark, body.fx-compat .btn-light,
body.fx-compat .btn-secondary, body.fx-compat .btn-outline-purple, body.fx-compat .btn-white {
  background: rgba(255,255,255,.04) !important; border: 1px solid var(--line-2) !important; color: var(--text) !important;
}
body.fx-compat .btn-outline-primary:hover, body.fx-compat .btn-outline-secondary:hover, body.fx-compat .btn-light:hover,
body.fx-compat .btn-secondary:hover, body.fx-compat .btn-outline-dark:hover { border-color: var(--neon) !important; color: #fff !important; background: rgba(153,0,204,.14) !important; }
body.fx-compat .btn-success { background: rgba(34,211,166,.14) !important; border: 1px solid rgba(34,211,166,.4) !important; color: #5eead4 !important; }
body.fx-compat .btn-danger, body.fx-compat .btn-outline-danger { background: rgba(251,90,122,.12) !important; border: 1px solid rgba(251,90,122,.4) !important; color: #ff8aa3 !important; }
body.fx-compat .btn-warning, body.fx-compat .btn-outline-warning { background: rgba(251,191,36,.12) !important; border: 1px solid rgba(251,191,36,.4) !important; color: #fcd34d !important; }
body.fx-compat .btn-info, body.fx-compat .btn-outline-info { background: rgba(56,189,248,.12) !important; border: 1px solid rgba(56,189,248,.4) !important; color: #7dd3fc !important; }
body.fx-compat .btn-link { color: var(--neon) !important; }

/* ---- Forms ---- */
body.fx-compat .form-control, body.fx-compat .form-select, body.fx-compat .input-group-text {
  background-color: rgba(255,255,255,.04) !important; border: 1px solid var(--line-2) !important; color: var(--text) !important; border-radius: 12px;
}
body.fx-compat .form-control:focus, body.fx-compat .form-select:focus {
  border-color: var(--glow) !important; box-shadow: 0 0 0 4px rgba(168,85,247,.16) !important; background-color: rgba(153,0,204,.07) !important;
}
body.fx-compat .form-control::placeholder { color: var(--muted); }
body.fx-compat .form-label, body.fx-compat label { color: var(--text); }
body.fx-compat .form-text, body.fx-compat .helptext { color: var(--muted) !important; }
body.fx-compat .form-check-input { background-color: rgba(255,255,255,.06); border-color: var(--line-2); }
body.fx-compat .form-check-input:checked { background-color: #9900cc; border-color: #9900cc; }
body.fx-compat .invalid-feedback, body.fx-compat .errorlist { color: #ff8aa3 !important; }

/* ---- Tables ---- */
body.fx-compat .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-striped-bg: rgba(255,255,255,.025); --bs-table-hover-bg: rgba(153,0,204,.07); --bs-table-border-color: var(--line); color: var(--text); }
body.fx-compat table { color: var(--text); }
body.fx-compat table th, body.fx-compat .table thead th { color: var(--muted) !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; background: rgba(255,255,255,.03) !important; border-color: var(--line) !important; }
body.fx-compat table td { border-color: var(--line) !important; }
body.fx-compat table tbody tr:hover { background: rgba(153,0,204,.06); }
body.fx-compat .table-light, body.fx-compat .table-light th, body.fx-compat .thead-light th { background: rgba(255,255,255,.04) !important; color: var(--muted) !important; }
body.fx-compat .table-responsive, body.fx-compat .dashboard__table { border-radius: var(--r); }
body.fx-compat .dashboard__table table tr:nth-child(even), body.fx-compat .dashboard__table__row { background: rgba(255,255,255,.02) !important; }

/* ---- Feedback ---- */
body.fx-compat .badge { border-radius: 999px; font-weight: 600; padding: .4em .8em; }
body.fx-compat .badge.bg-light, body.fx-compat .badge.bg-secondary { background: rgba(255,255,255,.08) !important; color: var(--text-2) !important; }
body.fx-compat .badge.bg-success { background: rgba(34,211,166,.15) !important; color: #5eead4 !important; }
body.fx-compat .badge.bg-danger { background: rgba(251,90,122,.15) !important; color: #ff8aa3 !important; }
body.fx-compat .badge.bg-warning { background: rgba(251,191,36,.15) !important; color: #fcd34d !important; }
body.fx-compat .badge.bg-info { background: rgba(56,189,248,.15) !important; color: #7dd3fc !important; }
body.fx-compat .alert { border-radius: var(--r); border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--text); }
body.fx-compat .alert-success { border-color: rgba(34,211,166,.35); background: rgba(34,211,166,.08); color: #b7f5e6; }
body.fx-compat .alert-danger, body.fx-compat .alert-error { border-color: rgba(251,90,122,.35); background: rgba(251,90,122,.08); color: #ffc2cf; }
body.fx-compat .alert-warning { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.08); color: #fde6a3; }
body.fx-compat .alert-info, body.fx-compat .alert-primary { border-color: rgba(56,189,248,.35); background: rgba(56,189,248,.08); color: #c7ecfd; }
body.fx-compat .progress { background: rgba(255,255,255,.07); border-radius: 8px; }
body.fx-compat .progress-bar { background: var(--grad-bright); box-shadow: 0 0 12px rgba(192,38,211,.7); }

/* ---- Navigation widgets ---- */
body.fx-compat .nav-tabs { border-color: var(--line); gap: 4px; }
body.fx-compat .nav-tabs .nav-link { color: var(--text-2); border: 0; border-radius: 10px 10px 0 0; }
body.fx-compat .nav-tabs .nav-link.active { background: rgba(153,0,204,.16); color: #fff; border-bottom: 2px solid var(--neon); }
body.fx-compat .nav-pills .nav-link { color: var(--text-2); border-radius: 10px; }
body.fx-compat .nav-pills .nav-link.active { background: var(--grad); color: #fff; }
body.fx-compat .pagination .page-link { background: rgba(255,255,255,.04); border-color: var(--line); color: var(--text-2); border-radius: 10px; margin: 0 3px; }
body.fx-compat .pagination .page-item.active .page-link { background: var(--grad); border-color: transparent; color: #fff; }
body.fx-compat .breadcrumb-item, body.fx-compat .breadcrumb-item a { color: var(--muted); }
body.fx-compat .list-group-item-action:hover { background: rgba(153,0,204,.08) !important; }

/* ---- Legacy theme leftovers ---- */
body.fx-compat .dashboard__section__title { border-color: var(--line) !important; }
body.fx-compat .dashboard__section__title h4, body.fx-compat .dashboard__section__title h3 { color: var(--text) !important; }
body.fx-compat .counter__number, body.fx-compat .counter__number span { color: #fff !important; font-family: var(--font-display); }
body.fx-compat .text-white { color: #fff !important; }
body.fx-compat i[data-feather], body.fx-compat svg.feather { width: 18px; height: 18px; vertical-align: -3px; }
body.fx-compat img { max-width: 100%; }
body.fx-compat .fx-content { overflow-x: clip; }
body.fx-compat .table-responsive { -webkit-overflow-scrolling: touch; }

/* ---- Legacy theme (style.css) components rebuilt in FX style ---- */
body.fx-compat .shape__icon__img, body.fx-compat .shape__icon__2, body.fx-compat [class*="shape__icon__img__"], body.fx-compat .theme__shadow__circle { display: none !important; }
body.fx-compat .dashboard__content__wraper { padding: 24px; margin-bottom: 24px; border-radius: var(--r-lg); }
body.fx-compat .dashboard__section__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
body.fx-compat .dashboard__section__title h4, body.fx-compat .dashboard__section__title h3 { margin: 0; font-size: 1.15rem; }
body.fx-compat .dashboard__table { overflow-x: auto; }
body.fx-compat .dashboard__table table { width: 100%; border-collapse: collapse; min-width: 520px; }
body.fx-compat .dashboard__table th, body.fx-compat .dashboard__table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
body.fx-compat .dashboard__table tbody tr:last-child td, body.fx-compat .dashboard__table tbody tr:last-child th { border-bottom: 0; }
body.fx-compat .dashboard__table tbody th { color: var(--text) !important; text-transform: none; font-size: .92rem; letter-spacing: 0; background: none !important; font-weight: 600; }
body.fx-compat .dashboard__form, body.fx-compat .dashboard__form__wraper { margin-bottom: 18px; }
body.fx-compat .dashboard__form__input label, body.fx-compat .dashboard__label { display: block; font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: 7px; }
body.fx-compat .dashboard__form__input { margin-bottom: 16px; }
body.fx-compat .dashboard__form__input input, body.fx-compat .dashboard__form__input textarea, body.fx-compat .dashboard__form__input select { width: 100%; }
body.fx-compat .dashboard__form__button, body.fx-compat .dashboard__form__margin { margin-top: 12px; }
body.fx-compat .default__button, body.fx-compat .dashboard__small__btn, body.fx-compat .dashboard__small__btn__2, body.fx-compat .dashboard__small__btn__3, body.fx-compat .gridarea__small__button, body.fx-compat .grid__badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; font-weight: 600; text-decoration: none !important;
}
body.fx-compat .default__button { padding: 11px 20px; }
body.fx-compat .dashboard__small__btn, body.fx-compat .dashboard__small__btn__2, body.fx-compat .dashboard__small__btn__3 { padding: 6px 12px; font-size: .8rem; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); color: var(--text) !important; }
body.fx-compat .dashboard__small__btn:hover, body.fx-compat .dashboard__small__btn__2:hover, body.fx-compat .dashboard__small__btn__3:hover { border-color: var(--neon); background: rgba(153,0,204,.12); }
body.fx-compat .grid__badge, body.fx-compat .gridarea__small__button { padding: 4px 10px; font-size: .74rem; background: rgba(153,0,204,.16); border: 1px solid rgba(199,125,255,.35); color: #e9d5ff !important; }
body.fx-compat .gridarea__wraper { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 24px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
body.fx-compat .gridarea__wraper:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-glow); }
body.fx-compat .gridarea__img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #1a1030; }
body.fx-compat .gridarea__img img { width: 100%; height: 100%; object-fit: cover; }
body.fx-compat .gridarea__content { padding: 16px 18px 18px; }
body.fx-compat .gridarea__list ul { list-style: none; padding: 0; margin: 0 0 8px; display: flex; gap: 14px; font-size: .8rem; color: var(--muted); }
body.fx-compat .gridarea__heading h3 { font-size: 1.02rem; margin: 6px 0 10px; }
body.fx-compat .gridarea__heading a { color: #fff !important; }
body.fx-compat .gridarea__price { font-family: var(--font-display); font-weight: 700; color: #fff; }
body.fx-compat .gridarea__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
body.fx-compat .gridarea__small__img img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
body.fx-compat .gridarea__small__content h6 { margin: 0; font-size: .82rem; }
body.fx-compat .gridarea__star { color: #fcd34d; font-size: .8rem; }
body.fx-compat .breadcrumbarea { padding: 64px 0 36px; text-align: center; background: none !important; }
body.fx-compat .breadcrumb__title h1, body.fx-compat .breadcrumb__title h2 { font-size: clamp(1.8rem, 4.5vw, 3rem); }
body.fx-compat .breadcrumb__inner ul { list-style: none; padding: 0; display: flex; gap: 8px; justify-content: center; color: var(--muted); font-size: .85rem; }
body.fx-compat .breadcrumb__inner a { color: var(--text-2) !important; }
body.fx-compat .sp_bottom_100 { padding-bottom: 64px; } body.fx-compat .sp_top_100 { padding-top: 64px; }
body.fx-compat .full__width__padding { padding-left: 16px; padding-right: 16px; }
body.fx-compat .green__color { color: #5eead4 !important; } body.fx-compat .blue__color { color: #7dd3fc !important; }
body.fx-compat .dashboard__nav ul { list-style: none; padding: 0; margin: 0; }
body.fx-compat .dashboard__nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text-2) !important; }
body.fx-compat .dashboard__nav a:hover { background: var(--surface-2); color: #fff !important; }
body.fx-compat .dashboard__meessage__contact__wrap, body.fx-compat .dashboard__meessage__meta { display: flex; align-items: center; gap: 12px; }
body.fx-compat .dashboard__meessage__chat__img img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
body.fx-compat .dashboard__meessage__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); display: inline-block; }
body.fx-compat .chat__time, body.fx-compat .dashboard__small__text { font-size: .76rem; color: var(--muted); }
body.fx-compat .dashboard__table__star, body.fx-compat .dashboard__rating__count { color: #fcd34d; }
body.fx-compat .dashboard__selector select, body.fx-compat .dashboard__select__heading { margin-bottom: 10px; }
body.fx-compat .swiper-slide { height: auto; }
body.fx-compat .scc__wrap { border-radius: var(--r); border: 1px solid var(--line); padding: 18px; margin-bottom: 16px; background: rgba(255,255,255,.03); }
body.fx-compat .about__button__wrap { margin-top: 20px; }

/* ---- Accordions, icon svgs, misc ---- */
body.fx-compat .accordion-button { background: rgba(255,255,255,.04) !important; color: var(--text) !important; box-shadow: none !important; border-radius: 12px !important; }
body.fx-compat .accordion-button:not(.collapsed) { background: rgba(153,0,204,.14) !important; color: #fff !important; }
body.fx-compat .accordion-button::after { filter: invert(1) brightness(1.4); }
body.fx-compat .accordion-body, body.fx-compat .accordion-collapse { background: transparent !important; color: var(--text-2); }
body.fx-compat .fx-content svg:not([width]):not([class*="feather"]):not(.fx-keep), body.fx-compat .fn__svg { width: 1.25em; height: 1.25em; max-width: 48px; max-height: 48px; fill: currentColor; vertical-align: -0.2em; }
body.fx-compat .fx-content canvas { max-width: 100%; }

body.fx-compat .btn-group { flex-wrap: wrap; gap: 6px; }
body.fx-compat .table-responsive { overflow-x: auto; }
body.fx-compat .invitation-actions { flex-wrap: wrap; }
body.fx-compat .fx-content .btn { white-space: normal; }
body.fx-compat #main { overflow-x: clip; }

/* Batch 5 — mobile fixes for legacy pages */
@media (max-width: 600px) {
  body.fx-compat .checkout-steps { flex-wrap: wrap; gap: 10px 16px; justify-content: flex-start; }
  body.fx-compat .checkout-step { min-width: 0; font-size: .85rem; }
  body.fx-compat .invitation-actions { width: 100%; }
  body.fx-compat .invitation-actions .btn { width: 100%; white-space: normal; }
  body.fx-compat .d-flex.gap-3 { flex-wrap: wrap; }
  body.fx-compat .d-flex.gap-3 > .btn { white-space: normal; }
}
@media (max-width: 600px) {
  body.fx-compat .invitation-card > .d-flex { flex-wrap: wrap; }
  body.fx-compat .invitation-actions { margin-left: 0; margin-top: .75rem; flex-direction: row; flex-wrap: wrap; }
  body.fx-compat .invitation-actions .btn { flex: 1 1 auto; width: auto; }
}