/**
 * Lore Contact — Public CSS
 * Valores extraídos de index.css y tailwind.config.ts del proyecto React.
 * SIN aproximaciones — conversiones exactas de clases Tailwind.
 *
 * Namespace: .lc-* evita conflictos con Elementor y WooCommerce.
 * @package LoreContact @version 1.0.0
 */

/* ── Design tokens (de index.css del React) ──────────────────────────────── */
.lc-page {
  --lc-bg:            hsl(40, 30%, 97%);
  --lc-card:          hsl(40, 25%, 95%);
  --lc-foreground:    hsl(150, 20%, 15%);
  --lc-muted:         hsl(40, 15%, 92%);
  --lc-muted-fg:      hsl(150, 10%, 45%);
  --lc-border:        hsl(40, 20%, 88%);
  --lc-input:         hsl(40, 20%, 88%);
  --lc-primary:       hsl(179, 35%, 67%);
  --lc-primary-fg:    hsl(0, 0%, 100%);
  --lc-secondary:     hsl(35, 30%, 88%);
  --lc-conseil:       hsl(345, 95%, 44%);
  --lc-conseil-hv:    hsl(345, 95%, 38%);
  --lc-conseil-fg:    hsl(0, 0%, 100%);
  --lc-destructive:   hsl(0, 84.2%, 60.2%);
  --lc-destructive-fg:hsl(210, 40%, 98%);
  --lc-radius:        0.5rem;
  --lc-font-display:  "Playfair Display", serif;
  --lc-font-sans:     "DM Sans", sans-serif;
}

/* ── Reset localizado ────────────────────────────────────────────────────── */
.lc-page button, .lc-page input, .lc-page textarea, .lc-page select {
  font-family: var(--lc-font-sans) !important;
  box-sizing: border-box;
}

