/* ============================================================
   Flexus Theme — Components
   Author: Mauro Gashfix
   --------------------------------------------------------
   Border-first elevation philosophy: 1px #e5e5e5 borders define
   containers; shadows are reserved for three specific cases.
   ============================================================ */

/* ---- Buttons ---- */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-8);
  font-family: var(--font-inter); font-size: var(--text-body); font-weight: var(--font-weight-ui, var(--font-weight-medium));
  line-height: 1; padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-buttons); border: 1px solid transparent;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  text-decoration: none; white-space: nowrap; user-select: none;
}
.fx-btn:active { transform: translateY(1px); }
.fx-btn-primary { background: var(--color-primary-action-fill); color: #fff; }
.fx-btn-primary:hover { background: var(--color-deep-sapphire); color: #fff; }
.fx-btn-sapphire { background: var(--color-sky-tint); color: var(--color-notion-blue); }
.fx-btn-sapphire:hover { background: #d3eafd; color: var(--color-deep-sapphire); }
.fx-btn-tint { background: var(--color-sky-tint); color: var(--color-notion-blue); }
.fx-btn-tint:hover { background: #d3eafd; color: var(--color-deep-sapphire); }
.fx-btn-dark { background: var(--color-charcoal); color: #fff; }
.fx-btn-dark:hover { background: #000; color: #fff; }
.fx-btn-outline { background: var(--color-pure-white); color: var(--color-charcoal); border-color: var(--color-ash); }
.fx-btn-outline:hover { border-color: rgba(0,0,0,.32); color: var(--color-charcoal); }
.fx-btn-ghost { background: transparent; color: var(--color-charcoal); border-color: transparent; }
.fx-btn-ghost:hover { background: var(--color-paper-mist); color: var(--color-charcoal); }
.fx-btn-quiet { background: transparent; color: var(--color-charcoal); padding: 8px 16px; border-radius: var(--radius-full); border-color: transparent; }
.fx-btn-quiet:hover { background: var(--color-paper-mist); }
.fx-btn-sm { font-size: var(--text-caption); padding: 6px 12px; }
.fx-btn-lg { font-size: var(--text-body-lg); padding: 14px 20px; }
.fx-btn-block { display: flex; width: 100%; }
.fx-btn-cta {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 52%, #1e40af 100%);
  color: #fff;
  border: 0;
  font-weight: 600;
  letter-spacing: -.01em;
  box-shadow: 0 4px 16px rgba(37, 99, 235, .32);
}
.fx-btn-cta:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 52%, #1e3a8a 100%);
  color: #fff;
  box-shadow: 0 8px 28px rgba(37, 99, 235, .38);
  transform: translateY(-1px);
}
.fx-btn-cta:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(37, 99, 235, .28); }
.fx-btn-cta i, .fx-btn-cta .fa, .fx-btn-cta .fas, .fx-btn-cta .far {
  transition: transform .18s ease, opacity .18s ease;
}
.fx-btn-cta:hover i, .fx-btn-cta:hover .fa, .fx-btn-cta:hover .fas, .fx-btn-cta:hover .far {
  transform: translateX(3px);
}
.fx-btn[disabled], .fx-btn.is-disabled { opacity: .5; pointer-events: none; }

/* ---- Pills / Tags ---- */
.fx-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--color-charcoal);
  font-family: var(--font-inter); font-size: var(--text-body); font-weight: var(--font-weight-medium);
  border-radius: var(--radius-tags); padding: 8px 16px; border: 1px solid transparent; text-decoration: none;
  background: rgba(255,255,255,.7);
}
.fx-tag--icon { font-size: 13px; }
.fx-tag--orange .fx-tag--icon { color: var(--color-tangerine); }
.fx-tag--green  .fx-tag--icon { color: var(--color-vivid-green); }
.fx-tag--violet .fx-tag--icon { color: var(--color-lavender); }
.fx-tag--blue   .fx-tag--icon { color: var(--color-electric-blue); }

.fx-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--color-midnight-ink);
  font-size: var(--text-caption); font-weight: var(--font-weight-medium);
  border-radius: var(--radius-tags); padding: 4px 10px; border: 1px solid var(--color-ash);
}
.fx-badge--success { background: var(--color-soft-mint); color: #14532d; border-color: transparent; }
.fx-badge--pending { background: #fef9c3; color: #854d0e; border-color: transparent; }
.fx-badge--danger  { background: #fee2e2; color: #991b1b; border-color: transparent; }
.fx-badge--info    { background: #dbeafe; color: #1e40af; border-color: transparent; }
.fx-badge__dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: currentColor; }

/* ---- Cards ---- */
.fx-card {
  background: var(--surface-card); border: 1px solid var(--color-ash);
  border-radius: var(--radius-cards); padding: var(--card-padding); box-shadow: none;
}
.fx-card--lg { border-radius: var(--radius-2xl); padding: var(--spacing-16); }
.fx-card--elevated { box-shadow: var(--shadow-subtle-2); border: 0; }
.fx-card--muted { background: var(--color-paper-mist); border: 0; border-radius: var(--radius-2xl); }
.fx-card__header { padding: var(--spacing-8) 0 var(--spacing-12); border-bottom: 1px solid var(--color-ash); }
.fx-card__header:last-child { border-bottom: 0; }
.fx-card__title { font-family: var(--font-inter); font-size: var(--text-body-lg); font-weight: var(--font-weight-semibold); color: var(--color-charcoal); margin: 0; }
.fx-card__body  { padding: var(--spacing-12) 0; }
.fx-card__footer { padding-top: var(--spacing-12); border-top: 1px solid var(--color-ash); }

/* ---- Inputs ---- */
.fx-input,
.fx-input-group .form-control,
.fx-input-group textarea,
.fx-input-group select {
  background: var(--color-canvas-white); color: var(--color-midnight-ink);
  font-family: var(--font-inter); font-size: var(--text-body-lg);
  border: 1px solid rgba(0,0,0,.16); border-radius: var(--radius-inputs);
  padding: 8px 12px; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; box-shadow: none;
}
.fx-input::placeholder { color: var(--color-fog); }
.fx-input:focus { border-color: var(--color-notion-blue); box-shadow: 0 0 0 4px rgba(0,117,222,.12); outline: none; }
.fx-input[disabled], .fx-input[readonly] { background: var(--color-paper-mist); color: var(--color-fog); border-color: var(--color-ash); }
.fx-input-sm { font-size: var(--text-body); padding: 6px 10px; }
.fx-input-lg { font-size: var(--text-body-xl); padding: 12px 16px; }

.fx-label, .fx-input-group label, .form-control-label {
  display: block; font-family: var(--font-inter); font-size: var(--text-body); font-weight: var(--font-weight-medium);
  color: var(--color-charcoal); margin-bottom: var(--spacing-8);
}
.fx-hint { font-size: var(--text-caption); color: var(--color-fog); margin-top: var(--spacing-4); }

.fx-input-group { margin-bottom: var(--spacing-16); }
.fx-input-group .input-group { display: flex; align-items: stretch; }
.fx-input-group .input-group-prepend,
.fx-input-group .input-group-append { display: flex; }
.fx-input-group .input-group-text {
  display: inline-flex; align-items: center; padding: 0 12px;
  background: var(--color-paper-mist); border: 1px solid var(--color-midnight-ink);
  font-size: var(--text-body-lg); color: var(--color-fog);
}
.fx-input-group .input-group-prepend .input-group-text { border-radius: var(--radius-inputs) 0 0 var(--radius-inputs); border-right: 0; }
.fx-input-group .input-group-append .input-group-text { border-radius: 0 var(--radius-inputs) var(--radius-inputs) 0; border-left: 0; }
.fx-input-group .input-group-prepend + .form-control,
.fx-input-group .input-group .form-control { border-radius: 0 var(--radius-inputs) var(--radius-inputs) 0; }

.fx-checkbox, .fx-radio { accent-color: var(--color-electric-blue); transform: scale(1.1); margin-right: var(--spacing-4); }

/* ---- Tables ---- */
.fx-table { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.fx-table thead th {
  text-align: left; font-family: var(--font-inter); font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold); color: var(--color-fog);
  text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px;
  border-bottom: 1px solid var(--color-ash); white-space: nowrap;
}
.fx-table tbody td { padding: 12px; border-bottom: 1px solid var(--color-ash); color: var(--color-charcoal); vertical-align: middle; }
.fx-table tbody tr:last-child td { border-bottom: 0; }
.fx-table tbody tr:hover { background: var(--color-paper-mist); }

/* ---- Status colors ---- */
.fx-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: var(--font-weight-medium); padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; }
.fx-status--active, .fx-status--completed, .fx-status--paid {
  background: var(--color-soft-mint);
  color: var(--color-vivid-green, #14532d);
  border-color: color-mix(in srgb, var(--color-vivid-green, #16a34a) 28%, transparent);
}
.fx-status--pending, .fx-status--payment-pending {
  background: color-mix(in srgb, var(--color-saffron, #e89d01) 18%, var(--surface-card, var(--color-pure-white)));
  color: var(--color-saffron, #854d0e);
  border-color: color-mix(in srgb, var(--color-saffron, #e89d01) 35%, transparent);
}
.fx-status--unpaid, .fx-status--overdue, .fx-status--collections {
  background: color-mix(in srgb, var(--color-coral, #f64932) 14%, var(--surface-card, var(--color-pure-white)));
  color: var(--color-vermillion, #991b1b);
  border-color: color-mix(in srgb, var(--color-coral, #f64932) 32%, transparent);
}
.fx-status--refunded {
  background: color-mix(in srgb, var(--color-sky-tint, #e6f3fe) 80%, var(--surface-card, var(--color-pure-white)));
  color: var(--color-deep-sapphire, #0369a1);
  border-color: color-mix(in srgb, var(--color-notion-blue, #0075de) 22%, transparent);
}
.fx-status--open, .fx-status--customer-reply { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.fx-status--answered, .fx-status--in-progress { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.fx-status--closed { background: var(--color-paper-mist); color: var(--color-fog); border-color: var(--color-ash); }
.fx-status--on-hold { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
.fx-status--suspended { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.fx-status--terminated { background: #f3f4f6; color: #1f2937; border-color: #e5e7eb; }
.fx-status--cancelled { background: var(--color-paper-mist); color: var(--color-fog); border-color: var(--color-ash); }
.fx-status--fraud { background: #fee2e2; color: #7f1d1d; border-color: #fecaca; }
.fx-status::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; display: inline-block; }

/* ---- Sidebar ---- */
.fx-sidebar-nav { list-style: none; margin: 0; padding: 0; }
.fx-sidebar-nav li { margin-bottom: 2px; }
.fx-sidebar-nav a {
  display: flex; align-items: center; gap: var(--spacing-8);
  padding: 10px var(--spacing-8); border-radius: var(--radius-lg);
  color: var(--color-charcoal); font-size: var(--text-body); font-weight: var(--font-weight-regular);
}
.fx-sidebar-nav a:hover { background: var(--color-paper-mist); color: var(--color-charcoal); }
.fx-sidebar-nav a.active { background: #dbeafe; color: var(--color-deep-sapphire); font-weight: var(--font-weight-medium); }
.fx-sidebar-nav a i, .fx-sidebar-nav a svg { width: 16px; color: var(--color-slate); }
.fx-sidebar-nav a.active i { color: var(--color-deep-sapphire); }
.fx-sidebar-nav__label { font-size: var(--text-caption); color: var(--color-fog); text-transform: uppercase; letter-spacing: .05em; padding: var(--spacing-16) var(--spacing-8) var(--spacing-8); }

/* ---- Header (top bar) ---- */
.fx-topbar { border-bottom: 1px solid transparent; background: transparent; height: var(--header-height); display: flex; align-items: center; position: sticky; top: 0; z-index: 50; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.fx-topbar.is-scrolled { background: rgba(246,245,244,.86); border-bottom-color: var(--color-ash); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); box-shadow: var(--shadow-subtle); }
.fx-topbar__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--spacing-8); flex-wrap: nowrap; overflow: visible; }
.fx-topbar .flexus-container.fx-topbar__inner { max-width: 100%; padding-inline: var(--spacing-16); }
.fx-topbar .fx-nav { flex-wrap: nowrap; overflow: hidden; gap: 2px; }
.fx-topbar .fx-nav__link { white-space: nowrap; padding: 6px 10px; font-size: 13px; }
.fx-topbar .fx-header-cluster { gap: var(--spacing-4); }
.fx-topbar .fx-header-cluster .fx-btn { padding: 8px 14px; font-size: 13px; }
.fx-topbar .fx-brandmark { font-size: 16px; }
.fx-topbar .fx-brandmark__mark { width: 24px; height: 24px; font-size: 11px; }
@media (max-width: 1200px) {
    .fx-topbar .fx-nav__link { padding: 6px 8px; font-size: 12px; }
    .fx-topbar .fx-nav__link i { display: none; }
}
@media (max-width: 1024px) {
    .fx-topbar .fx-nav-desktop { display: none !important; }
    .fx-topbar .fx-nav-mobile-trigger { display: inline-flex !important; }
}

.fx-brandmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-satoshi); font-size: var(--text-heading-sm); font-weight: var(--font-weight-medium); color: var(--color-charcoal); letter-spacing: -.02em; white-space: nowrap; min-width: 0; }
.fx-brandmark__mark { width: 28px; height: 28px; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-geist-mono); font-weight: 500; color: #fff; background: var(--gradient-conic-spectrum); font-size: 13px; flex-shrink: 0; }
.fx-brandmark > span:not(.fx-brandmark__mark) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fx-nav { display: inline-flex; align-items: center; gap: 4px; flex-direction: row; flex-wrap: nowrap; padding: 0; margin: 0; }
.fx-nav > li { list-style: none; }
.fx-nav__link { padding: 8px 16px; border-radius: 9999px; background: transparent; color: var(--color-charcoal); font-size: var(--text-body); font-weight: var(--font-weight-regular); display: inline-flex; align-items: center; gap: 6px; }
.fx-nav__link:hover { background: var(--color-paper-mist); color: var(--color-charcoal); }
.fx-nav__link--active { color: var(--color-electric-blue); font-weight: var(--font-weight-medium); }

.fx-header-cluster { margin-left: auto; display: flex; align-items: center; gap: var(--spacing-8); }
.fx-search { position: relative; display: flex; align-items: center; }
.fx-search input { background: var(--color-paper-mist); border: 1px solid var(--color-ash); border-radius: var(--radius-full); padding: 7px 14px 7px 34px; font-size: var(--text-body); color: var(--color-charcoal); width: 260px; }
.fx-search i { position: absolute; left: 12px; color: var(--color-fog); font-size: 13px; }

/* ---- Logo cloud ---- */
.fx-logo-cloud { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--spacing-24) var(--spacing-16); align-items: center; justify-items: center; }
.fx-logo-cloud__item { color: var(--color-steel); filter: grayscale(1) opacity(.85); font-family: var(--font-inter); font-size: var(--text-body-lg); font-weight: var(--font-weight-semibold); }
.fx-logo-cloud__item:hover { color: var(--color-charcoal); filter: none; }

/* ---- Floating feature pills row ---- */
.fx-pills-row { display: flex; gap: var(--spacing-8); justify-content: center; flex-wrap: wrap; }

/* ---- Feature card grid ---- */
.fx-feature-grid { display: grid; gap: var(--spacing-16); grid-template-columns: repeat(3, minmax(0,1fr)); }
.fx-feature { padding: var(--spacing-24); border: 1px solid var(--color-ash); border-radius: var(--radius-2xl); background: var(--color-canvas-white); }
.fx-feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-lg); background: var(--color-paper-mist); margin-bottom: var(--spacing-16); font-size: 16px; }
.fx-feature__title { font-family: var(--font-inter); font-size: var(--text-body-xl); font-weight: var(--font-weight-medium); color: var(--color-charcoal); margin: 0 0 var(--spacing-8); }
.fx-feature__desc { font-size: var(--text-body); color: var(--color-steel); margin: 0; }

/* ---- App shell (portal layout) ---- */
.fx-shell { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: var(--spacing-24); padding: var(--spacing-24) 0; align-items: start; }
.fx-shell__sidebar { position: sticky; top: 88px; }
.fx-shell__main { min-width: 0; }
@media (max-width: 991px) { .fx-shell { grid-template-columns: 1fr; } .fx-shell__sidebar { position: static; } }

/* ---- Mega footer ---- */
.fx-footer { border-top: 1px solid var(--color-ash); padding-block: var(--spacing-48) var(--spacing-32); background: var(--color-canvas-white); }
.fx-footer__grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: var(--spacing-24) var(--spacing-16); }
.fx-footer__brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.fx-footer__logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: min(180px, 70vw);
  object-fit: contain;
}
.fx-footer__col h6 { font-family: var(--font-inter); font-size: var(--text-caption); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--color-fog); margin: 0 0 var(--spacing-12); }
.fx-footer__col ul { list-style: none; margin: 0; padding: 0; }
.fx-footer__col li { margin-bottom: var(--spacing-8); }
.fx-footer__col a { color: var(--color-charcoal); font-size: var(--text-body); }
.fx-footer__col a:hover { color: var(--color-electric-blue); }
.fx-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--spacing-24); margin-top: var(--spacing-32); border-top: 1px solid var(--color-ash); font-size: var(--text-body); color: var(--color-fog); }
.fx-footer__brandblurb { font-size: var(--text-body); color: var(--color-steel); max-width: 36ch; margin-top: var(--spacing-12); }
@media (max-width: 960px) {
  .fx-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .fx-footer { padding-block: var(--spacing-40) var(--spacing-24); }
  .fx-footer__brandblurb { max-width: none; }
  .fx-footer__bottom { flex-direction: column; gap: var(--spacing-12); align-items: flex-start; }
}
@media (max-width: 400px) { .fx-footer__grid { grid-template-columns: 1fr; } }

/* ---- Alerts ---- */
.fx-alert { border: 1px solid var(--color-ash); border-radius: var(--radius-lg); padding: 12px 16px; background: var(--color-canvas-white); color: var(--color-charcoal); display: flex; gap: var(--spacing-12); margin-bottom: var(--spacing-16); font-size: var(--text-body); }
.fx-alert__icon { flex-shrink: 0; }
.fx-alert--info { border-color: transparent; background: #eff6ff; color: #1e3a8a; }
.fx-alert--danger, .fx-alert--error { border-color: transparent; background: #fef2f2; color: #7f1d1d; }
.fx-alert--warning { border-color: transparent; background: #fffbeb; color: #78350f; }
.fx-alert--success { border-color: transparent; background: var(--color-soft-mint); color: #14532d; }

/* ---- Modal ---- */
.fxModal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: var(--spacing-16); z-index: 1080; }
.fx-modal { background: var(--color-canvas-white); border: 1px solid var(--color-ash); border-radius: var(--radius-2xl); padding: var(--spacing-24); width: min(540px, 100%); box-shadow: var(--shadow-lg); }
.fx-modal__title { font-family: var(--font-satoshi); font-size: var(--text-heading-sm); font-weight: var(--font-weight-medium); margin: 0 0 var(--spacing-12); }
.fx-modal__body { margin: 0 0 var(--spacing-24); font-size: var(--text-body); color: var(--color-steel); }
.fx-modal__footer { display: flex; justify-content: flex-end; gap: var(--spacing-8); }

/* ---- Product mockup frame ---- */
.fx-mockup-frame {
  background: var(--color-canvas-white); border: 1px solid var(--color-ash);
  border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl);
  box-shadow: var(--shadow-subtle-2); overflow: hidden;
}

/* ---- Breadcrumb ---- */
.fx-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-4); font-size: var(--text-body); color: var(--color-fog); padding: var(--spacing-8) 0; }
.fx-breadcrumb a { color: var(--color-fog); }
.fx-breadcrumb a:hover { color: var(--color-charcoal); }
.fx-breadcrumb__sep { color: var(--color-silver); }
.fx-breadcrumb__current { color: var(--color-charcoal); font-weight: var(--font-weight-medium); }

/* ---- Empty state ---- */
.fx-empty { text-align: center; padding: var(--spacing-48) var(--spacing-24); color: var(--color-fog); }
.fx-empty__icon { font-size: 28px; color: var(--color-silver); margin-bottom: var(--spacing-12); }
.fx-empty__title { font-family: var(--font-inter); font-size: var(--text-body-xl); font-weight: var(--font-weight-medium); color: var(--color-charcoal); margin: 0 0 var(--spacing-4); }
.fx-empty__desc { margin: 0 0 var(--spacing-16); font-size: var(--text-body); }

/* ---- Pagination ---- */
.fx-pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding-top: var(--spacing-16); }
.fx-pagination a, .fx-pagination span { padding: 6px 12px; border-radius: var(--radius-lg); font-size: var(--text-body); color: var(--color-charcoal); border: 1px solid transparent; }
.fx-pagination a:hover { background: var(--color-paper-mist); }
.fx-pagination .active { background: var(--color-midnight-ink); color: #fff; }
.fx-pagination .disabled { color: var(--color-silver); pointer-events: none; border-color: transparent; }

/* ---- Tabs ---- */
.fx-tabs { display: flex; gap: var(--spacing-4); border-bottom: 1px solid var(--color-ash); padding: 0; list-style: none; margin: 0 0 var(--spacing-16); flex-wrap: wrap; }
.fx-tabs a, .fx-tabs > li > a { padding: 10px 16px; color: var(--color-steel); font-size: var(--text-body); font-weight: var(--font-weight-medium); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fx-tabs a:hover, .fx-tabs > li.active > a { color: var(--color-charcoal); border-bottom-color: var(--color-charcoal); }

/* ---- Tooltip ---- */
[data-fx-tooltip] { position: relative; }
[data-fx-tooltip]:hover::after {
  content: attr(data-fx-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--color-midnight-ink); color: #fff; font-size: var(--text-caption); padding: 4px 8px;
  border-radius: var(--radius-inputs); white-space: nowrap; pointer-events: none; z-index: 50;
}

/* ---- Skeleton loader ---- */
.fx-skeleton { background: var(--color-paper-mist); border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.fx-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: fx-shimmer 1.4s infinite; transform: translateX(-100%); }
@keyframes fx-shimmer { 100% { transform: translateX(100%); } }

/* ---- Spinner ---- */
.fx-spinner { width: 16px; height: 16px; border: 2px solid var(--color-ash); border-top-color: var(--color-charcoal); border-radius: 50%; display: inline-block; animation: fx-spin .7s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* ---- Drawer (mobile nav) ---- */
.fx-drawer { display: none; position: fixed; inset: 0; background: var(--color-canvas-white); z-index: 1090; padding: var(--spacing-24); overflow-y: auto; }
.fx-drawer[data-open="true"] { display: block; }
.fx-drawer__close { position: absolute; top: var(--spacing-16); right: var(--spacing-16); background: transparent; border: 0; font-size: 22px; color: var(--color-charcoal); cursor: pointer; }
@media (max-width: 992px) { .fx-nav-desktop { display: none !important; } .fx-nav-mobile-trigger { display: inline-flex !important; } }
.fx-nav-mobile-trigger { display: none; }

/* Bootstrap 3 modal (WHMCS uses BS 3.4 — visible class is .in, not .show) */
.modal-open {
  overflow: hidden;
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

.modal.in,
.modal.show,
#modalAjax.in {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1050 !important;
}

.modal:not(.in):not(.show) {
  display: none !important;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 30px auto;
  max-width: 520px;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform .3s ease-out;
}

.modal.in .modal-dialog,
.modal.show .modal-dialog,
#modalAjax[style*="display: block"] .modal-dialog,
#modalAjax[style*="display:block"] .modal-dialog {
  transform: translate3d(0, 0, 0);
}

.modal-dialog.modal-lg {
  max-width: 720px;
}

.modal-content {
  position: relative;
  display: block;
  width: 100%;
  pointer-events: auto;
  background: var(--color-pure-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 48px rgba(28,25,23,.16);
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background: rgba(28, 25, 23, .48);
}

.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.in,
.modal-backdrop.show {
  opacity: 1;
  display: block;
}
body.modal-open {
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-16) var(--spacing-20);
  border-bottom: 1px solid var(--color-ash);
}

.modal-header .close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-fog);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.modal-header .close:hover {
  background: var(--color-paper-mist);
  color: var(--color-charcoal);
}

.modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-charcoal);
  line-height: 1.35;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--spacing-20);
  font-size: 14px;
  color: var(--color-graphite);
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-8);
  padding: var(--spacing-12) var(--spacing-20);
  border-top: 1px solid var(--color-ash);
  background: var(--color-paper-mist);
}

.modal-footer .loader {
  margin-right: auto;
  font-size: 12px;
  color: var(--color-fog);
}

/* ---- Locale / currency picker (modal + mobile + navbar) ---- */
.fx-locale-modal {
  max-width: 480px;
  margin: 24px auto;
}

.modal-localisation .modal-content {
  overflow: hidden;
}

.modal-localisation .modal-header {
  background: var(--color-paper-mist);
}

.modal-localisation .modal-body {
  padding: 20px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
}

.fx-locale-picker__label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-fog);
}

.fx-locale-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.fx-locale-picker__field {
  min-width: 0;
  position: relative;
}

.fx-locale-picker__trigger {
  width: 100%;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--color-ash);
  background: var(--surface-card, var(--color-pure-white));
  color: var(--color-charcoal);
  font-size: 13px;
  font-weight: 500;
  padding: 0 12px;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

.fx-locale-picker__trigger:focus-visible {
  border-color: var(--color-notion-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-notion-blue) 16%, transparent);
}

.fx-locale-picker__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-locale-picker__trigger i {
  font-size: 11px;
  color: var(--color-fog);
  transition: transform .15s ease;
}

.fx-locale-picker__field.is-open .fx-locale-picker__trigger i {
  transform: rotate(180deg);
}

.fx-locale-picker__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 120;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface-card, var(--color-pure-white));
  border: 1px solid var(--color-ash);
  border-radius: 12px;
  box-shadow: 0 14px 32px -20px rgba(15, 23, 42, .28);
}

.fx-locale-picker__field.is-open .fx-locale-picker__menu {
  display: flex;
}

.fx-locale-picker__option {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-charcoal);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.fx-locale-picker__option:hover {
  background: var(--color-paper-mist);
}

.fx-locale-picker__option.is-active {
  background: var(--color-sky-tint);
  color: var(--color-notion-blue);
  border-color: color-mix(in srgb, var(--color-notion-blue) 20%, transparent);
}

.fx-locale-picker__flag {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

/* Two-factor setup inside Ajax modal — Notion / Flexus chrome */
#modalAjax.twofa-setup .modal-dialog {
  max-width: 560px;
}
#modalAjax.twofa-setup .modal-content {
  border: 1px solid var(--color-ash);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(28, 25, 23, .18);
}
#modalAjax.twofa-setup .modal-header {
  background: rgba(246, 245, 244, .65);
  padding: 14px 18px;
}
#modalAjax.twofa-setup .modal-title {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
}
#modalAjax.twofa-setup .modal-body {
  min-height: 100px;
  padding: 18px 20px 8px;
  color: var(--color-graphite);
  font-size: 13px;
  line-height: 1.5;
}
#modalAjax.twofa-setup .modal-footer {
  background: rgba(246, 245, 244, .45);
  border-top: 1px solid var(--color-ash);
  padding: 12px 18px;
  gap: 8px;
}

