/* CyberDay / Mayordent — Buscador-agente
   Estilos autocontenidos con prefijo .cdb-search */

.cdb-search {
	margin: 1.5rem 0;
	font-family: inherit;
}

.cdb-search-intro {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 10px;
	color: inherit;
}

.cdb-search-bar {
	display: flex;
	gap: 8px;
	max-width: 640px;
}

.cdb-search-input {
	flex: 1;
	font-size: 16px;
	padding: 12px 14px;
	border: 1px solid #ddbcbc;
	border-radius: 10px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	background: #fff;
	color: #1c1740;
}

.cdb-search-input:focus {
	border-color: #c8102e;
	box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
}

.cdb-search-btn {
	border: none;
	background: #c8102e;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	padding: 0 20px;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.cdb-search-btn:hover {
	background: #9a0d24;
}

.cdb-search-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Resultados */
.cdb-search-results {
	margin-top: 18px;
	width: 100%;
}

.cdb-answer {
	background: #fdf2f2;
	border: 1px solid #f5d0d0;
	border-left: 4px solid #c8102e;
	border-radius: 0 10px 10px 0;
	padding: 14px 16px;
	font-size: 15px;
	line-height: 1.6;
	color: #2a2550;
	margin-bottom: 16px;
}

.cdb-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #6b6790;
	font-size: 15px;
	padding: 8px 0;
}

.cdb-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid #f0caca;
	border-top-color: #c8102e;
	border-radius: 50%;
	animation: cdb-spin 0.8s linear infinite;
}

@keyframes cdb-spin {
	to { transform: rotate(360deg); }
}

/* Categorías relacionadas */
.cdb-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.cdb-cat-pill {
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	color: #9a0d24;
	background: #fae5e5;
	border: 1px solid #f0caca;
	padding: 6px 12px;
	border-radius: 999px;
	transition: background 0.2s ease;
}

.cdb-cat-pill:hover {
	background: #f0caca;
}

/* Tarjetas de producto: reutilizan el estilo .cdb-card de los banners.
   Aquí solo se añaden el precio y el indicador de stock sobre el velo. */
.cdb-card .cdb-count.cdb-in {
	color: #c8f4e2;
}

.cdb-card .cdb-count.cdb-out {
	color: #ffd2d2;
}

.cdb-card .cdb-price {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 8px;
}

.cdb-error {
	color: #b03030;
	font-size: 14px;
}

/* Layout integrado dentro de los banners (.cdb-hub) */
.cdb-hub .cdb-search {
	margin: 0 0 18px;
}

.cdb-hub .cdb-search-bar {
	max-width: none;
}

.cdb-back {
	border: 1px solid #f0caca;
	background: #fff;
	color: #9a0d24;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 8px;
	cursor: pointer;
	margin-bottom: 14px;
	transition: background 0.2s ease;
}

.cdb-back:hover {
	background: #fdf2f2;
}

/* ---------- Chat conversacional ---------- */
.cdb-chat {
	width: 100%;
	border: 1px solid #f5d0d0;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	margin: 1.5rem 0;
}

