/* ─── 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: 100px;

  /* 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: 216px;
  height: 75px;
  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__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;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.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: 16px;
  height: 66px;
  padding: 16px 32px;
  background: #5dae61;
  color: var(--white);
  border: 2px 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;
  white-space: nowrap;
  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: 16px;
  height: 66px;
  padding: 16px 32px;
  background: #ffffff;
  color: var(--text-dark);
  border: 2px 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;
  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__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; }
}

@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 { height: 54px; font-size: 17px; padding: 12px 20px; }
  .hero__trust { gap: 8px; }
}

@media (max-width: 960px) {
  .hero { margin: 0 16px; }
  .hero__video-wrap { flex: 0 0 36%; }
  .hero__heading { font-size: 36px; }
  .hero__subheading { font-size: 19px; }
  .hero__btn-primary, .hero__btn-secondary { height: 52px; font-size: 16px; }
  .hero__trust-text { font-size: 12px; }
  .hero__trust-sub { font-size: 11px; }
}

@media (max-width: 768px) {
  .hero { margin: 0 12px; border-radius: 24px; }
  .hero__inner { padding-right: 0; min-height: unset; }
  .hero__content { flex: 1; width: 100%; padding: 36px 20px; min-height: unset; }
  .hero__video-wrap { display: none; }
  .hero__heading { font-size: 34px; max-width: 100%; }
  .hero__description { max-width: 100%; }
  .hero__heading-underline { width: 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: 0 0 150px;
  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%;
}

/* ─── 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;
  }
}

/* ─── 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);
}


/* ─── 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;
}

/* ─── 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;
}

.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;
}

/* 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;
}

/* ─── 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.15s, color 0.15s;
  flex-shrink: 0;
}

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

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

/* 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: 52px 32px 0;
  }
  .footer__main {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
  .footer__bottom-row {
    flex-direction: column;
    gap: 24px;
  }
  .footer__help {
    padding: 0;
  }
  .footer__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .footer__main {
    grid-template-columns: 1fr;
  }
  .footer__app-btns {
    flex-direction: column;
  }
}
/* ── All Categories Page ── */
.allcat {
  min-height: 100vh;
  background: transparent;
  padding-bottom: 64px;
}

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

.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;
}

.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__cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
}

.allcat__cat-grid .category-card {
  flex: unset;
  width: 100%;
  min-height: 240px;
  padding: 20px 16px 16px;
}

.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;
  }
}

@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;
  }
}

/* ══════════════════════════════════════════
   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;
  overflow: hidden;
}

.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: 13px;
  font-weight: 700;
  color: #333;
  border: 1.5px solid #e0e8e0;
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
  cursor: pointer;
  outline: none;
}

.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(3, 1fr);
  gap: 20px;
}

.housing__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;
}

.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-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 {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #5dae61;
  margin-bottom: 6px;
}

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

.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;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #444;
}

.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; }
  .housing__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .housing__hero { flex-direction: column; margin: 0 16px; padding: 32px 24px; height: auto; }
  .housing__hero-right { display: none; }
  .housing__content-card { margin: 0 16px 40px; border-radius: 28px; }
  .housing__body { grid-template-columns: 1fr; padding: 0 24px 40px; }
  .housing__cities-wrap { padding: 28px 24px; }
  .housing__filters { position: static; }
  .housing__grid { grid-template-columns: 1fr; }
  .housing__map-section { flex-direction: column; padding: 40px 24px; gap: 32px; }
  .housing__map-preview { height: 200px; }
  .housing__trust-section { flex-direction: column; padding: 40px 24px; gap: 28px; }
  .housing__trust-features { grid-template-columns: 1fr; }
  .housing__landlord-section { flex-direction: column; padding: 40px 24px; gap: 24px; text-align: center; }
  .housing__landlord-img-wrap { display: none; }
}

/* ── 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 {
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 54px 64px;
  box-sizing: border-box;
}

/* ── Breadcrumb ── */
.hd__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  margin-bottom: 18px;
  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: 10px;
}

.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 ── */
.hd__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 36px;
}

.hd__gallery-main {
  height: 100%;
}

.hd__gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: 100%;
}

.hd__gallery-thumb {
  position: relative;
  overflow: hidden;
}

.hd__gallery-show-all {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid #1a1a1a;
  border-radius: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1a1a1a;
  padding: 6px 12px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}

