/* =========================================
   Auth Alpha - Custom Styles
   ========================================= */

:root {
  --auth-bg: #f5f8fc;
  --auth-grid-line: rgba(148, 178, 214, 0.16);
  --auth-card-bg: #ffffff;
  --auth-primary: #1877d2;
  --auth-primary-hover: #1265b5;
  --auth-heading: #1e293b;
  --auth-muted: #64748b;
  --auth-label: #334155;
  --auth-input-border: #dbe3ec;
  --auth-input-bg: #f8fafc;
  --auth-error: #dc3545;
  --auth-link: #1877d2;
}

html,
body {
  height: 100%;
}

body.auth-body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background-color: var(--auth-bg);
  background-image:
    linear-gradient(var(--auth-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--auth-grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--auth-heading);
}

.auth-wrapper {
  min-height: 100vh;
}

/* Card */
.auth-card {
  background: var(--auth-card-bg);
  border: none;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(30, 64, 120, 0.08),
    0 2px 8px rgba(30, 64, 120, 0.05);
  width: 100%;
  max-width: 400px;
}

.auth-card .card-body {
  padding: 2.25rem 2rem;
}

/* Logo */
.auth-logo {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #16202e;
  line-height: 1;
}

.auth-logo .logo-pin {
  color: var(--auth-primary);
  vertical-align: -2px;
}

.auth-tagline {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8aa0b8;
  font-weight: 600;
}

/* Headings */
.auth-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--auth-heading);
}

.auth-subtitle {
  font-size: 0.875rem;
  color: var(--auth-muted);
}

/* Icon circles */
.auth-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-icon-circle.icon-amber {
  background: #fdf3d8;
  color: #e8a13c;
}

.auth-icon-circle.icon-blue {
  background: #e3edfb;
  color: var(--auth-primary);
}

/* Form */
.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--auth-label);
  margin-bottom: 0.35rem;
}

.auth-card .form-control {
  background-color: var(--auth-input-bg);
  border: 1px solid var(--auth-input-border);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  color: var(--auth-heading);
}

.auth-card .form-control::placeholder {
  color: #9aa9bb;
}

.auth-card .form-control:focus {
  background-color: #ffffff;
  border-color: var(--auth-primary);
  box-shadow: 0 0 0 0.2rem rgba(24, 119, 210, 0.12);
}

.auth-card .form-control.is-invalid {
  border-color: var(--auth-error);
  background-image: none;
}

.invalid-feedback {
  font-size: 0.78rem;
}

/* Password eye toggle */
.password-group {
  position: relative;
}

.password-group .form-control {
  padding-right: 2.75rem;
}

.toggle-password {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2.75rem;
  border: none;
  background: transparent;
  color: #8aa0b8;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.toggle-password:hover {
  color: var(--auth-heading);
}

/* Links */
.auth-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--auth-link);
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
  color: var(--auth-primary-hover);
}

.auth-link-muted {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--auth-muted);
  text-decoration: none;
}

.auth-link-muted:hover {
  color: var(--auth-heading);
}

/* Primary button */
.btn-auth {
  background-color: var(--auth-primary);
  border-color: var(--auth-primary);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 10px;
  padding: 0.65rem 1rem;
}

.btn-auth:hover,
.btn-auth:focus {
  background-color: var(--auth-primary-hover);
  border-color: var(--auth-primary-hover);
  color: #ffffff;
}

/* OTP inputs */
.otp-input {
  width: 48px;
  height: 58px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  border: 1px solid var(--auth-input-border);
  border-radius: 12px;
  background-color: var(--auth-input-bg);
  color: var(--auth-heading);
}

.otp-input:focus {
  outline: none;
  border-color: var(--auth-primary);
  box-shadow: 0 0 0 0.2rem rgba(24, 119, 210, 0.12);
  background-color: #ffffff;
}

.otp-group.is-invalid .otp-input {
  border-color: var(--auth-error);
}

.otp-error {
  display: none;
  color: var(--auth-error);
  font-size: 0.78rem;
}

.otp-group.is-invalid ~ .otp-error {
  display: block;
}

/* Resend line */
.resend-text {
  font-size: 0.85rem;
  color: var(--auth-muted);
}

.resend-text .resend-link {
  font-weight: 600;
  color: var(--auth-link);
  text-decoration: none;
}

.resend-text .resend-link:hover {
  text-decoration: underline;
}

/* Verify email display */
.verify-email {
  font-weight: 600;
  color: var(--auth-heading);
}

/* Success alert */
.auth-success {
  font-size: 0.85rem;
}

/* =========================================
   Admin Shell (Dashboard / Settings)
   ========================================= */

:root {
  --adm-sidebar-bg: #0d1421;
  --adm-sidebar-w: 248px;
  --adm-body-bg: #eef2f7;
  --adm-border: #e6ebf2;
  --adm-green: #16a34a;
  --adm-red: #dc2626;
  --adm-orange: #f59e0b;
}

body.admin-body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background-color: var(--adm-body-bg);
  color: var(--auth-heading);
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--adm-sidebar-w);
  background: var(--adm-sidebar-bg);
  overflow-y: auto;
  z-index: 1040;
  transition: transform 0.25s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.1rem 1.25rem;
}

.brand-pin {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--auth-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.brand-name {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
}

.brand-sub {
  color: #64748b;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-section-label {
  color: #475569;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem 1.25rem 0.35rem;
}

.side-nav {
  list-style: none;
  margin: 0;
  padding: 0 0.75rem 1.5rem;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #8fa0b5;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  margin-bottom: 2px;
}

.side-link svg {
  flex: 0 0 auto;
  opacity: 0.9;
}

.side-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.side-link.active {
  background: var(--auth-primary);
  color: #ffffff;
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  margin-left: var(--adm-sidebar-w);
  background: #ffffff;
  border-bottom: 1px solid var(--adm-border);
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
}

.topbar .collapse-btn {
  border: 1px solid var(--adm-border);
  background: #fff;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--auth-muted);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  text-decoration: none;
}

.topbar-user .user-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--auth-heading);
  line-height: 1.15;
}

.topbar-user .user-role {
  font-size: 0.72rem;
  color: var(--auth-muted);
}

.logout-btn {
  border: none;
  background: transparent;
  color: var(--adm-red);
  display: inline-flex;
  align-items: center;
}

/* Avatars */
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  flex: 0 0 auto;
}

.avatar.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.7rem;
}

/* Main area */
.main-area {
  margin-left: var(--adm-sidebar-w);
  padding: 1.5rem;
}

.page-title {
  font-size: 1.3rem;
  font-weight: 700;
}

/* Cards */
.adm-card {
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: 12px;
}

.adm-card .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--adm-border);
}

.card-title-sm {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}

.card-sub {
  font-size: 0.75rem;
  color: var(--auth-muted);
}

.view-all-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--auth-link);
  text-decoration: none;
}

.view-all-link:hover {
  text-decoration: underline;
}

/* Stat cards */
.stat-card {
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  height: 100%;
}

.stat-label {
  font-size: 0.78rem;
  color: var(--auth-muted);
  font-weight: 500;
}

.stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stat-icon.blue { background: #e3edfb; color: var(--auth-primary); }
.stat-icon.green { background: #e5f7ec; color: var(--adm-green); }
.stat-icon.purple { background: #efe9fd; color: #7c3aed; }
.stat-icon.teal { background: #e0f5f4; color: #0d9488; }

.stat-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--auth-heading);
}

.stat-delta {
  font-size: 0.75rem;
  font-weight: 700;
}

.stat-delta.up { color: var(--adm-green); }

.stat-note {
  font-size: 0.72rem;
  color: var(--auth-muted);
}

/* Charts */
.chart-legend {
  display: flex;
  gap: 0.9rem;
  font-size: 0.72rem;
  color: var(--auth-muted);
  align-items: center;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 190px;
  padding: 1rem 1.25rem 0.35rem;
}

.bar-month {
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 100%;
}

.bar {
  width: 6px;
  border-radius: 3px 3px 0 0;
}

.bar.tier-1 { background: #2563eb; }
.bar.tier-2 { background: #f59e0b; }
.bar.tier-3 { background: #22c55e; }

.bar-axis {
  display: flex;
  padding: 0 1.25rem 0.9rem;
  gap: 4px;
}

.bar-axis span {
  flex: 1 1 0;
  text-align: center;
  font-size: 0.62rem;
  color: var(--auth-muted);
}

.line-chart-wrap {
  padding: 0.75rem 1.25rem 1rem;
}

.line-chart-wrap svg {
  width: 100%;
  height: 190px;
  display: block;
}

/* Tables */
.adm-table {
  margin: 0;
  font-size: 0.82rem;
  border-collapse: collapse;
  border: 1px solid #eaeef4;
}

.adm-table thead th {
  font-size: 0.72rem;
  color: var(--auth-muted);
  font-weight: 600;
  border: 1px solid #eaeef4;
  border-bottom: 1px solid var(--adm-border);
  background: #f8fafc;
  padding: 0.65rem 1rem;
  white-space: nowrap;
}

.adm-table tbody td {
  padding: 0.6rem 1rem;
  vertical-align: middle;
  border: 1px solid #eaeef4;
  white-space: nowrap;
}

.status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}

.status-badge.active { background: #e5f7ec; color: var(--adm-green); }
.status-badge.blocked { background: #fdeaea; color: var(--adm-red); }
.status-badge.suspended { background: #fef3e2; color: var(--adm-orange); }

.eye-link {
  color: var(--auth-muted);
}

.eye-link:hover {
  color: var(--auth-heading);
}

/* Pagination row */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.25rem;
}

.pg-btn {
  border: 1px solid var(--adm-border);
  background: #fff;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--auth-heading);
  padding: 0.35rem 0.8rem;
}

.pg-pages {
  display: flex;
  gap: 4px;
  align-items: center;
}

.pg-page {
  min-width: 28px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--auth-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.pg-page.active {
  background: #e3edfb;
  color: var(--auth-primary);
}

/* Activity list */
.activity-list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
}

.activity-item {
  display: flex;
  gap: 0.7rem;
  padding: 0.65rem 1.25rem;
  align-items: flex-start;
}

.activity-item + .activity-item {
  border-top: 1px solid #f1f5f9;
}

.activity-name {
  font-size: 0.8rem;
  font-weight: 700;
}

.activity-text {
  font-size: 0.76rem;
  color: var(--auth-muted);
}

.activity-time {
  font-size: 0.7rem;
  color: #94a3b8;
  white-space: nowrap;
  margin-left: auto;
}

.activity-time .dot-now {
  color: var(--auth-primary);
}

/* Settings tabs */
.settings-tabs {
  display: inline-flex;
  gap: 0.35rem;
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: 10px;
  padding: 0.3rem;
}

.settings-tabs .tab-btn {
  border: none;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--auth-muted);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
}

.settings-tabs .tab-btn.active {
  background: #e3edfb;
  color: var(--auth-primary);
}

/* Profile photo */
.profile-photo {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: #e2e8f0;
}

.profile-photo .avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 1.4rem;
}

.btn-outline-adm {
  border: 1px solid var(--adm-border);
  background: #fff;
  color: var(--auth-heading);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
}

.btn-outline-adm:hover {
  background: #f8fafc;
}

/* Settings forms reuse auth form look */
.settings-card .form-control,
.settings-card .form-select {
  background-color: var(--auth-input-bg);
  border: 1px solid var(--auth-input-border);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  font-size: 0.88rem;
}

.settings-card .form-control:focus {
  background-color: #fff;
  border-color: var(--auth-primary);
  box-shadow: 0 0 0 0.2rem rgba(24, 119, 210, 0.12);
}

.settings-card .form-control.is-invalid {
  border-color: var(--auth-error);
  background-image: none;
}

/* Tutorial cards */
.tutorial-card {
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tutorial-num {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--auth-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tutorial-phone {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 0;
  margin: 0.75rem 0;
}

.tutorial-phone img {
  height: 150px;
}

.tutorial-field-label {
  font-size: 0.68rem;
  color: var(--auth-muted);
  text-transform: capitalize;
  margin-bottom: 0.15rem;
}

.tutorial-field-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--auth-heading);
  word-break: break-word;
}

.icon-btn {
  border: 1px solid var(--adm-border);
  background: #fff;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn.danger { color: var(--adm-red); }
.icon-btn.primary { color: var(--auth-primary); }

.icon-btn:hover { background: #f8fafc; }

/* Modals */
.modal-content {
  border: none;
  border-radius: 14px;
}

.modal-title {
  font-size: 1rem;
  font-weight: 700;
}

.modal-header {
  border-bottom: 1px solid #eaeef4;
  padding-bottom: 0.85rem;
}

.modal-footer {
  border-top: 1px solid #eaeef4;
}

.modal-action-row {
  border-top: 1px solid #eaeef4;
  padding-top: 1rem;
}

/* Logout confirmation modal */
.logout-modal-dialog {
  max-width: 340px;
}

.logout-modal-content {
  border: 0;
  border-radius: 14px;
}

.logout-modal-body {
  text-align: center;
  padding: 1.75rem 1.5rem 1.5rem;
}

.logout-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fde8ec;
  color: #e14a5a;
  margin-bottom: 0.85rem;
}

.logout-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--auth-heading);
  margin-bottom: 0.3rem;
}

.logout-modal-text {
  font-size: 0.82rem;
  color: var(--auth-muted);
  margin-bottom: 1.25rem;
}

.logout-modal-actions {
  display: flex;
  gap: 0.75rem;
}

.logout-modal-actions .btn {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: 8px;
}

.logout-cancel-btn {
  background: #f4f6f9;
  border: 1px solid #e3e8ef;
  color: var(--auth-heading);
}

.logout-cancel-btn:hover {
  background: #e9edf2;
  color: var(--auth-heading);
}

.logout-confirm-btn {
  background: #e8505b;
  border: 1px solid #e8505b;
  color: #fff;
}

.logout-confirm-btn:hover {
  background: #d9414c;
  border-color: #d9414c;
  color: #fff;
}

/* Desktop sidebar collapse */
@media (min-width: 992px) {
  .topbar,
  .main-area {
    transition: margin-left 0.25s ease;
  }

  body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
  }

  body.sidebar-collapsed .topbar,
  body.sidebar-collapsed .main-area {
    margin-left: 0;
  }
}

/* Responsive */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.45);
  }

  .topbar,
  .main-area {
    margin-left: 0;
  }
}

@media (max-width: 575.98px) {
  .main-area {
    padding: 1rem;
  }

  .bar-chart {
    height: 150px;
  }
}

