/**
 * Shula Real Visual Presets Engine
 * v1.0.0
 * Purpose: جعل الأنماط تغير الهوية البصرية فعلياً وليس الألوان فقط.
 */

:root{
	--shula-preset-radius: 22px;
	--shula-preset-card-shadow: 0 18px 45px rgba(15,23,42,.08);
	--shula-preset-hero-overlay: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.58));
	--shula-preset-card-border: 1px solid rgba(226,232,240,.9);
	--shula-preset-button-transform: translateY(-2px);
}

/* عام */
body[class*="shula-design-preset-"] .site,
body[class*="shula-design-preset-"] .site-content{
	background:
		radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--shula-primary) 10%, transparent), transparent 30%),
		radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--shula-accent) 10%, transparent), transparent 26%),
		var(--shula-background);
}

body[class*="shula-design-preset-"] .shulah-hero,
body[class*="shula-design-preset-"] .hero,
body[class*="shula-design-preset-"] .home-hero,
body[class*="shula-design-preset-"] .nsv-hero,
body[class*="shula-design-preset-"] .nsv-rm-hero{
	position: relative;
	overflow: hidden;
	border-radius: var(--shula-hero-radius, 34px);
	box-shadow: var(--shula-preset-card-shadow);
}

body[class*="shula-design-preset-"] .shulah-card,
body[class*="shula-design-preset-"] .service-card,
body[class*="shula-design-preset-"] .program-card,
body[class*="shula-design-preset-"] .nsv-rm-card,
body[class*="shula-design-preset-"] .nsv-events-card,
body[class*="shula-design-preset-"] .nsv-admin-card,
body[class*="shula-design-preset-"] .wp-block-group,
body[class*="shula-design-preset-"] .card{
	border: var(--shula-preset-card-border);
	border-radius: var(--shula-preset-radius);
	box-shadow: var(--shula-preset-card-shadow);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body[class*="shula-design-preset-"] .shulah-card:hover,
body[class*="shula-design-preset-"] .service-card:hover,
body[class*="shula-design-preset-"] .program-card:hover,
body[class*="shula-design-preset-"] .card:hover{
	transform: translateY(-4px);
}

body[class*="shula-design-preset-"] .button,
body[class*="shula-design-preset-"] .btn,
body[class*="shula-design-preset-"] button,
body[class*="shula-design-preset-"] input[type="submit"]{
	border-radius: var(--shula-button-radius, 14px);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

body[class*="shula-design-preset-"] .button:hover,
body[class*="shula-design-preset-"] .btn:hover,
body[class*="shula-design-preset-"] button:hover,
body[class*="shula-design-preset-"] input[type="submit"]:hover{
	transform: var(--shula-preset-button-transform);
}

/* فاخر */
body.shula-design-preset-luxury{
	--shula-preset-radius: 28px;
	--shula-preset-card-shadow: 0 28px 70px rgba(7,22,52,.16);
	--shula-preset-card-border: 1px solid rgba(255,255,255,.55);
	--shula-preset-button-transform: translateY(-3px) scale(1.015);
}

body.shula-design-preset-luxury .shulah-card,
body.shula-design-preset-luxury .service-card,
body.shula-design-preset-luxury .program-card,
body.shula-design-preset-luxury .card,
body.shula-design-preset-luxury .wp-block-group{
	background: rgba(255,255,255,.76);
	backdrop-filter: blur(18px);
}

body.shula-design-preset-luxury .shulah-hero,
body.shula-design-preset-luxury .hero,
body.shula-design-preset-luxury .home-hero{
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--shula-primary) 88%, #000), color-mix(in srgb, var(--shula-secondary) 92%, #000));
}

body.shula-design-preset-luxury .button,
body.shula-design-preset-luxury .btn{
	background: linear-gradient(135deg, var(--shula-primary), var(--shula-accent));
	box-shadow: 0 14px 30px color-mix(in srgb, var(--shula-primary) 28%, transparent);
}

/* حديث */
body.shula-design-preset-modern{
	--shula-preset-radius: 16px;
	--shula-preset-card-shadow: 0 10px 24px rgba(15,23,42,.055);
	--shula-preset-card-border: 1px solid #e5e7eb;
}

body.shula-design-preset-modern .shulah-card,
body.shula-design-preset-modern .service-card,
body.shula-design-preset-modern .program-card,
body.shula-design-preset-modern .card{
	background: #fff;
}

body.shula-design-preset-modern .button,
body.shula-design-preset-modern .btn{
	border-radius: 12px;
}

/* رسمي */
body.shula-design-preset-formal{
	--shula-preset-radius: 8px;
	--shula-preset-card-shadow: none;
	--shula-preset-card-border: 1px solid #cbd5e1;
	--shula-preset-button-transform: none;
}

body.shula-design-preset-formal .shulah-card,
body.shula-design-preset-formal .service-card,
body.shula-design-preset-formal .program-card,
body.shula-design-preset-formal .card{
	background: #fff;
	border-inline-start: 5px solid var(--shula-primary);
}

body.shula-design-preset-formal .button,
body.shula-design-preset-formal .btn{
	box-shadow: none;
	border-radius: 6px;
}

/* هادئ */
body.shula-design-preset-calm{
	--shula-preset-radius: 30px;
	--shula-preset-card-shadow: 0 18px 45px rgba(20,184,166,.10);
	--shula-preset-card-border: 1px solid color-mix(in srgb, var(--shula-primary) 18%, white);
}

body.shula-design-preset-calm .site,
body.shula-design-preset-calm .site-content{
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--shula-primary) 8%, white), #fff 58%);
}

body.shula-design-preset-calm .button,
body.shula-design-preset-calm .btn{
	border-radius: 999px;
}

