/*
Theme Name:  DS Bikes Rifas
Theme URI:   https://dsbikes.co
Description: Tema hijo de Storefront para el sitio de rifas. Colores de la
             marca, portada propia y checkout adaptado a Colombia.
             Sin page builder.
Author:      DS Bikes
Template:    storefront
Version:     1.1.0
Text Domain: dsbikes
License:     GPLv2 or later
*/

/* =====================================================================
   Marca
   Los colores salen del logo original: negro y rojo #B80010.
   ================================================================== */
:root {
	--ds-rojo:        #b80010;
	--ds-rojo-oscuro: #8e000c;
	--ds-negro:       #111111;
	--ds-gris:        #6b6b6b;
	--ds-gris-claro:  #f4f4f4;
	--ds-borde:       #e3e3e3;
}

/* =====================================================================
   Base
   ================================================================== */
body { color: var(--ds-negro); }

a { color: var(--ds-rojo); }
a:hover { color: var(--ds-rojo-oscuro); }

.button,
button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--ds-rojo);
	color: #fff;
	border-radius: 4px;
	font-weight: 700;
	letter-spacing: .02em;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--ds-rojo-oscuro);
	color: #fff;
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--ds-rojo);
	color: #fff;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--ds-rojo-oscuro);
}

.site-header { border-bottom: 3px solid var(--ds-rojo); }
.site-header .custom-logo-link img { max-width: 260px; height: auto; }

/* Boletas digitales: no hay nada que enviar. */
.woocommerce-shipping-fields,
.woocommerce-shipping-totals,
.cart-collaterals .shipping-calculator-button {
	display: none !important;
}

/* Documento del comprador, uno al lado del otro. */
#billing_document_type_field,
#billing_document_number_field { float: left; width: 48%; }
#billing_document_type_field { margin-right: 4%; }

@media (max-width: 768px) {
	#billing_document_type_field,
	#billing_document_number_field { float: none; width: 100%; margin-right: 0; }
}

/* =====================================================================
   Portada
   ================================================================== */
.ds-hero {
	/* Fondo claro por pedido del vendedor: el negro le resultaba pesado.
	   El hero deja de distinguirse por contraste de fondo, asi que lo
	   separa del resto una linea al pie. */
	background: #fff;
	color: var(--ds-negro);
	border-bottom: 1px solid var(--ds-borde);
	padding: 3rem 1.5rem;
	text-align: center;
}

.ds-hero__logo { max-width: 320px; height: auto; margin: 0 auto 1.5rem; display: block; }

.ds-hero__titulo {
	font-size: clamp(1.9rem, 5vw, 3.2rem);
	line-height: 1.1;
	margin: 0 0 .5rem;
	color: var(--ds-negro);
	font-weight: 800;
	text-transform: uppercase;
}

.ds-hero__titulo em { color: var(--ds-rojo); font-style: normal; }

.ds-hero__bajada {
	font-size: 1.1rem;
	color: var(--ds-gris);
	margin: 0 auto 2rem;
	max-width: 40ch;
}

.ds-hero__media { max-width: 640px; margin: 0 auto 2rem; }
/* Las fotos del premio salen del telefono, verticales. A ancho completo una
   vertical mide mas de 1100px de alto y empuja el boton de compra fuera de
   la pantalla, asi que manda la altura y el ancho la sigue. */
.ds-hero__media img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 62vh;
	border-radius: 8px;
	display: block;
	margin: 0 auto;
}

.ds-hero__precio {
	display: inline-flex;
	align-items: baseline;
	gap: .5rem;
	background: var(--ds-rojo);
	color: #fff;
	padding: .75rem 1.5rem;
	border-radius: 999px;
	font-size: 1.5rem;
	font-weight: 800;
	margin-bottom: 1.5rem;
}
.ds-hero__precio small { font-size: .8rem; font-weight: 500; opacity: .9; }

.ds-hero .button { font-size: 1.15rem; padding: 1rem 2.5rem; }

/* Barra de avance */
.ds-avance { max-width: 640px; margin: 0 auto 1.5rem; }
.ds-avance__barra {
	height: 12px;
	background: #e8e8e8;
	border-radius: 999px;
	overflow: hidden;
}
.ds-avance__relleno { height: 100%; background: var(--ds-rojo); border-radius: 999px; }
.ds-avance__texto { font-size: .9rem; color: var(--ds-gris); margin-top: .5rem; }

/* Pasos */
.ds-pasos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	max-width: 1000px;
	margin: 3rem auto;
	padding: 0 1.5rem;
}

.ds-paso {
	background: var(--ds-gris-claro);
	border: 1px solid var(--ds-borde);
	border-radius: 8px;
	padding: 1.75rem 1.5rem;
	border-top: 4px solid var(--ds-rojo);
}

