/*
 * Italian Fashion Sourcing · pulsanti del sito
 *
 * Tre grafiche al posto delle diciotto di prima:
 *   1. Navigazione scuro   fondo olivo, testo bianco, pillola, maiuscolo
 *   2. Navigazione chiaro  fondo bianco, testo e bordo olivo (su fondi olivo e scuri:
 *                          pieno bianco per il primo pulsante, contorno bianco per il secondo)
 *   3. Azione              oro, testo scuro, angoli 10px, testo normale (moduli, invio)
 * Tutti: sollevamento al passaggio, pressione e onda al clic (assets/js/ifs-buttons.js).
 *
 * È uno strato che si sovrappone ai file delle pagine: per questo usa !important
 * sulle sole proprietà grafiche. Caricato su tutte le pagine dopo i pacchetti.
 *
 * @author    Wave Digital <info@wavedigital.it>
 * @copyright Wave Srl, Firenze
 * @link      https://www.wavedigital.it
 */

:root {
	--ifs-b-olive: #6f6d4f;      /* olivo dei pulsanti: bianco leggibile 5,3:1 */
	--ifs-b-olive-hi: #5a583f;
	--ifs-b-cream: #e4e1cf;
	--ifs-b-gold: #d4a017;
	--ifs-b-gold-hi: #e2b02a;
	--ifs-b-ink: #2e2e2e;
	--ifs-b-white: #fff;
	--ifs-b-shadow: 0 6px 16px -8px rgba(46, 46, 46, .45);
}

/* ---------- Gruppi ---------- */

/* Tutti i pulsanti: base comune */
:is(.ifs-btn, .ifs-hbtn, .ifs-ls-btn, .ifs-legal__button, .ifs-lb__cta, .ifs-cards__extra-link,
	.ifsf-form button, .ifsf-acc button, .ifs-legal .btn, .sbi_follow_btn a) {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease !important;
	-webkit-tap-highlight-color: transparent;
}

/* 1. Navigazione scuro */
:is(.ifs-btn--primary, .ifs-btn--accent, .ifs-hbtn--primary, .ifs-hbtn--solid, .ifs-hbtn--accent, .ifs-hbtn--accent-bordered,
	.ifs-ls-btn--primary, .ifs-ls-btn--accent, .ifs-legal__button, .ifs-lb__cta, .sbi_follow_btn a) {
	background-color: var(--ifs-b-olive) !important;
	border: 2px solid var(--ifs-b-olive) !important;
	color: var(--ifs-b-white) !important;
	border-radius: 999px !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	font-weight: 400 !important;
}
:is(.ifs-btn--primary, .ifs-btn--accent, .ifs-hbtn--primary, .ifs-hbtn--solid, .ifs-hbtn--accent, .ifs-hbtn--accent-bordered,
	.ifs-ls-btn--primary, .ifs-ls-btn--accent, .ifs-legal__button, .ifs-lb__cta, .sbi_follow_btn a):is(:hover, :focus-visible) {
	background-color: var(--ifs-b-olive-hi) !important;
	border-color: var(--ifs-b-olive-hi) !important;
	color: var(--ifs-b-white) !important;
}

/* 2. Navigazione chiaro */
:is(.ifs-hbtn--white, .ifs-hbtn--light, .ifs-hbtn--secondary, .ifs-hbtn--outline-accent, .ifs-ls-btn--ghost, .ifs-cards__extra-link) {
	background-color: var(--ifs-b-white) !important;
	border: 2px solid var(--ifs-b-olive) !important;
	color: var(--ifs-b-olive) !important;
	border-radius: 999px !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	font-weight: 400 !important;
}
:is(.ifs-hbtn--white, .ifs-hbtn--light, .ifs-hbtn--secondary, .ifs-hbtn--outline-accent, .ifs-ls-btn--ghost, .ifs-cards__extra-link):is(:hover, :focus-visible) {
	background-color: var(--ifs-b-cream) !important;
	border-color: var(--ifs-b-olive) !important;
	color: var(--ifs-b-olive) !important;
}