/* ── Estructura principal ────────────────────────────────────────────────── */
/* React: <main className="min-h-screen relative" style="backgroundImage:url(...)..."> */
.lc-page {
  min-height: 100vh;
  position: relative;
  background-image: var(--lc-bg-image);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  font-family: var(--lc-font-sans);
}
/* React: <div className="absolute inset-0 bg-background/60" /> */
.lc-overlay {
  position: absolute;
  inset: 0;
  background-color: hsla(40, 30%, 97%, 0.6);
  pointer-events: none;
  z-index: 0;
}
/* React: <section className="py-16 md:py-24 relative z-10"> */
.lc-section {
  padding: 4rem 0;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .lc-section { padding: 6rem 0; }
}
/* React: <div className="container max-w-2xl"> — 42rem = 672px */
.lc-container {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Hero card ───────────────────────────────────────────────────────────── */
/* React: bg-background/70 backdrop-blur-sm rounded-2xl p-8 md:p-10 text-center mb-12 */
.lc-hero-card {
  text-align: center;
  margin-bottom: 3rem;
  background-color: hsla(40, 30%, 97%, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 1rem;
  padding: 2rem;
}
@media (min-width: 768px) { .lc-hero-card { padding: 2.5rem; } }

/* React: font-display text-4xl md:text-5xl font-bold text-conseil mb-4 */
.lc-page-title {
  font-family: var(--lc-font-display) !important;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--lc-conseil) !important;
  margin: 0 0 1rem;
  line-height: 1.2;
  text-shadow: none !important;
}
@media (min-width: 768px) { .lc-page-title { font-size: 3rem; } }

/* React: text-muted-foreground text-lg max-w-xl mx-auto */
.lc-page-subtitle {
  color: var(--lc-muted-fg) !important;
  font-size: 1.125rem;
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.7;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── Form card ───────────────────────────────────────────────────────────── */
/* React: bg-card border border-border rounded-2xl p-8 md:p-10 space-y-6 */
.lc-form-card {
  background-color: var(--lc-card);
  border: 1px solid var(--lc-border);
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 768px) { .lc-form-card { padding: 2.5rem; } }

/* ── Labels ──────────────────────────────────────────────────────────────── */
.lc-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lc-foreground) !important;
  margin-bottom: 0.5rem;
  font-family: var(--lc-font-sans);
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.lc-field { display: flex; flex-direction: column; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.lc-input, .lc-textarea {
  width: 100% !important;
  border-radius: var(--lc-radius) !important;
  border: 1px solid var(--lc-input) !important;
  background-color: transparent !important;
  color: var(--lc-foreground) !important;
  font-family: var(--lc-font-sans) !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box !important;
  box-shadow: none !important;
  font-size: 16px !important; /* iOS zoom fix */
}
@media (min-width: 768px) {
  .lc-input, .lc-textarea { font-size: 0.875rem !important; }
}
.lc-input {
  height: 2.5rem !important;
  padding: 0 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  line-height: normal !important;
}
.lc-input:focus, .lc-textarea:focus {
  border-color: var(--lc-primary);
  box-shadow: 0 0 0 2px hsla(179, 35%, 67%, 0.2);
}
.lc-input.is-error, .lc-textarea.is-error { border-color: var(--lc-destructive); }
.lc-error-msg { font-size: 0.875rem; color: var(--lc-destructive); margin-top: 0.25rem; display: none; }
.lc-error-msg.visible { display: block; }
.lc-textarea { min-height: 150px; padding: 0.5rem 0.75rem; resize: vertical; }
.lc-input.lc-uppercase { text-transform: uppercase; }

/* ── Grid 2 cols ─────────────────────────────────────────────────────────── */
/* React: grid grid-cols-1 md:grid-cols-2 gap-6 */
.lc-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .lc-grid-2 { grid-template-columns: 1fr 1fr; } }
.lc-grid-2-sm { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .lc-grid-2-sm { grid-template-columns: 1fr 1fr; } }

/* ── Radio buttons (Civilité, Sexe) ──────────────────────────────────────── */
/* shadcn RadioGroup */
.lc-radio-group { display: flex; gap: 1.5rem; align-items: center; margin-top: 0.5rem; }
.lc-radio-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.lc-radio-btn {
  /* Elementor colapsa width/height de buttons — !important en todo lo dimensional */
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  border-radius: 50% !important;
  border: 2px solid var(--lc-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  outline: none !important;
  box-shadow: none !important;
  line-height: 1 !important;
}
.lc-radio-btn.checked { border-color: var(--lc-primary) !important; }
.lc-radio-dot {
  width: 0.5rem !important;
  height: 0.5rem !important;
  min-width: 0.5rem !important;
  min-height: 0.5rem !important;
  border-radius: 50% !important;
  background-color: var(--lc-primary) !important;
  display: none;
  flex-shrink: 0;
}
.lc-radio-btn.checked .lc-radio-dot { display: block !important; }
.lc-radio-lbl { font-size: 0.875rem; font-weight: 400; color: var(--lc-foreground); cursor: pointer; font-family: var(--lc-font-sans); }

/* ── Animal selector ─────────────────────────────────────────────────────── */
/* React: grid grid-cols-3 gap-6 */
.lc-animal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.lc-animal-btn {
  display: flex !important; flex-direction: column; align-items: center; gap: 0.75rem;
  transition: transform 0.2s ease; cursor: pointer;
  background: none !important; border: none !important;
  padding: 0 !important; border-radius: 0 !important;
  min-height: auto !important; min-width: auto !important; appearance: none;
}
.lc-animal-btn:hover:not(.selected) { transform: scale(1.03); }
.lc-animal-btn.selected { transform: scale(1.05); }

/* React: w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden */
.lc-animal-circle {
  width: 6rem; height: 6rem;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 0.2s ease;
}
@media (min-width: 768px) { .lc-animal-circle { width: 7rem; height: 7rem; } }
/* React: ring-4 ring-primary shadow-lg cuando selected */
.lc-animal-btn.selected .lc-animal-circle {
  box-shadow:
    0 0 0 4px var(--lc-primary),
    0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}
.lc-animal-btn:hover:not(.selected) .lc-animal-circle {
  box-shadow: 0 0 0 2px hsla(150, 10%, 45%, 0.3);
}
.lc-animal-img, .lc-animal-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lc-animal-video { display: none; }
.lc-animal-btn.selected .lc-animal-img  { display: none; }
.lc-animal-btn.selected .lc-animal-video { display: block; }
.lc-animal-lbl {
  font-size: 0.875rem; font-weight: 500;
  color: var(--lc-foreground); transition: color 0.2s;
  font-family: var(--lc-font-sans);
}
.lc-animal-btn.selected .lc-animal-lbl { color: var(--lc-primary); }

/* ── Fiche animal (condicional) ──────────────────────────────────────────── */
/* React: space-y-4 p-6 rounded-xl border border-border bg-muted/30 animate-in fade-in-0 slide-in-from-top-2 duration-300 */
.lc-fiche {
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--lc-border);
  background-color: hsla(40, 15%, 92%, 0.3);
}
.lc-fiche.visible {
  display: flex;
  animation: lcFicheIn 0.3s ease forwards;
}
@keyframes lcFicheIn {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}
.lc-fiche-title { font-size: 0.875rem; font-weight: 500; color: var(--lc-foreground); margin: 0; font-family: var(--lc-font-sans); }

/* ── PhoneInput custom ───────────────────────────────────────────────────── */
.lc-phone-wrap { display: flex; position: relative; }
.lc-phone-country { position: relative; flex-shrink: 0; }
.lc-phone-country-btn {
  display: flex !important; align-items: center; gap: 0.25rem;
  height: 2.5rem; padding: 0 0.75rem !important;
  border-radius: var(--lc-radius) 0 0 var(--lc-radius);
  border: 1px solid var(--lc-input); border-right: none;
  background-color: var(--lc-bg) !important;
  font-size: 0.75rem; color: var(--lc-muted-fg) !important;
  cursor: pointer; white-space: nowrap;
  min-height: auto !important; min-width: auto !important; appearance: none;
  transition: background-color 0.15s;
}
.lc-phone-country-btn:hover { background-color: hsla(35,30%,88%,0.5) !important; }
.lc-phone-flag { font-size: 1rem; line-height: 1; }
.lc-phone-code { font-size: 0.75rem; color: var(--lc-muted-fg); }
.lc-phone-chevron { width: 0.75rem; height: 0.75rem; opacity: 0.6; flex-shrink: 0; }
.lc-phone-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  width: 14rem; background-color: var(--lc-bg);
  border: 1px solid var(--lc-border); border-radius: var(--lc-radius);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  z-index: 50; max-height: 15rem; overflow-y: auto;
}
.lc-phone-dropdown.open { display: block; }
.lc-phone-option {
  display: flex !important; align-items: center; gap: 0.75rem;
  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; text-align: left;
  background: none !important; border: none !important; border-radius: 0 !important;
  color: var(--lc-foreground) !important; cursor: pointer;
  min-height: auto !important; min-width: auto !important; appearance: none;
  transition: background-color 0.1s;
}
.lc-phone-option:hover   { background-color: hsla(35,30%,88%,0.5) !important; }
.lc-phone-option.active  { background-color: hsl(35,30%,88%) !important; }
.lc-phone-option-code    { margin-left: auto; color: var(--lc-muted-fg); font-size: 0.75rem; }
.lc-phone-number { flex: 1; border-radius: 0 var(--lc-radius) var(--lc-radius) 0 !important; }
.lc-phone-hint   { font-size: 0.75rem; color: var(--lc-muted-fg); margin-top: 0.25rem; display: block; }