/* Avatar / legend color utilities (no inline CSS) */
.avatar.av-indigo { background: #6366f1; }
.avatar.av-sky { background: #0ea5e9; }
.avatar.av-amber { background: #f59e0b; }
.avatar.av-red { background: #ef4444; }
.avatar.av-emerald { background: #10b981; }
.avatar.av-violet { background: #8b5cf6; }
.avatar.av-pink { background: #ec4899; }
.avatar.av-teal { background: #14b8a6; }

.legend-dot.ld-tier1,
.legend-dot.ld-users { background: #2563eb; }
.legend-dot.ld-tier2 { background: #f59e0b; }
.legend-dot.ld-tier3 { background: #22c55e; }
.legend-dot.ld-events { background: #0f172a; }

/* =========================================
   User Management
   ========================================= */

.um-toolbar-btn {
  border: 1px solid var(--adm-border);
  background: #fff;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--auth-heading);
  padding: 0.45rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.um-toolbar-btn:hover {
  background: #f8fafc;
}

.um-toolbar-btn .ic-pdf { color: var(--adm-red); }
.um-toolbar-btn .ic-csv { color: var(--adm-green); }

.um-search {
  max-width: 240px;
}

.um-search .form-control {
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-input-border);
  border-radius: 8px;
  font-size: 0.8rem;
  padding: 0.4rem 0.7rem 0.4rem 2rem;
}

.um-search-wrap {
  position: relative;
}

.um-search-wrap .search-ic {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.sort-th {
  cursor: pointer;
  user-select: none;
}

.sort-th .sort-ic {
  color: #b3c0d0;
  font-size: 0.7rem;
}

.sort-th.sorted .sort-ic {
  color: var(--auth-primary);
}

.dots-btn {
  border: none;
  background: transparent;
  color: var(--auth-muted);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dots-btn:hover {
  background: #f1f5f9;
  color: var(--auth-heading);
}

.row-menu {
  font-size: 0.82rem;
  border: 1px solid var(--adm-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

.row-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  padding: 0.45rem 0.9rem;
}

.row-menu .dropdown-item.text-warn {
  color: var(--adm-orange);
}

/* Filter modal */
.filter-chip {
  border: 1px solid var(--adm-border);
  background: #fff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--auth-muted);
  padding: 0.35rem 0.9rem;
}

.filter-chip.active {
  border-color: var(--auth-primary);
  color: var(--auth-primary);
  background: #e3edfb;
}

/* Suspend modal */
.suspend-warning {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: #fef3e2;
  border: 1px solid #fbd9a5;
  color: #92600a;
  font-size: 0.8rem;
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
}

.suspend-user-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.suspend-user-head .u-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.suspend-user-head .u-email {
  font-size: 0.78rem;
  color: var(--auth-muted);
}

.btn-suspend {
  background: var(--adm-orange);
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  border-radius: 8px;
  padding: 0.45rem 1rem;
}

.btn-suspend:hover {
  background: #d97706;
  color: #fff;
}

/* User detail page */
.ud-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ud-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 1.2rem;
}

.ud-name {
  font-size: 1.1rem;
  font-weight: 800;
}

.ud-email {
  font-size: 0.82rem;
  color: var(--auth-muted);
}

.ud-badges .status-badge {
  margin-right: 0.35rem;
}

.ud-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1rem;
}

.ud-meta-label {
  font-size: 0.7rem;
  color: var(--auth-muted);
}

.ud-meta-value {
  font-size: 0.85rem;
  font-weight: 700;
}

.ud-meta-value.rev {
  color: var(--adm-green);
}

/* Event cards */
.event-card {
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.event-thumb {
  height: 110px;
  position: relative;
  display: block;
}

.event-thumb.ev-1 { background: linear-gradient(135deg, #34d399, #059669); }
.event-thumb.ev-2 { background: linear-gradient(135deg, #60a5fa, #1d4ed8); }
.event-thumb.ev-3 { background: linear-gradient(135deg, #fbbf24, #d97706); }
.event-thumb.ev-4 { background: linear-gradient(135deg, #22d3ee, #0e7490); }

.event-rating {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  color: var(--auth-heading);
}

.event-rating .star { color: var(--adm-orange); }

.event-body {
  padding: 0.75rem 0.85rem;
}

.event-title {
  font-size: 0.85rem;
  font-weight: 700;
}

.event-meta {
  font-size: 0.7rem;
  color: var(--auth-muted);
}

.event-desc {
  font-size: 0.74rem;
  color: var(--auth-muted);
  margin: 0.35rem 0 0;
}

/* User Details modal (horizontal event cards) */
.udm-dialog {
  max-width: 680px;
}

.udm-avatar-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.ev-row {
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  background: #fff;
  padding: 0.7rem;
  display: flex;
  gap: 0.7rem;
  height: 100%;
}

.ev-row-thumb {
  width: 76px;
  height: 76px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.ev-row-body {
  min-width: 0;
  flex: 1;
}

.ev-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.ev-row-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--auth-heading);
}

.ev-row-rating {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--auth-heading);
  white-space: nowrap;
}

.ev-row-rating .star {
  color: var(--adm-orange);
}

.ev-row-meta {
  font-size: 0.68rem;
  color: var(--auth-muted);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.15rem 0 0.25rem;
}

.ev-row-meta svg {
  margin-right: 0.2rem;
  vertical-align: -2px;
}

.ev-row-desc {
  font-size: 0.72rem;
  color: var(--auth-muted);
  margin: 0;
}

/* Events page */
.status-badge.ongoing { background: #e3edfb; color: var(--auth-primary); }
.status-badge.completed { background: #e5f7ec; color: var(--adm-green); }
.status-badge.upcoming { background: #fef3e2; color: var(--adm-orange); }
.status-badge.cancelled { background: #fdeaea; color: var(--adm-red); }

.ev-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 110px;
}

.ev-progress .bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.ev-progress .bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--auth-primary);
}

.ev-progress .pct {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--auth-heading);
  white-space: nowrap;
}

.eye-btn {
  border: none;
  background: transparent;
  color: var(--auth-muted);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.eye-btn:hover {
  background: #f1f5f9;
  color: var(--auth-heading);
}

.ev-row-status {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--auth-primary);
  white-space: nowrap;
}

/* Events table circle thumbnails */
.ev-name-cell,
.ev-org-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ev-circle-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Topbar profile image */
.topbar-avatar-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Subscription page */
.sub-tier-card {
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  padding: 1.1rem 1.15rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sub-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.sub-tier-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--auth-muted);
}

.sub-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  color: #fff;
}

.sub-tier-pill.blue { background: var(--auth-primary); }
.sub-tier-pill.white { background: #f1f5f9; color: var(--auth-heading); border: 1px solid var(--adm-border); }
.sub-tier-pill.gold { background: #d4a017; }
.sub-tier-pill.platinum { background: #64748b; }

.sub-tier-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #376dc7;
  margin-bottom: 0.8rem;
}

.sub-benefits-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--auth-heading);
  margin-bottom: 0.55rem;
}

.sub-benefit {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.75rem;
  color: var(--auth-muted);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.sub-benefit .chk {
  color: #1216ad;
  flex-shrink: 0;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e8f1fd;
  font-size: 0.6rem;
  line-height: 1;
}

/* Revenue summary cards */
.rev-card {
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  padding: 0.95rem 1.05rem;
}

.rev-card.primary {
  background: var(--auth-primary);
  border-color: var(--auth-primary);
  color: #fff;
}

.rev-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--auth-muted);
  margin-bottom: 0.4rem;
}

.rev-card.primary .rev-card-top { color: rgba(255, 255, 255, 0.85); }

.rev-card-amount {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--auth-heading);
}

.rev-card.primary .rev-card-amount { color: #fff; }

.rev-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--auth-muted);
  margin-top: 0.3rem;
}

.rev-card.primary .rev-card-foot { color: rgba(255, 255, 255, 0.85); }

.rev-delta-up { color: var(--adm-green); font-weight: 700; }
.rev-card.primary .rev-delta-up { color: #d1fae5; }

.rev-ic {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #eef4fd;
  color: var(--auth-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rev-card.primary .rev-ic { background: rgba(255, 255, 255, 0.2); color: #fff; }

.status-badge.pastdue { background: #fdeaea; color: var(--adm-red); }

.sub-user-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sub-user-cell .u-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--auth-heading);
  line-height: 1.2;
}

.sub-user-cell .u-email {
  font-size: 0.68rem;
  color: var(--auth-muted);
}

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

/* ===== Library Routes ===== */
.lr-main {
  position: relative;
}
.lr-map-bg {
  position: relative;
  border-radius: 12px;
  padding: 18px;
  min-height: 60vh;
  overflow: hidden;
}
.lr-create-btn {
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
}
.lr-create-btn:hover { background: #1266b8; color: #fff; }
.lr-tabs { margin-bottom: 14px; }
.lr-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15, 34, 58, 0.12);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.lr-card-map, .lr-detail-map {
  position: relative;
  border-radius: 10px;
  background: url("../images/maps/map-bg.svg") center / cover;
  height: 120px;
  overflow: hidden;
}
.lr-detail-map { height: 240px; }
.lr-card-map svg, .lr-detail-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lr-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--adm-text);
}
.lr-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--adm-text);
  white-space: nowrap;
}
.lr-rating .star { color: var(--adm-orange); }
.lr-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lr-stat {
  background: #f4f6f9;
  border-radius: 8px;
  padding: 7px 9px;
}
.lr-stat-label {
  font-size: 0.66rem;
  color: var(--adm-muted);
  white-space: nowrap;
}
.lr-stat-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--adm-text);
}
.lr-stat-value.rev { color: var(--adm-green); }
.lr-avatars-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lr-avatar-stack { display: flex; }
.lr-avatar-stack img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  margin-left: -8px;
}
.lr-avatar-stack img:first-child { margin-left: 0; }
.lr-purchased-note {
  font-size: 0.72rem;
  color: var(--adm-muted);
  white-space: nowrap;
}
.lr-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.lr-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--adm-border);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.lr-icon-btn.del { color: var(--adm-red); border-color: rgba(220, 53, 69, 0.35); background: rgba(220, 53, 69, 0.06); }
.lr-icon-btn.edit { color: var(--auth-primary); border-color: rgba(24, 119, 210, 0.35); background: rgba(24, 119, 210, 0.06); }
.lr-icon-btn:hover { filter: brightness(0.96); }
.lr-view-btn {
  flex: 1;
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.lr-view-btn:hover { background: #1266b8; color: #fff; }
.lr-empty {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  color: var(--adm-muted);
}

/* Route details modal */
.lrd-desc-label { font-weight: 700; font-size: 0.85rem; color: var(--adm-text); }
.lrd-desc {
  font-size: 0.78rem;
  color: var(--adm-muted);
  line-height: 1.55;
}
.lrd-dialog { max-width: 620px; }

/* ===== Route Summary ===== */
.rs-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #eef0eb;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}
.rs-topbar {
  background: #101725;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  flex-wrap: wrap;
}
.rs-back {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--auth-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.rs-title { font-weight: 700; font-size: 1rem; margin: 0; }
.rs-topstats {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: right;
}
.rs-topstat .v { font-weight: 700; font-size: 0.9rem; }
.rs-topstat .l { font-size: 0.68rem; color: #9aa6b8; }
.rs-publish-btn {
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.83rem;
  font-weight: 600;
}
.rs-publish-btn:hover { background: #1266b8; }
.rs-layout {
  flex: 1;
  display: flex;
  min-height: 0;
}
.rs-panel {
  width: 300px;
  flex: none;
  background: #fff;
  border-right: 1px solid var(--adm-border);
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.rs-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.rs-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--adm-text);
  margin: 0;
}
.rs-add-legs-btn {
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
}
.rs-add-legs-btn:hover { background: #1266b8; }
.rs-empty {
  margin: auto;
  text-align: center;
  padding: 20px 10px;
}
.rs-empty-ic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f1f4f8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--auth-primary);
  margin-bottom: 12px;
}
.rs-empty-title { font-weight: 700; font-size: 0.95rem; color: var(--adm-text); }
.rs-empty-sub { font-size: 0.78rem; color: var(--adm-muted); }
.rs-map {
  flex: 1;
  position: relative;
  background: url("../images/maps/map-bg.svg") center / cover;
  min-height: 300px;
}
.rs-zoom {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(15, 34, 58, 0.18);
}
.rs-zoom button {
  width: 34px;
  height: 34px;
  border: none;
  background: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--adm-text);
}
.rs-zoom button + button { border-top: 1px solid var(--adm-border); }
.rs-toast {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #101725;
  color: #fff;
  font-size: 0.78rem;
  padding: 9px 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.rs-leg-item {
  border: 1px solid var(--adm-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rs-leg-name { font-weight: 600; color: var(--adm-text); }
.rs-leg-sub { font-size: 0.72rem; color: var(--adm-muted); }
.rs-leg-del {
  border: none;
  background: transparent;
  color: var(--adm-red);
  display: inline-flex;
}
@media (max-width: 767.98px) {
  .rs-layout { flex-direction: column; }
  .rs-panel { width: 100%; border-right: 0; border-bottom: 1px solid var(--adm-border); }
  .rs-topstats { width: 100%; margin-left: 0; justify-content: flex-start; text-align: left; }
  .lr-map-bg { padding: 12px; }
}
#rsRouteLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Purchased Routes tab */
.lr-chart-sub { font-size: 0.72rem; color: var(--adm-muted); }
.lr-chart-legend {
  display: flex;
  gap: 14px;
  font-size: 0.74rem;
  color: var(--adm-muted);
  align-items: center;
}
.lg-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
.lg-dot.sold { background: var(--auth-primary); }
.lg-dot.rev { background: var(--adm-green); }
.lr-chart-wrap {
  position: relative;
  height: 180px;
  margin-top: 8px;
}
.lr-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lr-chart-tip {
  position: absolute;
  top: 6px;
  background: #101725;
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.72rem;
  pointer-events: none;
  z-index: 5;
  min-width: 120px;
}
.lr-chart-tip .tip-month { font-weight: 700; margin-bottom: 2px; }
.lr-chart-tip .tip-row { display: flex; justify-content: space-between; gap: 10px; color: #c3ccd9; }
.lr-chart-tip .tip-row strong { color: #fff; }
.lr-chart-tip .tip-row strong.rev { color: #4cd07d; }
.lr-chart-months {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--adm-muted);
  padding: 4px 6px 0;
}
.pr-buyer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pr-buyer img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* Route Structure leg cards */
.rs-leg-card {
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  background: #f7f9fc;
  margin-bottom: 12px;
  overflow: visible;
}
.rs-leg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.rs-leg-grip, .rs-wp-grip { color: var(--adm-muted); display: inline-flex; }
.rs-leg-title { font-weight: 700; font-size: 0.86rem; color: var(--adm-text); }
.rs-leg-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.rs-leg-delbtn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(220, 53, 69, 0.12);
  color: var(--adm-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rs-leg-toggle {
  border: none;
  background: transparent;
  color: var(--adm-muted);
  display: inline-flex;
  transition: transform 0.15s ease;
}
.rs-leg-toggle.collapsed { transform: rotate(180deg); }
.rs-leg-chip {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: 20px;
  font-size: 0.72rem;
  color: var(--adm-muted);
  padding: 3px 10px;
  margin: 0 12px 12px;
}
.rs-leg-body { padding: 0 12px 12px; }
.rs-wp-row { position: relative; margin-bottom: 8px; }
.rs-wp-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: 8px;
  padding: 7px 10px;
}
.rs-wp-field {
  border: none;
  outline: none;
  flex: 1;
  font-size: 0.82rem;
  color: var(--adm-text);
  background: transparent;
  min-width: 0;
}
.rs-wp-field::placeholder { color: var(--adm-muted); }
.rs-add-wp-btn {
  width: 100%;
  border: 1.5px dashed var(--auth-primary);
  background: rgba(24, 119, 210, 0.05);
  color: var(--auth-primary);
  border-radius: 8px;
  padding: 8px;
  font-size: 0.8rem;
  font-weight: 600;
}
.rs-add-wp-btn:hover { background: rgba(24, 119, 210, 0.1); }

/* Waypoint search suggestions */
.rs-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 34, 58, 0.16);
  z-index: 30;
  overflow: hidden;
}
.rs-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: #fff;
  padding: 9px 12px;
  text-align: left;
}
.rs-suggest-item:hover { background: #f2f6fb; }
.rs-suggest-item + .rs-suggest-item { border-top: 1px solid #f0f2f5; }
.rs-suggest-ic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1f4f8;
  color: var(--adm-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.rs-suggest-txt { display: flex; flex-direction: column; min-width: 0; }
.rs-suggest-txt .t { font-weight: 700; font-size: 0.8rem; color: var(--adm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-suggest-txt .s { font-size: 0.7rem; color: var(--adm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-suggest-arrow { margin-left: auto; color: var(--adm-muted); font-size: 1rem; }

/* Avatar photos */
img.avatar-img {
  object-fit: cover;
  background: #e5e9f0;
}

/* Route summary map waypoint labels (map-style typography) */
.rs-map-label {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  fill: #333f4d;
  letter-spacing: 0.01em;
  stroke: #ffffff;
  stroke-width: 0.7px;
  paint-order: stroke;
}

/* Reports & Analytics */
.ra-range-tabs {
  display: flex;
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.ra-range-btn {
  border: none;
  background: transparent;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--auth-muted);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  white-space: nowrap;
}
.ra-range-btn.active {
  background: #e3edfb;
  color: var(--auth-primary);
}
.ra-chart { position: relative; margin-top: 10px; }
.ra-chart-body { display: flex; align-items: stretch; gap: 6px; }
.ra-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--adm-muted);
  padding: 4px 0 2px;
  text-align: right;
  min-width: 30px;
}
.ra-yaxis.right { text-align: left; }
.ra-plot { flex: 1; min-width: 0; }
.ra-svg { width: 100%; height: 190px; display: block; }
.ra-xaxis {
  display: flex;
  font-size: 0.62rem;
  color: var(--adm-muted);
  margin: 4px 0 0 36px;
}
.ra-xaxis.has-right { margin-right: 36px; }
.ra-xaxis span { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; }
.ra-tip {
  position: absolute;
  background: #101725;
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.7rem;
  pointer-events: none;
  z-index: 6;
  min-width: 130px;
}
.ra-tip-title { font-weight: 700; margin-bottom: 3px; }
.ra-tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #c3ccd9;
}
.ra-tip-row strong { color: #fff; margin-left: auto; }
.ra-tip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.legend-dot.ld-blue { background: #1877d2; }
.legend-dot.ld-purple { background: #8b5cf6; }
.legend-dot.ld-orange { background: #f59e0b; }
.legend-dot.ld-green { background: #6ee7a0; }
.legend-dot.ld-red { background: #ef4444; }

/* Custom date range modal */
.ra-date-dialog { max-width: 640px; }
.ra-date-content { border: none; border-radius: 14px; padding: 18px 20px; }
.ra-date-head {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--adm-border);
  padding-bottom: 10px;
  margin-bottom: 8px;
}
.ra-date-label { font-size: 0.85rem; color: var(--adm-muted); font-weight: 600; }
.ra-date-label.filled { color: var(--adm-text); }
.ra-date-arrow { color: var(--adm-muted); }
.ra-cal-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ra-cal { flex: 1; min-width: 0; }
.ra-cal-nav {
  border: none;
  background: transparent;
  color: var(--adm-text);
  font-size: 1.3rem;
  line-height: 1;
  padding: 4px 6px;
  margin-top: 34px;
}
.ra-cal-title {
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--adm-text);
  padding: 10px 0 8px;
}
.ra-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ra-cal-dow {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--adm-muted);
  text-align: center;
  padding: 4px 0;
}
.ra-cal-day {
  border: none;
  background: transparent;
  font-size: 0.74rem;
  color: var(--adm-text);
  height: 30px;
  border-radius: 50%;
}
.ra-cal-day:hover { background: #eef4fc; }
.ra-cal-day.selected {
  background: var(--auth-primary);
  color: #fff;
  font-weight: 700;
}
.ra-cal-day.in-range { background: #e3edfb; border-radius: 6px; }
.ra-date-foot {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--adm-border);
  padding-top: 12px;
  margin-top: 10px;
}
.ra-cancel-btn {
  border: 1px solid var(--adm-border);
  font-weight: 600;
  padding: 0.35rem 1rem;
}
@media (max-width: 575.98px) {
  .ra-cal-row { flex-wrap: wrap; }
  .ra-cal { flex: 1 1 100%; }
}

/* Advertisements Management */
.req-star { color: var(--adm-red); }
.status-badge.paused { background: #fef3e2; color: var(--adm-orange); }
.ad-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--adm-border);
  border-radius: 8px;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--adm-text);
  cursor: pointer;
  background: #fff;
}
.ad-type-chip:has(input:checked) {
  border-color: var(--auth-primary);
  color: var(--auth-primary);
  background: #f2f7fd;
}
.ad-type-chip input { accent-color: var(--auth-primary); }
.ad-dropzone {
  border: 1.5px dashed var(--adm-border);
  border-radius: 12px;
  background: #f7f8fa;
  min-height: 285px;
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  cursor: pointer;
}
.ad-dropzone.dragging { border-color: var(--auth-primary); background: #eef4fc; }
.ad-drop-ic {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 40, 70, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--auth-primary);
  margin-bottom: 12px;
}
.ad-drop-title { font-size: 0.85rem; font-weight: 600; color: var(--adm-text); }
.ad-drop-sub { font-size: 0.7rem; color: var(--adm-muted); margin-top: 4px; }
.ad-drop-file {
  font-size: 0.75rem;
  color: var(--auth-primary);
  font-weight: 600;
  margin-top: 10px;
  word-break: break-all;
}
.ad-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px 18px;
}
.ad-media-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0d1b12;
}
.ad-video { width: 100%; height: 300px; object-fit: cover; display: block; }
.ad-media-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 30px;
  background: linear-gradient(90deg, rgba(8, 20, 12, 0.62) 0%, rgba(8, 20, 12, 0.15) 65%, rgba(8, 20, 12, 0) 100%);
  color: #fff;
  pointer-events: none;
}
.ad-media-title { font-size: 1.6rem; font-weight: 800; max-width: 320px; line-height: 1.15; }
.ad-media-sub { font-size: 0.85rem; margin-top: 10px; max-width: 300px; color: #e6efe9; }
.ad-danger-btn,
.ad-pause-btn {
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
}
.ad-danger-btn { background: #fdeaea; color: var(--adm-red); }
.ad-danger-btn:hover { background: #fbdcdc; }
.ad-pause-btn { background: #fef3e2; color: var(--adm-orange); }
.ad-pause-btn:hover { background: #fdeccd; }
.ad-confirm-dialog { max-width: 360px; }
.ad-confirm-content { border: none; border-radius: 16px; padding: 10px 6px; }
.ad-confirm-ic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f3f4f6;
  color: var(--adm-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.ad-confirm-title { font-weight: 700; }
.ad-confirm-text { font-size: 0.8rem; color: var(--adm-muted); }
.ad-delete-confirm-btn {
  background: #ef5350;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 10px;
  padding: 0.55rem;
}
.ad-delete-confirm-btn:hover { background: #e04340; color: #fff; }
.perf-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(16, 40, 70, 0.05);
}
.perf-rank {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--adm-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--adm-text);
  flex: none;
}
.perf-info { min-width: 0; flex: 1; }
.perf-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--adm-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perf-meta {
  font-size: 0.7rem;
  color: var(--adm-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perf-stats { display: flex; gap: 8px; flex: none; }
.perf-stat {
  border: 1px solid var(--adm-border);
  border-radius: 10px;
  padding: 6px 12px;
  text-align: center;
  min-width: 74px;
}
.perf-stat-value { font-size: 0.85rem; font-weight: 700; color: var(--adm-text); }
.perf-stat-label { font-size: 0.65rem; color: var(--adm-muted); }
@media (max-width: 575.98px) {
  .perf-card { flex-wrap: wrap; }
}
.ad-drop-file.drop-error { color: var(--adm-red); }
.ad-edit-preview {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--adm-border);
  background: #f7f8fa;
}
.ad-edit-preview-img,
.ad-edit-preview-video {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

/* ---------- Legal Info page ---------- */
.legal-card {
  padding: 1.4rem 1.5rem;
}
.legal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--auth-heading);
  margin-bottom: 0.75rem;
}
.legal-subtitle {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--auth-heading);
  margin: 1.1rem 0 0.55rem;
}
.legal-text {
  font-size: 0.82rem;
  color: var(--auth-muted);
  line-height: 1.6;
  margin-bottom: 0.6rem;
}
.legal-textarea {
  font-size: 0.82rem;
  line-height: 1.6;
}
.legal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--adm-border);
}

/* ---------- Notifications page ---------- */
.notif-list {
  padding: 0 0.25rem 0.5rem;
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--adm-border);
}
.notif-item:last-child {
  border-bottom: none;
}
.notif-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.notif-body {
  flex: 1;
  min-width: 0;
}
.notif-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--auth-heading);
}
.notif-msg {
  font-size: 0.79rem;
  color: var(--auth-muted);
  line-height: 1.5;
}
.notif-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  color: var(--auth-muted);
  white-space: nowrap;
  padding-top: 2px;
}
.notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--auth-primary);
  display: inline-block;
}
.notif-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--auth-muted);
  font-size: 0.82rem;
}
.hist-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--auth-heading);
}
.hist-sub {
  font-size: 0.74rem;
  color: var(--auth-muted);
}
.nd-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--auth-heading);
}
.nd-details {
  font-size: 0.8rem;
  color: var(--auth-muted);
  line-height: 1.6;
}
.nf-member-box {
  background: #f7f8fa;
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
.nf-member-search .form-control {
  background: #fff;
}
.nf-selected-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--auth-muted);
}
.nf-clear-btn {
  border: none;
  background: transparent;
  color: var(--auth-primary);
  font-size: 0.78rem;
  font-weight: 600;
}
.nf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: 999px;
  padding: 4px 8px 4px 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--auth-heading);
}
.nf-chip-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.nf-chip-x {
  border: none;
  background: transparent;
  color: var(--auth-muted);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 2px;
}
.nf-chip-x:hover {
  color: var(--adm-red);
}
.nf-suggestions {
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: 10px;
  overflow: hidden;
}
.nf-suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 7px 10px;
  font-size: 0.8rem;
  color: var(--auth-heading);
  text-align: left;
}
.nf-suggestion:hover {
  background: #f1f5f9;
}
.nf-message {
  background: #f7f8fa;
  resize: vertical;
}

/* ---------- Revenue Management page ---------- */
.status-badge.processing { background: #fef3e2; color: var(--adm-orange); }
.status-badge.pending { background: #fef3e2; color: var(--adm-orange); }

.stat-card-primary {
  background: var(--auth-primary);
  border-color: var(--auth-primary);
}
.stat-card-primary .stat-label,
.stat-card-primary .stat-note {
  color: rgba(255, 255, 255, 0.75);
}
.stat-card-primary .stat-value {
  color: #fff;
}
.stat-card-primary .stat-delta.up {
  color: #7ef2a8;
}
.stat-icon.light {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.rev-filter {
  display: inline-flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 3px;
}
.rev-filter-btn {
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--auth-muted);
  padding: 0.32rem 0.75rem;
  white-space: nowrap;
}
.rev-filter-btn.active {
  background: var(--auth-primary);
  color: #fff;
}
.rev-range-note {
  padding: 0.35rem 1.25rem 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--auth-primary);
}

.rev-event-cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.rev-event-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.rev-user-img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pg-ellipsis {
  font-size: 0.75rem;
  color: var(--auth-muted);
  padding: 0 4px;
}

.ud-avatar-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.role-chip {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid var(--adm-border);
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--auth-heading);
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
}
.modal-sm-adm {
  max-width: 380px;
}

/* ---------- Event Payout detail page ---------- */
.pd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--auth-muted);
}
.pd-breadcrumb a {
  color: var(--auth-muted);
  text-decoration: none;
}
.pd-breadcrumb a:hover {
  color: var(--auth-primary);
  text-decoration: underline;
}
.pd-crumb-sep {
  color: #cbd5e1;
}
.pd-crumb-active {
  color: var(--auth-heading);
  font-weight: 600;
}
.pd-card {
  padding: 1.25rem 1.4rem 1.5rem;
}
.pd-warning {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fdf7e7;
  border: 1px solid #f3e3b3;
  border-radius: 10px;
  padding: 0.7rem 0.95rem;
  font-size: 0.8rem;
  color: #8a6d1a;
}
.pd-warning svg {
  flex-shrink: 0;
  color: var(--adm-orange);
}
.pd-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--auth-heading);
}
.pd-summary {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pd-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid var(--adm-border);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  color: var(--auth-muted);
}
.pd-summary-total {
  background: #fff;
  border: 1.5px solid var(--auth-primary);
}
.pd-amount {
  font-weight: 700;
  color: var(--auth-heading);
}
.pd-neg {
  color: var(--adm-red);
}
.pd-payout {
  color: var(--auth-primary);
}

