/*
 * scelgointernational.com — stili delle pagine pubbliche.
 * Servito da /assets/site.css (vedi routes/web.php): prima era scritto
 * direttamente nella home e conteneva anche stili di un altro sito (e-store,
 * volantini, cataloghi, metodi di pagamento) mai usati qui.
 *
 * Contrasti (WCAG 1.4.3): testo bianco su #007ab8 = 4,69:1. Il cyan
 * istituzionale #0080c8 (4,27:1) resta solo per testo grande e decorazioni.
 */

:root {
	--cyan: #0080c8;
	--cyan-aa: #007ab8;
	--more_cyan: #d5edf7;
	--light_cyan: #edf8fc;
	--blue: #024086;
	--navy: #002854;
	--grey: #f5f5f5;
	--shadow: 0px 2px 6.4px -1px #13102208;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body, p, h1, h2, h3, h4, h5, h6, div, .button {
	font-family: OpenSansRegular, "Open Sans", Arial, sans-serif !important;
	font-weight: 500 !important;
}
body {
	background: #fff;
}

h1, h2, h3, h4 {
	color: black;
	font-weight: bold !important;
}
h2 {
	font-size: 1.8rem !important;
}
h3 {
	font-size: 1.5rem !important;
}

/* ---------- Accessibilità: focus, skip-link, movimento ---------- */