/* ── Photo upload ────────────────────────────────────────────────────────── */
.lc-photo-btn {
  display: inline-flex !important; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem !important;
  border-radius: 0.75rem !important; border: 2px dashed var(--lc-border) !important;
  background: transparent !important; color: var(--lc-muted-fg) !important;
  font-size: 0.875rem; cursor: pointer;
  min-height: auto !important; appearance: none;
  transition: border-color 0.2s, background-color 0.2s;
}
.lc-photo-btn:hover {
  border-color: hsla(179,35%,67%,0.5) !important;
  background-color: hsla(40,15%,92%,0.5) !important;
}
.lc-photo-hint { font-size: 0.75rem; color: var(--lc-muted-fg); margin: 0.25rem 0 0; display: block; }
.lc-photo-preview { display: none; position: relative; width: 8rem; height: 8rem; }
.lc-photo-preview.visible { display: inline-block; }
.lc-photo-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.75rem; border: 1px solid var(--lc-border); display: block; }
.lc-photo-remove {
  position: absolute !important; top: -0.5rem; right: -0.5rem;
  background-color: var(--lc-destructive) !important;
  color: var(--lc-destructive-fg) !important;
  border-radius: 50% !important; padding: 0.25rem !important;
  display: flex; align-items: center; justify-content: center;
  border: none !important; cursor: pointer;
  min-height: auto !important; min-width: auto !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: opacity 0.2s;
}
.lc-photo-remove:hover { opacity: 0.8; }