/* Payout detail action buttons */
.pd-confirm-btn {
  background: #2563eb;
  border: 1px solid #2563eb;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.5rem 1.1rem;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}

.pd-confirm-btn:hover,
.pd-confirm-btn:focus {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

.pd-confirm-btn:disabled {
  background: #93c5fd;
  border-color: #93c5fd;
  color: #fff;
  opacity: 1;
}

.pd-cancel-btn {
  background: #fff;
  border: 1px solid var(--adm-border);
  color: var(--auth-heading);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.5rem 1.1rem;
}

.pd-cancel-btn:hover,
.pd-cancel-btn:focus {
  background: #f8fafc;
  color: var(--auth-heading);
  border-color: var(--adm-border);
}

/* Payment Successful modal */
.ps-dialog {
  max-width: 400px;
}

.ps-content {
  border: none;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.ps-body {
  position: relative;
  text-align: center;
  padding: 2.2rem 2rem 1.8rem;
  overflow: hidden;
}

.ps-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.ps-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.ps-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--auth-heading);
  margin-bottom: 0.35rem;
}

.ps-sub {
  font-size: 0.85rem;
  color: var(--auth-muted, #64748b);
  margin-bottom: 1.25rem;
}

.ps-continue-btn {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border: 1px solid #2563eb;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 10px;
  padding: 0.6rem 1rem;
}

.ps-continue-btn:hover,
.ps-continue-btn:focus {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

.ps-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2563eb;
}

.ps-dot-1 { top: 22px; left: 15%; }
.ps-dot-2 { top: 14px; left: 38%; background: #60a5fa; }
.ps-dot-3 { top: 26px; right: 20%; }
.ps-dot-4 { top: 58px; left: 24%; background: #60a5fa; }
.ps-dot-5 { top: 52px; right: 30%; background: #93c5fd; }
.ps-dot-6 { top: 80px; right: 14%; }

/* Revenue chart: y-axis labels + wider month spacing */
.rev-chart-wrap {
  display: flex;
  align-items: stretch;
  padding-left: 0.75rem;
}

.rev-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1rem 0 1.7rem;
  font-size: 0.62rem;
  color: var(--auth-muted);
  min-width: 34px;
}

.rev-chart-main {
  flex: 1 1 0;
  min-width: 0;
}

.rev-bar-chart {
  gap: 26px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.rev-bar-chart .bar-month {
  gap: 4px;
}

.rev-bar-chart .bar {
  width: 8px;
  border-radius: 4px;
}

.rev-bar-axis {
  gap: 26px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (max-width: 767.98px) {
  .rev-bar-chart,
  .rev-bar-axis {
    gap: 8px;
  }
}

/* Compact primary buttons in modals */
.lr-modal-btn {
  flex: 0 0 auto;
  padding: 0.5rem 1.25rem;
}

.ps-continue-btn {
  min-width: 200px;
}

/* Library route card action sizing */
.lr-icon-btn.card-delete-btn,
.lr-icon-btn.card-edit-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}

.lr-view-btn.card-view-btn,
.lr-view-btn.lr-modal-btn {
  flex: 0 0 auto;
  padding: 10px 22px;
  border-radius: 12px;
  background: #e3f4fd;
  color: #38a8e8;
}

.lr-view-btn.card-view-btn {
  margin-left: auto;
}

.lr-view-btn.card-view-btn:hover,
.lr-view-btn.lr-modal-btn:hover {
  background: #d2ecfb;
  color: #2f9ada;
}

/* ===== Auth split layout (side image + form) ===== */
body.auth-split-body {
  background-image: none;
  background-color: #f5f6f8;
}

.auth-split {
  display: flex;
  min-height: 100vh;
}

.auth-split-img {
  width: 50%;
  max-width: 880px;
  flex-shrink: 0;
  padding: 1rem;
}

.auth-split-img img {
  display: block;
  width: 100%;
  height: calc(100vh - 2rem);
  object-fit: cover;
  object-position: center top;
  position: sticky;
  top: 1rem;
  border-radius: 1.25rem;
}

.auth-split-content {
  flex: 1 1 auto;
  min-width: 0;
}

.auth-form-panel {
  width: 100%;
  max-width: 430px;
}

.auth-form-panel .form-control {
  background-color: #ffffff;
  border: 1px solid var(--auth-input-border);
  padding: 0.62rem 0.9rem;
  font-size: 0.9rem;
  border-radius: 0.55rem;
  color: var(--auth-heading);
}

.auth-form-panel .form-control::placeholder {
  color: #9aa7b5;
}

.auth-form-panel .form-control:focus {
  box-shadow: none;
  border-color: var(--auth-primary);
  background-color: #ffffff;
}

.auth-form-panel .form-control.is-invalid {
  border-color: var(--auth-error);
}

.req-star {
  color: var(--auth-error);
}

.auth-remember {
  font-size: 0.86rem;
  color: var(--auth-heading);
}

.auth-remember .form-check-input {
  border-color: var(--auth-input-border);
  margin-top: 0.22em;
}

.auth-remember .form-check-input:checked {
  background-color: var(--auth-primary);
  border-color: var(--auth-primary);
}

.auth-remember .form-check-input:focus {
  box-shadow: none;
}

.auth-bottom-text {
  font-size: 0.88rem;
  color: var(--auth-heading);
}

/* Phone field with country flag */
.phone-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background-color: #ffffff;
  border: 1px solid var(--auth-input-border);
  border-radius: 0.55rem;
  padding: 0.62rem 0.9rem;
}

.phone-field:focus-within {
  border-color: var(--auth-primary);
}

.phone-field.is-invalid {
  border-color: var(--auth-error);
}

.phone-field .phone-flag {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.phone-field .phone-flag svg {
  border-radius: 50%;
  display: block;
}

.phone-field .phone-caret {
  color: #9aa7b5;
  display: inline-flex;
  align-items: center;
}

.phone-field .phone-input {
  border: 0;
  outline: none;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--auth-heading);
  background: transparent;
  padding: 0;
}

.phone-field .phone-input::placeholder {
  color: #9aa7b5;
}

.terms-text {
  font-size: 0.85rem;
  color: var(--auth-heading);
}

.terms-text a {
  color: var(--auth-link);
  text-decoration: none;
}

.terms-text a:hover {
  text-decoration: underline;
}

@media (max-width: 991.98px) {
  .auth-split {
    flex-direction: column;
  }

  .auth-split-img {
    width: 100%;
    max-width: none;
  }

  .auth-split-img img {
    height: 260px;
    position: static;
    object-position: center 60%;
    border-radius: 1.25rem;
  }
}

/* ===== Onboarding wizard ===== */
.wiz-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wiz-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--auth-heading);
}

.wiz-back:hover {
  background: #f1f5f9;
}

.wiz-skip {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--auth-link);
  text-decoration: none;
}

.wiz-skip:hover {
  color: var(--auth-primary-hover);
}

.wiz-progress {
  display: flex;
  gap: 0.9rem;
}

.wiz-progress .wiz-seg {
  height: 5px;
  flex: 1 1 0;
  border-radius: 999px;
  background: #d8dee6;
}

.wiz-progress .wiz-seg.active {
  background: var(--auth-primary);
}

.wiz-step {
  display: none;
}

.wiz-step.active {
  display: block;
}

.upload-box {
  border: 1.5px dashed #c8d2de;
  border-radius: 0.75rem;
  background: #ffffff;
  padding: 1.6rem 1rem;
  text-align: center;
  cursor: pointer;
}

.upload-box:hover {
  border-color: var(--auth-primary);
}

.upload-box .upload-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.6rem;
  background: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--auth-heading);
  margin-bottom: 0.6rem;
}

.upload-box .upload-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--auth-heading);
}

.upload-box .upload-hint {
  font-size: 0.78rem;
  color: var(--auth-muted);
}

.upload-box .profile-preview {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 0.6rem;
}

.vehicle-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.vehicle-photo-item {
  position: relative;
  width: 100%;
  height: 82px;
  border-radius: 0.6rem;
  overflow: hidden;
}

.vehicle-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vehicle-photo-item .photo-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: #ffffff;
  color: #dc3545;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.vehicle-upload-tile {
  width: 100%;
  height: 82px;
  border: 1.5px dashed #c8d2de;
  border-radius: 0.6rem;
  background: #ffffff;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  cursor: pointer;
  color: var(--auth-heading);
  font-size: 0.78rem;
}

.vehicle-upload-tile:hover {
  border-color: var(--auth-primary);
}

.dob-input {
  text-align: left;
}