/* Indicatore di focus a due toni: visibile su sfondi chiari e scuri (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 0;
	box-shadow: 0 0 0 6px var(--navy) !important;
}
/* Contenitori che ricevono il focus solo da script (es. main, riepilogo errori). */
[tabindex="-1"]:focus {
	outline: none !important;
	box-shadow: none !important;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 10000;
	padding: 10px 16px;
	background: var(--navy);
	color: #fff !important;
	font-weight: bold;
	border-radius: 4px;
}
.skip-link:focus {
	top: 8px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Layout comune ---------- */

.w-70 {
	width: 70%;
}
.w-30 {
	width: 30%;
}
.w-40 {
	width: 40% !important;
}
.split {
	flex: 1;
}
.flex-start-center {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.full_list {
	height: auto;
	padding: 30px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.blue {
	background: var(--blue) !important;
}
.dark_cyan {
	background: var(--navy) !important;
}
.cyan {
	background: var(--cyan-aa) !important;
}
.light_cyan {
	background: var(--light_cyan) !important;
}
.more_cyan {
	background: var(--more_cyan) !important;
}
.text_cyan {
	color: var(--cyan);
}
.subtitle {
	color: var(--cyan-aa);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Pulsanti e link con aspetto da pulsante */
.content button,
.btn-cta {
	display: inline-block;
	font-size: 15px;
	padding: 10px 40px;
	background: var(--cyan-aa);
	color: #fff !important;
	border: 0;
	border-radius: 11px;
	text-transform: uppercase;
	text-decoration: none !important;
	text-align: center;
}
.btn-cta {
	align-self: flex-start;
}
.btn-small {
	display: inline-block;
	padding: 5px 25px;
	margin: 0 15px 10px 0;
	border-radius: 10px;
	color: #fff !important;
}

/* ---------- Header ---------- */

.top-bar {
	background: var(--navy);
	min-height: 40px;
	color: white;
}
.header_links {
	width: 70%;
}
.header_links .p-2 a {
	color: white;
}
.header_links .p-2 img {
	margin-right: 5px;
}
.estore_header {
	width: 100%;
	color: white;
}
.main-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-nav a {
	display: inline-block;
	padding: 10px 0 10px 50px;
	color: white;
	text-transform: uppercase;
}

/* ---------- Sezioni della home ---------- */

.frame1 {
	background: var(--light_cyan) url('/img/new_layout/international/frame1.jpg') no-repeat;
	min-height: 400px;
	padding: 0 !important;
}
.frame1 h1,
.frame1 p {
	color: var(--blue);
	padding-bottom: 10px;
}

.frame2 {
	background: var(--cyan-aa);
}
.frame2 .information {
	width: 300px;
	max-width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.frame2 .information h3 {
	color: white;
	font-size: 14px !important;
	text-transform: uppercase;
	margin: 0 0 4px;
}
.frame2 .information p {
	color: white;
	font-size: 14px;
	margin: 0;
}
.frame2 .circle_logo {
	margin-right: 10px;
}
.circle_logo {
	background: #fff;
	min-width: 65px;
	height: 65px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.commitment_img {
	display: flex;
	justify-content: space-around;
}
.commitment_img img {
	max-width: 70%;
	height: auto;
}

.frame4 .boxes {
	margin-top: 20px;
	width: 100%;
}
.frame4 .box {
	background: white;
	width: 330px;
	max-width: calc(100% - 6px);
	min-height: 240px;
	padding: 20px;
	border-radius: 10px;
	margin: 3px;
	box-shadow: var(--shadow);
}
.frame4 .box div {
	padding-bottom: 10px;
}

.frame5 > div {
	flex: 1;
}
.frame5 .split-r img {
	width: 80%;
	height: auto;
}
.frame5 .checks {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}
.frame5 .check {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 10px 0;
	font-weight: 600 !important;
}
.frame5 .check img {
	margin-right: 5px;
}

.frame6 h2 {
	color: white;
}
.frame6 .stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.frame6 .stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	margin: 10px 30px;
}
.frame6 .stat-value {
	font-size: 35px;
	font-weight: bold !important;
}
.frame6 .stat-label {
	font-size: 80%;
	text-transform: uppercase;
}

.map_section img {
	max-width: 100%;
	height: auto;
}
.country-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
}
.country-list li {
	margin: 4px 12px;
}

.frame7 .our_brands {
	display: flex;
	flex-direction: row;
	justify-content: center;
	max-width: 100%;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
}
.frame7 .our_brands .brand {
	padding: 10px;
	margin: 10px;
	max-width: 200px;
	max-height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-radius: 10px;
	box-shadow: var(--shadow);
}
.frame7 .our_brands .brand img {
	max-width: 100%;
	max-height: 80px;
	height: auto;
	width: auto;
}
.brand-names {
	text-align: center;
	margin-top: 10px;
}

/* ---------- Modulo contatti ---------- */

.frame8 .row .col-6,
.frame8 .row .col-12 {
	display: flex;
	flex-direction: column;
	justify-content: start;
}
.frame8 .row .col-6 input {
	border: 1px solid #767676;
	height: 40px;
}
.frame8 .row .col-12 textarea {
	border: 1px solid #767676;
}
.frame8 [aria-invalid="true"] {
	border: 2px solid #b00020 !important;
}
.required-note {
	margin-bottom: 15px;
}
.field-error {
	color: #b00020;
	font-size: 14px;
	margin: 4px 0 8px;
}
.error-summary {
	border: 2px solid #b00020;
	border-radius: 8px;
	padding: 15px 20px;
	margin-bottom: 20px;
	background: #fff5f6;
}
.error-summary h3 {
	font-size: 1.1rem !important;
	color: #b00020;
}
.error-summary ul {
	margin: 0;
	padding-left: 20px;
}
.error-summary a {
	color: #b00020;
	text-decoration: underline;
}
.form-success {
	border: 2px solid #1e7b34;
	border-radius: 8px;
	padding: 15px 20px;
	margin-bottom: 20px;
	background: #f1faf3;
	color: #14522a;
}
.form-privacy {
	font-size: 14px;
	margin-top: 10px;
}
.form-privacy a,
.newsletter_footer a,
.footer-legal a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- Footer ---------- */

.footer {
	display: flex;
	flex-direction: row;
}
.footer a {
	color: white;
}
.newsletter_footer {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.newsletter_footer h2 {
	color: white !important;
}
.newsletter_footer .news_input input {
	width: 80%;
	height: 45px;
}
.newsletter_footer .news_input button {
	width: auto;
	font-size: 18px;
	height: 45px;
	color: #fff;
	border: 0;
	padding: 0 15px;
}
.newsletter-status {
	min-height: 1.5em;
	font-weight: bold !important;
}
.need_help {
	padding-left: 110px;
}
.footer-legal p {
	font-size: 13px;
	margin-bottom: 0;
}
.social_list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
.social_list a {
	display: block;
	background: white no-repeat center;
	width: 28px;
	height: 28px;
	margin-right: 6px;
	border-radius: 5px;
}
.social_list .facebook { background-image: url('/img/new_layout/icone/facebook.svg'); }
.social_list .youtube { background-image: url('/img/new_layout/icone/youtube.svg'); }
.social_list .linkedin { background-image: url('/img/new_layout/icone/linkedin.svg'); }
.social_list .instagram { background-image: url('/img/new_layout/icone/instagram.svg'); }

/* ---------- Torna su ---------- */

.back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1000;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.back-to-top[hidden] {
	display: none;
}

/* ---------- Pagine di testo (dichiarazione, privacy, newsletter) ---------- */

.statement {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 20px;
	line-height: 1.6;
	color: #333;
}
.statement h1 {
	font-size: 2rem;
	margin-bottom: 16px;
	color: #00527a;
}
.statement h2 {
	font-size: 1.35rem !important;
	margin-top: 30px;
	color: #00527a;
}
.statement ul {
	padding-left: 22px;
}
.statement li {
	margin-bottom: 6px;
}
.statement a {
	color: #0072b0;
	text-decoration: underline;
}
.statement code {
	color: #333;
}
.statement .back {
	display: inline-block;
	margin-top: 32px;
	font-weight: 700;
}
.statement button {
	padding: 10px 30px;
	border: 0;
	border-radius: 10px;
	background: var(--cyan-aa);
	color: #fff;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.w-30, .w-70, .header_links {
		width: 100% !important;
	}
	.w-30 {
		padding: 35px;
	}
	.map_section .w-70 {
		padding: 35px;
	}
	.w-40 {
		width: 85% !important;
	}
	.main-nav ul {
		justify-content: center;
	}
	.main-nav a {
		padding: 15px 8px;
		font-size: 12px;
	}
	.frame5 {
		flex-direction: column !important;
	}
	.frame5 .split-r {
		margin: 10px 0;
	}
	.frame5 .split-r img {
		width: 100%;
	}
	.commitment_img {
		justify-content: center;
		max-width: 100%;
	}
	.commitment_div {
		flex-direction: column !important;
	}
	.footer_logo {
		padding: 20px;
		justify-content: center !important;
	}
	.est_head {
		flex-direction: column !important;
	}
	.header_links {
		justify-content: center !important;
	}
	.est_head img {
		padding: 10px 0;
	}
	.top-bar {
		font-size: 12px;
	}
	.frame2_info .information {
		padding: 10px 0;
	}
	.frame3 .split, .frame5 .split {
		padding: 35px;
	}
	.frame2_info, .frame4 .boxes {
		flex-direction: column !important;
		justify-content: center !important;
	}
	.frame6 .stats {
		flex-direction: column;
	}
	.newsletter_footer .split {
		padding: 15px !important;
	}
	.newsletter_footer .news_input input {
		width: 70%;
	}
	.newsletter_footer .news_input button {
		width: 28%;
		font-size: 16px;
	}
	.newsletter_footer {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.need_help {
		padding-left: 15px;
	}
	.footer > .split {
		flex-direction: column !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.frame2_info, .frame4 .boxes {
		flex-direction: row !important;
		justify-content: space-around !important;
	}
	.main-nav a {
		font-size: 20px;
	}
	.w-30 {
		width: 60% !important;
	}
	.need_help {
		width: 65% !important;
	}
}

/* Schermi molto stretti (320px, zoom 400%): niente colonne affiancate nel modulo. */
@media (max-width: 575px) {
	.frame8 .row .col-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.w-40 {
		width: 100% !important;
		padding: 0 15px;
	}
	.newsletter_footer .news_input {
		flex-direction: column;
		align-items: stretch !important;
	}
	.newsletter_footer .news_input input,
	.newsletter_footer .news_input button {
		width: 100%;
		margin-bottom: 8px;
	}
}