/* خيري */
body.shula-design-preset-charity{
	--shula-preset-radius: 24px;
	--shula-preset-card-shadow: 0 18px 40px rgba(101,84,25,.11);
	--shula-preset-card-border: 1px solid color-mix(in srgb, var(--shula-accent) 20%, white);
}

body.shula-design-preset-charity .shulah-card,
body.shula-design-preset-charity .service-card,
body.shula-design-preset-charity .program-card,
body.shula-design-preset-charity .card{
	background:
		linear-gradient(180deg, #fff, color-mix(in srgb, var(--shula-accent) 7%, white));
}

body.shula-design-preset-charity .button,
body.shula-design-preset-charity .btn{
	border-radius: 18px;
}

/* صحي */
body.shula-design-preset-health{
	--shula-preset-radius: 20px;
	--shula-preset-card-shadow: 0 12px 28px rgba(5,150,105,.08);
	--shula-preset-card-border: 1px solid color-mix(in srgb, var(--shula-primary) 14%, white);
}

body.shula-design-preset-health .site,
body.shula-design-preset-health .site-content{
	background:
		linear-gradient(180deg, #ecfdf5, #ffffff 48%);
}

body.shula-design-preset-health .shulah-card,
body.shula-design-preset-health .service-card,
body.shula-design-preset-health .program-card,
body.shula-design-preset-health .card{
	background: #fff;
}

body.shula-design-preset-health .button,
body.shula-design-preset-health .btn{
	border-radius: 999px;
}

/* قرآني */
body.shula-design-preset-quranic{
	--shula-preset-radius: 26px;
	--shula-preset-card-shadow: 0 20px 50px rgba(63,47,22,.12);
	--shula-preset-card-border: 1px solid color-mix(in srgb, var(--shula-accent) 25%, white);
}

body.shula-design-preset-quranic .site,
body.shula-design-preset-quranic .site-content{
	background:
		radial-gradient(circle at 10% 0, rgba(180,83,9,.10), transparent 28%),
		linear-gradient(180deg, #fffbeb, #fff 62%);
}

body.shula-design-preset-quranic .shulah-card,
body.shula-design-preset-quranic .service-card,
body.shula-design-preset-quranic .program-card,
body.shula-design-preset-quranic .card{
	position: relative;
	background: rgba(255,255,255,.88);
}

body.shula-design-preset-quranic .shulah-card:after,
body.shula-design-preset-quranic .service-card:after,
body.shula-design-preset-quranic .program-card:after,
body.shula-design-preset-quranic .card:after{
	content:"";
	position:absolute;
	inset:10px;
	border:1px solid rgba(180,83,9,.10);
	border-radius: inherit;
	pointer-events:none;
}

/* بسيط */
body.shula-design-preset-simple{
	--shula-preset-radius: 6px;
	--shula-preset-card-shadow: none;
	--shula-preset-card-border: 1px solid #e5e7eb;
	--shula-preset-button-transform: none;
}

body.shula-design-preset-simple .site,
body.shula-design-preset-simple .site-content{
	background:#fff;
}

body.shula-design-preset-simple .shulah-card,
body.shula-design-preset-simple .service-card,
body.shula-design-preset-simple .program-card,
body.shula-design-preset-simple .card{
	background:#fff;
}

/* تحسينات جوال */
@media(max-width:782px){
	body[class*="shula-design-preset-"] .shulah-card,
	body[class*="shula-design-preset-"] .service-card,
	body[class*="shula-design-preset-"] .program-card,
	body[class*="shula-design-preset-"] .card{
		border-radius: calc(var(--shula-preset-radius) * .78);
	}

	body.shula-design-preset-luxury .shulah-card,
	body.shula-design-preset-luxury .service-card,
	body.shula-design-preset-luxury .program-card,
	body.shula-design-preset-luxury .card{
		backdrop-filter: blur(10px);
	}
}


/* نمط خاص احترافي */
body.shula-design-preset-custom{
	--shula-preset-radius: var(--shula-card-radius, 24px);
	--shula-preset-card-shadow: 0 22px 55px color-mix(in srgb, var(--shula-primary) 14%, transparent);
	--shula-preset-card-border: 1px solid color-mix(in srgb, var(--shula-accent) 24%, white);
	--shula-preset-button-transform: translateY(-3px);
}

body.shula-design-preset-custom .site,
body.shula-design-preset-custom .site-content{
	background:
		radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--shula-primary) 13%, transparent), transparent 30%),
		radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--shula-accent) 11%, transparent), transparent 28%),
		linear-gradient(180deg, color-mix(in srgb, var(--shula-background) 94%, white), #fff 72%);
}

body.shula-design-preset-custom .shulah-card,
body.shula-design-preset-custom .service-card,
body.shula-design-preset-custom .program-card,
body.shula-design-preset-custom .card,
body.shula-design-preset-custom .wp-block-group{
	background:
		linear-gradient(180deg, rgba(255,255,255,.92), color-mix(in srgb, var(--shula-surface-alt) 40%, white));
	border: var(--shula-preset-card-border);
	box-shadow: var(--shula-preset-card-shadow);
	backdrop-filter: blur(12px);
}

body.shula-design-preset-custom .shulah-hero,
body.shula-design-preset-custom .hero,
body.shula-design-preset-custom .home-hero{
	background:
		linear-gradient(135deg, var(--shula-primary), var(--shula-secondary));
	box-shadow: 0 26px 60px color-mix(in srgb, var(--shula-secondary) 24%, transparent);
}

body.shula-design-preset-custom .button,
body.shula-design-preset-custom .btn{
	background: linear-gradient(135deg, var(--shula-primary), var(--shula-accent));
	color:#fff;
	box-shadow: 0 14px 32px color-mix(in srgb, var(--shula-primary) 24%, transparent);
}