.gender-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid var(--auth-input-border);
  border-radius: 0.55rem;
  padding: 0.62rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--auth-muted);
  margin-bottom: 0;
}

.gender-option input {
  margin: 0;
}

.gender-option input:checked + span {
  color: var(--auth-primary);
  font-weight: 500;
}

.gender-option .form-check-input:focus {
  box-shadow: none;
}

.plate-check {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #22a06b;
  display: none;
}

.plate-group {
  position: relative;
}

.plate-group.is-valid .plate-check {
  display: inline-flex;
}

.plate-group.is-valid .form-control {
  padding-right: 2.4rem;
}

/* Interests chips */
.interest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}

.interest-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-size: 0.86rem;
  color: var(--auth-heading);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  user-select: none;
}

.interest-chip.selected {
  border-color: var(--auth-heading);
}

/* Location step */
.location-search {
  position: relative;
}

.location-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa7b5;
  display: inline-flex;
}

.location-search .form-control {
  padding-left: 2.3rem;
}

.location-card {
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 0.75rem;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.location-map {
  border-radius: 0.6rem;
  overflow: hidden;
  background: #eef1f4;
}

.location-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.location-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: 0.7rem;
}

.location-pin-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--auth-heading);
  flex-shrink: 0;
}

.location-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--auth-heading);
}

.location-addr {
  font-size: 0.8rem;
  color: var(--auth-muted);
}

/* ===== Choose Your Plan ===== */
body.plan-body {
  background: #f5f6f8;
  color: var(--auth-heading);
}

.plan-topbar {
  position: relative;
}

.plan-back {
  position: absolute;
  left: 0;
  top: 0;
}

.plan-title {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--auth-heading);
}

.plan-subtitle {
  font-size: 0.92rem;
  color: var(--auth-muted);
}

.plan-card {
  background: #ffffff;
  border: 0;
  border-radius: 0.9rem;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
}

.plan-card .plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.plan-card .plan-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--auth-heading);
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.28rem 0.75rem;
}

.plan-badge.badge-blue {
  background: var(--auth-primary);
  color: #ffffff;
}

.plan-badge.badge-white {
  background: #ffffff;
  color: var(--auth-heading);
  border: 1px solid var(--auth-input-border);
}

.plan-badge.badge-gold {
  background: #d4a53a;
  color: #ffffff;
}

.plan-badge.badge-platinum {
  background: #d7dbe0;
  color: var(--auth-heading);
}

.plan-price {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--auth-primary);
  margin-bottom: 0.9rem;
}

.plan-includes-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--auth-heading);
  margin-bottom: 0.7rem;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  flex: 1 1 auto;
}

.plan-features > li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: var(--auth-heading);
  margin-bottom: 0.65rem;
}

.plan-features .feat-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e8f1fd;
  color: var(--auth-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.plan-features ul {
  list-style: disc;
  padding-left: 1.1rem;
  margin: 0.3rem 0 0;
}

.plan-features ul li {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

/* ===== Account created (congrats) page ===== */
body.congrats-body {
  background: #f5f6f8;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.congrats-wrap {
  text-align: center;
  max-width: 320px;
  width: 100%;
}

.congrats-icon {
  margin-bottom: 1.25rem;
}

.congrats-text {
  font-size: 1rem;
  color: var(--auth-heading);
  margin-bottom: 1.75rem;
}

.congrats-btn {
  display: block;
  width: 100%;
}

/* ============================================================
   Organizer shell (white sidebar + topbar w/ icons & dropdown)
   ============================================================ */
body.org-body .sidebar {
  background: #ffffff;
  border-right: 1px solid var(--adm-border);
}

.org-brand {
  padding: 1.05rem 1.25rem 0.9rem;
}

.org-logo {
  display: inline-block;
  text-decoration: none;
}

.org-logo-word {
  display: flex;
  align-items: center;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #16202e;
  line-height: 1;
}

.org-logo-word .logo-pin {
  display: inline-flex;
  margin: 0 1px;
  color: var(--auth-primary);
}

.org-logo-tagline {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  color: #5b6b7e;
  letter-spacing: 0.08em;
  margin-top: 2px;
  text-align: center;
}

body.org-body .side-nav {
  padding-top: 0.75rem;
}

body.org-body .side-link {
  color: #455263;
  font-weight: 600;
  padding: 0.68rem 0.9rem;
  border-radius: 10px;
  margin-bottom: 4px;
}

body.org-body .side-link:hover {
  color: #16202e;
  background: #f1f4f8;
}

body.org-body .side-link.active {
  background: var(--auth-primary);
  color: #ffffff;
}

body.org-body .topbar {
  border-bottom: 1px solid var(--adm-border);
}

body.org-body .topbar .collapse-btn {
  border: none;
}

.topbar-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #303a48;
  text-decoration: none;
  border: 1px solid transparent;
}

.topbar-icon-btn:hover {
  background: #f1f4f8;
  color: #16202e;
}

.icon-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--adm-red);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.org-profile-btn {
  border: none;
  background: transparent;
  padding: 0;
}

.org-profile-btn .profile-caret {
  color: var(--auth-muted);
}

.org-profile-menu {
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 30, 60, 0.16);
  padding: 0.4rem;
  min-width: 185px;
}

.org-profile-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.87rem;
  font-weight: 600;
  color: #303a48;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
}

.org-profile-menu .dropdown-item:hover {
  background: #f1f4f8;
}

.org-profile-menu .org-menu-logout {
  color: var(--adm-red);
}

.org-profile-menu .org-menu-logout:hover {
  background: #fdeeee;
  color: var(--adm-red);
}

/* ===== Organizer dashboard (Home) ===== */
.org-section {
  background: #fff;
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 1px 3px rgba(20, 35, 60, 0.05);
}

.org-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #16202e;
  margin-bottom: 0.9rem;
}

/* Active event cards */
.oae-card {
  background: #f7f8fa;
  border: 1px solid #eef1f5;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  height: 100%;
}

.oae-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.oae-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--auth-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.oae-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #16202e;
  flex: 1 1 auto;
}

.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.24rem 0.6rem;
  white-space: nowrap;
}

.tier-badge.gold {
  background: #f6b93b;
  color: #fff;
}

.tier-badge.platinum {
  background: #e5e7eb;
  color: #303a48;
}

.tier-badge.white {
  background: #ffffff;
  color: #303a48;
  border: 1px solid #e0e5eb;
}

.oae-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.55rem;
  font-size: 0.75rem;
  color: #5b6b7e;
}

.oae-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Leg progress */
.leg-track {
  display: flex;
  margin-top: 0.9rem;
}

.leg-seg {
  flex: 1 1 0;
  position: relative;
}

.leg-seg .leg-line {
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 5px;
  background: #e2e7ee;
}

.leg-seg:first-child .leg-line {
  left: 50%;
}

.leg-seg:last-child .leg-line {
  right: 50%;
}

.leg-seg.done .leg-line {
  background: #00c566;
}

.leg-seg .leg-dot {
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d4dbe4;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.leg-seg.done .leg-dot {
  background: #00c566;
  border-color: #00c566;
}

.leg-label {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  color: #5b6b7e;
  margin-top: 0.35rem;
}

.oae-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  margin-top: 0.9rem;
  font-size: 0.75rem;
}

.oae-foot .pct-done {
  color: var(--auth-primary);
  font-weight: 700;
}

.oae-foot .joined {
  color: #5b6b7e;
}

/* Location card */
.loc-card {
  background: #fff;
  border-radius: 14px;
  padding: 0.9rem;
  box-shadow: 0 1px 3px rgba(20, 35, 60, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.loc-map {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #e9edf3;
  flex: 1 1 auto;
  min-height: 150px;
}

.loc-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.loc-pin-dot {
  position: absolute;
  top: 50%;
  left: 55%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--auth-primary);
  border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(21, 101, 216, 0.18);
}

.loc-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.8rem;
}

.loc-nav-ic {
  color: #22272e;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e6e9ed;
  border-radius: 50%;
  background: #f4f5f7;
}
.loc-nav-ic svg {
  width: 24px;
  height: 24px;
}

.loc-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #16202e;
  line-height: 1.2;
}

.loc-sub {
  font-size: 0.72rem;
  color: #5b6b7e;
}

.btn-navigate {
  margin-left: auto;
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
}

.btn-navigate:hover {
  background: #1258b8;
  color: #fff;
}

/* Trips card */
.org-tabs {
  display: flex;
  background: #f1f3f6;
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}

.org-tabs .org-tab {
  flex: 1 1 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #455263;
  padding: 0.45rem 0.5rem;
}

.org-tabs .org-tab.active {
  background: #fff;
  color: var(--auth-primary);
  box-shadow: 0 1px 2px rgba(20, 35, 60, 0.08);
}

.trips-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.95rem 0 0.7rem;
}

.trips-head h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #16202e;
  margin: 0;
}

.view-all {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--auth-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.trip-item {
  display: flex;
  gap: 0.8rem;
  background: #f7f8fa;
  border: 1px solid #eef1f5;
  border-radius: 12px;
  padding: 0.7rem;
}

.trip-item + .trip-item {
  margin-top: 0.75rem;
}

.trip-photo {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
}

.trip-body {
  flex: 1 1 auto;
  min-width: 0;
}

.trip-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.trip-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #16202e;
}

.avatar-stack {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.avatar-stack img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}

.avatar-stack img + img,
.avatar-stack .stack-more {
  margin-left: -7px;
}

.avatar-stack .stack-more {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--auth-primary);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.trip-meta {
  font-size: 0.72rem;
  color: #5b6b7e;
  margin-top: 0.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.8rem;
}

.trip-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.btn-join {
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.32rem 0.9rem;
  margin-top: 0.5rem;
}

.btn-join:hover {
  background: #1258b8;
  color: #fff;
}

.btn-join:disabled {
  background: #e2e7ee;
  color: #8a97a8;
}

/* Revenue analytics */
.rev-inner {
  border: 1px solid #eef1f5;
  border-radius: 12px;
  padding: 0.9rem 1rem;
}

.rev-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.rev-head h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #16202e;
  margin: 0;
}

.rev-head .rev-sub {
  font-size: 0.72rem;
  color: #5b6b7e;
}

.rev-selects {
  display: flex;
  gap: 0.5rem;
}

.rev-selects .form-select {
  font-size: 0.75rem;
  border-radius: 8px;
  border-color: #e0e5eb;
  padding: 0.35rem 1.8rem 0.35rem 0.7rem;
  width: auto;
}

.rev-total {
  background: #e7f0fa;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.rev-total .rt-label {
  font-size: 0.72rem;
  color: #40506a;
}

.rev-total .rt-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0e7490;
}

.rt-right {
  text-align: right;
}

.rt-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #dcf5e7;
  color: var(--adm-green);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
}

.rt-events {
  font-size: 0.7rem;
  color: #5b6b7e;
  margin-top: 0.25rem;
}

.rev-chart {
  margin-top: 0.9rem;
}

.rev-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Featured ads */
.ads-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.ads-head h2 {
  font-size: 1rem;
  font-weight: 700;
  color: #16202e;
  margin: 0;
}

.upgrade-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--auth-primary);
  text-decoration: none;
}

.ad-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 210px;
  height: 100%;
  display: flex;
}

.ad-card img.ad-bg,
.ad-card video.ad-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad-card .ad-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 20, 30, 0.72) 0%, rgba(10, 20, 30, 0.25) 65%, rgba(10, 20, 30, 0) 100%);
}

.ad-content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 1.1rem 1.2rem;
  align-self: center;
  max-width: 65%;
}

.ad-content .ad-title {
  font-size: 1.3em;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.ad-content .ad-sub {
  font-size: 0.8em;
  margin: 0;
  opacity: 0.92;
}

.ad-card.ad-blue {
  background: var(--auth-primary);
}

.ad-card.ad-blue .ad-illus {
  position: absolute;
  right: 10px;
  bottom: 6px;
  z-index: 1;
}

.ad-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 0.9rem;
}

.ad-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #c9d2dd;
  border: none;
  padding: 0;
}

.ad-dots .dot.active {
  width: 16px;
  background: var(--auth-primary);
}

/* Event discovery */
.disc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.disc-head h2 {
  font-size: 1rem;
  font-weight: 700;
  color: #16202e;
  margin: 0;
}

.disc-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.disc-search {
  position: relative;
}

.disc-search .search-ic {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #8a97a8;
}

.disc-search input {
  border: 1px solid #e6ebf2;
  background: #f7f8fa;
  border-radius: 10px;
  font-size: 0.8rem;
  padding: 0.5rem 0.9rem 0.5rem 2.1rem;
  min-width: 220px;
}

.disc-filter-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #e6ebf2;
  background: #fff;
  color: #455263;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.disc-card {
  border: 1px solid #eef1f5;
  border-radius: 14px;
  padding: 0.75rem;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.disc-img-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.disc-img-wrap img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.spots-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--adm-red);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
}

.disc-img-wrap .tier-badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

.disc-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.disc-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #16202e;
}

.disc-chip {
  display: inline-block;
  background: #f1f3f6;
  color: #455263;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.28rem 0.7rem;
  margin-top: 0.55rem;
  align-self: flex-start;
}

.disc-meta {
  font-size: 0.72rem;
  color: #5b6b7e;
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
}

.disc-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.disc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid #f0f2f6;
}

.disc-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--auth-primary);
}

.disc-price .per {
  font-size: 0.66rem;
  font-weight: 600;
  color: #5b6b7e;
}

.btn-buy {
  background: #e7f0fa;
  color: var(--auth-primary);
  border: none;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.45rem 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.btn-buy:hover {
  background: var(--auth-primary);
  color: #fff;
}

/* ===== Notifications page ===== */
.notif-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.mark-read-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--auth-primary);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
}

.notif-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #fff;
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  box-shadow: 0 1px 3px rgba(20, 35, 60, 0.05);
}

.notif-row + .notif-row {
  margin-top: 0.85rem;
}

.notif-emoji {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f3f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.notif-body {
  flex: 1 1 auto;
  min-width: 0;
}

.notif-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #16202e;
}

.notif-sub {
  font-size: 0.76rem;
  color: #5b6b7e;
  margin-top: 1px;
}

.notif-time {
  font-size: 0.72rem;
  color: #8a97a8;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 0.2rem;
}

/* ===== Messages page ===== */
.msg-layout {
  display: flex;
  gap: 0;
  background: transparent;
  min-height: calc(100vh - 60px - 3rem);
}

.msg-list-pane {
  width: 320px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.msg-page-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #16202e;
  margin-bottom: 0.9rem;
}

.msg-search {
  position: relative;
  margin: 0.85rem 0;
}

.msg-search .search-ic {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #8a97a8;
}

.msg-search input {
  width: 100%;
  border: none;
  background: #fff;
  border-radius: 10px;
  font-size: 0.8rem;
  padding: 0.55rem 0.9rem 0.55rem 2.1rem;
  box-shadow: 0 1px 2px rgba(20, 35, 60, 0.05);
}

.msg-search input:focus {
  outline: 2px solid rgba(21, 101, 216, 0.25);
}

.chat-list {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.chat-item {
  display: flex;
  gap: 0.7rem;
  background: #fff;
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(20, 35, 60, 0.04);
}

.chat-item + .chat-item {
  margin-top: 0.6rem;
}

.chat-item:hover {
  border-color: #dbe4ef;
}

.chat-item.active {
  background: #e7f0fa;
  border-color: #cfe0f5;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.chat-body {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: #16202e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-preview {
  font-size: 0.72rem;
  color: #5b6b7e;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.chat-time {
  font-size: 0.68rem;
  color: #8a97a8;
}

.chat-unread {
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--adm-red);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.msg-chat-pane {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  margin-left: 1.25rem;
  overflow: hidden;
}

.chat-window-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid #f0f2f6;
}

.cw-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #16202e;
}

.cw-online {
  font-size: 0.72rem;
  color: #5b6b7e;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.cw-online::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--adm-green);
}

.cw-more {
  margin-left: auto;
  border: none;
  background: transparent;
  color: #455263;
}

.chat-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  min-height: 0;
}

.capacity-banner {
  background: #e7f0fa;
  border: 1px solid #cfe0f5;
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  display: flex;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.capacity-banner .cb-ic {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--auth-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 700;
}

.cb-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #16202e;
}

.cb-sub {
  font-size: 0.72rem;
  color: #5b6b7e;
}

.cb-bar {
  height: 5px;
  border-radius: 3px;
  background: #cfd9e6;
  margin-top: 0.5rem;
  overflow: hidden;
}

.cb-bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--auth-primary);
}

.cb-bar-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  margin-top: 0.3rem;
}

.cb-bar-row .cb-left {
  color: var(--auth-primary);
  font-weight: 700;
}

.cb-bar-row .cb-right {
  color: #5b6b7e;
}

.chat-day-chip {
  display: table;
  margin: 0.9rem auto;
  background: #f1f3f6;
  color: #5b6b7e;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.28rem 0.85rem;
}

.msg-row {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  align-items: flex-start;
}

.msg-row .msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.msg-meta {
  font-size: 0.68rem;
  color: #8a97a8;
  margin-bottom: 0.25rem;
}

.msg-meta .msg-author {
  font-weight: 700;
  color: #455263;
  margin-right: 0.4rem;
}

.msg-bubble {
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 12px;
  border-top-left-radius: 4px;
  padding: 0.55rem 0.8rem;
  font-size: 0.8rem;
  color: #303a48;
  max-width: 420px;
  box-shadow: 0 1px 2px rgba(20, 35, 60, 0.04);
}