/* Su fondi olivo e scuri: il primo pulsante bianco pieno, il secondo a contorno bianco */
:is(.ifs-sv-hero, .ifs-sp-hero, .ifs-home .ifs-hero, .ifs-front .ifs-hero, .ifs-ls-how, .ifs-ls-hero, .ifs-404, .ifs-sv-cards, .ifs-aw-ways)
	:is(.ifs-hbtn--accent, .ifs-hbtn--accent-bordered, .ifs-hbtn--white, .ifs-ls-btn--accent) {
	background-color: var(--ifs-b-white) !important;
	border-color: var(--ifs-b-white) !important;
	color: var(--ifs-b-olive) !important;
}
:is(.ifs-sv-hero, .ifs-sp-hero, .ifs-home .ifs-hero, .ifs-front .ifs-hero, .ifs-ls-how, .ifs-ls-hero, .ifs-404, .ifs-sv-cards, .ifs-aw-ways)
	:is(.ifs-hbtn--accent, .ifs-hbtn--accent-bordered, .ifs-hbtn--white, .ifs-ls-btn--accent):is(:hover, :focus-visible) {
	background-color: var(--ifs-b-cream) !important;
	border-color: var(--ifs-b-cream) !important;
	color: var(--ifs-b-olive) !important;
}
:is(.ifs-sv-hero, .ifs-sp-hero, .ifs-home .ifs-hero, .ifs-front .ifs-hero, .ifs-ls-how, .ifs-ls-hero, .ifs-404, .ifs-sv-cards, .ifs-aw-ways)
	:is(.ifs-hbtn--light, .ifs-hbtn--secondary, .ifs-ls-btn--ghost) {
	background-color: transparent !important;
	border-color: var(--ifs-b-white) !important;
	color: var(--ifs-b-white) !important;
}
:is(.ifs-sv-hero, .ifs-sp-hero, .ifs-home .ifs-hero, .ifs-front .ifs-hero, .ifs-ls-how, .ifs-ls-hero, .ifs-404, .ifs-sv-cards, .ifs-aw-ways)
	:is(.ifs-hbtn--light, .ifs-hbtn--secondary, .ifs-ls-btn--ghost):is(:hover, :focus-visible) {
	background-color: rgba(255, 255, 255, .14) !important;
	border-color: var(--ifs-b-white) !important;
	color: var(--ifs-b-white) !important;
}

/* 3. Azione: moduli, invio, iscrizione, contatti nelle policy */
:is(.ifsf-form button, .ifsf-acc button, .ifs-legal .btn):not(.ifsf-prev, .ifsf-ss-toggle, [role="option"]) {
	background-color: var(--ifs-b-gold) !important;
	border: 2px solid var(--ifs-b-gold) !important;
	color: var(--ifs-b-ink) !important;
	border-radius: 10px !important;
	text-transform: none !important;
	letter-spacing: .01em !important;
	font-weight: 500 !important;
}
:is(.ifsf-form button, .ifsf-acc button, .ifs-legal .btn):not(.ifsf-prev, .ifsf-ss-toggle, [role="option"]):is(:hover, :focus-visible) {
	background-color: var(--ifs-b-gold-hi) !important;
	border-color: var(--ifs-b-gold-hi) !important;
	color: var(--ifs-b-ink) !important;
}
/* "Indietro" nei moduli a passaggi: navigazione chiaro */
:is(.ifsf-form, .ifsf-acc) button.ifsf-prev {
	background-color: var(--ifs-b-white) !important;
	border: 2px solid var(--ifs-b-olive) !important;
	color: var(--ifs-b-olive) !important;
	border-radius: 10px !important;
}
:is(.ifsf-form, .ifsf-acc) button.ifsf-prev:is(:hover, :focus-visible) {
	background-color: var(--ifs-b-cream) !important;
}

/* ---------- Movimento ---------- */

:is(.ifs-btn, .ifs-hbtn, .ifs-ls-btn, .ifs-legal__button, .ifs-lb__cta, .ifs-cards__extra-link,
	.ifs-legal .btn, .sbi_follow_btn a):hover,
:is(.ifsf-form button, .ifsf-acc button):not(.ifsf-ss-toggle, [role="option"], :disabled):hover {
	transform: translateY(-1px);
	box-shadow: var(--ifs-b-shadow) !important;
}
:is(.ifs-btn, .ifs-hbtn, .ifs-ls-btn, .ifs-legal__button, .ifs-lb__cta, .ifs-cards__extra-link,
	.ifs-legal .btn, .sbi_follow_btn a):active,
