/**
 * Bassols Popups: estils corporatius per a WP Popups.
 *
 * Classes del pop-up (Settings → "Popup CSS class"):
 *   bp-popup             obligatòria, activa els estils
 *   bp-theme-light       fons blanc (per defecte)
 *   bp-theme-dark        fons fosc
 *   bp-theme-auto        clar, i fosc si el dispositiu està en mode fosc
 *   bp-accent-turquoise  color d'accent turquesa (per defecte: verd)
 *   bp-accent-aqua       color d'accent aiguamarina
 *   bp-sheet-mobile      a mòbil es mostra com a bottom-sheet (recomanat)
 *   bp-no-media-mobile   amaga la imatge a mòbil
 *
 * Mida, radi de les vores i padding es configuren al plugin (Appearance → Popup box).
 */

/* ─────────── Variables ─────────── */

.spu-box.bp-popup {
	--bp-green: #7EBD26;
	--bp-turquoise: #00AA99;
	--bp-aqua: #72C6CB;
	--bp-white: #FFFFFF;
	--bp-dark: #1E2B2F;
	--bp-dark-soft: #2A3A3F;

	--bp-accent: var(--bp-green);
	--bp-accent-text: #4E7A12;     /* verd fosc per a text sobre blanc (contrast AA) */
	--bp-gradient: linear-gradient(90deg, var(--bp-green) 0%, var(--bp-turquoise) 100%);

	--bp-bg: var(--bp-white);
	--bp-text: var(--bp-dark);
	--bp-text-soft: #4A5A5F;
	--bp-field-bg: #F4F7F7;
	--bp-field-border: #D5DEDF;
	--bp-btn-text: var(--bp-dark);

	--bp-font: 'Source Sans Pro', sans-serif;
	--bp-font-title: 'Poppins', sans-serif;

	background-color: var(--bp-bg) !important;
	color: var(--bp-text);
	font-family: var(--bp-font);
	font-size: 16px;
	line-height: 1.45;
	overflow: hidden;
}

.spu-box.bp-accent-turquoise { --bp-accent: var(--bp-turquoise); --bp-accent-text: #00776B; }
.spu-box.bp-accent-aqua      { --bp-accent: var(--bp-aqua);      --bp-accent-text: #2D7F85; }

.spu-box.bp-theme-dark {
	--bp-bg: var(--bp-dark);
	--bp-text: var(--bp-white);
	--bp-text-soft: #C9D4D6;
	--bp-accent-text: var(--bp-accent);
	--bp-field-bg: var(--bp-white);
	--bp-field-border: var(--bp-white);
}

@media (prefers-color-scheme: dark) {
	.spu-box.bp-theme-auto {
		--bp-bg: var(--bp-dark);
		--bp-text: var(--bp-white);
		--bp-text-soft: #C9D4D6;
		--bp-accent-text: var(--bp-accent);
		--bp-field-bg: var(--bp-white);
		--bp-field-border: var(--bp-white);
	}
}

/* Barra de degradat superior (tema clar).
   Com a imatge de fons i no com a ::before: WP Popups posa overflow:initial inline a la caixa
   i el pseudoelement sortia per fora de les cantonades arrodonides. El fons sempre queda retallat pel radi. */
.spu-box.bp-theme-light,
.spu-box.bp-theme-auto {
	background-image: var(--bp-gradient) !important;
	background-size: 100% 8px !important;
	background-position: top left !important;
	background-repeat: no-repeat !important;
	background-origin: border-box !important;
}

/* ─────────── Botó de tancar ─────────── */

.spu-box.bp-popup .spu-close {
	color: var(--bp-text-soft) !important;
	text-shadow: none !important;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 6px;
	cursor: pointer;
}
.spu-box.bp-popup .spu-close:hover {
	color: var(--bp-text) !important;
}

/* ─────────── Contingut ─────────── */

.bp-popup .spu-content > :first-child { margin-top: 0; }
.bp-popup .spu-content > :last-child  { margin-bottom: 0; }

.bp-popup .bp-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
}
.bp-popup .bp-logo img {
	max-height: 44px;
	width: auto;
	margin: 0;
}
/* Logo en blanc sobre fons fosc (si el logo pujat ja és blanc, es queda igual) */
.bp-popup.bp-theme-dark .bp-logo img {
	filter: brightness(0) invert(1);
}
@media (prefers-color-scheme: dark) {
	.bp-popup.bp-theme-auto .bp-logo img { filter: brightness(0) invert(1); }
}

.bp-popup .bp-tagline {
	padding-left: 14px;
	border-left: 1px solid currentColor;
	font-size: 13px;
	line-height: 1.25;
	color: var(--bp-text-soft);
	max-width: 110px;
}

.bp-popup .bp-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 8px auto 16px;
	border-radius: 14px;
	background: rgba(126, 189, 38, .12);
	color: var(--bp-accent-text);
}
.bp-popup .bp-icon img,
.bp-popup .bp-icon svg {
	width: 28px;
	height: 28px;
	margin: 0;
}