.ds-paso__n {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--ds-rojo);
	color: #fff;
	font-weight: 800;
	margin-bottom: .75rem;
}

.ds-paso h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.ds-paso p  { margin: 0; color: var(--ds-gris); font-size: .95rem; }

/* Aviso del sorteo */
.ds-sorteo {
	max-width: 1000px;
	margin: 0 auto 3rem;
	padding: 1.5rem;
	border: 2px dashed var(--ds-borde);
	border-radius: 8px;
	text-align: center;
}
.ds-sorteo strong { color: var(--ds-rojo); }

/* Aviso de configuracion pendiente (solo lo ve el administrador) */
.ds-aviso-admin {
	max-width: 1000px;
	margin: 1.5rem auto;
	padding: 1rem 1.25rem;
	background: #fff8e1;
	border-left: 4px solid #f0ad4e;
	border-radius: 4px;
	font-size: .95rem;
}

/* =====================================================================
   Correcciones sobre Storefront
   ================================================================== */

/* La cabecera de Storefront viene con fondo oscuro y enlaces oscuros:
   el menu quedaba practicamente invisible. */
.site-header,
.storefront-primary-navigation,
.main-navigation ul li a,
.site-header .site-search .widget_product_search input[type="search"] {
	color: #fff;
}

.main-navigation ul li a,
.site-header ul.menu li a,
.site-header div.menu > ul li a {
	color: #fff !important;
	font-weight: 600;
}

.main-navigation ul li:hover > a,
.site-header ul.menu li:hover > a {
	color: var(--ds-rojo) !important;
}

.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current_page_item > a {
	color: var(--ds-rojo) !important;
}

/* El hero a todo el ancho, fuera de la columna de contenido. */
.ds-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 0;
}

/* Storefront pinta sus botones con su propio color y mas especificidad. */
.woocommerce a.button.alt,
.woocommerce-page a.button.alt,
.ds-hero a.button,
.ds-hero a.button.alt {
	background-color: var(--ds-rojo) !important;
	color: #fff !important;
	border-color: var(--ds-rojo) !important;
}

.woocommerce a.button.alt:hover,
.ds-hero a.button:hover,
.ds-hero a.button.alt:hover {
	background-color: var(--ds-rojo-oscuro) !important;
	color: #fff !important;
}

/* Con 0 boletas vendidas la barra quedaba como una linea muerta. */
.ds-avance__barra { border: 1px solid var(--ds-borde); }
.ds-avance__relleno { min-width: 3px; }

/* Contenido del hero centrado y con ancho de lectura. Se excluye el logo,
   que tiene su propio limite: sin :not() esta regla le pisaba el max-width
   y salia enorme. */
