/* yourservice-form.css - stili per cambiare look del form in base alla categoria */
.yourservice-form-wrapper{transition:background .2s ease !important;padding:12px !important;border-radius:6px !important}
.yourservice-form-wrapper, .yourservice-category-form {
	/* import fonts for themes */
}
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@400;600;700&family=Playfair+Display:ital,wght@0,400;1,400&family=Roboto+Condensed:wght@400;700&display=swap');
.yourservice-form-root{--ys-accent:#ff9f40 !important;--ys-accent-2:#6d2350 !important;--ys-success:#8aa990 !important;--card-radius:16px !important;--card-shadow:0 18px 50px rgba(5,6,8,0.15) !important;--glass-bg:rgba(255,255,255,0.12) !important;--barber-bg:#0b0b0c !important;--barber-text:#f3e6c9 !important;--barber-accent:#7a2f2a !important;} 
.yourservice-form-wrapper.categoria-barbiere{background:#fff7e6 !important}
.yourservice-form-wrapper.categoria-parrucchiere{background:#eef7ff !important}
.yourservice-form-wrapper.categoria-estetista{background:#f7eefc !important}

/* Wrapper: stili specifici per Barbiere */
.yourservice-form-wrapper.categoria-barbiere{border:2px solid #ffcc66 !important;padding:16px !important}
.yourservice-form-wrapper.categoria-barbiere h3{color:#b35a00 !important}
.yourservice-form-wrapper.categoria-barbiere .wpcf7-submit{background:#ffcc66 !important;color:#111 !important;border:none !important;padding:10px 16px !important;border-radius:4px !important}
.yourservice-form-wrapper.categoria-barbiere .field-label{font-weight:700 !important;color:#8a4b00 !important}

/* Wrapper: stili specifici per Parrucchiere */
.yourservice-form-wrapper.categoria-parrucchiere{border:2px solid #66b3ff !important;padding:16px !important}
.yourservice-form-wrapper.categoria-parrucchiere h3{color:#0a5ea8 !important}
.yourservice-form-wrapper.categoria-parrucchiere .wpcf7-submit{background:#66b3ff !important;color:#fff !important;border:none !important;padding:10px 16px !important;border-radius:4px !important}
.yourservice-form-wrapper.categoria-parrucchiere .field-label{font-weight:700 !important;color:#0a4b85 !important}

/* Wrapper: stili specifici per Estetista */
.yourservice-form-wrapper.categoria-estetista{border:2px solid #d29bff !important;padding:16px !important}
.yourservice-form-wrapper.categoria-estetista h3{color:#6b2fa3 !important}
.yourservice-form-wrapper.categoria-estetista .wpcf7-submit{background:#d29bff !important;color:#fff !important;border:none !important;padding:10px 16px !important;border-radius:4px !important}
.yourservice-form-wrapper.categoria-estetista .field-label{font-weight:700 !important;color:#4e2476 !important}

.yourservice-category-form{transition:background .2s ease !important;padding:12px !important;border-radius:6px !important}
.yourservice-category-form.categoria-barbiere{background:#fff7e6 !important}
.yourservice-category-form.categoria-parrucchiere{background:#eef7ff !important}
.yourservice-category-form.categoria-estetista{background:#f7eefc !important}

/* Stili specifici per Barbiere */
.yourservice-category-form.categoria-barbiere{border:2px solid #ffcc66 !important;padding:16px !important}
.yourservice-category-form.categoria-barbiere h3{color:#b35a00 !important}
.yourservice-category-form.categoria-barbiere .wpcf7-submit{background:#ffcc66 !important;color:#111 !important;border:none !important;padding:10px 16px !important;border-radius:4px !important}
.yourservice-category-form.categoria-barbiere .field-label{font-weight:700 !important;color:#8a4b00 !important}

/* Stili specifici per Parrucchiere */
.yourservice-category-form.categoria-parrucchiere{border:2px solid #66b3ff !important;padding:16px !important}
.yourservice-category-form.categoria-parrucchiere h3{color:#0a5ea8 !important}
.yourservice-category-form.categoria-parrucchiere .wpcf7-submit{background:#66b3ff !important;color:#fff !important;border:none !important;padding:10px 16px !important;border-radius:4px !important}
.yourservice-category-form.categoria-parrucchiere .field-label{font-weight:700 !important;color:#0a4b85 !important}

/* Stili specifici per Estetista */
.yourservice-category-form.categoria-estetista{border:2px solid #d29bff !important;padding:16px !important}
.yourservice-category-form.categoria-estetista h3{color:#6b2fa3 !important}
.yourservice-category-form.categoria-estetista .wpcf7-submit{background:#d29bff !important;color:#fff !important;border:none !important;padding:10px 16px !important;border-radius:4px !important}
.yourservice-category-form.categoria-estetista .field-label{font-weight:700 !important;color:#4e2476 !important}

/* esempi di elementi che potremmo mostrare/nascondere */
.yourservice-category-extra{display:none !important;margin-top:8px !important}
.yourservice-category-form.categoria-barbiere .yourservice-extra-barbiere{display:block !important}
.yourservice-category-form.categoria-parrucchiere .yourservice-extra-parrucchiere{display:block !important}
.yourservice-category-form.categoria-estetista .yourservice-extra-estetista{display:block !important}

.hidden{display:none !important}

/* ==========================
	 Responsive, box-shadow, typography
	 ========================== */

.yourservice-category-form, .yourservice-form-wrapper{
	max-width:640px !important;
	margin:22px auto !important;
	box-shadow: 0 28px 64px rgba(10,10,10,0.14) !important;
	padding:20px 22px !important;
	border-radius:20px !important;
	background: rgba(255,255,255,0.94) !important;
	transition: all .22s ease !important;
	font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
	position:relative !important;
	overflow:visible !important;
}

/* Two-column helper: applied to CF7 control wraps by JS when pairing inputs */
.yourservice-category-form .wpcf7-form-control-wrap.ys-half,
.yourservice-form-wrapper .wpcf7-form-control-wrap.ys-half{
	display:inline-block !important;
	width:calc(50% - 12px) !important;
	vertical-align:top !important;
	margin-bottom:12px !important;
}
.yourservice-category-form .wpcf7-form-control-wrap.ys-half + .wpcf7-form-control-wrap.ys-half,
.yourservice-form-wrapper .wpcf7-form-control-wrap.ys-half + .wpcf7-form-control-wrap.ys-half{
	margin-left:24px !important;
}
.yourservice-category-form .wpcf7-form-control-wrap.ys-half .wpcf7-form-control,
.yourservice-form-wrapper .wpcf7-form-control-wrap.ys-half .wpcf7-form-control{
	width:100% !important; box-sizing:border-box !important;
}

@media (max-width:800px){
	.yourservice-category-form .wpcf7-form-control-wrap.ys-half,
	.yourservice-form-wrapper .wpcf7-form-control-wrap.ys-half{ display:block !important; width:100% !important; margin-left:0 !important }
}

/* decorative flourish under title */
.yourservice-category-form .form-deco, .yourservice-form-wrapper .form-deco{
	height:6px !important;width:120px !important;margin:6px auto 16px !important;border-radius:6px !important;opacity:.95 !important;
	background:linear-gradient(90deg,var(--ys-accent),#ff6f3b) !important;
}

.yourservice-category-form .wpcf7-form-control, .yourservice-form-wrapper .wpcf7-form-control{
	width:100% !important;
	padding:10px 12px !important;
	border:1px solid rgba(16,24,40,0.06) !important;
	border-radius:10px !important;
	box-sizing:border-box !important;
	margin-bottom:12px !important;
	background: rgba(255,255,255,0.94) !important;
	font-size:0.98rem !important;
	transition: border-color .16s ease, box-shadow .16s ease, transform .1s ease !important;
}

.yourservice-category-form .wpcf7-form-control:focus, .yourservice-form-wrapper .wpcf7-form-control:focus{
	border-color: rgba(0,0,0,0.12) !important;
	box-shadow: 0 8px 20px rgba(16,24,40,0.06) !important;
	transform: translateY(-1px) !important;
	outline: none !important;
}

.yourservice-category-form h3, .yourservice-form-wrapper h3{margin-top:0;margin-bottom:8px;font-size:1rem}
.yourservice-category-form .field-label, .yourservice-form-wrapper .field-label{display:block;margin-bottom:6px;font-size:0.92rem;color:#333}

/* Title styling (if used) */
.yourservice-category-form .form-title, .yourservice-form-wrapper .form-title{
	display:block !important;text-align:center !important;margin-bottom:10px !important;font-size:1.6rem !important;font-weight:700 !important;color:inherit !important;
}

/* subtitle under title showing selected category */
.yourservice-category-form .form-subtitle, .yourservice-form-wrapper .form-subtitle{
	display:block !important;text-align:center !important;margin-bottom:8px !important;font-size:0.98rem !important;color:rgba(0,0,0,0.55) !important;font-weight:600 !important;
}

.yourservice-category-form.categoria-barbiere .form-subtitle, .yourservice-form-wrapper.categoria-barbiere .form-subtitle{
	color: rgba(243,230,201,0.95) !important;
}
.yourservice-category-form.categoria-parrucchiere .form-subtitle, .yourservice-form-wrapper.categoria-parrucchiere .form-subtitle{
	color: rgba(74,33,48,0.9) !important;
}
.yourservice-category-form.categoria-estetista .form-subtitle, .yourservice-form-wrapper.categoria-estetista .form-subtitle{
	color: rgba(79,88,74,0.9) !important;
}

.yourservice-category-form .wpcf7-submit, .yourservice-form-wrapper .wpcf7-submit{
	display:inline-block !important;padding:10px 16px !important;border-radius:12px !important;border:none !important;cursor:pointer !important;font-weight:700 !important;
	box-shadow: 0 10px 22px rgba(16,24,40,0.10) !important;font-size:0.98rem !important;transition:all .16s ease !important;
}
.yourservice-category-form .wpcf7-submit:hover, .yourservice-form-wrapper .wpcf7-submit:hover{transform:translateY(-2px) !important;box-shadow:0 18px 40px rgba(16,24,40,0.12) !important}

/* Variante ancora più compatta: aggiungi la classe `compact` al wrapper o al form */
.yourservice-category-form.compact, .yourservice-form-wrapper.compact{
	max-width:420px !important;
	padding:8px 10px !important;
}
.yourservice-category-form.compact .wpcf7-form-control, .yourservice-form-wrapper.compact .wpcf7-form-control{
	padding:6px 8px !important;border-radius:6px !important;margin-bottom:8px !important;font-size:0.92rem !important;
}
.yourservice-category-form.compact .wpcf7-submit, .yourservice-form-wrapper.compact .wpcf7-submit{
	padding:8px 12px !important;font-size:0.95rem !important;
}

/* Small helper to make inputs transparent on dark themes */
.yourservice-category-form.categoria-barbiere .wpcf7-form-control,
.yourservice-form-wrapper.categoria-barbiere .wpcf7-form-control{
	background: rgba(255,255,255,0.02);
	color: #f2e8d6;
	border-color: rgba(255,200,120,0.18);
}

@media (max-width:600px){
	.yourservice-category-form, .yourservice-form-wrapper{padding:14px;border-radius:10px;margin:12px}
	.yourservice-category-form h3, .yourservice-form-wrapper h3{font-size:1rem}
}

/* ==========================
	 Category themes
	 - Barbiere: street (contrasti, grunge accento)
	 - Parrucchiere: chic (neutro, elegante)
	 - Estetista: femminile (pastel, morbido)
	 ========================== */

/* Barbiere - street */
.yourservice-category-form.categoria-barbiere, .yourservice-form-wrapper.categoria-barbiere{
	/* dark leather card */
	background: linear-gradient(180deg,#0b0b0c,#121212) !important;
	color: var(--barber-text) !important;
	border: 1px solid rgba(255,140,60,0.06) !important;
	box-shadow: 0 36px 90px rgba(3,3,3,0.7) !important, inset 0 2px 0 rgba(255,255,255,0.02) !important;
}
.yourservice-category-form.categoria-barbiere h3, .yourservice-form-wrapper.categoria-barbiere h3{
	color: #f6e9d2; font-family: 'Roboto Condensed', sans-serif; font-size:1.4rem; letter-spacing:0.6px;
}
.yourservice-category-form.categoria-barbiere .form-title, .yourservice-form-wrapper.categoria-barbiere .form-title{
	font-family: 'Playfair Display', serif; font-size:1.6rem; margin-bottom:12px; color:#f3e6c9;
}
.yourservice-category-form.categoria-barbiere .wpcf7-submit, .yourservice-form-wrapper.categoria-barbiere .wpcf7-submit{
	background: linear-gradient(180deg,#7b2b28,#4e1613) !important; color:#fdecd7 !important; padding:12px 18px !important; width:100% !important; border-radius:12px !important; box-shadow: inset 0 -6px 12px rgba(0,0,0,0.32) !important;
}
.yourservice-category-form.categoria-barbiere::before, .yourservice-form-wrapper.categoria-barbiere::before{
	content:'';position:absolute;left:0;top:0;width:14px;height:100%;background:linear-gradient(180deg,var(--ys-accent),#ff7a2e);border-top-left-radius:var(--card-radius);border-bottom-left-radius:var(--card-radius);}
.yourservice-category-form.categoria-barbiere .field-label, .yourservice-form-wrapper.categoria-barbiere .field-label{color:#f3e6c9 !important}
.yourservice-category-form.categoria-barbiere{border-left:8px solid #ff9f40 !important}

/* add subtle wood background if available via inline style on wrapper (optional)
	 .yourservice-form-wrapper.categoria-barbiere { background-image: url(...); background-size: cover; } */

/* Parrucchiere - chic */
.yourservice-category-form.categoria-parrucchiere, .yourservice-form-wrapper.categoria-parrucchiere{
	background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08)) !important;
	border:1px solid rgba(255,255,255,0.28) !important;
	backdrop-filter: blur(14px) saturate(130%) !important;
	box-shadow: 0 28px 70px rgba(10,10,10,0.06) !important, inset 0 1px 0 rgba(255,255,255,0.03) !important;
	color: #2b1d24 !important;
	border-radius:calc(var(--card-radius) + 6px) !important;
	position:relative !important;
	overflow:visible !important;
}

/* glass reflection streak */
.yourservice-category-form.categoria-parrucchiere::after, .yourservice-form-wrapper.categoria-parrucchiere::after{
	content:'' !important; position:absolute !important; left:-20% !important; top:-30% !important; width:140% !important; height:60% !important;
	background: linear-gradient(120deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.0) 60%) !important;
	transform: rotate(-12deg) !important; pointer-events:none !important; mix-blend-mode:overlay !important; border-radius:calc(var(--card-radius) + 6px) !important;
}

/* stronger highlight near top-right */
.yourservice-category-form.categoria-parrucchiere::before, .yourservice-form-wrapper.categoria-parrucchiere::before{
	content:'' !important; position:absolute !important; right:8px !important; top:10px !important; width:36% !important; height:30% !important;
	background: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.10), rgba(255,255,255,0) 40%) !important; pointer-events:none !important; border-radius:50% !important;
}
.yourservice-category-form.categoria-parrucchiere h3, .yourservice-form-wrapper.categoria-parrucchiere h3{
	color:#3a2b34; font-family: 'Playfair Display', serif; font-size:1.6rem;
}
.yourservice-category-form.categoria-parrucchiere .form-title, .yourservice-form-wrapper.categoria-parrucchiere .form-title{
	font-family: 'Great Vibes', cursive; font-size:1.9rem; color:#4a2130; margin-bottom:12px; letter-spacing:0.8px;
}
.yourservice-category-form.categoria-parrucchiere .wpcf7-form-control, .yourservice-form-wrapper.categoria-parrucchiere .wpcf7-form-control{
	background: rgba(255,255,255,0.6) !important; border: none !important; box-shadow: 0 6px 20px rgba(16,24,40,0.06) !important; border-radius:12px !important;
}
.yourservice-category-form.categoria-parrucchiere .wpcf7-submit, .yourservice-form-wrapper.categoria-parrucchiere .wpcf7-submit{
	background: linear-gradient(180deg,#7b2b4a,#4b1736) !important; color:#fff !important; padding:10px 18px !important; width:160px !important; display:block !important;margin:16px auto !important;border-radius:28px !important;box-shadow:0 10px 30px rgba(75,25,50,0.12) !important;
}

/* Estetista - femminile */
.yourservice-category-form.categoria-estetista, .yourservice-form-wrapper.categoria-estetista{
	/* soft paper/card look */
	background: linear-gradient(180deg,#fffdf9,#f9f6f2) !important;
	border:1px solid rgba(220,215,210,0.12) !important;
	box-shadow: 0 18px 46px rgba(16,24,40,0.06) !important;
	color:#2f2a2b !important;
}
.yourservice-category-form.categoria-estetista h3, .yourservice-form-wrapper.categoria-estetista h3{color:#2f2a2b;font-family: 'Playfair Display', serif; font-size:1.4rem}
.yourservice-category-form.categoria-estetista .form-title, .yourservice-form-wrapper.categoria-estetista .form-title{font-family:'Playfair Display',serif;font-size:1.6rem;color:#2f2a2b;margin-bottom:10px}
.yourservice-category-form.categoria-estetista .wpcf7-submit, .yourservice-form-wrapper.categoria-estetista .wpcf7-submit{background:linear-gradient(180deg,#9fbf9e,#6f9b7b) !important;color:#fff !important;padding:10px 16px !important;border-radius:12px !important;width:100% !important;font-weight:700 !important}

/* small input icons (calendar example) */
.yourservice-category-form input[type="date"], .yourservice-form-wrapper input[type="date"]{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23707070' d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H5V9h14v9z'/%3E%3C/svg%3E") !important;
	background-repeat:no-repeat !important;background-position:right 12px center !important;background-size:18px 18px !important;padding-right:38px !important;
}

/* subtle responsive tweak */
.yourservice-category-form.categoria-estetista .field-label, .yourservice-form-wrapper.categoria-estetista .field-label{color:#4b4b4b !important}
.yourservice-category-form.categoria-estetista{border-radius:18px !important}
@media (max-width:480px){
	.yourservice-category-form, .yourservice-form-wrapper{max-width:92% !important;padding:12px !important}
	.yourservice-category-form .form-title, .yourservice-form-wrapper .form-title{font-size:1.3rem !important}
	.yourservice-category-form .wpcf7-submit, .yourservice-form-wrapper .wpcf7-submit{font-size:0.95rem !important;padding:10px !important}
}

/* Additional safety/responsive helpers */
.yourservice-form-wrapper, .yourservice-category-form { box-sizing: border-box !important; }
.yourservice-form-wrapper form { width:100% !important; }
.yourservice-form-wrapper .wpcf7-submit, .yourservice-category-form .wpcf7-submit { min-height:44px !important; line-height:1.2 !important; }
.yourservice-form-wrapper * { -webkit-tap-highlight-color: rgba(0,0,0,0.05); }
.yourservice-form-wrapper { overflow-x: hidden !important; }


/* ==========================
   Stili specifici per il form di login inline
   ========================== */
.yourservice-login-wrapper{
	--ys-accent:#ff9f40;
	max-width:420px !important;
	margin:18px auto !important;
	padding:18px 20px !important;
	border-radius:12px !important;
	background: rgba(255,255,255,0.98) !important;
	box-shadow: 0 18px 48px rgba(10,10,10,0.08) !important;
	box-sizing: border-box !important;
	color:#222 !important;
}
.yourservice-login-wrapper .yourservice-login-form label{
	display:block !important;
	margin-bottom:6px !important;
	font-weight:600 !important;
	color:#222 !important;
	font-size:0.95rem !important;
}
.yourservice-login-wrapper .yourservice-login-form .yourservice-input,
.yourservice-login-wrapper .yourservice-login-form input[type="text"],
.yourservice-login-wrapper .yourservice-login-form input[type="password"]{
	width:100% !important;
	padding:10px 12px !important;
	border:1px solid rgba(16,24,40,0.12) !important;
	border-radius:10px !important;
	box-sizing:border-box !important;
	margin-bottom:12px !important;
	background:#fff !important;
	color:#111 !important;
	-webkit-text-fill-color:#111 !important;
	font-size:1rem !important;
}
.yourservice-login-wrapper .yourservice-login-form .yourservice-input:focus,
.yourservice-login-wrapper .yourservice-login-form input[type="text"]:focus,
.yourservice-login-wrapper .yourservice-login-form input[type="password"]:focus{
	outline:none !important;
	border-color:rgba(255,159,64,0.65) !important;
	box-shadow:0 8px 20px rgba(16,24,40,0.06) !important;
	transform:translateY(-1px) !important;
}
.yourservice-login-wrapper .yourservice-login-form .yourservice-login-submit,
.yourservice-login-wrapper .yourservice-login-form button[type="submit"]{
	display:block !important;
	width:100% !important;
	min-height:44px !important;
	padding:12px 16px !important;
	border-radius:10px !important;
	border:none !important;
	background:#ff9f40 !important;
	background-color:#ff9f40 !important;
	color:#fff !important;
	-webkit-text-fill-color:#fff !important;
	font-weight:700 !important;
	font-size:1rem !important;
	line-height:1.2 !important;
	cursor:pointer !important;
	text-transform:none !important;
	letter-spacing:normal !important;
	opacity:1 !important;
	visibility:visible !important;
	box-shadow:0 10px 22px rgba(16,24,40,0.10) !important;
}
.yourservice-login-wrapper .yourservice-login-form .yourservice-login-submit:hover,
.yourservice-login-wrapper .yourservice-login-form button[type="submit"]:hover{
	transform:translateY(-2px) !important;
	box-shadow:0 18px 40px rgba(16,24,40,0.12) !important;
	background:#ff8f20 !important;
	background-color:#ff8f20 !important;
	color:#fff !important;
}
.yourservice-login-wrapper .yourservice-login-form a{
	color:#c87800 !important;
	text-decoration:underline !important;
}
.yourservice-login-wrapper .yourservice-login-form p{
	margin:8px 0 0 !important;
	color:#333 !important;
}
.yourservice-login-error{
	background:rgba(176,0,32,0.05) !important;
	border-left:4px solid #b00020 !important;
	padding:8px 10px !important;
	border-radius:8px !important;
	margin-bottom:10px !important;
	color:#7a0018 !important;
}

@media (max-width:600px){
	.yourservice-login-wrapper{max-width:94% !important;padding:14px !important;margin:12px auto !important}
	.yourservice-login-wrapper .yourservice-login-form .yourservice-login-submit,
	.yourservice-login-wrapper .yourservice-login-form button[type="submit"]{padding:10px 12px !important}
}


/* Extras visibility (keep) */
.yourservice-category-form.categoria-barbiere .yourservice-extra-barbiere, .yourservice-form-wrapper.categoria-barbiere .yourservice-extra-barbiere{display:block}
.yourservice-category-form.categoria-parrucchiere .yourservice-extra-parrucchiere, .yourservice-form-wrapper.categoria-parrucchiere .yourservice-extra-parrucchiere{display:block}
.yourservice-category-form.categoria-estetista .yourservice-extra-estetista, .yourservice-form-wrapper.categoria-estetista .yourservice-extra-estetista{display:block}

/* refined glass effects and input transparency for Parrucchiere */
.yourservice-category-form.categoria-parrucchiere, .yourservice-form-wrapper.categoria-parrucchiere{
	-webkit-backdrop-filter: blur(14px) saturate(130%) !important;
	backdrop-filter: blur(14px) saturate(130%) !important;
}

/* ensure inputs show the underlying glass feel */
.yourservice-category-form.categoria-parrucchiere .wpcf7-form-control, .yourservice-form-wrapper.categoria-parrucchiere .wpcf7-form-control{
	background: rgba(255,255,255,0.45) !important;
	border: 1px solid rgba(255,255,255,0.06) !important;
	color: #2b1d24 !important;
}

/* increase visibility of reflection pseudo-elements */
.yourservice-category-form.categoria-parrucchiere::after, .yourservice-form-wrapper.categoria-parrucchiere::after{
	opacity: 1 !important;
	background: linear-gradient(120deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 40%, rgba(255,255,255,0) 60%) !important;
}

.yourservice-category-form.categoria-parrucchiere::before, .yourservice-form-wrapper.categoria-parrucchiere::before{
	opacity: 0.95 !important;
}

/* ==========================
   Styles for 'La mia area' and empty states
   ========================== */
.yourservice-area{max-width:820px;margin:20px auto;padding:18px;border-radius:12px;background:#fff;box-shadow:0 18px 48px rgba(10,10,10,0.06);box-sizing:border-box}
.yourservice-area h3{margin-top:0;font-size:1.25rem}
.yourservice-area p{margin:.4rem 0;color:#333}
.ys-servizi-list,.ys-prenotazioni-list{list-style:none;padding-left:0;margin:8px 0}
.ys-servizi-list li,.ys-prenotazioni-list li{padding:8px;border-bottom:1px solid rgba(16,24,40,0.04)}
.ys-prenotazioni-list li em{color:#666;font-style:normal;margin-left:8px}
.ys-empty{padding:16px;border-radius:8px;background:linear-gradient(180deg,#fbfbfb,#fff);color:#666;border:1px dashed rgba(0,0,0,0.06)}
.yourservice-area .button{display:inline-block;padding:10px 14px;border-radius:8px;background:var(--ys-accent);color:#fff;text-decoration:none}

@media (max-width:640px){
	.yourservice-area{padding:14px;margin:12px}
	.ys-servizi-list li,.ys-prenotazioni-list li{padding:10px}
}

/* Responsive layout for area lists and cards */
.ys-servizi-list, .ys-prenotazioni-list{
	display:grid;
	grid-template-columns:1fr;
	gap:12px;
}
.ys-servizi-item, .ys-servizi-list li, .ys-prenotazioni-list li{
	background:#fff; padding:12px; border-radius:10px; box-shadow:0 8px 20px rgba(10,10,10,0.04); box-sizing:border-box;
}
.ys-servizi-item{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ys-prenotazioni-list li{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ys-prenotazioni-list li .actions{display:flex;gap:8px}

@media (min-width:768px){
	.ys-servizi-list, .ys-prenotazioni-list{grid-template-columns:repeat(2,1fr)}
	.yourservice-area{padding:22px}
	.yourservice-area h3{font-size:1.3rem}
	.yourservice-area h4{font-size:1.25rem}
	.yourservice-area .button, .yourservice-login-form button{min-width:140px}
}

@media (min-width:1024px){
	.ys-servizi-list{grid-template-columns:repeat(3,1fr)}
}

/* Ensure action forms/buttons wrap on small screens */
.ys-prenotazioni-list form{display:inline-block}
@media (max-width:480px){
	.ys-prenotazioni-list li{flex-direction:column;align-items:flex-start}
	.ys-prenotazioni-list li .actions{margin-top:8px}
	.yourservice-area .button, .yourservice-login-form button{width:100%}
}

/* Mobile layout fixes: prevent header overlap and horizontal overflow */
@media (max-width:420px){
	.yourservice-area{padding-top:18px;padding-bottom:18px;margin-top:12px;margin-left:8px;margin-right:8px;border-radius:12px;overflow:visible;z-index:3}
	.yourservice-area{max-width:calc(100% - 32px)}
	.yourservice-area h3{font-size:1.05rem;margin-bottom:6px}
	.yourservice-area h4{font-size:1rem;margin-top:14px}
	.ys-servizi-item, .ys-servizi-list li, .ys-prenotazioni-list li{padding:10px}
	.ys-servizi-list, .ys-prenotazioni-list{gap:10px}
	html,body{overflow-x:hidden}
}

/* Prevent large title styles from overflowing container */
.yourservice-area h3, .yourservice-area h4{word-break:break-word;hyphens:auto}

/* Slight visual refinements */
.yourservice-area{background-clip:padding-box}
.yourservice-area .ys-empty{border-radius:10px}

/* Body-level background classes (used by JS) - provide gradient fallbacks and full-page coverage */
body.ys-bg-barbiere{
	background-image: linear-gradient(180deg,#0b0b0c,#1a1412) !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	min-height: 100vh !important;
}
body.ys-bg-parrucchiere{
	background-image: linear-gradient(180deg,#f4eaf0,#f2e9ee) !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	min-height: 100vh !important;
}
/* ==========================
   Front-end: home, categorie, professionisti
   ========================== */
.ys-front-section{max-width:1200px;margin:28px auto;padding:0 16px;box-sizing:border-box}
.ys-section-title{font-size:1.6rem;margin:0 0 18px;text-align:center;font-weight:700;color:#1a1a1a}
.ys-section-more{text-align:center;margin:18px 0 0}
.ys-link-more{display:inline-block;padding:10px 18px;border-radius:999px;background:#ff9f40;color:#fff !important;text-decoration:none;font-weight:700}
.ys-link-more:hover{opacity:.92}

.ys-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ys-cat-card{display:block;padding:22px 18px;border-radius:16px;text-decoration:none;color:inherit;box-shadow:0 14px 36px rgba(10,10,10,.08);transition:transform .16s ease,box-shadow .16s ease;overflow:hidden}
.ys-cat-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(10,10,10,.12)}
.ys-cat-card h3{margin:0 0 8px;font-size:1.25rem}
.ys-cat-card p{margin:0 0 12px;color:rgba(0,0,0,.65);font-size:.95rem}
.ys-cat-card-link{font-weight:700;font-size:.92rem}
.ys-cat-card-barbiere{background:linear-gradient(180deg,#fff7e6,#ffe8c7);border:1px solid #ffcc66}
.ys-cat-card-parrucchiere{background:linear-gradient(180deg,#f4eaf0,#eef7ff);border:1px solid #d4a5c8}
.ys-cat-card-estetista{background:linear-gradient(180deg,#f7eefc,#edf7ee);border:1px solid #b8d9b6}

.ys-prof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.ys-prof-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 14px 36px rgba(10,10,10,.08);display:flex;flex-direction:column}
.ys-prof-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:#f2f2f2}
.ys-prof-card-media img{width:100%;height:100%;object-fit:cover}
.ys-prof-card-media--empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff9f40,#ffb86b);color:#fff;font-size:2rem;font-weight:700;text-decoration:none}
.ys-prof-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.ys-prof-badge{align-self:flex-start;font-size:.75rem;font-weight:700;padding:4px 10px;border-radius:999px;background:#f5f5f5;color:#333}
.ys-cat-barbiere .ys-prof-badge{background:#fff0d6;color:#8a4b00}
.ys-cat-parrucchiere .ys-prof-badge{background:#f4eaf0;color:#4a2130}
.ys-cat-estetista .ys-prof-badge{background:#edf7ee;color:#2f5a3a}
.ys-prof-name{margin:0;font-size:1.1rem}
.ys-prof-name a{color:inherit;text-decoration:none}
.ys-prof-meta,.ys-prof-servizi{margin:0;font-size:.9rem;color:#666}
.ys-prof-cta{margin-top:auto;display:inline-block;padding:8px 12px;border-radius:10px;background:#1a1a1a;color:#fff !important;text-decoration:none;font-size:.9rem;font-weight:600;align-self:flex-start}

@media (max-width:768px){
	.ys-cat-grid{grid-template-columns:1fr}
	.ys-section-title{font-size:1.35rem}
}

body.ys-bg-estetista{
	background-image: linear-gradient(180deg,#fcfbf9,#f3f3f1) !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	min-height: 100vh !important;
}