.twofa-setup .activation-msg {
  margin: 8px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-ash);
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-charcoal);
  background: var(--color-paper-mist);
}
.twofa-setup .backup-code {
  margin: 16px auto;
  padding: 12px 14px;
  background: #fff;
  border: 1px dashed var(--color-ash);
  color: var(--color-charcoal);
  text-align: center;
  border-radius: 12px;
  font-family: var(--font-geist-mono, ui-monospace, monospace);
  font-size: 14px;
  letter-spacing: .04em;
}

.twofa-module {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 14px 16px;
  border: 1px solid var(--color-ash);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.twofa-module:hover {
  border-color: rgba(37, 99, 235, .35);
  background: rgba(37, 99, 235, .03);
}
.twofa-module.active {
  border-color: var(--color-notion-blue, #2563eb);
  background: rgba(37, 99, 235, .06);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.twofa-module .col-radio { flex-shrink: 0; }
.twofa-module .col-logo {
  flex-shrink: 0;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.twofa-module .col-description { flex: 1; min-width: 0; }
.twofa-module .col-description b {
  display: block;
  font-size: 14px;
  color: var(--color-charcoal);
  margin-bottom: 2px;
}
.twofa-module .col-description p {
  margin: 0;
  font-size: 13px;
  color: var(--color-fog);
}
.twofa-module img { max-width: 100%; max-height: 40px; }

#modalAjax.twofa-setup .modal-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

#modalAjax.twofa-setup label,
#twofaactivation label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-fog);
  letter-spacing: .02em;
}
#modalAjax.twofa-setup .form-control,
#modalAjax.twofa-setup input[type="text"],
#modalAjax.twofa-setup input[type="password"],
#modalAjax.twofa-setup input[type="number"],
#modalAjax.twofa-setup select,
#twofaactivation .form-control,
#twofaactivation input[type="text"],
#twofaactivation input[type="password"],
#twofaactivation input[type="number"] {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--color-ash);
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  color: var(--color-charcoal);
  box-shadow: none;
}
#modalAjax.twofa-setup .form-control:focus,
#modalAjax.twofa-setup input:focus,
#twofaactivation .form-control:focus,
#twofaactivation input:focus {
  outline: none;
  border-color: rgba(37, 99, 235, .45);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
#modalAjax.twofa-setup .form-group,
#twofaactivation .form-group {
  margin-bottom: 12px;
}

#twofaactivation .btn,
#modalAjax.twofa-setup .btn,
#modalAjax .modal-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
#twofaactivation .btn-primary,
#modalAjax.twofa-setup .btn-primary,
#modalAjax .modal-submit.btn-primary,
#modalAjax .modal-submit.fx-btn-primary {
  background: var(--color-notion-blue, #2563eb) !important;
  border-color: var(--color-notion-blue, #2563eb) !important;
  color: #fff !important;
}
#twofaactivation .btn-primary:hover,
#modalAjax.twofa-setup .btn-primary:hover,
#modalAjax .modal-submit.btn-primary:hover {
  filter: brightness(.95);
}
#twofaactivation .btn-default,
#modalAjax.twofa-setup .btn-default,
#modalAjax .btn-default {
  background: #fff !important;
  border-color: var(--color-ash) !important;
  color: var(--color-charcoal) !important;
}
#twofaactivation .btn-danger,
#modalAjax.twofa-setup .btn-danger,
#modalAjax .modal-submit.btn-danger {
  background: #fff !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}