.bp-popup .bp-title {
	font-family: var(--bp-font-title);
	font-weight: 700;
	font-size: clamp(22px, 4vw, 34px);
	line-height: 1.15;
	color: var(--bp-text);
	margin: 0 0 12px;
}
.bp-popup .bp-highlight {
	color: var(--bp-accent-text);
}

.bp-popup .bp-subtitle {
	font-size: 17px;
	color: var(--bp-text);
	margin: 0 0 6px;
}
.bp-popup .bp-note {
	font-size: 14px;
	color: var(--bp-text-soft);
	margin: 0 0 18px;
}

.bp-popup .bp-center { text-align: center; }

/* Columnes: text + imatge (dreta per defecte) */
.bp-popup .bp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
	gap: 24px;
	align-items: center;
}
.bp-popup .bp-layout.bp-media-left {
	grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
}
.bp-popup .bp-layout.bp-media-left .bp-media { order: -1; }
.bp-popup .bp-media img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* Microbeneficis (fins a 3) */
.bp-popup .bp-benefits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	list-style: none;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid rgba(127, 127, 127, .25);
}
.bp-popup .bp-benefits li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	color: var(--bp-text-soft);
}
.bp-popup .bp-benefits img,
.bp-popup .bp-benefits svg {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 0;
	color: var(--bp-accent-text);
}

.bp-popup .bp-legal {
	font-size: 12px;
	line-height: 1.4;
	color: var(--bp-text-soft);
	margin: 14px 0 0;
}
.bp-popup .bp-legal a { color: inherit; }

.bp-popup .bp-dismiss {
	display: block;
	width: fit-content;
	margin: 12px auto 0;
	font-size: 14px;
	color: var(--bp-text-soft);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}
.bp-popup .bp-dismiss:hover { color: var(--bp-text); }

/* ─────────── Gravity Forms dins del pop-up ─────────── */

.bp-popup .gform_wrapper {
	margin: 0 !important;
}
.bp-popup .gform_wrapper .gform_fields {
	row-gap: 12px !important;
}
.bp-popup .gform_wrapper .gfield_label,
.bp-popup .gform_wrapper legend.gfield_label {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bp-text-soft) !important;
}
.bp-popup .gform_wrapper input[type="email"],
.bp-popup .gform_wrapper input[type="text"],
.bp-popup .gform_wrapper input[type="tel"] {
	width: 100% !important;
	min-height: 52px;
	padding: 12px 18px !important;
	border: 1px solid var(--bp-field-border) !important;
	border-radius: 999px !important;
	background: var(--bp-field-bg) !important;
	color: var(--bp-dark) !important;
	font-family: var(--bp-font) !important;
	font-size: 16px !important; /* 16px evita el zoom d'iOS */
	box-shadow: none !important;
}
.bp-popup .gform_wrapper input::placeholder {
	color: #6B7A7E;
}

.bp-popup .gform_wrapper .gfield--type-consent,
.bp-popup .gform_wrapper .ginput_container_consent,
.bp-popup .gform_wrapper .gfield_consent_label {
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: var(--bp-text-soft) !important;
}
.bp-popup .gform_wrapper .gfield_consent_label a { color: inherit; }
.bp-popup .gform_wrapper input[type="checkbox"] {
	accent-color: var(--bp-turquoise);
	width: 18px;
	height: 18px;
}

/* Casella de consentiment: el tema amaga l'input i en dibuixa una de falsa a label::before, i
   Gravity Forms (Orbital) torna a mostrar l'input amb la seva icona de tic: se'n veien dues.
   Al pop-up només queda l'input real (accessible amb teclat), dibuixat amb els colors de Bassols. */
.bp-popup .gform_wrapper .ginput_container_consent {
	display: flex !important;
	align-items: flex-start;
	gap: 0 10px !important;
}
.bp-popup .gform_wrapper .ginput_container_consent input[type="checkbox"] {
	display: grid !important;
	place-content: center;
	-webkit-appearance: none !important;
	appearance: none !important;
	flex: 0 0 18px;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid #D0D5DD !important;
	border-radius: 4px !important;
	background: var(--bp-white) !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
	cursor: pointer;
}
.bp-popup .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked {
	background: var(--bp-turquoise) !important;
	border-color: var(--bp-turquoise) !important;
}
/* Tic dibuixat amb vores (substitueix la icona d'Orbital) */
.bp-popup .gform_wrapper .ginput_container_consent input[type="checkbox"]::before {
	content: "" !important;
	width: 4px !important;
	height: 8px !important;
	margin-top: -2px;
	border: solid var(--bp-white) !important;
	border-width: 0 2px 2px 0 !important;
	background: none !important;
	font-size: 0 !important;
	transform: rotate(45deg);
	opacity: 0;
}
.bp-popup .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked::before {
	opacity: 1;
}
.bp-popup .gform_wrapper .gfield_consent_label {
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
}
.bp-popup .gform_wrapper .gfield_consent_label::before,
.bp-popup .gform_wrapper .gfield_consent_label::after {
	content: none !important;
	display: none !important;
}

