/* ==========================================================================
   Responsive dell'area FC27 (Claude, 05/10/2026), su richiesta di Antonio:
   niente parole spezzate, niente pulsanti che si deformano o si sovrappongono,
   menu sempre tutto visibile (mai a scorrimento) a qualunque larghezza.
   Si appoggia sopra fc27-portal.css e fc27-students.css senza modificarli.
   ========================================================================== */

/* ---------- Barra «FC 27 · Masterclass Trading» ---------- */
body.jf-fc27-surface .jf-context-bar {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "brand nav toggle";
	align-items: center !important;
	gap: 10px 18px !important;
	flex-direction: row !important;
	box-sizing: border-box;
}
body.jf-fc27-surface .jf-context-bar > span { grid-area: brand; white-space: nowrap !important; min-width: 0; }
body.jf-fc27-surface .jf-context-bar > nav {
	grid-area: nav;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-end;
	gap: 4px !important;
	width: auto !important;
	min-width: 0;
	overflow: visible !important;
}
body.jf-fc27-surface .jf-context-bar > nav a {
	white-space: nowrap !important;
	word-break: keep-all !important;
	overflow-wrap: normal !important;
	text-align: center;
}
body.jf-fc27-surface .jf-context-bar > .jf-theme-toggle,
body.jf-fc27-surface .jf-context-bar > #jf-fc27-theme-toggle {
	grid-area: toggle;
	position: static !important;
	margin: 0 !important;
	white-space: nowrap !important;
	flex: 0 0 auto;
}
body.jf-fc27-surface .jf-context-bar #jf-fc27-theme-toggle * { white-space: nowrap !important; }

/* Quando non sta su una riga: marchio e tema sopra, menu sotto a tutta larghezza.
   Le voci vanno a capo per intero e riempiono le righe in modo uniforme. */