#twofaactivation .btn-danger:hover,
#modalAjax .modal-submit.btn-danger:hover {
  background: #fef2f2 !important;
}

.fxModal-backdrop[style*="display:none"] { display: none !important; }
.dropdown-menu { display: none; }
.fx-sidebar-nav .dropdown-menu { display: block; }
li.dropdown.open > .dropdown-menu,
.nav-item.dropdown.open > .dropdown-menu { display: block; }
@media (min-width: 992px) {
  .fx-nav-desktop > .nav-item.dropdown:hover > .dropdown-menu { display: block; }
}
ul.fx-pills-row, ul.fx-logo-cloud, ul.fx-feature-grid, ul.fx-quick-links,
ol.fx-breadcrumb, ul.fx-sidebar-nav, ul.fx-nav, .fx-list { padding-left: 0 !important; padding-right: 0 !important; }
.fx-nav > li > a, .fx-nav > li.dropdown > a { display: inline-flex; align-items: center; }
.fx-nav { flex-direction: row; align-items: center; }
.fx-nav li { list-style: none; }

/* Topbar stays translucent-on-scroll only (see .is-scrolled above) */

/* ---- Legacy Bootstrap compat shims ---- */
.btn { font-family: var(--font-inter); font-size: var(--text-body); font-weight: var(--font-weight-medium); padding: var(--spacing-12) var(--spacing-16); border-radius: var(--radius-buttons); border: 1px solid transparent; }
.btn-primary { background: var(--color-primary-action-fill); color: #fff; }
.btn-primary:hover { background: var(--color-midnight-ink); color: #fff; }
.btn-default, .btn-outline-primary { background: var(--color-canvas-white); color: var(--color-charcoal); border-color: var(--color-ash); }
.btn-default:hover, .btn-outline-primary:hover { border-color: var(--color-charcoal); color: var(--color-charcoal); }
.btn-light, .btn-ghost { background: transparent; color: var(--color-charcoal); }
.card { background: var(--color-canvas-white); border: 1px solid var(--color-ash); border-radius: var(--radius-cards); box-shadow: none !important; }
.card-header { background: transparent; border-bottom: 1px solid var(--color-ash); font-family: var(--font-inter); font-weight: var(--font-weight-semibold); }
.card-title { font-family: var(--font-inter); font-weight: var(--font-weight-semibold); color: var(--color-charcoal); }
.list-group-item { border-color: var(--color-ash); }
.list-group-item.active { background: #dbeafe; color: var(--color-deep-sapphire); border-color: transparent; }
.form-control { background: var(--color-canvas-white); color: var(--color-midnight-ink); border: 1px solid rgba(0,0,0,.16); border-radius: var(--radius-inputs); padding: 8px 12px; font-family: var(--font-inter); font-size: var(--text-body-lg); box-shadow: none !important; }
.form-control:focus { border-color: var(--color-electric-blue); box-shadow: 0 0 0 4px rgba(0,117,222,.12) !important; outline: none; }
.text-muted { color: var(--color-fog) !important; }
.badge { font-weight: var(--font-weight-medium); font-size: var(--text-caption); padding: 3px 8px; border-radius: var(--radius-tags); }
.badge-info { background: #dbeafe; color: var(--color-deep-sapphire); }
.alert { border: 1px solid var(--color-ash); border-radius: var(--radius-lg); background: var(--color-canvas-white); padding: 12px 16px; }
.alert-success { background: var(--color-soft-mint); color: #14532d; border-color: transparent; }
.alert-danger, .alert-error { background: #fee2e2; color: #991b1b; border-color: transparent; }
.alert-warning { background: #fffbeb; color: #78350f; border-color: transparent; }
.alert-info { background: #eff6ff; color: #1e3a8a; border-color: transparent; }
.dropdown-menu { border: 1px solid var(--color-ash); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 4px; background: var(--color-canvas-white); }
.dropdown-item { padding: 8px 12px; border-radius: var(--radius-inputs); color: var(--color-charcoal); font-size: var(--text-body); }
.dropdown-item:hover { background: var(--color-paper-mist); color: var(--color-charcoal); }
.nav-link { color: var(--color-charcoal); font-size: var(--text-body); }
.navbar { border-bottom: 1px solid var(--color-ash); background: var(--color-canvas-white); }
.breadcrumb { background: transparent; padding: var(--spacing-8) 0; font-size: var(--text-body); }
.breadcrumb-item a { color: var(--color-fog); }
.breadcrumb-item.active { color: var(--color-charcoal); }
.input-group-text { background: var(--color-paper-mist); border: 1px solid var(--color-midnight-ink); border-radius: var(--radius-inputs); }
.page-link { background: var(--color-canvas-white); color: var(--color-charcoal); border: 1px solid var(--color-ash); }
.page-item.active .page-link { background: var(--color-midnight-ink); color: #fff; border-color: var(--color-midnight-ink); }
.progress-bar { background: var(--color-electric-blue); }
.table thead th { color: var(--color-fog); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--color-ash); }
.table td, .table th { border-color: var(--color-ash); }
.progress { background: var(--color-paper-mist); border-radius: var(--radius-full); }
hr, .dropdown-divider { border-color: var(--color-ash); }

/* Hide WHMCS providerLinkingFeedback when empty (placeholder block that the
   linked accounts include always renders even with no SSO configured). */
.providerLinkingFeedback:empty { display: none !important; }

/* Form resets */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.fx-testimonial { background: rgba(255,255,255,.40); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.10); }
@media (prefers-color-scheme: dark) { .fx-testimonial { background: rgba(39,39,42,.40); } }

/* WHMCS legacy utility fallbacks.
   No !important: WHMCS base.js reveals .w-hidden elements via jQuery
   slideDown()/fadeIn() inline styles, which must be able to win.
   Doubled class keeps it above other single-class display rules. */
.w-hidden.w-hidden, .whidden.whidden { display: none; }
#fullpage-overlay { display: none !important; }

/* Form resets */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.fx-testimonial { background: rgba(255,255,255,.40); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.10); }
@media (prefers-color-scheme: dark) { .fx-testimonial { background: rgba(39,39,42,.40); } }

/* ============================================================
   Flexus Theme — shadcn SignInPage port (1:1 from components/ui/sign-in.tsx)
   These classes are exactly the tokens that the shadcn Tailwind 4 setup
   uses: h-100dvh, w-100dvw, font-geist, animate-element, etc.
   Author: Mauro Gashfix
   ============================================================ */

:root {
    --color-bg: var(--color-pure-white, #ffffff);
    --color-fg: var(--color-midnight-ink, #171717);
    --color-border: var(--color-ash, #e5e5e5);
    --color-muted-foreground: var(--color-fog, #737373);
    --color-foreground-5: var(--color-ash, rgba(23,23,23,.05));
    --color-foreground-80: var(--color-fog, rgba(23,23,23,.80));
    --color-card-40: rgba(255,255,255,.40);
    --color-border-white-10: rgba(255,255,255,.10);
    --color-violet-400: #a78bfa;
    --color-violet-500-10: rgba(124,58,237,.10);
    --color-primary: var(--color-midnight-ink, #0a0a0a);
    --color-primary-foreground: var(--color-pure-white, #fafafa);
    --color-secondary: var(--color-paper-mist, #f5f5f5);
    --color-background: var(--color-pure-white, #ffffff);
}

/* Auth/form component variables inherit from Flexus tokens — dark mode handled by base.css */

/* Layout shell — matches `h-[100dvh] flex flex-col md:flex-row font-geist w-[100dvw]` */
.h-100dvh { height: 100dvh; min-height: calc(100vh - 56px); }
.w-100dvw { width: 100dvw; max-width: 100%; }
.font-geist { font-family: 'Geist', 'Inter', system-ui, sans-serif; }
/* Layout shell — matches `h-[100dvh] flex flex-col md:flex-row font-geist w-[100dvw]` */
.flex { display: flex !important; }
.h-100dvh { height: 100dvh; min-height: calc(100vh - 56px); }
.w-100dvw { width: 100dvw; max-width: 100%; }
.flex-1 { flex: 1 1 0% !important; min-width: 0; min-height: 0; }
.flex-col { display: flex !important; flex-direction: column !important; }
.flex-col { display: flex; flex-direction: column; }
@media (min-width: 768px) {
    .md-flex-row { flex-direction: row !important; }
    .md-block { display: block !important; }
}
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-8 { padding: 32px; }
.px-4 { padding-inline: 16px; }
.px-8 { padding-inline: 32px; }
.py-4 { padding-block: 16px; }
.pr-12 { padding-right: 48px; }
.text-sm { font-size: 13px; line-height: 1.4; }
.text-base { font-size: 14px; }
.text-2xl { font-size: 24px; }
.text-4xl { font-size: 36px; line-height: 1.1; }
@media (min-width: 768px) { .text-4xl, .md-text-5xl { font-size: 48px; line-height: 1.0; } }
.font-light { font-weight: 300; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.tracking-tighter { letter-spacing: -.04em; }
.leading-tight { line-height: 1.1; }
.leading-snug { line-height: 1.3; }
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }
.mt-1 { margin-top: 4px; }
.space-y-5 > * + * { margin-top: 20px; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-4 { inset: 16px; }
.bottom-8 { bottom: 32px; }
.left-1\/2 { left: 50%; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.rounded-2xl { border-radius: 16px; }
.rounded-3xl { border-radius: 24px; }
.bg-cover { background-size: cover; }
.bg-center { background-position: center; }
.bg-background { background: var(--color-background); }
.text-foreground { color: var(--color-fg); }
.text-muted-foreground { color: var(--color-muted-foreground); }
.text-foreground-80 { color: var(--color-foreground-80); }
.text-violet-400 { color: var(--color-violet-400); }
.bg-primary { background: var(--color-primary); }
.text-primary-foreground { color: var(--color-primary-foreground); }
.bg-secondary { background: var(--color-secondary); }
.bg-transparent { background: transparent; }
.border-border { border: 1px solid var(--color-border); }
.border-white-10 { border: 1px solid var(--color-border-white-10); }
.bg-foreground-5 { background: var(--color-foreground-5); }
.bg-card-40 { background: var(--color-card-40); }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-xl { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.transition-colors { transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.hover-underline:hover { text-decoration: underline; }
.hover-bg-primary-90:hover { background: #262626; }
.hover-bg-secondary:hover { background: var(--color-secondary); }
.hover-text-foreground:hover { color: var(--color-fg); }
.cursor-pointer { cursor: pointer; }
.object-cover { object-fit: cover; }
.w-64 { width: 16rem; }
.h-10 { height: 40px; }
.w-10 { width: 40px; }
.w-5 { width: 20px; }
.h-5 { height: 20px; }
.hidden { display: none; }
@media (min-width: 1280px) { .xl-flex { display: flex; } }
@media (min-width: 1536px) { .\32xl-flex { display: flex; } }
.focus-outline-none:focus, .focus-outline-none:focus-visible { outline: none; }
.transition-colors { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }

/* Glass-input wrapper (GlassInputWrapper) */
.glass-input-wrapper { border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-foreground-5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: border-color .15s ease, background-color .15s ease; }
.glass-input-wrapper:focus-within { border-color: var(--color-violet-400); background: var(--color-violet-500-10); }
.glass-input-wrapper input, .glass-input-wrapper select, .glass-input-wrapper textarea { width: 100%; background: transparent; border: 0; outline: 0; padding: 16px; border-radius: 16px; font-family: inherit; font-size: 14px; color: var(--color-fg); }
.glass-input-wrapper input::placeholder { color: var(--color-muted-foreground); }
.glass-input-wrapper #stateselect { background: var(--color-bg); border: 1px solid var(--color-border); -webkit-appearance: auto; appearance: auto; cursor: pointer; }
.glass-input-wrapper--with-action { position: relative; }
.glass-input-wrapper--with-action input { padding-right: 48px; }
.glass-input-wrapper__action { position: absolute; inset-block: 0; right: 12px; display: flex; align-items: center; background: transparent; border: 0; padding: 0; color: var(--color-muted-foreground); cursor: pointer; }
.glass-input-wrapper__action:hover { color: var(--color-fg); }

/* Animations (extracted from the snippet) */
@keyframes fadeSlideIn { to { opacity: 1; filter: blur(0px); transform: translateY(0px); } }
@keyframes slideRightIn { to { opacity: 1; filter: blur(0px); transform: translateX(0px); } }
@keyframes testimonialIn { to { opacity: 1; filter: blur(0px); transform: translateY(0px) scale(1); } }

.animate-element { opacity: 0; filter: blur(4px); transform: translateY(8px); animation: fadeSlideIn .5s cubic-bezier(.16, 1, .3, 1) forwards; }
.animate-slide-right { opacity: 0; filter: blur(4px); transform: translateX(-12px); animation: slideRightIn .7s cubic-bezier(.16, 1, .3, 1) forwards; }
.animate-testimonial { opacity: 0; filter: blur(4px); transform: translateY(8px) scale(.96); animation: testimonialIn .7s cubic-bezier(.16, 1, .3, 1) forwards; }
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }
.animate-delay-500 { animation-delay: 500ms; }
.animate-delay-600 { animation-delay: 600ms; }
.animate-delay-700 { animation-delay: 700ms; }
.animate-delay-800 { animation-delay: 800ms; }
.animate-delay-900 { animation-delay: 900ms; }
.animate-delay-1000 { animation-delay: 1000ms; }
.animate-delay-1200 { animation-delay: 1200ms; }
.animate-delay-1400 { animation-delay: 1400ms; }

/* Sign-in specific button (rounded-2xl bg-primary py-4 w-full) */
.fx-signin-primary { width: 100%; border-radius: 16px; background: var(--color-primary-action-fill, #0075de); color: #fff; padding: 16px 0; font-weight: 500; font-family: inherit; font-size: 14px; border: 0; cursor: pointer; transition: background .15s ease, opacity .15s ease; }
.fx-signin-primary:hover { background: var(--color-deep-sapphire, #0060b6); }
.fx-google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--color-border); border-radius: 16px; padding: 16px; background: var(--color-pure-white, #fff); font-family: inherit; font-size: 14px; font-weight: 500; color: var(--color-fg, #171717); cursor: pointer; text-decoration: none; transition: background .15s ease; }
.fx-google-btn:hover { background: var(--color-secondary, #f5f5f5); }
.fx-google-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Social providers on auth — Flexus face under a full-size native hit layer.
   Real user clicks hit Google/Facebook so the SDK stays happy; face is visual only. */
.fx-social-auth { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.fx-social-btn {
  position: relative;
  width: 100%;
  min-height: 54px;
}
.fx-social-btn__face {
  position: relative;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
}
.fx-social-btn__native {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}
.fx-social-btn__native .g_id_signin,
.fx-social-btn__native .btn-social,
.fx-social-btn__native .btn,
.fx-social-btn__native > div,
.fx-social-btn__native > a {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 54px !important;
  margin: 0 !important;
  opacity: 0.02 !important; /* nearly invisible but still “visible” to Google */
  display: block !important;
  box-sizing: border-box !important;
}
.fx-social-btn__native iframe {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 54px !important;
  opacity: 0.02 !important;
}
.fx-social-btn:hover .fx-social-btn__face { background: var(--color-secondary, #f5f5f5); }

.fx-divider { position: relative; display: flex; align-items: center; justify-content: center; }
.fx-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--color-border); }
.fx-divider span { position: relative; background: var(--color-bg, #fff); padding: 0 16px; font-size: 13px; color: var(--color-muted-foreground); }
.fx-fx-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 14px; font-weight: 500; padding: 12px 18px; border-radius: 16px; border: 1px solid transparent; cursor: pointer; transition: background .15s ease; background: var(--color-primary); color: #fff; }
.fx-fx-cta:hover { background: #262626; }

/* Auth hero background — swaps Pexels image based on colour theme */
.fx-auth-hero {
    background-image: url('https://images.pexels.com/photos/6804068/pexels-photo-6804068.jpeg?auto=compress&cs=tinysrgb&w=1200');
    transition: background-image .3s ease;
}
body.flexus-dark .fx-auth-hero {
    background-image: url('https://images.pexels.com/photos/6804068/pexels-photo-6804068.jpeg?auto=compress&cs=tinysrgb&w=1200');
}
@media (prefers-color-scheme: dark) {
    body.flexus-auto .fx-auth-hero {
        background-image: url('https://images.pexels.com/photos/6804068/pexels-photo-6804068.jpeg?auto=compress&cs=tinysrgb&w=1200');
    }
}

/* ---- Captcha (login, register, contact, tickets) ---- */
.fx-captcha { margin: 4px 0 8px; }
.fx-captcha__label {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--color-slate, #56546b);
}
.fx-captcha__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fx-captcha__image img {
  display: block;
  border-radius: 10px;
  border: 1px solid var(--color-ash, #e8e6e3);
  background: #fff;
}
.fx-captcha__input { flex: 1; min-width: 120px; }
.fx-captcha__input .fx-input { width: 100%; }
.fx-captcha__recaptcha { min-height: 78px; }
.fx-auth-captcha--invisible,
form:has(.btn-recaptcha-invisible) .g-recaptcha {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* reCAPTCHA invisible — compact badge peeking from bottom-right corner */
.grecaptcha-badge {
  position: fixed !important;
  bottom: -28px !important;
  right: 0 !important;
  left: auto !important;
  top: auto !important;
  width: 70px !important;
  height: 60px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 99999 !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1) !important;
  transition: bottom 0.25s ease, width 0.25s ease !important;
  transform: none !important;
  box-sizing: content-box !important;
}
.grecaptcha-badge:hover {
  bottom: 0 !important;
  width: 256px !important;
}
.grecaptcha-badge iframe {
  width: 256px !important;
  height: 60px !important;
  max-width: none !important;
  display: block !important;
  border: 0 !important;
}

/* ---- License verification UI (Classic + Studio) ---- */
.fx-license-notice--classic .fx-alert { margin-bottom: 0; }
.fx-license-notice__meta { opacity: 0.9; }
.fx-license-notice__link {
    display: inline-block;
    margin-left: 8px;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fx-license-gate {
    padding: clamp(32px, 6vw, 72px) 20px;
}
.fx-license-gate__shell {
    max-width: 880px;
    margin: 0 auto;
}
.fx-license-gate__card {
    background: var(--color-canvas-white, #fff);
    border: 1px solid var(--color-ash, #e8e6e3);
    border-radius: var(--radius-2xl, 20px);
    box-shadow: var(--shadow-subtle-2, 0 8px 30px rgba(0,0,0,.06));
    padding: clamp(28px, 4vw, 44px);
    text-align: center;
}
.fx-license-gate__badge {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #fffbeb;
    color: #b45309;
    font-size: 22px;
    border: 1px solid #fde68a;
}
.fx-license-gate__kicker {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-fog, #787774);
}
.fx-license-gate__title {
    margin: 0 0 12px;
    font-family: var(--font-satoshi, var(--font-inter));
    font-size: clamp(24px, 3vw, 34px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-charcoal, #37352f);
    line-height: 1.15;
}
.fx-license-gate__lead {
    margin: 0 auto 28px;
    max-width: 54ch;
    font-size: var(--text-body, 15px);
    line-height: 1.65;
    color: var(--color-steel, #615d59);
}
.fx-license-gate__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
    text-align: left;
}
.fx-license-gate__option {
    border: 1px solid var(--color-ash, #e8e6e3);
    border-radius: var(--radius-xl, 16px);
    padding: 18px 18px 16px;
    background: var(--color-canvas, #faf9f7);
}
.fx-license-gate__option--primary {
    border-color: var(--color-notion-blue, #0075de);
    box-shadow: 0 0 0 1px rgba(0, 117, 222, 0.12);
}
.fx-license-gate__option-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-canvas-white, #fff);
    border: 1px solid var(--color-ash, #e8e6e3);
    color: var(--color-charcoal, #37352f);
    margin-bottom: 10px;
}
.fx-license-gate__option-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-charcoal, #37352f);
}
.fx-license-gate__option-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-steel, #615d59);
}
.fx-license-gate__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}
.fx-license-gate__note {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--color-fog, #787774);
}

body.fx-license-gate-active #main-body > .fx-bleed > *:not(.fx-license-gate),
body.fx-license-gate-active #main-body > .flexus-container > *:not(.fx-license-gate):not(.flexus-container),
body.fx-license-gate-active #main-body > .fx-bleed .fx-shell__main > *:not(.fx-license-gate),
body.fx-license-gate-active #main-body > .flexus-container .fx-shell__main > *:not(.fx-license-gate),
body.fx-license-gate-active.page-homepage #main-body > *:not(.fx-license-gate),
body.fx-license-gate-active.page-flexus-landing #main-body > *:not(.fx-license-gate) {
    display: none !important;
}

@media (max-width: 720px) {
    .fx-license-gate__options { grid-template-columns: 1fr; }
}