.msg-row.own {
  justify-content: flex-end;
}

.msg-row.own .msg-bubble {
  background: #e7f0fa;
  border-color: #cfe0f5;
  border-radius: 12px;
  border-top-right-radius: 4px;
}

.own-time {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.64rem;
  color: #8a97a8;
  margin-top: 0.3rem;
}

.own-time .ticks {
  color: var(--auth-primary);
}

.chat-composer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid #f0f2f6;
}

.composer-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #e6ebf2;
  background: #fff;
  color: #455263;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.chat-composer input {
  flex: 1 1 auto;
  border: 1px solid #e6ebf2;
  background: #f7f8fa;
  border-radius: 999px;
  font-size: 0.82rem;
  padding: 0.55rem 1rem;
  min-width: 0;
}

.chat-composer input:focus {
  outline: 2px solid rgba(21, 101, 216, 0.25);
}

.composer-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--auth-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

@media (max-width: 991.98px) {
  .msg-layout {
    flex-direction: column;
  }

  .msg-list-pane {
    width: 100%;
  }

  .msg-chat-pane {
    margin-left: 0;
    margin-top: 1.25rem;
    min-height: 480px;
  }
}

/* ===== Edit Profile page ===== */
.breadcrumb-line {
  font-size: 0.8rem;
  color: #8a97a8;
  margin-bottom: 1rem;
}

.breadcrumb-line a {
  color: #8a97a8;
  text-decoration: none;
}

.breadcrumb-line .current {
  color: #455263;
  font-weight: 600;
}

.ep-card {
  background: #fff;
  border-radius: 14px;
  padding: 2rem 1.75rem 2.5rem;
  box-shadow: 0 1px 3px rgba(20, 35, 60, 0.05);
}

.ep-avatar-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 1.75rem;
}

.ep-avatar-wrap img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e9eef5;
}

.ep-cam-btn {
  position: absolute;
  right: -4px;
  bottom: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--auth-primary);
  color: #fff;
  border: 3px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-update {
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.65rem 1.6rem;
}

.btn-update:hover {
  background: #1258b8;
  color: #fff;
}

/* ===== Settings page ===== */
.set-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #7c8a9c;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.set-card {
  background: #fff;
  border-radius: 14px;
  padding: 0.35rem 1.1rem;
  box-shadow: 0 1px 3px rgba(20, 35, 60, 0.05);
}

.set-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.95rem 0;
  border: none;
  background: transparent;
  text-align: left;
  color: #303a48;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

.set-row + .set-row {
  border-top: 1px solid #f0f2f6;
}

.set-row .set-ic {
  color: var(--auth-primary);
  flex: 0 0 auto;
  display: inline-flex;
}

.set-row .set-arrow {
  margin-left: auto;
  color: #8a97a8;
  display: inline-flex;
}

.set-row:hover {
  color: #16202e;
}

.set-row.danger,
.set-row.danger .set-ic,
.set-row.danger .set-arrow {
  color: var(--adm-red);
}

.set-row .form-switch {
  margin-left: auto;
  padding-left: 0;
}

.set-row .form-switch .form-check-input {
  width: 2.6em;
  height: 1.4em;
  margin-left: 0;
  cursor: pointer;
  background-color: #cfd9e6;
  border-color: #cfd9e6;
}

.set-row .form-switch .form-check-input:checked {
  background-color: var(--adm-green);
  border-color: var(--adm-green);
}

.ev-thumb {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
}

/* ============================================================
   Organizer — Discover Events (cards)
   ============================================================ */
