/* =========================================================
   Qthemy Showcase — شكل صفحات الإضافة والكروت في الموقع.
   كل المقاسات والألوان متغيرات (--qsc-*): القيم الافتراضية هنا، وصفحة "التخصيص" بتغيّرها
   (بتتطبع بعد الملف ده في :root). الألوان اللي مالهاش قيمة بتاخد من متغيرات ووردبريس القياسية
   (--wp--preset--*، من theme.json في أي قالب بيدعمه)، ومن غير ما الإضافة تعتمد على قالب بعينه.
   ========================================================= */

:root {
	--qsc-primary: var(--wp--preset--color--primary, var(--wp--preset--color--accent, #0265df));
	--qsc-heading-font: var(--wp--preset--font-family--heading, inherit);
	--qsc-headings-color: inherit;
	/* الكارت والخطوط والكلام الخفيف بيتحسبوا من لون كلام القالب نفسه (currentColor)،
	   فبيبانوا صح على أي قالب فاتح أو غامق. الرمادي هنا للمتصفحات القديمة اللي مالهاش color-mix. */
	--qsc-card-bg: rgba(127, 127, 127, 0.05);
	--qsc-line: rgba(127, 127, 127, 0.22);
	--qsc-muted: rgba(127, 127, 127, 0.95);
	--qsc-empty: rgba(127, 127, 127, 0.12);
	--qsc-radius: 18px;
	--qsc-gap: 22px;
	--qsc-columns: 3;
	--qsc-columns-tablet: 2;
	--qsc-columns-mobile: 1;
	--qsc-ratio: 4 / 3;
	--qsc-page-width: 1200px;
	--qsc-text-width: 820px;
	--qsc-image-width: var(--qsc-text-width);
	--qsc-space-top: 40px;
	--qsc-space-bottom: 72px;
	--qsc-gutter: 24px;
	--qsc-hero-height: 380px;
	--qsc-hero-height-mobile: 260px;
	--qsc-overlay-color: #0b15308c;
	--qsc-hero-solid: #0b1530;
	--qsc-hero-color: #fff;
	--qsc-whatsapp: #1fa855;
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	:root {
		--qsc-card-bg: color-mix(in srgb, currentColor 4%, transparent);
		--qsc-line: color-mix(in srgb, currentColor 14%, transparent);
		--qsc-muted: color-mix(in srgb, currentColor 72%, transparent);
		--qsc-empty: color-mix(in srgb, currentColor 8%, transparent);
	}
}
@media (max-width: 600px) { :root { --qsc-gutter: 16px; } }

.qsc-icon { width: 18px; height: 18px; flex: none; }
[dir="rtl"] .qsc-card-more .qsc-icon { transform: scaleX(-1); }

/* ---------- صفحة الإضافة (بتصميم الإضافة) ---------- */
/* width و flex علشان القوالب اللي حاوية المحتوى فيها flex (عمود جانبي) ما تصغّرش الصفحة */
/* --qsc-header-offset: ارتفاع هيدر القالب لو طاير فوق الصفحة (page.js بيقيسه)، علشان العنوان ما يستخباش تحته */
.qsc-page { display: flow-root; box-sizing: border-box; width: 100%; max-width: none; flex: 1 1 100%; min-width: 0; margin: 0; padding: 0; }
.qsc-page *, .qsc-page *::before, .qsc-page *::after { box-sizing: border-box; }
.qsc-wrap { width: 100%; max-width: calc(var(--qsc-page-width) + 2 * var(--qsc-gutter)); margin: 0 auto; padding: var(--qsc-space-top) var(--qsc-gutter) var(--qsc-space-bottom); }
.qsc-page > .qsc-wrap:first-child { padding-top: calc(var(--qsc-space-top) + var(--qsc-header-offset, 0px)); }
/* صفحة العنصر: الكلام في عمود بعرض النص، والصورة بعرضها الخاص */
.qsc-wrap-item > * { max-width: var(--qsc-text-width); margin-left: auto; margin-right: auto; }
.qsc-wrap-item > .qsc-figure { max-width: min(100%, var(--qsc-image-width)); }
.qsc-title { margin: 0 0 18px; font-family: var(--qsc-heading-font); font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.25; } /* اللون من لون عناوين القالب */
.qsc-wrap-item .qsc-title { margin-bottom: 22px; }
.qsc-lead { max-width: var(--qsc-text-width); margin: 0 0 28px; font-size: 18px; line-height: 1.7; color: var(--qsc-muted); }
.qsc-intro { max-width: var(--qsc-text-width); margin: 0 auto 32px; }
/* تصميم البيلدر (Elementor...) تحت العناصر بعرض الصفحة: مسافة أصغر قبله، وهو بيتحكم في مسافاته */
.qsc-wrap-section.qsc-has-builder { padding-bottom: 40px; }
.qsc-builder-content { width: 100%; }
.qsc-intro > :first-child, .qsc-content > :first-child { margin-top: 0; }
.qsc-intro > :last-child, .qsc-content > :last-child { margin-bottom: 0; }
.qsc-figure { margin-top: 0; margin-bottom: 32px; }
.qsc-figure-img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; border-radius: var(--qsc-radius); }
.qsc-content { margin-top: 0; margin-bottom: 0; }

/* ---------- الواجهة العلوية ---------- */
/* min-height مش height: الكلام الطويل بيكبّرها بدل ما يتقص.
   تحت هيدر طاير: الخلفية بتكمّل تحته، والكلام بينزل بمقدار ارتفاعه (والارتفاع المختار بيفضل ظاهر كله) */
.qsc-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: calc(var(--qsc-hero-height) + var(--qsc-header-offset, 0px));
	margin: 0;
	padding: calc(56px + var(--qsc-header-offset, 0px)) var(--qsc-gutter) 56px;
	overflow: hidden;
	background-color: transparent;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--qsc-hero-color);
}
@media (max-width: 600px) { .qsc-hero { min-height: calc(var(--qsc-hero-height-mobile) + var(--qsc-header-offset, 0px)); padding-top: calc(40px + var(--qsc-header-offset, 0px)); padding-bottom: 40px; } }
/* عرض الشاشة كله مهما كان عرض عمود القالب (page.js بيظبطه بالبكسل، وده بديل لو الـ JavaScript مقفول) */
.qsc-hero.qsc-hero-full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
/* جوه عرض الصفحة: كارت بحواف دائرية تحت الهيدر */
.qsc-hero:not(.qsc-hero-full) { min-height: var(--qsc-hero-height); padding-top: 56px; border-radius: var(--qsc-radius); }
@media (max-width: 600px) { .qsc-hero:not(.qsc-hero-full) { min-height: var(--qsc-hero-height-mobile); padding-top: 40px; } }
.qsc-page > .qsc-hero:not(.qsc-hero-full) { width: calc(100% - 2 * var(--qsc-gutter)); max-width: var(--qsc-page-width); margin: calc(var(--qsc-space-top) + var(--qsc-header-offset, 0px)) auto 0; }
/* منع سكرول جانبي من الـ 100vw (clip مش hidden علشان الهيدر الثابت في القالب ما يبوظش) */
body.qsc-has-banner { overflow-x: clip; }
/* الطبقة فوق الصورة بشفافية لونها، ومن غير صورة بيظهر اللون كامل */
.qsc-hero-overlay { position: absolute; inset: 0; background: var(--qsc-overlay-color); }
.qsc-hero:not(.has-image) .qsc-hero-overlay { background: var(--qsc-hero-solid); }
.qsc-hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--qsc-page-width); margin: 0 auto; text-align: center; }
.qsc-hero-start .qsc-hero-inner { text-align: start; }
.qsc-hero-title { max-width: 900px; margin: 0 auto; padding: 0; font-family: var(--qsc-heading-font); font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; line-height: 1.25; color: inherit; }
.qsc-hero-text { max-width: 680px; margin: 14px auto 0; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.75; color: inherit; opacity: 0.88; }
.qsc-hero-start .qsc-hero-title, .qsc-hero-start .qsc-hero-text { margin-left: 0; margin-right: 0; }

