/* ─── CSS Variables ─────────────────────────────────────────── */
:root {
  /* Brand greens */
  --green: #1e8e3e;
  --green-light: #27a34d;
  --green-dark: #2a5c44;
  --green-medium: #3d8c60;

  /* Accent */
  --orange: #f4842c;

  /* Text */
  --text-dark: #1a1a1a;
  --text-mid: #5f6368;
  --text-medium: #555;
  --text-light: #888;

  /* UI */
  --white: #ffffff;
  --border: #e0ddd4;
  --bg-main: #fffdf7;
  --bg: #fffdf7;

  /* Navbar */
  --navbar-h: 84px;

  /* Elevation */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Layout */
  --container: 1180px;
}

/* ─── Reset ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #fffdf7;
  color: var(--text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

button {
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* ─── Utility classes ────────────────────────────────────────── */
.container {
  width: 100%;
  padding: 0 48px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--green-dark);
  color: var(--white);
  border: none;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 700;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: var(--green);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: transparent;
  color: var(--text-dark);
  border: 1.5px solid var(--text-dark);
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 700;
  transition: background 0.2s;
}

.btn-outline:hover {
  background: rgba(0, 0, 0, 0.04);
}

.section-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-dark);
}

/* All sections inside .content-card must use this on their inner wrapper
   to align with the 54px (section) + 48px (inner) = 102px grid */
.section-inner {
  padding: 0 48px;
}

/* ─── Responsive breakpoints ─────────────────────────────────── */
@media (max-width: 1024px) {
  .container {
    padding: 0 32px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}
/* ═══════════════════════════════════════════════════════════════
   custom.css — component-level styles
   ═══════════════════════════════════════════════════════════════ */

/* ─── Navbar ─────────────────────────────────────────────────── */
.navbar {
  background-color: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-h);
  padding: 8px 54px;
}

/* ── Logo ── */
.navbar__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar__logo-img {
  width: 190px;
  height: 64px;
  display: block;
  object-fit: contain;
}

/* ── Nav links ── */
.navbar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar__nav a {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: var(--text-medium);
  padding: 6px 16px;
  border-radius: 12px;
  transition: color 0.2s, background 0.2s, transform 0.2s;
  white-space: nowrap;
  position: relative;
}

.navbar__nav a:hover {
  color: var(--text-dark);
  background: rgba(93, 174, 97, 0.1);
}

.navbar__nav a.active {
  color: var(--green-dark);
  position: relative;
}

.navbar__nav a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 14px;
  right: 14px;
  height: 2px;
  background-color: var(--green-dark);
  border-radius: 2px;
}

/* ── Actions ── */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  height: 45px;
}

/* Shared button base */
.navbar__lang,
.navbar__login,
.navbar__signup {
  height: 45px;
  width: 103.5px;
  padding: 9px 27px;
  border-radius: 18px;
  border: 2.25px solid #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 20.25px;
  font-weight: 400;
  line-height: 31.5px;
  letter-spacing: 0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.navbar__lang {
  width: auto;
  max-width: 240px;
  padding: 9px 14px;
  color: var(--text-dark);
  background: transparent;
  overflow: hidden;
}

.navbar__lang:hover {
  background: #f5f5f5;
}

.navbar__lang svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.navbar__lang span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar__login {
  color: var(--text-dark);
  background: transparent;
}

.navbar__login:hover {
  background: var(--text-dark);
  color: var(--white);
}

.navbar__signup {
  width: 114.5px;
  color: var(--white);
  background: #5dae61;
  border-color: #1a1a1a;
}

.navbar__signup:hover {
  background: #4a9a4e;
}

.navbar__user-wrap {
  position: relative;
}

.navbar__user-box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 45px;
  padding: 0 14px 0 6px;
  border: 2.25px solid #1a1a1a;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.navbar__user-box:hover,
.navbar__user-box.is-open {
  background: #f5f5f5;
  border-color: #5dae61;
}

.navbar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5dae61;
  color: #fff;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.navbar__user-name {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: var(--text-dark);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar__user-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-dark);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.navbar__user-box.is-open .navbar__user-chevron {
  transform: rotate(180deg);
}

.navbar__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: #ffffff;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  z-index: 500;
}

.navbar__dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  color: var(--text-dark);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}

.navbar__dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.navbar__dropdown-item:hover {
  background: #f5f5f5;
}

.navbar__dropdown-item--logout {
  color: #dc2626;
}

.navbar__dropdown-item--logout:hover {
  background: #fef2f2;
}

/* ─── Hero ───────────────────────────────────────────────────── */
.hero {
  min-height: 580px;
  background: #fffdf7;
  margin: 0 54px;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
}

.hero__inner {
  min-height: 580px;
  display: flex;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.hero__content {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 40px 0 54px;
  min-height: 580px;
  box-sizing: border-box;
}

.hero__heading {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 64px;
  line-height: 66.46px;
  letter-spacing: -1.06px;
  color: var(--text-dark);
  margin-bottom: 4px;
  max-width: 464px;
  width: 100%;
}

.hero__heading-accent {
  color: #5DAE61;
  position: relative;
  display: inline-block;
}

.hero__heading-underline {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 370px;
  height: 12px;
  display: block;
}

.hero__subheading {
  display: flex;
  align-items: center;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 28px;
  letter-spacing: 0px;
  color: var(--text-dark);
  white-space: normal;
  height: auto;
  margin: 18px 0 8px;
}

.hero__heading-sub-line {
  display: flex;
  align-items: center;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: 0px;
  color: var(--text-dark);
  white-space: normal;
  height: auto;
}

.hero__subheading-icon {
  flex-shrink: 0;
  display: block;
  align-self: flex-start;
  margin-top: -14px;
  margin-right: 6px;
  margin-left: -32px;
}

.hero__description {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #40493e;
  max-width: 418px;
  width: 100%;
  margin-bottom: 28px;
}

.hero__ctas {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}

.hero__btn-primary,
.hero__btn-secondary {
  flex: 1;
  line-height: 1;
  box-sizing: border-box;
}

.hero__btn-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.hero__btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  background: #5dae61;
  color: var(--white);
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 4px 4px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.hero__btn-primary:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

.hero__btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  background: #ffffff;
  color: var(--text-dark);
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 4px 4px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.hero__btn-secondary:hover {
  background: #f5f5f5;
  box-shadow: 2px 2px 0px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

.hero__trust {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}

.hero__trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 120px;
  height: 53px;
}

.hero__trust-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.hero__trust-text {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dark);
}

.hero__trust-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
  line-height: 1.4;
}

/* ── Hero stats bar ── */
.hero__stats {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 54px 28px;
  flex-wrap: nowrap;
}

.hero__stat-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 16px;
  height: 76px;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0px 4px 20px 0px #0000000F;
}

.hero__stat-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.hero__stat-icon[src="/latvia-flag.svg"] {
  width: 48px;
  height: 48px;
}

.hero__stat-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.hero__stat-value {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 22.5px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--text-dark);
  white-space: nowrap;
}

.hero__stat-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-light);
  white-space: nowrap;
}

.hero__video-wrap {
  flex: 1;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 20px;
}

/* ── Hero responsive ── */
@media (max-width: 1280px) {
  .hero { margin: 0 40px; }
  .hero__heading { font-size: 52px; line-height: 1.1; }
  .hero__subheading { font-size: 26px; }
  .hero__content { padding: 0 24px 0 40px; }
  .hero__trust-icon { width: 30px; height: 30px; }
  .hero__trust-text { font-size: 13px; }
}

@media (max-width: 1100px) {
  .hero { margin: 0 24px; }
  .hero__heading { font-size: 44px; }
  .hero__subheading { font-size: 22px; }
  .hero__description { font-size: 14px; }
  .hero__content { padding: 0 20px 0 28px; }
  .hero__btn-primary, .hero__btn-secondary { font-size: 16px; padding: 12px 22px; }
  .hero__trust { gap: 8px; }
  .hero__trust-icon { width: 28px; height: 28px; }
  .hero__trust-item { height: auto; min-height: 44px; gap: 8px; }
  .hero__trust-text { font-size: 12px; line-height: 17px; }
  .hero__trust-sub { font-size: 10px; white-space: nowrap; }
  .hero__stats { padding: 0 28px 24px; gap: 10px; }
  .hero__stat-card { padding: 12px 10px; gap: 8px; }
  .hero__stat-icon { width: 42px; height: 42px; }
  .hero__stat-value { font-size: 18px; }
}

@media (max-width: 960px) {
  .hero { margin: 0 16px; }
  .hero__content { flex: 0 0 52%; }
  .hero__video-wrap { flex: 0 0 36%; }
  .hero__heading { font-size: 36px; }
  .hero__subheading { font-size: 19px; }
  .hero__btn-primary, .hero__btn-secondary { font-size: 15px; padding: 11px 20px; }
  .hero__trust-text { font-size: 11px; }
  .hero__trust-sub { font-size: 10px; }
  .hero__stats { padding: 0 24px 24px; gap: 8px; }
  .hero__stat-card { padding: 10px 12px; gap: 8px; }
  .hero__stat-icon { width: 40px; height: 40px; }
  .hero__stat-value { font-size: 15px; }
}

@media (max-width: 768px) {
  .hero { margin: 0 12px; border-radius: 24px; }
  .hero__inner { padding-right: 0; min-height: unset; flex-direction: column; }
  .hero__content { flex: 1; width: 100%; padding: 28px 20px 20px; min-height: unset; }
  .hero__video-wrap { display: none; }

  /* Heading */
  .hero__heading { font-size: 26px; line-height: 1.3; max-width: 100%; letter-spacing: -0.3px; white-space: normal; }
  .hero__heading-accent { display: inline-block; position: relative; }
  .hero__heading-underline { position: absolute; width: 100%; left: 0; bottom: -4px; height: 10px; }
  .hero__heading-sub-line { font-size: 18px; line-height: 1.4; margin-top: 6px; }
  .hero__subheading-icon { margin-left: 0; margin-top: 0; width: 20px; height: 20px; }

  /* Description */
  .hero__description { font-size: 13px; line-height: 1.6; max-width: 100%; margin-bottom: 20px; }

  /* Buttons — stack full width */
  .hero__ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; margin-bottom: 24px; }
  .hero__btn-primary, .hero__btn-secondary {
    width: 100%; font-size: 16px;
    padding: 12px 16px; white-space: normal;
    justify-content: center;
  }

  /* Trust badges — all 3 in one row */
  .hero__trust { flex-wrap: nowrap; gap: 10px; }
  .hero__trust-item { flex: 1; min-width: 0; height: auto; }
  .hero__trust-text { font-size: 12px; }
  .hero__trust-sub { font-size: 11px; }

  /* Stats — 2 per row */
  .hero__stats { padding: 0 12px 20px; gap: 8px; flex-wrap: wrap; }
  .hero__stat-card { flex: 1 1 calc(50% - 8px); min-width: 140px; height: 64px; gap: 10px; padding: 8px 12px; }
  .hero__stat-icon { width: 32px; height: 32px; }
  .hero__stat-icon[src="/latvia-flag.svg"] { width: 44px; height: 44px; }
  .hero__stat-value { font-size: 15px; }
  .hero__stat-label { font-size: 11px; }
}

@media (max-width: 460px) {
  /* Trust badges — stack full width on very small screens */
  .hero__trust { flex-wrap: wrap; gap: 8px; }
  .hero__trust-item { flex: 0 0 100%; }
}

/* ─── Shared content card (Categories + HowItWorks) ─────────── */
.content-card {
  background: #ffffff;
  border-radius: 32px;
  margin: 0 54px 64px;
  overflow: hidden;
}

/* ─── Categories ─────────────────────────────────────────────── */
.categories {
  padding: 48px 54px 56px;
}

.categories__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.categories__title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 33.75px;
  line-height: 40.5px;
  letter-spacing: 0px;
  color: var(--text-dark);
  white-space: nowrap;
  height: 41px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.categories__title-star {
  display: block;
  flex-shrink: 0;
  transform: rotate(120deg);
  align-self: flex-start;
  margin-top: -6px;
  margin-left: -10px;
}

.categories__view-all {
  font-size: 14px;
  font-weight: 700;
  color: var(--green-medium);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}

.categories__view-all:hover {
  gap: 8px;
}

.categories__grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 14px;
  padding-top: 8px;
  padding-bottom: 4px;
  margin-top: -8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.categories__grid::-webkit-scrollbar {
  display: none;
}

.category-card {
  background: var(--white);
  border: 2.25px solid #1a1a1a;
  border-radius: 27px;
  padding: 18px 18px 14px;
  flex: 1 1 150px;
  min-width: 150px;
  min-height: 207px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}

.category-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.category-card__icon-wrap {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.category-card__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: bottom;
}

.category-card__name {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 20px;
  line-height: 22.5px;
  letter-spacing: 0px;
  text-align: center;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.category-card__desc {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14.06px;
  letter-spacing: 0px;
  text-align: center;
  color: #6b7280;
  width: 100%;
}

.category-card--coming-soon {
  position: relative;
  cursor: default;
}

.category-card--coming-soon:hover {
  transform: none;
  box-shadow: none;
}

.category-card__coming-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #f4842c;
  color: #fff;
  font-family: 'Caveat Brush', cursive;
  font-size: 13px;
  padding: 2px 10px;
  border: 2px solid #1a1a1a;
  border-radius: 20px;
  box-shadow: 2px 2px 0 #1a1a1a;
  line-height: 1.4;
}

/* ─── Categories responsive ─────────────────────────────────── */

@media (max-width: 1024px) {
  .categories {
    padding: 40px 32px 48px;
  }
}

@media (max-width: 768px) {
  .categories {
    padding: 32px 20px 40px;
  }
  .categories__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
  }
  .categories__title {
    white-space: normal;
    height: auto;
    font-size: 28px;
    line-height: 1.2;
  }
  .category-card {
    padding: 14px 12px 12px;
  }
  .category-card__icon-wrap {
    height: 80px;
  }
}

@media (max-width: 520px) {
  .categories {
    padding: 24px 16px 32px;
  }
  .category-card {
    flex: 0 0 130px;
    width: 130px;
    min-height: 180px;
    padding: 16px 12px 14px;
  }
}

/* ─── What is 1 Euro Pass ────────────────────────────────────── */
.wip {
  padding: 80px 102px 0;
}

.wip__main {
  display: flex;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 40px;
}

/* Left */
.wip__left {
  flex: 0 0 38%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wip__eyebrow {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 4px;
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0px;
  color: #5DAE61;
  position: relative;
}

.wip__eyebrow-deco {
  width: 32px;
  height: 32px;
  object-fit: contain;
  position: absolute;
  top: -18px;
}

.wip__eyebrow-deco--left {
  left: -26px;
}

.wip__eyebrow-deco--right {
  right: -26px;
  transform: scaleX(-1);
}

.wip__eyebrow-line {
  width: 180px;
  height: 12px;
  opacity: 1;
}

.wip__heading {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-style: normal;
  font-size: 33.75px;
  line-height: 40px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--text-dark);
  margin: 0;
  max-width: 501px;
}

.wip__heading-deco {
  display: inline;
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: top;
  margin-left: 4px;
  position: relative;
  top: -6px;
}

.wip__desc {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #40493E;
  max-width: 460px;
  margin: 0;
}

.wip__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wip__bullet {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #6B7280;
}

.wip__bullet-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.wip__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.wip__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 4px 4px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.wip__btn-primary:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

.wip__btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #fff;
  color: var(--text-dark);
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 4px 4px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.2s, transform 0.2s;
}

.wip__btn-secondary:hover {
  box-shadow: 2px 2px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

.wip__play {
  font-size: 12px;
}

/* Right */
.wip__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0px;
  min-width: 0;
}

.wip__illustration {
  width: 680px;
  height: 360px;
  object-fit: contain;
  display: block;
  margin-left: 6px;
  margin-top: -40px;
}

.wip__mini-cats {
  display: flex;
  gap: 30px;
}

.wip__mini-card {
  background: #FFFFFF;
  border: 2px solid #EDEFF0;
  border-radius: 32px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 154px;
  height: 149px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0px 4px 20px 0px #0000000F;
}

.wip__mini-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.wip__mini-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-dark);
  margin: 0;
}

.wip__mini-sub {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: var(--text-light);
  margin: 0;
  line-height: 1.4;
}

/* Bottom feature strip */
.wip__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-bottom: 56px;
}

.wip__feature-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #FFFFFF;
  border: 2px solid #181D17;
  border-radius: 12px;
  padding: 16px;
  width: 302px;
  height: 74px;
  box-sizing: border-box;
  box-shadow: 0px 4px 20px 0px #0000000F;
}

.wip__feature-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.wip__feature-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-dark);
  margin: 0 0 2px;
}

.wip__feature-sub {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: var(--text-light);
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .wip { padding: 48px 72px 0; }
  .wip__mini-cats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .wip { padding: 32px 20px 0; }
  .wip__main { flex-direction: column; gap: 24px; }
  .wip__left { flex: 1; }
  .wip__illustration { width: 100%; height: auto; margin: 0; }

  /* Mini category cards — 2×2 grid */
  .wip__mini-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .wip__mini-card { width: auto; height: auto; min-height: 120px; padding: 14px; border-radius: 20px; }
  .wip__mini-icon { width: 32px; height: 32px; }
  .wip__mini-title { font-size: 12px; }
  .wip__mini-sub { font-size: 10px; }

  /* Feature strip — 1 col */
  .wip__features { grid-template-columns: 1fr; gap: 10px; }
  .wip__feature-card { width: auto; height: auto; }
}

/* ─── How It Works ───────────────────────────────────────────── */
.how-it-works {
  padding: 0 54px 64px;
}

.how-it-works__inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

.how-it-works__left {
  flex: 1;
  min-width: 0;
}

.how-it-works__title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 33.75px;
  line-height: 40.5px;
  letter-spacing: 0px;
  color: var(--text-dark);
  margin-bottom: 40px;
}

.how-it-works__steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: nowrap;
}

.how-it-works__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 0;
}

.how-it-works__step-icon-wrap {
  position: relative;
  margin-bottom: 12px;
}

.how-it-works__step-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.how-it-works__step-badge {
  position: absolute;
  top: -28px;
  right: 55px;
  width: 36px;
  height: 36px;
  background: #5dae61;
  border: 2.25px solid #1a1a1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  text-align: center;
  color: #ffffff;
}

.how-it-works__step-name {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0px;
  text-align: center;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.how-it-works__step-desc {
  font-size: 11.5px;
  color: var(--text-light);
  font-weight: 500;
  line-height: 1.5;
}

.how-it-works__arrow {
  font-size: 20px;
  color: var(--text-light);
  margin-top: 22px;
  flex-shrink: 0;
  padding: 0 4px;
}


.how-it-works__pricing {
  background: #f4f9f4;
  border-radius: 27px;
  padding: 20px 44px;
  width: 600px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  margin: 0 48px;
  overflow: visible;
}

.pricing__header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
}

.pricing__price-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pricing__coin-img {
  width: 120px;
  height: 100px;
  object-fit: contain;
  position: absolute;
  top: -15px;
  right: 24px;
  transform: rotate(20deg);
}

.pricing__header-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.pricing__title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 33.75px;
  line-height: 40.5px;
  letter-spacing: 0px;
  color: var(--text-dark);
  white-space: nowrap;
}

.pricing__price {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 64px;
  line-height: 54px;
  letter-spacing: 0px;
  color: #5dae61;
  width: 51px;
  height: 54px;
  display: inline-block;
  vertical-align: middle;
}

.pricing__price-sub {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 33.75px;
  line-height: 40.5px;
  letter-spacing: 0px;
  color: var(--text-dark);
}

.pricing__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}

.pricing__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22.5px;
  letter-spacing: 0px;
  color: #1a1a1a;
}

.pricing__arrow-doodle {
  width: 100px;
  height: 120px;
  object-fit: contain;
  position: absolute;
  right: 0px;
  top: 65%;
  transform: translateY(-50%);
  pointer-events: none;
}

.pricing__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.pricing__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 85%;
  padding: 10px 24px;
  background: #5dae61;
  color: var(--white);
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 3px 3px 0px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 20.25px;
  font-weight: 400;
  line-height: 31.5px;
  letter-spacing: 0px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.pricing__cta:hover {
  background: #4a9a4e;
  box-shadow: 1px 1px 0px 0px #1a1a1a;
  transform: translate(2px, 2px);
}


/* ─── Ready To Explore ───────────────────────────────────────── */
.rte {
  padding: 56px 102px 64px;
}

.rte__inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.rte__left {
  flex: 0 0 48%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rte__heading {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 64px;
  line-height: 66.46px;
  letter-spacing: -1.06px;
  color: var(--text-dark);
  margin: 0;
}

.rte__heading-accent {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  color: #5dae61;
  position: relative;
  display: inline-block;
}

.rte__heading-underline {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 12px;
  display: block;
}

.rte__desc {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 22.5px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #1A1A1A;
  max-width: 567px;
  margin: 0;
}

.rte__features {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.rte__feature-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 120px;
}

.rte__feature-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.rte__feature-text {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #1A1A1A;
  max-width: 128px;
}

.rte__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.rte__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 4px 4px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.rte__btn-primary:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

.rte__btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: #fff;
  color: var(--text-dark);
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 4px 4px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.2s, transform 0.2s;
}

.rte__btn-secondary:hover {
  box-shadow: 2px 2px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

.rte__social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rte__avatars {
  width: 220px;
  height: 80px;
  object-fit: contain;
}

.rte__social-text {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #6B7280;
  max-width: 180px;
  line-height: 1.4;
}

.rte__right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rte__illustration {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 380px;
  display: block;
  image-rendering: crisp-edges;
}

@media (max-width: 1024px) {
  .rte { padding: 48px 72px 56px; }
}

@media (max-width: 768px) {
  .rte { padding: 40px 32px 48px; }
  .rte__inner { flex-direction: column; }
  .rte__left { flex: 1; }
  .rte__right { display: none; }
}

/* ─── Reach Section ──────────────────────────────────────────── */
.reach {
  padding: 0 54px 64px;
}

.reach__inner {
  display: flex;
  align-items: center;
  gap: 8px;
}


.reach__left {
  flex: 0 0 auto;
  min-width: 0;
  padding-left: 48px;
}

.reach__map {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Left */
.reach__heading {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 42px;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 24px;
}

.reach__heading-accent {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: #5dae61;
  font-style: italic;
}

.reach__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 32px;
}

.reach__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22.5px;
  letter-spacing: 0px;
  color: #1a1a1a;
  width: 275px;
}

.reach__list li::before {
  content: '';
  width: 20px;
  height: 20px;
  min-width: 20px;
  background-image: url('/cil_check.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-top: 2px;
  flex-shrink: 0;
}

.reach__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 32px;
  width: fit-content;
  background: #5dae61;
  color: var(--white);
  border: 2.25px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 4px 4px 0px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 20.25px;
  font-weight: 400;
  line-height: 31.5px;
  letter-spacing: 0px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.reach__cta:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

/* Middle — Map */
.reach__map-img {
  width: 100%;
  max-width: 750px;
  object-fit: contain;
}

.reach__map-center {
  position: absolute;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.reach__map-euro {
  width: 54px;
  height: 54px;
  background: #5dae61;
  border: 2.25px solid #1a1a1a;
  border-radius: 50%;
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reach__map-text {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-dark);
  text-align: center;
}

.reach__map-accent {
  color: #5dae61;
  font-family: 'Caveat', cursive;
  font-size: 18px;
  font-weight: 700;
}

/* Right — Stats card */
.reach__card {
  background: var(--white);
  border: 2.25px solid #1a1a1a;
  border-radius: 27px;
  padding: 28px;
  position: relative;
  width: 310px;
  height: 360px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: visible;
}

.reach__card-star {
  position: absolute;
  top: -14px;
  right: 20px;
  width: 28px;
  height: 28px;
  transform: rotate(30deg);
}

.reach__card-doodle {
  position: absolute;
  top: -40px;
  right: -85px;
  left: auto;
  transform: none;
  width: 120px;
  object-fit: contain;
  pointer-events: none;
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0%, 100% { border-color: transparent; }
  50% { border-color: var(--text-dark); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.reach__card-title {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
}

.reach__card-title-l1 {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 2px solid transparent;
}

.reach__card-title-l2 {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 2px solid transparent;
}

.reach__stat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  opacity: 0;
}

/* Animations fire only when card is in view */
.reach__card.is-visible .reach__card-title-l1 {
  animation: typewriter 0.6s steps(10) 0.2s forwards,
             blink 0.5s step-end 0.2s 2 forwards;
}

.reach__card.is-visible .reach__card-title-l2 {
  animation: typewriter 1s steps(20) 1s forwards,
             blink 0.5s step-end 1s 3;
}

.reach__card.is-visible .reach__stat { animation: fadeInUp 0.4s ease forwards; }
.reach__card.is-visible .reach__stat:nth-child(1) { animation-delay: 2.2s; }
.reach__card.is-visible .reach__stat:nth-child(2) { animation-delay: 2.7s; }
.reach__card.is-visible .reach__stat:nth-child(3) { animation-delay: 3.2s; }

.reach__stats {
  display: flex;
  flex-direction: column;
  gap: 29px;
}


.reach__stat-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reach__stat-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.reach__stat-name {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 20px;
  color: var(--text-dark);
  line-height: 1.2;
}

.reach__stat-desc {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.4;
}

/* ══════════════════════════════════════════
   Contact Us Page
══════════════════════════════════════════ */

/* Hero */
.contact-hero {
  display: flex;
  align-items: stretch;
  background: #fffdf7;
  margin: 0 0 0 54px;
  border-radius: 32px 0 0 32px;
  overflow: hidden;
}
.contact-hero__left {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 48px 0 48px 41px;
}
.contact-hero__title {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 64px;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.04;
  letter-spacing: -1.06px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.contact-hero__doodle { width: 53px; height: 86px; flex-shrink: 0; transform: scaleX(-1); }
.contact-hero__subtitle {
  font-family: 'Baloo 2', cursive;
  font-weight: 500;
  font-size: 32px;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.2;
}
.contact-hero__body {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.6;
}
.contact-hero__image { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.contact-hero__img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }

/* Content card */
.contact-card {
  background: #fff;
  border-radius: 32px;
  margin: 0 54px 64px;
  padding: 48px 54px;
}

/* Form / categories layout */
.contact-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; margin-bottom: 40px; }

/* Form */
.contact-form-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.contact-form-title { font-family: 'Caveat', cursive; font-weight: 700; font-size: 33px; color: #1a1a1a; margin: 0; line-height: 1.2; }
.contact-form-sub { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 500; color: #888; margin: 2px 0 0; }
.contact-form { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.contact-form__label { font-family: 'Caveat Brush', cursive; font-size: 24px; font-weight: 400; color: #1a1a1a; line-height: 1.2; margin-bottom: 5px; display: block; }
.contact-input {
  width: 100%;
  padding: 10px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  outline: none;
  box-sizing: border-box;
}
.contact-select { appearance: none; padding-right: 36px; }
.contact-select-wrap { position: relative; }
.contact-select-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.contact-textarea { resize: vertical; min-height: 120px; }
.contact-form__error { background: #fff0f0; border: 1.5px solid #e53e3e; border-radius: 10px; padding: 10px 14px; font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 600; color: #c53030; }
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  cursor: pointer;
}
.contact-form__submit:disabled { cursor: not-allowed; }
.contact-success { background: #f0faf0; border: 1.5px solid #5dae61; border-radius: 18px; padding: 40px 32px; text-align: center; margin-top: 32px; }

/* Categories */
.contact-cats { display: flex; flex-direction: column; gap: 12px; }
.contact-cat { text-decoration: none; display: flex; align-items: center; gap: 14px; min-height: 89px; padding: 10px; background: #fff; border: 1px solid #E1EADF; border-radius: 16px; box-sizing: border-box; }
.contact-cat__icon { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; }
.contact-cat__content { flex: 1; }
.contact-cat__title { font-family: 'Caveat Brush', cursive; font-size: 24px; color: #1a1a1a; line-height: 1.2; margin-bottom: 2px; }
.contact-cat__desc { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 500; color: #888; line-height: 1.5; }
.contact-cat__email { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700; color: #5dae61; margin-top: 2px; }

/* FAQ card */
.contact-faq {
  margin-top: 20px;
  background: #F8F5EE;
  border: 1.13px solid #EBE4D5;
  border-radius: 36px;
  padding: 24px 28px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 215px;
}
.contact-faq__inner { max-width: 62%; }
.contact-faq__header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.contact-faq__heading { font-family: 'Caveat Brush', cursive; font-size: 24px; color: #1a1a1a; line-height: 1.2; }
.contact-faq__body { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 500; color: #888; margin: 0 0 14px; line-height: 1.6; }
.contact-faq__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: transparent; border: 2.25px solid #1a1a1a; border-radius: 12px; font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700; color: #1a1a1a; text-decoration: none; }
.contact-faq__deco { position: absolute; bottom: 0; right: 20px; height: 120px; width: auto; object-fit: contain; pointer-events: none; }

/* Company banner */
.contact-company { background: #F4F0FA; border: 1.13px solid #E9E1F5; border-radius: 18px; display: flex; align-items: center; gap: 24px; box-sizing: border-box; overflow: hidden; }
.contact-company__side { flex-shrink: 0; align-self: stretch; width: auto; object-fit: cover; }
.contact-company__center { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 27px 0; }

/* Trust */
.contact-trust { padding-top: 40px; }
.contact-trust__box { background: #5DAE6133; border: 1px solid #6b7280; border-radius: 16px; padding: 27px 16px; }
.contact-trust__heading { font-family: 'Caveat', cursive; font-weight: 700; font-size: 33px; color: #1a1a1a; text-align: center; margin: 0 0 32px; }
.contact-trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.contact-trust__item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.contact-trust__icon { width: 90px; height: 90px; object-fit: contain; }
.contact-trust__title { font-family: 'Caveat Brush', cursive; font-size: 24px; color: #1a1a1a; line-height: 1.2; }
.contact-trust__desc { font-family: 'Nunito', sans-serif; font-weight: 500; font-size: 14px; color: #6b7280; line-height: 1.5; }

/* ── Contact responsive ── */
@media (max-width: 960px) {
  .contact-hero { margin: 0 0 0 24px; }
  .contact-card { margin: 0 24px 48px; padding: 36px 32px; }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .contact-faq__inner { max-width: 70%; }
}

@media (max-width: 768px) {
  .contact-hero { margin: 0 16px; border-radius: 24px; flex-direction: column; }
  .contact-hero__left { flex: none; padding: 28px 24px 20px; }
  .contact-hero__title { font-size: 46px; flex-wrap: wrap; }
  .contact-hero__doodle { display: none; }
  .contact-hero__subtitle { font-size: 22px; }
  .contact-hero__image { min-height: 180px; max-height: 220px; }
  .contact-card { margin: 0 16px 40px; padding: 24px 20px 32px; border-radius: 24px; }
  .contact-faq { border-radius: 24px; }
  .contact-faq__inner { max-width: 100%; }
  .contact-faq__deco { display: none; }
  .contact-company__side { display: none; }
  .contact-trust__grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-trust__heading { font-size: 26px; }
}

@media (max-width: 480px) {
  .contact-hero { margin: 0 12px; }
  .contact-hero__title { font-size: 36px; }
  .contact-hero__subtitle { font-size: 18px; }
  .contact-card { margin: 0 12px 32px; padding: 20px 16px 28px; }
  .contact-form__label { font-size: 18px; }
  .contact-cat__title { font-size: 18px; }
  .contact-trust__icon { width: 70px; height: 70px; }
}

/* ══════════════════════════════════════════
   Careers Page
══════════════════════════════════════════ */

/* Hero */
.careers-hero {
  padding: 24px 0 40px 54px;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.careers-hero__content { flex: 0 0 500px; }
.careers-hero__tagline {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-style: italic;
  font-size: 33px;
  line-height: 40px;
  color: #5dae61;
  margin: 0 0 6px;
  white-space: nowrap;
}
.careers-hero__title {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: -1.06px;
  color: #1a1a1a;
  margin: 0 0 2px;
}
.careers-hero__title--green { color: #5dae61; margin-bottom: 20px; }
.careers-hero__body {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.7;
  max-width: 460px;
  margin-bottom: 16px;
}
.careers-hero__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  text-decoration: none;
}
.careers-hero__stats { display: flex; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
.careers-hero__stat-item { display: flex; align-items: center; gap: 10px; }
.careers-hero__stat-icon { width: 36px; height: auto; object-fit: contain; flex-shrink: 0; }
.careers-hero__stat-title { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13px; color: #1a1a1a; line-height: 1.3; white-space: nowrap; }
.careers-hero__stat-sub { font-family: 'Nunito', sans-serif; font-weight: 500; font-size: 12px; color: #6b7280; line-height: 1.3; white-space: nowrap; }
.careers-hero__image { flex: 0 0 auto; align-self: flex-start; margin-top: -24px; padding-right: 40px; }
.careers-hero__img { width: 840px; height: auto; display: block; object-fit: contain; }

/* Content card */
.careers-card {
  background: #fff;
  border-radius: 32px;
  margin: 0 54px 64px;
  padding: 48px 54px;
}
.careers-section-title { font-family: 'Caveat', cursive; font-weight: 700; font-size: 32px; color: #1a1a1a; margin-bottom: 6px; }
.careers-section-sub { font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 500; color: #555; margin-bottom: 28px; }

/* Category grid */
.careers-cats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 52px;
}
.careers-cat {
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  cursor: pointer;
  box-sizing: border-box;
}
.careers-cat__icon { width: 48px; height: 48px; object-fit: contain; }
.careers-cat__name { font-family: 'Caveat Brush', cursive; font-size: 24px; line-height: 1.2; color: #1a1a1a; }
.careers-cat__desc { font-family: 'Nunito', sans-serif; font-size: 12px; line-height: 1.5; color: #6b7280; margin: 0; }

/* Jobs layout */
.careers-layout { display: grid; grid-template-columns: 1fr 380px; gap: 32px; }
.careers-jobs-heading { font-family: 'Caveat', cursive; font-weight: 700; font-size: 28px; color: #1a1a1a; margin: 0 0 20px; }

/* Job rows */
.careers-job {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 12px;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.15s;
}
.careers-job__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.careers-job__title-wrap { flex: 1; min-width: 0; }
.careers-job__title { font-family: 'Caveat', cursive; font-weight: 700; font-size: 18px; color: #1a1a1a; line-height: 1.2; }
.careers-job__desc { font-family: 'Nunito', sans-serif; font-size: 12px; color: #888; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.careers-job__location { display: flex; align-items: center; gap: 5px; color: #888; flex-shrink: 0; font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 500; }
.careers-job__badge { padding: 4px 12px; border-radius: 999px; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.careers-job__time { font-family: 'Nunito', sans-serif; font-size: 12px; color: #aaa; flex-shrink: 0; }
.careers-job__chevron { flex-shrink: 0; }

/* Empty state */
.careers-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: #f9fafb;
  border-radius: 20px;
  border: 1.5px dashed #d1d5db;
  text-align: center;
}
.careers-empty__icon { width: 56px; height: 56px; border-radius: 50%; background: #5DAE6120; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.careers-empty__heading { font-family: 'Caveat Brush', cursive; font-size: 22px; color: #1a1a1a; margin-bottom: 8px; }
.careers-empty__body { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 500; color: #6b7280; max-width: 280px; line-height: 1.6; margin: 0 0 20px; }
.careers-empty__email-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: #5dae61; color: #fff; border: 2px solid #1a1a1a; border-radius: 12px; box-shadow: 3px 3px 0 #1a1a1a; font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700; text-decoration: none; }

/* Sidebar */
.careers-sidebar { display: flex; flex-direction: column; gap: 16px; }
.careers-sidebar-card { border-radius: 20px; padding: 20px; position: relative; overflow: hidden; min-height: 180px; }
.careers-sidebar-card--green { background: #5DAE6133; }
.careers-sidebar-card--purple { background: #ede9f6; }
.careers-sidebar-card__title { font-family: 'Caveat Brush', cursive; font-size: 24px; line-height: 1.2; color: #1a1a1a; margin-bottom: 8px; }
.careers-sidebar-card__body { font-family: 'Nunito', sans-serif; font-weight: 500; font-size: 14px; line-height: 1.5; color: #6b7280; width: 70%; margin-bottom: 16px; }
.careers-sidebar-card__link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: transparent; border: 2.25px solid #1a1a1a; border-radius: 12px; font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700; color: #1a1a1a; text-decoration: none; }
.careers-sidebar-card__deco { position: absolute; bottom: 0; right: 0; width: 155px; height: auto; pointer-events: none; }

/* Bottom cards */
.careers-bottom { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin-top: 24px; }
.careers-testimonial { background: #F8F9EC; border: 1.13px solid #EBEFCC; border-radius: 18px; padding: 24px; min-height: 176px; display: flex; align-items: center; gap: 12px; overflow: hidden; box-sizing: border-box; }
.careers-testimonial__avatar { width: 110px; height: auto; flex-shrink: 0; object-fit: contain; }
.careers-testimonial__quote { font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700; color: #1a1a1a; line-height: 22px; margin-bottom: 10px; }
.careers-testimonial__author { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 500; color: #6b7280; }
.careers-partnership { background: #5DAE6133; border: 1px solid #5DAE61; border-radius: 16px; padding: 24px; min-height: 172px; display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden; box-sizing: border-box; }
.careers-partnership__content { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.careers-partnership__heading { font-family: 'Caveat', cursive; font-weight: 700; font-size: 26px; color: #1a1a1a; line-height: 1.2; margin: 0; }
.careers-partnership__body { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 500; color: #444; line-height: 20px; margin: 0; }
.careers-partnership__btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; background: #5dae61; color: #fff; border: 2px solid #1a1a1a; border-radius: 12px; box-shadow: 3px 3px 0 #1a1a1a; font-family: 'Caveat Brush', cursive; font-size: 17px; text-decoration: none; align-self: flex-start; }
.careers-partnership__deco { position: absolute; bottom: 0; right: 0; height: 75%; width: auto; object-fit: contain; pointer-events: none; opacity: 0.9; }

/* ── Careers responsive ── */
@media (max-width: 960px) {
  .careers-hero { padding: 24px 32px 40px; }
  .careers-hero__content { flex: 0 0 auto; max-width: 440px; }
  .careers-hero__img { width: 560px; }
  .careers-card { margin: 0 24px 48px; padding: 36px 32px; }
  .careers-cats { grid-template-columns: repeat(3, 1fr); }
  .careers-layout { grid-template-columns: 1fr; }
  .careers-sidebar { flex-direction: row; }
  .careers-sidebar-card { flex: 1; }
  .careers-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .careers-hero { padding: 20px 20px 32px; flex-direction: column; gap: 24px; align-items: flex-start; }
  .careers-hero__content { flex: none; max-width: 100%; width: 100%; }
  .careers-hero__tagline { font-size: 24px; white-space: normal; }
  .careers-hero__title { font-size: 46px; }
  .careers-hero__body { max-width: 100%; }
  .careers-hero__image { display: none; }
  .careers-card { margin: 0 16px 40px; padding: 24px 20px 32px; border-radius: 24px; }
  .careers-cats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .careers-cat { padding: 16px; gap: 10px; }
  .careers-cat__name { font-size: 18px; }
  .careers-layout { grid-template-columns: 1fr; gap: 24px; }
  .careers-sidebar { flex-direction: column; }
  .careers-sidebar-card__body { width: 100%; }
  .careers-job { flex-wrap: wrap; gap: 10px; }
  .careers-job__time { display: none; }
  .careers-bottom { grid-template-columns: 1fr; gap: 12px; }
  .careers-testimonial { align-items: flex-start; }
  .careers-testimonial__avatar { width: 80px; }
  .careers-partnership__deco { opacity: 0.3; }
}

@media (max-width: 480px) {
  .careers-hero__title { font-size: 36px; }
  .careers-hero__tagline { font-size: 20px; }
  .careers-card { margin: 0 12px 32px; padding: 20px 16px 28px; }
  .careers-cats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .careers-cat { padding: 12px; }
  .careers-cat__icon { width: 36px; height: 36px; }
  .careers-cat__name { font-size: 15px; }
  .careers-section-title { font-size: 26px; }
}

/* ══════════════════════════════════════════
   About Page
══════════════════════════════════════════ */

/* Hero */
.about-hero {
  padding: 28px 54px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}
.about-hero__content { flex: 0 0 auto; width: 500px; max-width: 100%; }
.about-hero__heading {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #1a1a1a;
  margin: 0 0 4px;
}
.about-hero__underline {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 400px;
  height: auto;
  display: block;
  transform: scale(1.1);
  transform-origin: left center;
}
.about-hero__badge { display: block; width: 420px; max-width: 100%; height: auto; padding: 12px 0; }
.about-hero__body {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 460px;
  margin: 0 0 20px;
}
.about-hero__price {
  font-family: 'Caveat', cursive;
  font-size: 28px;
  font-weight: 700;
  font-style: italic;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.about-hero__image { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; }
.about-hero__img { height: 440px; width: auto; display: block; object-fit: contain; }

/* Content card */
.about-card {
  background: #fff;
  border-radius: 32px;
  margin: 0 54px 64px;
  padding: 56px 54px;
}

/* Shared text */
.about-h2 {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0 0 20px;
}
.about-h2--green-italic { color: #5dae61; font-style: italic; }
.about-body {
  font-family: 'Baloo 2', cursive;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: #1a1a1a;
  margin: 0 0 14px;
}
.about-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 4px; }
.about-list__item { display: flex; gap: 10px; align-items: flex-start; font-family: 'Baloo 2', cursive; font-weight: 500; font-size: 14px; line-height: 1.6; color: #1a1a1a; }

/* Sections (flex rows) */
.about-section {
  display: flex;
  gap: 56px;
  align-items: center;
  margin-bottom: 72px;
}
.about-section--connections,
.about-section--vision { margin-top: 64px; margin-bottom: 0; align-items: flex-start; gap: 48px; }
.about-section__text { flex: 1; min-width: 0; }
.about-section__image-col { flex: 0 0 auto; }
.about-section__image-col--right { flex: 0 0 auto; }
.about-community-img { width: 431px; height: 290px; display: block; object-fit: contain; }
.about-connections-img { width: 560px; height: auto; display: block; object-fit: contain; }
.about-vision-img { width: 740px; height: auto; display: block; object-fit: contain; }
.about-welcome-banner { width: 380px; max-width: 100%; height: auto; display: block; margin-top: 16px; object-fit: contain; }

/* Everything */
.about-everything { margin-bottom: 36px; }

/* Category grid */
.about-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 0;
}
.about-cat-item {
  background: #fff;
  border: 2px solid #edeff0;
  border-radius: 32px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  min-height: 200px;
  box-sizing: border-box;
}
.about-cat-item__icon { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.about-cat-item__title { font-family: 'Caveat Brush', cursive; font-size: 18px; color: #1a1a1a; line-height: 1.2; }
.about-cat-item__desc { font-family: 'Nunito', sans-serif; font-weight: 400; font-size: 12px; line-height: 1.5; color: #6b7280; margin: 0; }
.about-cat-more {
  position: relative;
  min-height: 200px;
  box-sizing: border-box;
}
.about-cat-more__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  height: 100%;
  min-height: 200px;
  box-sizing: border-box;
}
.about-cat-more__plus { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #5dae61; display: flex; align-items: center; justify-content: center; color: #5dae61; font-size: 22px; font-weight: 300; }
.about-cat-more__text { font-family: 'Caveat Brush', cursive; font-size: 20px; color: #5dae61; line-height: 1.3; }
.about-cat-illustration { grid-column: span 2; display: flex; align-items: center; justify-content: center; }

/* Founder */
.about-founder { margin-top: 48px; }
.about-founder__cols { display: flex; gap: 48px; align-items: flex-start; }
.about-founder__left { flex: 1; }
.about-founder__text-wrap { display: flex; gap: 24px; align-items: flex-start; }
.about-founder__img { flex-shrink: 0; width: 221px; height: 215px; display: block; object-fit: contain; margin-top: -40px; }
.about-founder__tags { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.about-founder__tag { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 600; color: #1a1a1a; background: #f3f4f6; border-radius: 20px; padding: 4px 12px; }
.about-founder__divider { width: 1px; align-self: stretch; background: #edeff0; flex-shrink: 0; }
.about-founder__right { flex: 1; }
.about-founder__team { display: flex; gap: 24px; }
.about-founder__team-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.about-founder__team-label { font-family: 'Nunito', sans-serif; font-size: 13px; color: #1a1a1a; }

/* ── About page responsive ── */
@media (max-width: 960px) {
  .about-hero { padding: 24px 32px 20px; }
  .about-card { margin: 0 24px 48px; padding: 40px 32px; }
  .about-hero__img { height: 360px; }
  .about-community-img { width: 300px; }
  .about-connections-img { width: 380px; }
  .about-vision-img { width: 480px; }
  .about-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .about-cat-illustration { grid-column: span 3; }
}

@media (max-width: 768px) {
  /* Hero */
  .about-hero { padding: 24px 20px 20px; flex-direction: column; gap: 24px; align-items: flex-start; }
  .about-hero__content { max-width: 100%; }
  .about-hero__heading { font-size: 42px; }
  .about-hero__underline { width: 260px; }
  .about-hero__badge { width: 100%; max-width: 320px; }
  .about-hero__body { max-width: 100%; }
  .about-hero__image { display: none; }
  /* Card */
  .about-card { margin: 0 16px 40px; padding: 28px 20px 36px; border-radius: 24px; }
  /* Sections: stack */
  .about-section { flex-direction: column; gap: 24px; margin-bottom: 48px; }
  .about-section--connections,
  .about-section--vision { margin-top: 40px; flex-direction: column; gap: 24px; }
  .about-section__image-col,
  .about-section__image-col--right { width: 100%; }
  .about-community-img { width: 100%; height: auto; }
  .about-connections-img { width: 100%; height: auto; }
  .about-vision-img { display: none; }
  .about-welcome-banner { width: 100%; max-width: 300px; }
  /* Cat grid: 2 col */
  .about-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .about-cat-illustration { display: none; }
  .about-cat-item { min-height: 160px; border-radius: 20px; gap: 8px; }
  .about-cat-item__icon { width: 40px; height: 40px; }
  .about-cat-item__title { font-size: 15px; }
  .about-cat-item__desc { font-size: 11px; }
  .about-cat-more { min-height: 160px; }
  .about-cat-more__inner { min-height: 160px; }
  /* Founder */
  .about-founder__cols { flex-direction: column; gap: 28px; }
  .about-founder__divider { display: none; }
  .about-founder__text-wrap { flex-direction: column; }
  .about-founder__img { width: 160px; height: auto; margin-top: 0; align-self: center; }
}

@media (max-width: 480px) {
  .about-hero__heading { font-size: 34px; }
  .about-card { margin: 0 12px 32px; padding: 20px 16px 28px; }
  .about-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .about-h2 { font-size: 26px; }
}

/* ─── Why Students ───────────────────────────────────────────── */
.why-students {
  padding: 56px 102px 64px;
}

.about__why-wrap .why-students {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 24px;
}

.why-students__inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.why-students__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.why-students__heading {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0;
}

.why-students__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}

.why-students__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.why-students__item-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.why-students__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.why-students__title {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: var(--text-dark);
}

.why-students__desc {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: #6B7280;
  margin: 0;
}

.why-students__right {
  flex: 0 0 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-students__illustration {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  display: block;
  margin-top: -70px;
}

@media (max-width: 1024px) {
  .why-students { padding: 48px 72px 56px; }
  .why-students__grid { grid-template-columns: repeat(2, 1fr); }
  .why-students__right { flex: 0 0 260px; }
}

@media (max-width: 768px) {
  .why-students { padding: 40px 32px 48px; }
  .why-students__inner { flex-direction: column; }
  .why-students__right { display: none; }
  .why-students__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Promo — For Businesses + Community ────────────────────── */
.promo {
  padding: 0 54px 64px;
}

/* For Businesses bar */
.promo__biz {
  display: flex;
  align-items: center;
  gap: 0px;
  padding: 0 260px 24px 0;
  margin-bottom: 18px;
  position: relative;
  min-height: 218px;
}

.promo__biz-info {
  flex-shrink: 0;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 9.6px;
  padding-right: 16px;
}

.promo__biz-title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 33.75px;
  line-height: 40px;
  letter-spacing: 0px;
  color: #1a1a1a;
  white-space: nowrap;
}

.promo__biz-sub {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.4;
}

.promo__biz-features {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex: 1;
  min-width: 0;
}

.promo__biz-feature {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.45;
}

.promo__biz-feature-text {
  white-space: normal;
}

.promo__biz-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
}

.promo__biz-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 32px;
  background: #5dae61;
  color: var(--white);
  border: 2.25px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 4px 4px 0px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 20.25px;
  font-weight: 400;
  line-height: 31.5px;
  letter-spacing: 0px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.promo__biz-cta:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

.promo__biz-illustration {
  position: absolute;
  right: -36px;
  bottom: 0;
  width: 290px;
  height: 218px;
  object-fit: contain;
  object-position: right bottom;
}

/* Bottom three-column row */
.promo__bottom {
  display: grid;
  grid-template-columns: .97fr 1.4fr 0.7fr;
  gap: 16px;
  align-items: stretch;
}

/* Community card */
.promo__community {
  background: var(--bg-main);
  border: 2px solid #1a1a1a;
  border-radius: 22px;
  box-shadow: 4px 4px 0 #1a1a1a;
  padding: 18px 0 0 18px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.promo__community-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px 18px 0;
}

.promo__community-title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 33.75px;
  line-height: 40px;
  letter-spacing: 0px;
  color: var(--text-dark);
  margin-bottom: 8px;
  white-space: normal;
}

.promo__community-desc {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22.5px;
  letter-spacing: 0px;
  color: #1a1a1a;
  margin-bottom: 16px;
  white-space: normal;
}

.promo__community-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  white-space: nowrap;
  padding: 8px 20px;
  background: #5dae61;
  color: var(--white);
  border: 2.25px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 4px 4px 0px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 20.25px;
  font-weight: 400;
  line-height: 31.5px;
  letter-spacing: 0px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.promo__community-btn:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

.promo__community-img {
  width: 130px;
  height: auto;
  object-fit: contain;
  object-position: bottom;
  flex-shrink: 0;
  align-self: flex-end;
  display: block;
}

/* Stats */
.promo__stats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  padding: 12px 8px;
  gap: 24px;
  align-self: center;
}

.promo__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
}

.promo__stat-num {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 48px;
  line-height: 66.46px;
  letter-spacing: -1.06px;
  color: #5dae61;
  display: block;
  text-align: center;
  width: 88px;
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo__stat-label {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  line-height: 14.06px;
  letter-spacing: 0px;
  text-align: center;
}

/* Testimonial card */
.promo__testimonial {
  background: var(--white);
  border: 2px solid #1a1a1a;
  border-radius: 22px;
  padding: 4px 48px 16px 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: -30px;
}

.promo__quote-mark {
  width: 36px;
  height: auto;
  object-fit: contain;
  margin: 0;
  padding: 0;
  display: block;
  flex-shrink: 0;
}

.promo__quote-text {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 20.25px;
  line-height: 31.5px;
  letter-spacing: 0px;
  text-align: center;
  color: var(--text-dark);
  margin-bottom: 8px;
  padding: 0;
  white-space: nowrap;
}

.promo__quote-attr {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-light);
  font-weight: 600;
  text-align: center;
}

.promo__testimonial-star {
  position: absolute;
  top: 36px;
  right: 16px;
  width: 36px;
  opacity: 0.85;
  transform: rotate(20deg);
}

.promo__avatar {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #1a1a1a;
  background: #e8e8e8;
}

/* ─── Promo responsive ───────────────────────────────────────── */
@media (max-width: 1200px) {
  .promo__biz-illustration {
    width: 260px;
    height: 195px;
  }
  .promo__biz {
    gap: 20px;
  }
}

@media (max-width: 1024px) {
  .promo {
    padding: 0 32px 48px;
  }
  .promo__biz {
    flex-wrap: wrap;
    gap: 16px;
    padding-right: 0;
  }
  .promo__biz-illustration {
    display: none;
  }
  .promo__biz-features {
    flex: unset;
    width: 100%;
    gap: 16px;
  }
  .promo__bottom {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .promo__testimonial {
    grid-column: 1 / -1;
  }
  .promo__stats {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-around;
  }
  .promo__community-title {
    font-size: 28px;
    white-space: normal;
  }
  .promo__community-desc {
    white-space: normal;
  }
  .promo__community-btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .promo {
    padding: 0 20px 40px;
  }
  .promo__biz {
    gap: 14px;
    padding: 0 0 24px 20px;
  }
  .promo__biz-info {
    width: 100%;
    padding-right: 0;
  }
  .promo__biz-features {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    gap: 4px;
  }
  .promo__biz-feature {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 6px;
  }
  .promo__biz-icon {
    width: 34px;
    height: 34px;
  }
  .promo__biz-cta {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
  .promo__bottom {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .promo__testimonial {
    grid-column: unset;
  }
  .promo__stats {
    grid-column: unset;
    gap: 14px 32px;
  }
  .promo__stat-num {
    font-size: 40px;
    line-height: 1.1;
    width: auto;
    height: auto;
  }
  .promo__community-img {
    width: 110px;
    height: auto;
  }
  .promo__community-title {
    font-size: 24px;
    line-height: 1.25;
    white-space: normal;
  }
  .promo__community-desc {
    white-space: normal;
  }
  .promo__community-btn {
    width: 100%;
  }
  .promo__biz-title {
    font-size: 26px;
  }
}

@media (max-width: 520px) {
  .promo__biz-cta {
    width: 100%;
    justify-content: center;
  }
  .promo__community-btn {
    width: 100%;
    justify-content: center;
  }
  .promo__community-img {
    width: 120px;
  }
  .promo__stat-num {
    font-size: 32px;
  }
  .promo__stats {
    gap: 12px 24px;
  }
}

/* ─── Auth Modal ─────────────────────────────────────────────── */
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes overlayFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.88) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes modalDrop {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.88) translateY(16px); }
}

@keyframes slideInForward {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInBack {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: overlayFadeIn 0.22s ease both;
}

.auth-overlay.is-closing {
  animation: overlayFadeOut 0.26s ease both;
}

.auth-modal-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  transition: max-width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.auth-modal-wrap--wide {
  max-width: 760px;
}

.auth-modal {
  background: #fffdf7;
  border: 2.25px solid #1a1a1a;
  border-radius: 28px;
  box-shadow: 6px 6px 0px #1a1a1a;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 32px 36px 36px;
  position: relative;
  animation: modalPop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.auth-modal::-webkit-scrollbar {
  display: none;
}

.auth-modal.is-closing {
  animation: modalDrop 0.26s cubic-bezier(0.4, 0, 0.6, 1) both;
}

.auth-slide {
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
}

.auth-slide--forward {
  animation-name: slideInForward;
}

.auth-slide--back {
  animation-name: slideInBack;
}

.auth-modal__close {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 10;
  width: 32px;
  height: 32px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.auth-modal__close:hover {
  background: #5dae61;
  transform: scale(1.1);
}

.auth-modal__brand {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.auth-modal__logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.auth-modal__tabs {
  display: flex;
  gap: 0;
  background: #f0efe8;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 28px;
}

.auth-modal__tab {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.22s cubic-bezier(0.34, 1.2, 0.64, 1), color 0.18s ease, box-shadow 0.22s ease;
}

.auth-modal__tab.is-active {
  background: #ffffff;
  color: var(--text-dark);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.auth-form__label {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 17px;
  color: var(--text-dark);
}

.auth-form__input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 2px solid #d0cfc8;
  border-radius: 12px;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  font-weight: 400;
  line-height: 46px;
  color: var(--text-dark);
  background: #ffffff;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  box-sizing: border-box;
}

.auth-form__input::placeholder {
  color: #b0afa8;
}

.auth-form__input:focus {
  border-color: #5dae61;
}

.auth-form__input-wrap {
  position: relative;
}

.auth-form__input-wrap .auth-form__input {
  padding-right: 44px;
}

.auth-form__eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}

/* Phone */
.auth-form__phone {
  display: flex;
  gap: 8px;
}

.auth-form__phone-num {
  flex: 1;
}

/* Custom dial dropdown */
.dial-dropdown {
  position: relative;
  flex-shrink: 0;
}

.dial-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 12px;
  border: 2px solid #d0cfc8;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  font-weight: 400;
  color: var(--text-dark);
  white-space: nowrap;
  transition: border-color 0.2s;
  min-width: 90px;
}

.dial-dropdown__trigger:focus,
.dial-dropdown__trigger:hover {
  border-color: #5dae61;
  outline: none;
}

.dial-dropdown__flag {
  font-size: 18px;
  line-height: 1;
}

.dial-dropdown__code {
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  font-weight: 400;
}

.dial-dropdown__arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-light);
  margin-left: 2px;
}

.dial-dropdown__menu {
  background: #ffffff;
  border: 2px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 4px 4px 0 #1a1a1a;
  overflow: hidden;
}

.dial-dropdown__search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1.5px solid #e0ddd4;
}

.dial-dropdown__search-icon {
  width: 16px;
  height: 16px;
  color: var(--text-light);
  flex-shrink: 0;
}

.dial-dropdown__search {
  border: none;
  outline: none;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  background: transparent;
  width: 100%;
}

.dial-dropdown__search::placeholder {
  color: #b0afa8;
}

.dial-dropdown__list {
  max-height: 240px;
  overflow-y: auto;
  padding: 6px 0;
}

.dial-dropdown__group-label {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 14px 4px;
}

.dial-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.dial-dropdown__item:hover {
  background: #f5f4ed;
}

.dial-dropdown__item.is-selected {
  background: #edf7ee;
}

.dial-dropdown__item-flag {
  font-size: 18px;
  flex-shrink: 0;
}

.dial-dropdown__item-name {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  flex: 1;
}

.dial-dropdown__item-code {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #5dae61;
}

.dial-dropdown__empty {
  padding: 16px;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-light);
}

/* ── Country / Region custom dropdowns ── */
.search-dropdown {
  position: relative;
  width: 100%;
}

.search-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 46px;
  text-align: left;
  cursor: pointer;
  background: #fff;
  gap: 8px;
  box-sizing: border-box;
  line-height: normal;
}

.search-dropdown__trigger:focus,
.search-dropdown__trigger:hover {
  border-color: #5dae61;
  outline: none;
}

.search-dropdown__selected {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  color: var(--text-dark);
}

.search-dropdown__flag {
  font-size: 18px;
  flex-shrink: 0;
}

.search-dropdown__placeholder {
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  color: #aaa;
}

.search-dropdown__arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #888;
}

.search-dropdown__menu {
  background: #fff;
  border: 2.25px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 4px 4px 0px #1a1a1a;
  overflow: hidden;
}

.search-dropdown__search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1.5px solid #e8e8e8;
}

.search-dropdown__search-icon {
  width: 15px;
  height: 15px;
  color: #aaa;
  flex-shrink: 0;
}

.search-dropdown__search {
  flex: 1;
  border: none;
  outline: none;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-dark);
  background: transparent;
}

.search-dropdown__search::placeholder {
  color: #bbb;
}

.search-dropdown__list {
  max-height: 220px;
  overflow-y: auto;
}

.search-dropdown__group-label {
  padding: 8px 12px 4px;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #aaa;
}

.search-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.search-dropdown__item:hover {
  background: #f5faf5;
}

.search-dropdown__item.is-selected {
  background: #eaf6ea;
}

.search-dropdown__item-flag {
  font-size: 17px;
  flex-shrink: 0;
}

.search-dropdown__item-name {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  flex: 1;
}

.search-dropdown__empty {
  padding: 16px;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-light);
}

/* Forgot */
.auth-form__forgot {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #5dae61;
  text-align: right;
  margin-top: -8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  display: block;
  width: 100%;
}

.auth-form__forgot:hover {
  text-decoration: underline;
}

.auth-form__error {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #dc2626;
  margin: -4px 0;
}

/* ══════════════════════════════════════════
   TOASTS
══════════════════════════════════════════ */

@keyframes toast-in {
  from { transform: translateX(calc(100% + 32px)); opacity: 0; }
  to   { transform: translateX(0);                 opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateX(0);                 opacity: 1; }
  to   { transform: translateX(calc(100% + 32px)); opacity: 0; }
}

@keyframes toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

.toast-stack {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 320px;
  padding: 14px 14px 20px 16px;
  background: #ffffff;
  border: 2.25px solid #1a1a1a;
  border-radius: 18px;
  box-shadow: 4px 4px 0px #1a1a1a;
  position: relative;
  overflow: hidden;
  animation: toast-in 0.4s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

.toast.is-exiting {
  animation: toast-out 0.32s ease forwards;
}

/* Coloured left accent */
.toast::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 4px;
  border-radius: 0 4px 4px 0;
}
.toast--success::before { background: #5dae61; }
.toast--error::before   { background: #dc2626; }
.toast--info::before    { background: #3b82f6; }

/* Icon circle */
.toast__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid currentColor;
}
.toast--success .toast__icon { color: #5dae61; background: #f0fdf4; }
.toast--error   .toast__icon { color: #dc2626; background: #fef2f2; }
.toast--info    .toast__icon { color: #3b82f6; background: #eff6ff; }

.toast__icon svg {
  width: 14px;
  height: 14px;
}

/* Message */
.toast__message {
  flex: 1;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  color: #1a1a1a;
  line-height: 1.3;
}

/* Dismiss button */
.toast__close {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  color: #b0afa8;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  padding: 0;
  align-self: flex-start;
}
.toast__close:hover {
  background: #f0f0ee;
  color: #1a1a1a;
}

/* Progress bar */
.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  border-radius: 0 0 16px 16px;
  animation: toast-progress 3s linear forwards;
}
.toast--success .toast__progress { background: #5dae61; }
.toast--error   .toast__progress { background: #dc2626; }
.toast--info    .toast__progress { background: #3b82f6; }

@keyframes auth-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-7px); }
  40%       { transform: translateX(7px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.is-shake {
  animation: auth-shake 0.4s ease;
  border-color: #dc2626 !important;
}

/* User type selector */
.auth-form__type-row {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.auth-form__type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  font-weight: 400;
  color: #555;
  background: #fafaf8;
  border: 1.5px solid #e0e0d8;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.auth-form__type-btn:hover {
  border-color: #5dae61;
  color: #2e7d32;
}

.auth-form__type-btn.is-active {
  background: #5dae61;
  border: 2px solid #1a1a1a;
  color: #ffffff;
}

/* Terms */
.auth-form__terms {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-medium);
}

.auth-form__terms input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: #5dae61;
  flex-shrink: 0;
  cursor: pointer;
}

.auth-form__terms a {
  color: #5dae61;
  font-weight: 700;
}

/* Submit */
.auth-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 32px;
  background: #5dae61;
  color: #ffffff;
  border: 2.25px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 4px 4px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 20.25px;
  font-weight: 400;
  line-height: 31.5px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  margin-top: 4px;
}

.auth-form__submit:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

/* Switch */
.auth-form__switch {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-light);
  text-align: center;
}

.auth-form__switch-btn {
  background: none;
  border: none;
  color: #5dae61;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.auth-form__switch-btn:hover {
  text-decoration: underline;
}

.auth-form__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #b0afa8;
}

.auth-form__divider::before,
.auth-form__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #d0cfc8;
}

.auth-form__google-btn {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid #d0cfc8;
  border-radius: 12px;
  background: #ffffff;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.auth-form__google-btn:hover {
  border-color: #5dae61;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.auth-form__google-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Reset Password page ── */
.reset-page {
  min-height: calc(100vh - var(--navbar-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 60px;
  background: var(--bg-main);
}

/* ── OTP inputs ── */
.auth-otp-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.auth-otp-digit {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  box-sizing: border-box;
}

/* ── Auth modal mobile ── */
@media (max-width: 540px) {
  /* Overlay: start from top so tall register form isn't clipped */
  .auth-overlay { padding: 12px; align-items: flex-start; padding-top: 24px; }

  /* Modal wrap: full width for both login and register */
  .auth-modal-wrap,
  .auth-modal-wrap--wide { max-width: 100%; }

  /* Modal box: tighter padding */
  .auth-modal { padding: 24px 20px 28px; border-radius: 20px; max-height: calc(100dvh - 48px); }

  /* Register: stack 2-col rows into single column */
  .auth-form__row { grid-template-columns: 1fr; gap: 16px; }

  /* OTP: shrink inputs so they fit ~315px content width */
  .auth-otp-row { gap: 7px; }
  .auth-otp-digit { width: 40px; height: 48px; font-size: 20px; border-radius: 8px; }
}

/* ─── Footer ─────────────────────────────────────────────────── */
/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer {
  background: #EBEFE6;
  padding: 90px 130px 0;
  box-sizing: border-box;
}

/* ── Main grid ── */
.footer__main {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr 1fr 0.85fr 1.3fr;
  gap: 36px;
  padding-bottom: 20px;
}

/* ── Brand col ── */
.footer__logo {
  height: 48px;
  width: auto;
  margin-bottom: 10px;
  display: block;
}

.footer__tagline-text {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #2d2d2d;
  line-height: 1.6;
  margin-bottom: 12px;
}

.footer__tagline-text strong {
  font-weight: 800;
}

.footer__city {
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
  margin-top: 4px;
}

/* ── Link columns ── */
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer__col-header {
  display: table;
  margin-bottom: 10px;
}

.footer__col-heading {
  font-family: 'Caveat Brush', cursive;
  font-size: 24px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: 0px;
  color: #5dae61;
  margin: 0;
  display: block;
}

.footer__col-underline {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 4px;
  object-fit: fill;
  transform: translateX(-10px);
}

/* How it works column is wider — needs more shift */
.footer__col:nth-child(3) .footer__col-underline {
  transform: translateX(-30px);
}


.footer__links {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer__links a {
  font-family: 'Nunito', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #2d2d2d;
  text-decoration: none;
  transition: color 0.15s;
}

.footer__links a:hover {
  color: #5dae61;
}

.footer__doodle {
  margin-top: auto;
  padding-top: 14px;
  width: 80px;
  height: 80px;
}

.footer__doodle svg,
.footer__doodle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Stay in the loop card ── */
.footer__loop-card {
  background: #F7F8F2;
  border: 1.13px solid #C0C9C34D;
  border-radius: 31.5px;
  width: 288px;
  height: 343px;
  max-width: 382.5px;
  opacity: 1;
  padding: 32px 36px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.footer__loop-heading {
  font-family: 'Caveat Brush', cursive;
  font-size: 24px;
  color: #5dae61;
  margin: 0 0 18px 0;
  display: block;
  align-self: flex-start;
  white-space: nowrap;
  position: relative;
  padding-bottom: 12px;
}

.footer__loop-underline {
  position: absolute;
  bottom: 0;
  left: -38%;
  width: 138%;
  height: 8px;
  object-fit: fill;
}

.footer__loop-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  margin: 8px 0 12px;
  line-height: 1.5;
}

.footer__loop-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 13px;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  background: #fafaf8;
  outline: none;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}

.footer__loop-input::placeholder {
  color: #b0afa8;
}

.footer__loop-input:focus {
  border-color: #5dae61;
}

.footer__loop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 20px;
  background: #5dae61;
  color: var(--white);
  border: 2.25px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 4px 4px 0px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 20.25px;
  font-weight: 400;
  line-height: 31.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.footer__loop-btn:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

.footer__loop-doodle {
  position: absolute;
  bottom: 12px;
  right: 14px;
  width: 100px;
  height: 80px;
  opacity: 0.85;
}

.footer__loop-doodle svg,
.footer__loop-doodle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Bottom row ── */
.footer__bottom-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 0 20px;
}

.footer__bottom-heading {
  font-family: 'Caveat Brush', cursive;
  font-size: 24px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: 0px;
  color: #5dae61;
  margin: 0 0 12px 0;
  display: block;
}

/* Follow us */
.footer__social {
  flex: 0 0 auto;
}

.footer__social-icons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #1a1a1a;
  color: #1a1a1a;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.footer__social-icon svg {
  width: 17px;
  height: 17px;
}

.footer__social-icon:hover {
  color: #fff;
}

/* Instagram */
.footer__social-icon[aria-label="Instagram"]:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: transparent;
}

/* TikTok */
.footer__social-icon[aria-label="TikTok"]:hover {
  background: #010101;
  border-color: #010101;
}

/* Facebook */
.footer__social-icon[aria-label="Facebook"]:hover {
  background: #1877f2;
  border-color: #1877f2;
}

/* YouTube */
.footer__social-icon[aria-label="YouTube"]:hover {
  background: #ff0000;
  border-color: #ff0000;
}

/* LinkedIn */
.footer__social-icon[aria-label="LinkedIn"]:hover {
  background: #0a66c2;
  border-color: #0a66c2;
}

/* Help */
.footer__help {
  flex: 0 0 auto;
}

.footer__help-contact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.footer__help-icon {
  width: 28px;
  height: 28px;
  color: #2d2d2d;
  flex-shrink: 0;
  margin-top: 2px;
}

.footer__help-email {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
  margin-bottom: 4px;
}

.footer__help-email:hover {
  color: #5dae61;
}

.footer__help-center {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #5dae61;
  text-decoration: none;
}

.footer__help-center:hover {
  text-decoration: underline;
}

/* Get the app */
.footer__app {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}

.footer__app-label {
  flex-shrink: 0;
}

.footer__app-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  margin: 4px 0 0;
}

.footer__app-btns {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}

.footer__app-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
  min-width: 130px;
}

.footer__app-btn:hover {
  background: #5dae61;
}

.footer__app-btn-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.footer__app-btn-sub {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.8;
}

.footer__app-btn-main {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
}

/* ── Copyright bar ── */
.footer__bar {
  border-top: 1.5px solid #cdd5cc;
  padding: 4px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__bar-copy {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #555;
}

.footer__bar-lock {
  width: 14px;
  height: 14px;
  color: #888;
  flex-shrink: 0;
}

.footer__bar-doodle {
  height: 110px;
  width: auto;
  object-fit: contain;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .footer__main {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
  }
  .footer__loop-card {
    grid-column: 1 / -1;
  }
  .footer__bottom-row {
    gap: 28px;
  }
  .footer__help {
    padding: 0 28px;
  }
}

@media (max-width: 768px) {
  .footer { padding: 40px 24px 0; }
  .footer__main { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__loop-card { grid-column: 1 / -1; width: 100%; height: auto; box-sizing: border-box; }
  .footer__doodle { display: none; }
  .footer__bottom-row { flex-direction: column; gap: 20px; padding: 20px 0 16px; }
  .footer__help { padding: 0; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__bar-doodle { display: none; }
}

@media (max-width: 480px) {
  .footer { padding: 32px 20px 0; }
  .footer__main { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__logo { height: 40px; }
  .footer__city { max-width: 160px; }
  .footer__loop-card { grid-column: 1 / -1; width: 100%; height: auto; padding: 24px 20px 20px; box-sizing: border-box; }
  .footer__loop-doodle { display: none; }
  .footer__social-icons { flex-wrap: wrap; gap: 8px; }
  .footer__bar-copy { font-size: 11px; }
  .footer__app-btns { flex-direction: column; }
}
/* ── All Categories Page ── */
.allcat {
  min-height: 100vh;
  background: transparent;
  padding-bottom: 64px;
}

.allcat__hero {
  padding: 48px 54px 32px;
}

/* ── Categories hero banner ── */
.allcat__banner {
  display: flex;
  align-items: center;
  min-height: 210px;
  background: var(--bg-main);
  overflow: hidden;
  position: relative;
}

.allcat__banner-left {
  position: relative;
  width: 389px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.allcat__banner-left-img {
  width: 389px;
  height: 361.77px;
  object-fit: contain;
  display: block;
  opacity: 1;
}

.allcat__banner-center {
  flex: 1;
  padding: 36px 32px;
  text-align: center;
}

.allcat__banner-heading {
  font-family: 'Caveat Brush', cursive;
  font-size: 46px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.18;
  margin: 0 0 14px;
}

.allcat__banner-heading-em {
  display: inline-block;
  position: relative;
}

.allcat__banner-heading-underline {
  display: block;
  width: 100%;
  margin-top: 2px;
}

.allcat__banner-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #555;
  line-height: 1.65;
  margin: 0 0 22px;
}

.allcat__banner-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
}

.allcat__banner-search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #e0ddd4;
  border-radius: 50px;
  padding: 10px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.allcat__banner-search-icon {
  flex-shrink: 0;
}

.allcat__banner-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #333;
  background: transparent;
}

.allcat__banner-search-input::placeholder {
  color: #bbb;
}

.allcat__banner-search-btn {
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px 0px 0px #1a1a1a;
  padding: 10px 28px;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.allcat__banner-search-btn:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px 0px #1a1a1a;
  transform: translate(1px, 1px);
}

.allcat__banner-right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.allcat__banner-right-img {
  width: 441.03px;
  height: 362px;
  display: block;
  opacity: 1;
  object-fit: contain;
}

.allcat__breadcrumb {
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  color: #888;
  margin-bottom: 12px;
}

.allcat__breadcrumb a {
  color: #5dae61;
  text-decoration: none;
}

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

.allcat__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 52px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 10px;
  line-height: 1.1;
}

.allcat__subtitle {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  color: #555;
  font-weight: 500;
}

/* ── Categories CTA Banner ── */
.allcat__cta {
  display: flex;
  align-items: center;
  background: #5DAE6133;
  border: 1px solid #6B7280;
  border-radius: 16px;
  margin-top: 40px;
  padding: 27px 16px;
  gap: 24px;
  height: 188px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  opacity: 1;
}

.allcat__cta-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.allcat__cta-left-img {
  height: 188px;
  width: auto;
  display: block;
  object-fit: contain;
}

.allcat__cta-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.allcat__cta-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin: 0;
}

.allcat__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px 0px 0px #1a1a1a;
  padding: 12px 28px;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.allcat__cta-btn:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px 0px #1a1a1a;
  transform: translate(1px, 1px);
}

.allcat__cta-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.allcat__cta-right-img {
  height: 188px;
  width: auto;
  display: block;
  object-fit: contain;
}

.allcat__content-card {
  background: #ffffff;
  border-radius: 32px;
  margin: 0 54px;
  padding: 48px 54px 56px;
}

.allcat__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.allcat__content-card .categories__header {
  margin-bottom: 32px;
}

.allcat__cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(237px, 1fr));
  gap: 20px;
}

.allcat__cat-grid .category-card {
  flex: unset;
  width: 237.2px;
  height: 248.02px;
  padding: 16px;
  background: #FAF9F6;
  border: 1.13px solid #6B7280;
  border-radius: 13.5px;
  opacity: 1;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.allcat__cat-grid .category-card__icon-wrap {
  height: 110px;
  margin-bottom: 12px;
}

.allcat__cat-grid .category-card__name {
  font-size: 22px;
}

.allcat__cat-grid .category-card__desc {
  font-size: 12px;
}

@media (max-width: 640px) {
  .allcat__cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
  }
  .allcat__cat-grid .category-card {
    min-height: 200px;
  }
  .allcat__cat-grid .category-card__icon-wrap {
    height: 90px;
  }
}

@media (max-width: 380px) {
  .allcat__cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ── AllCategories mobile ── */
@media (max-width: 768px) {
  /* Banner: hide decorations, stack vertically */
  .allcat__banner { flex-direction: column; min-height: auto; padding: 32px 20px 28px; }
  .allcat__banner-left, .allcat__banner-right { display: none; }
  .allcat__banner-center { padding: 0; }
  .allcat__banner-heading { font-size: 32px; }
  .allcat__banner-sub br { display: none; }
  /* Search: stack input + button */
  .allcat__banner-search-row { flex-direction: column; max-width: 100%; gap: 10px; }
  .allcat__banner-search-wrap { width: 100%; box-sizing: border-box; }
  .allcat__banner-search-btn { width: 100%; }
  /* Category cards: 2-col, release fixed size */
  .allcat__cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .allcat__cat-grid .category-card { width: 100%; height: auto; min-height: 180px; }
  .allcat__cat-grid .category-card__icon-wrap { height: 90px; }
  .allcat__cat-grid .category-card__name { font-size: 18px; }
  /* CTA: stack, hide deco images */
  .allcat__cta { flex-direction: column; height: auto; padding: 24px 20px; text-align: center; }
  .allcat__cta-left, .allcat__cta-right { display: none; }
  .allcat__cta-desc br { display: none; }
  .allcat__cta-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .allcat__banner-heading { font-size: 26px; }
  .allcat__cat-grid { gap: 10px; }
  .allcat__cat-grid .category-card { min-height: 150px; padding: 12px 10px; }
  .allcat__cat-grid .category-card__icon-wrap { height: 68px; margin-bottom: 8px; }
  .allcat__cat-grid .category-card__name { font-size: 15px; }
  .allcat__cat-grid .category-card__desc { font-size: 11px; }
}

@keyframes allcat-fadein {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes allcat-icon-bounce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-10px); }
  70%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

.allcat__card {
  background: #fff;
  border-radius: 24px;
  border: 1.5px solid #f0f0ee;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.3s ease, border-color 0.3s;
  animation: allcat-fadein 0.5s ease both;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.allcat__card:hover {
  transform: translateY(-10px);
  border-color: var(--accent);
  box-shadow: 0 20px 48px rgba(0,0,0,0.10), 0 0 0 1px var(--accent);
}

/* Icon area — soft tinted background */
.allcat__card-icon-area {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0 28px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}

.allcat__card:hover .allcat__card-icon-area {
  background: var(--accent);
}

/* Subtle circle blob behind icon */
.allcat__card-icon-area::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.12;
  transition: opacity 0.3s, transform 0.3s;
}

.allcat__card:hover .allcat__card-icon-area::before {
  opacity: 0;
}

/* White circle ring holding the icon */
.allcat__card-icon-ring {
  width: 88px;
  height: 88px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  position: relative;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
}

.allcat__card:hover .allcat__card-icon-ring {
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  animation: allcat-icon-bounce 0.5s ease forwards;
}

.allcat__card-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Text content area */
.allcat__card-content {
  padding: 20px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.allcat__card-name {
  font-family: 'Caveat Brush', cursive;
  font-size: 26px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 6px;
  line-height: 1.15;
  transition: color 0.3s;
}

.allcat__card:hover .allcat__card-name {
  color: var(--accent);
}

.allcat__card-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #888;
  line-height: 1.5;
  flex: 1;
}

.allcat__card-cta {
  display: inline-block;
  margin-top: 14px;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  color: var(--accent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
}

.allcat__card:hover .allcat__card-cta {
  opacity: 1;
  transform: translateY(0);
}

/* Colored bottom bar that slides in */
.allcat__card-bar {
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.allcat__card:hover .allcat__card-bar {
  transform: scaleX(1);
}

@media (max-width: 992px) {
  .allcat__content-card {
    margin: 0 24px;
    padding: 32px 24px 40px;
  }
  .allcat__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .allcat__hero {
    padding: 36px 20px 24px;
  }
  .allcat__content-card {
    margin: 0 12px;
    padding: 24px 16px 32px;
    border-radius: 24px;
  }
  .allcat__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .allcat__title {
    font-size: 38px;
  }
}

@media (max-width: 400px) {
  .allcat__content-card {
    margin: 0 8px;
    padding: 20px 12px 28px;
    border-radius: 20px;
  }
}

/* ══════════════════════════════════════════
   Blog Page
══════════════════════════════════════════ */

/* Hero */
.blog-hero {
  display: flex;
  align-items: stretch;
  background: #fffdf7;
  margin: 0 0 0 54px;
  border-radius: 32px 0 0 32px;
  overflow: hidden;
  min-height: 370px;
  box-sizing: border-box;
}
.blog-hero__content {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 48px 0 48px 41px;
  position: relative;
  z-index: 1;
}
.blog-hero__heading {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 64px;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.05;
  letter-spacing: -1px;
}
.blog-hero__sub-wrap {
  position: relative;
  max-width: 580px;
  min-height: 84px;
}
.blog-hero__star {
  position: absolute;
  left: -30px;
  top: -10px;
  width: 28px;
  height: 28px;
}
.blog-hero__sub {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 500;
  font-size: 32px;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.1;
}
.blog-hero__cta {
  align-self: flex-start;
  margin-top: 8px;
  padding: 14px 32px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.2s, transform 0.2s;
}
.blog-hero__cta:hover {
  box-shadow: 2px 2px 0 #1a1a1a;
  transform: translate(1px, 1px);
}
.blog-hero__image {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Content card */
.blog-content {
  background: #fff;
  border-radius: 32px;
  margin: 0 54px 64px;
  padding: 48px;
}
.blog-main {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* Articles */
.blog-articles { flex: 1; min-width: 0; }
.blog-articles__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.blog-articles__title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0;
}
.blog-articles__count {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #aaa;
  margin-left: 10px;
}
.blog-search-wrap {
  position: relative;
  flex-shrink: 0;
}
.blog-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.blog-search-input {
  padding: 10px 36px 10px 36px;
  border: 1.5px solid #e0ddd4;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  outline: none;
  width: 220px;
  background: #faf9f6;
  color: #1a1a1a;
  box-sizing: border-box;
}
.blog-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}

/* Card grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.blog-empty {
  grid-column: 1 / -1;
  padding: 48px 0;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  color: #aaa;
  font-size: 15px;
}

/* Blog card */
.blog-card {
  width: 100%;
  height: auto;
  min-height: 320px;
  background: #faf9f6;
  border: 1.13px solid #6b7280;
  border-radius: 13.5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
  box-sizing: border-box;
}
.blog-card--skeleton { cursor: default; }
.blog-card__cover {
  height: 140px;
  width: 100%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.blog-card__cover-grad {
  height: 140px;
  flex-shrink: 0;
}
.blog-card__shimmer {
  background: linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.blog-card__body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.blog-card__cat {
  display: inline-block;
  background: #e8e8e8;
  border-radius: 999px;
  padding: 2px 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #1a1a1a;
  width: fit-content;
}
.blog-card__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.2;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__excerpt {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #888;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #efefef;
}
.blog-card__author-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.blog-card__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.blog-card__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 800;
}
.blog-card__author-name {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-card__date {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
  flex-shrink: 0;
}
.blog-card__skel-line {
  border-radius: 6px;
  background: #ebebeb;
}

/* Sidebar */
.blog-sidebar {
  width: 377px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.blog-sidebar__cat-box {
  background: #5dae6133;
  border: 1px solid #6b7280;
  border-radius: 16px;
  padding: 27px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}
.blog-sidebar__cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-sidebar__cat-title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0;
}
.blog-sidebar__cat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.blog-cat-btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #e1eadf;
  border-radius: 16px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: left;
  box-sizing: border-box;
  transition: all 0.15s;
}
.blog-cat-btn--active {
  background: #5dae61;
  border-color: #5dae61;
  color: #fff;
}
.blog-cat-btn__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

/* CTA */
.blog-cta {
  background: linear-gradient(135deg,#e8f5e9,#f0faf0);
  border-radius: 24px;
  margin-top: 48px;
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.blog-cta__deco-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 160px;
  display: flex;
  align-items: flex-end;
  padding-left: 24px;
  opacity: 0.9;
}
.blog-cta__center {
  text-align: center;
  z-index: 1;
}
.blog-cta__heading {
  font-family: 'Caveat Brush', cursive;
  font-size: 36px;
  color: #1a1a1a;
  margin: 0 0 8px;
}
.blog-cta__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #555;
  margin: 0 0 20px;
  max-width: 380px;
}
.blog-cta__btn {
  display: inline-block;
  padding: 13px 36px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}
.blog-cta__btn:hover {
  box-shadow: 2px 2px 0 #1a1a1a;
  transform: translate(1px, 1px);
}
.blog-cta__deco-right {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  opacity: 0.7;
}
.blog-cta__tagline {
  font-family: 'Caveat Brush', cursive;
  font-size: 28px;
  color: #2e7d32;
  margin: 0;
  line-height: 1.3;
}

/* ── Blog responsive ── */
@media (max-width: 960px) {
  .blog-hero__heading { font-size: 48px; }
  .blog-hero__sub { font-size: 24px; }
  .blog-sidebar { width: 300px; }
}

@media (max-width: 768px) {
  /* Hero */
  .blog-hero { margin: 0; border-radius: 0; flex-direction: column; min-height: auto; }
  .blog-hero__image { display: none; }
  .blog-hero__content { flex: none; padding: 32px 20px 28px; gap: 12px; }
  .blog-hero__heading { font-size: 36px; }
  .blog-hero__sub-wrap { min-height: auto; max-width: 100%; }
  .blog-hero__star { display: none; }
  .blog-hero__sub { font-size: 18px; }
  .blog-hero__cta { align-self: stretch; text-align: center; font-size: 18px; padding: 12px 24px; }
  /* Content card */
  .blog-content { margin: 0 16px 40px; padding: 24px 16px 28px; border-radius: 24px; }
  /* Stack articles + sidebar */
  .blog-main { flex-direction: column; gap: 28px; }
  .blog-sidebar { width: 100%; }
  .blog-sidebar__cat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .blog-cat-btn { height: 44px; font-size: 13px; }
  /* Articles header */
  .blog-articles__header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .blog-search-input { width: 100%; }
  .blog-search-wrap { width: 100%; }
  /* Grid: 2 col, cards fluid */
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .blog-card { width: 100%; height: auto; min-height: 280px; }
  .blog-card__cover, .blog-card__cover-grad { height: 120px; }
  /* CTA */
  .blog-cta { padding: 32px 20px; flex-direction: column; gap: 16px; }
  .blog-cta__deco-left, .blog-cta__deco-right { display: none; }
  .blog-cta__heading { font-size: 28px; }
  .blog-cta__btn { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
  .blog-hero__heading { font-size: 30px; }
  .blog-hero__sub { font-size: 16px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .blog-card { min-height: 240px; }
  .blog-card__cover, .blog-card__cover-grad { height: 100px; }
  .blog-card__title { font-size: 18px; }
  .blog-card__excerpt { display: none; }
  .blog-sidebar__cat-list { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   Blog Detail Page
══════════════════════════════════════════ */

/* Hero */
.blog-detail-hero {
  display: flex;
  align-items: center;
  background: #fffdf7;
  margin: 0 0 0 54px;
  border-radius: 32px 0 0 32px;
  overflow: hidden;
  box-sizing: border-box;
}
.blog-detail-hero__content {
  flex: 0 0 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 36px 40px 36px 41px;
}
.blog-detail-hero__meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.blog-detail-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #888;
  padding: 0;
}
.blog-detail-hero__sep { color: #ddd; }
.blog-detail-hero__category {
  padding: 3px 12px;
  background: #e8f5e9;
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #2d8a4e;
}
.blog-detail-hero__title {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 54px;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.5px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-detail-hero__author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.blog-detail-hero__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5dae61;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.blog-detail-hero__author {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #444;
}
.blog-detail-hero__date {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #aaa;
}
.blog-detail-hero__image {
  flex: 0 0 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 32px 24px 0;
}
.blog-detail-hero__image--skeleton {
  background: #f0ede6;
  opacity: 0.4;
  min-height: 160px;
}
.blog-detail-hero__back-btn {
  align-self: flex-start;
  padding: 12px 28px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  text-decoration: none;
}

/* Content card */
.blog-detail-card {
  background: #fff;
  border-radius: 32px;
  margin: 0 54px 64px;
  padding: 48px 48px 56px;
}
.blog-detail-main {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.blog-detail-body { flex: 1; min-width: 0; }
.blog-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.blog-detail-tag { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800; color: #4a7c59; background: #e8f2ec; border: 1.5px solid #c2dbc9; border-radius: 999px; padding: 4px 12px; }

/* Cover image */
.blog-detail-cover-wrap {
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 28px;
  border: 2px solid #e8e4dc;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.blog-detail-cover {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
}

/* Notebook */
.blog-notebook {
  position: relative;
  background: #8db294;
  border-radius: 24px;
  padding: 12px;
  border: 4px solid #54765c;
  width: 100%;
  box-sizing: border-box;
}
.blog-notebook__spiral {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -36px;
  width: 90px;
  border-radius: 24px 0 0 24px;
  z-index: 20;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 48px 0 12px;
}
.blog-notebook__inner {
  border-radius: 24px;
  padding: 12px 10px 10px;
  border: 2px dashed #54765c;
  box-sizing: border-box;
}
.blog-notebook__lines {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: repeating-linear-gradient(#fdfcf5, #fdfcf5 27px, #ddd8c6 28px);
  background-position-y: 14px;
}
.blog-notebook__margin-line {
  position: absolute;
  left: 50px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: rgba(220,80,80,0.3);
  z-index: 1;
}
.blog-notebook-body {
  position: relative;
  z-index: 2;
  outline: none;
  line-height: 28px;
  padding: 14px 60px 64px 54px;
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
}

/* Sidebar */
.blog-detail-sidebar {
  width: 290px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.blog-side-card {
  background: #fff;
  border: 2px solid #6b7280;
  border-radius: 16px;
  padding: 16px 18px;
}
.blog-side-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.blog-side-card__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: #1a1a1a;
}

/* Writer */
.blog-writer { display: flex; gap: 12px; align-items: flex-start; }
.blog-writer__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: #5dae61;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.blog-writer__name { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800; color: #1a1a1a; margin-bottom: 4px; }
.blog-writer__bio { font-family: 'Nunito', sans-serif; font-size: 12px; color: #777; line-height: 1.55; }

/* ToC */
.blog-toc { display: flex; flex-direction: column; gap: 8px; }
.blog-toc__item { display: flex; gap: 10px; align-items: flex-start; }
.blog-toc__num { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800; color: #5dae61; min-width: 18px; flex-shrink: 0; }
.blog-toc__text { font-family: 'Nunito', sans-serif; font-size: 12px; color: #666; font-weight: 500; line-height: 1.45; }
.blog-toc__text--active { color: #1a1a1a; font-weight: 700; }

/* Related card */
.blog-related-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; background: none; border: none; cursor: pointer;
  width: 100%; text-align: left;
}
.blog-related-card--bordered { border-bottom: 1px solid #f0ede6; }
.blog-related-card__thumb { width: 52px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.blog-related-card__body { flex: 1; min-width: 0; }
.blog-related-card__title {
  font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700; color: #1a1a1a;
  line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-related-card__meta { font-family: 'Nunito', sans-serif; font-size: 11px; color: #aaa; margin-top: 2px; }

/* Sticky CTA */
.blog-sticky-cta {
  background: #fce7f3; border: 2px solid #fbcfe8; border-radius: 16px;
  padding: 20px 18px; position: relative; overflow: hidden;
}
.blog-sticky-cta__fold {
  position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 24px 24px 0;
  border-color: transparent #fff transparent transparent;
}
.blog-sticky-cta__heading { font-family: 'Caveat Brush', cursive; font-size: 24px; color: #be185d; line-height: 1.2; margin-bottom: 8px; }
.blog-sticky-cta__sub { font-family: 'Nunito', sans-serif; font-size: 11px; color: #9d174d; margin-bottom: 14px; }
.blog-sticky-cta__btn {
  display: inline-block; padding: 8px 18px; background: #be185d; color: #fff;
  border: 2px solid #9d174d; border-radius: 10px; box-shadow: 2px 2px 0 #9d174d;
  font-family: 'Caveat Brush', cursive; font-size: 16px; text-decoration: none;
}
.blog-sticky-cta__heart { position: absolute; bottom: 8px; right: 12px; font-size: 22px; opacity: 0.4; }

/* Suggestions */
.blog-suggestions { margin-top: 52px; }
.blog-suggestions__header { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.blog-suggestions__title { font-family: 'Caveat', cursive; font-weight: 700; font-size: 28px; color: #1a1a1a; margin: 0; }
.blog-suggestions__row { display: flex; gap: 20px; flex-wrap: wrap; }
.blog-suggest-card {
  flex: 1; min-width: 160px; max-width: 220px;
  background: #faf9f6; border: 1.13px solid #6b7280; border-radius: 13.5px;
  overflow: hidden; display: flex; flex-direction: column;
  cursor: pointer; transition: box-shadow 0.2s, transform 0.15s;
}
.blog-suggest-card__cover { width: 100%; height: auto; object-fit: contain; display: block; }
.blog-suggest-card__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.blog-suggest-card__cat { font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 800; color: #555; background: #e8e8e8; padding: 2px 8px; border-radius: 999px; width: fit-content; }
.blog-suggest-card__title { font-family: 'Caveat Brush', cursive; font-size: 18px; color: #1a1a1a; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-suggest-card__excerpt { font-family: 'Nunito', sans-serif; font-size: 11px; color: #aaa; line-height: 1.5; }
.blog-suggest-card__meta { margin-top: auto; font-family: 'Nunito', sans-serif; font-size: 11px; color: #bbb; }

/* Footer CTA */
.blog-detail-footer-cta { display: flex; justify-content: center; margin-top: 48px; }
.blog-detail-more-btn {
  padding: 13px 36px; background: #5dae61; color: #fff;
  border: 2px solid #1a1a1a; border-radius: 12px; box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive; font-size: 20px; text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}
.blog-detail-more-btn:hover { box-shadow: 2px 2px 0 #1a1a1a; transform: translate(1px,1px); }

/* ── BlogDetail responsive ── */
@media (max-width: 960px) {
  .blog-detail-hero__title { font-size: 40px; }
  .blog-detail-sidebar { width: 240px; }
}

@media (max-width: 768px) {
  /* Hero */
  .blog-detail-hero { margin: 0; border-radius: 0; flex-direction: column; align-items: flex-start; }
  .blog-detail-hero__content { flex: none; width: 100%; padding: 28px 20px 24px; }
  .blog-detail-hero__image { display: none; }
  .blog-detail-hero__title { font-size: 32px; }
  /* Content card */
  .blog-detail-card { margin: 0 16px 40px; padding: 24px 16px 32px; border-radius: 24px; }
  /* Stack sidebar below body */
  .blog-detail-main { flex-direction: column; gap: 32px; }
  .blog-detail-sidebar { width: 100%; }
  /* Notebook: hide spiral, reduce padding */
  .blog-notebook__spiral { display: none; }
  .blog-notebook-body { padding: 14px 20px 40px 20px; font-size: 14px; }
  .blog-notebook__margin-line { display: none; }
  /* Suggestions: horizontal scroll */
  .blog-suggestions__row { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
  .blog-suggestions__row::-webkit-scrollbar { display: none; }
  .blog-suggest-card { min-width: 220px; flex: 0 0 220px; scroll-snap-align: start; }
}

@media (max-width: 480px) {
  .blog-detail-hero__title { font-size: 26px; }
  .blog-detail-card { margin: 0 12px 32px; padding: 20px 14px 28px; }
  .blog-notebook-body { font-size: 13px; line-height: 26px; }
  .blog-suggest-card { min-width: 180px; flex: 0 0 180px; }
}

/* ══════════════════════════════════════════
   Housing Page
══════════════════════════════════════════ */
.housing {
  background: transparent;
}

/* ── Hero ── */
.housing__hero {
  display: flex;
  align-items: flex-start;
  padding: 0 80px 20px 41px;
  background: #fffdf7;
  margin: 0 54px;
  border-radius: 32px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  min-height: 370px;
}

.housing__content-card {
  background: #ffffff;
  border-radius: 32px;
  margin: 0 54px 64px;
  padding-top: 40px;
  padding-bottom: 48px;
  overflow: clip;
}

.housing__hero-left {
  flex: 0 0 716px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 48px;
  position: relative;
  z-index: 1;
}

.housing__hero-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 64px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 66.46px;
  letter-spacing: -1.06px;
  width: 716px;
}

.housing__hero-accent {
  color: #5DAE61;
  position: relative;
  display: inline-block;
}

.housing__hero-underline {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 12px;
  display: block;
}

.housing__hero-sub {
  display: flex;
  align-items: center;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: 0px;
  color: var(--text-dark);
  white-space: normal;
  height: auto;
}

.housing__hero-sub-icon {
  flex-shrink: 0;
  display: block;
  align-self: flex-start;
  margin-top: -14px;
  margin-right: 6px;
  margin-left: -32px;
}

.housing__search-box {
  display: flex;
  flex-direction: column;
  background: #FAF9F6;
  border-radius: 16px;
  border: 1.13px solid #C0C9C380;
  overflow: hidden;
  width: 717px;
  height: 130px;
  box-sizing: border-box;
}

.housing__search-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 14px;
  flex: 1;
}

.housing__search-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.housing__search-label {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0px;
  line-height: 20px;
  width: 140px;
  height: 20px;
  display: block;
}

.housing__search-input {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  outline: none;
  background: #FFFFFF;
  width: 140px;
  height: 35px;
  padding: 9px 13.5px;
  border-radius: 6.75px;
  border: 1.13px solid #6B7280;
  box-sizing: border-box;
  display: block;
}

.housing__search-select {
  cursor: pointer;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 28px;
  appearance: auto;
  -webkit-appearance: auto;
}

.housing__search-divider {
  display: none;
}

.housing__search-btn {
  padding: 10px 20px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px 0px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  align-self: flex-end;
}

.housing__search-btn:hover {
  background: #4a9a4e;
}

.housing__browse-link {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #5dae61;
  text-decoration: none;
  padding: 8px 18px;
  display: block;
}

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

.housing__hero-right {
  position: absolute;
  right: 0;
  top: -12px;
  z-index: 0;
}

.housing__hero-img {
  width: 714px;
  height: 370px;
  object-fit: contain;
  display: block;
}

/* ── Cities strip ── */
.housing__cities-wrap {
  padding: 40px 54px 32px;
}

.housing__cities-header {
  margin-bottom: 20px;
}

.housing__cities-title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 33.75px;
  line-height: 40.5px;
  letter-spacing: 0px;
  color: var(--text-dark);
  white-space: nowrap;
  height: 41px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.housing__cities-title-star {
  display: block;
  flex-shrink: 0;
  transform: rotate(120deg);
  align-self: flex-start;
  margin-top: -6px;
  margin-left: -10px;
}

.housing__cities-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #888;
}

.housing__cities-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.housing__city-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  flex: 1;
}

.housing__city-btn:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.housing__city-btn--active .housing__city-img {
  opacity: 1;
}

.housing__city-img {
  width: 120px;
  height: 72px;
  object-fit: contain;
}

.housing__city-name {
  font-family: 'Caveat Brush', cursive;
  font-size: 24px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: #333;
  width: 52px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* ── Body: filters + results ── */
.housing__body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  padding: 0 54px 54px;
  align-items: start;
}

/* ── Filters sidebar ── */
.housing__filters {
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid #e8ede8;
  padding: 24px 20px;
  position: sticky;
  top: 90px;
}

.housing__filters-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  color: #1a1a1a;
  margin-bottom: 20px;
}

.housing__filter-group {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0ee;
}

.housing__filter-label {
  font-family: 'Nunito', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  color: #999;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.housing__filter-location {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7f8f5;
  border: 1.5px solid #e0e8e0;
  border-radius: 10px;
  padding: 8px 12px;
}

.housing__filter-input {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
}

.housing__filter-date {
  background: #f7f8f5;
  border: 1.5px solid #e0e8e0;
  border-radius: 10px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
}

.housing__filter-range {
  width: 100%;
  accent-color: #5dae61;
  margin-bottom: 6px;
}

.housing__filter-range-labels {
  display: flex;
  justify-content: space-between;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #555;
}

.housing__filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  cursor: pointer;
}

.housing__filter-check input {
  accent-color: #5dae61;
  width: 15px;
  height: 15px;
}

.housing__filter-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  cursor: pointer;
}

.housing__filter-toggle input {
  accent-color: #5dae61;
  width: 15px;
  height: 15px;
}

.housing__filter-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.housing__filter-clear {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: 1.5px solid #ccc;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #666;
  cursor: pointer;
  transition: border-color 0.2s;
}

.housing__filter-clear:hover { border-color: #999; }

.housing__filter-apply {
  flex: 1;
  padding: 10px;
  background: #5dae61;
  border: none;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.housing__filter-apply:hover { background: #4a9a4e; }

/* ── Results ── */
.housing__results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: 12px;
}

.housing__results-count {
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
}

.housing__results-count strong {
  color: #5dae61;
}

.housing__results-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.housing__sort-select {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  border: 1.5px solid #d8e8d8;
  border-radius: 12px;
  padding: 9px 36px 9px 14px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.housing__sort-select:hover {
  border-color: #5dae61;
}
.housing__sort-select:focus {
  border-color: #5dae61;
  box-shadow: 0 0 0 3px rgba(93,174,97,0.12);
}

.housing__map-btn {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #5dae61;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.housing__map-btn:hover { background: #dcfce7; }

.housing__results-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #888;
  font-weight: 500;
  margin-bottom: 20px;
}

/* ── Listing grid ── */
.housing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  width: 100%;
}

.housing__card {
  background: #FAF9F6;
  border-radius: 18px;
  border: 1.5px solid #eef0ec;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.25s;
  cursor: pointer;
}

.housing__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  border-color: #5dae61;
}

.housing__card-img {
  height: 160px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px;
}

.housing__card-type-badge {
  background: rgba(255,255,255,0.90);
  color: #333;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 4px 9px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  text-transform: capitalize;
  align-self: flex-start;
}

.housing__card-verified {
  background: #5dae61;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-radius: 6px;
}

.housing__card-fav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
  backdrop-filter: blur(4px);
}

.housing__card-fav--active {
  color: #e11d48;
}

.housing__card-fav:hover {
  color: #e11d48;
  background: #fff;
}

.housing__card-body {
  padding: 14px 16px 16px;
}

.housing__card-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: #1a1a1a;
  margin-bottom: 2px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.housing__card-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.housing__card-price {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #5dae61;
}

.housing__card-price span {
  font-size: 13px;
  font-weight: 600;
  color: #888;
}

.housing__card-size {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #888;
  background: #f5f5f5;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}

.housing__card-furnished {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
  margin-bottom: 6px;
}

.housing__card-furnished--yes {
  color: #5dae61;
}

.housing__card-location {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
}

.housing__card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.housing__card-tag {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #333;
  padding: 3px 8px;
  border-radius: 6px;
}

.housing__card-avail {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  margin-bottom: 12px;
}

.housing__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f0f0ee;
  padding-top: 10px;
}

.housing__card-agent {
  display: flex;
  align-items: center;
  gap: 8px;
}

.housing__card-agent-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.housing__card-agent-name {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #444;
  line-height: 1.2;
}

.housing__card-agent-role {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #5dae61;
  line-height: 1.2;
}

.housing__card-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #5dae61;
  color: #fff;
  font-family: 'Caveat Brush', cursive;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.housing__card-details {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #5dae61;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.housing__card-details:hover {
  color: #4a9a4e;
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .housing__hero { margin: 0 24px; padding: 40px 40px 36px; }
  .housing__content-card { margin: 0 24px 48px; }
  .housing__body { grid-template-columns: 220px 1fr; }
}

@media (max-width: 768px) {
  /* Hero */
  .housing__hero { flex-direction: column; margin: 0 16px; padding: 28px 20px 24px; height: auto; min-height: unset; }
  .housing__hero-left { flex: none; width: 100%; margin-top: 0; }
  .housing__hero-right { display: none; }
  .housing__hero-title { font-size: 42px; line-height: 1.1; width: 100%; letter-spacing: -0.5px; }
  .housing__hero-sub { font-size: 22px; line-height: 1.3; }
  .housing__hero-sub-icon { margin-left: 0; }
  /* Search box */
  .housing__search-box { width: 100%; height: auto; }
  .housing__search-row { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .housing__search-field { width: calc(50% - 4px); flex: none; }
  .housing__search-label { width: 100%; }
  .housing__search-divider { display: none; }
  .housing__search-btn { width: 100%; margin-top: 4px; }
  /* Content card */
  .housing__content-card { margin: 0 16px 40px; border-radius: 28px; }
  /* Cities */
  .housing__cities-wrap { padding: 28px 20px; }
  .housing__cities-row { overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; justify-content: flex-start; padding-bottom: 8px; }
  .housing__city-btn { flex: 0 0 auto; scroll-snap-align: start; padding: 8px 12px; }
  .housing__city-img { width: 80px; height: 52px; }
  .housing__city-name { font-size: 18px; width: auto; }
  /* Body */
  .housing__body { grid-template-columns: 1fr; padding: 0 20px 40px; }
  .housing__filters { position: static; }
  .housing__grid { grid-template-columns: 1fr; }
  /* Map / trust / landlord */
  .housing__map-section { flex-direction: column; padding: 32px 20px; gap: 24px; }
  .housing__map-title { white-space: normal; }
  .housing__trust-section { flex-direction: column; padding: 32px 20px; gap: 24px; }
  .housing__trust-title { white-space: normal; font-size: 28px; }
  .housing__trust-features { flex-direction: column; gap: 16px; }
  .housing__landlord-section { flex-direction: column; padding: 32px 20px; gap: 20px; text-align: center; }
  .housing__landlord-img-wrap { display: none; }
  .housing__landlord-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .housing__hero { margin: 0 12px; padding: 24px 16px 20px; }
  .housing__hero-title { font-size: 34px; }
  .housing__hero-sub { font-size: 18px; }
  .housing__content-card { margin: 0 12px 32px; }
  .housing__search-field { width: 100%; }
  .housing__cities-title { font-size: 22px; }
  .housing__trust-feature-title { white-space: normal; font-size: 20px; }
}

/* ── Map Explore Section ── */
.housing__map-section {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 40px 54px;
}

.housing__map-left {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.housing__map-title {
  font-family: 'Caveat', cursive;
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  white-space: nowrap;
}

.housing__map-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.housing__map-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  cursor: pointer;
  width: fit-content;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.housing__map-open-btn:hover {
  background: #4a9a4e;
  box-shadow: 1px 1px 0 #1a1a1a;
  transform: translate(2px, 2px);
}

.housing__map-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.housing__map-img {
  width: 100%;
  max-width: 920px;
  height: auto;
  object-fit: contain;
}

/* ── Trust Section ── */
.housing__trust-section {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 40px 54px;
}

.housing__trust-left {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.housing__trust-title {
  font-family: 'Caveat', cursive;
  font-size: 34px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  white-space: nowrap;
}

.housing__trust-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.housing__trust-features {
  flex: 1;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.housing__trust-feature {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.housing__trust-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 2px;
}

.housing__trust-feature-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 24px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: 0px;
  color: #1a1a1a;
  white-space: nowrap;
  margin-bottom: 6px;
}

.housing__trust-feature-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  text-align: center;
}

/* ── Landlord CTA Section ── */
.housing__landlord-section {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 40px 54px;
}

.housing__landlord-img-wrap {
  flex: 0 0 420px;
}

.housing__landlord-img {
  width: 420px;
  height: auto;
  object-fit: contain;
}

.housing__landlord-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.housing__landlord-title {
  font-family: 'Caveat', cursive;
  font-size: 38px;
  font-weight: 700;
  color: #1a1a1a;
}

.housing__landlord-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #444;
}

.housing__landlord-link {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #5dae61;
  font-weight: 700;
}

.housing__landlord-tagline {
  font-family: 'Caveat Brush', cursive;
  font-size: 24px;
  font-weight: 300;
  line-height: 22.5px;
  letter-spacing: 0px;
  vertical-align: middle;
  width: 265px;
  height: 23px;
  display: flex;
  align-items: center;
  color: #1a1a1a;
}

.housing__landlord-btn {
  flex-shrink: 0;
  padding: 14px 32px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.housing__landlord-btn:hover {
  background: #4a9a4e;
  box-shadow: 1px 1px 0 #1a1a1a;
  transform: translate(2px, 2px);
}

/* ═══════════════════════════════════════════════════════════════
   Housing Detail Page (.hd__)
   ═══════════════════════════════════════════════════════════════ */

.hd {
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

.hd__hero-section {
  background: #fffdf7;
  border-radius: 32px;
  margin: 4px 54px 24px;
  padding: 6px 54px 20px;
  overflow: hidden;
  box-sizing: border-box;
}

.hd__body-card {
  background: #ffffff;
  border-radius: 32px;
  margin: 0 54px 64px;
  padding: 40px 54px;
  overflow: hidden;
  box-sizing: border-box;
}

/* ── Breadcrumb ── */
.hd__top-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.hd__back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px 9px 14px;
  border: none;
  border-radius: 50px;
  background: #f4f4f4;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #222;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, transform 0.15s;
  flex-shrink: 0;
  letter-spacing: 0.1px;
}
.hd__back-btn svg {
  transition: transform 0.18s;
}
.hd__back-btn:hover {
  background: #e8f5e9;
  color: #2e8b36;
}
.hd__back-btn:hover svg {
  transform: translateX(-3px);
}
.hd__back-btn:active { transform: scale(0.97); }

.hd__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  flex-wrap: wrap;
}

.hd__breadcrumb a {
  color: #5dae61;
  text-decoration: none;
}

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

.hd__breadcrumb-current { color: #333; }

/* ── Title row ── */
.hd__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.hd__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 44px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.15;
}

.hd__title-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 10px;
}

.hd__save-btn,
.hd__share-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.hd__save-btn:hover,
.hd__share-btn:hover {
  border-color: #5dae61;
  color: #5dae61;
}

.hd__save-btn--active {
  color: #e11d48;
  border-color: #e11d48;
}

/* ── Meta ── */
.hd__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin-bottom: 0;
}

.hd__meta-dot { color: #ccc; }

.hd__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.hd__chip {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  background: #f0f0ee;
  color: #333;
  border: 1.5px solid #e0e0de;
}

.hd__chip--verified {
  background: #5dae61;
  color: #fff;
  border-color: #5dae61;
}

/* ── Photo gallery ── */
/* ── Gallery wrapper ── */
.hd__gallery-wrap {
  position: relative;
  margin-bottom: 0;
  border-radius: 20px;
  overflow: hidden;
}

/* shared base */
.hd__gallery {
  display: grid;
  gap: 6px;
  height: 420px;
}

/* 1 photo — full */
.hd__gallery--1 { grid-template-columns: 1fr; }

/* 2 photos — 60 / 40 split */
.hd__gallery--2 { grid-template-columns: 1.4fr 1fr; }

/* 3 photos — large left + stacked right */
.hd__gallery--3 { grid-template-columns: 1.4fr 1fr; }
.hd__gallery--3 .hd__gallery-col {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
}

/* 4 photos — 2×2 grid */
.hd__gallery--4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* 5+ photos — large left + 2×2 right */
.hd__gallery--5 { grid-template-columns: 1.5fr 1fr; }
.hd__gallery-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
}

/* each photo cell */
.hd__gcell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: filter 0.2s;
}
.hd__gcell:hover { filter: brightness(0.9); }

/* "+N more" overlay on last cell */
.hd__gcell-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hd__gcell-overlay span {
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* "Show all N photos" pill button */
.hd__gallery-all-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.95);
  border: 1.5px solid #222;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  padding: 8px 14px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.15s;
  z-index: 3;
}
.hd__gallery-all-btn:hover { background: #fff; transform: translateY(-1px); }

/* ── Lightbox ── */
.hd__lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lb-fade-in 0.2s ease;
}
@keyframes lb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hd__lightbox-img {
  max-width: 88vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  user-select: none;
  animation: lb-zoom-in 0.2s ease;
}
@keyframes lb-zoom-in {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.hd__lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10001;
}
.hd__lightbox-close:hover { background: rgba(255,255,255,0.25); }

.hd__lightbox-prev,
.hd__lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  z-index: 10001;
  user-select: none;
}
.hd__lightbox-prev { left: 20px; }
.hd__lightbox-next { right: 20px; }
.hd__lightbox-prev:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.05); }
.hd__lightbox-next:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.05); }

.hd__lightbox-counter {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.75);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  padding: 6px 16px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
}

.hd__lightbox-label {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.6);
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  text-align: center;
}

/* ── Content layout ── */
.hd__content {
  display: grid;
  grid-template-columns: 1fr 370px;
  gap: 44px;
  align-items: start;
  margin-bottom: 0;
}

/* ── Left column ── */
.hd__left {
  display: flex;
  flex-direction: column;
}

.hd__section {
  padding: 24px 0;
}

.hd__section-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 14px;
}

.hd__section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hd__section-title-row .hd__section-title {
  margin-bottom: 0;
}

.hd__text-link {
  background: none;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #5dae61;
  cursor: pointer;
  padding: 0;
}

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

/* ── Summary ── */
.hd__summary {
  padding: 0 0 24px;
}

.hd__summary-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 28px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.hd__summary-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #555;
}

.hd__dot { color: #ccc; }

.hd__avail-pill {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #5dae61;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 20px;
  padding: 3px 10px;
}

/* ── About ── */
.hd__about-text {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  line-height: 1.75;
  margin-bottom: 10px;
}

/* ── Host section ── */
.hd__host-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hd__host-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hd__host-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #5dae61;
  color: #fff;
  font-family: 'Caveat Brush', cursive;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2.5px solid #1a1a1a;
}

.hd__host-details { display: flex; flex-direction: column; gap: 2px; }

.hd__host-name {
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  color: #1a1a1a;
}

.hd__host-badge {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #5dae61;
}

.hd__host-since {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #888;
}

.hd__host-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hd__host-meta-item {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #555;
}

.hd__view-profile-btn {
  align-self: flex-start;
  padding: 10px 22px;
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: #1a1a1a;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}

.hd__view-profile-btn:hover {
  box-shadow: 1px 1px 0 #1a1a1a;
  transform: translate(2px, 2px);
}

/* ── Amenities ── */
.hd__amenities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 32px;
  margin-bottom: 16px;
}

.hd__amenity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.hd__amenity-check {
  color: #5dae61;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.hd__show-all-btn {
  background: none;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  padding: 8px 18px;
  cursor: pointer;
  margin-top: 6px;
  transition: border-color 0.2s, color 0.2s;
}

.hd__show-all-btn:hover {
  border-color: #5dae61;
  color: #5dae61;
}

/* ── Room type badges ── */
.hd__type-badges-section {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hd__type-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7f8f5;
  border: 1.5px solid #e8ede8;
  border-radius: 12px;
  padding: 10px 16px;
  flex: 1;
  min-width: 120px;
}

.hd__type-badge-icon { font-size: 20px; }

.hd__type-badge-label {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}

/* ── Transport ── */
.hd__transport {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.hd__transport-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.hd__transport-badge {
  width: 26px;
  height: 26px;
  background: #1565c0;
  color: #fff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hd__transport-label { flex: 1; }

.hd__transport-time {
  color: #5dae61;
  font-weight: 700;
}

/* ── Map placeholder ── */
.hd__map-placeholder {
  width: 100%;
  height: 220px;
  background: #e8f4e8;
  border-radius: 16px;
  margin-bottom: 14px;
  border: 1.5px solid #c8dcc8;
  position: relative;
  overflow: hidden;
}

.hd__map-streets {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, #d0e8d0 40px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, #d0e8d0 60px);
}

.hd__map-pin-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hd__map-pin {
  background: #5dae61;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 20px;
  border: 2px solid #1a1a1a;
  box-shadow: 2px 2px 0 #1a1a1a;
}

/* ── Sidebar ── */
.hd__sidebar {
  position: sticky;
  top: 80px;
  margin-top: -16px;
}

.hd__sidebar-card {
  background: #fff;
  border: 2px solid #e0e8e0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}

.hd__price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.hd__price {
  font-family: 'Caveat Brush', cursive;
  font-size: 38px;
  color: #1a1a1a;
}

.hd__price-unit {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #888;
}

.hd__price-note {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #5dae61;
  margin-bottom: 18px;
}

/* ── Booking form ── */
.hd__booking-form {
  border: 1.5px solid #d0cfc8;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.hd__booking-field {
  padding: 12px 14px;
  border-bottom: 1px solid #eeede8;
}

.hd__booking-field:last-child { border-bottom: none; }

.hd__booking-field--select { display: flex; flex-direction: column; }

.hd__booking-label {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #999;
  letter-spacing: 0.8px;
  display: block;
  margin-bottom: 4px;
}

.hd__booking-value {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}

.hd__booking-select {
  width: 100%;
  border: none;
  outline: none;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

/* ── Breakdown ── */
.hd__breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.hd__breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.hd__breakdown-divider {
  height: 1px;
  background: #eeede8;
  margin: 2px 0;
}

.hd__breakdown-total {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
}

/* ── Sidebar buttons ── */
.hd__book-btn {
  width: 100%;
  padding: 14px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.hd__book-btn:hover {
  background: #4a9a4e;
  box-shadow: 1px 1px 0 #1a1a1a;
  transform: translate(2px, 2px);
}

.hd__message-btn {
  width: 100%;
  padding: 12px;
  background: #fff;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.2s;
}

.hd__message-btn:hover { background: #f5f5f5; }
.hd__message-btn--sent {
  background: #e8f5e9; color: #5DAE61; border-color: #5DAE61;
  cursor: default; pointer-events: none;
}
.hd__message-btn--sent:hover { background: #e8f5e9; }
.hd__message-btn--active {
  background: #5DAE61; color: #fff; border-color: #5DAE61;
}
.hd__message-btn--active:hover { background: #4a9c52; }

@keyframes tickPop {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg);  opacity: 1; }
}
@keyframes planeFly {
  0%   { transform: translateX(0) translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateX(28px) translateY(-28px) rotate(-35deg); opacity: 0; }
}
.hd__btn-tick { display: inline-block; animation: tickPop 0.4s cubic-bezier(.34,1.56,.64,1) forwards; }
.hd__btn-plane { display: inline-block; animation: planeFly 0.5s ease forwards; }

.hd__not-charged {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #888;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
}

.hd__secure-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #5dae61;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 10px;
  padding: 10px;
}

/* ── Availability calendar ── */
.hd__availability {
  padding: 32px 0;
}

.hd__calendar { max-width: 400px; }

.hd__cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hd__cal-month {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  color: #1a1a1a;
}

.hd__cal-nav {
  background: none;
  border: none;
  font-size: 20px;
  color: #888;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}

.hd__cal-nav:hover { background: #f0f0ee; }

.hd__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.hd__cal-dow {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #888;
  text-align: center;
  padding: 4px;
}

.hd__cal-day {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 7px 4px;
  border-radius: 8px;
}

.hd__cal-day--empty { /* invisible placeholder */ }

.hd__cal-day--available {
  background: #dcfce7;
  color: #166534;
}

.hd__cal-day--start {
  background: #5dae61;
  color: #fff;
  font-weight: 800;
}

.hd__avail-info {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hd__avail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #555;
}

.hd__avail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5dae61;
  flex-shrink: 0;
  display: inline-block;
}

/* ── Lower grid ── */
.hd__lower-grid {
}

/* ── Good to know ── */
.hd__good-to-know {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.hd__gtk-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hd__gtk-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.hd__gtk-check {
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.hd__gtk-check--yes { color: #5dae61; }
.hd__gtk-check--no  { color: #e11d48; }

/* ── Verification bar ── */
.hd__verify-bar {
  background: #EFF6E9;
  border: 1.13px solid #5DAE6133;
  border-radius: 13.5px;
  padding: 36px 36px 36px 24px;
  display: flex;
  align-items: center;
  gap: 35px;
  margin: 32px 0 16px;
  flex-wrap: wrap;
  min-height: 173.25px;
  opacity: 1;
}

.hd__verify-badge {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.hd__verify-shield img { width: 88px; height: 88px; }

.hd__verify-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 26px;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.hd__verify-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #555;
  max-width: 300px;
  line-height: 1.6;
}

.hd__verify-checks {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex: 1;
}

.hd__verify-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0px;
  color: #1A1A1A;
  text-align: center;
}

.hd__verify-check img {
  width: 48px;
  height: 48px;
}

.hd__verify-learn {
  background: none;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #5dae61;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
  padding: 0;
}

.hd__verify-learn:hover { text-decoration: underline; }

/* ── Report ── */
.hd__report {
  text-align: center;
  padding: 16px 0 40px;
}

.hd__report-btn {
  background: none;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
}

.hd__report-btn:hover {
  color: #e11d48;
  text-decoration: underline;
}

/* ── Report Modal ── */
.report-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.report-modal {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 480px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.report-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 18px;
  color: #888;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.report-modal__close:hover { background: #f5f5f5; color: #333; }

.report-modal__header {
  margin-bottom: 24px;
}
.report-modal__header i {
  font-size: 22px;
  color: #e11d48;
  margin-bottom: 10px;
  display: block;
}
.report-modal__header h3 {
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 6px;
}
.report-modal__header p {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #666;
  margin: 0;
}

.report-modal__reasons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.report-modal__reason {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.report-modal__reason input[type="radio"] { accent-color: #e11d48; }
.report-modal__reason--active {
  border-color: #e11d48;
  background: #fff5f7;
  color: #e11d48;
}

.report-modal__details {
  width: 100%;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #374151;
  resize: none;
  outline: none;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.report-modal__details:focus { border-color: #e11d48; }

.report-modal__submit {
  width: 100%;
  background: #e11d48;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.report-modal__submit:hover:not(:disabled) { background: #be123c; }
.report-modal__submit:disabled { opacity: 0.5; cursor: not-allowed; }

.report-modal__success {
  text-align: center;
  padding: 16px 0;
}
.report-modal__success i {
  font-size: 48px;
  color: #5dae61;
  margin-bottom: 16px;
  display: block;
}
.report-modal__success h3 {
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 8px;
}
.report-modal__success p {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #666;
  margin: 0 0 24px;
}


/* ── Responsive ── */
@media (max-width: 1100px) {
  .hd__hero-section { margin: 24px 24px 20px; padding: 28px 40px 36px; }
  .hd__body-card { margin: 0 24px 48px; padding: 32px 32px; }
  .hd__content { grid-template-columns: 1fr 320px; gap: 28px; }
}

@media (max-width: 900px) {
  .hd__content { grid-template-columns: 1fr; }
  .hd__sidebar { position: static; }
}

@media (max-width: 768px) {
  .hd__hero-section { margin: 16px 16px 16px; padding: 24px 24px 28px; border-radius: 28px; }
  .hd__body-card { margin: 0 16px 40px; padding: 24px 20px; border-radius: 28px; }
  .hd__gallery { grid-template-columns: 1fr; height: 260px; }
  .hd__gallery-grid { display: none; }
  .hd__gallery-grid2 { display: none; }
  .hd__title { font-size: 32px; }
  .hd__title-row { flex-wrap: wrap; gap: 10px; }
  .hd__meta { font-size: 13px; gap: 6px; }
  .hd__breadcrumb { font-size: 12px; }
  .hd__breadcrumb-current { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
  .hd__good-to-know { flex-direction: column; gap: 16px; }
  .hd__verify-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hd__verify-learn { margin-left: 0; }
  .hd__type-badges-section { display: grid; grid-template-columns: 1fr 1fr; }
  .hd__amenities-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hd__hero-section { margin: 12px 12px 12px; padding: 18px 16px 22px; border-radius: 24px; }
  .hd__body-card { margin: 0 12px 32px; padding: 20px 16px; border-radius: 24px; }
  .hd__title { font-size: 26px; }
  .hd__gallery { height: 220px; }
  .hd__summary-title { font-size: 22px; }
  .hd__sidebar-card { padding: 18px 16px; }
  .hd__price { font-size: 30px; }
  .hd__verify-checks { gap: 6px; }
  .hd__type-badges-section { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Profile Page
   ═══════════════════════════════════════════════════════════════ */

.profile-page {
  background: var(--bg-main);
  min-height: calc(100vh - var(--navbar-h));
}

/* ══════════════════════════════════
   Cover Banner
   ══════════════════════════════════ */
.profile-cover {
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
  padding: 40px 48px 36px;
}

.profile-cover__circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.profile-cover__circle--1 {
  width: 300px;
  height: 300px;
  background: rgba(93, 174, 97, 0.12);
  top: -100px;
  right: -60px;
}

.profile-cover__circle--2 {
  width: 180px;
  height: 180px;
  background: rgba(93, 174, 97, 0.07);
  bottom: -80px;
  right: 260px;
}

.profile-cover__circle--3 {
  width: 90px;
  height: 90px;
  background: rgba(255, 255, 255, 0.04);
  top: 20px;
  left: 42%;
}

.profile-cover__inner {
  max-width: 1084px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  z-index: 1;
}

.profile-cover__left {
  display: flex;
  align-items: center;
  gap: 22px;
}

.profile-cover__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.profile-cover__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid #5dae61;
  box-shadow: 4px 4px 0px #5dae61;
  background: #e8f5ec;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Caveat Brush', cursive;
  font-size: 42px;
  color: var(--green-dark);
  flex-shrink: 0;
}

.profile-cover__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-cover__photo-btn {
  position: absolute;
  bottom: 2px;
  right: -2px;
  width: 28px;
  height: 28px;
  background: #5dae61;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.15s;
}

.profile-cover__photo-btn:hover {
  background: #3d8c60;
}

.profile-cover__identity {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-cover__name {
  font-family: 'Caveat Brush', cursive;
  font-size: 38px;
  font-weight: 400;
  color: #fff;
  line-height: 1;
}

.profile-cover__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-cover__location {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Poppins', sans-serif;
}


/* Badge base */
.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.2px;
}

/* Default (sidebar) badge colors */
.profile-badge--verified {
  background: #dcfce7;
  color: #166534;
  border: 1.5px solid #86efac;
}

.profile-badge--role {
  background: #f3f4f6;
  color: var(--text-mid);
  border: 1.5px solid var(--border);
  text-transform: capitalize;
}

/* Cover-specific badge overrides */
.profile-cover__badges .profile-badge--verified {
  background: rgba(134, 239, 172, 0.18);
  color: #86efac;
  border-color: rgba(134, 239, 172, 0.35);
}

.profile-cover__badges .profile-badge--role {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Stats box (right side of cover) */
.profile-cover__stats {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 18px 8px;
  flex-shrink: 0;
}

.profile-cover__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 28px;
}

.profile-cover__stat-num {
  font-family: 'Caveat Brush', cursive;
  font-size: 34px;
  color: #fff;
  line-height: 1;
}

.profile-cover__stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.3px;
}

.profile-cover__stat-sep {
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* ══════════════════════════════════
   Body (below cover)
   ══════════════════════════════════ */
.profile-body {
  padding: 28px 0 72px;
}

.profile-body__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* ══════════════════════════════════
   Sidebar cards
   ══════════════════════════════════ */
.profile-sidebar {
  width: 252px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-sidebar__card {
  background: var(--white);
  border: 2.25px solid #1a1a1a;
  border-radius: 20px;
  box-shadow: 4px 4px 0px #1a1a1a;
  padding: 20px 20px 18px;
}

.profile-sidebar__card-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 19px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 14px;
}

.profile-sidebar__info-rows {
  display: flex;
  flex-direction: column;
}

.profile-sidebar__info-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-mid);
  font-family: 'Poppins', sans-serif;
  line-height: 1.45;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.profile-sidebar__info-row:first-child {
  padding-top: 0;
}

.profile-sidebar__info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.profile-sidebar__info-row svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #5dae61;
}

/* Action buttons card */
.profile-sidebar__card--actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 44px;
  background: #1a1a1a;
  color: #fff;
  border: 2.25px solid #1a1a1a;
  border-radius: 12px;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.1s, transform 0.1s;
  box-shadow: 3px 3px 0px #5dae61;
}

.profile-action-btn:hover {
  background: #5dae61;
  border-color: #5dae61;
  box-shadow: 3px 3px 0px #1a1a1a;
  transform: translateY(-1px);
  color: #fff;
}

.profile-action-btn--outline {
  background: none;
  color: var(--text-dark);
  border-color: var(--border);
  box-shadow: none;
}

.profile-action-btn--outline:hover {
  border-color: #5dae61;
  color: #5dae61;
  box-shadow: none;
  background: rgba(93, 174, 97, 0.06);
  transform: none;
}

/* Profile completion card */
.profile-completion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.profile-completion__pct {
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  color: #5dae61;
  line-height: 1;
}

.profile-completion__bar {
  height: 8px;
  background: #ebebeb;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid #d0cfc8;
}

.profile-completion__fill {
  height: 100%;
  background: linear-gradient(to right, #3d8c60, #5dae61, #8fd892);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.profile-completion__hint {
  font-size: 11.5px;
  color: var(--text-mid);
  font-family: 'Poppins', sans-serif;
  line-height: 1.5;
}

/* ══════════════════════════════════
   Main area
   ══════════════════════════════════ */
.profile-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Tabs ── */
.profile-tabs {
  display: flex;
  gap: 4px;
  background: var(--white);
  border: 2.25px solid #1a1a1a;
  border-radius: 18px;
  box-shadow: 3px 3px 0px #1a1a1a;
  padding: 6px;
}

.profile-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 12px;
  border: none;
  background: none;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-mid);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.profile-tab-btn:hover {
  background: rgba(93, 174, 97, 0.08);
  color: var(--text-dark);
}

.profile-tab-btn.is-active {
  background: #1a1a1a;
  color: var(--white);
}

/* ── Panel card ── */
.profile-panel {
  background: var(--white);
  border: 2.25px solid #1a1a1a;
  border-radius: 24px;
  box-shadow: 4px 4px 0px #1a1a1a;
  padding: 32px;
}

.profile-panel__header {
  margin-bottom: 12px;
}

.profile-panel__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 26px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.profile-panel__subtitle {
  font-size: 13px;
  color: var(--text-mid);
  font-family: 'Poppins', sans-serif;
}

/* ── Form ── */
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile-form__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-form__section-label {
  font-family: 'Caveat Brush', cursive;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #5dae61;
  padding-bottom: 6px;
  border-bottom: 1.5px solid rgba(93, 174, 97, 0.25);
}

.profile-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.profile-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-form__field--full {
  grid-column: 1 / -1;
}

.profile-form__label {
  font-family: 'Caveat Brush', cursive;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-dark);
  letter-spacing: 0.2px;
}

.profile-form__input-wrap {
  position: relative;
}

.profile-form__input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 2.25px solid #1a1a1a;
  border-radius: 12px;
  background: #FBF9F4;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--text-dark);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.profile-form__input:focus {
  border-color: #5dae61;
  box-shadow: 0 0 0 3px rgba(93, 174, 97, 0.14);
  background: #fff;
}

.profile-form__textarea {
  height: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
  line-height: 1.6;
  font-family: 'Poppins', sans-serif;
}

.profile-form__input-wrap .profile-form__input {
  padding-right: 44px;
}

.profile-form__verified-tick {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: #dcfce7;
  border: 1.5px solid #86efac;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #166534;
  pointer-events: none;
}

.profile-form__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  margin-top: 4px;
}

.profile-form__save-btn {
  height: 48px;
  padding: 0 28px;
  background: #1a1a1a;
  color: var(--white);
  border: 2.25px solid #1a1a1a;
  border-radius: 12px;
  font-family: 'Caveat Brush', cursive;
  font-size: 19px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.1s, transform 0.1s;
  box-shadow: 3px 3px 0px var(--green-dark);
}

.profile-form__save-btn:hover:not(:disabled) {
  background: var(--green-dark);
  border-color: var(--green-dark);
  box-shadow: 3px 3px 0px #1a1a1a;
  transform: translateY(-1px);
}

.profile-form__save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Phone layout inside profile form ── */
.profile-form__phone {
  display: flex;
  gap: 8px;
}

.profile-form__phone-num {
  flex: 1;
}

/* ── Native select wrapper in profile form ── */
.profile-form__select-wrap {
  position: relative;
  display: block;
}

.profile-form__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}

.profile-form__select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ── Dropdowns inside profile-form match profile-form__input style ── */
.profile-form .search-dropdown__trigger.auth-form__input {
  height: 48px;
  border: 2.25px solid #1a1a1a;
  border-radius: 12px;
  background: #FBF9F4;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.profile-form .search-dropdown__trigger.auth-form__input:hover,
.profile-form .search-dropdown__trigger.auth-form__input:focus {
  border-color: #5dae61;
  box-shadow: 0 0 0 3px rgba(93, 174, 97, 0.14);
  background: #fff;
  outline: none;
}

.profile-form .search-dropdown__selected {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--text-dark);
}

.profile-form .search-dropdown__placeholder {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #aaa;
}

.profile-form .dial-dropdown__trigger {
  height: 48px;
  border: 2.25px solid #1a1a1a;
  border-radius: 12px;
  background: #FBF9F4;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  padding: 0 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.profile-form .dial-dropdown__trigger:hover,
.profile-form .dial-dropdown__trigger:focus {
  border-color: #5dae61;
  box-shadow: 0 0 0 3px rgba(93, 174, 97, 0.14);
  background: #fff;
  outline: none;
}

.profile-form .dial-dropdown__code {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

/* ── Empty state ── */
.profile-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 52px 24px 40px;
  text-align: center;
  gap: 12px;
}

.profile-empty__icon {
  width: 76px;
  height: 76px;
  background: #f0fdf4;
  border: 2.25px solid #86efac;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  color: var(--green-medium);
}

.profile-empty__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-dark);
}

.profile-empty__text {
  font-size: 13px;
  color: var(--text-mid);
  font-family: 'Poppins', sans-serif;
  max-width: 300px;
  margin-bottom: 8px;
}

/* ── Security panel ── */
.profile-security__section {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1.5px solid var(--border);
}

.profile-security__section-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.profile-security__danger {
  background: #fff5f5;
  border: 2px solid #fca5a5;
  border-radius: 16px;
  padding: 22px;
}

.profile-security__danger-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  color: #dc2626;
  margin-bottom: 6px;
}

.profile-security__danger-text {
  font-size: 13px;
  color: #991b1b;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 16px;
  line-height: 1.6;
}

.profile-security__delete-btn {
  height: 40px;
  padding: 0 20px;
  background: none;
  color: #dc2626;
  border: 2px solid #dc2626;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.profile-security__delete-btn:hover {
  background: #fee2e2;
}

/* ── Profile photo preview modal ── */
.profile-cover__avatar--clickable {
  cursor: zoom-in;
}

.profile-photo-preview {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pp-fade-in 0.18s ease;
}

@keyframes pp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.profile-photo-preview__img {
  max-width: min(480px, 90vw);
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  object-fit: contain;
  animation: pp-scale-in 0.18s ease;
}

@keyframes pp-scale-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.profile-photo-preview__close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  backdrop-filter: blur(4px);
}

.profile-photo-preview__close:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .profile-cover {
    padding: 32px 24px 28px;
  }
  .profile-cover__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .profile-cover__stats {
    width: 100%;
    justify-content: space-around;
  }
  .profile-cover__stat {
    padding: 0 16px;
  }
  .profile-body__inner {
    flex-direction: column;
    padding: 0 24px;
  }
  .profile-sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .profile-sidebar__card {
    flex: 1;
    min-width: 200px;
  }
}

@media (max-width: 600px) {
  .profile-cover {
    padding: 24px 20px 22px;
  }
  .profile-cover__name {
    font-size: 28px;
  }
  .profile-cover__avatar {
    width: 76px;
    height: 76px;
    font-size: 34px;
  }
  .profile-body__inner {
    padding: 0 16px;
  }
  .profile-panel {
    padding: 20px 16px;
  }
  .profile-form__row {
    grid-template-columns: 1fr;
  }
  .profile-tabs {
    gap: 2px;
    padding: 4px;
  }
  .profile-tab-btn {
    font-size: 14px;
    padding: 8px 6px;
    gap: 4px;
  }
  .profile-sidebar {
    flex-direction: column;
  }
  .profile-sidebar__card {
    min-width: unset;
  }
  .profile-cover__stat {
    padding: 0 12px;
  }
}



/* ═══════════════════════════════════════════════════════
   Admin-Panel Profile Layout  (.ap-*)
═══════════════════════════════════════════════════════ */

.ap-wrap {
  display: flex;
  height: calc(100vh - var(--navbar-h));
  overflow: hidden;
  background: #f5f6fa;
}

/* ── Sidebar ── */
.ap-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e8eaed;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.ap-sidebar__user {
  padding: 28px 20px 20px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.ap-sidebar__avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}

.ap-sidebar__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5dae61, #4a9c52);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  border: 3px solid #e8f5e9;
}

.ap-sidebar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ap-sidebar__photo-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #5dae61;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}

.ap-sidebar__photo-btn:hover { background: #4a9c52; }
.ap-sidebar__photo-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.ap-sidebar__name {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.ap-sidebar__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ap-sidebar__badge {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: #f0f0f0;
  color: #555;
}

.ap-sidebar__badge--verified {
  background: #e8f5e9;
  color: #5dae61;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.ap-sidebar__progress-wrap {
  height: 5px;
  background: #f0f0f0;
  border-radius: 99px;
  overflow: hidden;
  margin: 0 4px 6px;
}

.ap-sidebar__progress-bar {
  height: 100%;
  background: #5dae61;
  border-radius: 99px;
  transition: width 0.4s ease;
}

.ap-sidebar__progress-label {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #9ca3af;
}

/* ── Nav ── */
.ap-sidebar__nav {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.ap-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  text-align: left;
  width: 100%;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.ap-nav-item:hover { background: #f5f6fa; color: #1a1a1a; }

.ap-nav-item.is-active {
  background: #e8f5e9;
  color: #5dae61;
}

.ap-nav-item__icon { display: flex; flex-shrink: 0; }
.ap-nav-item__label { flex: 1; }

.ap-nav-badge {
  background: #5dae61;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}

/* ── Divider / Quick / Logout ── */
.ap-sidebar__divider { height: 1px; background: #f0f0f0; margin: 4px 16px; }

.ap-sidebar__quick {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ap-quick-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  border: none;
  background: #5dae61;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.ap-quick-btn:hover { background: #4a9c52; }

.ap-quick-btn--outline {
  background: transparent;
  color: #555;
  border: 1px solid #e5e7eb;
}

.ap-quick-btn--outline:hover { background: #f5f6fa; color: #1a1a1a; }

.ap-logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  margin: 8px 10px 16px;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: transparent;
  color: #dc2626;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.ap-logout-btn:hover { background: #fff5f5; }

/* ── Main ── */
.ap-main {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: #fffdf7;
}

.ap-mobile-header {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid #e8eaed;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ap-mobile-menu-btn {
  border: none;
  background: none;
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
}

.ap-mobile-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #1a1a1a;
}

.ap-panel {
  padding: 28px 32px;
  flex: 1;
}

.ap-panel--chat {
  padding: 0;
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Embedded Chat ── */
.ap-chat {
  display: flex;
  width: 100%;
  height: calc(100vh - var(--navbar-h));
  overflow: hidden;
}

.ap-chat__list {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid #e8eaed;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow-y: auto;
}

.ap-chat__list-header {
  padding: 18px 18px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.ap-chat__list-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #1a1a1a;
  margin: 0;
}

.ap-chat__view {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fafafa;
  position: relative;
}

/* ── Mobile sidebar overlay ── */
.ap-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 199;
}

@media (max-width: 900px) {
  .ap-sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    z-index: 200;
    transition: left 0.25s ease;
    box-shadow: none;
  }
  .ap-sidebar--open { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,0.12); }
  .ap-mobile-header { display: flex; }
  .ap-panel { padding: 20px 16px; }
  .ap-panel--chat { padding: 0; }
}

@media (max-width: 640px) {
  .ap-chat__list { width: 100%; border-right: none; }
  .ap-chat__list--hidden-mobile { display: none; }
  .ap-chat__view--hidden-mobile { display: none; }
}

/* ── Hero section — cream card matching home page Hero ── */
.cl-hero {
  background: #fffdf7;
  margin: 0 54px;
  border-radius: 32px;
  overflow: hidden;
}

.cl-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 32px 54px;
}

.cl-hero__content {
  flex: 1;
  min-width: 0;
}

.cl-hero__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 64px;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.05;
  margin: 10px 0 4px;
}

.cl-hero__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  color: #40493e;
  margin-bottom: 20px;
}

/* Breadcrumb */
.cl-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 4px;
}
.cl-breadcrumb a { color: var(--text-light); transition: color 0.15s; }
.cl-breadcrumb a:hover { color: #5dae61; }
.cl-breadcrumb__sep { color: #d0cfc8; }

/* Steps on the right side of the hero — transparent, no strip */
.cl-hero .cl-steps {
  background: transparent;
  border-bottom: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  min-width: 440px;
}

.cl-hero .cl-steps__line {
  min-width: 32px;
}

/* ── White form card (legacy — kept for reference) ── */
.cl-form-card {
  display: block;
  background: #ffffff;
  border: 2px solid #1a1a1a;
  border-radius: 24px;
  box-shadow: 5px 5px 0px #d0cfc8;
  overflow: hidden;
}

/* Steps — inside the card, top strip */
.cl-steps {
  display: flex;
  align-items: center;
  padding: 18px 32px;
  border-bottom: 2px solid #f0efe8;
  gap: 0;
  background: #fafaf8;
}
.cl-steps__line {
  flex: 1;
  height: 2px;
  background: #d0cfc8;
  margin: 0 8px;
}
.cl-step {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cl-step__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.cl-step.is-active .cl-step__icon-wrap {
  /* no background — let the SVG illustration show naturally */
}
.cl-step__circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #d0cfc8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  font-weight: 400;
  color: #aaa;
  flex-shrink: 0;
}
.cl-step.is-active .cl-step__circle {
  background: #5dae61;
  border-color: #5dae61;
  color: #fff;
}
.cl-step__info { display: flex; flex-direction: column; }
.cl-step__label {
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  color: #aaa;
  line-height: 1.2;
}
.cl-step.is-active .cl-step__label { color: var(--text-dark); }
.cl-step__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #c0bfb8;
  font-weight: 500;
}
.cl-step.is-active .cl-step__sub { color: var(--text-light); }

/* Body — inside the card, padded */
.cl-body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 48px 54px;
  background: transparent;
}
.cl-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cl-right {
  width: 500px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Cards — white sections inside the body */
.cl-card {
  background: #ffffff;
  border: 1.5px solid #e0ddd4;
  border-radius: 16px;
  padding: 18px 20px;
}
.cl-card--split {
  display: flex;
  gap: 20px;
}
.cl-card--tips {
  background: #f4fdf5;
  border-color: #c6e8cb;
}
.cl-card--draft {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.cl-card--translate {
  background: #f0f9ff;
  border-color: #bae6fd;
}
.cl-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.cl-card__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: 12px;
}

/* Property type */
.prop-type-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.prop-type-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px 10px;
  min-width: 90px;
  border: 2px solid #d0cfc8;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.15s;
  flex: 1;
}
.prop-type-btn:hover {
  border-color: #5dae61;
  background: #f0fdf4;
}
.prop-type-btn.is-active {
  border-color: #5dae61;
  background: #edf7ee;
  color: #5dae61;
}
.prop-type-btn.is-active .prop-type-btn__icon { color: #5dae61; }
.prop-type-btn.is-active::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #5dae61;
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px #fff;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}
.prop-type-btn__icon {
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prop-type-btn__label {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dark);
  text-align: center;
  line-height: 1.3;
}

/* Property config buttons */
.prop-config-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.prop-config-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 12px 20px;
  background: #FBF9F4;
  border: 1.5px solid #e0ddd4;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 90px;
  flex: 1;
}
.prop-config-btn:hover {
  border-color: #5dae61;
  background: #f4fdf5;
}
.prop-config-btn.is-active {
  border-color: #5dae61;
  background: #edf7ee;
}
.prop-config-btn.is-active::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #5dae61;
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px #fff;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}
.prop-config-btn--input { cursor: text; }
.prop-config-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1.5px dashed #b0afa8;
  padding-bottom: 2px;
  transition: border-color 0.15s;
}
.prop-config-btn--input:focus-within .prop-config-input-wrap,
.prop-config-btn--input.is-active .prop-config-input-wrap {
  border-bottom-color: #5dae61;
  border-bottom-style: solid;
}
.prop-config-edit-icon {
  color: #b0afa8;
  flex-shrink: 0;
  transition: color 0.15s;
}
.prop-config-btn--input:focus-within .prop-config-edit-icon,
.prop-config-btn--input.is-active .prop-config-edit-icon { color: #5dae61; }
.prop-config-input {
  width: 48px;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  font-weight: 400;
  color: var(--text-dark);
  text-align: center;
  min-width: 0;
  cursor: text;
}
.prop-config-input::placeholder { color: #c0bfb8; }
.prop-config-input::-webkit-inner-spin-button,
.prop-config-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.prop-config-input[type=number] { -moz-appearance: textfield; }
.prop-config-btn__label {
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  font-weight: 400;
  color: var(--text-dark);
}
.prop-config-btn.is-active .prop-config-btn__label {
  color: #3a8c4f;
}
.prop-config-btn__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #888;
  font-weight: 500;
}
.prop-config-btn.is-active .prop-config-btn__sub {
  color: #5dae61;
}

/* Inputs */
.cl-input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 2px solid #d0cfc8;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  background: #FBF9F4;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.cl-input:focus { border-color: #5dae61; }
.cl-input::placeholder { color: #b0afa8; }
.cl-input--pl { padding-left: 36px; }
.cl-input--euro { padding-left: 28px; }
.cl-input--code { width: 64px; flex-shrink: 0; text-align: center; padding: 0 6px; }
.cl-input--sm { margin-top: 8px; height: 36px; font-size: 13px; }

.cl-iicon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cl-iicon {
  position: absolute;
  left: 11px;
  pointer-events: none;
  flex-shrink: 0;
}
.cl-input-clear {
  position: absolute;
  right: 10px;
  background: #e8e8e4;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #555;
  transition: background 0.15s;
}
.cl-input-clear:hover { background: #d0cfc8; }

/* Map */
.cl-map {
  position: relative;
  border: 2px solid #d0cfc8;
  border-radius: 12px;
  overflow: hidden;
  height: 170px;
  margin-top: 10px;
}
.cl-map__svg { display: block; width: 100%; height: 100%; }
.cl-map__pin-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cl-map__pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.cl-map__pin-label {
  background: #5dae61;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.cl-map__note {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.9);
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-light);
  padding: 5px 10px;
  text-align: center;
}

/* Location search */
.cl-location-search { position: relative; margin-bottom: 0; }

.cl-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 200;
  max-height: 240px;
  overflow-y: auto;
}
.cl-suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #3a3935;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.12s;
}
.cl-suggestion-item:hover { background: #f3f7f0; }

/* Spinning loader icon */
@keyframes cl-spin { to { transform: rotate(360deg); } }
.cl-iicon--spin { animation: cl-spin 0.7s linear infinite; }

/* OSM iframe map */
.cl-map-frame {
  width: 100%;
  height: calc(100% + 30px);
  border: none;
  display: block;
  margin-bottom: -30px;
}

/* Map placeholder overlay */
.cl-map__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.cl-map__placeholder span {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  color: #9e9d95;
  font-weight: 500;
}

/* Address card */
.cl-address-card {
  margin-top: 14px;
  background: #5DAE6133;
  border: 1px solid #6B7280;
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.2s;
}
.cl-address-card.is-filled { border-color: #6B7280; background: #5DAE6133; }

.cl-address-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.cl-address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.cl-address-field { display: flex; flex-direction: column; gap: 4px; }
.cl-address-field--wide { grid-column: 1 / -1; }

/* Coordinates row */
.cl-coords-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid #d8dcd2;
  flex-wrap: wrap;
}
.cl-coord {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
}
.cl-coord__label { color: #9e9d95; font-weight: 600; }
.cl-coord__value {
  font-weight: 700;
  color: #3a3935;
  font-variant-numeric: tabular-nums;
  background: #e8efda;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 11.5px;
}
.cl-coord--pin {
  margin-left: auto;
  color: #5dae61;
  font-weight: 700;
  font-size: 12px;
}

/* Pricing */
.cl-pricing-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cl-pricing-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 80px; }
.cl-label {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
}
.cl-euro-wrap { position: relative; display: flex; align-items: center; }
.cl-euro-sym {
  position: absolute;
  left: 11px;
  font-family: 'Caveat Brush', cursive;
  font-size: 15px;
  color: #555;
  pointer-events: none;
}

/* Yes / No buttons */
.cl-yn-row { display: flex; }
.cl-yn-btn {
  height: 32px;
  padding: 0 14px;
  border: 1.5px solid #d0cfc8;
  border-radius: 0;
  background: #FBF9F4;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  position: relative;
}
.cl-yn-btn + .cl-yn-btn { margin-left: -1.5px; }
.cl-yn-btn:first-child { border-radius: 8px 0 0 8px; }
.cl-yn-btn:last-child { border-radius: 0 8px 8px 0; }
.cl-yn-btn:hover { border-color: #5dae61; z-index: 1; }
.cl-yn-btn.is-active { background: #5dae61; border-color: #5dae61; color: #fff; z-index: 1; }
.cl-yn-btn--lg { height: 42px; padding: 0 18px; font-size: 14px; border-width: 2px; }
.cl-yn-btn--lg:first-child { border-radius: 12px 0 0 12px; }
.cl-yn-btn--lg:last-child { border-radius: 0 12px 12px 0; }
.cl-yn-btn--lg + .cl-yn-btn--lg { margin-left: -2px; }

/* Included box */
.cl-included-box {
  background: #5DAE6133;
  border: 1px solid #6B7280;
  border-radius: 12px;
  padding: 12px 14px;
}
.cl-included-box__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 15px;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.cl-included-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 12px;
}

/* Checkboxes */
.cl-checkbox {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.cl-checkbox input[type='checkbox'] { display: none; }
.cl-checkbox__box {
  width: 20px;
  height: 20px;
  border: 2px solid #1A1A1A;
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
  opacity: 1;
}
.cl-checkbox input:checked + .cl-checkbox__box {
  background: #5dae61;
  border-color: #5dae61;
}
.cl-checkbox input:checked + .cl-checkbox__box::after {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
  display: block;
}
.cl-checkbox__label {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}

/* Available From + Phone split */
.cl-avail { flex: 1; min-width: 0; }
.cl-phone-sec { flex: 1; min-width: 0; }

.cl-radio-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.cl-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}
.cl-radio input[type='radio'] { display: none; }
.cl-radio__dot {
  width: 16px;
  height: 16px;
  border: 2px solid #d0cfc8;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}
.cl-radio input:checked + .cl-radio__dot { border-color: #5dae61; }
.cl-radio input:checked + .cl-radio__dot::after {
  content: '';
  width: 7px;
  height: 7px;
  background: #5dae61;
  border-radius: 50%;
  display: block;
}

.cl-phone-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.cl-phone-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #5DAE6133;
  border: 1px solid #6B7280;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: #166534;
  line-height: 1.5;
}

/* Textarea */
.cl-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #d0cfc8;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-dark);
  background: #FBF9F4;
  outline: none;
  resize: vertical;
  line-height: 1.6;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.cl-textarea:focus { border-color: #5dae61; }
.cl-textarea::placeholder { color: #b0afa8; }
.cl-char-count {
  text-align: right;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  margin-top: 4px;
}

/* Photos */
.cl-photos-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.cl-drop-zone {
  flex: 1;
  border: 2.5px dashed #b0cfc0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 12px;
  cursor: pointer;
  background: #f8fdf8;
  transition: border-color 0.18s, background 0.18s;
}
.cl-drop-zone:hover { border-color: #5dae61; background: #f0fdf4; }
.cl-drop-zone__text {
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  color: var(--text-dark);
}
.cl-drop-zone__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  color: var(--text-light);
  font-weight: 500;
}
.cl-quality-badge {
  width: 130px;
  flex-shrink: 0;
  background: #fffbeb;
  border: 2px solid #fde68a;
  border-radius: 14px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.cl-quality-badge__shield { margin-bottom: 2px; }
.cl-quality-badge__label {
  font-family: 'Caveat Brush', cursive;
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.2;
}
.cl-quality-badge__stars {
  color: #f59e0b;
  font-size: 12px;
  letter-spacing: 1px;
}
.cl-quality-badge__bar-wrap {
  width: 100%;
  height: 6px;
  background: #e8e8e4;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2px;
}
.cl-quality-badge__bar {
  height: 100%;
  background: #f59e0b;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.cl-quality-badge__pct {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
}
.cl-photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.cl-photo-thumb {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #d0cfc8;
}
.cl-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cl-photo-thumb__del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Photo Tips */
.cl-tips-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.cl-tips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cl-tip {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.cl-tip__icon { flex-shrink: 0; margin-top: 1px; }
.cl-tip__label {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
}

/* Optional Details */
.cl-opt-list { display: flex; flex-direction: column; gap: 0; }
.cl-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid #f0efea;
  gap: 10px;
}
.cl-opt-row:last-child { border-bottom: none; }
.cl-opt-row--col {
  flex-direction: column;
  align-items: flex-start;
}
.cl-opt-row__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.cl-opt-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  min-width: 120px;
}

/* Toggle group (3 options) */
.cl-toggle-grp { display: flex; flex-wrap: nowrap; }
.cl-tog {
  height: 32px;
  padding: 0 10px;
  border: 1.5px solid #d0cfc8;
  border-radius: 0;
  background: #FBF9F4;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
  position: relative;
}
.cl-tog + .cl-tog { margin-left: -1.5px; }
.cl-tog:first-child { border-radius: 8px 0 0 8px; }
.cl-tog:last-child { border-radius: 0 8px 8px 0; }
.cl-tog:hover { border-color: #5dae61; z-index: 1; }
.cl-tog.is-on { background: #5dae61; border-color: #5dae61; color: #fff; z-index: 1; }

/* Segment buttons (bedrooms, floor, min-stay, laundry) */
.cl-seg-row { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-seg-row--wrap { flex-wrap: wrap; }
.cl-seg-btn {
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid #d0cfc8;
  border-radius: 8px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.cl-seg-btn:hover { border-color: #5dae61; }
.cl-seg-btn.is-on { background: #5dae61; border-color: #5dae61; color: #fff; }
.cl-seg-btn--sm { height: 28px; padding: 0 8px; font-size: 11px; }

/* Tenant type grid */
.cl-tenant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 6px;
}

/* Furnishing sub-sections */
.cl-furn-section { margin-top: 16px; }
.cl-furn-section__title {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #f0efe8;
}
.cl-furn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}
.cl-furn-grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* Nearby places */
.cl-nearby-univ { margin-bottom: 6px; }
.cl-nearby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}

/* Transportation */
.cl-transport-list { display: flex; flex-direction: column; }
.cl-transport-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid #f5f4ed;
}
.cl-transport-row:last-child { border-bottom: none; }
.cl-transport-label {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}

/* Owner declaration */
.cl-decl-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.cl-checkbox--decl .cl-checkbox__label { font-size: 13px; line-height: 1.45; }

/* Verification status */
.cl-verif-status { padding-top: 14px; border-top: 1px solid #f0efe8; }
.cl-verif-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.cl-verif-item--pending { background: #fafaf8; color: #999; border: 1.5px solid #e8e6e0; }

/* Bills detail */
.cl-bills-detail { width: 100%; }
.cl-bills-detail__note {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 8px;
}

/* Save as Draft */
.cl-draft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cl-draft__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  color: var(--text-dark);
  margin-bottom: 3px;
}
.cl-draft__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
}
.cl-draft__btn {
  height: 38px;
  padding: 0 20px;
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  color: var(--text-dark);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: box-shadow 0.15s, transform 0.15s;
}
.cl-draft__btn:hover { box-shadow: 1px 1px 0 #1a1a1a; transform: translate(2px, 2px); }

/* Auto Translate */
.cl-translate {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cl-translate__icon { flex-shrink: 0; }
.cl-translate__body { flex: 1; min-width: 0; }
.cl-translate__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  color: var(--text-dark);
  margin-bottom: 2px;
}
.cl-translate__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-light);
  line-height: 1.5;
}
.cl-switch { position: relative; display: inline-flex; cursor: pointer; flex-shrink: 0; }
.cl-switch input { display: none; }
.cl-switch__track {
  width: 44px;
  height: 24px;
  background: #d0cfc8;
  border-radius: 12px;
  transition: background 0.22s;
  position: relative;
}
.cl-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.22s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.cl-switch input:checked + .cl-switch__track { background: #5dae61; }
.cl-switch input:checked + .cl-switch__track::after { transform: translateX(20px); }

/* Footer bar */
.cl-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #ffffff;
  border-top: 2px solid #f0efe8;
  padding: 18px 54px;
}
.cl-footer-bar__secure {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cl-footer-bar__secure-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cl-footer-bar__secure-text strong {
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  color: var(--text-dark);
}
.cl-footer-bar__secure-text span {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
}
.cl-footer-bar__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.cl-footer-bar__btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.cl-next-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 28px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 19px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  white-space: nowrap;
}
.cl-next-btn:hover { background: #4a9a4e; box-shadow: 2px 2px 0 #1a1a1a; transform: translate(2px, 2px); }
.cl-next-btn:disabled { opacity: 0.65; cursor: not-allowed; pointer-events: none; }
@keyframes cl-spin { to { transform: rotate(360deg); } }
.cl-btn-spinner { animation: cl-spin 0.75s linear infinite; flex-shrink: 0; }
.cl-footer-bar__note {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-light);
}

/* ─── Photos Step ───────────────────────────────────────────────── */

/* Step circle done state */
.cl-step__circle--done {
  background: #5dae61;
  color: #fff;
  border-color: #5dae61;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-steps__line--done { background: #5dae61; }

/* Back button */
.cl-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  box-shadow: 3px 3px 0 #1a1a1a;
  transition: transform 0.12s, box-shadow 0.12s;
}
.cl-back-btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1a1a1a; }

/* Photos header */
.ph-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 36px 54px 0;
}
.ph-header__left { flex: 1; }
.ph-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.ph-subtitle {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-light);
  font-weight: 500;
}

/* Photo quality card */
.ph-quality {
  background: #f3f8f3;
  border: 1.5px solid #a8d4ab;
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ph-quality__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #5dae61;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ph-quality__stars { display: flex; gap: 2px; }
.ph-quality__count {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.ph-quality__bar {
  height: 6px;
  background: #d4edda;
  border-radius: 99px;
  overflow: hidden;
}
.ph-quality__bar-fill {
  height: 100%;
  background: #5dae61;
  border-radius: 99px;
  transition: width 0.3s ease;
}

/* Photos body */
.ph-body { padding: 20px 54px 32px; display: flex; flex-direction: column; gap: 20px; }

/* Photo grid */
.ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

/* Uploaded photo */
.ph-photo {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #e8efda;
}
.ph-photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-photo__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid #d0cfc8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: background 0.15s;
}
.ph-photo__remove:hover { background: #fff; }
.ph-photo__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.52);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  appearance: none;
  text-align: center;
}

/* Add photo slot */
.ph-add {
  border: 2px dashed #c0cfc0;
  border-radius: 14px;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  background: #f8faf8;
  transition: border-color 0.15s, background 0.15s;
}
.ph-add:hover, .ph-add.is-drag { border-color: #5dae61; background: #f0f8f0; }
.ph-add__label {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #3a3935;
}
.ph-add__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: var(--text-light);
}

/* Photo tips */
.ph-tips {
  background: #fffbec;
  border: 1.5px solid #f0e080;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.ph-tips__heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  color: #b8860b;
  white-space: nowrap;
  flex-shrink: 0;
}
.ph-tips__list { display: flex; gap: 20px; flex-wrap: wrap; flex: 1; }
.ph-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #3a3935;
  white-space: nowrap;
}
.ph-tip__icon { color: #b8860b; display: flex; }

/* Video + Draft row */
.ph-bottom-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* Video section */
.ph-video {
  flex: 1;
  border: 1.5px solid #d0cfc8;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
}
.ph-video__info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}
.ph-video__title {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 3px;
}
.ph-video__opt { font-weight: 500; color: var(--text-light); font-size: 13px; }
.ph-video__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}
.ph-video__upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 2px dashed #5dae61;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #5dae61;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}
.ph-video__upload:hover, .ph-video__upload.is-drag { background: #f0f8f0; }
.ph-video__max { font-size: 11px; font-weight: 500; color: var(--text-light); }
.ph-video__filename { font-size: 11px; font-weight: 600; color: #3a3935; word-break: break-all; text-align: center; }
.ph-video__error {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 8px;
  background: #fff5f5; border: 1.5px solid #f5c6c6;
  color: #c62828; font-size: 12px; font-weight: 500;
}
.ph-video__player-card {
  border: 1.5px solid #a8d4ab; border-radius: 12px; overflow: hidden;
  background: #000;
}
.ph-video__player {
  width: 100%; max-height: 260px; display: block; background: #000;
}
.ph-video__player-meta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px; padding: 10px 14px; background: #f0f8f0;
}
.ph-video__player-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #3a3935; min-width: 0;
}
.ph-video__player-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.ph-video__player-size { color: var(--text-light); font-weight: 500; flex-shrink: 0; }
.ph-video__player-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ph-video__change {
  font-size: 12px; font-weight: 600; color: #5dae61;
  background: none; border: 1.5px solid #5dae61; border-radius: 6px;
  padding: 4px 10px; cursor: pointer;
}
.ph-video__change:hover { background: #f0f8f0; }
.ph-video__remove {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: #c62828;
  background: none; border: 1.5px solid #f5c6c6; border-radius: 6px;
  padding: 4px 10px; cursor: pointer;
}
.ph-video__remove:hover { background: #fff5f5; }

/* Draft section */
.ph-draft {
  flex: 1;
  border: 1.5px solid #a8d4ab;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #f3f8f3;
}
.ph-draft__info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ph-draft__title {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 3px;
}
.ph-draft__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}
.ph-draft__btn {
  height: 40px;
  padding: 0 20px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 #1a1a1a;
  transition: transform 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.ph-draft__btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1a1a1a; }

/* Photo room-label modal */
.ph-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ph-modal {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.ph-modal__header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid #eef0ee;
  position: relative;
}
.ph-modal__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 4px;
}
.ph-modal__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}
.ph-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6b7280;
  transition: background 0.15s;
}
.ph-modal__close:hover { background: #e5e7eb; color: #1a1a1a; }
.ph-modal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 20px 24px 24px;
}
.ph-modal__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fafafa;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  font-family: 'Nunito', sans-serif;
}
.ph-modal__option:hover {
  border-color: #5dae61;
  background: #f0f8f0;
  transform: translateY(-2px);
}
.ph-modal__option-icon {
  font-size: 28px;
  line-height: 1;
}
.ph-modal__option-label {
  font-size: 12px;
  font-weight: 700;
  color: #3a3935;
  text-align: center;
}

/* ─── Review & Publish Step ─────────────────────────────────────── */
.rv-body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 36px 54px 36px;
}
.rv-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.rv-right { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }

/* Header row */
.rv-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 16px;
  border-bottom: 2px solid #f0efe8;
  margin-bottom: 4px;
}
.rv-main-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  color: #1a1a1a;
  margin-bottom: 3px;
}
.rv-main-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  color: var(--text-light);
  font-weight: 500;
}
.rv-edit-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 14px;
  border: 1.5px solid #d0cfc8;
  border-radius: 8px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #3a3935;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.rv-edit-all-btn:hover { border-color: #5dae61; color: #5dae61; }

/* Review sections */
.rv-section {
  padding: 16px 0;
  border-bottom: 1px solid #f0efe8;
}
.rv-section:last-of-type { border-bottom: none; }
.rv-section__title {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
}

/* Photos row */
.rv-photos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.rv-photo-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid #d0cfc8;
}
.rv-photo-more {
  width: 64px;
  height: 48px;
  border-radius: 8px;
  background: #e8efda;
  border: 1.5px solid #c9d9b0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #5dae61;
}

/* Tag pills */
.rv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 99px;
  background: #e8f5e9;
  border: 1px solid #a8d4ab;
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #2e7d32;
}
.rv-tag--util {
  background: #f3f3ef;
  border-color: #d0cfc8;
  color: #555;
}

/* Listing title in review */
.rv-listing-title {
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 12px;
  line-height: 1.3;
}

/* Info key-value grid */
.rv-info-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}
.rv-info-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0;
}
.rv-info-grid--alt .rv-info-row { padding: 3px 0; }
.rv-info-label {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  min-width: 110px;
  flex-shrink: 0;
}
.rv-info-value {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #2a2a2a;
}
.rv-price { color: #2e7d32; font-size: 15px; font-weight: 800; }

/* Badges */
.rv-badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 99px;
  font-family: 'Nunito', sans-serif; font-size: 11.5px; font-weight: 700;
}
.rv-badge--type { background: #e8f5e9; border: 1px solid #a8d4ab; color: #2e7d32; }
.rv-badge--yes  { background: #e8f5e9; border: 1px solid #a8d4ab; color: #2e7d32; }
.rv-badge--no   { background: #fdecea; border: 1px solid #f5c6c6; color: #c62828; }
.rv-badge--warn { background: #fff8e1; border: 1px solid #ffe082; color: #f57f17; }

/* Yes/No value indicator */
.rv-yn { font-size: 12px; font-weight: 700; }
.rv-yn--yes { color: #2e7d32; }
.rv-yn--no  { color: #c62828; }

/* Address line (kept for possible reuse) */
.rv-address-block {
  display: flex; align-items: flex-start; gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px; font-weight: 500; color: #666;
  line-height: 1.5; padding: 4px 0;
}

/* Photo grid with labels */
.rv-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.rv-photo-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rv-photo-label {
  font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 700;
  color: #666; text-align: center; max-width: 72px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Video preview in review page */
.rv-video-preview { margin-top: 10px; display: inline-flex; flex-direction: column; gap: 4px; }
.rv-video-preview__label {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700; color: #2e7d32;
}
.rv-video-preview__player {
  width: 200px; height: 130px; border-radius: 8px;
  border: 1.5px solid #a8d4ab; display: block; background: #000;
  object-fit: contain;
}

/* Description block */
.rv-description {
  font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 500;
  color: #3a3935; line-height: 1.7; margin: 4px 0 0;
  background: #fafaf8; border: 1.5px solid #e8e7e0;
  border-radius: 8px; padding: 10px 14px;
}
.rv-empty { font-family: 'Nunito', sans-serif; font-size: 12.5px; color: #aaa; margin: 4px 0 0; }

/* Bills row with nested chips */
.rv-info-row--col { flex-direction: column; align-items: flex-start; gap: 6px; }
.rv-info-row-top { display: flex; align-items: center; gap: 10px; width: 100%; }

/* Utility / Nearby chips */
.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rv-chips--indent { margin-top: 2px; margin-left: 2px; }
.rv-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 11px; border-radius: 99px;
  font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700;
}
.rv-chip--util {
  background: #e8f5e9; border: 1.5px solid #a8d4ab; color: #2e7d32;
}
.rv-chip--nearby {
  background: #f3f3ef; border: 1.5px solid #d0cfc8; color: #555;
}

/* Privacy */
.rv-privacy {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #f3f8f3;
  border: 1.5px solid #a8d4ab;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
}
.rv-privacy__title {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 3px;
}
.rv-privacy__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
  line-height: 1.5;
}

/* Action cards row */
.rv-action-row {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.rv-action-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1.5px solid #d0cfc8;
  border-radius: 14px;
  padding: 14px 14px;
  background: #fff;
}
.rv-action-card__icon { color: #5dae61; display: flex; }
.rv-action-card__title {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #1a1a1a;
}
.rv-action-card__opt { font-weight: 500; color: var(--text-light); font-size: 12px; }
.rv-action-card__body { flex: 1; }
.rv-action-card__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  color: var(--text-light);
  font-weight: 500;
  line-height: 1.5;
  margin-top: 3px;
}
.rv-action-btn {
  width: 100%;
  height: 36px;
  border: 2px solid #1a1a1a;
  border-radius: 9px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  box-shadow: 2px 2px 0 #1a1a1a;
  transition: transform 0.12s, box-shadow 0.12s;
  margin-top: auto;
}
.rv-action-btn:hover { transform: translate(2px, 2px); box-shadow: 0 0 0 #1a1a1a; }

/* Listing preview */
.rv-preview {
  background: #fff;
  border: 1.5px solid #d0cfc8;
  border-radius: 16px;
  overflow: hidden;
}
.rv-preview__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  color: #5dae61;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #f0efe8;
}
.rv-preview__card { padding: 0; }
.rv-preview__img-wrap { position: relative; }
.rv-preview__img { width: 100%; height: 150px; object-fit: cover; display: block; }
.rv-preview__heart {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.rv-preview__info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.rv-preview__name {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #1a1a1a;
}
.rv-preview__price {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  color: #5dae61;
}
.rv-preview__price span { font-size: 13px; color: var(--text-light); font-family: 'Nunito', sans-serif; font-weight: 600; }
.rv-preview__loc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}
.rv-preview__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.rv-preview__tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 99px;
  background: #e8f5e9;
  border: 1px solid #a8d4ab;
  font-family: 'Nunito', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: #2e7d32;
}
.rv-preview__avail {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  color: var(--text-light);
  font-weight: 600;
}
.rv-preview__host {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #f0efe8;
}
.rv-preview__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #5dae61;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rv-preview__host-name {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1a1a1a;
}
.rv-preview__host-role {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: var(--text-light);
  font-weight: 500;
}
.rv-preview__details {
  margin-left: auto;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #5dae61;
  text-decoration: none;
  white-space: nowrap;
}
.rv-preview__details:hover { text-decoration: underline; }

/* How it works */
.rv-hiw {
  background: linear-gradient(135deg, #e8f5e9 0%, #f0f8f0 100%);
  border: 1.5px solid #a8d4ab;
  border-radius: 16px;
  padding: 16px 16px 18px;
}
.rv-hiw__illus { display: flex; justify-content: center; margin-bottom: 10px; }
.rv-hiw__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  color: #1a1a1a;
  margin-bottom: 10px;
  text-align: center;
}
.rv-hiw__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rv-hiw__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #2e7d32;
  line-height: 1.4;
}

/* Publish button */
.rv-publish-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 3px 3px 0 #1a1a1a;
  transition: transform 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.rv-publish-btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1a1a1a; }

/* Responsive — mirrors home page .hero breakpoints exactly, height varies by content */
@media (max-width: 1280px) {
  .cl-hero { margin: 0 40px; }
  .cl-hero__inner { padding: 28px 40px; }
}
@media (max-width: 1100px) {
  .cl-hero { margin: 0 24px; }
  .cl-hero__inner { padding: 24px 28px; }
  .cl-body { flex-direction: column; padding: 20px; }
  .cl-right { width: 100%; }
  .cl-card--split { flex-direction: column; gap: 20px; }
  .cl-step__sub { display: none; }
}
@media (max-width: 960px) {
  .cl-hero { margin: 0 16px; }
}
@media (max-width: 768px) {
  .cl-hero { margin: 0 12px; border-radius: 24px; }
  .cl-hero__inner { flex-direction: column; align-items: flex-start; padding: 20px 20px; gap: 20px; }
  .cl-hero__title { font-size: 40px; }
  .cl-body { padding: 16px; gap: 14px; }
  .cl-step__label { font-size: 13px; }
  .prop-type-grid { gap: 6px; }
  .prop-type-btn { min-width: 70px; padding: 10px 6px 8px; }
  .prop-config-grid { gap: 6px; }
  .prop-config-btn { min-width: 60px; padding: 10px 6px 8px; }
  .cl-pricing-row { flex-direction: column; }
  .cl-footer-bar { flex-direction: column; align-items: flex-start; }
  .cl-footer-bar__right { align-items: stretch; width: 100%; }
  .cl-next-btn { width: 100%; justify-content: center; }
  .cl-photos-row { flex-direction: column; }
  .cl-quality-badge { width: 100%; }
}

/* ─── Post Listing — Category Picker ────────────────────────── */
.post-listing-page {
  background: var(--bg-main);
  min-height: 100vh;
  padding-bottom: 80px;
}

.post-listing-page__inner {
  padding: 32px 0 0;
}

.post-listing-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 36px;
  padding: 0 54px;
}

.post-listing-breadcrumb a {
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.15s;
}

.post-listing-breadcrumb a:hover {
  color: #5dae61;
}

.post-listing-breadcrumb__sep {
  color: #d0cfc8;
}

.post-listing-header {
  text-align: left;
  margin-bottom: 44px;
  padding: 0 54px;
}

.post-listing-header__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 44px;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.15;
  margin-bottom: 10px;
}

.post-listing-header__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-light);
  line-height: 1.6;
}

.post-listing-card {
  background: #ffffff;
  border-radius: 32px;
  margin: 0 54px 64px;
  padding: 48px 54px 56px;
}

.post-listing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.post-cat-card--coming-soon {
  position: relative;
  cursor: default;
  opacity: 0.6;
}

.post-cat-card--coming-soon:hover {
  transform: none !important;
  box-shadow: none !important;
}

.post-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 190px;
  width: 190px;
  min-height: 260px;
  background: var(--card-bg, #f8faf8);
  border: 2.25px solid #1a1a1a;
  border-radius: 27px;
  padding: 22px 20px 18px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.post-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.post-cat-card__img-wrap {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.post-cat-card__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: bottom;
}

.post-cat-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.post-cat-card__name {
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.2;
}

.post-cat-card__desc {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.4;
}

.post-cat-card__arrow {
  display: none;
}

.post-cat-card:hover .post-cat-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 640px) {
  .post-listing-header__title {
    font-size: 32px;
  }
  .post-listing-grid {
    grid-template-columns: 1fr;
  }
  .post-cat-card__img-wrap {
    width: 56px;
    height: 56px;
  }
  .post-cat-card__name {
    font-size: 19px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Create Roommate Listing — crl- prefix
   ═══════════════════════════════════════════════════════════════ */

/* Intent cards */
.crl-intent-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.crl-intent-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 200px;
  padding: 14px 16px;
  border: 2px solid #d0cfc8;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, background 0.18s;
}

.crl-intent-card:hover {
  border-color: #5dae61;
  background: #f0fdf4;
}

.crl-intent-card.is-active {
  border-color: #5dae61;
  background: #edf7ee;
}

.crl-intent-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #f0fdf4;
  color: #5dae61;
  flex-shrink: 0;
}

.crl-intent-card__icon--alt {
  background: #fdf0f0;
  color: #e05252;
}

.crl-intent-card.is-active .crl-intent-card__icon {
  background: #d4edda;
}

.crl-intent-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.crl-intent-card__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: var(--text-dark);
  line-height: 1.2;
}

.crl-intent-card__desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-light);
  line-height: 1.45;
}

.crl-intent-card__check {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #5dae61;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2.5px #fff;
}

/* Room type buttons */
.crl-room-type-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.crl-room-type-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 120px;
  padding: 10px 14px;
  border: 2px solid #d0cfc8;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}

.crl-room-type-btn:hover {
  border-color: #5dae61;
  background: #f0fdf4;
}

.crl-room-type-btn.is-active {
  border-color: #5dae61;
  background: #edf7ee;
  color: #5dae61;
}

.crl-room-type-btn__icon {
  display: flex;
  align-items: center;
  color: #888;
  flex-shrink: 0;
}

.crl-room-type-btn.is-active .crl-room-type-btn__icon {
  color: #5dae61;
}

.crl-room-type-btn__label {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}

.crl-room-type-btn.is-active .crl-room-type-btn__label {
  color: #5dae61;
}

.crl-room-type-btn__check {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #5dae61;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}

/* Location + Rent row */
.crl-location-rent-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.crl-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

/* Rent range */
.crl-rent-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.crl-rent-range__dash {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #888;
  flex-shrink: 0;
}

/* Gender preference buttons */
.crl-gender-btns {
  display: flex;
  gap: 0;
}

.crl-gender-btn {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid #d0cfc8;
  background: #FBF9F4;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
  position: relative;
}

.crl-gender-btn + .crl-gender-btn { margin-left: -1.5px; }
.crl-gender-btn:first-child { border-radius: 8px 0 0 8px; }
.crl-gender-btn:last-child { border-radius: 0 8px 8px 0; }
.crl-gender-btn:hover { border-color: #5dae61; z-index: 1; }
.crl-gender-btn.is-active { background: #5dae61; border-color: #5dae61; color: #fff; z-index: 1; }

/* Photo quality badge */
.crl-quality-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.crl-quality-badge__left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.crl-quality-badge__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  color: var(--text-dark);
}

.crl-quality-badge__stars {
  display: flex;
  gap: 2px;
  align-items: center;
}

.crl-quality-badge__count {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #5dae61;
}

.crl-quality-badge__bar {
  flex: 1;
  min-width: 80px;
  height: 6px;
  background: #d4edda;
  border-radius: 3px;
  overflow: hidden;
}

.crl-quality-badge__fill {
  height: 100%;
  background: #5dae61;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Photo grid */
.crl-photo-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.crl-photo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 110px;
}

.crl-photo-item__img-wrap {
  position: relative;
  width: 110px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid #e0ddd4;
}

.crl-photo-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.crl-photo-item__remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.crl-photo-item__remove:hover { background: rgba(0, 0, 0, 0.8); }

.crl-photo-item__label {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-light);
  text-align: center;
}

/* Add photo button */
.crl-photo-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 110px;
  height: 88px;
  border: 2px dashed #c0bfb8;
  border-radius: 10px;
  background: #fafaf8;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}

.crl-photo-add:hover {
  border-color: #5dae61;
  background: #f0fdf4;
}

.crl-photo-add__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.crl-photo-add__text {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
}

.crl-photo-add__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-light);
}


/* ── Listing Preview card ── */
.crl-preview-card {
  padding: 16px;
}

.crl-preview {
  border: 1.5px solid #e0ddd4;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.crl-preview__img-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  background: #f0efe8;
}

.crl-preview__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.crl-preview__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #c0bfb8;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 500;
}

.crl-preview__heart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.crl-preview__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crl-preview__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  color: var(--text-dark);
  line-height: 1.2;
}

.crl-preview__price {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
}

.crl-preview__price span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
}

.crl-preview__location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
}

.crl-preview__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.crl-preview__tag {
  padding: 3px 9px;
  border-radius: 20px;
  background: #f0fdf4;
  border: 1px solid #c6e8cb;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #2a8a3d;
}

.crl-preview__avail {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-light);
}

.crl-preview__host {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0efe8;
  margin-top: 4px;
}

.crl-preview__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #5dae61;
  color: #fff;
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.crl-preview__host-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1px;
}

.crl-preview__host-name {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dark);
}

.crl-preview__host-badge {
  font-family: 'Nunito', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #5dae61;
}

.crl-preview__details-link {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #5dae61;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

/* Tip card */
.crl-tip-card {
  background: #fffdf0;
  border-color: #ffe58f;
}

.crl-tip {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crl-tip__icon {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.crl-tip__sparkles {
  font-size: 16px;
}

.crl-tip__text {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: var(--text-dark);
}

.crl-tip__desc {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-medium);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   Roommate Preferences page — crp- prefix
   ═══════════════════════════════════════════════════════════════ */

.crp-section-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 26px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.crp-section-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: 16px;
}

/* About You dropdowns */
.crp-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 6px;
}

@media (max-width: 780px) {
  .crp-about-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .crp-about-grid { grid-template-columns: 1fr; }
}

.crp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crp-field--wide {
  grid-column: 1 / -1;
}

.crp-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.crp-select {
  width: 100%;
  height: 42px;
  padding: 0 36px 0 12px;
  border: 2px solid #d0cfc8;
  border-radius: 12px;
  background: #FBF9F4;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.crp-select:focus {
  outline: none;
  border-color: #5dae61;
}

.crp-select-arrow {
  position: absolute;
  right: 10px;
  pointer-events: none;
  flex-shrink: 0;
}

/* Lifestyle grid */
.crp-profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0ea;
  font-family: 'Nunito', sans-serif;
}
.crp-profile-row:last-child { border-bottom: none; }
.crp-profile-row__label {
  font-size: 12px;
  font-weight: 700;
  color: #999;
  width: 100px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.crp-profile-row__value {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}
.crp-lifestyle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

@media (max-width: 640px) {
  .crp-lifestyle-grid { grid-template-columns: 1fr; }
}

.crp-lifestyle-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crp-lifestyle-label {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}

/* Room / Flat section */
.crp-room-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px 24px;
  align-items: start;
}

@media (max-width: 600px) {
  .crp-room-grid { grid-template-columns: 1fr; }
}

/* Number spinner */
.crp-spinner {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.crp-spinner__btn {
  width: 38px;
  height: 40px;
  border: none;
  background: #fafaf8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-dark);
  transition: background 0.15s;
}

.crp-spinner__btn:hover:not(:disabled) { background: #f0fdf4; color: #5dae61; }
.crp-spinner__btn:disabled { color: #c0bfb8; cursor: not-allowed; }
.crp-spinner__btn:first-child { border-right: 1.5px solid #d0cfc8; }
.crp-spinner__btn:last-child { border-left: 1.5px solid #d0cfc8; }

.crp-spinner__val {
  min-width: 44px;
  text-align: center;
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  color: var(--text-dark);
}

/* ═══════════════════════════════════════════════════════════════
   Roommate Review page — crv- prefix
   ═══════════════════════════════════════════════════════════════ */

/* Review header */
.crv-review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.crv-review-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.crv-review-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-light);
}

.crv-edit-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.crv-edit-all-btn:hover { border-color: #5dae61; background: #f0fdf4; color: #5dae61; }

/* Review sections container */
.crv-sections {
  background: #fff;
  border: 1.5px solid #e0ddd4;
  border-radius: 16px;
  overflow: hidden;
}

/* Each review row */
.crv-row {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1.5px solid #f0efe8;
  align-items: flex-start;
}

.crv-row--last {
  border-bottom: none;
}

.crv-row__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f5f4ed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.crv-row__content {
  flex: 1;
  min-width: 0;
}

.crv-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.crv-row__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  font-weight: 400;
  color: var(--text-dark);
}

.crv-edit-btn {
  padding: 3px 12px;
  border: 1.5px solid #d0cfc8;
  border-radius: 8px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-medium);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}

.crv-edit-btn:hover { border-color: #5dae61; color: #5dae61; }

.crv-row__detail {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-medium);
  line-height: 1.5;
}

/* Photo row in review */
.crv-photos-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  align-items: center;
}

.crv-photo-thumb {
  width: 56px;
  height: 44px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid #e0ddd4;
  display: block;
}

.crv-photo-more {
  width: 56px;
  height: 44px;
  border-radius: 7px;
  background: #f0efe8;
  border: 1.5px dashed #c0bfb8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #888;
}

/* Lifestyle tags */
.crv-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.crv-tag {
  padding: 4px 10px;
  border-radius: 20px;
  background: #f0fdf4;
  border: 1px solid #c6e8cb;
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #2a8a3d;
}

/* Privacy notice */
.crv-privacy {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 14px;
}

.crv-privacy__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.crv-privacy__desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-medium);
  line-height: 1.55;
}

/* Action cards (3 across) */
.crv-action-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

@media (max-width: 700px) {
  .crv-action-cards { grid-template-columns: 1fr; }
}

.crv-action-card {
  padding: 16px;
  border: 1.5px solid #e0ddd4;
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.crv-action-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.crv-action-card__icon--shield { background: #f0fdf4; }
.crv-action-card__icon--draft { background: #f0fdf4; }
.crv-action-card__icon--globe { background: #f0fdf4; }

.crv-action-card__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  color: var(--text-dark);
}

.crv-action-card__badge {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: #e8f5e9;
  color: #2a8a3d;
}

.crv-action-card__desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
  line-height: 1.5;
  flex: 1;
}

.crv-action-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  background: #fff;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 15px;
  color: var(--text-dark);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  margin-top: 6px;
  width: 100%;
}

.crv-action-card__btn:hover {
  box-shadow: 1px 1px 0 #1a1a1a;
  transform: translate(2px, 2px);
}

/* How it works card */
.crv-how-card {
  background: #fafdf5;
  border-color: #c6e8cb;
  padding: 16px;
}

.crv-how__illustration {
  background: #e8f5e9;
  border-radius: 12px;
  padding: 16px 12px 10px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.crv-how__bubble {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  max-width: 90%;
}

.crv-how__bubble--1 {
  background: #fff;
  border: 1px solid #d0cfc8;
  color: var(--text-dark);
  align-self: flex-start;
}

.crv-how__bubble--2 {
  background: #5dae61;
  color: #fff;
  align-self: flex-end;
}

.crv-how__bubble--3 {
  background: #fff;
  border: 1px solid #d0cfc8;
  color: var(--text-dark);
  font-size: 10.5px;
  align-self: flex-start;
}

.crv-how__emoji-row {
  display: flex;
  gap: 12px;
  font-size: 20px;
  align-self: center;
  margin-top: 4px;
}

.crv-how__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.crv-how__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crv-how__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-medium);
  line-height: 1.4;
}

/* ── Bills grid (step 1) ── */
.crl-bills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

/* ── About You layout additions (step 2) ── */
.crp-about-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.crp-field--wide-2 {
  grid-column: 1 / -1;
}

/* Languages multi-select */
.crp-lang-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crp-lang-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid #d0cfc8;
  border-radius: 20px;
  background: #fafaf8;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}

.crp-lang-btn:hover { border-color: #5dae61; background: #f0fdf4; }
.crp-lang-btn.is-active { background: #5dae61; border-color: #5dae61; color: #fff; }

/* ── Form section layout (used in Step 1 & 2) ── */
.crl-form-body {
  display: flex;
  flex-direction: column;
}

.crl-form-section {
  padding: 22px 24px;
}

.crl-form-section:last-child {
  border-bottom: none;
}

.crl-form-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.crl-form-2col--age {
  grid-template-columns: 110px 1fr;
}


/* ═══════════════════════════════════════
   Buy & Sell Create Listing
═══════════════════════════════════════ */

/* Form header */
.bsl-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.bsl-form-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 28px;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.bsl-form-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-light);
  font-weight: 500;
}
.bsl-form-header__illus {
  flex-shrink: 0;
  opacity: 0.85;
}

/* Category row */
.bsl-cat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 600px) {
  .bsl-cat-row { grid-template-columns: 1fr; }
}

/* Condition buttons */
.bsl-condition-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bsl-condition-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 42px;
  border-radius: 12px;
  border: 2px solid #d0cfc8;
  background: #FBF9F4;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  white-space: nowrap;
}
.bsl-condition-btn:hover {
  border-color: #5dae61;
  background: #f0faf0;
}
.bsl-condition-btn.is-active {
  background: #e8f5e9;
  border-color: #5dae61;
  color: #2a8a3d;
}

/* Selling items list */
.bsl-selling-list {
  display: flex;
  flex-direction: column;
}
.bsl-selling-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f0efe8;
}
.bsl-selling-item:last-child { border-bottom: none; padding-bottom: 0; }
.bsl-selling-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f0f9f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bsl-selling-item__title {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 2px;
}
.bsl-selling-item__desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--text-light);
}

/* Tips card */
.bsl-tips-card {
  background: #fffde7 !important;
  border-color: #ffe082 !important;
}
.bsl-tips-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bsl-tip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-dark);
  font-weight: 600;
}

/* Help card */
.bsl-help-card {
  background: #f3e8ff !important;
  border-color: #d8b4fe !important;
}
.bsl-help-card__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.bsl-help-card__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.bsl-help-card__desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 12px;
}
.bsl-help-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid #1a1a1a;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  box-shadow: 2px 2px 0 #1a1a1a;
  transition: box-shadow 0.1s, transform 0.1s;
  white-space: nowrap;
}
.bsl-help-card__btn:hover {
  box-shadow: 1px 1px 0 #1a1a1a;
  transform: translate(1px, 1px);
}
.bsl-help-card__illus {
  flex-shrink: 0;
  opacity: 0.8;
}


/* ═══════════════════════════════════════
   Buy & Sell Review Page
═══════════════════════════════════════ */

/* Review header */
.bslr-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 28px 16px;
  flex-wrap: wrap;
}
.bslr-header__left { flex: 1; min-width: 0; }
.bslr-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 28px;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 3px;
}
.bslr-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-light);
  font-weight: 500;
}
.bslr-header__illus { flex-shrink: 0; opacity: 0.9; }
.bslr-edit-all-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.bslr-edit-all-btn:hover { border-color: #5dae61; background: #f0faf0; }

/* Photo + details row */
.bslr-content {
  display: flex;
  flex-direction: row;
  gap: 28px;
  padding: 0 28px 20px;
  align-items: flex-start;
}

/* Gallery */
.bslr-gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  width: 320px;
}
.bslr-gallery__main {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.bslr-gallery__side {
  display: flex;
  flex-direction: row;
  gap: 6px;
}
.bslr-gallery__thumb {
  width: 72px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  flex-shrink: 0;
}

/* Details table */
.bslr-details { flex: 1; min-width: 0; }
.bslr-item-title {
  font-family: 'Nunito', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 18px;
}
.bslr-table { width: 100%; border-collapse: collapse; }
.bslr-table__row { vertical-align: top; }
.bslr-table__label {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-light);
  padding: 9px 20px 9px 0;
  white-space: nowrap;
  width: 130px;
}
.bslr-table__value {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  padding: 9px 0;
  line-height: 1.6;
}

/* Clickable gallery images */
.bslr-gallery__img {
  cursor: zoom-in;
  transition: opacity 0.15s;
}
.bslr-gallery__img:hover { opacity: 0.88; }

/* Lightbox */
.bslr-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.bslr-lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.bslr-lightbox__close {
  position: absolute;
  top: 18px;
  right: 20px;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.bslr-lightbox__close:hover { background: rgba(255,255,255,0.25); }
.bslr-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.bslr-lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.bslr-lightbox__nav--prev { left: 20px; }
.bslr-lightbox__nav--next { right: 20px; }
.bslr-lightbox__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.bslr-lightbox__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.15s;
}
.bslr-lightbox__dot.is-active { background: #fff; }

/* Safety + Pricing row */
.bslr-bottom-row {
  display: flex;
  gap: 16px;
  padding: 0 28px 28px;
  align-items: stretch;
}

/* Safety card */
.bslr-safety-card {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f0faf0;
  border: 1.5px solid #a8d4ab;
  border-radius: 14px;
  padding: 18px 20px;
}
.bslr-safety-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid #a8d4ab;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bslr-safety-card__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 5px;
}
.bslr-safety-card__desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 10px;
}
.bslr-safety-card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #5dae61;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.bslr-safety-card__link:hover { text-decoration: underline; }

/* Pricing card */
.bslr-pricing-card {
  width: 240px;
  flex-shrink: 0;
  border: 1.5px solid #e0ddd4;
  border-radius: 14px;
  padding: 18px 22px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bslr-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.bslr-pricing-row--total { padding-top: 12px; }
.bslr-pricing-divider {
  border: none;
  border-top: 1.5px dashed #d0cfc8;
  margin: 0;
}
.bslr-pricing-label {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
}
.bslr-pricing-label--total {
  font-weight: 800;
  color: var(--text-dark);
}
.bslr-pricing-value {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}
.bslr-pricing-value--total {
  font-size: 15px;
  font-weight: 800;
  color: #2a8a3d;
}

@media (max-width: 900px) {
  .bslr-content { flex-direction: column; }
  .bslr-gallery { width: 100%; }
  .bslr-bottom-row { flex-direction: column; }
  .bslr-pricing-card { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   ROOMMATES PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.roommates__hero {
  display: flex;
  align-items: flex-start;
  padding: 0 80px 36px 41px;
  background: #fffdf7;
  margin: 0 54px;
  border-radius: 32px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  min-height: 500px;
}

.roommates__content-card {
  background: #ffffff;
  border-radius: 32px;
  margin: 0 54px 64px;
  padding-top: 40px;
  padding-bottom: 48px;
  overflow: clip;
}

.roommates__hero-left {
  flex: 0 0 716px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 48px;
  position: relative;
  z-index: 1;
}

.roommates__hero-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 64px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 66.46px;
  letter-spacing: -1.06px;
  width: 716px;
  position: relative;
}

.roommates__hero-title-deco {
  position: absolute;
  top: -18px;
  right: 50px;
  width: 50px;
  height: 50px;
  pointer-events: none;
}

.roommates__hero-accent {
  color: #5DAE61;
}

.roommates__hero-sub {
  display: flex;
  align-items: center;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 36px;
  color: var(--text-dark);
  white-space: normal;
  height: auto;
}

.roommates__hero-sub-icon {
  flex-shrink: 0;
  display: block;
  align-self: flex-start;
  margin-top: -14px;
  margin-right: 6px;
  margin-left: -32px;
}

.roommates__search-box {
  display: flex;
  flex-direction: column;
  background: #FAF9F6;
  border-radius: 16px;
  border: 1.13px solid #C0C9C380;
  overflow: hidden;
  width: 717px;
  height: 130px;
  box-sizing: border-box;
}

.roommates__search-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 14px;
  flex: 1;
}

.roommates__search-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.roommates__search-label {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0px;
  line-height: 20px;
  width: 140px;
  height: 20px;
  display: block;
}

.roommates__search-input {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  outline: none;
  background: #FFFFFF;
  width: 140px;
  height: 35px;
  padding: 9px 13.5px;
  border-radius: 6.75px;
  border: 1.13px solid #6B7280;
  box-sizing: border-box;
  display: block;
}

.roommates__search-select {
  cursor: pointer;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 28px;
  appearance: auto;
  -webkit-appearance: auto;
}

.roommates__search-divider {
  display: none;
}

.roommates__search-btn {
  padding: 10px 20px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px 0px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  align-self: flex-end;
}

.roommates__search-btn:hover {
  background: #4a9a4e;
}

.roommates__browse-link {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #5dae61;
  text-decoration: none;
  padding: 8px 18px;
  display: block;
}

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

.roommates__hero-right {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.roommates__hero-img {
  width: auto;
  height: 460px;
  display: block;
}

/* ── Trust badges spacing inside roommates hero ── */
.roommates__hero-left .hero__trust {
  margin-top: 28px;
}

/* ── Social proof row ── */
.roommates__social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.roommates__social-avatars {
  display: flex;
}

.roommates__social-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #fff;
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  flex-shrink: 0;
}

.roommates__social-avatars .roommates__social-avatar:first-child {
  margin-left: 0;
}

.roommates__social-text {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #444;
  line-height: 1.4;
}

.roommates__social-text strong {
  color: #5dae61;
  font-weight: 800;
}

/* ── Cities strip ── */
.roommates__cities-wrap {
  padding: 40px 54px 32px;
}

.roommates__cities-header {
  margin-bottom: 20px;
}

.roommates__cities-title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 33.75px;
  line-height: 40.5px;
  color: var(--text-dark);
  white-space: nowrap;
  height: 41px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.roommates__cities-title-star {
  display: block;
  flex-shrink: 0;
  transform: rotate(120deg);
  align-self: flex-start;
  margin-top: -6px;
  margin-left: -10px;
}

.roommates__cities-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #888;
}

.roommates__cities-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.roommates__city-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  flex: 1;
}

.roommates__city-btn:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.roommates__city-img {
  width: 120px;
  height: 72px;
  object-fit: contain;
}

.roommates__city-name {
  font-family: 'Caveat Brush', cursive;
  font-size: 24px;
  font-weight: 400;
  line-height: 22.5px;
  text-align: center;
  color: #333;
  width: 52px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* ── Body: filters + results ── */
.roommates__body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  padding: 0 54px 54px;
  align-items: start;
}

/* ── Filters sidebar ── */
.roommates__filters {
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid #e8ede8;
  padding: 24px 20px;
  position: sticky;
  top: 90px;
}

.roommates__filters-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  color: #1a1a1a;
  margin-bottom: 20px;
}

.roommates__filter-group {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0ee;
}

.roommates__filter-label {
  font-family: 'Nunito', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  color: #999;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.roommates__filter-location {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7f8f5;
  border: 1.5px solid #e0e8e0;
  border-radius: 10px;
  padding: 8px 12px;
}

.roommates__filter-input {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
}

.roommates__filter-date {
  background: #f7f8f5;
  border: 1.5px solid #e0e8e0;
  border-radius: 10px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
}

.roommates__filter-range {
  width: 100%;
  accent-color: #5dae61;
  margin-bottom: 6px;
}

.roommates__filter-range-labels {
  display: flex;
  justify-content: space-between;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #555;
}

.roommates__filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  cursor: pointer;
}

.roommates__filter-check input {
  accent-color: #5dae61;
  width: 15px;
  height: 15px;
}

.roommates__filter-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  cursor: pointer;
}

.roommates__filter-toggle input {
  accent-color: #5dae61;
  width: 15px;
  height: 15px;
}

.roommates__filter-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.roommates__filter-clear {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: 1.5px solid #ccc;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #666;
  cursor: pointer;
  transition: border-color 0.2s;
}

.roommates__filter-clear:hover { border-color: #999; }

.roommates__filter-apply {
  flex: 1;
  padding: 10px;
  background: #5dae61;
  border: none;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.roommates__filter-apply:hover { background: #4a9a4e; }

/* ── Results ── */
.roommates__results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: 12px;
}

.roommates__results-count {
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
}

.roommates__results-count strong {
  color: #5dae61;
}

.roommates__results-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.roommates__sort-select {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  border: 1.5px solid #d8e8d8;
  border-radius: 12px;
  padding: 9px 36px 9px 14px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.roommates__sort-select:hover {
  border-color: #5dae61;
}
.roommates__sort-select:focus {
  border-color: #5dae61;
  box-shadow: 0 0 0 3px rgba(93,174,97,0.12);
}

.roommates__results-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #888;
  font-weight: 500;
  margin-bottom: 20px;
}

/* ── Profile card grid ── */
.roommates__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.roommates__card {
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid #eef0ec;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.25s;
  cursor: pointer;
}

.roommates__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  border-color: #5dae61;
}

.roommates__card-img {
  height: 120px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px;
}

.roommates__card-verified {
  background: #5dae61;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-radius: 6px;
  align-self: flex-start;
}

.roommates__card-fav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
  backdrop-filter: blur(4px);
  align-self: flex-start;
}

.roommates__card-fav--active {
  color: #e11d48;
}

.roommates__card-fav:hover {
  color: #e11d48;
  background: #fff;
}

.roommates__card-avatar-wrap {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
}

.roommates__card-avatar-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #5dae61;
  border: 3px solid #fff;
  color: #fff;
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.roommates__card-body {
  padding: 34px 16px 16px;
}

.roommates__card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.roommates__card-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  color: #1a1a1a;
  line-height: 1.2;
}

.roommates__card-gender {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.roommates__card-gender--female { background: #fce4ec; color: #c2185b; }
.roommates__card-gender--male   { background: #e3f2fd; color: #1565c0; }
.roommates__card-gender--any    { background: #f3e5f5; color: #6a1b9a; }
.roommates__card-gender--lgbtq  { background: #fff3e0; color: #e65100; }

.roommates__card-intent {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #5dae61;
  margin-bottom: 6px;
}

.roommates__card-price {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #5dae61;
  margin-bottom: 4px;
}

.roommates__card-price span {
  font-size: 13px;
  font-weight: 600;
  color: #888;
}

.roommates__card-location {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  margin-bottom: 3px;
}

.roommates__card-uni {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  margin-bottom: 8px;
}

.roommates__card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.roommates__card-tag {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #333;
  padding: 3px 8px;
  border-radius: 6px;
}

.roommates__card-avail {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  margin-bottom: 12px;
}

.roommates__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f0f0ee;
  padding-top: 10px;
  gap: 8px;
}

.roommates__card-details {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #5dae61;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.roommates__card-details:hover {
  color: #4a9a4e;
  text-decoration: underline;
}

.roommates__card-contact {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #5dae61;
  border: 1.5px solid #1a1a1a;
  border-radius: 8px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.roommates__card-contact:hover { background: #4a9a4e; }

/* ── Trust Section ── */
.roommates__trust-section {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 40px 54px;
}

.roommates__trust-left {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.roommates__trust-title {
  font-family: 'Caveat', cursive;
  font-size: 34px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  white-space: nowrap;
}

.roommates__trust-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.roommates__trust-features {
  flex: 1;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.roommates__trust-feature {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.roommates__trust-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 2px;
}

.roommates__trust-feature-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 24px;
  font-weight: 400;
  line-height: 22.5px;
  color: #1a1a1a;
  white-space: nowrap;
  margin-bottom: 6px;
}

.roommates__trust-feature-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

/* ── Post CTA Section ── */
.roommates__post-section {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 40px 54px;
}

.roommates__post-img-wrap {
  flex: 0 0 420px;
}

.roommates__post-img {
  width: 420px;
  height: auto;
  object-fit: contain;
}

.roommates__post-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roommates__post-title {
  font-family: 'Caveat', cursive;
  font-size: 38px;
  font-weight: 700;
  color: #1a1a1a;
}

.roommates__post-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #444;
}

.roommates__post-link {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #666;
}

.roommates__post-tagline {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #333;
}

.roommates__post-btn {
  padding: 14px 28px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.roommates__post-btn:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0 #1a1a1a;
  transform: translate(2px, 2px);
}

/* ── How It Works ── */
.rm-hiw {
  padding: 48px 54px 40px;
  background: #fff;
}

.rm-hiw__top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 32px;
}

.rm-hiw__view-all {
  padding: 8px 24px;
  border: 1.5px solid #1a1a1a;
  border-radius: 999px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.2s;
}

.rm-hiw__view-all:hover { background: #f5f5f5; }

.rm-hiw__tagline {
  font-family: 'Caveat', cursive;
  font-size: 16px;
  font-weight: 700;
  color: #888;
}

.rm-hiw__tagline-img {
  height: 110px;
  width: auto;
}

.rm-hiw__title {
  font-family: 'Caveat', cursive;
  font-size: 36px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 40px;
}

.rm-hiw__steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.rm-hiw__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.rm-hiw__badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #5dae61;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border: 2px solid #1a1a1a;
  box-shadow: 3px 3px 0px 0px #1a1a1a;
}

.rm-hiw__icon-wrap {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.rm-hiw__step-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.rm-hiw__icon-wrap--deco {
  position: relative;
}

.rm-hiw__step-star {
  position: absolute;
  top: -22px;
  right: -22px;
  width: 30px;
  height: 30px;
}

.rm-hiw__step-name {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.rm-hiw__step-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #888;
  line-height: 1.5;
  max-width: 140px;
  margin: 0 auto;
}

.rm-hiw__arrow {
  flex-shrink: 0;
  margin-top: 40px;
  padding: 0 8px;
  display: flex;
  align-items: center;
}

.rm-hiw__arrow-img {
  width: 120px;
  height: auto;
  object-fit: contain;
}

/* ── Why Students Love ── */
.rm-why {
  margin: 0 54px 0;
  background: #5DAE6133;
  border-radius: 24px;
  padding: 40px 54px;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 1px solid #6B7280;
}

.rm-why__plant {
  position: absolute;
  font-size: 48px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}

.rm-why__plant--left { left: 20px; transform: translateY(-50%) scaleX(-1); }
.rm-why__plant--right { right: 20px; }

.rm-why__leaf {
  position: absolute;
  bottom: 0;
  height: 120px;
  width: auto;
  pointer-events: none;
}

.rm-why__leaf--right { height: 85px; }

.rm-why__leaf--left { left: 0; }
.rm-why__leaf--right { right: 0; }

.rm-why__title {
  font-family: 'Caveat', cursive;
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 32px;
}

.rm-why__grid {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.rm-why__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.rm-why__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rm-why__icon-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.rm-why__item-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rm-why__item-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  color: #1a1a1a;
}

.rm-why__item-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  line-height: 1.5;
  max-width: 160px;
}

/* ── Final CTA Banner ── */
.rm-cta {
  margin: 32px 54px 0;
  background: #f5f4ed;
  border-radius: 24px;
  padding: 52px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 1.13px solid #EBE4D5;
  align-items: center;
  gap: 12px;
}

.rm-cta__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #888;
}

.rm-cta__title {
  font-family: 'Caveat', cursive;
  font-size: 48px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.1;
}

.rm-cta__btn {
  margin-top: 8px;
  padding: 14px 36px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.rm-cta__btn:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0 #1a1a1a;
  transform: translate(2px, 2px);
}

.rm-cta__launch {
  font-family: 'Baloo 2', cursive;
  font-size: 14px;
  font-weight: 500;
  line-height: 22.5px;
  letter-spacing: 0px;
  color: #1a1a1a;
  width: 200px;
  margin: 0 auto;
}

.rm-cta__deco {
  position: absolute;
  bottom: 0;
  height: 220px;
  width: auto;
  pointer-events: none;
}

.rm-cta__deco--left { left: 0; }
.rm-cta__deco--right { right: 0; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .roommates__hero { margin: 0 24px; padding: 40px 40px 36px; }
  .roommates__content-card { margin: 0 24px 48px; }
  .roommates__body { grid-template-columns: 220px 1fr; }
  .roommates__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* Hero */
  .roommates__hero { flex-direction: column; margin: 0 16px; padding: 28px 20px 24px; height: auto; min-height: unset; }
  .roommates__hero-left { flex: none; width: 100%; margin-top: 0; }
  .roommates__hero-right { display: none; }
  .roommates__hero-title { font-size: 42px; line-height: 1.1; width: 100%; letter-spacing: -0.5px; }
  .roommates__hero-title-deco { display: none; }
  .roommates__hero-sub { font-size: 22px; line-height: 1.3; }
  .roommates__hero-sub-icon { margin-left: 0; }
  /* Search box */
  .roommates__search-box { width: 100%; height: auto; }
  .roommates__search-row { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .roommates__search-field { width: calc(50% - 4px); flex: none; }
  .roommates__search-divider { display: none; }
  .roommates__search-btn { width: 100%; margin-top: 4px; }
  /* Content card */
  .roommates__content-card { margin: 0 16px 40px; border-radius: 28px; }
  /* Cities */
  .roommates__cities-wrap { padding: 28px 20px; }
  .roommates__cities-row { overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; justify-content: flex-start; padding-bottom: 8px; }
  .roommates__city-btn { flex: 0 0 auto; scroll-snap-align: start; padding: 8px 12px; }
  .roommates__city-img { width: 80px; height: 52px; }
  .roommates__city-name { font-size: 18px; width: auto; }
  /* Body */
  .roommates__body { grid-template-columns: 1fr; padding: 0 20px 40px; }
  .roommates__filters { position: static; }
  .roommates__grid { grid-template-columns: 1fr; }
  /* How it works */
  .rm-hiw__steps { flex-direction: column; align-items: center; gap: 16px; }
  .rm-hiw__arrow { transform: rotate(90deg); }
  /* Why / CTA */
  .rm-why__grid { grid-template-columns: 1fr 1fr; }
  .rm-cta__title { font-size: 34px; }
  .rm-cta__deco { height: 140px; }
}

@media (max-width: 480px) {
  .roommates__hero { margin: 0 12px; padding: 24px 16px 20px; }
  .roommates__hero-title { font-size: 34px; }
  .roommates__hero-sub { font-size: 18px; }
  .roommates__content-card { margin: 0 12px 32px; }
  .roommates__search-field { width: 100%; }
  .rm-why__grid { grid-template-columns: 1fr; }
  .rm-cta__deco { display: none; }
  .rm-cta__title { font-size: 28px; }
}


/* ═══════════════════════════════════════════
   BUY & SELL PAGE
═══════════════════════════════════════════ */

.bs {
  background: #fffdf7;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── HERO ── */
.bs__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0 36px;
  gap: 24px;
  margin: 0 54px;
  border-radius: 32px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  min-height: 220px;
}

.bs__hero-left-deco {
  flex-shrink: 0;
  width: 350px;
}

.bs__hero-right-deco {
  flex-shrink: 0;
  width: 260px;
}

.bs__hero-deco-img {
  width: 100%;
  height: auto;
}

.bs__hero-center {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.bs__hero-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 52px;
  color: #1a1a1a;
  line-height: 1.1;
  margin: 0;
}

.bs__hero-accent {
  color: #5dae61;
}

.bs__hero-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  color: #555;
  margin: 0;
}

/* SEARCH BAR */
.bs__search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 50px;
  box-shadow: 4px 4px 0 #1a1a1a;
  overflow: hidden;
  width: 100%;
  max-width: 560px;
  margin-top: 4px;
}

.bs__search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  flex: 1;
}

.bs__search-input {
  border: none;
  outline: none;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  background: transparent;
  width: 100%;
}

.bs__search-input::placeholder { color: #bbb; }

.bs__search-divider {
  width: 1px;
  height: 28px;
  background: #e0e0e0;
  flex-shrink: 0;
}

.bs__search-location {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
}

.bs__search-loc-select {
  border: none;
  outline: none;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #555;
  background: transparent;
  cursor: pointer;
}

.bs__search-btn {
  background: #5dae61;
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.bs__search-btn:hover { background: #4a9a4e; }

/* ── CONTENT CARD ── */
.bs__content-card {
  background: #fff;
  border-radius: 32px 32px 0 0;
  margin: 0 24px;
  padding: 40px 40px 60px;
  min-height: 80vh;
}

.tr {
  background: #fffdf7;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Rounded all corners + desktop spacing (must come before responsive overrides) */
.bs .bs__content-card,
.tr .bs__content-card {
  border-radius: 32px;
  margin: 0 54px 64px;
  padding-bottom: 48px;
}

/* ── LAYOUT ── */
.bs__main-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.bs__main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.bs__sidebar {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── SECTION ── */
.bs__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.bs__section-title {
  font-family: 'Caveat', cursive;
  font-size: 33.75px;
  font-weight: 700;
  line-height: 40.5px;
  letter-spacing: 0px;
  color: #1a1a1a;
  margin: 0 0 20px 0;
}

.bs__section-header .bs__section-title { margin: 0; }

.bs__view-all {
  background: none;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #5dae61;
  cursor: pointer;
}

/* ── CATEGORIES ── */
.bs__cats-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.bs__cats-row::-webkit-scrollbar { display: none; }

.bs__cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid #F3F4F6;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  width: 155px;
  height: 205px;
  flex-shrink: 0;
  box-shadow: 0px 1px 2px 0px #0000000D;
  transition: border-color 0.2s, box-shadow 0.2s;
  justify-content: center;
}

.bs__cat-btn:hover {
  border-color: #5dae61;
  box-shadow: 3px 3px 0 #1a1a1a;
}

.bs__cat-img-wrap {
  width: 126px;
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs__cat-img {
  width: 126px;
  height: 126px;
  object-fit: contain;
}

.bs__cat-name {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0px;
  color: #1a1a1a;
  text-align: center;
  word-break: break-word;
  white-space: normal;
}

/* ── FILTERS BAR ── */
.bs__filters-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.bs__select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
}

.bs__select-wrap::after {
  content: '▾';
  position: absolute;
  right: 10px;
  font-size: 12px;
  color: #6B7280;
  pointer-events: none;
}

.bs__filter-select,
.bs__sort-select {
  height: 38px;
  box-sizing: border-box;
  border: 1.13px solid #6B7280;
  border-radius: 6px;
  padding: 0 30px 0 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  background: #FAF9F6;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.bs__filter-check {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border: 1.13px solid #6B7280;
  border-radius: 6px;
  background: #FAF9F6;
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
  white-space: nowrap;
}

.bs__filter-spacer { flex: 1; }

.bs__filter-search {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  box-sizing: border-box;
  border: 1.13px solid #6B7280;
  border-radius: 6px;
  padding: 0 12px;
  background: #FAF9F6;
  flex: 1 1 160px;
  min-width: 120px;
  max-width: 240px;
}

.bs__filter-search-input {
  border: none;
  outline: none;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  background: transparent;
  width: 100%;
}

.bs__filter-search-input::placeholder { color: #bbb; }

.bs__filter-clear-btn {
  height: 38px;
  box-sizing: border-box;
  border: 1.13px solid #e11d48;
  border-radius: 6px;
  padding: 0 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #e11d48;
  background: #fff0f3;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.bs__filter-clear-btn:hover { background: #ffe4ea; }

.bs__view-toggle {
  display: flex;
  gap: 4px;
}

.bs__view-btn {
  background: #FAF9F6;
  border: 1.13px solid #6B7280;
  border-radius: 6px;
  padding: 9px 10px;
  cursor: pointer;
  color: #6B7280;
  display: flex;
  align-items: center;
}

.bs__view-btn--active {
  background: #FAF9F6;
  border-color: #6B7280;
  color: #1a1a1a;
}

/* ── LISTINGS GRID ── */
.bs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 16px;
}

.bs__card {
  width: 100%;
  height: auto;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  background: #fff;
  margin-top: 8px;
  opacity: 1;
  display: flex;
  flex-direction: column;
}

.bs__card:hover {
  box-shadow: 4px 4px 0 #1a1a1a;
  transform: translate(-2px, -2px);
}

.bs__card-img-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 16px 16px 0 0;
}

.bs__card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.bs__card-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 1.5px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ccc;
  cursor: pointer;
}

.bs__card-fav--active { color: #e74c3c; }

.bs__card-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  opacity: 1;
  box-sizing: border-box;
  flex-shrink: 0;
  gap: 6px;
}

.bs__card-price {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  color: #5dae61;
  display: block;
}

.bs__card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.bs__card-title {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.bs__card-condition {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.bs__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bs__card-location,
.bs__card-time {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #999;
}

.bs__card-seller {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}
.bs__card-seller-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #5dae61;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Nunito', sans-serif;
}
.bs__card-seller-avatar--img {
  object-fit: cover;
  background: none;
}
.bs__card-seller-name {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #555;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* LOAD MORE */
.bs__load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.bs__load-more {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 50px;
  padding: 12px 32px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  box-shadow: 3px 3px 0 #1a1a1a;
  transition: transform 0.15s, box-shadow 0.15s;
}

.bs__load-more:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #1a1a1a;
}

/* ── SIDEBAR CARDS ── */
.bs__sidebar-card {
  background: #f9f9f5;
  border: 1.5px solid #e8e8e8;
  border-radius: 20px;
  padding: 20px;
}

.bs__sidebar-card--dark {
  background: #F0F5ED;
  border: 1px solid #F3F4F6;
  position: relative;
  overflow: hidden;
}

.bs__sidebar-card--purple {
  background: #F5F3FF;
  border: none;
}

/* POST AN ITEM */
.bs__post-header {
  display: block;
}

.bs__post-header-left {
  display: flex;
  flex-direction: column;
}

.bs__post-title {
  font-family: 'Caveat', cursive;
  font-size: 33.75px;
  font-weight: 700;
  line-height: 40.5px;
  letter-spacing: 0px;
  color: #1a1a1a;
  margin: 0;
}

.bs__post-deco {
  width: 135px;
  height: auto;
  object-fit: contain;
  position: absolute;
  bottom: 0;
  right: 0;
}

.bs__post-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #555;
  margin: 6px 0 14px;
}

.bs__post-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}

.bs__post-btn {
  width: fit-content;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 4px 4px 0px 0px #1a1a1a;
  padding: 10px 24px;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.bs__post-btn:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

.bs__post-fee {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #555;
  text-align: center;
  margin: 8px 0 0;
}

/* SAFETY TIPS */
.bs__safety-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.bs__safety-title {
  font-family: 'Caveat', cursive;
  font-size: 33.75px;
  font-weight: 700;
  line-height: 40.5px;
  letter-spacing: 0px;
  color: #1a1a1a;
  margin: 0;
}

.bs__safety-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.bs__safety-deco {
  position: absolute;
  top: 20px;
  right: 0;
  width: 115px;
  height: auto;
  object-fit: contain;
}

.bs__safety-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #1a1a1a;
  margin: 0 0 12px;
}

.bs__safety-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #333;
  margin-bottom: 8px;
}

.bs__safety-check {
  width: 18px;
  height: 18px;
  background: #5dae61;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}

.bs__safety-link {
  background: none;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #5dae61;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
}

/* NEED SOMETHING */
.bs__need-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bs__need-title {
  font-family: 'Caveat', cursive;
  font-size: 33.75px;
  font-weight: 700;
  line-height: 40.5px;
  letter-spacing: 0px;
  color: #1a1a1a;
  margin: 0 0 4px;
}

.bs__need-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #666;
  margin: 0 0 12px;
}

.bs__need-btn {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  padding: 8px 14px;
  font-family: 'Caveat Brush', cursive;
  font-size: 15px;
  color: #1a1a1a;
  cursor: pointer;
  box-shadow: 3px 3px 0 #1a1a1a;
}

.bs__need-img {
  width: 130px;
  height: auto;
  object-fit: contain;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* POPULAR SEARCHES */
.bs__popular-title {
  font-family: 'Caveat', cursive;
  font-size: 33.75px;
  font-weight: 700;
  line-height: 40.5px;
  letter-spacing: 0px;
  color: #1a1a1a;
  margin: 0 0 12px;
}

.bs__popular-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bs__popular-tag {
  background: #fff;
  border: 1.5px solid #d0d0d0;
  border-radius: 20px;
  padding: 5px 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.bs__popular-tag:hover {
  border-color: #5dae61;
  background: #f0fdf4;
}

/* ── BUY & SELL — ALL CATEGORIES MODAL ── */
.bs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.bs-modal {
  background: #fff;
  border-radius: 24px;
  width: 100%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}

.bs-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.bs-modal__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 28px;
  color: #1a1a1a;
}

.bs-modal__close {
  background: #f0f0f0;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
}

.bs-modal__close:hover { background: #e0e0e0; }

.bs-modal__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.bs-modal__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 1px solid #F3F4F6;
  border-radius: 12px;
  padding: 16px 10px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0px 1px 2px 0px #0000000D;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-align: center;
}

.bs-modal__item:hover {
  border-color: #5dae61;
  box-shadow: 3px 3px 0 #1a1a1a;
}

.bs-modal__img-wrap {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs-modal__img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.bs-modal__name {
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.3;
}

/* ── Buy & Sell responsive ── */
@media (max-width: 960px) {
  .bs__hero { margin: 0 24px; }
  .bs__hero-left-deco,
  .bs__hero-right-deco { width: 220px; }
  .bs .bs__content-card,
  .tr .bs__content-card { margin: 0 24px 48px; }
  .bs__content-card { margin: 0 24px; padding: 32px 28px 48px; }
  .bs__sidebar { width: 260px; }
}

@media (max-width: 768px) {
  /* Hero */
  .bs__hero { margin: 0 16px; padding: 20px 0 24px; gap: 0; }
  .bs__hero-left-deco,
  .bs__hero-right-deco { display: none; }
  .bs__hero-title { font-size: 38px; }
  .bs__hero-sub { font-size: 13px; }
  .bs__search-bar { width: 90%; max-width: 280px; box-shadow: 3px 3px 0 #1a1a1a; }
  .bs__search-btn { padding: 9px 16px; font-size: 15px; }
  .bs__search-divider { display: none; }
  .bs__search-location { display: none; }
  /* Content card */
  .bs__content-card { margin: 0 16px; padding: 24px 16px 40px; border-radius: 28px; }
  .bs .bs__content-card,
  .tr .bs__content-card { margin: 0 16px 40px; border-radius: 28px; }
  /* Layout: stack sidebar below main */
  .bs__main-layout { flex-direction: column; gap: 24px; }
  .bs__main-col { width: 100%; min-width: 0; overflow: hidden; }
  .bs__sidebar { width: 100%; }
  /* Category row → horizontal scroll */
  .bs__cats-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 10px;
  }
  .bs__cats-row::-webkit-scrollbar { display: none; }
  .bs__cat-btn { flex: 0 0 100px; width: 100px; height: 140px; padding: 10px 6px; gap: 8px; scroll-snap-align: start; }
  .bs__cat-img-wrap { width: 64px; height: 64px; }
  .bs__cat-img { width: 64px; height: 64px; }
  .bs__cat-name { font-size: 11px; }
  /* Filters */
  .bs__filter-spacer { display: none; }
  .bs__view-toggle { display: none; }
  .bs__filters-bar { gap: 6px; }
  .bs__filter-select, .bs__sort-select { font-size: 12px; padding: 7px 24px 7px 10px; }
  /* Listings grid: 2 columns */
  .bs__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* Modal */
  .bs-modal__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .bs__hero { margin: 0 12px; }
  .bs__hero-title { font-size: 32px; }
  .bs__hero-center { gap: 8px; }
  .bs__content-card { margin: 0 12px; padding: 20px 12px 32px; border-radius: 28px; }
  .bs .bs__content-card,
  .tr .bs__content-card { margin: 0 12px 32px; border-radius: 28px; }
  /* Category row stays horizontal scroll, slightly smaller cards */
  .bs__cat-btn { flex: 0 0 88px; width: 88px; height: 124px; padding: 8px 4px; }
  .bs__cat-img-wrap { width: 54px; height: 54px; }
  .bs__cat-img { width: 54px; height: 54px; }
  .bs__cat-name { font-size: 10px; }
  /* Listings: 1 column on very small */
  .bs__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   TUTOR PAGE
══════════════════════════════════════════ */

/* HERO */
.tr__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0 36px;
  gap: 24px;
  margin: 0 54px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  min-height: 220px;
}

.tr__hero-left-deco,
.tr__hero-right-deco { flex-shrink: 0; width: 380px; }

.tr__hero-deco-img { width: 100%; height: auto; }

.tr__hero-center {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.tr__hero-title {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 64px;
  line-height: 66.46px;
  letter-spacing: -1.06px;
  text-align: center;
  color: #1a1a1a;
  width: 419px;
  margin: 0;
}

.tr__hero-accent { color: #5dae61; }

.tr__hero-title-deco {
  width: 419px;
  height: auto;
  display: block;
  margin-top: -12px;
}

.tr__hero-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #555;
  margin: 0;
  line-height: 1.6;
}


/* CATEGORY TABS */
.tr__cats-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.tr__cat-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  white-space: nowrap;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0px;
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
  justify-content: center;
}

.tr__cat-tab:hover {
  border-color: #5dae61;
  color: #5dae61;
  background: #5DAE6133;
}

.tr__cat-tab--active {
  background: #5DAE6133;
  border: 2px solid #5DAE61;
  color: #5DAE61;
}

/* INSTRUCTOR CARDS */
.tr__instructors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.tr__card {
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.06);
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s cubic-bezier(0.34,1.2,0.64,1), transform 0.25s cubic-bezier(0.34,1.2,0.64,1);
  cursor: pointer;
  box-sizing: border-box;
}

.tr__card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  transform: translateY(-4px);
  border-color: #5dae61;
}

.tr__card-avatar-section {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f3f4f6;
}

.tr__card-top {
  position: absolute;
  display: flex;
  align-items: center;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.tr__card-rating {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  background: #fff8e1;
  border: 1px solid #f0c040;
  border-radius: 50px;
  padding: 2px 8px;
  color: #1a1a1a;
}

.tr__card-fav {
  background: rgba(255,255,255,0.9);
  border: 1.5px solid #e0e0e0;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #ccc;
  cursor: pointer;
}

.tr__card-fav--active { color: #e74c3c; border-color: #e74c3c; }

.tr__card-avatar-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.tr__card-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }

.tr__card-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 12px 14px 14px;
  box-sizing: border-box;
}

.tr__card-name {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0px;
  color: #1A1A1A;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tr__card-specialty {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #6b7280;
}

.tr__card-price {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #5dae61;
  margin-top: 2px;
}

.tr__card-price span {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #9ca3af;
}

.tr__card-badge {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 4px;
}

/* POPULAR TOPICS */
.tr__topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(277px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.tr__topic-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  height: 82px;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  box-shadow: 0px 1px 2px 0px #0000000D;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: left;
  box-sizing: border-box;
}

.tr__topic-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 #1a1a1a;
}

.tr__topic-icon { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }

.tr__topic-info { display: flex; flex-direction: column; gap: 2px; }

.tr__topic-name {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 24px;
  line-height: 22.5px;
  letter-spacing: 0px;
  color: #1a1a1a;
}

.tr__topic-count {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #888;
}

/* CTA BANNER */
.tr__cta-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 12px 28px;
  margin-top: 8px;
}

.tr__cta-img { width: 182px; height: 114px; object-fit: contain; flex-shrink: 0; }

.tr__cta-text { flex: 1; text-align: center; }

.tr__cta-title {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 24px;
  line-height: 22.5px;
  letter-spacing: 0px;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.tr__cta-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #666;
}

.tr__cta-btn {
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 4px 4px 0 #1a1a1a;
  padding: 12px 40px;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.tr__cta-btn:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0 #1a1a1a;
  transform: translate(2px, 2px);
}

/* WHY LEARN WITH US */
.tr__why-card { display: flex; flex-direction: column; gap: 0; background: #FFFFFF; border: 1px solid #6B7280; }

.tr__why-title {
  font-family: 'Caveat', cursive;
  font-size: 33.75px;
  font-weight: 700;
  line-height: 40.5px;
  color: #1a1a1a;
  margin: 0 0 12px;
}

.tr__why-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #1a1a1a;
  padding: 5px 0;
}

.tr__why-check {
  color: #5dae61;
  font-weight: 800;
  flex-shrink: 0;
}

.tr__why-deco {
  width: 75%;
  height: auto;
  display: block;
  margin: -60px -20px 0 auto;
}

.tr__become-btn {
  width: 100%;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 4px 4px 0 #1a1a1a;
  padding: 12px;
  margin-top: 0;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  cursor: pointer;
  margin-top: 16px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.tr__become-btn:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0 #1a1a1a;
  transform: translate(2px, 2px);
}

.tr__become-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #5dae61;
  text-align: center;
  margin: 8px 0 0;
  font-weight: 700;
}

/* LEARNING TIP */
.tr__tip-card { background: #F5F3FF; border: none; }

.tr__tip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tr__tip-icon { font-size: 20px; }

.tr__tip-right-deco {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 120px;
  height: auto;
  object-fit: contain;
}

.tr__tip-bulb {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
}

.tr__tip-title {
  font-family: 'Caveat', cursive;
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  flex: 1;
}

.tr__tip-deco { font-size: 18px; }

.tr__tip-text {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #444;
  line-height: 1.6;
  margin: 0;
}

/* ── Teach & Coach responsive ── */
@media (max-width: 960px) {
  .tr__hero { margin: 0 24px; }
  .tr__hero-left-deco,
  .tr__hero-right-deco { width: 240px; }
  .tr__hero-title { font-size: 52px; width: auto; }
  .tr__hero-title-deco { width: 320px; }
}

@media (max-width: 768px) {
  /* Hero */
  .tr__hero { margin: 0 16px; padding: 20px 0 24px; gap: 0; }
  .tr__hero-left-deco,
  .tr__hero-right-deco { display: none; }
  .tr__hero-title { font-size: 40px; width: 100%; line-height: 1.15; }
  .tr__hero-title-deco { width: 100%; max-width: 280px; }
  .tr__hero-sub { font-size: 13px; }
  /* Category tabs → horizontal scroll */
  .tr__cats-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
    gap: 8px;
  }
  .tr__cats-tabs::-webkit-scrollbar { display: none; }
  .tr__cat-tab { flex-shrink: 0; scroll-snap-align: start; font-size: 14px; height: 38px; }
  /* Instructor grid: 2 columns */
  .tr__instructors-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tr__card-avatar-section { height: 140px; }
  .tr__card-body { padding: 10px 12px 12px; }
  /* CTA banner: stack vertically */
  .tr__cta-banner { flex-direction: column; text-align: center; padding: 20px 16px; gap: 12px; }
  .tr__cta-img { width: 100px; height: auto; }
  .tr__cta-btn { padding: 10px 28px; }
  /* Sidebar full width already via bs__sidebar */
}

@media (max-width: 480px) {
  .tr__hero { margin: 0 12px; }
  .tr__hero-title { font-size: 34px; }
  .tr__instructors-grid { gap: 8px; }
  .tr__cat-tab { font-size: 13px; height: 36px; padding: 0 12px; }
  .tr__cta-banner { padding: 16px 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — Navbar & Home Page
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hamburger button (hidden on desktop) ───────────────────── */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.navbar__hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #1a1a1a;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

.navbar__hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.navbar__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Mobile full-screen menu ────────────────────────────────── */
.navbar__mobile-menu {
  position: fixed;
  top: var(--navbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: #fffdf7;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 32px 24px 40px;
  overflow-y: auto;
  border-top: 1.5px solid #e0ddd4;
}

.navbar__mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.navbar__mobile-link {
  font-family: 'Caveat Brush', cursive;
  font-size: 28px;
  color: #555;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.navbar__mobile-link:hover {
  background: rgba(93, 174, 97, 0.1);
  color: #1a1a1a;
}

.navbar__mobile-link.active {
  color: #5dae61;
}

.navbar__mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1.5px solid #e0ddd4;
}

.navbar__mobile-login,
.navbar__mobile-signup,
.navbar__mobile-logout {
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  border: 2.25px solid #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  cursor: pointer;
  text-align: center;
}

.navbar__mobile-login {
  background: transparent;
  color: #1a1a1a;
}

.navbar__mobile-signup {
  background: #5dae61;
  color: #fff;
  box-shadow: 3px 3px 0 #1a1a1a;
}

.navbar__mobile-logout {
  background: transparent;
  color: #dc2626;
  border-color: #dc2626;
}

.navbar__mobile-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 2.25px solid #1a1a1a;
  border-radius: 16px;
  text-decoration: none;
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  color: #1a1a1a;
}

/* ─── Navbar responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .navbar__nav { display: none; }
  .navbar__hamburger { display: flex; }
  .navbar__lang { display: none; }
}

@media (max-width: 768px) {
  .navbar__inner { padding: 8px 20px; height: 60px; }
  .navbar__logo-img { width: 130px; height: 44px; }
  --navbar-h: 60px;
}

@media (max-width: 480px) {
  .navbar__login,
  .navbar__signup { display: none; }
}

/* ─── content-card responsive ────────────────────────────────── */
@media (max-width: 1100px) {
  .content-card { margin: 0 32px 48px; }
}

@media (max-width: 768px) {
  .content-card { margin: 0 12px 40px; border-radius: 24px; }
}

@media (max-width: 480px) {
  .content-card { margin: 0 0 32px; border-radius: 0; }
}

/* ─── HowItWorks responsive ──────────────────────────────────── */
@media (max-width: 900px) {
  .how-it-works__inner { flex-direction: column; align-items: stretch; }
  .how-it-works__pricing { width: 100%; margin: 0; }
}

/* ─── Reach section responsive ───────────────────────────────── */
@media (max-width: 900px) {
  .reach__inner { flex-direction: column; align-items: center; }
  .reach__card { width: 100%; height: auto; }
  .reach__map { width: 100%; max-width: 480px; }
}

@media (max-width: 768px) {
  .reach { padding: 0 20px 48px; }
  .reach__left { padding-left: 0; }
  .reach__map { display: none; }
}

/* ─── Mobile menu height fix for smaller navbars ─────────────── */
@media (max-width: 768px) {
  .navbar__mobile-menu { top: 70px; }
}

/* ─── Hero description mobile line break ─────────────────────── */
.hero__description-break { display: none; }

@media (max-width: 768px) {
  .hero__description-break { display: inline; }
}

/* ─── Hero trust items mobile fix ───────────────────────────── */
@media (max-width: 768px) {
  .hero__trust {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .hero__trust-item {
    flex: 1;
    min-width: 0;
    height: auto;
  }
}

@media (max-width: 460px) {
  .hero__trust {
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero__trust-item {
    flex: 0 0 100%;
  }
}

/* ─── HowItWorks steps mobile fix ───────────────────────────── */
@media (max-width: 768px) {
  .how-it-works {
    padding: 0 20px 48px;
  }

  .how-it-works__inner {
    flex-direction: column;
    gap: 24px;
  }

  .how-it-works__title {
    margin-bottom: 24px;
    font-size: 28px;
  }

  .how-it-works__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
    flex-wrap: unset;
  }

  .how-it-works__step {
    flex: unset;
  }

  /* hide arrows in grid layout */
  .how-it-works__arrow {
    display: none;
  }

  .how-it-works__step-badge {
    right: auto;
    left: 50%;
    transform: translateX(16px);
    top: -14px;
  }

  .how-it-works__pricing {
    width: 100%;
    margin: 0;
    padding: 20px 24px;
  }
}

@media (max-width: 480px) {
  .how-it-works__steps {
    grid-template-columns: 1fr 1fr;
    gap: 20px 12px;
  }

  .how-it-works__step-img {
    max-width: 80px;
    margin: 0 auto;
  }
}

/* ─── Pricing box mobile fix ─────────────────────────────────── */
@media (max-width: 768px) {
  .pricing__coin-img {
    width: 64px;
    height: 54px;
    top: -8px;
    right: 12px;
  }

  .pricing__arrow-doodle {
    width: 52px;
    height: 64px;
    right: 4px;
  }

  .pricing__cta {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Create Tutor Listing — tutor-specific styles
   ═══════════════════════════════════════════════════════════════ */

/* Select wrapper with leading icon */
.cl-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cl-select-icon {
  position: absolute;
  left: 10px;
  pointer-events: none;
  z-index: 1;
}
.cl-input--select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* Two-column grid for tutor form rows */
.tutor-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.tutor-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tutor-field--standalone {
  margin-bottom: 18px;
}

/* Smaller textarea */
.cl-textarea--sm {
  min-height: 76px;
  resize: vertical;
}

/* Teaching Mode toggle buttons */
.tutor-toggle-row {
  display: flex;
  gap: 8px;
}
.tutor-mode-btn {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.8px solid #d0cfc8;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
}
.tutor-mode-btn:hover { border-color: #5dae61; color: #5dae61; background: #f0faf0; }
.tutor-mode-btn.is-active {
  background: #5dae61;
  border-color: #5dae61;
  color: #fff;
}

/* Language multi-select chips */
.tac-lang-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  background: #fff;
  min-height: 42px;
}
.tac-lang-chip {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid #d0cfc8;
  background: #f9f8f4;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tac-lang-chip:hover { border-color: #5dae61; color: #5dae61; background: #f0faf0; }
.tac-lang-chip.is-active { background: #5dae61; border-color: #5dae61; color: #fff; }

/* Level buttons — 2×2 grid so all 4 fit without wrapping unevenly */
.tutor-level-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tutor-level-btn {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.8px solid #d0cfc8;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
}
.tutor-level-btn:hover { border-color: #5dae61; color: #5dae61; }
.tutor-level-btn.is-active {
  background: #5dae61;
  border-color: #5dae61;
  color: #fff;
}

/* Price row with currency + frequency */
.tutor-price-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tutor-freq-select {
  width: 110px;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}

/* Live Preview card */
.tutor-preview-card {
  border: 1.8px solid #e2e1da;
  border-radius: 16px;
  background: #fff;
  margin-bottom: 16px;
  overflow: hidden;
}
.tutor-preview-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1.8px solid #e2e1da;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}
.tutor-preview-card__body {
  padding: 16px;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tutor-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.tutor-preview-empty p {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #aaa;
  max-width: 180px;
  line-height: 1.5;
}
.tutor-preview-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tutor-preview-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  background: #e8f5e9;
  color: #5dae61;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  width: fit-content;
}
.tutor-preview-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: #1a1a1a;
  margin: 0;
}
.tutor-preview-level {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1.5px solid #5dae61;
  color: #5dae61;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 600;
  width: fit-content;
}
.tutor-preview-mode {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #888;
  margin: 0;
}
.tutor-preview-price {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0;
}
.tutor-preview-price span {
  font-size: 12px;
  font-weight: 500;
  color: #888;
}

/* Tips card */
.tutor-tips-card {
  border: 1.8px solid #e2e1da;
  border-radius: 16px;
  background: #fffdf4;
  padding: 16px;
  margin-bottom: 16px;
}
.tutor-tips-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12px;
}
.tutor-tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tutor-tips-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #444;
  line-height: 1.4;
}

/* Need Help card */
.tutor-help-card {
  border: 1.8px solid #e2e1da;
  border-radius: 16px;
  background: #f0edf9;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tutor-help-card__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: #1a1a1a;
  margin: 0 0 4px;
}
.tutor-help-card__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #666;
  margin: 0;
}
.tutor-help-btn {
  padding: 10px 18px;
  border-radius: 12px;
  border: 2px solid #1a1a1a;
  background: #fff;
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  color: #1a1a1a;
  cursor: pointer;
  box-shadow: 3px 3px 0 #1a1a1a;
  transition: box-shadow 0.15s, transform 0.15s;
  width: 100%;
  text-align: center;
}
.tutor-help-btn:hover {
  box-shadow: 5px 5px 0 #1a1a1a;
  transform: translate(-1px, -1px);
}

/* Responsive */
@media (max-width: 640px) {
  .tutor-grid-2 { grid-template-columns: 1fr; }
  .tutor-toggle-row { gap: 6px; }
  .tutor-level-wrap { gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   Create Tutor — Course Details (Step 2)
   ═══════════════════════════════════════════════════════════════ */

/* Two-column inner grid for the form body */
.cd-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: flex-start;
}
.cd-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cd-single-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cd-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Rich Text Editor */
.cd-rte {
  border: 1.8px solid #d0cfc8;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.cd-rte:focus-within { border-color: #5dae61; }
.cd-rte__toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-bottom: 1.5px solid #ececec;
  background: #fafaf8;
}
.cd-rte__btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #555;
  transition: background 0.15s;
}
.cd-rte__btn:hover { background: #ececec; }
.cd-rte__btn--italic { font-style: italic; }
.cd-rte__btn--underline { text-decoration: underline; }
.cd-rte__divider {
  width: 1px;
  height: 18px;
  background: #ddd;
  margin: 0 4px;
}
.cd-rte__count {
  margin-left: auto;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
}
.cd-rte__body {
  min-height: 120px;
  padding: 12px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  outline: none;
}
.cd-rte__body:empty::before {
  content: attr(data-placeholder);
  color: #b0afa8;
  pointer-events: none;
}

/* Curriculum modules */
.cd-module-add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #5dae61;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: text;
}
.cd-module-add-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #fff;
  outline: none;
}
.cd-module-add-input::placeholder { color: rgba(255,255,255,0.8); }
.cd-module-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cd-module-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1.5px solid #e2e1da;
  border-radius: 10px;
  background: #fff;
}
.cd-module-drag {
  cursor: grab;
  color: #bbb;
  display: flex;
  align-items: center;
}
.cd-module-text {
  flex: 1;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #333;
}
.cd-module-del {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.cd-module-del:hover { opacity: 1; }
.cd-add-link {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #5dae61;
  cursor: pointer;
  padding: 4px 0;
  width: fit-content;
}
.cd-add-link:hover { text-decoration: underline; }

/* Learning Outcomes */
.cd-outcomes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-outcome-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  background: #fff;
}
.cd-outcome-item > svg:first-child {
  flex-shrink: 0;
  background: #5dae61;
  border-radius: 50%;
  padding: 2px;
  width: 18px;
  height: 18px;
}
.cd-outcome-text {
  flex: 1;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #333;
}
.cd-outcome-del {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.cd-outcome-del:hover { opacity: 1; }
.cd-outcome-add-row { display: none; }
.cd-outcome-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px;
  border: 1.8px dashed #5dae61;
  border-radius: 10px;
  background: transparent;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #5dae61;
  cursor: pointer;
  transition: background 0.15s;
}
.cd-outcome-add-btn:hover { background: #f0faf0; }

/* Teaching methods grid */
.cd-methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.cd-method-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1.8px solid #d0cfc8;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s;
}
.cd-method-btn:hover { border-color: #5dae61; }
.cd-method-btn.is-active {
  border-color: #5dae61;
  background: #5dae61;
  color: #fff;
}
.cd-method-btn.is-active svg { stroke: #fff; }
.cd-method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
}
.cd-method-btn.is-active .cd-method-icon { color: #fff; }
.cd-method-label {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  color: #444;
}
.cd-method-btn.is-active .cd-method-label { color: #fff; }

/* Schedule row */
.cd-schedule-row {
  display: flex;
  gap: 10px;
}

/* Responsive */
@media (max-width: 900px) {
  .cd-grid-2 { grid-template-columns: 1fr; }
  .cd-methods-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cd-schedule-row { flex-direction: column; }
  .cd-methods-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Stepper — "done" state for completed steps
   ═══════════════════════════════════════════════════════════════ */
.cl-step__circle--done {
  background: #5dae61 !important;
  border-color: #5dae61 !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-steps__line--done { background: #5dae61; }

/* ═══════════════════════════════════════════════════════════════
   Create Tutor — Review & Publish (Step 3)
   ═══════════════════════════════════════════════════════════════ */

/* Review header */
.rv-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #f8f8f4;
  border: 1.5px solid #e2e1da;
  border-radius: 14px;
  margin-bottom: 16px;
}
.rv-header__left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.rv-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #e8f5e9;
  border-radius: 10px;
  flex-shrink: 0;
}
.rv-header__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: #1a1a1a;
  margin: 0 0 2px;
}
.rv-header__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #888;
  margin: 0;
}
.rv-edit-all-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.8px solid #d0cfc8;
  border-radius: 10px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #444;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.rv-edit-all-btn:hover { border-color: #5dae61; color: #5dae61; }


/* Fields */
.rv-fields-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.rv-fields-row--split {
  gap: 24px;
  align-items: flex-start;
}
.rv-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 100px;
  flex: 1;
}
.rv-field--col { flex: 1; min-width: 140px; }
.rv-field__label {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #aaa;
  text-transform: uppercase;
}
.rv-field__value {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
}

/* Outcomes in review */
.rv-outcomes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rv-outcome-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #333;
  line-height: 1.4;
}

/* Module list */
.rv-module-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rv-module-item {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #555;
}

/* Privacy banner */
.rv-privacy-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: #e8f5e9;
  border: 1.5px solid #c8e6c9;
  border-radius: 14px;
  margin-bottom: 14px;
}
.rv-privacy-banner__title {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 3px;
}
.rv-privacy-banner__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* Action cards row */
.rv-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.rv-action-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1.5px solid #e2e1da;
  border-radius: 14px;
  background: #fff;
}
.rv-action-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8f5e9;
}
.rv-action-card__title {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0;
}
.rv-action-card__optional {
  font-size: 12px;
  font-weight: 500;
  color: #5dae61;
}
.rv-action-card__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #777;
  margin: 0;
  line-height: 1.4;
  flex: 1;
}
.rv-action-btn {
  padding: 9px 16px;
  border-radius: 10px;
  font-family: 'Caveat Brush', cursive;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  text-align: center;
}
.rv-action-btn--outline {
  border: 2px solid #1a1a1a;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 3px 3px 0 #1a1a1a;
}
.rv-action-btn--outline:hover {
  box-shadow: 5px 5px 0 #1a1a1a;
  transform: translate(-1px, -1px);
}

/* Footer buttons */
.rv-back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 2px solid #d0cfc8;
  border-radius: 14px;
  background: #fff;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  color: #444;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.rv-back-btn:hover { border-color: #5dae61; color: #5dae61; }

.rv-publish-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 28px;
  border-radius: 14px;
  border: 2px solid #1a1a1a;
  background: #3d8b41;
  color: #fff;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 4px 4px 0 #1a1a1a;
  transition: box-shadow 0.15s, transform 0.15s, background 0.15s;
}
.rv-publish-btn:hover {
  background: #2f6e32;
  box-shadow: 6px 6px 0 #1a1a1a;
  transform: translate(-2px, -2px);
}

/* Responsive */
@media (max-width: 760px) {
  .rv-actions-row { grid-template-columns: 1fr; }
  .rv-fields-row--split { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   Post a Trip — Step 1 (Trip Details)
   ═══════════════════════════════════════════════════════════════ */

/* Trip hero — 3-part row: title | steps | illustration */
.trip-hero {
  background: #f5f4ed;
  border-bottom: 1.5px solid #e2e1da;
  padding: 28px 54px 22px;
}
.trip-hero__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Title block */
.trip-hero__title-block { flex-shrink: 0; }
.trip-hero__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 46px;
  color: #1a1a1a;
  margin: 0 0 4px;
  line-height: 1;
}
.trip-hero__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* Steps row */
.trip-steps {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  justify-content: center;
}
.trip-step {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trip-step__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5dae61;
  border: 2px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 2px 2px 0 #1a1a1a;
}
.trip-step__num--inactive {
  background: #fff;
  color: #888;
  border-color: #d0cfc8;
  box-shadow: none;
}
.trip-step__info {
  display: flex;
  flex-direction: column;
}
.trip-step__label {
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  color: #5dae61;
  line-height: 1.2;
}
.trip-step__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #999;
}
.trip-steps__line {
  height: 2px;
  width: 48px;
  background: #d0cfc8;
  margin: 0 12px;
  flex-shrink: 0;
}

/* Illustration */
.trip-hero__illustration {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.trip-bubble {
  position: absolute;
  top: -10px;
  right: 44px;
  background: #fff;
  border: 1.5px solid #d0cfc8;
  border-radius: 12px 12px 0 12px;
  padding: 6px 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  box-shadow: 2px 2px 0 #d0cfc8;
  line-height: 1.4;
  z-index: 1;
}

/* Form heading */
.trip-form__heading {
  font-family: 'Caveat Brush', cursive;
  font-size: 26px;
  color: #1a1a1a;
  margin: 0 0 22px;
  font-style: italic;
}

/* 2-column grid for form rows */
.trip-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.trip-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trip-field--full { width: 100%; }

/* Who Can Join buttons */
.trip-who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.trip-who-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1.8px solid #d0cfc8;
  border-radius: 12px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.trip-who-btn:hover { border-color: #5dae61; color: #5dae61; }
.trip-who-btn.is-active {
  background: #5dae61;
  border-color: #5dae61;
  color: #fff;
}
.trip-who-btn.is-active svg { stroke: #fff; }

/* Safety card */
.trip-safety-card {
  border: 1.8px solid #e2e1da;
  border-radius: 16px;
  background: #f3f0fc;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.trip-safety-card__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.trip-safety-card__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: #1a1a1a;
  margin: 0 0 4px;
}
.trip-safety-card__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* Inspiration card */
.trip-inspiration-card {
  border: 1.8px solid #e2e1da;
  border-radius: 16px;
  background: #f0faf0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.trip-inspiration-card__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.trip-inspiration-card__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: #1a1a1a;
  margin: 0 0 4px;
}
.trip-inspiration-card__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* Shared outline button for sidebar cards */
.trip-outline-btn {
  padding: 10px 18px;
  border-radius: 12px;
  border: 2px solid #1a1a1a;
  background: #fff;
  font-family: 'Caveat Brush', cursive;
  font-size: 16px;
  color: #1a1a1a;
  cursor: pointer;
  box-shadow: 3px 3px 0 #1a1a1a;
  transition: box-shadow 0.15s, transform 0.15s;
  width: 100%;
  text-align: center;
}
.trip-outline-btn:hover {
  box-shadow: 5px 5px 0 #1a1a1a;
  transform: translate(-1px, -1px);
}

/* Guidelines link */
.trip-guidelines-link {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #888;
  margin: 0;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.trip-guidelines-link__a {
  color: #5dae61;
  font-weight: 700;
  text-decoration: none;
}
.trip-guidelines-link__a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 900px) {
  .trip-hero { padding: 20px 24px 18px; }
  .trip-hero__inner { flex-wrap: wrap; gap: 20px; }
  .trip-hero__illustration { display: none; }
  .trip-steps { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .trip-grid-2 { grid-template-columns: 1fr; }
  .trip-who-grid { grid-template-columns: 1fr; }
  .trip-hero__title { font-size: 34px; }
}

/* ═══════════════════════════════════════════════════════════════
   Post a Trip — Step 2 (Photos & Itinerary)
   ═══════════════════════════════════════════════════════════════ */

.tp-section-heading {
  font-family: 'Caveat Brush', cursive;
  font-size: 26px;
  color: #1a1a1a;
  font-style: italic;
  margin: 0 0 24px;
}

/* Row header: title+sub on left, action on right */
.tp-row-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.tp-photo-count {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #5dae61;
  white-space: nowrap;
  padding-top: 2px;
}

/* Photo grid */
.tp-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px;
}

/* Drop zone */
.tp-dropzone {
  border: 2px dashed #5dae61;
  border-radius: 12px;
  background: #f8fff8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 20px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-height: 170px;
  text-align: center;
}
.tp-dropzone:hover, .tp-dropzone.is-drag {
  background: #edfaed;
  border-color: #3d8b41;
}
.tp-dropzone__title {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
}
.tp-dropzone__or {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #888;
}
.tp-dropzone__browse {
  color: #5dae61;
  font-weight: 700;
  text-decoration: underline;
}
.tp-dropzone__hint {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #aaa;
  line-height: 1.5;
  margin-top: 2px;
}

/* Photo thumbnail */
.tp-photo-thumb {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  background: #f0f0ea;
}
.tp-photo-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tp-photo-thumb__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.15s;
}
.tp-photo-thumb__remove:hover { background: rgba(0,0,0,0.85); }

/* Add more button */
.tp-add-more {
  border: 2px dashed #d0cfc8;
  border-radius: 12px;
  background: #fafaf8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  min-height: 120px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #aaa;
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s;
}
.tp-add-more:hover { border-color: #5dae61; color: #5dae61; }

/* Add Day button */
.tp-add-day-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 2px solid #5dae61;
  background: #fff;
  color: #5dae61;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tp-add-day-btn:hover { background: #f0faf0; }

/* Day rows */
.tp-days-list { display: flex; flex-direction: column; gap: 8px; }
.tp-day-row { display: flex; align-items: center; gap: 8px; }
.tp-day-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid #e2e1da;
  border-radius: 12px;
  background: #fff;
  min-width: 0;
}
.tp-day-drag {
  flex-shrink: 0;
  cursor: grab;
  display: flex;
  align-items: center;
  color: #bbb;
}
.tp-day-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tp-day-title {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-day-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-day-fields { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tp-day-row-top { display: flex; align-items: center; gap: 10px; }
.tp-day-num-label {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  color: #3a8f3e;
  background: #edf7ee;
  border: 1.5px solid #c8e6c9;
  border-radius: 6px;
  padding: 3px 10px;
  white-space: nowrap;
}
.tp-day-name-input {
  flex: 1;
  border: 1.5px solid #e2e1da;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  font-family: 'Nunito', sans-serif;
  outline: none;
  background: #fafaf8;
}
.tp-day-name-input:focus { border-color: #5dae61; background: #fff; }
.tp-day-type-input {
  border: 1.5px solid #e2e1da;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12.5px;
  color: #555;
  font-family: 'Nunito', sans-serif;
  outline: none;
  background: #fafaf8;
  width: 100%;
  box-sizing: border-box;
}
.tp-day-type-input:focus { border-color: #5dae61; background: #fff; }
.tp-day-desc-textarea {
  border: 1.5px solid #e2e1da;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12.5px;
  color: #444;
  font-family: 'Nunito', sans-serif;
  outline: none;
  background: #fafaf8;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}
.tp-day-desc-textarea:focus { border-color: #5dae61; background: #fff; }
.tp-day-collapsed-top { display: flex; align-items: center; gap: 8px; }
.tp-day-num-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  color: #3a8f3e;
  background: #edf7ee;
  border: 1.5px solid #c8e6c9;
  border-radius: 20px;
  padding: 1px 9px;
}
.tp-day-type-tag {
  display: inline-block;
  font-size: 11px;
  color: #888;
  background: #f5f5f3;
  border: 1px solid #e2e1da;
  border-radius: 20px;
  padding: 1px 9px;
  margin-top: 3px;
}
.tp-day-chevron {
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
}
.tp-day-del {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1.5px solid #e2e1da;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #bbb;
  transition: border-color 0.15s, color 0.15s;
}
.tp-day-del:hover { border-color: #e05252; color: #e05252; }

@media (max-width: 640px) {
  .tp-photo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==============================
   BUY-SELL DETAIL PAGE (bsd-)
   ============================== */

.bsd {
  background: #f5f4ed;
  min-height: 100vh;
}

.bsd__breadcrumb-bar {
  background: #fff;
  border-bottom: 1.5px solid #e0ddd4;
  padding: 0;
}

.bsd__breadcrumb-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 24px;
}

.bsd__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #888;
}

.bsd__breadcrumb a { color: #5dae61; text-decoration: none; }
.bsd__breadcrumb a:hover { text-decoration: underline; }
.bsd__breadcrumb span { color: #aaa; }
.bsd__breadcrumb span:last-child { color: #555; }

.bsd__body {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: flex-start;
}

/* Photo gallery */
.bsd__gallery {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 4px 4px 0 #1a1a1a;
  overflow: hidden;
  margin-bottom: 20px;
}

.bsd__gallery-main {
  position: relative;
  width: 100%;
  height: 380px;
}

.bsd__gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bsd__gallery-save {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 2px 2px 0 #1a1a1a;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}

.bsd__gallery-save:hover { box-shadow: 1px 1px 0 #1a1a1a; transform: translate(1px,1px); }

.bsd__gallery-thumbs {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #f9f8f2;
  border-top: 1px solid #e0ddd4;
}

.bsd__gallery-thumb {
  width: 72px;
  height: 56px;
  border: 2px solid #d0cfc8;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s;
  flex-shrink: 0;
}

.bsd__gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsd__gallery-thumb--active { border-color: #5dae61; }

/* Sections */
.bsd__section {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 4px 4px 0 #1a1a1a;
  padding: 20px;
  margin-bottom: 20px;
}

.bsd__section-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 12px;
}

.bsd__desc {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  line-height: 1.65;
}

.bsd__details-table {
  display: flex;
  flex-direction: column;
  border: 1.5px solid #e0ddd4;
  border-radius: 10px;
  overflow: hidden;
}

.bsd__details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #f0efe8;
}

.bsd__details-row:last-child { border-bottom: none; }

.bsd__details-label {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #888;
}

.bsd__details-value {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
}

.bsd__safety-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 12px;
}

.bsd__safety-text {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #2a8a3d;
  line-height: 1.5;
}

/* Right sidebar: price card */
.bsd__price-card {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 4px 4px 0 #1a1a1a;
  padding: 22px;
  margin-bottom: 18px;
}

.bsd__price-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.bsd__price {
  font-family: 'Caveat Brush', cursive;
  font-size: 38px;
  color: #1a1a1a;
}

.bsd__condition-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
}

.bsd__item-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 8px;
  line-height: 1.25;
}

.bsd__location-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 18px;
}

.bsd__time { color: #aaa; }

.bsd__contact-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: box-shadow 0.15s, transform 0.15s;
}

.bsd__contact-btn:hover { box-shadow: 1px 1px 0 #1a1a1a; transform: translate(2px,2px); }

.bsd__save-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px;
  background: #fff;
  color: #555;
  border: 1.5px solid #d0cfc8;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.bsd__save-btn:hover { border-color: #e05252; color: #e05252; }

/* Right sidebar: seller card */
.bsd__seller-card {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 4px 4px 0 #1a1a1a;
  padding: 18px;
}

.bsd__seller-heading {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 12px;
}

.bsd__seller-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.bsd__seller-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e0ddd4;
}

.bsd__seller-name {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.bsd__seller-joined {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #888;
}

.bsd__seller-badges {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bsd__seller-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #2a8a3d;
}

/* Related listings */
.bsd__related {
  background: #fff;
  border-top: 2px solid #1a1a1a;
  padding: 36px 0 48px;
}

.bsd__related-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.bsd__related-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 26px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 20px;
}

.bsd__related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Message modal */
.bsd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.bsd-modal {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 18px;
  box-shadow: 6px 6px 0 #1a1a1a;
  padding: 24px;
  width: 100%;
  max-width: 420px;
}

.bsd-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.bsd-modal__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 22px;
  color: #1a1a1a;
}

.bsd-modal__close {
  width: 32px;
  height: 32px;
  border: 1.5px solid #d0cfc8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bsd-modal__item-ref {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #888;
  margin-bottom: 12px;
  padding: 7px 12px;
  background: #f5f4ed;
  border-radius: 8px;
}

.bsd-modal__textarea {
  width: 100%;
  padding: 12px;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  resize: none;
  box-sizing: border-box;
  outline: none;
  margin-bottom: 14px;
}

.bsd-modal__textarea:focus { border-color: #5dae61; }

.bsd-modal__send-btn {
  width: 100%;
  padding: 13px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}

.bsd-modal__send-btn:hover { box-shadow: 1px 1px 0 #1a1a1a; transform: translate(2px,2px); }

/* ==============================
   TRIP BROWSE PAGE
   ============================== */

/* hero fallback illustrations (shown when SVG files don't exist) */
.trip-hero-left-fallback,
.trip-hero-right-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* Trip listing cards grid */
.trlc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.trlc__card {
  background: #fff;
  border: 1.5px solid #e0ddd4;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.12s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.trlc__card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.1); transform: translateY(-2px); }

.trlc__img-wrap {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.trlc__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.trlc__card:hover .trlc__img { transform: scale(1.04); }

.trlc__badge {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 3px 8px;
  background: #5dae61;
  border-radius: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.trlc__fav {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.15s;
}

.trlc__fav:hover { transform: scale(1.12); }

.trlc__body {
  padding: 11px 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.trlc__title {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.25;
  margin-bottom: 2px;
}

.trlc__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
}

.trlc__meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #777;
}

.trlc__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #f0efe8;
}

.trlc__host {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trlc__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #e0ddd4;
  flex-shrink: 0;
}

.trlc__host-name {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #444;
  display: block;
  line-height: 1.2;
}

.trlc__rating {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  display: block;
}

.trlc__reviews { color: #bbb; }

.trlc__price {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: #1a1a1a;
  white-space: nowrap;
  text-align: right;
}

.trlc__price span {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #aaa;
  display: block;
  line-height: 1;
}

.trlc__seats {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: #f0fdf4;
  border: 1px solid #c6e8cb;
  border-radius: 20px;
  font-family: 'Nunito', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: #2a8a3d;
  align-self: flex-start;
  margin-top: 4px;
}

.trp { display: none; }

/* ── Hero ── */
.trp__hero {
  background: #f5f4ed;
  border-bottom: 2px solid #e0ddd4;
  overflow: hidden;
}

.trp__hero-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 380px 1fr;
  align-items: stretch;
  min-height: 300px;
}

.trp__hero-left {
  padding: 44px 0 44px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 1;
}

.trp__hero-stars {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 10px;
}

.trp__hero-title {
  font-family: 'Nunito', sans-serif;
  font-size: 44px;
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.15;
  margin-bottom: 14px;
}

.trp__hero-title--green {
  font-family: 'Caveat Brush', cursive;
  font-size: 50px;
  color: #5dae61;
  display: block;
}

.trp__hero-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  line-height: 1.6;
  max-width: 300px;
  margin-bottom: 24px;
}

.trp__hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #1a1a1a;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  align-self: flex-start;
  transition: box-shadow 0.15s, transform 0.15s;
}

.trp__hero-btn:hover { box-shadow: 2px 2px 0 #1a1a1a; transform: translate(2px,2px); }

.trp__hero-cam {
  margin-top: 24px;
  opacity: 0.35;
}

/* Illustration */
.trp__hero-illustration {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.trp__hero-city-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  opacity: 0.55;
}

.trp__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #f5f4ed 0%, transparent 25%);
}

.trp__hero-signpost {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.trp__hero-sign {
  padding: 5px 14px;
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 6px;
  box-shadow: 2px 2px 0 #1a1a1a;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #1a1a1a;
  white-space: nowrap;
}

.trp__hero-students { display: none; }

/* ── Tab bar ── */
.trp__tabbar {
  background: #fff;
  border-bottom: 1.5px solid #e0ddd4;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.trp__tabbar::-webkit-scrollbar { display: none; }

.trp__tabbar-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  gap: 4px;
  padding-top: 10px;
  padding-bottom: 10px;
  white-space: nowrap;
}

.trp__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1.5px solid #d0cfc8;
  border-radius: 20px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.trp__tab:hover { border-color: #5dae61; color: #3d8b41; }

.trp__tab--active {
  background: #5dae61;
  border-color: #5dae61;
  color: #fff;
}

.trp__tab--active:hover { background: #3d8b41; border-color: #3d8b41; color: #fff; }

.trp__tab--more {
  border-color: #d0cfc8;
  color: #444;
  background: #fafaf6;
}

/* ── Body: sidebar + listings (overridden below) ── */
.trp__body {
  display: flex;
}

/* Filter sidebar */
.trp__filters {
  background: #fff;
  border: 1.5px solid #e0ddd4;
  border-radius: 16px;
  padding: 20px 18px;
  position: sticky;
  top: 80px;
}

.trp__filters-title {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 16px;
}

.trp__filter-group {
  margin-bottom: 18px;
}

.trp__filter-label {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #555;
  margin-bottom: 7px;
}

.trp__input-wrap {
  position: relative;
}

.trp__input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  background: #fff;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}

.trp__input:focus { border-color: #5dae61; }
.trp__input::placeholder { color: #bbb; }

.trp__input--date { padding-left: 36px; cursor: pointer; }

.trp__input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.trp__price-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.trp__price-val {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #555;
}

.trp__range {
  width: 100%;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #5dae61 var(--val, 100%), #d0cfc8 var(--val, 100%));
  outline: none;
  cursor: pointer;
}

.trp__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #5dae61;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px #5dae61;
  cursor: pointer;
}

.trp__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 8px;
  cursor: pointer;
}

.trp__checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid #d0cfc8;
  border-radius: 4px;
  cursor: pointer;
  accent-color: #5dae61;
  flex-shrink: 0;
}

.trp__filter-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.trp__clear-btn {
  flex: 1;
  padding: 9px 0;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.trp__clear-btn:hover { border-color: #1a1a1a; color: #1a1a1a; }

.trp__apply-btn {
  flex: 1;
  padding: 9px 0;
  background: #5dae61;
  border: 1.5px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 2px 2px 0 #1a1a1a;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}

.trp__apply-btn:hover { box-shadow: 1px 1px 0 #1a1a1a; transform: translate(1px,1px); }

/* Listings area */
.trp__listings-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.trp__listings-count {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #555;
}

.trp__listings-count strong { color: #1a1a1a; font-weight: 800; }

.trp__listings-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trp__sort-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.trp__sort-select {
  padding: 7px 30px 7px 12px;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #444;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
}

.trp__sort-icon {
  position: absolute;
  right: 10px;
  pointer-events: none;
}

.trp__view-toggle {
  display: flex;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  overflow: hidden;
}

.trp__view-btn {
  padding: 7px 10px;
  background: #fff;
  border: none;
  cursor: pointer;
  color: #aaa;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}

.trp__view-btn + .trp__view-btn { border-left: 1.5px solid #d0cfc8; }
.trp__view-btn--active { background: #f0fdf4; color: #5dae61; }

/* Trip cards grid */
.trp__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* Individual trip card */
.trp-card {
  background: #fff;
  border: 1.5px solid #e0ddd4;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.trp-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); transform: translateY(-2px); }

.trp-card__img-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.trp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.trp-card:hover .trp-card__img { transform: scale(1.04); }

.trp-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  background: #5dae61;
  border-radius: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.trp-card__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.15s;
}

.trp-card__fav:hover { transform: scale(1.1); }

.trp-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.trp-card__title {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.25;
}

.trp-card__meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #777;
}

.trp-card__desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #888;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  margin-bottom: 6px;
}

.trp-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
}

.trp-card__host {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trp-card__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #e0ddd4;
  flex-shrink: 0;
}

.trp-card__host-name {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #444;
  display: block;
}

.trp-card__rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #888;
}

.trp-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.trp-card__price-val {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1;
}

.trp-card__price-pp {
  font-family: 'Nunito', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  color: #aaa;
  letter-spacing: 0.3px;
}

.trp-card__seats {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: #f0fdf4;
  border: 1px solid #c6e8cb;
  border-radius: 20px;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #2a8a3d;
  align-self: flex-start;
  margin-top: 2px;
}

/* Load more */
.trp__load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.trp__load-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 28px;
  border: 1.5px solid #d0cfc8;
  border-radius: 20px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #444;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.trp__load-more:hover { border-color: #5dae61; color: #5dae61; }

/* ── Features strip ── */
.trp__features {
  padding: 40px 48px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.trp__feature {
  display: flex;
  align-items: flex-start;
  flex: 1;
}

.trp__feature-divider {
  width: 1px;
  align-self: stretch;
  border-left: 4px dotted #5dae61;
  flex-shrink: 0;
  margin: 0 32px;
}

.trp__feature-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.trp__feature-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.trp__feature-title {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.trp__feature-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #777;
  line-height: 1.5;
}

/* ==============================
   TRIP REVIEW PAGE (tr-)
   ============================== */

.tr-preview-card {
  background: #fff;
  border: 1.5px solid #e0ddd4;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Photos + Info row */
.tr-preview-top {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid #f0efe8;
}

/* Photo mosaic */
.tr-photo-mosaic {
  display: flex;
  gap: 3px;
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
  padding: 14px;
  padding-right: 10px;
}

.tr-mosaic-left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tr-mosaic-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tr-mosaic-right-bottom {
  display: flex;
  gap: 3px;
  flex: 1;
}

.tr-photo {
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tr-photo--tall {
  height: 100%;
  min-height: 130px;
  margin-right: 3px;
}

.tr-photo--sm {
  flex: 1;
  min-height: 62px;
}

.tr-photo--xs {
  flex: 1;
  min-height: 58px;
}

.tr-photo--more {
  position: relative;
  background: rgba(0,0,0,0.25) !important;
}

.tr-photo--more span {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

/* Trip info block */
.tr-trip-info {
  flex: 1;
  padding: 14px 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tr-trip-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 10px;
  line-height: 1.2;
}

.tr-meta-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.tr-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dark);
}

.tr-meta-muted {
  font-weight: 500;
  color: var(--text-light);
}

.tr-trip-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-medium);
  line-height: 1.55;
  margin-top: auto;
}

/* Itinerary section */
.tr-itinerary {
  border-bottom: 1.5px solid #f0efe8;
  padding: 14px 18px;
}

.tr-itinerary__heading {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.tr-itinerary__list {
  display: flex;
  flex-direction: column;
}

.tr-day-row {
  display: grid;
  grid-template-columns: 56px 130px 1fr 130px;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #f0efe8;
}

.tr-day-row--last {
  border-bottom: none;
}

.tr-day-label {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: #5dae61;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tr-day-title {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dark);
}

.tr-day-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-medium);
  line-height: 1.4;
}

.tr-day-loc {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #888;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  text-align: right;
}

/* Guidelines banner */
.tr-guidelines-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #f0fdf4;
  flex-wrap: wrap;
}

.tr-guidelines-text {
  flex: 1;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-medium);
  line-height: 1.45;
}

.tr-guidelines-link {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #2a8a3d;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.tr-guidelines-link:hover { text-decoration: underline; }

/* Right sidebar: Trip Summary card */
.tr-summary-card {
  padding: 16px;
}

.tr-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #f0efe8;
}

.tr-summary-row--last {
  border-bottom: none;
}

.tr-summary-label {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
}

.tr-summary-value {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dark);
  text-align: right;
}

/* Right sidebar: Travel Safe card */
.tr-safety-sidebar {
  padding: 16px;
  background: #f0fdf4;
  border-color: #c6e8cb;
}

.tr-safety-sidebar__top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.tr-safety-sidebar__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e8f5e9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tr-safety-sidebar__title {
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.tr-safety-sidebar__desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-medium);
  line-height: 1.5;
}

.tr-safety-sidebar__link {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #2a8a3d;
  text-decoration: none;
}

.tr-safety-sidebar__link:hover { text-decoration: underline; }

/* Right sidebar: Pricing card */
.tr-pricing-card {
  padding: 16px;
}

.tr-pricing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}

.tr-pricing-label {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-medium);
}

.tr-pricing-val {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}

.tr-pricing-divider {
  border: none;
  border-top: 1.5px dashed #d0cfc8;
  margin: 8px 0;
}

.tr-pricing-row--total {
  margin-top: 2px;
}

.tr-pricing-label--total {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-dark);
}

.tr-pricing-val--total {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  font-weight: 400;
  color: #2a8a3d;
}

/* ── TRIP BROWSE PAGE (trp__) ───────────────────────────────────── */

/* Tab bar */
.trp__tabbar {
  background: #fff;
  border-bottom: 1.5px solid #ece9e0;
  padding: 0 40px;
  border-radius: 32px 32px 0 0;
}
.trp__tabbar-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.trp__tabbar-inner::-webkit-scrollbar { display: none; }

.trp__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 14px 20px;
  border: none;
  background: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #6b6b6b;
  transition: color .2s, border-color .2s;
  margin-bottom: -1.5px;
}
.trp__tab--active {
  color: #2a8a3d;
  border-bottom-color: #2a8a3d;
  font-weight: 600;
}
.trp__tab:hover:not(.trp__tab--active) { color: #333; }
.trp__tab--more { color: #2a8a3d; }

/* Body: sidebar + listings */
.trp__body {
  max-width: none;
  margin: 0;
  padding: 0 0 40px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Filter sidebar */
.trp__filters {
  flex: 0 0 220px;
  background: #fff;
  border: 1.5px solid #ece9e0;
  border-radius: 14px;
  padding: 20px 18px 22px;
  font-family: 'Poppins', sans-serif;
  position: sticky;
  top: 90px;
}
.trp__filters-title {
  font-size: 15px;
  font-weight: 700;
  color: #232323;
  margin: 0 0 18px;
}
.trp__filter-group {
  margin-bottom: 18px;
}
.trp__filter-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #555;
  margin-bottom: 7px;
}
.trp__input-wrap {
  position: relative;
}
.trp__input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px 9px 36px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #333;
  outline: none;
  background: #fafaf8;
}
.trp__input--date { padding-left: 36px; cursor: pointer; }
.trp__input:focus { border-color: #5dae61; }
.trp__input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.trp__price-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.trp__price-val {
  font-size: 11.5px;
  font-weight: 600;
  color: #555;
}
.trp__range {
  width: 100%;
  accent-color: #5dae61;
  cursor: pointer;
}

.trp__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #444;
  margin-bottom: 7px;
  cursor: pointer;
}
.trp__checkbox {
  width: 15px;
  height: 15px;
  accent-color: #5dae61;
  flex-shrink: 0;
}

.trp__filter-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.trp__clear-btn {
  flex: 1;
  padding: 9px 0;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
}
.trp__apply-btn {
  flex: 1;
  padding: 9px 0;
  border: none;
  border-radius: 8px;
  background: #2a8a3d;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.trp__apply-btn:hover { background: #237533; }

/* Listings area */
.trp__listings {
  flex: 1 1 0;
  min-width: 0;
}
.trp__listings-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.trp__listings-count {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  color: #555;
  margin: 0;
}
.trp__listings-count strong { color: #232323; font-weight: 700; }
.trp__listings-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trp__sort-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.trp__sort-select {
  appearance: none;
  padding: 8px 32px 8px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #444;
  background: #fff;
  cursor: pointer;
  outline: none;
}
.trp__sort-icon {
  position: absolute;
  right: 10px;
  pointer-events: none;
}
.trp__view-toggle {
  display: flex;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}
.trp__view-btn {
  padding: 7px 10px;
  border: none;
  background: #fff;
  color: #aaa;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.trp__view-btn--active { background: #f3f2ed; color: #2a8a3d; }

/* 4-column card grid */
.trp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) { .trp__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .trp__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .trp__grid { grid-template-columns: 1fr; } }

/* Trip card */
.trp-card {
  background: #fff;
  border: 1.5px solid #ece9e0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.trp-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.10); transform: translateY(-2px); }

.trp-card__img-wrap {
  position: relative;
  width: 100%;
  padding-top: 64%;
  flex-shrink: 0;
}
.trp-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trp-card__badge {
  position: absolute;
  top: 9px;
  left: 9px;
  background: rgba(45, 138, 61, 0.88);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: .3px;
  backdrop-filter: blur(4px);
}
.trp-card__fav {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  transition: background .15s;
}
.trp-card__fav--active { background: #fff5f5; }

.trp-card__body {
  padding: 13px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.trp-card__title {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 3px;
  line-height: 1.3;
}
.trp-card__meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  color: #777;
}
.trp-card__desc {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: #999;
  margin: 2px 0 6px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trp-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.trp-card__host {
  display: flex;
  align-items: center;
  gap: 7px;
}
.trp-card__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.trp-card__host-name {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #333;
}
.trp-card__rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #333;
}
.trp-card__reviews { color: #aaa; font-weight: 400; }

.trp-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.trp-card__price-val {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #2a8a3d;
}
.trp-card__price-pp {
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: #aaa;
  letter-spacing: .5px;
}

.trp-card__seats {
  display: inline-block;
  margin-top: 8px;
  background: #e8f5e9;
  color: #2a8a3d;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  align-self: flex-start;
}

/* Load more */
.trp__load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.trp__load-more {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 36px;
  border: 1.5px solid #2a8a3d;
  border-radius: 10px;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #2a8a3d;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.trp__load-more:hover { background: #2a8a3d; color: #fff; }

/* Features strip */

/* ── Trip page responsive (must come AFTER all base trp__ rules) ── */
@media (max-width: 960px) {
  .trp__body { gap: 20px; }
  .trp__features { padding: 32px 28px; gap: 0; }
  .trp__feature-divider { margin: 0 20px; }
}

@media (max-width: 768px) {
  .trp__body { flex-direction: column; gap: 20px; }
  .trp__filters { position: static; width: 100%; flex: none; }
  .trp__listings { min-width: 0; width: 100%; overflow: hidden; flex: none; }
  .trp__view-toggle { display: none; }
  .trp__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .trp__features { flex-wrap: wrap; padding: 24px 16px; gap: 20px; }
  .trp__feature { flex: 0 0 calc(50% - 10px); }
  .trp__feature-divider { display: none; }
}

@media (max-width: 480px) {
  .trp__grid { grid-template-columns: 1fr; }
  .trp__feature { flex: 0 0 100%; }
  .trp__features { padding: 20px 12px; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   FRIENDS PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── Friends hero ── */
.fr__hero {
  display: flex;
  align-items: flex-start;
  padding: 0 0 20px 41px;
  background: #fffdf7;
  margin: 0 0 0 54px;
  border-radius: 32px 0 0 32px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  min-height: 370px;
}

.fr__hero-left {
  flex: 0 0 716px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 48px;
  position: relative;
  z-index: 1;
}

.fr__hero-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 64px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 66.46px;
  letter-spacing: -1.06px;
  width: 716px;
  margin: 0;
}

.fr__hero-accent {
  color: #5DAE61;
}

.fr__hero-sub {
  display: flex;
  align-items: center;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  color: var(--text-dark);
  margin: 0;
}

.fr__hero-features {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.fr__hero-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.fr__hero-feature-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.fr__hero-feature-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: #1a1a1a;
}

.fr__hero-feature-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #666;
  margin-top: 2px;
  max-width: 130px;
  line-height: 1.4;
}

.fr__hero-right-img {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.fr__hero-svg {
  height: 370px;
  width: auto;
  display: block;
}

/* ── Hero illustration (legacy) ── */
.fr__hero-illustration {
  position: relative;
  width: 420px;
  height: 380px;
  flex-shrink: 0;
}

/* ── Tabs wrap ── */
.fr__tabs-wrap {
  padding: 32px 40px 0;
}

/* ── City filter row ── */
.fr__city-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 40px 0;
}
.fr__city-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid #e0ddd4;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px; font-weight: 600; color: #555;
  cursor: pointer; transition: all .18s;
}
.fr__city-btn:hover { border-color: #5dae61; color: #5dae61; }
.fr__city-btn--active {
  background: #5dae61; color: #fff; border-color: #5dae61;
}

/* ── Body layout ── */
.fr__body {
  display: flex;
  gap: 24px;
  padding: 24px 40px 40px;
}

/* Reuse trp__filters for sidebar */
.fr__body .trp__filters {
  width: 220px;
  flex-shrink: 0;
}

/* ── Results area ── */
.fr__results {
  flex: 1;
  min-width: 0;
}

/* ── Profile grid ── */
.fr__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

/* ── Profile card ── */
.fr-card {
  background: #fff;
  border: 1.5px solid #e8e5dc;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
}
.fr-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.fr-card__top {
  height: 90px;
  position: relative;
}
.fr-card__verified {
  position: absolute; top: 10px; left: 10px;
  background: #5dae61; color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 9px; font-weight: 800;
  padding: 3px 8px; border-radius: 20px;
  letter-spacing: 0.5px;
}
.fr-card__connect {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px;
  background: #fff; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background .2s;
}
.fr-card__connect:hover { background: #f0faf0; }
.fr-card__connect--active { background: #f0faf0; }
.fr-card__avatar-wrap {
  position: absolute; bottom: -24px; left: 16px;
}
.fr-card__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: 15px; color: #333;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.fr-card__body {
  padding: 32px 16px 14px;
}
.fr-card__name-row {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.fr-card__name {
  font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: 15px; color: #1a1a1a;
}
.fr-card__mutual {
  display: flex; align-items: center; gap: 4px;
  font-family: 'Nunito', sans-serif;
  font-size: 11px; font-weight: 700; color: #5dae61;
}
.fr-card__location,
.fr-card__uni {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px; color: #888;
  margin-bottom: 3px;
}
.fr-card__bio {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px; color: #555;
  line-height: 1.5;
  margin: 8px 0;
}
.fr-card__tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 12px;
}
.fr-card__tag {
  font-family: 'Nunito', sans-serif;
  font-size: 11px; font-weight: 600; color: #444;
  padding: 3px 9px; border-radius: 20px;
}
.fr-card__footer {
  display: flex; gap: 8px;
}
.fr-card__view {
  flex: 1;
  padding: 8px 0;
  border: 1.5px solid #e0ddd4;
  border-radius: 10px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 12px; font-weight: 700; color: #555;
  cursor: pointer; transition: border-color .18s, color .18s;
}
.fr-card__view:hover { border-color: #5dae61; color: #5dae61; }
.fr-card__add {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 10px;
  background: #5dae61; color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background .18s;
}
.fr-card__add:hover { background: #4a9a4e; }
.fr-card__add--done { background: #e8f5e9; color: #5dae61; }
.fr-card__add--done:hover { background: #d4edda; }

/* ── Friends responsive ── */
@media (max-width: 960px) {
  .fr__hero { margin: 0 0 0 24px; }
  .fr__hero-left { flex: none; width: calc(100% - 200px); }
  .fr__hero-title { font-size: 52px; width: auto; }
  .fr__hero-sub { font-size: 22px; line-height: 1.3; }
}

@media (max-width: 768px) {
  /* Hero */
  .fr__hero { margin: 0 16px; padding: 28px 20px 24px; border-radius: 28px; min-height: unset; }
  .fr__hero-left { flex: none; width: 100%; margin-top: 0; }
  .fr__hero-right-img { display: none; }
  .fr__hero-title { font-size: 44px; width: 100%; line-height: 1.15; }
  .fr__hero-sub { font-size: 18px; line-height: 1.4; }
  .fr__hero-features { gap: 16px; }
  /* Tabs & city row — reduce padding */
  .fr__tabs-wrap { padding: 24px 16px 0; }
  .fr__city-row {
    padding: 12px 16px 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fr__city-row::-webkit-scrollbar { display: none; }
  .fr__city-btn { flex-shrink: 0; scroll-snap-align: start; }
  /* Body — stack sidebar below results */
  .fr__body { flex-direction: column; padding: 16px 16px 32px; gap: 16px; }
  .fr__body .trp__filters { width: 100%; }
  /* Grid: 2 columns */
  .fr__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 480px) {
  .fr__hero { margin: 0 12px; padding: 24px 16px 20px; }
  .fr__hero-title { font-size: 36px; }
  .fr__hero-sub { font-size: 15px; }
  .fr__tabs-wrap { padding: 20px 12px 0; }
  .fr__city-row { padding: 10px 12px 8px; }
  .fr__body { padding: 12px 12px 28px; }
  .fr__grid { gap: 10px; }
}

.cl-field-error {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  color: #dc2626;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  animation: auth-shake 0.4s ease;
}

/* ── Tutor Cover Photo Upload ── */
.tutor-cover-drop {
  position: relative;
  border: 2px dashed #d0cfc8;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  background: #fafaf8;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tutor-cover-drop:hover,
.tutor-cover-drop.is-drag {
  border-color: #5dae61;
  background: #f0faf0;
}
.tutor-cover-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
  pointer-events: none;
}
.tutor-cover-empty p {
  font-family: 'Nunito', sans-serif;
  font-size: 13.5px;
  color: #666;
  margin: 0;
}
.tutor-cover-empty span {
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  color: #aaa;
}
.tutor-cover-preview {
  width: 100%;
  height: 160px;
  object-fit: contain;
  display: block;
  background: #f5f4f0;
}
.tutor-cover-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.tutor-cover-remove:hover { background: rgba(0,0,0,.75); }

/* ─── Create Friend Listing ─── */

.friend-section-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 24px; color: #1a1a1a; margin: 0 0 4px;
}
.friend-section-sub { font-size: 13px; color: #6b7280; margin: 0 0 20px; }

/* Inner 2-col grid inside cl-left */
.friend-inner-grid {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 28px;
  padding: 0 20px 20px;
  align-items: start;
}
@media (max-width: 700px) {
  .friend-inner-grid { grid-template-columns: 1fr; }
}

.friend-fields { display: flex; flex-direction: column; }

/* Gender toggle */
.friend-gender-row { display: flex; gap: 10px; }
.friend-gender-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; padding: 0 10px; border-radius: 10px;
  border: 1.8px solid #d0cfc8; background: #fff;
  font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 600; color: #555;
  cursor: pointer; transition: all 0.15s;
}
.friend-gender-btn:hover { border-color: #5dae61; color: #5dae61; background: #f0faf0; }
.friend-gender-btn.is-active {
  background: #5dae61; border-color: #5dae61; color: #fff;
}

/* Age range slider */
.friend-range-wrap { padding: 4px 0 0; }

/* Outer container — tall enough so thumbs have a full-height hit area */
.friend-range-track {
  position: relative;
  height: 24px;
  margin: 8px 0 6px;
  background: transparent;
}

/* Thin visual bar centred inside the tall container */
.friend-range-track::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 5px;
  transform: translateY(-50%);
  background: #e2e8f0;
  border-radius: 99px;
}

/* Coloured fill strip — same vertical centering */
.friend-range-fill {
  position: absolute;
  top: 50%; height: 5px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #5dae61, #74c97a);
  border-radius: 99px;
  pointer-events: none;
}

/* Both range inputs fill the whole 24px container */
.friend-range-input {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  background: transparent;
  appearance: none; -webkit-appearance: none;
  pointer-events: none;     /* block clicks on track */
}

/* Make WebKit track transparent so our ::before bar shows through */
.friend-range-input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: transparent;
  height: 5px;
}

/* The draggable circle */
.friend-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  border: 2.5px solid #5dae61;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18), 0 0 0 3px rgba(93,174,97,0.12);
  cursor: grab;
  pointer-events: all;       /* re-enable just the thumb */
  transition: box-shadow 0.12s ease, transform 0.12s ease, background 0.12s ease;
  margin-top: -8.5px;        /* (22px thumb − 5px track) / 2 */
}
.friend-range-input::-webkit-slider-thumb:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 5px rgba(93,174,97,0.18);
  transform: scale(1.12);
}
.friend-range-input:focus::-webkit-slider-thumb,
.friend-range-input:active::-webkit-slider-thumb {
  cursor: grabbing;
  background: #5dae61;
  border-color: #5dae61;
  box-shadow: 0 3px 12px rgba(93,174,97,0.45), 0 0 0 5px rgba(93,174,97,0.2);
  transform: scale(1.08);
}

/* Firefox */
.friend-range-input::-moz-range-track {
  background: transparent; height: 5px; border: none;
}
.friend-range-input::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2.5px solid #5dae61;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  cursor: grab; pointer-events: all;
}
.friend-range-input:active::-moz-range-thumb {
  background: #5dae61; cursor: grabbing;
}

.friend-range-labels {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Nunito', sans-serif; font-size: 11.5px; color: #9ca3af; font-weight: 600;
}
.friend-range-labels span:nth-child(2) {
  background: #f0faf1; border: 1.5px solid #b7e0b9;
  color: #2e7d32; border-radius: 20px;
  padding: 2px 10px; font-size: 12px; font-weight: 700;
}

/* Profile photo */
.friend-photo-col { display: flex; flex-direction: column; }
.friend-photo-box {
  position: relative;
  border: 2px dashed #c8e6c9; border-radius: 16px;
  background: #f0fdf4; min-height: 180px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .15s;
}
.friend-photo-box:hover { border-color: #5dae61; }
/* Edit profile hint row */
.friend-edit-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.friend-edit-hint {
  font-size: 11.5px; color: #9ca3af;
  font-family: 'Nunito', sans-serif; font-weight: 600;
}
.friend-edit-link {
  font-size: 12.5px; font-weight: 700;
  color: #5dae61; text-decoration: none;
  font-family: 'Nunito', sans-serif;
  transition: color 0.15s;
}
.friend-edit-link:hover { color: #3d8b42; text-decoration: underline; }

/* Read-only display value (looks like a filled input, not editable) */
.friend-display-value {
  height: 42px; padding: 0 12px;
  display: flex; align-items: center;
  font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 500;
  color: #374151; background: #f3f4f6;
  border: 2px solid #e5e7eb; border-radius: 12px;
  user-select: none;
}

/* 2-row grid: Name + DOB on left, Photo spanning both rows on right */
.friend-top-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 16px;
  margin-bottom: 18px;
}
.friend-form-body .tutor-grid-2 {
  grid-template-columns: 1.4fr 0.6fr;
}
.friend-photo-field {
  grid-column: 2;
  grid-row: 1 / 4;
}
.friend-photo-preview {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 210px;
  border: 2px solid #e5e7eb; border-radius: 12px;
  background: #f3f4f6; cursor: default; overflow: hidden;
}
.friend-photo-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.friend-photo-placeholder span {
  font-size: 11.5px; color: #9ca3af;
  font-family: 'Nunito', sans-serif; font-weight: 600;
}
.friend-photo-img { width: 100%; height: 100%; object-fit: contain; }
.friend-photo-remove {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.45); border: none;
  color: #fff; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.friend-photo-icon { margin-bottom: 8px; }
.friend-photo-label { font-size: 13px; font-weight: 700; color: #374151; margin: 0 0 2px; }
.friend-photo-hint  { font-size: 11px; color: #9ca3af; margin: 0; }

/* Trust bar */
.friend-trust-bar {
  display: flex; gap: 0;
  border-top: 1px solid #f0efea;
  padding: 16px 20px;
  flex-wrap: wrap;
}
.friend-trust-item {
  flex: 1; min-width: 160px;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 0 16px 0 0;
}
.friend-trust-item:first-child { padding-left: 0; }
.friend-trust-title { font-size: 12px; font-weight: 700; color: #1a1a1a; }
.friend-trust-sub   { font-size: 11px; color: #6b7280; line-height: 1.4; margin-top: 1px; }

/* Sidebar cards */
.friend-sidebar-card {
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.friend-sidebar-card--green {
  background: #f0fdf4; border-color: #bbf7d0;
}
.friend-sidebar-card--purple {
  background: #f5f3ff; border-color: #ddd6fe;
}
.friend-sc-header {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 800; color: #1a1a1a; margin-bottom: 12px;
}
.friend-sc-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.friend-sc-list li {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12px; color: #374151; line-height: 1.4;
}
.friend-sc-check {
  font-size: 11px; font-weight: 800; color: #2a8a3d;
  flex-shrink: 0; margin-top: 1px;
}
.friend-sc-check--green { color: #5dae61; }
.friend-examples-btn {
  width: 100%; padding: 9px 0;
  border: 1.5px solid #7c3aed; border-radius: 8px;
  background: #fff; color: #7c3aed;
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.friend-examples-btn:hover { background: #7c3aed; color: #fff; }


/* ─── Friend Step 2 — Vibe & Interests ─── */

.friend-q-title {
  font-family: 'Nunito', sans-serif;
  font-size: 15px; font-weight: 800; color: #1a1a1a; margin-bottom: 3px;
}
.friend-q-sub { font-size: 12px; color: #6b7280; margin-bottom: 14px; }

/* Personality cards grid */
.friend-vibe-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.friend-vibe-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: 110px; padding: 14px 10px 10px;
  border: 1.5px solid #e5e7eb; border-radius: 14px;
  background: #fff; cursor: pointer; transition: all .15s;
  text-align: center;
}
.friend-vibe-card:hover { border-color: #5dae61; background: #f9fef9; }
.friend-vibe-card.is-active { border-color: #5dae61; background: #f0fdf4; }
.friend-vibe-check {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #5dae61; display: flex; align-items: center; justify-content: center;
}
.friend-vibe-icon { margin-bottom: 8px; color: #374151; }
.friend-vibe-card.is-active .friend-vibe-icon { color: #2a8a3d; }
.friend-vibe-label {
  font-size: 12px; font-weight: 800; color: #1a1a1a; margin-bottom: 2px;
}
.friend-vibe-sub { font-size: 10px; color: #9ca3af; line-height: 1.3; }

/* Interest chips */
.friend-interests-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.friend-interest-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid #d0cfc8; background: #fff;
  font-size: 12px; font-weight: 600; color: #555;
  cursor: pointer; transition: all .15s;
}
.friend-interest-chip:hover { border-color: #5dae61; color: #5dae61; }
.friend-interest-chip.is-active {
  background: #5dae61; border-color: #5dae61; color: #fff;
}
.friend-interest-icon { font-size: 13px; line-height: 1; }

/* Bio textarea */
.friend-bio-textarea {
  width: 100%; resize: vertical; min-height: 110px;
  padding: 12px 14px; border: 1.5px solid #d0cfc8;
  border-radius: 10px; font-family: 'Nunito', sans-serif;
  font-size: 13px; color: #1a1a1a; background: #fff;
  box-sizing: border-box; transition: border-color .15s; outline: none;
}
.friend-bio-textarea:focus { border-color: #5dae61; }
.friend-bio-textarea::placeholder { color: #b0afa8; }
.friend-bio-counter {
  position: absolute; bottom: 10px; right: 12px;
  font-size: 11px; color: #9ca3af; pointer-events: none;
}

/* Completed step styling */
.cl-step--done .cl-step__circle {
  background: #5dae61; color: #fff; border-color: #5dae61;
}
.cl-steps__line--done { background: #5dae61; }

/* ─── Friend Step 3 — Review & Publish ─── */

/* Review header */
.fr-review-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 16px 0 12px; border-bottom: 1px solid #f0efe8; margin-bottom: 4px;
}
.fr-review-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: #f0fdf4; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fr-review-title { font-size: 14px; font-weight: 800; color: #1a1a1a; margin-bottom: 2px; }
.fr-review-sub   { font-size: 12px; color: #6b7280; }
.fr-edit-all-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  border: 1.5px solid #d0cfc8; background: #fff;
  font-size: 12px; font-weight: 700; color: #374151;
  cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all .15s;
}
.fr-edit-all-btn:hover { border-color: #5dae61; color: #5dae61; }

/* Review rows */
.fr-review-rows { margin-bottom: 16px; }
.fr-review-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid #f0efe8;
}
.fr-review-row__icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: #f0fdf4; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fr-review-row__body { flex: 1; min-width: 0; }
.fr-review-row__label {
  font-size: 13px; font-weight: 700; color: #1a1a1a;
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;
}
.fr-edit-link {
  font-size: 12px; font-weight: 700; color: #5dae61;
  background: none; border: none; cursor: pointer; padding: 0;
}
.fr-edit-link:hover { color: #2a8a3d; }
.fr-review-row__value {
  font-size: 12px; font-weight: 600; color: #6b7280; letter-spacing: 0.3px; line-height: 1.5;
}

/* Privacy box */
/* Profile shared notice */
.fr-profile-shared-box {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fffbeb; border: 1.5px solid #fde68a;
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.fr-profile-shared-box__icon {
  flex-shrink: 0; margin-top: 1px;
  background: #fef3c7; border-radius: 8px; padding: 6px;
  display: flex; align-items: center; justify-content: center;
}
.fr-profile-shared-box__title {
  font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800;
  color: #92400e; margin-bottom: 4px;
}
.fr-profile-shared-box__sub {
  font-family: 'Nunito', sans-serif; font-size: 12px;
  color: #78350f; line-height: 1.5;
}
.fr-profile-shared-box__link {
  color: #5dae61; font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.fr-profile-shared-box__link:hover { text-decoration: underline; }

.fr-privacy-box {
  display: flex; align-items: flex-start; gap: 12px;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.fr-privacy-title { font-size: 13px; font-weight: 800; color: #166534; margin-bottom: 3px; }
.fr-privacy-sub   { font-size: 12px; color: #166534; line-height: 1.4; }

/* Action cards */
.fr-action-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 640px) {
  .fr-action-cards { grid-template-columns: 1fr; }
}
.fr-action-card {
  border: 1.5px solid #e5e7eb; border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.fr-action-card__title { font-size: 13px; font-weight: 800; color: #1a1a1a; }
.fr-action-card__sub   { font-size: 11px; color: #6b7280; line-height: 1.4; flex: 1; }
.fr-action-outline-btn {
  margin-top: 6px; padding: 7px 0; border-radius: 8px;
  border: 1.5px solid #1a1a1a; background: #fff;
  font-size: 12px; font-weight: 700; color: #1a1a1a;
  cursor: pointer; transition: all .15s;
}
.fr-action-outline-btn:hover { background: #1a1a1a; color: #fff; }

/* Toggle */
.fr-toggle {
  margin-top: 8px; width: 44px; height: 24px; border-radius: 12px;
  background: #d1d5db; border: none; cursor: pointer;
  position: relative; transition: background .2s; padding: 0; flex-shrink: 0;
}
.fr-toggle.is-on { background: #5dae61; }
.fr-toggle__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform .2s; display: block;
}
.fr-toggle.is-on .fr-toggle__thumb { transform: translateX(20px); }

/* Sidebar — almost live */
.fr-almost-live {
  background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.fr-almost-live__header {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px;
}
.fr-almost-live__title { font-size: 14px; font-weight: 800; color: #166534; }
.fr-almost-live__sub   { font-size: 12px; color: #166534; }
.fr-next-steps { display: flex; flex-direction: column; gap: 10px; }
.fr-next-step  { display: flex; gap: 8px; align-items: flex-start; }
.fr-next-step__num   { font-size: 12px; font-weight: 800; color: #2a8a3d; flex-shrink: 0; margin-top: 1px; }
.fr-next-step__title { font-size: 12px; font-weight: 700; color: #166534; margin-bottom: 2px; }
.fr-next-step__sub   { font-size: 11px; color: #166534; line-height: 1.4; }

/* Safe & trusted */
.fr-safe-card {
  border: 1px solid #e5e7eb; border-radius: 14px;
  padding: 14px; margin-bottom: 14px;
}
.fr-safe-title { font-size: 13px; font-weight: 800; color: #1a1a1a; margin-bottom: 3px; }
.fr-safe-sub   { font-size: 12px; color: #6b7280; line-height: 1.4; }

/* Order summary */
.fr-order-card {
  border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px;
}
.fr-order-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: #1a1a1a; margin-bottom: 12px;
}
.fr-order-rows  { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.fr-order-row   { display: flex; justify-content: space-between; font-size: 12px; color: #6b7280; }
.fr-order-total {
  display: flex; justify-content: space-between;
  font-size: 15px; font-weight: 800; color: #1a1a1a;
  border-top: 1px solid #f0efe8; padding-top: 10px; margin-bottom: 14px;
}
.fr-pay-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 0; border-radius: 10px;
  background: #5dae61; border: none; color: #fff;
  font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s; margin-bottom: 8px;
}
.fr-pay-btn:hover { background: #4a9a4e; }
.fr-pay-secure {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: #9ca3af; justify-content: center; margin-bottom: 10px;
}
.fr-pay-methods { display: flex; gap: 6px; justify-content: center; }
.fr-pay-badge {
  padding: 3px 8px; border: 1px solid #e5e7eb; border-radius: 4px;
  font-size: 10px; font-weight: 800; color: #374151; background: #f9fafb;
}

/* Thank you banner */
.fr-thankyou-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: #f5f4ed; border-top: 1px solid #e5e7eb;
  padding: 28px 54px; gap: 20px; flex-wrap: wrap;
}
.fr-thankyou-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 22px; color: #1a1a1a; margin-bottom: 6px;
}
.fr-thankyou-sub  { font-size: 13px; color: #6b7280; line-height: 1.5; }
.fr-thankyou-right {
  font-family: 'Caveat Brush', cursive;
  font-size: 20px; color: #5dae61; text-align: right; line-height: 1.3; white-space: nowrap;
}

/* ─── Student Guides ─────────────────────────────────────────── */
.sg {
  padding: 56px 102px 64px;
}

.sg__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 40px;
}

.sg__heading-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sg__heading {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  color: var(--text-dark);
  margin: 0;
  position: relative;
  width: fit-content;
}

.sg__heading-accent {
  color: #5dae61;
  font-style: italic;
}

.sg__heading-deco {
  width: 24px;
  height: 24px;
  object-fit: contain;
  position: absolute;
  top: -10px;
  right: -26px;
}

.sg__view-all {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #5dae61;
  text-decoration: none;
  white-space: nowrap;
  align-self: flex-end;
}

.sg__view-all:hover { text-decoration: underline; }

/* Body: left + cards */
.sg__body {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.sg__left {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sg__subtitle {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22.5px;
  letter-spacing: 0px;
  color: #1A1A1A;
  margin: 0;
}

.sg__desc {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22.5px;
  letter-spacing: 0px;
  color: #1A1A1A;
  width: 266px;
  margin: 0;
}

.sg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: #5dae61;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 4px 4px 0px #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: 17px;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.sg__btn:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

.sg__deco-img {
  width: 290px;
  height: auto;
  object-fit: contain;
  margin-top: 8px;
}

/* Horizontal scroll row */
.sg__scroll-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sg__scroll-row::-webkit-scrollbar {
  display: none;
}

.sg__scroll-row > div {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Cards */
.sg__cards {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.sg__card {
  background: #FAF9F6;
  border: 1.13px solid #6B7280;
  border-radius: 13.5px;
  width: 226px;
  height: 341.75px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: box-shadow 0.2s, transform 0.15s;
}

.sg__card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.sg__card-img-wrap {
  width: 100%;
  height: 140px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.sg__card-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8f5ee, #f0f9f1);
}

.sg__card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.sg__card-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: capitalize;
  align-self: flex-start;
}

.sg__card-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0;
}

.sg__card-desc {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  color: #6B7280;
  margin: 0;
  flex: 1;
}

.sg__card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.sg__card-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF;
}

/* Responsive */
@media (max-width: 1024px) {
  .sg { padding: 48px 32px 56px; }
  .sg__cards { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .sg { padding: 32px 20px 40px; }

  /* Header */
  .sg__header { flex-direction: column; gap: 8px; margin-bottom: 24px; }
  .sg__view-all { align-self: flex-start; }

  /* Body — stack vertically */
  .sg__body { flex-direction: column; gap: 20px; }
  .sg__left { flex: 1; width: 100%; }
  .sg__desc { width: 100%; }
  .sg__deco-img { display: none; }

  /* Scroll row — slightly smaller cards on mobile */
  .sg__scroll-row { gap: 12px; }
  .sg__scroll-row > div { width: 180px !important; }
  .sg__card { width: 100%; height: auto; }
}

@media (max-width: 420px) {
  /* Single column on very small screens */
  .sg__cards { grid-template-columns: 1fr; }
}

/* ── FAQ Section ── */
.faq {
  padding: 56px 102px 64px;
}

.faq__inner {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.faq__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.faq__heading-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faq__heading {
  font-family: 'Caveat', cursive;
  font-size: 36px;
  font-weight: 700;
  margin: 0;
  line-height: 1.15;
}

.faq__heading-bold {
  color: #1A1A1A;
  font-style: normal;
}

.faq__heading-accent {
  color: #5DAE61;
  font-style: italic;
}

.faq__subtitle {
  font-family: 'Baloo 2', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 22.5px;
  letter-spacing: 0px;
  color: #1A1A1A;
  max-width: 335px;
  margin: 0;
}

.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.faq__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq__item {
  background: #FFFFFF;
  border: 2.25px solid #1A1A1A;
  border-radius: 27px;
  padding: 18px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  user-select: none;
}

.faq__item--open {
  border-radius: 18px;
  border-color: #5DAE61;
}

.faq__item:hover {
  border-color: #5DAE61;
  box-shadow: 0 2px 8px rgba(93,174,97,0.1);
}

.faq__item-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq__icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.faq__question {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  flex: 1;
  line-height: 14px;
  letter-spacing: 0px;
}

.faq__toggle {
  font-size: 20px;
  font-weight: 400;
  color: #5DAE61;
  flex-shrink: 0;
  line-height: 1;
  width: 24px;
  text-align: center;
}

.faq__answer {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
  line-height: 1.6;
  margin: 10px 0 4px 48px;
}

.faq__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 8px;
}

.faq__plane {
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 120px;
  height: auto;
  opacity: 0.85;
}

.faq__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px;
  background: #5DAE61;
  color: #fff;
  border: 2px solid #1A1A1A;
  border-radius: 14px;
  box-shadow: 4px 4px 0px #1A1A1A;
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.faq__btn:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

/* Sidebar */
.faq__sidebar {
  flex: 0 0 320px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 60px;
}

.faq__still-card {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.faq__contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 24px;
  background: #5DAE61;
  color: #fff;
  border: 2px solid #1A1A1A;
  border-radius: 14px;
  box-shadow: 4px 4px 0px #1A1A1A;
  font-family: 'Caveat Brush', cursive;
  font-size: 20px;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.faq__contact-btn:hover {
  background: #4a9a4e;
  box-shadow: 2px 2px 0px #1a1a1a;
  transform: translate(2px, 2px);
}

.faq__girl {
  width: 100%;
  max-width: 380px;
  height: auto;
  object-fit: contain;
}

.faq__cat {
  position: absolute;
  bottom: 40px;
  left: 54px;
  width: 130px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

@media (max-width: 1280px) {
  .faq { padding: 48px 48px 56px; }
  .faq__sidebar { flex: 0 0 280px; }
}

@media (max-width: 1024px) {
  .faq { padding: 48px 32px 56px; }
  .faq__inner { flex-direction: column; }
  .faq__sidebar {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .faq__still-card { max-width: 360px; }
  .faq__contact-btn { max-width: 360px; }
  .faq__girl { max-width: 280px; }
  .faq__cat { display: none; }
}

@media (max-width: 768px) {
  .faq { padding: 40px 20px 48px; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__heading { font-size: 28px; }
  .faq__subtitle { max-width: 100%; }
}

@media (max-width: 480px) {
  .faq { padding: 32px 16px 40px; }
  .faq__item { border-radius: 18px; padding: 14px; }
  .faq__icon { width: 28px; height: 28px; }
  .faq__question { font-size: 13px; }
}

/* ── Chat page ─────────────────────────────────────── */
.chat-page { background: #f5f4ed; min-height: calc(100vh - 64px); padding: 24px 16px; }

.chat-layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  height: calc(100vh - 130px);
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

/* Inbox */
.chat-inbox { display: flex; flex-direction: column; border-right: 1.5px solid #e5e7eb; min-width: 0; }
.chat-inbox__header { padding: 18px 20px 14px; border-bottom: 1.5px solid #e5e7eb; }
.chat-inbox__title { font-family: 'Caveat Brush', cursive; font-size: 22px; color: #1a1a1a; margin: 0; }
.chat-inbox__list { flex: 1; overflow-y: auto; }
.chat-inbox__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #aaa; font-size: 14px; padding: 40px 20px; text-align: center; }

.chat-inbox__item {
  width: 100%; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; border: none; background: none; cursor: pointer;
  border-bottom: 1px solid #f0efea; text-align: left; transition: background 0.15s;
}
.chat-inbox__item:hover { background: #f9f9f7; }
.chat-inbox__item.is-active { background: #f0fdf4; border-left: 3px solid #5dae61; }

.chat-inbox__avatar {
  width: 42px; height: 42px; border-radius: 50%; background: #5dae61;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 15px;
  flex-shrink: 0; overflow: hidden;
}
.chat-inbox__avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-inbox__avatar--sm { width: 34px; height: 34px; font-size: 12px; }

.chat-inbox__item-body { flex: 1; min-width: 0; }
.chat-inbox__item-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.chat-inbox__item-name { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 14px; color: #1a1a1a; }
.chat-inbox__item-time { font-size: 11px; color: #aaa; white-space: nowrap; flex-shrink: 0; }
.chat-inbox__item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.chat-inbox__item-preview { font-size: 13px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.chat-inbox__item-listing { font-size: 11px; color: #bbb; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-inbox__badge { background: #5dae61; color: #fff; border-radius: 20px; padding: 1px 7px; font-size: 11px; font-weight: 700; flex-shrink: 0; }

/* Chat right panel */
.chat-right { display: flex; flex-direction: column; min-width: 0; }
.chat-view { display: flex; flex-direction: column; height: 100%; position: relative; }
.chat-view__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #aaa; font-size: 14px; }

/* Header */
.chat-view__header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid #d9d0c7;
  background: #f0ece4; flex-shrink: 0;
}
.chat-view__back { display: none; background: none; border: none; cursor: pointer; color: #555; padding: 4px; }
.chat-view__header-info { flex: 1; min-width: 0; }
.chat-view__header-name { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 15px; color: #1a1a1a; }
.chat-view__header-listing { font-size: 11.5px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-view__status { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: capitalize; }
.chat-view__status--active { background: #d1fae5; color: #065f46; }
.chat-view__status--pending { background: #fef3c7; color: #92400e; }
.chat-view__status--closed { background: #f3f4f6; color: #6b7280; }

/* Messages area */
.chat-view__messages {
  flex: 1; overflow-y: auto; padding: 16px 14px 10px;
  display: flex; flex-direction: column; gap: 2px;
  background: #efeae2;
}
.chat-view__no-msgs { text-align: center; color: #999; font-size: 13px; margin: auto; }
.chat-view__pending-notice {
  text-align: center; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 10px; padding: 10px 16px; font-size: 13px; color: #92400e;
  margin: 4px auto 8px; max-width: 320px;
}

/* Message row */
.chat-msg {
  display: flex; flex-direction: column;
  max-width: 72%; margin-bottom: 1px;
}
.chat-msg--me    { align-self: flex-end;   align-items: flex-end; }
.chat-msg--them  { align-self: flex-start; align-items: flex-start; }
.chat-msg--tail  { margin-bottom: 6px; }

/* Bubble wrapper (needed for tail positioning) */
.chat-msg__bubble-wrap { position: relative; }

/* Bubble */
.chat-msg__bubble {
  padding: 7px 10px 5px 10px;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif; font-size: 14.5px; line-height: 1.45;
  word-break: break-word; position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 6px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}

/* Sent */
.chat-msg--me .chat-msg__bubble {
  background: #d9fdd3; color: #111;
  border-radius: 12px 12px 2px 12px;
}
/* Received */
.chat-msg--them .chat-msg__bubble {
  background: #fff; color: #111;
  border-radius: 12px 12px 12px 2px;
}

/* Tail — only on last bubble in a group */
.chat-msg--me.chat-msg--tail .chat-msg__bubble::after {
  content: '';
  position: absolute; bottom: 0; right: -7px;
  width: 0; height: 0;
  border-left: 7px solid #d9fdd3;
  border-bottom: 7px solid transparent;
}
.chat-msg--them.chat-msg--tail .chat-msg__bubble::after {
  content: '';
  position: absolute; bottom: 0; left: -7px;
  width: 0; height: 0;
  border-right: 7px solid #fff;
  border-bottom: 7px solid transparent;
}

/* Text content inside bubble */
.chat-msg__text { flex: 1; min-width: 0; }

/* Meta (time + ticks) — lives inside bubble, floats to bottom-right */
.chat-msg__meta {
  flex-shrink: 0; margin-left: auto;
  font-size: 10.5px; line-height: 1; white-space: nowrap;
  display: flex; align-items: center; gap: 2px;
  margin-bottom: 1px; opacity: 0.65; align-self: flex-end;
}
.chat-msg--me .chat-msg__meta  { color: #4a7c4f; }
.chat-msg--them .chat-msg__meta { color: #7a7a7a; }

/* Tick icons */
.chat-msg__ticks { display: flex; }
.chat-msg__ticks--read { color: #53bdeb; opacity: 1; }

/* Typing indicator */
.chat-msg__bubble--typing {
  display: flex; gap: 5px; align-items: center; padding: 10px 14px;
}
.chat-msg__bubble--typing span {
  width: 8px; height: 8px; background: #aaa; border-radius: 50%;
  animation: typing-dot 1.2s infinite;
}
.chat-msg__bubble--typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-msg__bubble--typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

/* Date separator */
.chat-msg-date {
  align-self: center; background: rgba(255,255,255,0.75); backdrop-filter: blur(4px);
  border-radius: 8px; padding: 3px 10px; font-size: 11.5px; color: #666;
  font-family: 'Nunito', sans-serif; margin: 8px 0 4px; letter-spacing: 0.2px;
}

/* Accept bar */
.chat-view__accept-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 18px; background: #fffbeb; border-top: 1.5px solid #fde68a;
  font-family: 'Nunito', sans-serif; font-size: 13px; color: #92400e; flex-shrink: 0;
}
.chat-view__accept-btn {
  background: #5dae61; color: #fff; border: none; border-radius: 8px;
  padding: 6px 16px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13px; cursor: pointer;
}
.chat-view__accept-btn:hover { background: #4a9a50; }

/* Input row */
.chat-view__input-row {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid #d9d0c7; background: #f0ece4; flex-shrink: 0; align-items: center;
}
.chat-view__input {
  flex: 1; border: none; border-radius: 24px;
  padding: 10px 16px; font-family: 'Nunito', sans-serif; font-size: 14px; outline: none;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.chat-view__send-btn {
  width: 42px; height: 42px; border-radius: 50%; background: #5dae61; color: #fff;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.15s; box-shadow: 0 2px 6px rgba(93,174,97,0.3);
}
.chat-view__send-btn:hover:not(:disabled) { background: #4a9a50; }
.chat-view__send-btn:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; }
.chat-view__closed-bar { padding: 12px 18px; text-align: center; display: flex; align-items: center; justify-content: center; background: #f3f4f6; font-size: 13px; color: #6b7280; border-top: 1.5px solid #e5e7eb; }
.chat-view__closed-bar--blocked { background: #fff1f1; color: #dc2626; border-top-color: #fecaca; }

/* Emoji button + picker */
.chat-view__emoji-wrap { position: relative; flex-shrink: 0; }
.chat-view__emoji-btn {
  width: 38px; height: 38px; border-radius: 50%; background: none; border: none;
  font-size: 20px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: transform 0.15s;
  line-height: 1;
}
.chat-view__emoji-btn:hover { transform: scale(1.2); }
.chat-view__emoji-picker {
  position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 200;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

/* Media message bubbles */
.chat-msg__media-img {
  max-width: 240px; max-height: 280px; border-radius: 10px; display: block;
  object-fit: cover; cursor: zoom-in; transition: opacity 0.15s;
}
.chat-msg__media-img:hover { opacity: 0.9; }
.chat-msg__media-video {
  max-width: 280px; max-height: 220px; border-radius: 10px; display: block;
}
.chat-msg__uploading {
  display: flex; align-items: center; gap: 8px; padding: 4px 2px;
  font-size: 13px; color: inherit; opacity: 0.85;
}
.chat-msg__upload-spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4);
  border-top-color: currentColor; border-radius: 50%;
  animation: spin-upload 0.7s linear infinite; flex-shrink: 0;
}
.chat-msg--them .chat-msg__upload-spinner { border-color: rgba(0,0,0,0.15); border-top-color: #5dae61; }
@keyframes spin-upload { to { transform: rotate(360deg); } }

/* Lightbox for images */
.chat-lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.chat-lightbox__img {
  max-width: 92vw; max-height: 90vh; border-radius: 8px;
  object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.chat-lightbox__close {
  position: absolute; top: 18px; right: 20px; background: rgba(255,255,255,0.15);
  border: none; color: #fff; border-radius: 50%; width: 36px; height: 36px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.chat-lightbox__close:hover { background: rgba(255,255,255,0.28); }

/* 3-dot menu */
.chat-view__menu-wrap { position: relative; flex-shrink: 0; }
.chat-view__menu-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: none;
  color: #888; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.chat-view__menu-btn:hover { background: #f3f4f6; color: #333; }
.chat-view__menu-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10); min-width: 160px; overflow: hidden;
}
.chat-view__menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 11px 16px; font-size: 14px; font-family: 'Nunito', sans-serif;
  background: none; border: none; cursor: pointer; color: #374151;
  transition: background 0.12s; text-align: left;
}
.chat-view__menu-item:hover { background: #f9f9f7; }
.chat-view__menu-item--danger { color: #dc2626; }
.chat-view__menu-item--danger:hover { background: #fff1f1; }

/* Load older messages button */
.chat-view__load-more {
  background: rgba(255,255,255,0.85); border: 1px solid #d1d5db; color: #374151;
  border-radius: 16px; padding: 5px 18px; font-size: 12.5px; font-family: 'Nunito', sans-serif;
  cursor: pointer; transition: background 0.15s;
}
.chat-view__load-more:hover:not(:disabled) { background: #fff; }
.chat-view__load-more:disabled { opacity: 0.6; cursor: not-allowed; }

/* Scroll-to-bottom floating button */
.chat-view__scroll-btn {
  position: absolute; bottom: 72px; right: 18px; z-index: 20;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1.5px solid #e5e7eb;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12); color: #374151;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s;
}
.chat-view__scroll-btn:hover { background: #f9f9f7; }
.chat-view__scroll-badge {
  position: absolute; top: -6px; right: -6px;
  background: #5dae61; color: #fff; border-radius: 20px;
  padding: 1px 5px; font-size: 10px; font-weight: 700;
  border: 2px solid #fff; min-width: 18px; text-align: center;
}

/* Navbar chat button */
.navbar__chat-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: #f0f0ea;
  color: #444; text-decoration: none; transition: background 0.15s;
}
.navbar__chat-btn:hover { background: #e0f5e0; color: #5dae61; }
.navbar__chat-badge {
  position: absolute; top: -4px; right: -4px;
  background: #e05252; color: #fff; border-radius: 20px;
  padding: 1px 5px; font-size: 10px; font-weight: 700;
  border: 2px solid #fff; min-width: 18px; text-align: center;
}
.navbar__dropdown-badge {
  background: #5dae61; color: #fff; border-radius: 20px;
  padding: 1px 7px; font-size: 11px; font-weight: 700; margin-left: 6px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .chat-layout { grid-template-columns: 1fr; height: calc(100vh - 110px); }
  .chat-inbox--hidden-mobile { display: none; }
  .chat-right--hidden-mobile { display: none; }
  .chat-view__back { display: flex; }
  .chat-page { padding: 12px 8px; }
  .chat-layout { border-radius: 12px; }
}

/* ── Message Confirm Modal ─────────────────────────── */
.mcm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 16px;
  animation: fadeIn 0.15s ease;
}
.mcm {
  background: #FCFCF8;
  border-radius: clamp(18px, 2.5vw, 26px);
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 36px) clamp(110px, 13vw, 130px);
  width: clamp(300px, 34vw, 420px);
  max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
  box-sizing: border-box;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 0.7vw, 8px);
  text-align: center;
  border: 2px solid #1a1a1a; box-shadow: none;
  animation: slideUp 0.18s ease;
}
.mcm__deco-left {
  position: absolute; left: 0; top: 60px;
  width: 77.07px; height: 102.58px; pointer-events: none;
}
.mcm__deco-left svg { display: block; width: 100%; height: 100%; }

/* Hero illustration */
.mcm__hero {
  width: 280px;
  height: auto;
  display: block;
  flex-shrink: 0;
  margin-bottom: 0px;
  margin-left: 95px;
}

/* Title */
.mcm__title { margin: 0; text-align: center; }
.mcm__title-line1 {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 33.75px;
  line-height: 1.1;
  letter-spacing: 0px;
  color: #1A1A1A;
  position: relative;
  top: -8.01px;
  left: 9.29px;
}
.mcm__title-line2 {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 33.75px;
  line-height: 1.1;
  color: #1A1A1A;
  margin-top: -10px;
}
.mcm__name { color: #5dae61; font-style: italic; }

/* Subtitle */
.mcm__body {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(12px, 1.3vw, 14px);
  color: #888; margin: 0; line-height: 1.55;
}

/* Info card */
.mcm__info-card {
  width: fit-content; background: #5DAE6133;
  border-radius: 14px; padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.5vw, 18px);
  display: flex; flex-direction: column; gap: 8px;
  box-sizing: border-box; text-align: left;
  box-shadow: 0px 0.52px 1.05px 0px #0000000D;
}
.mcm__info-item {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 700; color: #1a1a1a;
}
.mcm__info-icon { width: 24px; height: 24px; flex-shrink: 0; object-fit: contain; }

/* Actions */
.mcm__actions {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; position: relative; z-index: 2; margin-top: 12px;
}
.mcm__confirm-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.mcm__rays { width: 28px; height: auto; flex-shrink: 0; }
.mcm__rays--left { transform: scaleX(1); }
.mcm__rays--right { transform: scaleX(-1); }

.mcm__confirm {
  width: 240.36px;
  height: 44.5px;
  padding: 4px 16px;
  border: 2.25px solid #1A1A1A;
  border-radius: 18px;
  background: #5DAE61;
  color: #fff;
  font-family: 'Caveat Brush', cursive;
  font-size: clamp(16px, 2vw, 20px);
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 0.1s, box-shadow 0.1s;
}
.mcm__confirm:hover:not(:disabled) { opacity: 0.9; }
.mcm__confirm:active:not(:disabled) { opacity: 0.8; }
.mcm__cancel {
  width: 240.36px;
  height: 44.5px;
  padding: 4px 16px;
  border: 2.25px solid #1A1A1A;
  border-radius: 18px;
  background: #FCFCF8;
  color: #1a1a1a;
  font-family: 'Caveat Brush', cursive;
  font-size: clamp(16px, 2vw, 20px);
  box-sizing: border-box;
  cursor: pointer; transition: opacity 0.15s;
}
.mcm__cancel:hover:not(:disabled) { opacity: 0.8; }
.mcm__confirm:disabled, .mcm__cancel:disabled { opacity: 0.6; cursor: not-allowed; }

/* Success state */
.mcm__success {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center; position: relative; z-index: 2;
  padding: 8px 0 0;
}
.mcm__success-icon { display: flex; justify-content: center; }
.mcm__success-title {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 30px;
  color: #5DAE61; line-height: 1.1;
}
.mcm__success-body {
  font-family: 'Nunito', sans-serif; font-size: clamp(13px, 1.4vw, 15px);
  color: #555; line-height: 1.6; margin: 0;
}

@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Buy-Sell Detail — allow sticky (overflow-x: hidden blocks position:sticky) ── */
.hd--bsd { overflow-x: clip; }
.hd--bsd .hd__body-card { overflow: visible; }

/* ── Buy-Sell Detail — image column sizing ── */
.bsd__img-col {
  width: 100%;
  position: sticky;
  top: 90px;
  align-self: start;
}
.hd__content:has(.bsd__img-col) {
  grid-template-columns: 640px 1fr;
  gap: 28px;
  align-items: start;
}
.hd__content:has(.bsd__img-col) .hd__sidebar {
  position: static;
  margin-top: 0;
}

/* ── Buy-Sell Detail — two-column redesign ── */
.bsd__page {
  background: #f6f7f9;
  min-height: 100vh;
  padding-top: 80px;
}
.bsd__container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 32px 20px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 820px) {
  .bsd__container { grid-template-columns: 1fr; gap: 20px; padding: 20px 14px 16px; }
}
.bsd__gallery-col { position: sticky; top: 96px; }
.bsd__detail-col { }

/* ImageViewer */
.bsd__viewer { display: flex; flex-direction: column; gap: 10px; }
.bsd__main-wrap {
  position: relative;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4/3;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.bsd__main-img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.bsd__main-empty {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; color: #9ca3af; font-size: 14px;
  cursor: default;
}
.bsd__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.92); border: 1px solid #e5e7eb;
  border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #374151; z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.15s, transform 0.15s;
}
.bsd__nav:hover { background: #fff; transform: translateY(-50%) scale(1.07); }
.bsd__nav--prev { left: 10px; }
.bsd__nav--next { right: 10px; }
.bsd__img-counter {
  position: absolute; bottom: 10px; right: 12px;
  background: rgba(0,0,0,0.52); color: #fff;
  font-size: 12px; font-weight: 600;
  border-radius: 20px; padding: 3px 10px;
  pointer-events: none;
}
.bsd__zoom-hint {
  position: absolute; bottom: 10px; left: 12px;
  background: rgba(0,0,0,0.52); color: #fff;
  font-size: 11px; border-radius: 20px; padding: 3px 10px;
  display: flex; align-items: center; gap: 5px;
  pointer-events: none; opacity: 0;
  transition: opacity 0.2s;
}
.bsd__main-wrap:hover .bsd__zoom-hint { opacity: 1; }
.bsd__thumbs {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.bsd__thumb {
  width: 72px; height: 54px;
  border-radius: 8px; overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer; flex-shrink: 0;
  transition: border-color 0.15s;
  background: #fff;
}
.bsd__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsd__thumb--active { border-color: #5dae61; }
.bsd__thumb:hover:not(.bsd__thumb--active) { border-color: #d1d5db; }

/* Detail column pieces */
.bsd__title-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; margin-bottom: 10px;
}
.bsd__title {
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: clamp(20px, 2.2vw, 26px); color: #1a1a1a;
  line-height: 1.25; margin: 0;
}
.bsd__price {
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px); color: #1a1a1a;
  margin: 0 0 14px;
}
.bsd__desc-box {
  background: #fff; border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px;
  border: 1px solid #e5e7eb;
}
.bsd__seller-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid #e5e7eb;
}
.bsd__actions { display: flex; flex-direction: column; gap: 10px; }

/* ─── Recent Listings (homepage) ─────────────────────────────── */
.rl__section {
  padding: 48px 54px 56px;
}
.rl__scroll-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rl__scroll-row::-webkit-scrollbar { display: none; }

@media (max-width: 1024px) {
  .rl__section { padding: 40px 32px 48px; }
}
@media (max-width: 768px) {
  .rl__section { padding: 32px 20px 40px; }
}