/* FlowFitt Studio dentro del tema FlowFitt: mismos colores, letra y botones.
   Solo se carga cuando el plugin está activo. */

/* ---------- Ícono del carrito en el encabezado ---------- */
.ff-header .ff-cart {
	position: relative;
	width: 42px; height: 42px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1.5px solid var(--ff-border); color: var(--ff-text);
	padding: 0; font-size: 0; text-decoration: none;
	transition: border-color .2s, color .2s;
}
.ff-header .ff-cart:hover { border-color: var(--ff-yellow); color: var(--ff-yellow); }
.ff-header .ff-cart svg { width: 19px; height: 19px; }
.ff-header .ff-cart .ff-cart__count {
	position: absolute; top: -5px; right: -6px;
	min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
	background: var(--ff-yellow); color: var(--ff-yellow-ink);
	font: 900 .66rem/19px var(--ff-font); text-align: center;
}
@media (max-width: 1024px) { .ff-header .ff-cart { width: 44px; height: 44px; } }

/* ---------- Área de las páginas del plugin ---------- */
.ff-studio-area { max-width: 1120px; margin: 0 auto; }
.ff-shop-page .ff-entry-hero { padding-bottom: clamp(24px, 4vw, 40px); }

/* ---------- Tienda: planes, carrito y finalizar compra ---------- */
.ff-studio .fsx {
	--fsx-purple: var(--ff-yellow);
	--fsx-yellow: var(--ff-yellow);
	--fsx-ink: var(--ff-text);
	--fsx-muted: var(--ff-muted);
	--fsx-line: var(--ff-border-soft);
	color: var(--ff-text);
	font-family: var(--ff-font);
	max-width: 1120px;
}
.ff-studio .fsx-plan,
.ff-studio .fsx-box {
	background: var(--ff-card);
	border: 1.5px solid var(--ff-border);
	border-radius: 20px;
	box-shadow: none;
}
.ff-studio .fsx-plan { padding: 26px 22px; gap: 10px; transition: transform .3s var(--ff-ease), border-color .3s; }
.ff-studio .fsx-plan:hover { transform: translateY(-4px); border-color: var(--ff-yellow); }
.ff-studio .fsx .fsx-plan-name { color: var(--ff-text); font-weight: 900; text-transform: uppercase; font-size: 1.35rem; }
.ff-studio .fsx-plan-price { color: var(--ff-text); font-weight: 900; font-size: clamp(1.9rem, 3vw, 2.4rem); }
.ff-studio .fsx-plan-meta { color: var(--ff-muted); font-weight: 600; }
.ff-studio .fsx-plan-tag { background: var(--ff-yellow); color: var(--ff-yellow-ink); font-weight: 900; }
.ff-studio .fsx-plan-more summary { color: var(--ff-lilac); }
.ff-studio .fsx .fsx-box h2 { color: var(--ff-text); font-weight: 900; text-transform: uppercase; }

.ff-studio .fsx .fsx-btn,
.ff-studio a.fsx-btn {
	border-radius: 999px; padding: 1em 1.6em;
	font-family: var(--ff-font); font-weight: 800; font-size: .85rem;
	letter-spacing: .02em; text-transform: uppercase;
	transition: transform .25s var(--ff-ease), box-shadow .25s var(--ff-ease);
}
.ff-studio .fsx .fsx-btn-primary,
.ff-studio a.fsx-btn-primary { background: var(--ff-yellow); color: var(--ff-yellow-ink); }
.ff-studio .fsx .fsx-btn-primary:hover,
.ff-studio a.fsx-btn-primary:hover { background: var(--ff-yellow); color: var(--ff-yellow-ink); transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(254, 201, 59, .55); }
.ff-studio .fsx .fsx-link { color: var(--ff-lilac); }

.ff-studio .fsx-line { border-bottom-color: var(--ff-border-soft); }
.ff-studio .fsx-qty-btn { background: transparent; border-color: var(--ff-border); color: var(--ff-text); }
.ff-studio .fsx-qty-btn:hover { border-color: var(--ff-yellow); color: var(--ff-yellow); }
.ff-studio .fsx-remove { color: var(--ff-muted); }
.ff-studio .fsx-total strong { color: var(--ff-yellow); }
.ff-studio .fsx-sum-line { border-bottom-color: var(--ff-border-soft); }
.ff-studio .fsx-note { background: rgba(254, 201, 59, .1); color: var(--ff-text); border-left-color: var(--ff-yellow); }