.evc-createbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 16px;
  text-decoration: none;
}
.evc-createbtn:hover { background: #1465b8; color: #fff; }

.evc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.evc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.evc-chip {
  border: 1px solid #e3e7ee;
  background: #fff;
  color: #3d4a5c;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 7px 18px;
}
.evc-chip.active {
  background: var(--auth-primary);
  border-color: var(--auth-primary);
  color: #fff;
  font-weight: 600;
}
.evc-tools { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; min-width: 260px; }
.evc-search {
  position: relative;
  flex: 1;
  max-width: 420px;
}
.evc-search .search-ic {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #98a2b3;
}
.evc-search .form-control {
  border-radius: 999px;
  border: 1px solid #e3e7ee;
  padding: 8px 14px 8px 34px;
  font-size: 0.85rem;
  background: #fff;
}
.evc-filter-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e3e7ee;
  background: #fff;
  color: #3d4a5c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.evc-filter-btn:hover { background: #f6f8fb; }

.evc-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.evc-media { position: relative; height: 170px; margin: 10px; border-radius: 12px; overflow: hidden; }
.evc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evc-spots {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #e02d3c;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
}
.evc-tier {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #1f2733;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.evc-body { padding: 4px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.evc-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.evc-title { font-size: 0.98rem; font-weight: 700; color: #101828; margin: 0; }
.evc-avatars { display: flex; align-items: center; }
.evc-avatars img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  margin-left: -7px;
}
.evc-avatars img:first-child { margin-left: 0; }
.evc-avatars .evc-more {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--auth-primary);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  margin-left: -7px;
}
.evc-org {
  align-self: flex-start;
  background: #f2f4f7;
  color: #475467;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 10px;
  margin: 8px 0;
}
.evc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: #667085;
  font-size: 0.78rem;
  margin-bottom: 5px;
}
.evc-meta svg { color: #98a2b3; }
.evc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.evc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
}
.evc-price { color: var(--auth-primary); font-size: 1.25rem; font-weight: 800; }
.evc-price small { color: #98a2b3; font-size: 0.7rem; font-weight: 500; }
.evc-buy {
  background: #cfe3f8;
  color: #17538f;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 16px;
}
.evc-buy:hover { background: #bcd8f5; }
.evc-empty { color: #667085; text-align: center; padding: 40px 0; }

/* Filter offcanvas */
.flt-panel { width: 360px !important; }
.flt-panel .offcanvas-title { font-weight: 700; }
.flt-panel .offcanvas-header { border-bottom: 1px solid #eef1f5; }
.flt-label { font-size: 0.85rem; font-weight: 600; color: #101828; margin: 16px 0 6px; }
.flt-input { position: relative; }
.flt-input .flt-ic {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #98a2b3;
}
.flt-input .form-control {
  border-radius: 10px;
  border: 1px solid #e3e7ee;
  padding: 9px 12px 9px 36px;
  font-size: 0.85rem;
}
.flt-foot {
  display: flex;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid #eef1f5;
}
.flt-foot .btn-reset {
  flex: 1;
  background: #fff;
  border: 1px solid #e3e7ee;
  color: #344054;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px;
}
.flt-foot .btn-apply {
  flex: 1.4;
  background: var(--auth-primary);
  border: none;
  color: #fff;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px;
}

/* ============================================================
   Create Event wizard
   ============================================================ */
.ce-stepper-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  padding: 18px 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.ce-step { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 56px; }
.ce-step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid #d0d5dd;
  background: #fff;
  color: #98a2b3;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ce-step-label { font-size: 0.78rem; color: #98a2b3; font-weight: 500; }
.ce-step.active .ce-step-dot,
.ce-step.done .ce-step-dot {
  background: var(--auth-primary);
  border-color: var(--auth-primary);
  color: #fff;
}
.ce-step.active .ce-step-label,
.ce-step.done .ce-step-label { color: var(--auth-primary); font-weight: 600; }
.ce-step-line { flex: 1; height: 2px; background: #e7eaf0; border-radius: 2px; margin-bottom: 20px; }
.ce-step-line.done { background: var(--auth-primary); }

.ce-panel {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  padding: 24px;
}
.ce-label { font-size: 0.85rem; font-weight: 600; color: #101828; margin-bottom: 6px; display: block; }
.ce-label .req { color: #e02d3c; }
.ce-panel .form-control,
.ce-panel .form-select {
  border-radius: 10px;
  border: 1px solid #e3e7ee;
  font-size: 0.87rem;
  padding: 10px 12px;
}
.ce-section-title { font-size: 1.02rem; font-weight: 700; color: #101828; margin: 22px 0 12px; }
.ce-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; }
.ce-btn-back {
  background: #fff;
  border: 1px solid #e3e7ee;
  color: #344054;
  border-radius: 10px;
  font-size: 0.87rem;
  font-weight: 600;
  padding: 10px 22px;
}
.ce-btn-next {
  background: var(--auth-primary);
  border: none;
  color: #fff;
  border-radius: 10px;
  font-size: 0.87rem;
  font-weight: 600;
  padding: 10px 26px;
}
.ce-btn-next:hover { background: #1465b8; }

.ce-upload {
  border: 1.5px dashed #d0d5dd;
  border-radius: 12px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #667085;
  font-size: 0.83rem;
  cursor: pointer;
  padding: 20px;
}
.ce-upload .up-plus {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eaf2fc;
  color: var(--auth-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
}
.ce-upload-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ce-upload-thumbs img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; }

.ce-map {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: url("../images/maps/map-bg.svg") center/cover no-repeat, #eef2ec;
  min-height: 480px;
}
.ce-map-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #101828;
  padding: 5px 12px;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.15);
}
.ce-route-chooser {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(16, 24, 40, 0.18);
  padding: 22px;
  width: min(340px, 92%);
}
.ce-route-chooser h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #101828;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.ce-route-chooser .back-arrow { background: none; border: none; color: #344054; padding: 0; }
.ce-route-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f6f8fb;
  border: 1px solid #eef1f5;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  text-align: left;
}
.ce-route-opt:hover { background: #eef3fa; }
.ce-route-opt .opt-ic {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1);
}
.ce-route-opt .opt-title { font-size: 0.9rem; font-weight: 700; color: #101828; }
.ce-route-opt .opt-sub { font-size: 0.75rem; color: #667085; }
.ce-route-opt .opt-chev { margin-left: auto; color: #98a2b3; }

.ce-dest-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  padding: 18px;
}
.ce-dest-title { font-size: 1rem; font-weight: 700; color: #101828; margin-bottom: 12px; }
.ce-dest-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid transparent;
  border-bottom: 1px solid #f1f3f7;
  padding: 12px 10px;
  text-align: left;
  border-radius: 10px;
}
.ce-dest-item .d-name { font-size: 0.88rem; font-weight: 600; color: #101828; }
.ce-dest-item .d-sub { font-size: 0.75rem; color: #667085; }
.ce-dest-item .d-check { margin-left: auto; color: var(--auth-primary); display: none; }
.ce-dest-item.selected {
  border: 1px solid var(--auth-primary);
  background: #f4f9ff;
}
.ce-dest-item.selected .d-check { display: inline-flex; }
.ce-dest-item .d-pin { color: var(--auth-primary); }

.ce-review-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.ce-review-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ce-review-head h3 { font-size: 0.95rem; font-weight: 700; color: #101828; margin: 0; }
.ce-edit-link {
  background: none;
  border: none;
  color: var(--auth-primary);
  font-size: 0.83rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
}
.ce-review-name { font-size: 1.25rem; font-weight: 800; color: #101828; }
.ce-review-cat {
  display: inline-block;
  background: #e8f1fc;
  color: var(--auth-primary);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 12px;
  margin: 8px 0;
}
.ce-review-desc { color: #667085; font-size: 0.85rem; margin: 0; }
.ce-kv {
  background: #f6f8fb;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.ce-kv .kv-label { font-size: 0.72rem; color: #98a2b3; }
.ce-kv .kv-value { font-size: 0.88rem; font-weight: 700; color: #101828; }
.ce-review-imgs { display: flex; gap: 12px; flex-wrap: wrap; }
.ce-review-imgs img { width: 110px; height: 130px; border-radius: 10px; object-fit: cover; }
.ce-create-btn {
  width: 100%;
  background: var(--auth-primary);
  border: none;
  color: #fff;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 13px;
  margin-top: 4px;
}
.ce-create-btn:hover { background: #1465b8; }
.ce-route-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f6f8fb;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.87rem;
  font-weight: 600;
  color: #101828;
}
.ce-route-row svg { color: #e02d3c; }

/* Success modals */
.suc-modal .modal-content { border: none; border-radius: 18px; padding: 8px; }
.suc-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #e8f1fc;
  color: var(--auth-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.suc-title { font-size: 1.05rem; font-weight: 800; color: #101828; text-align: center; }
.suc-sub { font-size: 0.85rem; color: #667085; text-align: center; margin: 6px 0 0; }
.suc-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.suc-btn-skip {
  background: #fff;
  border: 1px solid #e3e7ee;
  color: #344054;
  border-radius: 10px;
  font-size: 0.87rem;
  font-weight: 600;
  padding: 10px 26px;
}
.suc-btn-primary {
  background: var(--auth-primary);
  border: none;
  color: #fff;
  border-radius: 10px;
  font-size: 0.87rem;
  font-weight: 600;
  padding: 10px 26px;
}
.suc-btn-primary:hover { background: #1465b8; }
.suc-btn-block { width: 100%; }
.suc-confetti { position: relative; }
.suc-confetti .dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.suc-confetti .d1 { background: #2f80ed; top: -8px; left: 18%; }
.suc-confetti .d2 { background: #f2994a; top: 6px; left: 30%; width: 5px; height: 5px; }
.suc-confetti .d3 { background: #27ae60; top: -2px; right: 28%; width: 5px; height: 5px; }
.suc-confetti .d4 { background: #2f80ed; top: 10px; right: 16%; }
.suc-confetti .d5 { background: #27ae60; top: 26px; right: 8%; width: 5px; height: 5px; }
.suc-confetti .d6 { background: #f2994a; top: 30px; left: 8%; width: 5px; height: 5px; }

/* ============================================================
   Create Route / Route builder
   ============================================================ */
.rb-map-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: url("../images/maps/map-bg.svg") center/cover no-repeat, #eef2ec;
  min-height: 320px;
  height: 100%;
}
.rb-map-wrap { position: relative; }
.map-pin {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.3);
}
.map-pin span { transform: rotate(45deg); color: #fff; font-size: 0.75rem; font-weight: 800; }
.map-pin.red { background: #e02d3c; }
.map-pin.orange { background: #f2994a; }
.map-pin.green { background: #27ae60; }
.rb-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.rb-summary {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 14px 20px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.rb-summary .rs-title { font-size: 0.95rem; font-weight: 700; color: #101828; margin-right: auto; }
.rb-summary .rs-item { text-align: center; }
.rb-summary .rs-value { font-size: 1rem; font-weight: 800; color: #101828; }
.rb-summary .rs-label { font-size: 0.72rem; color: #98a2b3; }

.rb-search { position: relative; margin-bottom: 14px; }
.rb-search .search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #98a2b3; }
.rb-search .form-control {
  border-radius: 10px;
  border: 1px solid #e3e7ee;
  padding: 9px 12px 9px 36px;
  font-size: 0.85rem;
  background: #fff;
}
.rb-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rb-tools .rb-alllegs { font-size: 0.85rem; font-weight: 600; color: #101828; margin-right: auto; }
.rb-btn-editlegs {
  background: #fff;
  border: 1px solid var(--auth-primary);
  color: var(--auth-primary);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.rb-btn-myroutes {
  background: var(--auth-primary);
  border: none;
  color: #fff;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rb-leg-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  padding: 14px;
  margin-bottom: 12px;
}
.rb-leg-head { display: flex; align-items: center; gap: 8px; }
.rb-leg-title { font-size: 0.9rem; font-weight: 700; color: #101828; margin-right: auto; }
.rb-leg-del {
  background: #fdeaea;
  border: none;
  color: #e02d3c;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rb-leg-chev { background: none; border: none; color: #667085; padding: 2px; }
.rb-leg-chev svg { transition: transform 0.18s; }
.rb-leg-card.open .rb-leg-chev svg { transform: rotate(180deg); }
.rb-leg-chips { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.rb-chip {
  background: #f2f4f7;
  color: #475467;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 4px 10px;
}
.rb-chip-select {
  border: 1px solid #e3e7ee;
  background: #fff;
  color: #475467;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 3px 8px;
}
.rb-chip-myroutes {
  background: #e8f1fc;
  color: var(--auth-primary);
  border: 1px dashed var(--auth-primary);
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rb-leg-body { display: none; margin-top: 12px; }
.rb-leg-card.open .rb-leg-body { display: block; }
.rb-addwp {
  width: 100%;
  background: #dbe9fa;
  border: none;
  color: var(--auth-primary);
  border-radius: 10px;
  font-size: 0.83rem;
  font-weight: 600;
  padding: 10px;
  margin-bottom: 10px;
}
.rb-addwp:hover { background: #cfe2f8; }
.rb-wp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f6f8fb;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.rb-wp-name { font-size: 0.83rem; font-weight: 600; color: #101828; }
.rb-wp-coords { font-size: 0.73rem; color: #667085; }
.rb-wp-actions { margin-left: auto; display: flex; gap: 8px; }
.rb-wp-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rb-wp-btn.edit { background: #e5f7ec; color: #27ae60; }
.rb-wp-btn.del { background: #fdeaea; color: #e02d3c; }
.rb-actions { display: flex; gap: 10px; margin-top: 4px; }
.rb-btn-addleg {
  flex: 1;
  background: #fff;
  border: 1px solid var(--auth-primary);
  color: var(--auth-primary);
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px;
}
.rb-btn-continue {
  flex: 1;
  background: var(--auth-primary);
  border: none;
  color: #fff;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px;
}
.rb-btn-continue:hover { background: #1465b8; }

/* Delete confirm modal (waypoint) */
.delc-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fdeaea;
  color: #e02d3c;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.delc-title { font-size: 1.05rem; font-weight: 800; color: #101828; text-align: center; }
.delc-sub { font-size: 0.85rem; color: #667085; text-align: center; margin-top: 6px; }
.delc-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.delc-btn-cancel {
  background: #fff;
  border: 1px solid #e3e7ee;
  color: #344054;
  border-radius: 10px;
  font-size: 0.87rem;
  font-weight: 600;
  padding: 10px 28px;
}
.delc-btn-delete {
  background: #e02d3c;
  border: none;
  color: #fff;
  border-radius: 10px;
  font-size: 0.87rem;
  font-weight: 600;
  padding: 10px 28px;
}

/* My Routes modal */
.mr-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f1f3f7;
}
.mr-item:last-child { border-bottom: none; }
.mr-thumb {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #eef1f5;
  background: #eef2ec;
}
.mr-name { font-size: 0.9rem; font-weight: 700; color: #101828; }
.mr-meta { font-size: 0.76rem; color: #667085; display: flex; align-items: center; gap: 6px; margin: 3px 0; flex-wrap: wrap; }
.mr-expires {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fdeaea;
  color: #e02d3c;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  margin-top: 4px;
}
.mr-check { margin-left: auto; }
.mr-check .form-check-input { width: 18px; height: 18px; }

/* ============================================================
   Edit Legs
   ============================================================ */
.el-subtitle { color: #667085; font-size: 0.83rem; }
.el-arrows { display: flex; gap: 6px; }
.el-arrow-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e3e7ee;
  background: #fff;
  color: #344054;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.el-arrow-btn:hover { background: #f6f8fb; }
.el-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.el-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--auth-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  flex-shrink: 0;
}
.el-card {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  padding: 14px;
}
.el-row.selected .el-card { outline: 2px solid var(--auth-primary); }
.el-card-head { display: flex; align-items: center; gap: 10px; }
.el-drag { color: #98a2b3; cursor: grab; }
.el-leg-title { font-size: 0.9rem; font-weight: 700; color: #101828; margin-right: auto; }
.el-wp-list { margin-top: 12px; border-top: 1px solid #f1f3f7; }
.el-wp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid #f1f3f7;
}
.el-wp-row:last-child { border-bottom: none; }
.el-wp-name { font-size: 0.83rem; font-weight: 600; color: #101828; }
.el-wp-coords { font-size: 0.73rem; color: #667085; }
.el-locked {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #b8860b;
  font-size: 0.75rem;
  font-weight: 600;
}
.el-map-thumb {
  border-radius: 14px;
  overflow: hidden;
  background: url("../images/maps/map-bg.svg") center/cover no-repeat, #eef2ec;
  height: 150px;
  position: relative;
  margin-bottom: 14px;
}
.el-side-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.el-side-card h3 { font-size: 0.92rem; font-weight: 700; color: #101828; margin-bottom: 10px; }
.el-sum-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.83rem; color: #667085; padding: 5px 0; }
.el-sum-row .v { font-weight: 700; color: #101828; }
.el-legend-row { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: #667085; margin-bottom: 8px; }
.el-legend-row .l-title { font-weight: 700; color: #101828; font-size: 0.8rem; }
.el-done-wrap { display: flex; justify-content: flex-end; margin-top: 8px; }
.el-done-btn {
  background: var(--auth-primary);
  border: none;
  color: #fff;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 11px 44px;
}
.el-done-btn:hover { background: #1465b8; }

/* ============================================================
   Boost Event + Add Card
   ============================================================ */
.bst-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  padding: 26px;
  max-width: 560px;
  margin: 0 auto;
}
.bst-title { font-size: 1.05rem; font-weight: 800; color: #101828; }
.bst-price { color: var(--auth-primary); font-size: 1.4rem; font-weight: 800; }
.bst-price small { color: #98a2b3; font-size: 0.75rem; font-weight: 500; }
.bst-sub { color: #667085; font-size: 0.83rem; margin-bottom: 16px; }
.bst-divider { border-top: 1px solid #eef1f5; margin: 16px 0; }
.bst-input {
  background: #f6f8fb;
  border: 1px solid #eef1f5;
  border-radius: 10px;
  font-size: 0.87rem;
  padding: 11px 14px;
  width: 100%;
}
.bst-box {
  background: #f6f8fb;
  border-radius: 10px;
  padding: 10px 14px;
}
.bst-box .b-label { font-size: 0.72rem; color: #98a2b3; }
.bst-box .b-value { font-size: 0.9rem; font-weight: 700; color: #101828; }
.bst-total-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.bst-total-row .t-label { font-size: 1rem; font-weight: 800; color: #101828; }
.bst-total-row .t-value { font-size: 1.3rem; font-weight: 800; color: var(--auth-primary); }
.bst-hint { text-align: center; color: #98a2b3; font-size: 0.76rem; margin: 10px 0; }
.bst-continue {
  width: 100%;
  background: var(--auth-primary);
  border: none;
  color: #fff;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 12px;
}
.bst-continue:hover { background: #1465b8; }

.ac-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  padding: 24px;
  max-width: 560px;
  margin: 0 auto;
}
.ac-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--auth-primary);
  background: #f4f9ff;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.ac-summary .s-ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e8f1fc;
  color: var(--auth-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.ac-summary .s-title { font-size: 0.88rem; font-weight: 700; color: #101828; }
.ac-summary .s-sub { font-size: 0.74rem; color: #667085; }
.ac-summary .s-amt { margin-left: auto; font-size: 1.05rem; font-weight: 800; color: var(--auth-primary); }
.ac-visa {
  background: linear-gradient(135deg, #1877d2 0%, #0d4e94 100%);
  border-radius: 16px;
  color: #fff;
  padding: 22px;
  margin-bottom: 18px;
  position: relative;
  min-height: 150px;
}
.ac-visa .v-number { font-size: 1.25rem; letter-spacing: 3px; font-weight: 600; margin-top: 26px; }
.ac-visa .v-brand { position: absolute; bottom: 18px; right: 20px; font-weight: 800; font-style: italic; letter-spacing: 1px; }
.ac-visa .v-chip { position: absolute; top: 16px; right: 20px; opacity: 0.85; }
.ac-form .form-control {
  background: #f6f8fb;
  border: 1px solid #eef1f5;
  border-radius: 10px;
  font-size: 0.87rem;
  padding: 11px 14px;
}
.ac-paynow {
  width: 100%;
  background: #0d4e94;
  border: none;
  color: #fff;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 12px;
  margin-top: 16px;
}
.ac-paynow:hover { background: #0a4076; }

/* ============================================================
   Event Detail
   ============================================================ */
.evd-breadcrumb { font-size: 0.8rem; color: #98a2b3; margin-bottom: 14px; }
.evd-breadcrumb a { color: #98a2b3; text-decoration: none; }
.evd-breadcrumb .cur { color: #344054; font-weight: 600; }
.evd-hero { position: relative; border-radius: 16px; overflow: hidden; height: 240px; margin-bottom: 20px; }
.evd-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evd-hero-chip {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fff;
  color: #17538f;
  border: 1px solid #cfe3f8;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 14px;
}
.evd-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.evd-title { font-size: 1.5rem; font-weight: 800; color: #101828; margin: 0; }
.evd-rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #101828; }
.evd-rating svg { color: #f5b301; }
.evd-going { display: flex; align-items: center; gap: 8px; color: #667085; font-size: 0.83rem; margin: 8px 0 16px; }
.evd-section-title { font-size: 0.95rem; font-weight: 700; color: #101828; margin: 18px 0 8px; }
.evd-text { color: #667085; font-size: 0.85rem; }
.evd-map {
  border-radius: 14px;
  overflow: hidden;
  background: url("../images/maps/map-bg.svg") center/cover no-repeat, #eef2ec;
  height: 240px;
  position: relative;
  margin-top: 10px;
}
.evd-side-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  padding: 18px;
  margin-bottom: 16px;
}
.evd-side-card h3 { font-size: 0.92rem; font-weight: 700; color: #101828; margin-bottom: 12px; }
.evd-actions-row { display: flex; gap: 10px; margin-bottom: 12px; }
.evd-btn-edit {
  flex: 1;
  background: #dbe9fa;
  border: none;
  color: #17538f;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}
.evd-btn-delete {
  flex: 1;
  background: #fdeaea;
  border: 1px solid #f5c2c7;
  color: #e02d3c;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.evd-btn-start {
  width: 100%;
  background: var(--auth-primary);
  border: none;
  color: #fff;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 11px;
}
.evd-btn-start:hover { background: #1465b8; }
.evd-btn-start:disabled { background: #e6e9ee; color: #98a2b3; }
.evd-countdown { text-align: center; color: var(--auth-primary); font-size: 0.83rem; font-weight: 600; margin-top: 10px; }
.evd-kv {
  background: #f6f8fb;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.evd-kv .k-label { font-size: 0.7rem; color: #98a2b3; }
.evd-kv .k-value { font-size: 0.85rem; font-weight: 700; color: #101828; }
.evd-kv svg { color: var(--auth-primary); flex-shrink: 0; }
.evd-deadline-head { display: flex; align-items: center; justify-content: space-between; }
.evd-days-left { color: #e02d3c; font-size: 0.78rem; font-weight: 700; }

/* Map pin positions */
.pin-center { top: 46%; left: 48%; }
.pin-p1 { top: 22%; left: 30%; }
.pin-p2 { top: 47%; left: 42%; }
.pin-p3 { top: 32%; left: 76%; }
.pin-sm { width: 20px; height: 20px; }
.pin-sm span { font-size: 0.55rem; }

/* Edit Legs — design refresh */
.el-leg-chips { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.el-leg-del { margin-left: auto; }
.el-card-head .rb-leg-chev { margin-left: 0; }
.el-wp-drag { flex: 0 0 auto; }
.el-locked { color: #667085; }
.el-locked svg,
.el-lock-ic svg { color: #f2b90d; }
.el-lock-ic { display: inline-flex; align-items: center; }

/* Event Detail — route summary & legs */
.evd-route-summary { margin-top: 16px; }
.evd-leg-card {
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 14px;
}
.evd-leg-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.evd-leg-body { margin-top: 10px; border-top: 1px solid #f1f3f7; }
.evd-leg-body .el-wp-row { padding-left: 0; }
.rb-leg-chev.open svg { transform: rotate(180deg); }
.rb-leg-chev svg { transition: transform 0.15s ease; }

/* Book Event */
.bk-wrap { display: flex; justify-content: center; }
.bk-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(16, 24, 40, 0.06);
  padding: 28px;
  width: 100%;
  max-width: 480px;
}
.bk-price-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bk-per-spot { font-size: 0.75rem; color: #98a2b3; }
.bk-per-spot span { color: #667085; font-weight: 600; }
.bk-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--auth-primary);
  border-radius: 10px;
  padding: 8px 10px 8px 14px;
}
.bk-price { font-size: 0.95rem; font-weight: 700; color: #101828; }
.bk-stepper { display: flex; align-items: center; gap: 10px; }
.bk-step-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}
.bk-step-btn.minus { background: #f2f4f7; color: #667085; }
.bk-step-btn.minus:hover { background: #e9edf2; }
.bk-step-btn.plus { background: var(--auth-primary); color: #fff; }
.bk-step-btn.plus:hover { background: #1465b8; }
.bk-count {
  width: 28px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #101828;
  padding: 0;
}
.bk-count:focus { outline: none; }
.bk-continue-btn {
  width: 100%;
  margin-top: 22px;
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 0.92rem;
  font-weight: 600;
}
.bk-continue-btn:hover { background: #1465b8; }

/* Review Summary */
.rvs-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(16, 24, 40, 0.06);
  padding: 22px;
  margin-bottom: 18px;
}
.rvs-hero { border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.rvs-hero img { width: 100%; height: 240px; object-fit: cover; display: block; }
.rvs-title { font-size: 1.15rem; font-weight: 800; color: #101828; margin-bottom: 8px; }
.rvs-desc { font-size: 0.85rem; color: #667085; margin: 12px 0 0; }
.rvs-section-title { font-size: 0.95rem; font-weight: 700; color: #101828; margin-bottom: 12px; }
.rvs-price-row { display: flex; align-items: center; justify-content: space-between; }
.rvs-price-row .kv-label-inline { font-size: 0.78rem; color: #98a2b3; }
.rvs-price-value { font-size: 0.9rem; font-weight: 700; color: #101828; }
.rvs-spots-right { display: flex; align-items: center; gap: 14px; }
.rvs-spots-num { font-size: 0.9rem; font-weight: 700; color: #101828; }
.rvs-stepper {
  border: 1px solid var(--auth-primary);
  border-radius: 999px;
  padding: 3px 5px;
  gap: 6px;
}
.rvs-stepper .bk-count { width: auto; min-width: 26px; color: var(--auth-primary); }
.rvs-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 4px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #101828;
}
.rvs-total { font-size: 1.05rem; font-weight: 800; color: #101828; }
.rvs-continue-btn {
  display: block;
  width: 100%;
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 24px;
}
.rvs-continue-btn:hover { background: #1465b8; }
/* Trips page */
.tp-tabs {
  display: inline-flex;
  background: #fff;
  border-radius: 12px;
  padding: 5px;
  gap: 4px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
  margin-bottom: 22px;
}
.tp-tab {
  border: none;
  background: transparent;
  color: #667085;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 22px;
  border-radius: 9px;
}
.tp-tab.active { background: #eef5fd; color: var(--auth-primary); }
.tp-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(16, 24, 40, 0.06);
  padding: 14px;
  display: flex;
  gap: 14px;
  height: 100%;
}
.tp-img {
  width: 150px;
  height: 118px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}
.tp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tp-name { font-size: 0.95rem; font-weight: 700; color: #101828; margin: 0 0 6px; }
.tp-avs { display: flex; align-items: center; flex-shrink: 0; }
.tp-avs img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  margin-left: -6px;
}
.tp-avs img:first-child { margin-left: 0; }
.tp-plus {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--auth-primary);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  margin-left: -6px;
}
.tp-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #98a2b3;
  font-size: 0.78rem;
  margin-bottom: 5px;
}
.tp-meta svg { flex-shrink: 0; }
.tp-meta-sep { color: #d0d5dd; }
.tp-action { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; }
.tp-btn-primary {
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 20px;
  font-size: 0.8rem;
  font-weight: 600;
}
.tp-btn-primary:hover { background: #1465b8; }
.tp-btn-primary:disabled { background: #e6e9ee; color: #98a2b3; }
.tp-del {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #fdecec;
  color: #e02b2b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tp-del:hover { background: #fadcdc; }
.tp-btn-review {
  background: #eef5fd;
  color: var(--auth-primary);
  border: none;
  border-radius: 8px;
  padding: 7px 20px;
  font-size: 0.8rem;
  font-weight: 600;
}
.tp-btn-review:hover { background: #dfedfb; }
.tp-reviewed {
  background: #e8f7f0;
  color: #12b76a;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 600;
}
.tp-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; font-weight: 700; color: #101828; }

/* Give Review page */
.gr-wrap { display: flex; justify-content: center; }
.gr-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(16, 24, 40, 0.06);
  padding: 24px;
  width: 100%;
  max-width: 560px;
}
.gr-event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f6f8fb;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 20px;
}
.gr-event-row img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.gr-event-name { font-size: 0.9rem; font-weight: 700; color: #101828; }
.gr-event-dates { font-size: 0.78rem; color: #98a2b3; margin-top: 2px; }
.gr-q { font-size: 0.92rem; font-weight: 700; color: #101828; margin-bottom: 10px; }
.gr-stars { display: flex; gap: 8px; margin-bottom: 20px; }
.gr-star { border: none; background: transparent; color: #e4e7ec; padding: 0; }
.gr-star.filled { color: #f4b400; }
.gr-label { font-size: 0.8rem; font-weight: 600; color: #344054; margin-bottom: 6px; display: block; }
.gr-textarea { font-size: 0.85rem; resize: none; }
.gr-textarea::placeholder { color: #98a2b3; }
.gr-submit-btn {
  width: 100%;
  margin-top: 20px;
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 0.92rem;
  font-weight: 600;
}
.gr-submit-btn:hover { background: #1465b8; }

/* Start Trip page */
.st-map {
  position: relative;
  height: 640px;
  border-radius: 16px;
  overflow: hidden;
  background: #23272f;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1.5px, transparent 1.5px),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 30px 30px, 30px 30px;
}
.st-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-speed {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.st-speed-mph {
  background: #16181d;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  display: inline-flex;
  flex-direction: column;
}
.st-speed-mph small { font-size: 0.6rem; font-weight: 700; }
.st-speed-limit {
  background: #fff;
  color: #101828;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 1rem;
  font-weight: 800;
}
.st-eta {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: #16181d;
  color: #fff;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.st-eta-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.3); }
.st-warn {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: #16181d;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.st-road {
  position: absolute;
  z-index: 2;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.st-road-1 { top: 28%; left: 34%; }
.st-road-2 { bottom: 26%; left: 12%; font-size: 1rem; letter-spacing: 0.2em; }
.st-road-3 { bottom: 12%; left: 42%; transform: rotate(-90deg); transform-origin: left; }
.st-shield {
  position: absolute;
  z-index: 2;
  background: #d33;
  color: #fff;
  border: 2px solid #2255a4;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 800;
}
.st-shield-1 { top: 56%; left: 14%; }
.st-badge-green {
  position: absolute;
  z-index: 2;
  background: #1f7a3f;
  color: #fff;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.68rem;
  font-weight: 700;
}
.st-g1 { top: 47%; left: 52%; }
.st-g2 { top: 44%; left: 64%; }
.st-pin {
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 4px;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.st-pin-1 { top: 33%; left: 33%; }
.st-pin-2 { top: 32%; left: 53%; }
.st-pin-3 { top: 30%; left: 63%; }
.st-pin-4 { top: 55%; left: 33%; }
.st-mapbox { left: 14px; bottom: 14px; top: auto; z-index: 3; }
.st-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(16, 24, 40, 0.06);
  padding: 18px;
  height: 640px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.st-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.st-panel-title { font-size: 1rem; font-weight: 700; color: #101828; margin: 0; }
.st-edit-legs {
  border: 1px solid var(--auth-primary);
  color: var(--auth-primary);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}
.st-edit-legs:hover { background: #eef5fd; color: var(--auth-primary); }
.st-nav-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.st-nav-label { font-size: 0.88rem; font-weight: 700; color: #101828; }
.st-progress { position: relative; height: 4px; background: #e9edf2; border-radius: 999px; margin-bottom: 10px; }
.st-progress-dot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-2px, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--auth-primary);
  border: 3px solid #cfe3f8;
}
.st-nav-stats {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f3f7;
  margin-bottom: 14px;
}
.st-nav-stats span { display: flex; flex-direction: column; }
.st-nav-stats strong { font-size: 0.82rem; color: #101828; }
.st-nav-stats small { font-size: 0.7rem; color: #98a2b3; }
.st-leg { border: 1px solid #eef0f4; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.st-leg-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.st-leg-title { font-size: 0.9rem; font-weight: 700; color: #101828; }
.st-head-right { display: inline-flex; align-items: center; gap: 8px; }
.st-leg-chips { display: flex; gap: 8px; margin-top: 8px; }
.st-leg-body { margin-top: 10px; }
.st-wp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f6f8fb;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.st-wp-name { font-size: 0.8rem; font-weight: 700; color: #101828; }
.st-wp-coords { font-size: 0.7rem; color: #98a2b3; margin-top: 1px; }
.st-wp.locked .st-wp-name { color: #98a2b3; }
.st-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.st-pill-ongoing { background: #fff; color: #101828; box-shadow: 0 1px 4px rgba(16, 24, 40, 0.12); }
.st-dot-red { width: 7px; height: 7px; border-radius: 50%; background: #e02b2b; }
.st-pill-locked { background: #eceef2; color: #98a2b3; }
.st-unlock-btn {
  margin-top: auto;
  width: 100%;
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.st-unlock-btn:hover { background: #1465b8; }
.st-unlock-btn:disabled { background: #e6e9ee; color: #98a2b3; }
@media (max-width: 991.98px) {
  .st-map { height: 420px; }
  .st-panel { height: auto; }
}
/* Trip Edit Legs page */
.tle-arrows { display: flex; align-items: center; gap: 8px; }
.tle-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #667085;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
}
.tle-arrow-up { background: var(--auth-primary); color: #fff; }
.tle-arrow:hover { filter: brightness(0.96); }
.tle-list { display: flex; flex-direction: column; gap: 14px; }
.tle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.05);
  padding: 14px 16px;
  cursor: grab;
  border: 1.5px solid transparent;
}
.tle-row.selected { border-color: var(--auth-primary); }
.tle-row.dragging { opacity: 0.55; }
.tle-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--auth-primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tle-grip { color: #344054; display: inline-flex; }
.tle-name { font-size: 0.9rem; font-weight: 700; color: #101828; }
.tle-chip {
  margin-left: auto;
  background: #f2f4f7;
  color: #344054;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.74rem;
  font-weight: 600;
}
.tle-done-btn {
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 44px;
  font-size: 0.9rem;
  font-weight: 600;
}
.tle-done-btn:hover { background: #1465b8; }

/* Start Trip — Event Completed panel */
.st-panel-done { height: auto; }
.st-done-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f3f7;
  margin-bottom: 14px;
}
.st-done-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #12b76a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.st-done-leg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0f6fd;
  border-radius: 10px;
  padding: 13px 14px;
  margin-bottom: 10px;
}
.st-done-leg-name { font-size: 0.85rem; font-weight: 700; color: #101828; }
.st-pill-completed { background: var(--auth-primary); color: #fff; }
.st-panel-done .st-unlock-btn { margin-top: 18px; }

/* Give Review — action row */
.gr-actions { display: flex; gap: 12px; margin-top: 20px; }
.gr-actions .gr-submit-btn { margin-top: 0; flex: 1; }
.gr-later-btn {
  flex: 1;
  background: #fff;
  color: #344054;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: 12px;
  font-size: 0.92rem;
  font-weight: 600;
}
.gr-later-btn:hover { background: #f6f8fb; }
/* Start Trip — Unlock confirm + Leg Completed modals */
.st-unlock-ic { background: #e8f1fc; }
.st-lc-content { border: none; border-radius: 16px; }
.st-lc-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #101828;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.st-lc-check {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #12b76a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.st-lc-sub { font-size: 0.83rem; color: #98a2b3; text-align: center; margin: 8px 0 0; }
.st-lc-wait-label { font-size: 0.8rem; font-weight: 600; color: #344054; text-align: center; margin-top: 18px; }
.st-lc-time {
  font-size: 2.9rem;
  font-weight: 600;
  color: var(--auth-primary);
  text-align: center;
  line-height: 1.15;
  margin-bottom: 14px;
}
.st-lc-part {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f6f8fb;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  padding: 12px 14px;
}
.st-lc-part-ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #e8f1fc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.st-lc-part-main { flex: 1; min-width: 0; }
.st-lc-part-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-lc-part-text { font-size: 0.78rem; color: #344054; }
.st-lc-part-text strong:first-child { color: var(--auth-primary); }
.st-lc-avs { display: inline-flex; align-items: center; }
.st-lc-avs img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  object-fit: cover;
  margin-left: -6px;
}
.st-lc-avs img:first-child { margin-left: 0; }
.st-lc-more {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--auth-primary);
  background: #e8f1fc;
  border: 1.5px solid #fff;
  border-radius: 999px;
  padding: 2px 5px;
  margin-left: -6px;
}
.st-lc-bar {
  height: 5px;
  border-radius: 999px;
  background: #e4e7ec;
  margin-top: 8px;
  overflow: hidden;
}
.st-lc-bar span { display: block; height: 100%; width: 68%; border-radius: 999px; background: var(--auth-primary); }

/* Report Issue page */
.ri-map-wrap { position: relative; }
.ri-map-wrap .st-map { min-height: 560px; }
.ri-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100% - 40px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.3);
  padding: 18px 20px 20px;
  z-index: 5;
}
.ri-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ri-back {
  border: none;
  background: none;
  color: #344054;
  padding: 2px;
  display: inline-flex;
}
.ri-title { font-size: 1.02rem; font-weight: 800; color: #101828; margin: 0; }
.ri-edit-legs {
  margin-left: auto;
  border: 1px solid var(--auth-primary);
  color: var(--auth-primary);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 16px;
  text-decoration: none;
}
.ri-edit-legs:hover { background: #e8f1fc; color: var(--auth-primary); }
.ri-list { display: flex; flex-direction: column; gap: 12px; }
.ri-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #f6f8fb;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  padding: 12px 14px;
}
.ri-row:hover { background: #eef4fb; }
.ri-ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.ri-row-title { font-size: 0.88rem; font-weight: 700; color: #101828; }
.ri-row-sub { font-size: 0.75rem; color: #98a2b3; }
.ri-chev { margin-left: auto; color: #98a2b3; display: inline-flex; }
/* Trips — started (disabled-looking but clickable) Start Now + muted Start Event */
.tp-btn-primary.tp-started { background: #e6e9ee; color: #98a2b3; }
.tp-btn-primary.tp-started:hover { background: #dde1e8; }
.evd-btn-start.evd-start-muted { background: #e6e9ee; color: #98a2b3; }
.evd-btn-start.evd-start-muted:hover { background: #dde1e8; }
/* Start Trip — joined view Leave Event button */
.st-leave-btn {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: #fdecec;
  color: #e05252;
  font-size: 14px;
  font-weight: 600;
}
.st-leave-btn:hover { background: #fbe0e0; }
.st-leave-btn { box-shadow: 0 -6px 12px rgba(255, 255, 255, 0.9); }
.st-leave-ic { display: inline-flex; align-items: center; }
/* Routes Library (lib-), Route Detail (rd-), Route Review (rr-) */
.lib-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.lib-toolbar .tp-tabs { margin-bottom: 0; }
.lib-tools { display: flex; align-items: center; gap: 10px; }
.lib-search { min-width: 250px; }
.lib-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
  padding: 14px;
  display: flex;
  gap: 16px;
  height: 100%;
}
.lib-thumb {
  width: 178px;
  min-width: 178px;
  height: 163px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: url("../images/maps/map-bg.svg") center/cover no-repeat, #eef2ec;
}
.lib-thumb .map-pin { width: 20px; height: 20px; }
.lib-thumb .map-pin span { font-size: 0.6rem; }
.lib-p1 { top: 8%; left: 12%; }
.lib-p2 { top: 50%; left: 26%; }
.lib-p3 { top: 15%; left: 52%; }
.lib-p4 { top: 56%; left: 76%; }
.map-pin.blue { background: #1d80e8; }
.lib-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.lib-name { font-size: 1rem; font-weight: 700; color: #101828; margin: 2px 0 6px; }
.lib-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #667085;
  font-size: 0.78rem;
}
.lib-meta-sep { color: #98a2b3; }
.lib-loc { color: #667085; font-size: 0.82rem; margin-top: 4px; }
.lib-price { color: #1d80e8; font-size: 1.05rem; font-weight: 800; margin-top: 8px; }
.lib-buy,
.lib-expire {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 10px;
}
.lib-buy { background: #e8f1fd; color: #1d80e8; }
.lib-buy:hover { background: #d9e8fb; }
.lib-expire { background: #fdecec; color: #e05252; border-radius: 999px; }
.lib-expire:hover { background: #fbe0e0; }

.rd-banner {
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.rd-banner-buy { background: #e3f1fc; color: #1d80e8; }
.rd-banner-own { background: #fdecec; color: #e05252; }
.rd-map {
  border-radius: 14px;
  overflow: hidden;
  background: url("../images/maps/map-bg.svg") center/cover no-repeat, #eef2ec;
  height: 300px;
  position: relative;
}
.rd-p1 { top: 24%; left: 28%; }
.rd-p2 { top: 52%; left: 30%; }
.rd-p3 { top: 36%; left: 78%; }
.rd-map .ce-map-badge { top: auto; bottom: 12px; left: 12px; }
.rd-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-name { font-size: 1.15rem; font-weight: 800; color: #101828; margin: 0; }
.rd-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 0.88rem; font-weight: 700; color: #101828; }
.rd-avs { display: flex; margin: 8px 0 4px; }
.rd-avs img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}
.rd-avs img + img { margin-left: -7px; }
.rd-purchased {
  display: inline-block;
  background: #e6f7ee;
  color: #27ae60;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  margin: 4px 0 8px;
}
.rd-price-row { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 12px; }
.rd-price { color: #1d80e8; font-size: 1.55rem; font-weight: 800; }
.rd-per { color: #98a2b3; font-size: 0.78rem; }
.rd-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rd-kv {
  background: #f4f6f8;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rd-kv-full { margin-top: 10px; }
.rd-kv-main { display: flex; flex-direction: column; min-width: 0; }
.rd-kv-label { color: #98a2b3; font-size: 0.7rem; }
.rd-kv-val { color: #101828; font-size: 0.85rem; font-weight: 700; }
.rd-kv-ic { color: #667085; display: inline-flex; }
.rd-buy-btn {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: #1d80e8;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 12px 16px;
  margin-top: 16px;
}
.rd-buy-btn:hover { background: #1465b8; }
.rd-caption { color: #98a2b3; font-size: 0.76rem; text-align: center; margin: 10px 0 0; }
.rr-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
  padding: 16px;
}
.rr-map { margin-bottom: 14px; }
.rr-name { font-size: 1.05rem; font-weight: 800; color: #101828; margin: 2px 0 8px; }
.rr-side-title { font-size: 0.95rem; font-weight: 700; color: #101828; margin: 0 0 12px; }
.rr-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #667085;
  font-size: 0.86rem;
  padding: 6px 0;
}
.rr-total {
  border-top: 1px solid #eaecf0;
  margin-top: 6px;
  padding-top: 12px;
  color: #101828;
  font-weight: 700;
}
.rr-total strong { font-size: 1.05rem; }
.rr-check-ic { background: #e8f1fd; }
@media (max-width: 575.98px) {
  .lib-card { flex-direction: column; }
  .lib-thumb { width: 100%; min-width: 0; }
}
/* Event detail buyer view (Events -> Buy Now) */
.evd-buy-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.evd-buy-price { color: #1d80e8; font-size: 1.5rem; font-weight: 800; }
.evd-buy-per { color: #98a2b3; font-size: 0.8rem; font-weight: 500; }
.evd-spots-left {
  background: #fdecec;
  color: #e05252;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}
#evdBuyBlock .evd-btn-start { margin-top: 0; }
.evd-free-cancel { text-align: center; color: #98a2b3; font-size: 0.78rem; margin-top: 10px; }
.evd-org-row { display: flex; align-items: center; gap: 12px; }
.evd-org-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.evd-org-label { color: #98a2b3; font-size: 0.75rem; }
.evd-org-name { color: #101828; font-size: 0.95rem; font-weight: 700; }

/* ===== Settings sub-pages ===== */

/* Text pages (Privacy Policy / About Us / Terms) */
.txp-card {
  background: #fff;
  border-radius: 14px;
  padding: 2rem 1.75rem;
  box-shadow: 0 1px 3px rgba(20, 35, 60, 0.05);
}

.txp-card p {
  color: #667085;
  font-size: 0.88rem;
  line-height: 1.65;
  margin-bottom: 1.35rem;
}

.txp-card p:last-child {
  margin-bottom: 0;
}

/* App Feedback */
.afb-q {
  font-size: 1.05rem;
  font-weight: 700;
  color: #101828;
  margin-bottom: 1.4rem;
}

.afb-stars {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 1.8rem;
}

.afb-star {
  border: none;
  background: transparent;
  padding: 0;
  color: #cfd4dc;
  line-height: 1;
}

.afb-star.selected {
  color: #f5b301;
}

.afb-hint {
  text-align: right;
  font-size: 0.75rem;
  color: #98a2b3;
  margin-top: 0.4rem;
}

/* Update Interest */
.uin-card .interest-chips {
  justify-content: flex-start;
}

.uin-card .interest-chip {
  background: #f4f6f9;
  box-shadow: none;
}

.uin-card .interest-chip.selected {
  background: #fff;
  border-color: var(--auth-primary);
  color: var(--auth-primary);
  font-weight: 700;
}

/* Subscription */
.plan-card.subp-featured {
  border: 1.5px solid var(--auth-primary);
}

.subp-btn-current {
  margin-top: auto;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: #dcebfb;
  color: var(--auth-primary);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.6rem 1rem;
}

.subp-btn-outline {
  margin-top: auto;
  width: 100%;
  border: 1.5px solid var(--auth-primary);
  border-radius: 8px;
  background: #fff;
  color: var(--auth-primary);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.55rem 1rem;
}

.subp-btn-outline:hover {
  background: #f1f7fd;
}

/* Payments Connect */
.pcn-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #101828;
  margin-bottom: 0.7rem;
}

.pcn-req {
  color: var(--adm-red);
}

.pcn-ssn {
  position: relative;
}

.pcn-ssn .form-control {
  padding-right: 2.6rem;
}

.pcn-eye {
  position: absolute;
  top: 50%;
  right: 0.8rem;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0;
  color: #667085;
  display: inline-flex;
}

/* Manage Vehicle */
.mvh-search {
  position: relative;
}

.mvh-search svg {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: #98a2b3;
}

.mvh-search input {
  width: 100%;
  border: none;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 35, 60, 0.05);
  padding: 0.8rem 1rem 0.8rem 2.6rem;
  font-size: 0.86rem;
  color: #303a48;
}

.mvh-search input:focus {
  outline: 2px solid rgba(29, 128, 232, 0.25);
}

.mvh-search input::placeholder {
  color: #98a2b3;
}

.mvh-card {
  position: relative;
  display: flex;
  gap: 1rem;
  background: #fff;
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(20, 35, 60, 0.05);
  height: 100%;
}

.mvh-img {
  width: 170px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  flex: 0 0 auto;
}

.mvh-body {
  min-width: 0;
  padding-right: 2rem;
}

.mvh-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #101828;
  margin: 0.1rem 0 0.5rem;
}

.mvh-meta {
  font-size: 0.82rem;
  color: #667085;
  margin-bottom: 0.3rem;
}

.mvh-meta .mvh-val {
  color: #101828;
  font-weight: 700;
}

.mvh-edit {
  border: none;
  border-radius: 8px;
  background: #dcebfb;
  color: var(--auth-primary);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  margin-top: 0.35rem;
}

.mvh-edit:hover {
  background: #cfe3f9;
}

.mvh-del {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #fdecec;
  color: var(--adm-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mvh-del:hover {
  background: #fbdcdc;
}

@media (max-width: 575.98px) {
  .mvh-card {
    flex-direction: column;
  }

  .mvh-img {
    width: 100%;
    height: 150px;
  }
}

.btn-light-cancel {
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #fff;
  color: #475467;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.5rem 1.2rem;
}

.btn-light-cancel:hover {
  background: #f6f8fb;
  color: #303a48;
}

/* Add Vehicle page: compact photo tiles */
#avPhotos {
  grid-template-columns: repeat(auto-fill, 110px);
}

#avPhotos .vehicle-photo-item,
#avPhotos .vehicle-upload-tile {
  width: 110px;
  height: 74px;
}

/* Auth brand logo (split auth pages) */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.auth-brand .auth-logo {
  font-size: 2.3rem;
  letter-spacing: 0.02em;
}

.auth-brand .auth-logo .logo-pin svg {
  vertical-align: -4px;
}

.auth-brand-tagline {
  font-size: 0.8rem;
  font-weight: 700;
  color: #16202e;
}

/* Featured ads slider */
.ads-viewport {
  overflow: hidden;
}

.ads-track {
  display: flex;
  transition: transform 0.4s ease;
}

.ad-slide {
  flex: 0 0 calc((100% - 2rem) / 3);
  padding-right: 0;
  margin-right: 1rem;
}

.ad-slide:last-child {
  margin-right: 0;
}

@media (max-width: 991.98px) {
  .ad-slide {
    flex: 0 0 calc((100% - 1rem) / 2);
  }
}

@media (max-width: 575.98px) {
  .ad-slide {
    flex: 0 0 100%;
  }
}

/* Upgrade Ad-Free page */
.uaf-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(22, 32, 46, 0.06);
  max-width: 880px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem 1.75rem;
}

.uaf-title {
  font-size: 1rem;
  font-weight: 800;
  color: #16202e;
  margin: 0;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #eef1f5;
}

.uaf-sec-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #16202e;
  margin: 1.4rem 0 0.25rem;
}

.uaf-sec-sub {
  font-size: 0.75rem;
  color: #8a97a8;
  margin: 0;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid #eef1f5;
}

.uaf-price-row {
  text-align: center;
  margin: 1.6rem 0 1.4rem;
}

.uaf-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--auth-primary);
}

.uaf-per {
  font-size: 0.78rem;
  font-weight: 600;
  color: #16202e;
  margin-left: 0.3rem;
}

.uaf-feats {
  width: 100%;
}

.uaf-pill {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #f7f8fa;
  border: 1px solid #eef1f5;
  border-radius: 12px;
  padding: 0.55rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #16202e;
}

.uaf-pill .uaf-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  overflow: hidden;
}

.uaf-pill .uaf-ic-white {
  background: #fff;
  box-shadow: 0 1px 4px rgba(22, 32, 46, 0.1);
}

.uaf-continue {
  display: block;
  width: 100%;
  margin: 1.5rem auto 0;
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.7rem 1rem;
}

.uaf-continue:hover {
  background: #0f56b3;
  color: #fff;
}

/* Add Card - secure payments note (Stripe) */
.ac-stripe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--auth-primary);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-top: 1rem;
  background: #fff;
}

.ac-stripe.d-none {
  display: none;
}

.ac-stripe .st-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #16202e;
}

.ac-stripe .st-sub {
  font-size: 0.73rem;
  color: #8a97a8;
}

.ac-stripe .st-logo {
  font-size: 1.15rem;
  font-weight: 800;
  color: #635bff;
  text-decoration: none;
  letter-spacing: -0.02em;
}

/* Larger payment success modal (add-card.html) */
.suc-modal.suc-lg .modal-dialog {
  max-width: 430px;
}

.suc-modal.suc-lg .modal-body {
  padding: 2.1rem 2rem 1.9rem;
}

.suc-modal.suc-lg .suc-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
}

.suc-modal.suc-lg .suc-icon svg {
  width: 26px;
  height: 26px;
}

.suc-modal.suc-lg .suc-title {
  font-size: 1.3rem;
}

.suc-modal.suc-lg .suc-sub {
  font-size: 0.92rem;
  margin-top: 8px;
}

.suc-modal.suc-lg .suc-actions {
  margin-top: 26px;
}

.suc-modal.suc-lg .suc-btn-primary {
  padding: 12px 26px;
  font-size: 0.95rem;
  border-radius: 12px;
}

.suc-modal.suc-lg .suc-confetti .dot {
  width: 7px;
  height: 7px;
}

.suc-modal.suc-lg .suc-confetti .d1 {
  top: 46px;
  left: 12%;
}

.suc-modal.suc-lg .suc-confetti .d2 {
  top: 22px;
  left: 30%;
  width: 6px;
  height: 6px;
}

.suc-modal.suc-lg .suc-confetti .d3 {
  top: 30px;
  right: 30%;
  width: 6px;
  height: 6px;
}

.suc-modal.suc-lg .suc-confetti .d4 {
  top: 48px;
  right: 12%;
}

.suc-modal.suc-lg .suc-confetti .d5 {
  top: 74px;
  right: 26%;
  width: 6px;
  height: 6px;
}

.suc-modal.suc-lg .suc-confetti .d6 {
  top: 70px;
  left: 26%;
  width: 6px;
  height: 6px;
}

/* Choose Your Route Option modal + dashboard destination view */
.rop-dialog {
  max-width: 470px;
}

.rop-content {
  border: none;
  border-radius: 18px;
  padding: 22px 22px 24px;
}

.rop-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.rop-back {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #f2f4f7;
  color: #101828;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.rop-back:hover {
  background: #e8ebf0;
}

.rop-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #101828;
  margin: 0;
}

.rop-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: #f7f8fa;
  border: 1px solid #eef1f5;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.rop-item:hover {
  background: #f0f3f7;
}

.rop-ic {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(16, 24, 40, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 62px;
}

.rop-item-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #101828;
}

.rop-item-sub {
  font-size: 0.82rem;
  color: #667085;
}

.rop-chev {
  margin-left: auto;
  color: #98a2b3;
}

.dash-dest-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* Create Route map-only background (Saved Route flow from the dashboard) */
body.cr-map-mode .page-title,
body.cr-map-mode .cr-panel-col,
body.cr-map-mode .rb-summary {
  display: none;
}

body.cr-map-mode .cr-map-col {
  width: 100%;
}

body.cr-map-mode .rb-map-card {
  min-height: calc(100vh - 130px);
  border-radius: 14px;
}

body.cr-map-mode .rb-path,
body.cr-map-mode .rb-map-card .map-pin {
  display: none;
}

svg.mr-thumb {
  display: block;
  flex: 0 0 auto;
}
.mr-check .form-check-input {
  width: 20px;
  height: 20px;
  border-width: 2px;
  border-radius: 6px;
  margin-top: 24px;
}

/* User-requested price/title emphasis overrides */
.disc-price,
.rt-value {
  font-weight: 600 !important;
  color: #2781d6 !important;
}
.disc-price {
  font-size: 1.7em !important;
}
.disc-card {
  background-color: #f3f5f7 !important;
}
.rop-title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
}
.evd-buy-price {
  font-weight: 600 !important;
  color: #2781d6 !important;
}
.evd-title {
  font-weight: 700 !important;
}
.evc-price,
.lib-price {
  font-weight: 600 !important;
  font-size: 1.7em !important;
}
.tp-img {
  width: 205px !important;
  height: 133px !important;
}

.auth-logo-img {
  height: 62px;
  width: auto;
  display: block;
}

body.org-body {
  --adm-sidebar-w: 248px;
}
.org-logo-img {
  height: 44px;
  width: auto;
  display: block;
  margin: 0 auto;
}
body.org-body .org-brand .org-logo {
  justify-content: center;
  width: 100%;
}

/* ---------- Splash onboarding wizard (splash.html) ---------- */
body.spl-body {
  background: #eef1f4;
  min-height: 100vh;
  margin: 0;
}
.spl-wrap {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}
.spl-left {
  flex: 0 0 44%;
  max-width: 640px;
  margin: 16px;
  border-radius: 18px;
  background: #1f8bf1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.spl-phone {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 160px);
  border-radius: 44px;
  display: block;
}
.spl-right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 32px 32px;
}
.spl-logo-row {
  width: 100%;
  display: flex;
  justify-content: center;
}
.spl-logo {
  height: 56px;
  width: auto;
}
.spl-center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 460px;
  text-align: center;
}
.spl-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: #1c1f23;
  margin-bottom: 10px;
}
.spl-sub {
  color: #6b7480;
  font-size: 0.95rem;
  margin-bottom: 22px;
}
.spl-dots {
  display: flex;
  gap: 7px;
  margin-bottom: 28px;
}
.spl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50px;
  background: #c8cdd4;
  transition: all 0.25s ease;
}
.spl-dot.active {
  width: 22px;
  background: #1f8bf1;
}
.spl-next {
  width: 100%;
  max-width: 460px;
  padding: 11px 16px;
  font-weight: 600;
  border-radius: 8px;
}
.spl-skip-row {
  padding: 12px 0 24px;
}
.spl-skip {
  color: #1f8bf1;
  font-weight: 600;
  text-decoration: none;
}
.spl-skip:hover {
  text-decoration: underline;
}
@media (max-width: 991.98px) {
  .spl-wrap {
    flex-direction: column;
  }
  .spl-left {
    flex: none;
    max-width: none;
    padding: 32px 16px;
  }
  .spl-phone {
    max-width: 260px;
  }
}

/* ---------- User-requested bold titles ---------- */
.ce-review-name {
  font-weight: 700 !important;
}
.suc-title {
  font-weight: 700 !important;
}
.delc-title {
  font-weight: 700 !important;
}
/* Give Review success modal: larger title + icon with confetti dots */
#reviewDoneModal .suc-title {
  font-size: 1.35rem;
}
#reviewDoneModal .suc-icon {
  width: 64px;
  height: 64px;
}
#reviewDoneModal .suc-icon svg {
  width: 28px;
  height: 28px;
}

.bst-title {
  font-weight: 700 !important;
}

.rvs-title {
  font-weight: 700 !important;
}

.rd-name {
  font-weight: 700 !important;
}

.rr-name {
  font-weight: 700 !important;
}

/* Change Password page (chp-) */
.chp-title {
  font-weight: 700 !important;
}

.chp-card {
  background: #fff;
  border-radius: 14px;
  padding: 26px 28px 28px;
  margin-top: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.password-group .form-control.is-invalid {
  background-image: none;
  padding-right: 44px;
}

/* Payments status page (pst-) + Payment Details modal (pyd-) */
.pst-pending-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e8f1fb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  position: relative;
  z-index: 1;
}

.pst-pending-card {
  background: #fff;
  border-radius: 14px;
  padding: 56px 24px 48px;
  margin-top: 40px;
  text-align: center;
  position: relative;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.pst-pending-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #101828;
}

.pst-pending-sub {
  font-size: 0.85rem;
  color: #667085;
  margin: 6px auto 0;
  max-width: 640px;
}

.pst-section-label {
  font-weight: 700;
  color: #101828;
  font-size: 0.95rem;
  margin: 18px 0 12px;
}

.pst-stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.pst-stat-ic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e8f1fb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.pst-stat-label {
  font-size: 0.8rem;
  color: #667085;
}

.pst-stat-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #101828;
  margin-top: 2px;
}

.pst-payout-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  cursor: pointer;
}

.pst-payout-row:hover {
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.1);
}

.pst-payout-ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e8f1fb;
  color: #1173d4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.pst-payout-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.pst-payout-name {
  font-size: 0.82rem;
  color: #667085;
}

.pst-payout-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: #101828;
  margin-top: 2px;
}

.pst-payout-amount {
  font-weight: 800;
  color: #101828;
}

.pyd-content {
  border: none;
  border-radius: 18px;
  padding: 6px 8px 10px;
}

.pyd-grab {
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: #d9dee4;
  margin: 8px auto 2px;
}

.pyd-head {
  display: flex;
  align-items: center;
  padding: 10px 16px 4px;
}

.pyd-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f2f4f7;
  color: #101828;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pyd-title {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
  color: #101828;
  margin-right: 36px;
}

.pyd-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid #b9d7f3;
  background: #f4f9ff;
  color: #1173d4;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.78rem;
  margin-bottom: 12px;
}

.pyd-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.pyd-card {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.pyd-card-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: #101828;
  margin-bottom: 10px;
}

.pyd-kv {
  background: #f7f8fa;
  border-radius: 8px;
  padding: 8px 10px;
}

.pyd-kv-label {
  font-size: 0.72rem;
  color: #98a2b3;
}

.pyd-kv-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: #101828;
  margin-top: 2px;
}

.pyd-red {
  color: #e5484d;
}

.pyd-blue {
  color: #1173d4;
}

/* Pending review dots clustered around the icon (payments-connect modal + payments-status card) */
#pcnDoneModal .suc-confetti .dot,
.pst-pending-card.suc-confetti .dot {
  background: #1173d4;
}

#pcnDoneModal .suc-confetti .d1,
.pst-pending-card.suc-confetti .d1 { top: 28px; left: 16%; width: 5px; height: 5px; }

#pcnDoneModal .suc-confetti .d2,
.pst-pending-card.suc-confetti .d2 { top: 62px; left: 25%; width: 4px; height: 4px; }

#pcnDoneModal .suc-confetti .d3,
.pst-pending-card.suc-confetti .d3 { top: 44px; left: 34%; width: 4px; height: 4px; }

#pcnDoneModal .suc-confetti .d4,
.pst-pending-card.suc-confetti .d4 { top: 24px; right: 17%; width: 5px; height: 5px; }

#pcnDoneModal .suc-confetti .d5,
.pst-pending-card.suc-confetti .d5 { top: 56px; right: 25%; width: 4px; height: 4px; }

#pcnDoneModal .suc-confetti .d6,
.pst-pending-card.suc-confetti .d6 { top: 38px; right: 34%; width: 4px; height: 4px; }

.pst-pending-title {
  font-weight: 700 !important;
}

/* On the wide payments-status card, anchor dots close to the centered icon */
.pst-pending-card.suc-confetti .d1 { top: 34px; left: calc(50% - 150px); }
.pst-pending-card.suc-confetti .d2 { top: 78px; left: calc(50% - 120px); }
.pst-pending-card.suc-confetti .d3 { top: 54px; left: calc(50% - 82px); }
.pst-pending-card.suc-confetti .d4 { top: 30px; left: calc(50% + 145px); right: auto; }
.pst-pending-card.suc-confetti .d5 { top: 72px; left: calc(50% + 118px); right: auto; }
.pst-pending-card.suc-confetti .d6 { top: 48px; left: calc(50% + 78px); right: auto; }

.pst-stat-value {
  font-weight: 700 !important;
}

.pst-payout-amount {
  font-weight: 700 !important;
}

/* Discovery/Events filter panels: 65% screen height */
#dashFilterPanel.flt-panel,
#filterPanel.flt-panel,
#libFilterPanel.flt-panel {
  height: 65vh;
  border-bottom-left-radius: 14px;
}

/* Country select with flag (payments connect) */
.country-field {
  position: relative;
}
.country-field .phone-flag {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  pointer-events: none;
}
.country-field .phone-flag svg {
  border-radius: 50%;
}
.country-field .country-select {
  padding-left: 42px;
}

.country-field .country-caret {
  position: absolute;
  left: 38px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: #98a2b3;
  pointer-events: none;
}
.country-field .country-select {
  padding-left: 60px;
}

/* Give Review success modal: cluster confetti dots near icon */
#reviewDoneModal .suc-confetti .dot { background: #1173d4; }
#reviewDoneModal .suc-confetti .d1 { top: 26px; left: 22%; width: 5px; height: 5px; }
#reviewDoneModal .suc-confetti .d2 { top: 58px; left: 30%; width: 4px; height: 4px; }
#reviewDoneModal .suc-confetti .d3 { top: 42px; left: 37%; width: 4px; height: 4px; }
#reviewDoneModal .suc-confetti .d4 { top: 24px; right: 23%; width: 5px; height: 5px; }
#reviewDoneModal .suc-confetti .d5 { top: 54px; right: 30%; width: 4px; height: 4px; }
#reviewDoneModal .suc-confetti .d6 { top: 40px; right: 37%; width: 4px; height: 4px; }

/* Route Builder Mapbox container (CreateRoute/EditLegs). Must live in this real stylesheet file,
   not an inline style="" attribute or an un-nonced <style> block - the app's CSP (see
   ContentSecurityPolicyMiddleware.cs) sets a nonce-based style-src with no 'unsafe-inline', so the
   browser silently drops any inline style with no nonce. This was the actual root cause of an
   extended debugging session where the map container kept measuring height:0 no matter what inline
   style value was set - the browser was dropping every one of those declarations before layout ever
   ran, not a Mapbox/flexbox interaction. */
.rb-map-outer {
  position: relative;
  height: 480px;
  border-radius: 14px;
  overflow: hidden;
}
/* Generic - fills whatever sized/positioned container it's dropped into (480px builder map,
   150px .el-map-thumb, etc.) rather than a fixed height, so this one rule works everywhere. */
.rb-map-canvas {
  height: 100%;
  width: 100%;
}
.rb-map-outer .ce-map-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  pointer-events: none;
}
.rb-map-outer .rb-map-hint {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  pointer-events: none;
}