/* ============================================================
   Airbnb-catalog skin for the concierge — overlay layer.
   Reuses IBG catalog tokens (rental.ibgtechnology.in/catalog).
   Loaded AFTER styles.css. Non-destructive: remove <link> to revert.
   ============================================================ */

:root {
  /* palette → IBG Airbnb catalog */
  --bg: #ffffff;
  --bg-deep: #f7f7f7;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --line: #ebebeb;
  --line-soft: #ebebeb;

  /* small uppercase labels → neutral grey (Airbnb) */
  /* Намеренный override --gold/--gold-bright → navy. Задевает элементы на светлом
     фоне (form labels, selected-box, input:focus border, tariff hover). Header-
     элементы (.nav-cta, .lang-button.active) получают прямые правила ниже —
     иначе navy-текст сливался бы с navy-фоном шапки. */
  --gold: #1c355e;
  --gold-bright: #1c355e;
  --gold-dark: #6a6a6a;

  --ivory: #222222;      /* primary text */
  --cream: #ffffff;      /* text on navy */
  --muted: #6a6a6a;
  --teal: #eef3fb;       /* image placeholder */
  --sapphire: #1c355e;
  --sapphire-deep: #16294a;
  --shadow: rgba(19, 31, 48, 0.12);
  --radius: 14px;
}

body { background: var(--bg); color: var(--ivory); }

/* ---- headings: dark on light sections, light on dark sections ---- */
.section h2,
.eyebrow { color: var(--ivory); }

/* dark sections (hero photo + experiences band) keep light text */
.hero h1,
.hero-copy { color: #ffffff; }
.section.experiences h2,
.experiences .experience-copy h2 { color: #ffffff; }
.section.experiences .experience-copy p { color: rgba(255, 255, 255, 0.84); }

/* ---- category strip → Airbnb pill tabs ---- */
.category-button {
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: #fff;
  color: #222;
  font-weight: 600;
}
.category-button.active,
.category-button:hover {
  background: #1c355e;
  border-color: #1c355e;
  color: #fff;
}

/* ---- service cards → Airbnb look ---- */
.service-card,
.mini-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(19, 31, 48, 0.08);
}
.service-card:hover,
.mini-card:hover {
  border-color: #dbe6f5;
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(19, 31, 48, 0.14);
}

.service-image { aspect-ratio: 20 / 19; }
.service-card:hover .service-image > img { transform: scale(1.045); }

/* left-aligned, clean typography like the catalog */
.service-card h3 {
  font-weight: 700;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: #222;
}
/* центр как на проде = ровно, симметрично */
.service-card p,
.mini-card p,
.mini-card > p {
  text-align: center;
  min-height: 0;
  color: #3a3a3a;           /* темнее — было слишком бледно-серо */
  font-size: 0.92rem;
  margin-inline: 1.35rem;   /* было прижато к краю (1px) → ровный симметричный отступ */
  padding-inline: 0;
}
.service-card p { margin-inline: 0; padding-inline: 1.2rem; }
.mini-card h3,
.service-card h3 { text-align: center; }
.mini-card .service-topline,
.service-card .service-topline { justify-content: center; }
/* воздух: между картинкой и текстом + низ карточки */
.mini-card { padding-bottom: 1.35rem; }
.mini-card > div:not(.mini-image):first-of-type { margin-top: 1.1rem; }
.service-topline { font-weight: 600; letter-spacing: 0.02em; }
.price { font-weight: 700; }

/* status pill → neutral white chip (Airbnb) */
.status-pill {
  border: none;
  color: #222;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  backdrop-filter: none;
}

/* ---- buttons ---- */
.select-service {
  border: 1px solid #1c355e;
  border-radius: 10px;
  color: #1c355e;
  font-weight: 600;
}
.select-service.selected {
  background: #1c355e;
  border-color: #1c355e;
  color: #fff;
}

/* WhatsApp "Contact the manager" → green accent */
.contact-manager {
  flex: 0 1 auto;
  min-height: 2.45rem;
  border: none;
  border-radius: 10px;
  padding: 0.45rem 0.9rem;
  background: #25d366;
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;      /* не переносить в 2 строки */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  line-height: 1.15;
  transition: filter 150ms ease, transform 150ms ease;
}
.contact-manager::before { content: "💬"; }
.contact-manager:hover { filter: brightness(0.95); transform: translateY(-1px); }

/* primary CTAs → navy */
.button-primary {
  background: #1c355e;
  border-color: #1c355e;
  color: #fff;
}
.button-primary:hover { background: #16294a; color: #fff; }

/* ============================================================
   ЗОЛОТО — премиум-акцент. Навы = структура, золото = детали.
   ============================================================ */
:root { --gold-accent: #b8902f; --gold-deep: #9e7330; --gold-soft: #e3c98a; }

/* категория-лейбл + цена + бренд-марка → золото */
.service-topline { color: var(--gold-deep); }
.mini-card .service-brand,
.service-card .service-brand { color: var(--gold-deep); }
.price { color: var(--gold-deep); }

/* золотая hairline-рамка на hover карточки */
.service-card:hover,
.mini-card:hover { border-color: var(--gold-soft); box-shadow: 0 14px 36px rgba(158,115,48,0.16); }

/* тонкая золотая линия-разделитель над строкой действия */
.service-actions { border-top: 1px solid rgba(184,144,47,0.28); }

/* «Выбрать» — навы, но на hover теплеет в золото */
.select-service:hover { border-color: var(--gold-accent); color: var(--gold-deep); }

/* золотой штрих под заголовками секций (на светлых секциях).
   h2 вложены в .section-heading / .experience-copy / .request-copy —
   прямой потомок .section > h2 не существует, поэтому таргетим реальные обёртки. */
.section-heading h2::after,
.experience-copy h2::after,
.request-copy h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--gold-accent), var(--gold-soft));
  border-radius: 2px;
}
/* на тёмной секции experiences центрируем штрих под центрированным заголовком */
.experience-copy h2::after { margin-inline: auto; }

/* акцент-лейбл IBG в шапке — золотая рамка */
.brand-mark { border-color: var(--gold-accent); color: var(--gold-accent); }

/* ---- header CTA + язык: восстановить видимость поверх navy-override --gold-bright ----
   --gold-bright переопределён в navy (:root выше), из-за чего .nav-cta стал
   navy-текстом на navy-шапке, а .lang-button.active — navy-на-navy. Прямые правила. */
.nav-cta { color: var(--gold-accent); }
.nav-cta:hover { color: #fff; }
.lang-button.active,
.lang-button:hover { background: var(--gold-accent); color: #fff; }