.ds-hero > *:not(.ds-hero__logo) {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.ds-hero__logo { max-width: 300px; }

/* Sin sidebar en la portada, el area de contenido ocupa todo. */
.ds-portada .content-area { width: 100%; float: none; margin-right: 0; }
.ds-portada #secondary { display: none; }

/* =====================================================================
   Redes sociales del pie
   ================================================================== */
.ds-redes {
	display: flex;
	gap: .75rem;
	justify-content: center;
	margin: 0 0 1.5rem;
	flex-wrap: wrap;
}

.ds-redes__enlace {
	display: inline-grid;
	place-items: center;
	width: 44px;               /* 44px: area tactil minima comoda en movil */
	height: 44px;
	border-radius: 50%;
	background: var(--ds-negro);
	color: #fff;
	transition: background-color .2s ease, transform .2s ease;
}

.ds-redes__enlace:hover,
.ds-redes__enlace:focus-visible {
	background: var(--ds-rojo);
	color: #fff;
	transform: translateY(-2px);
}

.ds-redes__enlace:focus-visible {
	outline: 3px solid var(--ds-rojo);
	outline-offset: 2px;
}

/* Storefront pinta los enlaces del pie con su propio color y gana por
   especificidad, con lo cual currentColor daba icono oscuro sobre circulo
   oscuro. Se fija el color en el enlace y en el propio SVG. */
.site-footer .ds-redes__enlace,
.site-footer .ds-redes__enlace:visited {
	color: #fff;
}
.site-footer .ds-redes__enlace svg { fill: #fff; }

.site-footer .ds-redes__enlace:hover,
.site-footer .ds-redes__enlace:focus-visible { color: #fff; }
.site-footer .ds-redes__enlace:hover svg,
.site-footer .ds-redes__enlace:focus-visible svg { fill: #fff; }

/* Anticipados y cuenta regresiva del hero */
.ds-hero__extras {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ds-rojo-oscuro);
	background: #fff5f5;
	border: 2px solid var(--ds-rojo);
	border-radius: 6px;
	padding: .65rem 1.1rem;
	display: inline-block;
	margin: 0 auto 1rem;
}

.ds-hero__cuenta {
	font-size: .95rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ds-gris);
	margin: 0 0 1rem;
}

/* =====================================================================
   Boton flotante de WhatsApp
   ================================================================== */
.ds-wa {
	position: fixed;
	right: 1rem;
	/* safe-area: en iPhone la barra de gestos se come el borde inferior. */
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	z-index: 9999;

	display: flex;
	align-items: center;
	gap: .55rem;
	height: 56px;
	padding: 0 1.05rem 0 .8rem;
	border-radius: 28px;

	background: #25d366;          /* verde de marca de WhatsApp */
	color: #fff;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
	transition: background-color .2s ease, transform .2s ease;
}

/* Storefront pinta los enlaces con su propio color y gana por
   especificidad; el icono hereda con currentColor, asi que hay que fijar
   los dos o queda verde sobre verde. Mismo problema que en el pie. */
.ds-wa,
.ds-wa:visited,
.ds-wa:hover,
.ds-wa:focus { color: #fff; }
.ds-wa svg  { fill: #fff; flex: none; }

.ds-wa:hover,
.ds-wa:focus-visible {
	background: #1da851;
	transform: translateY(-2px);
}

.ds-wa:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* En movil solo el circulo: la etiqueta tapa contenido en pantallas
   angostas, que es justo donde mas se usa. */
@media (max-width: 600px) {
	.ds-wa {
		width: 56px;
		padding: 0;
		justify-content: center;
	}
	.ds-wa__texto { display: none; }
}

/* Storefront pone una barra fija abajo en movil (cuenta, buscar, carrito).
   El boton caia justo encima del carrito, asi que sube por arriba de ella. */
@media (max-width: 767px) {
	.ds-wa { bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
	.ds-wa { transition: none; }
	.ds-wa:hover,
	.ds-wa:focus-visible { transform: none; }
}

@media print {
	.ds-wa { display: none; }
}

/* La foto del premio, al costado en escritorio y arriba en movil.
   Las fotos son verticales, y apiladas empujan el boton de compra unos
   700px por debajo del pliegue: se ve la moto pero no se ve como
   comprarla. Por eso el hero se parte en dos bloques, .ds-hero__texto y
   .ds-hero__media, en vez de ser una lista plana de elementos. */
.ds-hero {
	display: flex;
	flex-direction: column;
}

/* En movil la foto va primero: la moto es el argumento de venta, y el
   logo ya esta en la cabecera del sitio.

   El tope de altura es lo que decide cuanto se ve sin scrollear. A 62vh la
   foto sola llenaba la pantalla entera: se veia la moto y ni el precio ni
   el boton. A 42vh entran ademas el titulo y parte de la bajada. */
.ds-hero__media { order: -1; }
.ds-hero__media img { max-height: 42vh; }

/* El logo del hero se oculta en movil: la cabecera ya lo muestra unos
   pixeles mas arriba, y repetido se lleva casi 200px del pliegue, que es
   justo lo que hace falta para que se vea el precio. */
@media (max-width: 767px) {
	.ds-hero__logo { display: none; }
}

@media (min-width: 992px) {
	.ds-hero {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 3rem;
		text-align: left;
	}

	/* Sin crecer: asi el par texto+foto queda centrado en la pantalla en
	   vez de pegarse al borde izquierdo. El hero es de ancho completo. */
	.ds-hero__texto { flex: 0 1 620px; }

	/* Estos tres estan centrados con  margin: 0 auto  para el diseño
	   apilado. En dos columnas hay que soltarlos a la izquierda. */
	.ds-hero__texto .ds-hero__bajada,
	.ds-hero__texto .ds-avance { margin-left: 0; }
	.ds-hero__texto .ds-hero__logo { max-width: 240px; }

	.ds-hero__media {
		order: 0;                 /* al costado derecho, no arriba */
		flex: 0 1 340px;
		max-width: 340px;
		margin: 0;
	}

	.ds-hero__media img { max-height: 70vh; }

	.ds-hero .ds-hero__logo { margin-left: 0; margin-right: auto; }
}

/* La franja vacia entre la cabecera y el hero.
   Son tres cosas encadenadas, y la principal no estaba donde parecia. Al
   pintar los contenedores se vio que la franja queda POR ENCIMA de
   #content: es el  margin-bottom  de la cabecera de Storefront, que separa
   el menu del contenido en el resto del sitio pero en la portada solo abre
   un hueco. Se suma el relleno superior de #content, que el hero no puede
   compensar porque es de ancho completo pero vive dentro de ese
   contenedor, y un <div class="woocommerce"> vacio que WooCommerce imprime
   para sus avisos aunque no haya ninguno.

   Los tres se anulan solo en la portada, para no tocar el resto. */
/* El margen viene de  .home.page:not(.page-template-template-homepage)
   .site-header , cuatro clases: no hay forma razonable de ganarle por
   especificidad sin encadenar selectores fragiles, asi que se fuerza. Es
   el mismo motivo por el que mas arriba se fuerzan los botones. */
.ds-portada .site-header  { margin-bottom: 0 !important; }
.ds-portada .site-content { padding-top: 0; }
.ds-portada .site-content .woocommerce:empty { display: none; }

/* =====================================================================
   Cantidad con botones + y -
   ================================================================== */
.quantity.ds-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ds-borde);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}

.ds-qty__btn {
	width: 44px;              /* area tactil minima comoda en movil */
	border: 0;
	background: var(--ds-gris-claro);
	color: var(--ds-negro);
	font-size: 1.35rem;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
	transition: background-color .15s ease;
}

.ds-qty__btn:hover    { background: var(--ds-rojo); color: #fff; }
.ds-qty__btn:focus-visible {
	outline: 3px solid var(--ds-rojo);
	outline-offset: -3px;
}

/* Storefront le pone borde y fondo propios al input; aca va embebido. */
.quantity.ds-qty input.qty {
	width: 3.5rem;
	border: 0;
	border-radius: 0;
	text-align: center;
	background: #fff;
	font-weight: 700;
	-moz-appearance: textfield;
}

/* Las flechitas nativas sobran: para eso estan los botones. */
.quantity.ds-qty input.qty::-webkit-outer-spin-button,
.quantity.ds-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* =====================================================================
   Carrusel de la portada
   ================================================================== */
.ds-carrusel { position: relative; }

.ds-carrusel__foto { transition: opacity .6s ease; }

/* La primera queda en el flujo y es la que le da altura a la caja; las
   demas se apilan encima. Las fotos son todas verticales y con la misma
   proporcion, asi que no hay salto al cambiar. */
.ds-carrusel__foto + .ds-carrusel__foto {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	width: auto;
}

.ds-carrusel__foto:not(.es-activa) { opacity: 0; }

.ds-carrusel__puntos {
	position: absolute;
	left: 0;
	right: 0;
	bottom: .75rem;
	display: flex;
	justify-content: center;
	gap: .5rem;
	z-index: 2;
}

.ds-carrusel__punto {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.ds-carrusel__punto.es-activo {
	background: var(--ds-rojo);
	transform: scale(1.25);
}

.ds-carrusel__punto:focus-visible {
	outline: 3px solid var(--ds-rojo);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ds-carrusel__foto { transition: none; }
}

/* Aviso mientras se confirma el pago, en la pagina de pedido recibido. */
.ds-confirmando {
	margin: 0 0 2em;
	padding: 1.5em;
	background: #fff8e5;
	border: 1px solid #f0dca8;
	border-radius: 8px;
	text-align: center;
}

.ds-confirmando__titulo {
	margin: 0 0 .5em;
	font-size: 1.2em;
	font-weight: bold;
}

.ds-confirmando__texto {
	margin: 0 0 .5em;
}

.ds-confirmando__wa {
	display: inline-block;
	margin-top: .5em;
	padding: .7em 1.4em;
	background: #25D366;
	color: #fff;
	border-radius: 6px;
	font-weight: bold;
	text-decoration: none;
}

.ds-confirmando__wa:hover,
.ds-confirmando__wa:focus {
	color: #fff;
	opacity: .9;
}

/* Numeros ya premiados en los sorteos anticipados. */
.ds-premiados {
	margin: 0 auto 2.5em;
	padding: 1.8em 1.5em;
	max-width: 900px;
	background: #111;
	color: #fff;
	border-radius: 10px;
	text-align: center;
}

.ds-premiados__titulo {
	margin: 0 0 .8em;
	color: #fff;
	font-size: 1.3em;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ds-premiados__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6em;
	margin: 0 0 .9em;
	padding: 0;
	list-style: none;
}

.ds-premiados__num {
	padding: .45em .9em;
	border: 2px solid #ffd233;
	border-radius: 8px;
	color: #ffd233;
	font-size: 1.7em;
	font-weight: bold;
	font-variant-numeric: tabular-nums;
	letter-spacing: .05em;
}

.ds-premiados__pie {
	margin: 0;
	color: #cfcfcf;
	font-size: .95em;
}