/**
 * Urbenorte — Idealista Valuation Embed Branding
 *
 * The embed is a Web Component with Shadow DOM, so site CSS (e.g. .btn--primary)
 * does NOT reach inside. However, **CSS custom properties cross the Shadow DOM**,
 * so we inherit the site's design tokens defined in variables.css:
 *   --c-primary  / --c-primary-light  / --c-primary-dark   (#1B6060 teal)
 *   --c-accent   / --c-accent-light   / --c-accent-dark    (#E8521A naranja)
 *   --c-text     / --c-text-light     / --c-text-muted
 *   --font-body  (DM Sans)            / --font-display     (Cormorant Garamond)
 *   --radius     / --shadow / --transition
 *
 * Properties Idealista exposes inside the Shadow DOM (Phase 0 recon):
 *   --widget-font-color, --widget-font-size
 *   --color-core-content-primary, --color-core-content-inverse  (TEXT colors — DO NOT override)
 *   --button-list-bg, --accessible-color
 */

/* ────────────────────────────────────────────────
   1. Embed widget — pass site tokens through
   ──────────────────────────────────────────────── */

idealista-data-valuation-common-embed-app {
  /* Idealista maps its primary buttons to --button-list-bg and its focus rings,
     highlights and active indicators to --accessible-color. */
  --button-list-bg: var(--c-primary-dark, #124848);
  --accessible-color: var(--c-primary-dark, #124848);
  --widget-font-color: var(--c-text, #2C2C2C);
  --widget-font-size: 15px;

  display: block;
  max-width: 720px;
  margin: var(--sp-8, 32px) auto;
  font-family: var(--font-body, 'DM Sans', system-ui, -apple-system, sans-serif);
}

/* ────────────────────────────────────────────────
   2. Wrapper container (Urbenorte side, not Shadow DOM)
   ──────────────────────────────────────────────── */

.urbenorte-valuation-wrapper {
  max-width: var(--container-narrow, 960px);
  margin: 0 auto;
  padding: var(--sp-6, 24px) var(--sp-4, 16px) var(--sp-20, 80px);
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  color: var(--c-text, #2C2C2C);
}

/* Hero ─────────────────────────────────────────── */

.urbenorte-valuation-hero {
  text-align: center;
  margin-bottom: var(--sp-8, 32px);
}

.urbenorte-valuation-hero h1 {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  color: var(--c-primary, #1B6060);
  font-size: clamp(2rem, 5vw, var(--fs-3xl, 2.5rem));
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 var(--sp-3, 12px);
  line-height: 1.15;
}

.urbenorte-valuation-hero p {
  color: var(--c-text-light, #6B6B6B);
  font-size: var(--fs-md, 1.125rem);
  max-width: 580px;
  margin: 0 auto var(--sp-4, 16px);
  line-height: 1.55;
}

.urbenorte-valuation-hero .badge-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232, 82, 26, 0.1);     /* tinted accent */
  color: var(--c-accent, #E8521A);
  padding: 6px 14px;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ────────────────────────────────────────────────
   3. Status messages (post-capture feedback)
   ──────────────────────────────────────────────── */

.urbenorte-valuation-status {
  display: none;
  max-width: 720px;
  margin: var(--sp-8, 32px) auto;
  padding: var(--sp-6, 24px) var(--sp-8, 32px);
  border-radius: var(--radius-lg, 12px);
  font-size: var(--fs-base, 1rem);
  line-height: 1.55;
}

.urbenorte-valuation-status.visible {
  display: block;
  animation: urbSlideUp 0.4s ease-out;
}

.urbenorte-valuation-status.success {
  background: linear-gradient(135deg, var(--c-primary-light, #2B8080) 0%, var(--c-primary, #1B6060) 100%);
  color: #fff;
  box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 0, 0, 0.08));
}

.urbenorte-valuation-status.success h3 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  margin: 0 0 var(--sp-2, 8px);
  font-size: var(--fs-xl, 1.5rem);
  font-weight: 600;
}

.urbenorte-valuation-status.error {
  background: rgba(196, 75, 75, 0.08);
  color: var(--c-error, #C44B4B);
  border-left: 4px solid var(--c-error, #C44B4B);
}

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

/* ────────────────────────────────────────────────
   4. Trust footer (below the embed)
   ──────────────────────────────────────────────── */

.urbenorte-valuation-trust {
  max-width: 720px;
  margin: var(--sp-12, 48px) auto 0;
  padding: var(--sp-6, 24px);
  background: var(--c-bg, #F5F0E8);
  border-radius: var(--radius-lg, 12px);
  text-align: center;
}

.urbenorte-valuation-trust h3 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  color: var(--c-primary, #1B6060);
  font-size: var(--fs-xl, 1.5rem);
  font-weight: 600;
  margin: 0 0 var(--sp-2, 8px);
}

.urbenorte-valuation-trust p {
  color: var(--c-text-light, #6B6B6B);
  font-size: var(--fs-base, 1rem);
  margin: 0 0 var(--sp-4, 16px);
  line-height: 1.55;
}

.urbenorte-valuation-trust .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2, 8px);
  background: var(--c-primary-dark, #124848);
  color: #fff;
  text-decoration: none;
  padding: var(--sp-3, 12px) var(--sp-6, 24px);
  border: 2px solid var(--c-primary-dark, #124848);
  border-radius: var(--radius-full, 9999px);
  font-weight: 500;
  font-size: var(--fs-xs, 0.75rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: all var(--transition, 200ms ease);
}

.urbenorte-valuation-trust .cta:hover {
  background: var(--c-primary, #1B6060);
  border-color: var(--c-primary, #1B6060);
  color: #fff;
}

/* ────────────────────────────────────────────────
   5. Responsive
   ──────────────────────────────────────────────── */

@media (max-width: 640px) {
  .urbenorte-valuation-hero h1 { font-size: 1.7rem; }
  .urbenorte-valuation-hero p  { font-size: 0.95rem; }
  idealista-data-valuation-common-embed-app { margin: 16px auto; }
}