/* ── Submit button ───────────────────────────────────────────────────────── */
/* React: w-full bg-conseil hover:bg-conseil-hover text-conseil-foreground size="lg" */
.lc-btn-submit {
  display: flex !important; width: 100%; align-items: center; justify-content: center;
  gap: 0.5rem; height: 2.75rem !important;
  padding: 0 2rem !important; border-radius: var(--lc-radius) !important;
  background-color: var(--lc-conseil) !important; color: var(--lc-conseil-fg) !important;
  font-size: 1rem !important; font-weight: 500 !important; border: none !important;
  cursor: pointer !important; font-family: var(--lc-font-sans) !important;
  text-shadow: none !important; min-height: auto !important;
  transition: background-color 0.2s !important;
}
.lc-btn-submit:hover:not(:disabled) { background-color: var(--lc-conseil-hv) !important; }
.lc-btn-submit:disabled { opacity: 0.7; cursor: not-allowed !important; }
.lc-btn-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.lc-spinner { animation: lcSpin 1s linear infinite; }
@keyframes lcSpin { to { transform: rotate(360deg); } }

/* ── Success state ───────────────────────────────────────────────────────── */
/* React: bg-card border border-border rounded-2xl p-10 text-center */
.lc-success {
  display: none; background-color: var(--lc-card);
  border: 1px solid var(--lc-border); border-radius: 1rem;
  padding: 2.5rem; text-align: center;
}
.lc-success.visible { display: block; }
.lc-success-icon { width: 4rem; height: 4rem; color: var(--lc-primary); margin: 0 auto 1rem; display: block; }
.lc-success-title { font-family: var(--lc-font-display); font-size: 1.5rem; font-weight: 600; color: var(--lc-foreground); margin: 0 0 0.75rem; text-shadow: none; }
.lc-success-desc { color: var(--lc-muted-fg); margin: 0 0 0.75rem; line-height: 1.6; }
/* React: text-sm text-primary bg-primary/10 rounded-lg p-4 */
.lc-success-account {
  display: none; font-size: 0.875rem; color: var(--lc-primary);
  background-color: hsla(179,35%,67%,0.1);
  border-radius: var(--lc-radius); padding: 1rem; margin: 0.75rem 0; line-height: 1.6;
}
.lc-success-account.visible { display: block; }
/* React: variant="outline" Button */
.lc-send-another {
  display: inline-flex !important; align-items: center; gap: 0.5rem;
  padding: 0 1.5rem !important; height: 2.5rem !important;
  border-radius: var(--lc-radius) !important; border: 1px solid var(--lc-border) !important;
  background: transparent !important; color: var(--lc-foreground) !important;
  font-size: 0.875rem; cursor: pointer; margin-top: 1rem;
  font-family: var(--lc-font-sans) !important; min-height: auto !important;
  transition: background-color 0.2s !important;
}
.lc-send-another:hover { background-color: var(--lc-secondary) !important; }

/* ── Honeypot ────────────────────────────────────────────────────────────── */
.lc-honeypot { position: absolute; opacity: 0; z-index: -10; height: 0; overflow: hidden; pointer-events: none; }


/* ── Escape del contenedor del Hello theme ───────────────────────────────── */
/*
 * Hello Elementor envuelve el contenido de los page templates en contenedores
 * con max-width propios. Estas reglas rompen esa restricción para que .lc-page
 * ocupe el 100% del viewport, igual que en la app React.
 *
 * body.page-template-page-contact se inyecta automáticamente por WordPress
 * cuando el template asignado es page-contact.php
 */
body.page-template-page-contact #primary,
body.page-template-page-contact #content,
body.page-template-page-contact .site-main,
body.page-template-page-contact main.site-main,
body.page-template-page-contact .entry-content,
body.page-template-page-contact .page-content,
body.page-template-page-contact article.page {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Ruptura full-width: .lc-page sale del flujo del contenedor padre */
.lc-page {
  position: relative;
  width: 100vw !important;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}