:is(.ifsf-form button, .ifsf-acc button):not(.ifsf-ss-toggle, [role="option"], :disabled):active {
	transform: translateY(0) scale(.97);
	box-shadow: none !important;
}
:is(.ifs-btn, .ifs-hbtn, .ifs-ls-btn, .ifs-legal__button, .ifs-lb__cta, .ifs-cards__extra-link, .ifsf-form button, .ifsf-acc button, .ifs-legal .btn):focus-visible {
	outline: 3px solid var(--ifs-b-gold) !important;
	outline-offset: 3px;
}
:is(.ifs-hbtn, .ifs-btn, .ifs-ls-btn):hover :is(.ifs-hbtn__icon, .ifs-btn__icon) {
	transform: translateX(3px);
}
:is(.ifs-hbtn__icon, .ifs-btn__icon) {
	transition: transform .2s ease;
}

/* Comandi (fisarmoniche, schede, frecce, lingua, contatti rapidi, pagine): solo la pressione */
:is(.ifs-faq__q, .ifs-hw-acc__q, .ifs-tabs__title, .ifs-hw-nav__btn, .ifs-lang__toggle, .ifs-fab__toggle, .page-numbers) {
	transition: transform .15s ease, background-color .2s ease, color .2s ease;
}
:is(.ifs-hw-nav__btn, .ifs-lang__toggle, .ifs-fab__toggle, a.page-numbers):active {
	transform: scale(.94);
}
:is(.ifs-faq__q, .ifs-hw-acc__q, .ifs-tabs__title):active {
	transform: scale(.99);
}

/* Onda al clic: creata dallo script dentro il pulsante */
.ifs-ripple {
	position: absolute;
	z-index: -1;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
	animation: ifs-ripple .6s ease-out;
}
:is(.ifs-faq__q, .ifs-hw-acc__q, .ifs-tabs__title, .ifs-hw-nav__btn, .ifs-lang__toggle, .ifs-fab__toggle) > .ifs-ripple {
	z-index: 0;
}
@keyframes ifs-ripple {
	0% { opacity: .26; transform: scale(0); }
	100% { opacity: 0; transform: scale(var(--ifs-ripple-s, 40)); }
}

@media (prefers-reduced-motion: reduce) {
	:is(.ifs-btn, .ifs-hbtn, .ifs-ls-btn, .ifs-legal__button, .ifs-lb__cta, .ifs-cards__extra-link, .ifsf-form button, .ifsf-acc button, .ifs-legal .btn, .ifs-faq__q, .ifs-hw-acc__q, .ifs-tabs__title, .ifs-hw-nav__btn, .ifs-lang__toggle, .ifs-fab__toggle, .page-numbers),
	:is(.ifs-btn, .ifs-hbtn, .ifs-ls-btn, .ifs-legal__button, .ifs-lb__cta, .ifs-cards__extra-link, .ifsf-form button, .ifsf-acc button, .ifs-legal .btn, .ifs-faq__q, .ifs-hw-acc__q, .ifs-tabs__title, .ifs-hw-nav__btn, .ifs-lang__toggle, .ifs-fab__toggle, .page-numbers):is(:hover, :active) {
		transform: none !important;
	}
	.ifs-ripple { display: none; }
}

/* Intestazione: spazio stretto, il pulsante resta su una riga dove ci sta */
.ifs-header .ifs-header__cta {
	letter-spacing: .02em !important;
}

/* Pulsanti dei moduli: il testo va a capo invece di uscire dal pulsante (testi lunghi in alcune lingue) */
:is(.ifsf-form, .ifsf-acc) button:not(.ifsf-ss-toggle, [role="option"]) {
	white-space: normal !important;
	height: auto !important;
	line-height: 1.3 !important;
	text-align: center;
}

/* reCAPTCHA v3 invisibile: marchio nascosto su tutto il sito (la nota è sotto ogni modulo) */
.grecaptcha-badge { visibility: hidden !important; }

/* Newsletter in riga: il pulsante resta alto quanto il campo email */
.ifsf-nav-inline .ifsf-submit {
	align-self: stretch;
	min-height: 50px !important;
}
/* Nota reCAPTCHA sotto i moduli: link della stessa misura del testo, colori del contesto */
.ifsf-form .ifsf-rc-note {
	font-size: 11px;
	line-height: 1.5;
	color: inherit;
	opacity: .7;
}
.ifsf-form .ifsf-rc-note a {
	font-size: inherit !important;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ifs-nl .ifsf-form .ifsf-rc-note { color: #f4f2e4; }
/* I pulsanti dei moduli vanno a capo se serve, ma non scendono sotto l'altezza dei campi */
:is(.ifsf-form, .ifsf-acc) button:is(.ifsf-submit, .ifsf-next, .ifsf-prev) {
	min-height: 50px !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}