.hd__gallery-show-all:hover { background: #fff; }

/* ── 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;
  border-bottom: 1px solid #f0f0ee;
}

.hd__section:last-child { border-bottom: none; }

.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;
  border-bottom: 1px solid #f0f0ee;
}

.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; }

/* ── 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: 110px;
}

.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__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;
  border-top: 1px solid #f0f0ee;
}

.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 {
  border-top: 1px solid #f0f0ee;
}

/* ── 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: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 32px 0 16px;
  flex-wrap: wrap;
}

.hd__verify-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.hd__verify-shield { font-size: 36px; }

.hd__verify-title {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: #1a1a1a;
  margin-bottom: 3px;
}

.hd__verify-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  max-width: 220px;
  line-height: 1.5;
}

.hd__verify-checks {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  flex: 1;
}

.hd__verify-check {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #5dae61;
  white-space: nowrap;
}

.hd__verify-learn {
  background: none;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  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;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .hd { padding: 24px 32px 48px; }
  .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 { padding: 16px 20px 40px; }
  .hd__gallery { grid-template-columns: 1fr; height: 260px; }
  .hd__gallery-grid { display: none; }
  .hd__title { font-size: 32px; }
  .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; }
}

/* ═══════════════════════════════════════════════════════════════
   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__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;
}

/* ── 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;
}

/* ── 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;
  }
}



/* ── 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-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; }

/* 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 {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #f0efe8;
}
.rv-section:last-of-type { border-bottom: none; }
.rv-section__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f0f8f0;
  border: 1.5px solid #c8e6c9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.rv-section__body { flex: 1; min-width: 0; }
.rv-section__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.rv-section__title {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #1a1a1a;
}
.rv-edit-btn {
  background: none;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #5dae61;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.rv-edit-btn:hover { text-decoration: underline; }
.rv-section__line {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-light);
  font-weight: 500;
  line-height: 1.6;
}
.rv-section__line--strong { color: #3a3935; font-weight: 600; }

/* Photos row */
.rv-photos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.rv-photo-thumb {
  width: 64px;
  height: 48px;
  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;
}

/* 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 {
  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: 40px;
  padding: 0 36px 0 12px;
  border: 1.5px solid #d0cfc8;
  border-radius: 10px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

.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: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid #d8d7d0;
  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;
  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;
  gap: 24px;
  padding: 0 28px 20px;
  align-items: flex-start;
}

/* Gallery */
.bslr-gallery {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  width: 300px;
}
.bslr-gallery__main {
  width: 200px;
  height: 230px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  flex-shrink: 0;
}
.bslr-gallery__side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.bslr-gallery__thumb {
  width: 100%;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Details table */
.bslr-details { flex: 1; min-width: 0; }
.bslr-item-title {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 14px;
}
.bslr-table { width: 100%; border-collapse: collapse; }
.bslr-table__row { vertical-align: top; }
.bslr-table__label {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  padding: 6px 16px 6px 0;
  white-space: nowrap;
  width: 110px;
}
.bslr-table__value {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  padding: 6px 0;
  line-height: 1.5;
}

/* 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-bottom: 48px;
  overflow: hidden;
}

.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: 13px;
  font-weight: 700;
  color: #333;
  border: 1.5px solid #e0e8e0;
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
  cursor: pointer;
  outline: none;
}

.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) {
  .roommates__hero { flex-direction: column; margin: 0 16px; padding: 32px 24px; height: auto; }
  .roommates__hero-right { display: none; }
  .roommates__content-card { margin: 0 16px 40px; border-radius: 28px; }
  .roommates__body { grid-template-columns: 1fr; padding: 0 24px 40px; }
  .roommates__cities-wrap { padding: 28px 24px; }
  .roommates__filters { position: static; }
  .roommates__grid { grid-template-columns: 1fr; }
  .roommates__trust-section { flex-direction: column; padding: 40px 24px; gap: 28px; }
  .roommates__trust-features { flex-direction: column; }
  .roommates__post-section { flex-direction: column; padding: 40px 24px; gap: 24px; text-align: center; }
  .roommates__post-img-wrap { display: none; }
}


/* ═══════════════════════════════════════════
   BUY & SELL PAGE
═══════════════════════════════════════════ */

.bs {
  background: #fffdf7;
  min-height: 100vh;
}

/* ── 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;
}

/* ── 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;
}

.bs__select-wrap::after {
  content: '▾';
  position: absolute;
  right: 10px;
  font-size: 12px;
  color: #6B7280;
  pointer-events: none;
}

.bs__filter-select,
.bs__sort-select {
  width: auto;
  border: 1.13px solid #6B7280;
  border-radius: 6px;
  padding: 9px 30px 9px 13.5px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  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;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
}

.bs__filter-spacer { flex: 1; }

.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: 241px;
  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: 110px;
  overflow: hidden;
  flex-shrink: 0;
}

.bs__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.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%;
  height: 131px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  opacity: 1;
  box-sizing: border-box;
  flex-shrink: 0;
}

.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;
}

/* 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;
}

/* ══════════════════════════════════════════
   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;
}

/* Trip & BuySell page content card — rounded all corners, gap before footer */
.bs .bs__content-card,
.tr .bs__content-card {
  border-radius: 32px;
  margin: 0 54px 64px;
  padding-bottom: 48px;
}

/* 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(150px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.tr__card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0px 1px 2px 0px #0000000D;
  width: 100%;
  min-height: 210px;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
  box-sizing: border-box;
}

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

.tr__card-avatar-section {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.tr__card-top {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: -6px;
  left: 0;
  padding: 0 2px;
  box-sizing: border-box;
}

.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: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #e8e8e8;
  flex-shrink: 0;
}

.tr__card-avatar { width: 100%; height: 100%; object-fit: cover; }

.tr__card-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.tr__card-name {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 24px;
  line-height: 22.5px;
  letter-spacing: 0px;
  color: #1A1A1A;
  width: 140px;
  height: 23px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tr__card-specialty {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #777;
}

.tr__card-price {
  font-family: 'Caveat Brush', cursive;
  font-size: 18px;
  color: #5dae61;
}

.tr__card-price span {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #999;
}

.tr__card-badge {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  margin-top: 2px;
}

/* 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;
}


/* ═══════════════════════════════════════════════════════════════
   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: 70px; }
  .navbar__logo-img { width: 160px; height: 56px; }
  --navbar-h: 70px;
}

@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: wrap;
    gap: 12px;
  }

  .hero__trust-item {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    height: auto;
  }
}

@media (max-width: 400px) {
  .hero__trust-item {
    flex: 1 1 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;
}

/* Smaller textarea */
.cl-textarea--sm {
  min-height: 76px;
  resize: vertical;
}

/* Teaching Mode toggle buttons */
.tutor-toggle-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tutor-mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  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-mode-btn:hover { border-color: #5dae61; color: #5dae61; }
.tutor-mode-btn.is-active {
  background: #5dae61;
  border-color: #5dae61;
  color: #fff;
}

/* Level buttons */
.tutor-level-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.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-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; }

/* Section card */
.rv-section {
  border: 1.5px solid #e2e1da;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #fff;
}
.rv-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1.5px solid #efefeb;
  background: #fafaf8;
}
.rv-section__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #e8f5e9;
  border-radius: 8px;
  flex-shrink: 0;
}
.rv-section__title {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
  flex: 1;
  margin: 0;
}
.rv-edit-btn {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #5dae61;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.rv-edit-btn:hover { background: #e8f5e9; }
.rv-section__body {
  padding: 14px 18px;
}

/* 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-title-input, .tp-day-desc-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Nunito', sans-serif;
  padding: 0;
  width: 100%;
}
.tp-day-title-input {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}
.tp-day-desc-input {
  font-size: 12px;
  color: #888;
}
.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 34px 9px 12px;
  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;
  right: 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;
  right: 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 */

/* ═══════════════════════════════════════════════════════════════
   FRIENDS PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero illustration ── */
.fr__hero-illustration {
  position: relative;
  width: 420px;
  height: 380px;
  flex-shrink: 0;
}

.fr__hero-blob {
  position: absolute;
  border-radius: 50%;
}
.fr__hero-blob--1 {
  width: 260px; height: 260px;
  background: radial-gradient(circle, #d4fc7933 0%, #96e6a133 100%);
  top: 20px; right: 30px;
}
.fr__hero-blob--2 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, #a8edea33 0%, #fed6e333 100%);
  bottom: 30px; left: 20px;
}

.fr__hero-card {
  position: absolute;
  background: #fff;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  min-width: 210px;
}
.fr__hero-card--1 { top: 30px;  left: 40px; }
.fr__hero-card--2 { top: 145px; right: 10px; }
.fr__hero-card--3 { bottom: 60px; left: 60px; }

.fr__hero-card-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: 13px;
  color: #333;
  flex-shrink: 0;
}
.fr__hero-card-name {
  font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: 13px; color: #1a1a1a;
}
.fr__hero-card-tags {
  font-family: 'Nunito', sans-serif;
  font-size: 11px; color: #888; margin-top: 2px;
}
.fr__hero-card-btn {
  margin-left: auto;
  background: #5dae61; color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 700; font-size: 11px;
  padding: 5px 10px; border-radius: 20px;
  white-space: nowrap;
}

.fr__hero-mutual {
  position: absolute;
  bottom: 30px; right: 20px;
  background: #fff;
  border: 1.5px solid #e0ddd4;
  border-radius: 20px;
  padding: 6px 12px;
  display: flex; align-items: center; gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px; font-weight: 700; color: #5dae61;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* ── 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; }