.cdb-chat-window {
	max-height: 460px;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cdb-msg {
	display: flex;
}

.cdb-msg-user {
	justify-content: flex-end;
}

.cdb-msg-assistant {
	justify-content: flex-start;
}

.cdb-bubble {
	max-width: 85%;
	font-size: 15px;
	line-height: 1.5;
	padding: 10px 14px;
	border-radius: 14px;
}

.cdb-msg-user .cdb-bubble {
	background: var(--cdb-user-bubble, #c8102e);
	color: var(--cdb-user-text, #fff);
	border-bottom-right-radius: 4px;
}

.cdb-msg-assistant .cdb-bubble {
	background: var(--cdb-bot-bubble, #fdf2f2);
	color: var(--cdb-bot-text, #2a2550);
	border-bottom-left-radius: 4px;
}

/* Indicador de "escribiendo" */
.cdb-typing {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.cdb-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #b6b1e0;
	display: inline-block;
	animation: cdb-bounce 1.2s infinite ease-in-out;
}

.cdb-typing span:nth-child(2) { animation-delay: 0.15s; }
.cdb-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes cdb-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
	40% { transform: translateY(-5px); opacity: 1; }
}

/* Grilla de tarjetas dentro del chat */
.cdb-chat-grid {
	margin: 4px 0 4px;
}

.cdb-chat-grid .cdb-card {
	min-height: 150px;
}

.cdb-chat .cdb-cats {
	margin: 4px 0;
}

/* Fila de entrada */
.cdb-chat-input-row {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid #fae5e5;
	background: #fbfaff;
}

.cdb-chat-input {
	flex: 1;
	font-size: 15px;
	padding: 11px 14px;
	border: 1px solid #ddbcbc;
	border-radius: 10px;
	outline: none;
	background: #fff;
	color: #1c1740;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cdb-chat-input:focus {
	border-color: #c8102e;
	box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
}

.cdb-chat-send {
	border: none;
	background: var(--cdb-send-bg, #c8102e);
	color: var(--cdb-send-text, #fff);
	font-size: 15px;
	font-weight: 600;
	padding: 0 20px;
	border-radius: 10px;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.cdb-chat-send:hover { filter: brightness(0.9); }
.cdb-chat-send:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 520px) {
	.cdb-chat-grid { grid-template-columns: 1fr; }
}

/* Sugerencias rápidas (chips) */
.cdb-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}

.cdb-suggestion {
	border: 1px solid #f0caca;
	background: #fff;
	color: #9a0d24;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.cdb-suggestion:hover {
	background: #fdf2f2;
	border-color: #c9c2ee;
}

/* ---------- Layout del agente: chat normal + resultados a ancho completo ---------- */
.cdb-agent {
	margin: 1.5rem 0;
}

/* Resultados ocupan todo el ancho disponible del contenedor padre.
   Si el shortcode está dentro de un contenedor con max-width, los rompemos. */
.cdb-results {
	margin-top: 18px;
}

.cdb-results:empty {
	display: none;
}

/* Cinturón de seguridad: ocultar precios en las tarjetas de resultados,
   por si el tema usa otras clases además del hook de WooCommerce. */
.cdb-products-themed .price,
.cdb-products-themed .woocommerce-Price-amount,
.cdb-products-themed ins,
.cdb-products-themed del {
	display: none !important;
}

/* Las tarjetas usan los estilos del tema; no imponemos nada salvo
   asegurar que la grilla nativa se vea bien dentro del bloque. */
.cdb-products-themed ul.products {
	margin: 0;
	padding: 0;
}

/* Enlaces dentro de las burbujas del agente */
.cdb-msg-assistant .cdb-bubble a {
	color: var(--cdb-link, #c8102e);
	text-decoration: underline;
	font-weight: 600;
}

.cdb-msg-assistant .cdb-bubble a:hover {
	color: var(--cdb-link, #c8102e);
	filter: brightness(0.8);
}

/* Disclaimer al pie del chat */
.cdb-chat-disclaimer {
	font-size: 11px;
	line-height: 1.4;
	color: #888;
	text-align: center;
	padding: 8px 14px 12px;
	background: #fbfaff;
	border-top: 1px solid #fae5e5;
}

/* ---------- Header del chat (presentación del agente) ---------- */
.cdb-chat-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: linear-gradient(135deg, var(--cdb-header-bg, #c8102e) 0%, var(--cdb-header-bg2, #9a0d24) 100%);
	color: var(--cdb-header-text, #fff);
	border-bottom: 1px solid var(--cdb-header-bg2, #9a0d24);
}

.cdb-chat-avatar {
	font-size: 40px;
	line-height: 1;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, 0.35);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.cdb-chat-avatar.cdb-avatar-photo {
	background: #fff;
	padding: 0;
}

.cdb-chat-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cdb-chat-header-text {
	flex: 1;
	min-width: 0;
}

.cdb-chat-name {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.3px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--cdb-header-text, #fff);
}

.cdb-online-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.35);
	animation: cdb-pulse 2s ease-in-out infinite;
}

@keyframes cdb-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.cdb-chat-tagline {
	font-size: 13px;
	opacity: 0.92;
	margin-top: 3px;
	color: var(--cdb-header-text, #fff);
}
/* CyberDay Category Banners
   Estilos autocontenidos con prefijo .cdb- para no chocar con el tema. */

.cdb-wrap {
	margin: 1.5rem 0;
	font-family: inherit;
}

/* ---------- Franja superior ---------- */
.cdb-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	background: #1c1740;
	background-image: linear-gradient(135deg, #26215C 0%, #1a1538 100%);
	border-radius: 14px;
	padding: 18px 22px;
	margin-bottom: 18px;
}

.cdb-header-text {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cdb-bolt {
	font-size: 26px;
	line-height: 1;
	color: var(--cdb-accent, #7F77DD);
	font-style: normal;
}

.cdb-title-main {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffffff;
	line-height: 1.1;
}

.cdb-subtitle {
	font-size: 13px;
	color: #b6b1e0;
	margin-top: 2px;
}

/* ---------- Contador ---------- */
.cdb-countdown {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.cdb-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 46px;
}

.cdb-num {
	display: block;
	width: 100%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--cdb-accent, #534AB7);
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	padding: 6px 4px;
	border-radius: 8px;
}

.cdb-label {
	font-size: 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #b6b1e0;
	margin-top: 4px;
}

.cdb-countdown.cdb-ended .cdb-num {
	font-size: 13px;
	font-weight: 600;
}

/* ---------- Grilla ---------- */
.cdb-grid {
	display: grid;
	grid-template-columns: repeat(var(--cdb-cols, 3), 1fr);
	gap: 16px;
}

@media (max-width: 860px) {
	.cdb-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.cdb-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Tarjetas ---------- */
.cdb-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--cdb-card-h, 320px);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.cdb-card:hover,
.cdb-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	outline: none;
}

/* Velo inferior para legibilidad del texto sobre la imagen. */
.cdb-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 75%);
}

.cdb-card--solid::before {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.10) 60%, rgba(0, 0, 0, 0) 100%);
}

.cdb-card--error {
	background: #f5f5f5;
	box-shadow: none;
}

/* ---------- Badge de descuento ---------- */
.cdb-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 5px 11px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ---------- Contenido de la tarjeta ---------- */
.cdb-overlay {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 16px;
	width: 100%;
}

.cdb-count {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 4px;
}

.cdb-cat-title {
	font-size: 19px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
	margin-bottom: 8px;
}

.cdb-cta {
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	opacity: 0.9;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.cdb-card:hover .cdb-cta {
	opacity: 1;
	transform: translateX(3px);
}

/* ---------- Logo de la marca ---------- */
.cdb-logo {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.95);
	padding: 6px 10px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	display: inline-flex;
	align-items: center;
	max-width: 45%;
}

.cdb-logo img {
	max-height: 28px;
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
}

/* ---------- Caption (texto adicional debajo del título) ---------- */
.cdb-caption {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.4;
	margin-bottom: 10px;
}

@media (max-width: 520px) {
	.cdb-logo { max-width: 50%; }
	.cdb-logo img { max-height: 24px; }
	.cdb-cat-title { font-size: 18px; }
}

/* Asegurar ancho completo del agente, sin importar dónde se inserte */
.cdb-agent,
.cdb-agent .cdb-chat,
.cdb-agent .cdb-results {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

/* También el input dentro del chat ocupa todo */
.cdb-agent .cdb-search-bar,
.cdb-agent .cdb-chat-input-row {
	max-width: none !important;
	width: 100%;
}