/* forms.css — Estética de los formularios de HivePress (login, registro, alta, cuenta):
   tarjetas, inputs, etiquetas, botones y aviso de alta sin sesión. */

/* Botones de HivePress con la marca (texto blanco, no rojo) */
.hp-form__button, button[type="submit"].hp-field__button, .hp-listing__action--submit a,
button.hp-form__button, .hp-form input[type="submit"], .hp-form button[type="submit"]{
  background:var(--uv-blue)!important;border-color:var(--uv-blue)!important;color:#fff!important;
  border-radius:999px!important;font-family:Montserrat,sans-serif!important;font-weight:800!important;}
.hp-form__button:hover, button.hp-form__button:hover{background:var(--uv-navy)!important;color:#fff!important;}
.hp-form__button *, .hp-form button[type="submit"] *{color:#fff!important;}

/* Botón de subir imágenes con la marca (no rojo) */
.hp-field--attachment-upload .hp-field__button, .hp-field--attachment-upload button,
button.hp-file__select, .hp-attachment-upload__button, [data-component="file-upload"] button{
  color:#2563EB!important; border:1.5px solid #2563EB!important; background:#fff!important;
  border-radius:999px!important; font-family:Montserrat,sans-serif!important; font-weight:800!important;}
.hp-field--attachment-upload .hp-field__button *{color:#2563EB!important;}

/* Formularios de cuenta/login/registro/recuperar → tarjeta centrada */
.hp-form--user-login, .hp-form--user-register, .hp-form--user-password-request, .hp-form--user-password-reset{
  max-width:460px; margin:0 auto; background:#fff; border:1px solid #E9EEF5; border-radius:20px;
  padding:30px 28px; box-shadow:0 14px 44px rgba(15,23,42,.08);
}
.hp-form--user-register.hp-form--narrow{max-width:460px;margin:0 auto;}
.hp-page__title, h1.hp-page__title{ font-family:Montserrat,sans-serif!important; font-weight:800!important; color:#0F172A; text-align:center; margin-bottom:20px; }

/* Inputs con la marca */
.hp-field input[type=text], .hp-field input[type=email], .hp-field input[type=password], .hp-field input[type=tel],
.hp-field input[type=url], .hp-field input[type=number], .hp-field input[type=search], .hp-field textarea,
.hp-field select, .ts-control{
  border:1px solid #CBD5E1!important; border-radius:12px!important; padding:11px 14px!important;
  font:500 15px/1.4 Inter,sans-serif!important; background:#fff!important; color:#0F172A!important; width:100%;
}
.hp-field input:focus, .hp-field textarea:focus, .hp-field select:focus, .ts-control.focus{
  border-color:#2563EB!important; box-shadow:0 0 0 3px rgba(37,99,235,.15)!important; outline:none!important;
}
.hp-field__label, .hp-field label{ font:700 14px/1.3 Inter,sans-serif!important; color:#0F172A!important; }
.hp-field__description{ font:500 13px/1.4 Inter,sans-serif; color:#64748B; }

/* Formulario de alta (submit) → tarjeta ancha */
.hp-listing-submit__form .hp-form, [data-model="listing"] .hp-form, .hp-form--listing-update{
  max-width:720px; margin:0 auto; background:#fff; border:1px solid #E9EEF5; border-radius:20px;
  padding:30px 28px; box-shadow:0 10px 34px rgba(15,23,42,.06);
}

/* Tom Select con la marca */
.ts-dropdown{ border:1px solid #CBD5E1; border-radius:12px; box-shadow:0 16px 40px rgba(15,23,42,.14); font:500 15px Inter,sans-serif; }
.ts-dropdown .active{ background:#EFF6FF; color:#2563EB; }
/* Cabeceras de las sugerencias iniciales del buscador de localidad («Con profesionales»,
   «Comunidades autónomas»); Tom Select las pinta sin estilo propio. */
.ts-dropdown .optgroup-header{
  font:700 12px/1.3 Inter,sans-serif; letter-spacing:.04em; text-transform:uppercase;
  color:#64748B; background:#F8FAFC; padding:8px 12px; border-bottom:1px solid #EEF2F7;
}
.ts-dropdown .optgroup + .optgroup .optgroup-header{ border-top:1px solid #EEF2F7; }

/* Aviso "necesitas una cuenta para dar de alta" (en login con ?redirect=submit-listing) */
.uv-login-notice{max-width:520px;margin:0 auto 18px;background:#EFF6FF;border:1px solid #BFDBFE;color:#1E3A8A;
  border-radius:14px;padding:14px 18px;font:600 15px/1.5 Inter,sans-serif;display:flex;gap:10px;align-items:flex-start;}
.uv-login-notice i{color:#2563EB;margin-top:2px;}

/* ---------------------------------------------------------------------------
   Selector de prefijo telefónico (intl-tel-input)
   ---------------------------------------------------------------------------
   El reset de hello-elementor pinta TODOS los <button> en granate (#c36): borde, texto y un
   `padding:.5rem 1rem` que infla el control. `base.css` del tema ya neutraliza ese granate, pero solo
   para `button:not([class])` — a propósito, para no pisar los componentes que traen su propio estilo.
   El selector de país de intl-tel-input **sí lleva clase** (`.iti__selected-country`), así que se
   quedaba fuera y salía granate y desproporcionado dentro del campo de teléfono.

   Aquí se le devuelve la neutralidad que espera la librería y se le da la tipografía y los colores de
   la marca. Va en el CSS del plugin y no en el del tema porque el campo es de un formulario de
   HivePress, y porque el plugin se encola DESPUÉS (prioridad 25 frente a 20): si no, el reset del
   padre ganaría los empates.
   --------------------------------------------------------------------------- */

/* `.iti__selected-flag` es el nombre que usaban las versiones anteriores de la librería: se mantiene
   por si HivePress vuelve atrás en alguna actualización. */
.iti .iti__selected-country,
.iti .iti__selected-flag{
  background:transparent; border:0; border-radius:0;
  padding:0 6px 0 10px; margin:0; width:auto;
  font:500 15px Inter,sans-serif; color:#0F172A;
  transition:background-color .15s;
  /* El reset del tema padre deja los <button> en `inline-block`, y la librería cuelga del botón dos
     bloques (bandera+flecha y prefijo) contando con que sea flex: sin esto, el «+34» se caía a una
     línea debajo del campo en lugar de ir al lado de la bandera. */
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.iti .iti__selected-country-primary{ display:flex; align-items:center; gap:4px; }

.iti .iti__selected-country:hover,
.iti .iti__selected-country:focus,
.iti .iti__selected-flag:hover,
.iti .iti__selected-flag:focus{
  background:#F1F5F9; color:#0F172A;
}

.iti .iti__selected-country:focus-visible{
  outline:2px solid #2563EB; outline-offset:-2px;
}

/* El prefijo (+34) y la flechita, en gris de apoyo: el dato que importa es el número. */
.iti .iti__selected-dial-code{ color:#475569; font-weight:600; }
.iti .iti__arrow{ border-top-color:#94A3B8; }
.iti .iti__arrow--up{ border-bottom-color:#94A3B8; }

/* Lista de países: misma caja que el resto de desplegables de la web (ver Tom Select arriba). */
.iti .iti__dropdown-content{
  border:1px solid #CBD5E1; border-radius:12px;
  box-shadow:0 16px 40px rgba(15,23,42,.14);
  font:500 15px Inter,sans-serif; color:#0F172A;
}
.iti .iti__country.iti__highlight{ background:#EFF6FF; color:#2563EB; }
.iti .iti__dial-code{ color:#64748B; }

/* El buscador de la lista es un <input> suelto: el reset del padre le pone borde y ancho completo. */
.iti .iti__search-input{
  border:0; border-bottom:1px solid #E2E8F0; border-radius:0;
  padding:10px 12px; font:500 15px Inter,sans-serif;
}
.iti .iti__search-input:focus{ border-bottom-color:#2563EB; box-shadow:none; }

/* La «×» que vacía la búsqueda es otro <button> con clase, así que también se quedaba granate; y su
   icono es un SVG que pinta con `currentColor`, de modo que basta con el color del botón. */
.iti .iti__search-clear{
  background:transparent; border:0; border-radius:999px; padding:4px;
  color:#94A3B8; transition:color .15s, background-color .15s;
}
.iti .iti__search-clear:hover,
.iti .iti__search-clear:focus{ background:#F1F5F9; color:#475569; }

/* ---------------------------------------------------------------------------
   Botones de terceros dentro de los formularios (el granate de hello-elementor)
   ---------------------------------------------------------------------------
   Misma causa que el selector de prefijo de arriba: el reset del tema padre pinta TODO `button` en
   granate (#c36) y la regla que lo neutraliza en `base.css` solo cubre `button:not([class])`, a
   propósito, para no pisar los componentes que traen su propio estilo. Los botones que sí llevan
   clase pero NO tienen estilo propio —los de HivePress y los de TinyMCE— se quedaban en medio.

   Auditados en el navegador (no a ojo) recorriendo cada página y buscando `rgb(204,51,102)` en
   texto, borde y fondo: en toda la web solo quedaban estos dos, los dos en el alta.

   Se les da color de marca, pero **sin tocar el fondo en hover**: esa fue justamente la trampa de la
   versión anterior de la regla del tema, que pintaba fondo azul sobre componentes que ya tenían el
   texto azul y los dejaba ilegibles.
   --------------------------------------------------------------------------- */

/* «Añadir un elemento»: el botón con el que el anunciante añade preguntas a su FAQ. */
.hp-form .hp-field--button,
.hp-form button.button{
  background:#fff; border:1px solid #CBD5E1; border-radius:999px;
  color:#334155; font:700 14px Inter,sans-serif; padding:9px 18px;
  transition:background-color .15s, border-color .15s, color .15s;
}
.hp-form .hp-field--button:hover,
.hp-form .hp-field--button:focus,
.hp-form button.button:hover,
.hp-form button.button:focus{
  background:#EFF6FF; border-color:#2563EB; color:#2563EB;
}
/* HivePress mete el rótulo en un <span> dentro del botón, y el reset lo alcanza por herencia. */
.hp-form .hp-field--button span,
.hp-form button.button span{ color:inherit; border-color:inherit; }

/* Barra de herramientas del editor de la descripción (TinyMCE): son botones sin estilo propio. */
.mce-container button,
.mce-container .mce-btn,
.mce-container .mce-open{
  border-color:transparent; color:#334155; background-color:transparent;
}
.mce-container .mce-btn:hover,
.mce-container button:hover{ background-color:#F1F5F9; border-color:#CBD5E1; color:#0F172A; }

/* ---------------------------------------------------------------------------
   Paso «Método de pago» del alta
   ---------------------------------------------------------------------------
   Se pide una tarjeta en mitad de un alta que es gratuita: si el aviso de que hoy no se cobra nada no
   es lo PRIMERO y lo más visible de la pantalla, el anunciante se va. Por eso va arriba, en verde y
   con más peso visual que los propios planes.
   --------------------------------------------------------------------------- */

.ctop-card-step{ max-width:640px; margin:0 auto; }

.ctop-card-step__aviso{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 20px; margin-bottom:26px;
  border:1px solid #BBF7D0; border-radius:14px; background:#F0FDF4;
}
.ctop-card-step__aviso > i{ color:#16A34A; font-size:20px; margin-top:2px; flex:0 0 auto; }
.ctop-card-step__aviso strong{ display:block; margin-bottom:5px; font:800 16px/1.35 Montserrat,sans-serif; color:#14532D; }
.ctop-card-step__aviso p{ margin:0; font:500 14.5px/1.6 Inter,sans-serif; color:#3F6212; }

.ctop-card-step__titulo{
  margin:0 0 14px; font:800 18px/1.3 Montserrat,sans-serif; color:#0F172A;
}

.ctop-card-step__planes{ display:flex; gap:14px; margin-bottom:26px; }

.ctop-plan{
  flex:1 1 0; min-width:0; position:relative; cursor:pointer;
  border:2px solid #E2E8F0; border-radius:16px; padding:18px 18px 16px; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.ctop-plan:hover{ border-color:#CBD5E1; }
.ctop-plan.is-on{ border-color:#2563EB; box-shadow:0 0 0 4px rgba(37,99,235,.12); }

/* El radio real se mantiene accesible (foco y teclado), solo se saca de la vista. */
.ctop-plan input{ position:absolute; opacity:0; width:1px; height:1px; }
.ctop-plan:focus-within{ border-color:#2563EB; box-shadow:0 0 0 4px rgba(37,99,235,.12); }

.ctop-plan__cuerpo{ display:flex; flex-direction:column; gap:6px; }
.ctop-plan__nombre{ font:800 15px Montserrat,sans-serif; color:#0F172A; }

.ctop-plan__ahorro{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px;
  background:#FEF3C7; color:#B45309; font:700 11.5px Inter,sans-serif; font-style:normal;
}

.ctop-plan__precio{ font:800 26px/1 Montserrat,sans-serif; color:#2563EB; }
.ctop-plan__precio small{ font:600 13px Inter,sans-serif; color:#64748B; margin-left:3px; }
.ctop-plan__nota{ font:500 12.5px/1.5 Inter,sans-serif; color:#64748B; }

.ctop-card-step__pide{
  text-align:center; padding:18px; border:1px dashed #CBD5E1; border-radius:14px;
  font:600 14.5px Inter,sans-serif; color:#64748B;
}

.ctop-card-step.is-cargando{ opacity:.55; pointer-events:none; }

/* La caja de WooCommerce va incrustada: se le quitan sus cabeceras propias, que aquí sobran. */
.ctop-card-step__caja .woocommerce-billing-fields > h3,
.ctop-card-step__caja #order_review_heading{ display:none; }
.ctop-card-step__caja .woocommerce{ margin:0; }

@media (max-width:600px){
  .ctop-card-step__planes{ flex-direction:column; }
}

/* Botones de los paquetes de HivePress: otro `<button class="button">` de tercero que se quedaba
   granate. Solo se ven en el paso de planes del alta, que la auditoría anterior no alcanzaba porque
   el flujo redirige antes si el anuncio no está completo. */
.hp-listing-package__button,
.hp-listing-package .button{
  background:#fff; border:1px solid #CBD5E1; border-radius:999px;
  color:#334155; font:700 14px Inter,sans-serif; padding:10px 18px;
  transition:background-color .15s, border-color .15s, color .15s;
}
.hp-listing-package__button:hover:not(:disabled),
.hp-listing-package .button:hover:not(:disabled){
  background:#EFF6FF; border-color:#2563EB; color:#2563EB;
}
.hp-listing-package__button.button--primary{
  background:#2563EB; border-color:#2563EB; color:#fff;
}
.hp-listing-package__button.button--primary:hover{ background:#1E3A8A; border-color:#1E3A8A; color:#fff; }
.hp-listing-package__button:disabled{ background:#F1F5F9; border-color:#E2E8F0; color:#94A3B8; }

/* Contador de caracteres de la descripción (ver includes/description-editor.php). */
.ctop-chars{
  margin-top:6px; text-align:right;
  font:600 12.5px Inter,sans-serif; color:#94A3B8;
}
.ctop-chars.is-corto{ color:#B45309; }
.ctop-chars.is-largo{ color:#DC2626; }

/* ---------------------------------------------------------------------------
   Cuenta de cliente: fuera las llamadas a dar de alta
   ---------------------------------------------------------------------------
   Los botones de la cabecera y el pie los pinta Elementor desde la base de datos, así que no hay
   filtro de PHP que los alcance: se ocultan por la clase que `customer-ui.php` pone en el body.
   El cierre de verdad está en el servidor (las rutas de anunciante redirigen); esto solo evita
   ofrecerle algo que no va a poder usar.
   --------------------------------------------------------------------------- */

body.ctop-cliente .uv-alta-btn,
body.ctop-cliente .uv-quote,
/* El menú móvil NO reutiliza el botón de la cabecera: `mobile-menu.js` se fabrica el suyo dentro del
   desplegable, con otra clase. Sin esta línea el cliente lo seguía viendo en el móvil. */
body.ctop-cliente .uv-mpop-btn--alta{ display:none !important; }

/* La barra fija de móvil se queda con un solo botón: que ocupe el ancho. */
body.ctop-cliente .uv-callbar .uv-search{ flex:1 1 100%; }

/* ---------- «¿Quieres anunciar tu negocio?» ---------- */

.ctop-pro{ max-width:620px; margin:0 auto; }
.ctop-pro__titulo{ margin:0 0 12px; font:800 24px/1.3 Montserrat,sans-serif; color:#0F172A; }
.ctop-pro__texto{ margin:0 0 20px; font:500 15.5px/1.65 Inter,sans-serif; color:#475569; }

.ctop-pro__lista{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:12px; }
.ctop-pro__lista li{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border:1px solid #E2E8F0; border-radius:12px; background:#F8FAFC;
  font:500 14.5px/1.55 Inter,sans-serif; color:#475569;
}
.ctop-pro__lista i{ color:#2563EB; margin-top:3px; flex:0 0 auto; }
.ctop-pro__lista strong{ color:#0F172A; }

.ctop-pro__btn{
  display:block; text-align:center; padding:14px 24px; border-radius:999px;
  background:#2563EB; color:#fff !important; font:800 16px Montserrat,sans-serif; text-decoration:none;
}
.ctop-pro__btn:hover{ background:#1E3A8A; }

.ctop-pro__volver{
  display:block; text-align:center; margin-top:12px;
  font:600 14px Inter,sans-serif; color:#64748B !important; text-decoration:none;
}
.ctop-pro__volver:hover{ color:#334155 !important; }

/* ---------- Tipo de cuenta, en Ajustes ---------- */

.ctop-rol{
  margin-top:28px; padding:22px 24px;
  border:1px solid #E2E8F0; border-radius:14px; background:#fff;
}
.ctop-rol__titulo{ margin:0 0 14px; font:800 18px/1.3 Montserrat,sans-serif; color:#0F172A; }

.ctop-rol__actual{
  display:flex; gap:10px; align-items:flex-start; margin:0 0 16px;
  padding:12px 14px; border-radius:10px; background:#F8FAFC;
  font:500 14.5px/1.55 Inter,sans-serif; color:#475569;
}
.ctop-rol__actual i{ color:#2563EB; margin-top:3px; flex:0 0 auto; }
.ctop-rol__actual strong{ color:#0F172A; }

.ctop-rol__texto{ margin:0 0 14px; font:500 14.5px/1.6 Inter,sans-serif; color:#475569; }

.ctop-rol__aviso{
  display:flex; gap:10px; align-items:flex-start; margin:0 0 16px;
  padding:12px 14px; border:1px solid #E2E8F0; border-radius:10px; background:#F8FAFC;
  font:500 14px/1.55 Inter,sans-serif; color:#475569;
}
.ctop-rol__aviso i{ color:#2563EB; margin-top:3px; flex:0 0 auto; }
.ctop-rol__aviso strong{ color:#0F172A; }
.ctop-rol__aviso--ok{ border-color:#BBF7D0; background:#F0FDF4; }
.ctop-rol__aviso--ok i{ color:#16A34A; }
.ctop-rol__aviso--parado{ border-color:#FDE68A; background:#FFFBEB; }
.ctop-rol__aviso--parado i{ color:#B45309; }

.ctop-rol__label{ display:block; margin-bottom:6px; font:600 13.5px Inter,sans-serif; color:#334155; }
.ctop-rol__motivo{
  width:100%; margin-bottom:14px; padding:10px 12px;
  border:1px solid #CBD5E1; border-radius:10px;
  font:500 14px/1.5 Inter,sans-serif; color:#0F172A;
}

.ctop-rol__btn{
  display:inline-block; padding:12px 22px; border:0; border-radius:999px; cursor:pointer;
  background:#2563EB; color:#fff !important; font:800 15px Montserrat,sans-serif; text-decoration:none;
}
.ctop-rol__btn:hover{ background:#1E3A8A; color:#fff !important; }
.ctop-rol__btn--gris{ background:#475569; }
.ctop-rol__btn--gris:hover{ background:#334155; }

.ctop-rol__volver{
  display:inline-block; margin-top:12px;
  font:600 14px Inter,sans-serif; color:#64748B !important; text-decoration:underline;
}
.ctop-rol__volver:hover{ color:#334155 !important; }

/* Aviso del paso de la tarjeta cuando los pagos no están configurados. */
.ctop-card-step__aviso--parado{ border-color:#FDE68A; background:#FFFBEB; }
.ctop-card-step__aviso--parado > i{ color:#B45309; }
.ctop-card-step__aviso--parado strong{ color:#78350F; }
.ctop-card-step__aviso--parado p{ color:#92400E; }