/* ---------- كروت العناصر ---------- */
.qsc-list { margin: 0; }
.qsc-intro + .qsc-list-wrap, .qsc-lead + .qsc-list-wrap { margin-top: 8px; }
/* التاب أو رقم الصفحة الجديد بيتحمّل جوه القائمة بس (assets/js/list.js) */
.qsc-list-wrap { scroll-margin-top: calc(var(--qsc-header-offset, 0px) + 24px); transition: opacity 0.2s; }
.qsc-list-wrap[aria-busy="true"] { opacity: 0.5; pointer-events: none; }
.qsc-grid { display: grid; grid-template-columns: repeat(var(--qsc-columns), minmax(0, 1fr)); gap: var(--qsc-gap); }
@media (max-width: 960px) { .qsc-grid { grid-template-columns: repeat(var(--qsc-columns-tablet), minmax(0, 1fr)); } }
@media (max-width: 600px) { .qsc-grid { grid-template-columns: repeat(var(--qsc-columns-mobile), minmax(0, 1fr)); } }

.qsc-list a.qsc-card,
.qsc-list a.qsc-card:hover,
.qsc-list a.qsc-card:focus-visible { color: inherit; text-decoration: none; }
.qsc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--qsc-line);
	border-radius: var(--qsc-radius);
	background: var(--qsc-card-bg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s, border-color 0.35s;
}
.qsc-list a.qsc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.35); border-color: transparent; }
.qsc-card:focus-visible { outline: 2px solid var(--qsc-primary); outline-offset: 3px; }
.qsc-card-media { display: block; aspect-ratio: var(--qsc-ratio); overflow: hidden; background: var(--qsc-empty); }
/* أقوى من قواعد البيلدرز والقوالب على كل الصور (زي ".elementor img { height: auto }") علشان الصورة تملى مكانها */
.qsc-card .qsc-card-media .qsc-card-img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.qsc-list a.qsc-card:hover .qsc-card-img { transform: scale(1.04); }
.qsc-card-img-empty { background: var(--qsc-empty); }
.qsc-card-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.qsc-card-title { font-family: var(--qsc-heading-font); font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--qsc-card-title-color, var(--qsc-headings-color)); }
.qsc-card-excerpt { flex: 1; font-size: 15px; line-height: 1.7; color: var(--qsc-card-text-color, var(--qsc-muted)); }
.qsc-card-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14.5px; font-weight: 700; color: var(--qsc-primary); }
.qsc-card-more .qsc-icon { width: 16px; height: 16px; transition: transform 0.3s; }
.qsc-list a.qsc-card:hover .qsc-card-more .qsc-icon { transform: translateX(3px); }
[dir="rtl"] .qsc-list a.qsc-card:hover .qsc-card-more .qsc-icon { transform: scaleX(-1) translateX(3px); }