@media (max-width: 1080px) {
	body.jf-fc27-surface .jf-context-bar {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "brand toggle" "nav nav";
	}
	body.jf-fc27-surface .jf-context-bar > nav { justify-content: stretch; width: 100% !important; gap: 6px !important; }
	body.jf-fc27-surface .jf-context-bar > nav a { flex: 1 1 auto; display: inline-flex !important; align-items: center; justify-content: center; }
}
@media (max-width: 700px) {
	body.jf-fc27-surface .jf-context-bar { width: calc(100% - 26px) !important; padding: 12px !important; }
	body.jf-fc27-surface .jf-context-bar > span { white-space: normal !important; font-size: 12px; }
	body.jf-fc27-surface .jf-context-bar > nav a { padding: 9px 8px !important; font-size: 12px !important; }
}
/* Telefono: griglia fissa a righe da tre; con 5 voci l'ultima riga ne ha 2 più larghe (3 + 2), con 4 voci 2 + 2 */
@media (max-width: 620px) {
	body.jf-fc27-surface .jf-context-bar > nav { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
	body.jf-fc27-surface .jf-context-bar > nav > a { grid-column: span 2; min-width: 0; }
	body.jf-fc27-surface .jf-context-bar > nav:has(> a:nth-child(5):last-child) > a:nth-child(n+4) { grid-column: span 3; }
	body.jf-fc27-surface .jf-context-bar > nav:has(> a:nth-child(4):last-child) > a { grid-column: span 3; }
}
@media (max-width: 360px) {
	body.jf-fc27-surface .jf-context-bar > nav > a, body.jf-fc27-surface .jf-context-bar > nav:has(> a:nth-child(5):last-child) > a:nth-child(n+4) { grid-column: span 3; font-size: 11.5px !important; }
	body.jf-fc27-surface .jf-context-bar > nav:has(> a:nth-child(5):last-child) > a:last-child { grid-column: 1 / -1; }
}

/* ---------- Messaggi: «Nuovo messaggio» e cartelle ---------- */
.jf-student-area .wpc_msg_nav_list li,
.jf-student-area .wpc_msg_nav_list li.selected { white-space: nowrap !important; }
@media (max-width: 1000px) {
	.jf-student-area .wpc_msg_nav_wrapper { grid-template-columns: minmax(0, 1fr) !important; }
	.jf-student-area .wpc_msg_nav_list { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
	.jf-student-area .wpc_msg_nav_list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- Messaggi: selezione, filtri, ricerca e pagine ---------- */
.jf-student-area .wpc_msg_bulk_all,
.jf-student-area .wpc_msg_filter { white-space: nowrap !important; }
/* Ricerca e paginazione su due righe appena lo spazio non basta, mai sovrapposte */
@media (max-width: 1180px) {
	.jf-student-area .wpc_msg_top_nav_wrapper { grid-template-columns: minmax(0, 1fr) !important; }
	.jf-student-area .wpc_msg_pagination {
		width: 100% !important;
		min-width: 0 !important;
		justify-self: stretch;
		grid-template-columns: minmax(0, 1fr) auto 50px !important;
	}
	.jf-student-area .wpc_msg_pagination_text { white-space: nowrap; }
}
@media (max-width: 1180px) and (min-width: 701px) {
	.jf-student-area .wpc_msg_controls_line { grid-template-columns: minmax(150px, auto) minmax(140px, auto) minmax(220px, 1fr) !important; }
}
@media (max-width: 700px) {
	.jf-student-area .wpc_msg_controls_line { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.jf-student-area .wpc_msg_search_line { grid-column: 1 / -1 !important; }
}
@media (max-width: 360px) {
	.jf-student-area .wpc_msg_controls_line { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Barra con 6 voci (Area Studenti + Supporto): due righe già sotto i 1200 px */
@media (max-width: 1200px) {
	body.jf-fc27-surface .jf-context-bar:has(> nav > a:nth-child(6)) {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "brand toggle" "nav nav";
	}
	body.jf-fc27-surface .jf-context-bar:has(> nav > a:nth-child(6)) > nav { justify-content: stretch; width: 100% !important; gap: 6px !important; }
	body.jf-fc27-surface .jf-context-bar:has(> nav > a:nth-child(6)) > nav a { flex: 1 1 auto; display: inline-flex !important; align-items: center; justify-content: center; }
}

/* ---------- Mio account: indirizzi ----------
   La griglia a due colonne del tema contava anche i due elementi invisibili del vecchio «clearfix» di WooCommerce:
   fatturazione finiva nella seconda colonna e spedizione nella riga sotto, con due buchi vuoti. */
body.jf-fc27-surface .woocommerce-Addresses::before,
body.jf-fc27-surface .woocommerce-Addresses::after { display: none !important; content: none !important; }
body.jf-fc27-surface .woocommerce-Address-title {
	display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px;
	margin: 0 0 14px !important; float: none !important;
}
body.jf-fc27-surface .woocommerce-Address-title h2,
body.jf-fc27-surface .woocommerce-Address-title h3 { margin: 0 !important; font-size: clamp(19px, 2vw, 23px) !important; line-height: 1.25 !important; }
body.jf-fc27-surface .woocommerce-Address-title a.edit {
	float: none !important; display: inline-flex !important; align-items: center; min-height: 38px; padding: 0 14px !important;
	border: 1px solid #52f2ca !important; border-radius: 11px !important; color: #52f2ca !important; background: rgba(82, 242, 202, .08) !important;
	font-size: 13.5px !important; font-weight: 800 !important; text-decoration: none !important; white-space: nowrap;
}
body.jf-fc27-surface .woocommerce-Address-title a.edit:hover { background: rgba(82, 242, 202, .18) !important; color: #eafff9 !important; }
html[data-jf-theme="light"] body.jf-fc27-surface .woocommerce-Address-title a.edit { color: #087565 !important; border-color: #087565 !important; background: rgba(8, 117, 101, .06) !important; }
html[data-jf-theme="light"] body.jf-fc27-surface .woocommerce-Address-title a.edit:hover { color: #04463c !important; background: rgba(8, 117, 101, .13) !important; }
body.jf-fc27-surface .woocommerce-Address address { margin: 0 !important; font-style: normal !important; line-height: 1.65 !important; }
body.jf-fc27-surface .woocommerce-Address-title h2,
body.jf-fc27-surface .woocommerce-Address-title h3 { flex: 1 1 100%; text-align: left !important; float: none !important; }
body.jf-fc27-surface .woocommerce-Address-title { justify-content: flex-start !important; text-align: left !important; }

/* ---------- Mio account: ordini ----------
   Sul telefono la tabella diventa una scheda per ordine (etichette dai data-title di WooCommerce): niente parole spezzate. */
body.jf-fc27-surface .woocommerce-orders-table td,
body.jf-fc27-surface .woocommerce-orders-table th { white-space: nowrap; }
body.jf-fc27-surface .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total { white-space: normal; }
@media (max-width: 700px) {
	body.jf-fc27-surface table.woocommerce-orders-table,
	body.jf-fc27-surface table.woocommerce-orders-table tbody { display: block !important; width: 100% !important; border: 0 !important; background: none !important; }
	body.jf-fc27-surface table.woocommerce-orders-table thead { display: none !important; }
	body.jf-fc27-surface table.woocommerce-orders-table tr {
		display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px;
		margin: 0 0 12px; padding: 14px; border: 1px solid var(--jf-line, rgba(147,164,183,.22)); border-radius: 14px;
	}
	body.jf-fc27-surface table.woocommerce-orders-table td,
	body.jf-fc27-surface table.woocommerce-orders-table tbody th {
		display: block !important; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; background: none !important;
	}
	body.jf-fc27-surface table.woocommerce-orders-table tbody th::before,
	body.jf-fc27-surface table.woocommerce-orders-table td::before {
		content: attr(data-title); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em;
		text-transform: uppercase; color: var(--jf-muted, #8fa3b5); float: none !important;
	}
	body.jf-fc27-surface table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { grid-column: 1 / -1; }
	body.jf-fc27-surface table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before { display: none; }
	body.jf-fc27-surface table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button { display: flex !important; width: 100% !important; justify-content: center; margin: 4px 0 0 !important; }
}

/* ---------- Mio account: dettagli account ----------
   Il pulsante «mostra password» di WooCommerce era un trattino senza stile sotto ogni campo: ora è un occhio dentro il campo. */
body.jf-fc27-surface .woocommerce form .password-input { position: relative !important; display: block !important; width: 100% !important; }
body.jf-fc27-surface .woocommerce form .password-input input { padding-right: 48px !important; }
body.jf-fc27-surface .woocommerce form .show-password-input {
	position: absolute !important; top: 50% !important; right: 8px !important; left: auto !important; transform: translateY(-50%);
	width: 34px !important; height: 34px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
	border: 0 !important; border-radius: 8px !important; box-shadow: none !important; cursor: pointer;
	color: var(--jf-muted, #8fa3b5);
	background: currentColor !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
}
body.jf-fc27-surface .woocommerce form .show-password-input::before,
body.jf-fc27-surface .woocommerce form .show-password-input::after { content: none !important; }
body.jf-fc27-surface .woocommerce form .show-password-input > * { display: none !important; }
body.jf-fc27-surface .woocommerce form .show-password-input:hover,
body.jf-fc27-surface .woocommerce form .show-password-input.display-password { color: #52f2ca; }
body.jf-fc27-surface .woocommerce-EditAccountForm fieldset legend {
	margin: 18px 0 8px !important; padding: 0 !important; border: 0 !important;
	font-size: 16px !important; font-weight: 850 !important; color: var(--jf-text, #eef4fa) !important;
}

/* Telefono: spazio in fondo ai contenuti, così l'ultimo pulsante si porta sempre sopra le icone fisse (John e chat) */
@media (max-width: 700px) {
	body.jf-fc27-surface #main-container { padding-bottom: 84px !important; }
}

/* ---------- Passaggio del mouse sui link ----------
   Il vecchio tema Kleo colora di rosa (#ed216b) i link al passaggio del mouse dove nessuno lo sovrascrive:
   nell'area FC27 si usa il verde del sito. I pulsanti restano con i loro colori. */
body.jf-fc27-surface .main-color a:not(.button):not(.btn):not([class*="button"]):not(.jf-acc-card):not(.jf-acc-logout):hover { color: #52f2ca; }
html[data-jf-theme="light"] body.jf-fc27-surface .main-color a:not(.button):not(.btn):not([class*="button"]):not(.jf-acc-card):not(.jf-acc-logout):hover { color: #087565; }