/* WA Woo — frontend */
:root {
	--wawoo-wa-color: #111827;
	--wawoo-wtb-color: #111827;
	--wawoo-radius: 12px;
}

/* ---------- Íconos (robustos en cualquier tema) ---------- */
.wawoo-ico,
.wawoo-ico-sm,
.wawoo-ico-stroke {
	display: inline-block;
	vertical-align: middle;
	flex: 0 0 auto;
	line-height: 0;
}
.wawoo-ico { width: 20px; height: 20px; fill: currentColor; }
.wawoo-ico-sm { width: 16px; height: 16px; fill: currentColor; }
.wawoo-ico-stroke { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.wawoo-ico path,
.wawoo-ico-sm path { fill: currentColor; }
.wawoo-ico-stroke path { fill: none; stroke: currentColor; }

/* ---------- Botones de producto ---------- */
.wawoo-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 18px 0;
	clear: both;
}
.wawoo-desc { margin: 0; font-size: 0.9em; line-height: 1.4; opacity: 0.85; }
.wawoo-oos .wawoo-desc {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #9a3412;
	padding: 10px 12px;
	border-radius: 8px;
	opacity: 1;
}

.wawoo-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 15px 20px;
	border: none;
	border-radius: var( --wawoo-radius );
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	color: #fff;
	background: var( --wawoo-wa-color );
	transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.12 );
}
.wawoo-btn:hover { color: #fff; box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 ); opacity: 0.96; }
.wawoo-btn:active { transform: translateY( 1px ); }
.wawoo-wtb-btn { background: var( --wawoo-wtb-color ); }
.wawoo-btn-txt { flex: 1 1 auto; text-align: left; }
.wawoo-btn-arrow { opacity: 0.6; margin-left: auto; }
.wawoo-wa-btn .wawoo-ico { color: #25D366; }

/* ---------- Modal ---------- */
.wawoo-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 15, 23, 42, 0.6 );
	backdrop-filter: blur( 2px );
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 16px;
}
.wawoo-modal-overlay.wawoo-open { display: flex; animation: wawoo-fade .18s ease; }
@keyframes wawoo-fade { from { opacity: 0; } to { opacity: 1; } }

.wawoo-modal {
	background: #fff;
	color: #0f172a;
	border-radius: 16px;
	width: 100%;
	max-width: 560px;
	max-height: 86vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.35 );
	animation: wawoo-pop .2s ease;
}
.wawoo-modal.wawoo-has-map { max-width: 920px; }
@keyframes wawoo-pop { from { transform: translateY( 12px ) scale( .98 ); opacity: 0; } to { transform: none; opacity: 1; } }

.wawoo-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid #f1f5f9;
	flex: 0 0 auto;
}
.wawoo-modal-title { margin: 0; font-size: 19px; font-weight: 700; }
.wawoo-modal-close {
	background: #f1f5f9;
	border: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #334155;
	transition: background .15s ease;
}
.wawoo-modal-close:hover { background: #e2e8f0; }

.wawoo-modal-body { display: flex; min-height: 0; flex: 1 1 auto; }

/* Lista de tiendas (izquierda) */
.wawoo-stores {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wawoo-has-map .wawoo-stores { flex: 0 0 340px; max-width: 340px; }

.wawoo-store {
	display: flex;
	gap: 12px;
	border: 1px solid #e9eef4;
	border-radius: 14px;
	padding: 12px;
	transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.wawoo-store--map { cursor: pointer; }
.wawoo-store--map:hover { box-shadow: 0 6px 18px rgba( 15, 23, 42, 0.08 ); border-color: #cfe0f5; }
.wawoo-store.is-active { border-color: #6366f1; background: #f5f6ff; box-shadow: 0 6px 18px rgba( 99, 102, 241, 0.18 ); }

.wawoo-store-photo {
	flex: 0 0 68px;
	width: 68px;
	height: 68px;
	border-radius: 11px;
	background: #f1f5f9 center/cover no-repeat;
}
.wawoo-store-body { flex: 1 1 auto; min-width: 0; }
.wawoo-store-head { font-weight: 700; font-size: 15.5px; margin-bottom: 5px; }
.wawoo-store-line {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 13px;
	line-height: 1.35;
	margin: 3px 0;
	color: #475569;
}
.wawoo-store-line .wawoo-ico-sm { color: #94a3b8; margin-top: 1px; }

/* Botones de acción redondos (negro/gris) */
.wawoo-store-actions { display: flex; gap: 8px; margin-top: 10px; }
.wawoo-rbtn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1f2937;
	color: #fff;
	text-decoration: none;
	transition: background .15s ease, transform .05s ease;
}
.wawoo-rbtn:hover { background: #374151; color: #fff; }
.wawoo-rbtn:active { transform: translateY( 1px ); }
.wawoo-rbtn .wawoo-ico { width: 18px; height: 18px; }

/* Mapa (derecha) */
.wawoo-map-wrap { flex: 1 1 auto; min-width: 0; }
#wawoo-map { width: 100%; height: 100%; min-height: 460px; background: #e5e7eb; }

/* Pin personalizado (sin depender de imágenes de Leaflet) */
.wawoo-pin { background: transparent; border: 0; }
.wawoo-pin span {
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto;
	background: #111827;
	border: 3px solid #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate( -45deg );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.4 );
}

body.wawoo-noscroll { overflow: hidden; }

/* ---------- Widget flotante ---------- */
.wawoo-float { position: fixed; display: flex; flex-direction: column; gap: 10px; z-index: 99990; }
.wawoo-float.pos-bottom-right { right: 18px; bottom: 18px; }
.wawoo-float.pos-bottom-left  { left: 18px; bottom: 18px; }
.wawoo-float.pos-middle-right { right: 18px; top: 50%; transform: translateY( -50% ); }
.wawoo-float.pos-middle-left  { left: 18px; top: 50%; transform: translateY( -50% ); }
.wawoo-float.pos-top-right    { right: 18px; top: 90px; }
.wawoo-float.pos-top-left     { left: 18px; top: 90px; }

.wawoo-float-btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #111827;
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.22 );
	transition: transform .12s ease, box-shadow .15s ease;
}
.wawoo-float-btn:hover { transform: scale( 1.08 ); color: #fff; box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.28 ); }
.wawoo-float-btn .wawoo-ico { width: 22px; height: 22px; }
.wawoo-float-btn.net-facebook  { background: #1877f2; }
.wawoo-float-btn.net-instagram { background: radial-gradient( circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 70%, #285AEB 100% ); }
.wawoo-float-btn.net-waze      { background: #33ccff; color: #05263a; }
.wawoo-float-btn.net-waze:hover { color: #05263a; }
.wawoo-float-btn.net-maps      { background: #ea4335; }

/* ---------- Responsivo ---------- */
@media ( min-width: 480px ) {
	.wawoo-btn { max-width: 420px; }
}
@media ( max-width: 760px ) {
	.wawoo-modal.wawoo-has-map { max-width: 560px; }
	.wawoo-modal-body { flex-direction: column; }
	.wawoo-has-map .wawoo-stores { flex: 0 0 auto; max-width: none; max-height: 42vh; order: 2; }
	.wawoo-map-wrap { order: 1; }
	#wawoo-map { min-height: 240px; height: 240px; }
}