/* أرقام الصفحات */
.qsc-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 32px; }
.qsc-pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--qsc-line); border-radius: 999px; text-decoration: none; color: inherit; font-weight: 600;
}
.qsc-pagination .page-numbers.current { background: var(--qsc-primary); border-color: var(--qsc-primary); color: #fff; }
.qsc-pagination a.page-numbers:hover { border-color: var(--qsc-primary); color: var(--qsc-primary); }
.qsc-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* القسم لسه فاضي */
.qsc-empty { padding: 36px 24px; border: 1px dashed var(--qsc-line); border-radius: var(--qsc-radius); text-align: center; color: var(--qsc-muted); }
.qsc-empty p { margin: 0 0 14px; }
.qsc-empty p:last-child { margin-bottom: 0; }
.qsc-empty .qsc-empty-btn { display: inline-flex; padding: 10px 22px; border-radius: 999px; background: var(--qsc-primary); color: #fff; font-weight: 700; text-decoration: none; }
.qsc-notice { padding: 12px 16px; border-radius: 12px; background: #fff7e6; color: #8a5300; }

/* ---------- صفحة العنصر ---------- */
.qsc-back { margin-top: 0; margin-bottom: 22px; }
.qsc-back a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--qsc-muted); }
.qsc-back a:hover { color: var(--qsc-primary); }
.qsc-back .qsc-icon { width: 16px; height: 16px; transform: scaleX(-1); }
[dir="rtl"] .qsc-back .qsc-icon { transform: none; }

/* زرار الاتصال وزرار واتساب (أقوى من ".entry-content a" في القوالب علشان ألوانهم ما تتغيرش) */
.qsc-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; margin-bottom: 8px; }
.qsc-actions-start { justify-content: flex-start; }
.qsc-wrap-item > .qsc-actions:not(:last-child) { margin-top: 0; margin-bottom: 28px; }
.qsc-actions a.qsc-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	transition: transform 0.25s, background-color 0.25s, box-shadow 0.25s;
}
.qsc-actions a.qsc-btn:hover, .qsc-actions a.qsc-btn:focus-visible { transform: translateY(-2px); }
.qsc-actions a.qsc-btn-call { background: var(--qsc-call, var(--qsc-primary)); color: #fff; box-shadow: 0 12px 26px -16px rgba(15, 23, 42, 0.45); }
.qsc-actions a.qsc-btn-wa { background: var(--qsc-whatsapp); color: #fff; box-shadow: 0 12px 26px -16px rgba(15, 23, 42, 0.45); }
.qsc-actions a.qsc-btn:hover { color: #fff; }

/* ---------- العروض (قسم في أي صفحة) ---------- */
.qsc-display { margin: 0 0 8px; }
.qsc-display-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px; margin: 0 0 24px; }
.qsc-display-titles { min-width: 0; max-width: 720px; }
.qsc-display-title { margin: 0; padding: 0; font-family: var(--qsc-heading-font); font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.3; }
.qsc-display-title.qsc-has-color { color: var(--qsc-display-title); } /* من غير لون مختار: لون عناوين القالب */
.qsc-display-subtitle { margin: 8px 0 0; font-size: 16px; line-height: 1.75; color: var(--qsc-muted); }
.qsc-head-center { flex-direction: column; align-items: center; text-align: center; }
.qsc-head-center .qsc-display-titles { margin: 0 auto; }
.qsc-display-foot { display: flex; justify-content: center; margin-top: 30px; }

/* زرار "عرض الكل": إطار / ملوّن / رابط */
.qsc-display a.qsc-display-all { display: inline-flex; flex: none; align-items: center; gap: 8px; padding: 11px 22px; border: 1.5px solid var(--qsc-display-button, var(--qsc-primary)); border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none !important; transition: background-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s; }
.qsc-display a.qsc-all-outline { background: transparent; color: var(--qsc-display-button, var(--qsc-primary)); }
.qsc-display a.qsc-all-outline:hover, .qsc-display a.qsc-all-outline:focus-visible { background: var(--qsc-display-button, var(--qsc-primary)); color: #fff; }
.qsc-display a.qsc-all-solid { background: var(--qsc-display-button, var(--qsc-primary)); color: #fff; box-shadow: 0 12px 26px -16px rgba(15, 23, 42, 0.45); }
.qsc-display a.qsc-all-solid:hover, .qsc-display a.qsc-all-solid:focus-visible { color: #fff; transform: translateY(-2px); }
.qsc-display a.qsc-all-link { padding: 4px 0; border: 0; border-radius: 0; background: none; color: var(--qsc-display-button, var(--qsc-primary)); }
.qsc-display a.qsc-all-link:hover { text-decoration: underline !important; text-underline-offset: 4px; }
.qsc-display-all .qsc-icon { width: 16px; height: 16px; }
[dir="rtl"] .qsc-display-all .qsc-icon { transform: scaleX(-1); }

.qsc-display-head-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.qsc-grid-item { display: flex; min-width: 0; }
.qsc-grid-item > .qsc-card { width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.qsc-card, .qsc-card-img, .qsc-actions a.qsc-btn { transition: none; }
	.qsc-list a.qsc-card:hover, .qsc-actions a.qsc-btn:hover { transform: none; }
	.qsc-list a.qsc-card:hover .qsc-card-img { transform: none; }
}