.ff-studio .fsx form label { color: var(--ff-text); }
.ff-studio .fsx form input[type=text],
.ff-studio .fsx form input[type=email],
.ff-studio .fsx form input[type=tel],
.ff-studio .fsx form input[type=password],
.ff-studio .fsx .fsx-login input {
	background: var(--ff-bg); color: var(--ff-text);
	border: 1.5px solid var(--ff-border); border-radius: 12px;
}
.ff-studio .fsx form input:focus { border-color: var(--ff-yellow); outline: none; }
.ff-studio .fsx .fsx-check { color: var(--ff-muted); }
.ff-studio .fsx .fsx-check input { accent-color: var(--ff-yellow); }
.ff-studio .fsx .fsx-gw { border-color: var(--ff-border); color: var(--ff-text); }
.ff-studio .fsx .fsx-gw input { accent-color: var(--ff-yellow); }
.ff-studio .fsx .fsx-gw:has(input:checked) { border-color: var(--ff-yellow); background: rgba(254, 201, 59, .08); }
.ff-studio .fsx-bank { background: var(--ff-bg); border-color: var(--ff-border); color: var(--ff-text); }
.ff-studio .fsx-msg-err { background: rgba(255, 93, 115, .12); color: #ffb3bf; border-color: rgba(255, 93, 115, .35); }
.ff-studio .fsx-msg-ok { background: rgba(80, 220, 140, .12); color: #a6f0c6; border-color: rgba(80, 220, 140, .35); }
.ff-studio .fsx-req { color: #ff8a9b; }

.ff-studio .fsx-toast { background: var(--ff-card-2); color: var(--ff-text); border: 1px solid var(--ff-border); font-family: var(--ff-font); }
.ff-studio .fsx-toast a { color: var(--ff-yellow); }

/* ---------- Horario público con reservas ---------- */
.ff-studio .fs-schedule-public { color: var(--ff-text); font-family: var(--ff-font); }
.ff-studio .fs-schedule-public .fs-schedule-grid { gap: 12px; }
.ff-studio .fs-schedule-public .fs-schedule-day {
	background: rgba(18, 12, 59, .5); border: 1.5px solid var(--ff-border); border-radius: 14px;
}
.ff-studio .fs-schedule-public .fs-schedule-day h3 {
	color: var(--ff-lilac); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800;
}
.ff-studio .fs-schedule-public .fs-class-card { background: var(--ff-card); border-color: var(--ff-border-soft); color: var(--ff-text); }
.ff-studio .fs-schedule-public .fs-class-card strong { color: var(--ff-text); }
.ff-studio .fs-schedule-public .fs-class-card span { color: var(--ff-yellow); text-transform: uppercase; font-weight: 900; }
.ff-studio .fs-schedule-public .fs-class-card small { color: var(--ff-muted); }
.ff-studio .fs-schedule-public .fs-spots { color: var(--ff-lilac) !important; }
.ff-studio .fs-schedule-public .fs-btn { background: var(--ff-yellow); color: var(--ff-yellow-ink); border-radius: 999px; font-family: var(--ff-font); font-weight: 900; text-transform: uppercase; font-size: .72rem; }
.ff-studio .fs-schedule-public .fs-btn-waitlist { background: transparent; color: var(--ff-yellow); border: 2px solid var(--ff-yellow); }
.ff-studio .fs-schedule-public .fs-details summary { color: var(--ff-lilac); }
.ff-studio .fs-schedule-public .fs-details p { color: var(--ff-muted); }

/* ---------- Panel del cliente, profes y administración ----------
   Son pantallas de trabajo con mucha información: se muestran en un panel claro
   para que todo se lea bien, con los acentos de la marca. */
.ff-studio .ff-studio-area > .fs-front:not(.fs-schedule-public),
.ff-studio .ff-pagelayer-area .fs-front:not(.fs-schedule-public) {
	--fs-purple: #4c0587;
	--fs-yellow: var(--ff-yellow);
	background: #ffffff;
	color: #0f172a;
	border-radius: 22px;
	padding: clamp(18px, 3vw, 32px);
	font-family: var(--ff-font);
}
.ff-studio .fs-front:not(.fs-schedule-public) h2,
.ff-studio .fs-front:not(.fs-schedule-public) h3,
.ff-studio .fs-front:not(.fs-schedule-public) h4 { color: #4c0587; text-transform: none; }
.ff-studio .fs-front .fs-btn { border-radius: 999px; font-family: var(--ff-font); }

/* El aviso de inicio de sesión del horario */
.ff-studio .fs-schedule-public .fs-notice-inline,
.ff-studio .fs-schedule-public form { color: #0f172a; }
.ff-studio .fs-schedule-public h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); text-transform: none; line-height: 1.15; }
.ff-studio .fs-schedule-public .fs-schedule-grid { margin-top: 18px; }
.ff-studio .fs-front h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.15; }