/* ==========================================================================
   LetsMeet – App styles
   Theme: theme.css + libs/responsive.css (base theme, do not merge).
   This file: layout, components, and page-specific overrides. Add new rules
   in the section that matches their purpose (see TOC below).
   ========================================================================== */

/*
   TABLE OF CONTENTS
   1. Base
   2. Layout
   3. Header / Topbar / Nav
   4. Footer
   5. Components (cards, badges, buttons, forms)
   6. Events list & filters
   7. Dashboard & calendar
   8. Meetup detail (map, scheduler, tabs, admin)
   9. Create wizard
  10. Landing / Hero
  11. Utilities
  12. Media queries
*/

/* ---------- Major colors (use these) ---------- */
:root {
  --color-primary: #5fb425;
  --color-bg: #f1f5f9;
  --color-text: #1a1a1a;
  --color-danger: #ee3333;
}

/* ========== 1. Base ========== */
/* Prefer Bootstrap 5 utilities; custom rules only where Bootstrap is insufficient. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

/* Restore focus outline for keyboard users (theme.css removes outline) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ========== 2. Layout ========== */

.container {
  max-width: 1150px;
  margin: 1.2rem auto;
  padding: 0 1rem 2.5rem;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.footer {
  max-width: 1150px;
  margin: 2rem auto;
  padding: 1rem;
  border-top: 1px solid #d9dde2;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ========== 3. Header / Topbar / Nav ========== */

.topbar {
  background: #efefef;
  border-bottom: 1px solid #e2e2e2;
  font-size: 0.82rem;
}

.topbar-inner {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0.45rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.top-item {
  color: #8d9198;
}

.dot {
  color: #6cb424;
}

.social-links {
  display: flex;
  gap: 0.2rem;
}

.social-links a {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-size: 0.7rem;
  border-radius: 2px;
}

.site-header {
  background: #fff;
  color: #4b4f58;
  border-bottom: 1px solid #dfe2e6;
}

.nav {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.brand {
  color: var(--color-primary);
  text-decoration: none;
  text-transform: lowercase;
  font-size: 2rem;
  font-weight: 700;
  padding: 0.9rem 1rem;
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  height: 42px;
  width: auto;
  display: block;
}

.nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-links a,
.link-button {
  color: #4d5158;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-transform: uppercase;
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  border-left: 1px solid #efefef;
  min-height: 100%;
}

.nav-links a.active,
.nav-links .link-button.active {
  background: var(--color-primary);
  color: #fff;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links .link-button:hover,
.nav-links .link-button:focus-visible {
  background: var(--color-primary);
  color: #fff;
  outline: none;
}

.header-top-area form.form-inline,
.navbar-form-inline {
  display: inline;
}

.navbar-logo-img {
  height: 42px;
  width: auto;
}

/* 3.1 Theme navbar – same look as landing (index2) on all pages + responsive */
/* Inner pages: solid bar like landing bar, not transparent */
body:not(.home-2) .header-top-area {
  position: relative;
  background: #fff;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
  padding: 20px 2.5% 0;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
}
body:not(.home-2) .header-top-area.sticky {
  padding: 0 2.5%;
}
/* Same logo centering as landing */
body:not(.home-2) .logo-area {
  text-align: center;
  margin-top: 28px;
}
body:not(.home-2) .header-top-area.sticky .logo-area {
  margin-top: 14px;
}
/* Brand color for nav active/hover (overrides theme red) */
.header-top-area .menu-area ul li.active a,
.header-top-area .menu-area ul li:hover a,
.header-top-area .header-right-area ul li a:hover {
  color: var(--color-primary) !important;
}
/* Mobile: same structure; ensure hamburger and menu are visible and on-brand */
.mobile-menu-area {
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.mean-container .mean-nav ul li a:hover,
.mean-container .mean-nav ul li a.mean-expand:hover {
  color: var(--color-primary);
}
.mean-container a.meanmenu-reveal {
  color: var(--color-text);
}
.mean-container a.meanmenu-reveal span {
  background: var(--color-text);
}
/* Responsive: align logo and menu toggle on small screens */
@media (max-width: 991px) {
  .header-top-area .row {
    align-items: center;
    min-height: 70px;
  }
  body:not(.home-2) .logo-area,
  .home-2 .logo-area {
    margin-top: 0;
    margin-bottom: 0;
  }
  .header-right-area {
    justify-content: flex-end;
    display: flex;
    align-items: center;
  }
}
@media (max-width: 767px) {
  .logo-area {
    margin-top: 0;
    margin-bottom: 0;
  }
  header .container-fulied,
  .header-top-area .container-fluid {
    margin-left: 15px;
    margin-right: 15px;
  }
}

/* Breadcrumb: we use <ol> for semantics; mirror theme’s ul styles */
.breadcrumb-content ol li {
  display: inline-block;
}
.breadcrumb-content ol li a {
  color: #707070;
  text-transform: capitalize;
}
.breadcrumb-content ol li.active a {
  color: #ee3333;
}

.banner-area .container-fluid {
  /* margin-left: 15px;
  margin-right: 15px; */
}
@media (min-width: 992px) {
  .banner-area .container-fluid {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ========== 4. Footer ========== */

.footer-letsmeet {
  --footer-bg: var(--color-bg);
  --footer-text: var(--color-text);
  --footer-bar: var(--color-primary);
  --footer-bar-text: #fff;
  --footer-input-border: #d4d4d4;
}

.footer-letsmeet .footer-newsletter {
  background: var(--footer-bg);
  padding: 3.5rem 0;
}

.footer-letsmeet .footer-newsletter h2 {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--footer-text);
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.footer-letsmeet .footer-newsletter .footer-newsletter-form {
  display: flex;
  max-width: 420px;
  margin: 0 auto;
  gap: 0;
}

.footer-letsmeet .footer-newsletter input[type="email"] {
  flex: 1;
  padding: 0.85rem 1rem;
  border: 1px solid var(--footer-input-border);
  background: #fff;
  font-size: 0.95rem;
}

.footer-letsmeet .footer-newsletter input[type="email"]::placeholder {
  color: #9ca3af;
}

.footer-letsmeet .footer-newsletter button {
  padding: 0.85rem 1.75rem;
  background: var(--footer-text);
  color: #fff;
  border: none;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.footer-letsmeet .footer-newsletter button:hover {
  background: #333;
  color: #fff;
}

.footer-letsmeet .footer-newsletter-email {
  max-width: 280px;
}

.footer-letsmeet .footer-columns {
  background: var(--footer-bg);
  padding: 3rem 0 3.5rem;
  border-top: 1px solid #eee;
}

.footer-letsmeet .footer-col h3 {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--footer-text);
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.footer-letsmeet .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-letsmeet .footer-col li {
  margin-bottom: 0.6rem;
}

.footer-letsmeet .footer-col a {
  color: var(--footer-text);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-letsmeet .footer-col a:hover {
  text-decoration: underline;
}

.footer-letsmeet .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.footer-letsmeet .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--footer-text);
  color: var(--footer-text);
  border-radius: 2px;
  font-size: 1rem;
}

.footer-letsmeet .footer-social a:hover {
  background: var(--footer-text);
  color: #fff;
  text-decoration: none;
}

.footer-letsmeet .footer-bar {
  background: var(--footer-bar);
  color: var(--footer-bar-text);
  padding: 1rem 0;
}

.footer-letsmeet .footer-bar .container {
  max-width: 100%;
}

.footer-letsmeet .footer-bar p {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.footer-letsmeet .footer-bar a {
  color: var(--footer-bar-text);
  text-decoration: none;
}

.footer-letsmeet .footer-bar a:hover {
  text-decoration: underline;
}

/* ========== 5. Components ========== */

.hero,
.card,
.form-card {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  padding: 1rem;
}

.subtitle {
  color: #666;
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
}

.badge {
  background: #e7f0db;
  color: #2c6e2c;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.badge.public {
  background: #d4e8f7;
  color: #0d5a8a;
}

.attendee-avatars {
  display: flex;
  gap: 0.25rem;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.avatar.alt {
  background: #417eac;
}

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

.actions-spaced {
  margin-top: 0.8rem;
}

.btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 0.62rem 1.1rem;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
}

.btn.btn-sm {
  padding: 0.32rem 0.75rem;
  font-size: 0.78rem;
}

.btn.secondary {
  background: #4d5158;
}

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

label {
  display: block;
  margin: 0.7rem 0 0.3rem;
}

input,
textarea,
select {
  width: 100%;
  padding: 0.6rem 0.65rem;
  border: 1px solid #ccd1d8;
  border-radius: 4px;
}

.msg.success {
  color: #166534;
}

.msg.error {
  color: var(--color-danger);
}

.inline-form {
  display: inline;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

th,
td {
  border: 1px solid #dde2ea;
  padding: 0.5rem;
  text-align: left;
}

/* ========== 6. Events list & filters ========== */

.events-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  align-items: end;
  margin-bottom: 1.5rem;
}

.events-filters .filter-row label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.events-filters .filter-row input,
.events-filters .filter-row select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.events-filters .filter-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.events-grid .event-card .badge.public {
  margin-left: 0.25rem;
}

#events-list-geo {
  display: none;
}

/* ========== 7. Dashboard & calendar ========== */

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1.15fr);
  gap: 1.2rem;
}

.left-col,
.right-col {
  min-width: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.card-header h2 {
  margin: 0;
}

.dash-calendar-shell {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.dash-calendar-sidebar {
  padding: 0;
  overflow: hidden;
}

.dash-calendar-sidebar h3 {
  margin: 0;
  font-size: 0.88rem;
  color: #f97316;
  padding: 0.8rem 0.95rem;
  border-bottom: 1px solid #e6e8eb;
}

.dash-calendar-new {
  margin: 0.9rem;
  width: calc(100% - 1.8rem);
  text-align: center;
  border-radius: 999px;
}

.dash-cal-filter-all {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-top: 1px solid #eef1f4;
  border-bottom: 1px solid #eef1f4;
  font-size: 0.9rem;
}

.dash-cal-filter-list {
  padding: 0.5rem 0.95rem 0.9rem;
}

.dash-cal-filter-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.65rem 0;
  font-size: 0.88rem;
  color: #4b5563;
}

.dash-cal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dash-cal-dot.my {
  background: #8b5cf6;
}

.dash-cal-dot.company {
  background: #0ea5e9;
}

.dash-calendar-main {
  padding: 0.65rem;
}

.dash-calendar-main .fc {
  min-height: 610px;
}

.dash-calendar-main .fc .fc-toolbar {
  padding: 0.3rem 0.35rem 0.55rem;
}

.dash-calendar-main .fc .fc-toolbar-title {
  font-size: 1.75rem;
  font-weight: 600;
}

.dash-calendar-main .fc .fc-button {
  text-transform: capitalize;
}

.dash-calendar-main .fc .fc-daygrid-day-number {
  color: #4b5563;
  text-decoration: none;
}

.dash-calendar-main .fc .fc-col-header-cell-cushion {
  color: #4b5563;
  text-decoration: none;
  font-weight: 600;
}

.dash-calendar-main .fc .fc-day-today {
  background: #f7fbff !important;
}

.dash-calendar-main .fc .fc-daygrid-event {
  border-radius: 3px;
  padding: 1px 3px;
  font-weight: 600;
}

/* ========== 8. Meetup detail ========== */

.meetup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.title-badge {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.meetup-map-card {
  margin-bottom: 1rem;
}

.meetup-map {
  width: 100%;
  min-height: 420px;
  border-radius: 8px;
  border: 1px solid #d7dde5;
  background: #f0f0f0;
}

.detail-grid {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.65rem;
}

.detail-item {
  background: #f6f9fc;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  font-size: 0.92rem;
}

.map-tools {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.radius-chip,
.business-chip {
  background: #f0f5fa;
  border: 1px solid #dbe5ef;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.82rem;
}

.tab-bar {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid #dfe8f2;
  margin-bottom: 0.85rem;
}

.tab {
  font-weight: 700;
  color: #6b7f93;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid transparent;
}

.tab.active {
  color: #1f3f5f;
  border-bottom-color: var(--color-primary);
}

.attendee-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  border-bottom: 1px solid #edf2f7;
  padding: 0.5rem 0;
}

.attendee-main {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.chat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 1px solid #e6edf5;
  padding: 0.45rem 0;
}

.admin-section {
  border-top: 2px dashed #bdd1e6;
  padding-top: 1rem;
}

.admin-group {
  background: #fafcfe;
  border-radius: 12px;
  border: 1px solid #dbe5ef;
  padding: 0.8rem;
  margin-bottom: 0.8rem;
}

.admin-group summary {
  cursor: pointer;
  font-weight: 700;
  margin-bottom: 0.55rem;
}

/* Scheduler */
.schedule-card {
  margin-bottom: 1rem;
}

.scheduler-modal {
  border: none;
  padding: 0;
  background: transparent;
  width: min(1200px, 96vw);
}

.scheduler-modal::backdrop {
  background: rgba(12, 20, 32, 0.5);
}

.scheduler-modal-card {
  margin: 0;
}

.schedule-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.scheduler-help {
  margin: 0.45rem 0 0.8rem;
  color: #667085;
}

.schedule-calendar {
  border: 1px solid #d7dde5;
  border-radius: 8px;
  padding: 0.5rem;
  background: #fff;
}

.simple-scheduler {
  display: grid;
  gap: 0.45rem;
}

.simple-scheduler-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.simple-scheduler-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #506176;
  font-weight: 700;
}

.simple-scheduler-weekdays span {
  text-align: center;
  padding: 0.2rem 0;
}

.simple-scheduler-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.simple-scheduler-cell {
  min-height: 94px;
  border: 1px solid #d9e2ed;
  background: #fff;
  border-radius: 8px;
  text-align: left;
  padding: 0.35rem;
  cursor: pointer;
  overflow: auto;
}

.simple-scheduler-cell.muted {
  background: #f8fafc;
  color: #95a2b2;
}

.simple-scheduler-cell.today {
  border-color: var(--color-primary);
  background: #f4faea;
}

.simple-scheduler-cell .day-number {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.simple-scheduler-badge {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  background: #198fca;
  color: #fff;
  border-radius: 6px;
  padding: 0.12rem 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-calendar-expanded {
  position: fixed;
  inset: 2rem;
  z-index: 1500;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.scheduler-dialog {
  border: 1px solid #cfd5df;
  border-radius: 8px;
  padding: 0;
}

.scheduler-dialog-form {
  padding: 1rem;
  min-width: 320px;
}

.fc .fc-toolbar-title {
  font-size: 1.45rem;
  color: #3f4b5b;
}

.fc .fc-button-primary {
  background: #198fca;
  border-color: #198fca;
}

.fc .fc-button-primary:disabled {
  background: #6aa6c2;
  border-color: #6aa6c2;
}

.fc .fc-daygrid-event {
  border-radius: 2px;
  font-weight: 600;
}

/* Map panels & markers */
.map-business-panel {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 800;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccd3dc;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  max-width: 260px;
}

.map-business-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.map-circle-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 800;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccd3dc;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  width: 220px;
}

.map-circle-row {
  display: block;
  margin: 0.35rem 0 0.2rem;
  font-size: 0.85rem;
}

.map-circle-panel input[type="range"] {
  width: 100%;
}

.circle-center-marker {
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-center-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c62828;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.business-marker {
  display: flex;
  align-items: center;
  justify-content: center;
}

.business-marker-icon {
  font-size: 0.95rem;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

.business-marker-cafe .business-marker-icon { color: #8b5e34; }
.business-marker-library .business-marker-icon { color: #5d6d7e; }
.business-marker-restaurant .business-marker-icon { color: #b03a2e; }
.business-marker-bar .business-marker-icon { color: #7d3c98; }
.business-marker-parking .business-marker-icon { color: #1f618d; }
.business-marker-pharmacy .business-marker-icon { color: #1e8449; }
.business-marker-bank .business-marker-icon { color: #7e5109; }
.business-marker-supermarket .business-marker-icon { color: #af601a; }

/* ========== 9. Create wizard ========== */

.wizard-card {
  background: #fff;
  max-width: 480px;
  margin: 0 auto;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  position: relative;
}

.wizard-progress {
  height: 6px;
  background: #eee;
  border-radius: 5px;
  margin-bottom: 24px;
  overflow: hidden;
}

.wizard-progress-bar {
  height: 100%;
  width: 0%;
  background: #667eea;
  transition: 0.3s ease;
}

#wizardProgress.step-1 .wizard-progress-bar { width: 0%; }
#wizardProgress.step-2 .wizard-progress-bar { width: 16%; }
#wizardProgress.step-3 .wizard-progress-bar { width: 33%; }
#wizardProgress.step-4 .wizard-progress-bar { width: 50%; }
#wizardProgress.step-5 .wizard-progress-bar { width: 66%; }
#wizardProgress.step-6 .wizard-progress-bar { width: 83%; }
#wizardProgress.step-7 .wizard-progress-bar { width: 100%; }

.event-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.event-type-card {
  background: #fff;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.event-type-card:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.event-type-card.selected {
  border-color: #667eea;
  background: #f8f9ff;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.event-type-card .card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border-radius: 10px;
}

.event-type-card .card-icon.public { background: linear-gradient(135deg, #c4a35a 0%, #b8954a 100%); }
.event-type-card .card-icon.group { background: linear-gradient(135deg, #c4a35a 0%, #b8954a 100%); }
.event-type-card .card-icon.signup { background: linear-gradient(135deg, #2d6a4f 0%, #1b4332 100%); }
.event-type-card .card-icon.one-to-one { background: linear-gradient(135deg, #40916c 0%, #2d6a4f 100%); }
.event-type-card .card-icon.booking { background: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%); }

.event-type-card .card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #333;
  margin: 0 0 6px 0;
}

.event-type-card .card-badge {
  display: inline-block;
  background: #7c3aed;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.event-type-card .card-desc {
  font-size: 0.8rem;
  color: #666;
  line-height: 1.35;
  margin: 0;
}

.wizard-step {
  display: none;
  text-align: left;
}

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

.wizard-step h2 {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  color: #333;
}

.wizard-step .form-group {
  margin-bottom: 1rem;
}

.wizard-step label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.wizard-step input[type="text"],
.wizard-step input[type="number"],
.wizard-step input[type="datetime-local"],
.wizard-step select,
.wizard-step textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
}

.wizard-step textarea {
  min-height: 100px;
  resize: vertical;
}

.wizard-step .hint {
  font-size: 0.85rem;
  color: #666;
  margin: 0.25rem 0 0 0;
}

.wizard-step .hint.hint-top {
  margin-bottom: 12px;
}

.wizard-step .series-options {
  margin-top: 1rem;
  padding-left: 0;
}

.wizard-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  gap: 12px;
}

.wizard-buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.wizard-prev {
  background: #e0e0e0;
  color: #333;
}

.wizard-prev:hover {
  background: #d0d0d0;
}

.wizard-next {
  background: #667eea;
  color: white;
}

.wizard-next:hover {
  background: #5a6fd6;
}

.wizard-submit {
  background: #2c6e2c;
  color: white;
}

.wizard-submit:hover {
  background: #255a25;
}

.wizard-summary {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.6;
}

.wizard-summary p {
  margin: 0.5rem 0;
}

.wizard-summary strong {
  color: #333;
}

.create-wizard-card {
  max-width: 540px;
}

.hidden {
  display: none !important;
}

.create-error {
  margin-bottom: 1rem;
  padding: 10px 12px;
  background: #fde8e8;
  color: var(--color-danger);
  border-radius: 6px;
  font-size: 0.9rem;
}

.create-message {
  margin-bottom: 1rem;
  padding: 10px 12px;
  background: #e7f0db;
  color: #2c6e2c;
  border-radius: 6px;
  font-size: 0.9rem;
}

.wizard-submit-full {
  width: 100%;
  margin-top: 16px;
}

/* ========== 10. Landing / Hero ========== */

.landing-section-alt {
  background: #f8fafc;
}

.landing-step-num {
  display: inline-block;
  width: 48px;
  height: 48px;
  background: #333;
  color: #fff;
  border-radius: 50%;
  line-height: 48px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 15px;
}

.landing-card {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.landing-pricing-box {
  padding: 40px;
  border: 2px solid #333;
  border-radius: 12px;
}

.landing-cta-section {
  background: var(--color-bg);
}

.hero-splash {
  min-height: 500px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%);
}

.hero-copy h1 {
  font-size: 3rem;
  margin: 0 0 0.7rem;
  color: #4d4f55;
  line-height: 1.05;
}

.hero-copy h1 span {
  color: var(--color-primary);
  display: block;
}

.hero-copy p {
  margin-bottom: 1.2rem;
}

.hero-art {
  position: relative;
  min-height: 360px;
}

.hero-circle {
  position: absolute;
  width: 320px;
  height: 320px;
  right: 30px;
  top: 10px;
  background: radial-gradient(circle, #c5e09f 0%, #9fd268 55%, #7ab93d 100%);
  border-radius: 50%;
  opacity: 0.82;
}

.hero-card {
  position: absolute;
  right: 0;
  bottom: 28px;
  background: #fff;
  border-left: 5px solid var(--color-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  padding: 1rem 1.1rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #4b4f58;
}

/* ========== 11. Utilities ========== */

.user-sessions-form-inline,
.mobile-logout-form {
  display: inline;
}

.mfa-qr,
.qr {
  max-width: 240px;
}

/* ========== 12. Media queries ========== */

@media (max-width: 760px) {
  .topbar-inner {
    justify-content: flex-start;
  }
  .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem;
  }
  .nav-links {
    flex-wrap: wrap;
  }
  .nav-links a {
    border: 1px solid #ececec;
    min-height: auto;
    padding: 0.45rem 0.7rem;
  }
  .hero-splash {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-copy h1 {
    font-size: 2.2rem;
  }
  .hero-art {
    min-height: 240px;
  }
  .dash-calendar-shell {
    grid-template-columns: 1fr;
  }
  .hero-circle {
    width: 220px;
    height: 220px;
    left: 0;
    right: auto;
  }
}

@media (max-width: 767px) {
  .footer-letsmeet .footer-newsletter .footer-newsletter-form {
    flex-direction: column;
  }
  .footer-letsmeet .footer-newsletter button {
    width: 100%;
  }
}