.bp-popup .gform_wrapper .gform_footer {
	margin: 4px 0 0 !important;
	padding: 0 !important;
}
.bp-popup .gform_wrapper .gform_button,
.bp-popup .gform_wrapper .gform_footer input[type="submit"],
.bp-popup .gform_wrapper .gform_footer button,
.bp-popup .bp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100% !important;
	min-height: 54px;
	padding: 14px 24px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--bp-accent) !important;
	color: var(--bp-btn-text) !important;
	font-family: var(--bp-font-title) !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition: filter .2s ease;
}
.bp-popup.bp-theme-light .gform_wrapper .gform_button,
.bp-popup.bp-theme-light .gform_wrapper .gform_footer input[type="submit"],
.bp-popup.bp-theme-light .gform_wrapper .gform_footer button,
.bp-popup.bp-theme-light .bp-button {
	background: var(--bp-gradient) !important;
}
.bp-popup .gform_wrapper .gform_button:hover,
.bp-popup .gform_wrapper .gform_footer button:hover,
.bp-popup .bp-button:hover {
	filter: brightness(1.06);
}

.bp-popup .gform_wrapper .validation_message,
.bp-popup .gform_wrapper .gfield_validation_message {
	font-size: 13px !important;
	padding: 6px 0 0 !important;
	background: none !important;
	border: 0 !important;
}
.bp-popup.bp-theme-dark .gform_wrapper .validation_message,
.bp-popup.bp-theme-dark .gform_wrapper .gfield_validation_message {
	color: #FFB4A9 !important;
}
.bp-popup .gform_validation_errors {
	border-radius: 12px !important;
	margin-bottom: 12px !important;
}

/* Etiquetes ocultes visualment però llegibles pels lectors de pantalla */
.bp-popup .bp-labels-hidden .gfield_label,
.bp-popup .bp-labels-hidden legend.gfield_label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Missatge d'èxit */
.bp-popup .gform_confirmation_message {
	font-family: var(--bp-font-title);
	font-weight: 600;
	font-size: 18px;
	text-align: center;
	color: var(--bp-text);
	padding: 12px 0;
}

/* ─────────── Accessibilitat ─────────── */

.bp-popup a:focus-visible,
.bp-popup button:focus-visible,
.bp-popup input:focus-visible,
.bp-popup .spu-close:focus-visible {
	outline: 3px solid var(--bp-aqua) !important;
	outline-offset: 2px;
}
.spu-box.bp-popup:focus { outline: none; }

/* ─────────── Mòbil ─────────── */

@media (max-width: 767px) {
	.bp-popup .bp-layout,
	.bp-popup .bp-layout.bp-media-left {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.bp-popup .bp-layout .bp-media {
		order: -1;
		max-width: 160px;
		margin: 0 auto;
	}
	.bp-popup.bp-no-media-mobile .bp-media { display: none; }

	.bp-popup .bp-benefits {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	/* Logo i lema centrats */
	.bp-popup .bp-logo {
		justify-content: center;
	}

	/* Bottom-sheet: a baix, amb marges laterals, sense intersticial a pantalla completa */
	.spu-box.bp-sheet-mobile {
		top: auto !important;
		bottom: 12px !important;
		left: 12px !important;
		right: 12px !important;
		margin: 0 !important;
		width: calc(100% - 24px) !important;
		max-width: calc(100% - 24px) !important;
		max-height: calc(85vh - 12px) !important;
		border-radius: 20px !important;
		transform: none !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.spu-box.bp-sheet-mobile .spu-container {
		animation: bp-sheet-in .3s ease-out;
	}
	.spu-box.bp-sheet-mobile::after {
		/* agafador visual del bottom-sheet */
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 2px;
		background: currentColor;
		opacity: .25;
		display: block;
	}
}

@keyframes bp-sheet-in {
	from { transform: translateY(40px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.spu-box.bp-sheet-mobile .spu-container { animation: none; }
	.bp-popup .gform_wrapper .gform_button { transition: none; }
}