/*
 * עיצוב עמודי השירות.
 *
 * ═══════════════════════════════════════════════════════════════
 *  האתר רץ על רקע כהה. נמדד מתוך ה-Elementor kit החי:
 *      .elementor-kit-4 { background-color: var(--e-global-color-2713785) }
 *      --e-global-color-2713785: #083457
 *
 *  לכן כל טקסט שיושב ישירות על הדף חייב להיות בהיר, וכל טקסט
 *  שיושב בתוך כרטיס לבן חייב להיות כהה. ערבוב בין השניים גורם
 *  לטקסט להיעלם. זו הסיבה שהקובץ מפריד במפורש בין "על הרקע"
 *  לבין "בתוך כרטיס".
 * ═══════════════════════════════════════════════════════════════
 */

:root {
	/* ── צבעי המותג, מתוך ערכת Elementor של האתר ── */
	--s-navy: #083457;        /* גם רקע האתר */
	--s-cyan: #39c4e5;
	--s-mint: #39df8f;
	--s-white: #ffffff;

	/* משטחים כהים ביחס לרקע הדף */
	--s-raised: #0d456d;      /* בהיר מהרקע — לפאנלים */
	--s-deep: #062a45;        /* כהה מהרקע */
	--s-hairline: rgba(57, 196, 229, 0.28);

	/* טקסט על הרקע הכהה */
	--s-on-dark: #dbe9f2;
	--s-on-dark-muted: #9db8cb;

	/* טקסט בתוך כרטיסים בהירים */
	--s-ink: #16232e;
	--s-ink-muted: #5d6d7a;
	--s-card: #ffffff;
	--s-card-line: #dbe6ec;

	--s-radius: 14px;
	--s-radius-lg: 20px;
	--s-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.shimon-service {
	max-width: 1080px;
	margin-inline: auto;
	padding: 0 20px 72px;

	color: var(--s-on-dark, #dbe9f2);
	font-family: "Assistant", "Segoe UI", Arial, sans-serif;
	font-size: 18px;
	line-height: 1.75;
}

/* ── טיפוגרפיה על הרקע הכהה ─────────────────────── */

/*
 * שם המחלקה מוכפל בכוונה: .shimon-service.shimon-service
 *
 * Elementor מגדיר צבע גלובלי לכותרות ולטקסט בסלקטור מסוג
 * .elementor-kit-4 h2 — ספציפיות (0,1,1), זהה לשלנו, והוא נטען
 * אחרינו ולכן מנצח בשוויון. הכפלת המחלקה מעלה אותנו ל-(0,2,1)
 * ומכריעה את ההתנגשות בלי !important.
 *
 * הרכיבים הייחודיים (.shimon-hero, .shimon-card) אינם זקוקים לזה,
 * כי לאלמנטור אין כלל מתחרה עליהם.
 */

.shimon-service.shimon-service h2 {
	font-size: clamp(24px, 3.6vw, 32px);
	line-height: 1.25;
	font-weight: 800;
	color: var(--s-white, #ffffff);
	margin: 56px 0 18px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--s-cyan, #39c4e5);
	display: inline-block;
}

.shimon-service.shimon-service > h3 {
	font-size: clamp(18px, 2.4vw, 22px);
	font-weight: 700;
	color: var(--s-white, #ffffff);
	margin: 26px 0 8px;
}

.shimon-service.shimon-service > p,
.shimon-service.shimon-service > ul:not([class]),
.shimon-service.shimon-service > ol:not([class]),
.shimon-service.shimon-service > ul:not([class]) li,
.shimon-service.shimon-service > ol:not([class]) li {
	color: var(--s-on-dark, #dbe9f2);
}

.shimon-service.shimon-service > p {
	max-width: 68ch;
}

.shimon-service.shimon-service > ul:not([class]),
.shimon-service.shimon-service > ol:not([class]) {
	padding-inline-start: 1.3em;
}

.shimon-service.shimon-service > ul:not([class]) li,
.shimon-service.shimon-service > ol:not([class]) li {
	max-width: 66ch;
	margin-bottom: 8px;
}

.shimon-service.shimon-service > ul:not([class]) li::marker { color: var(--s-cyan, #39c4e5); }

.shimon-service.shimon-service > p strong,
.shimon-service.shimon-service > ul:not([class]) strong { color: var(--s-white, #ffffff); }

/* קישורים על הרקע הכהה — תכלת, לא כחול כהה */
.shimon-service.shimon-service > p a,
.shimon-service.shimon-service > ul:not([class]) a,
.shimon-service.shimon-service .shimon-breadcrumbs a {
	color: var(--s-cyan, #39c4e5);
	font-weight: 600;
	text-underline-offset: 3px;
}

/* ── פירורי לחם ──────────────────────────────────── */

.shimon-service.shimon-service .shimon-breadcrumbs {
	font-size: 15px;
	color: var(--s-on-dark-muted, #9db8cb);
	padding: 18px 0 0;
}

/* ── HERO ────────────────────────────────────────── */

.shimon-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--s-radius-lg, 20px);
	/* הרקע זהה לרקע הדף, ולכן נדרש משטח מוגבה + מסגרת דקה
	   כדי שה-Hero לא ייבלע בעמוד. */
	background-color: #0d456d;
	background-image:
		radial-gradient(120% 130% at 85% 0%, rgba(57, 196, 229, 0.30) 0%, rgba(57, 196, 229, 0) 58%),
		linear-gradient(135deg, #0d456d 0%, #062a45 100%);
	border: 1px solid var(--s-hairline, rgba(57,196,229,0.28));
	box-shadow: var(--s-shadow, 0 6px 20px rgba(0,0,0,0.22));
	color: #ffffff;
	padding: 40px;
	margin-top: 14px;

	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 36px;
	align-items: center;
}

.shimon-hero h1 {
	font-size: clamp(28px, 4.6vw, 44px);
	line-height: 1.15;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 14px;
}

.shimon-hero__lede {
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.93);
	margin: 0 0 26px;
	max-width: 52ch;
}

.shimon-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--s-radius, 14px);
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.36);
}

.shimon-pricetag {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	background: var(--s-mint, #39df8f);
	color: #04321d;
	font-weight: 800;
	font-size: 19px;
	padding: 8px 18px;
	border-radius: 999px;
	margin-bottom: 18px;
}

/* ── כפתורי פעולה ────────────────────────────────── */

.shimon-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.shimon-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 54px;
	padding: 0 28px;
	border-radius: var(--s-radius, 14px);
	font-size: 18px;
	font-weight: 800;
	text-decoration: none;
	transition: transform 0.12s ease;
}

.shimon-btn--primary {
	background: var(--s-cyan, #39c4e5);
	color: #042b3a;
	box-shadow: 0 6px 18px rgba(57, 196, 229, 0.3);
}

.shimon-btn--wa {
	background: #25d366;
	color: #05331b;
	box-shadow: 0 6px 18px rgba(37, 211, 102, 0.28);
}

.shimon-btn:hover { transform: translateY(-2px); }

.shimon-btn:focus-visible {
	outline: 3px solid var(--s-white, #ffffff);
	outline-offset: 3px;
}

/* ── רצועת אמון — כרטיסים בהירים ─────────────────── */

.shimon-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 14px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.shimon-trust li {
	background: var(--s-card, #ffffff);
	border-radius: var(--s-radius, 14px);
	box-shadow: var(--s-shadow, 0 6px 20px rgba(0,0,0,0.22));
	padding: 16px 18px;
	font-size: 16px;
	font-weight: 700;
	color: var(--s-navy, #083457);
	text-align: center;
	max-width: none;
}

/* ── כרטיסים בהירים ──────────────────────────────── */

.shimon-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
	margin: 26px 0;
	padding: 0;
	list-style: none;
}

.shimon-card {
	background: var(--s-card, #ffffff);
	border-radius: var(--s-radius, 14px);
	box-shadow: var(--s-shadow, 0 6px 20px rgba(0,0,0,0.22));
	padding: 22px 24px;
	max-width: none;
	color: var(--s-ink, #16232e);
}

.shimon-card h3 {
	margin: 0 0 6px;
	font-size: 19px;
	color: var(--s-navy, #083457);
}

.shimon-card p {
	margin: 0;
	color: var(--s-ink-muted, #5d6d7a);
	font-size: 16.5px;
	line-height: 1.65;
}

.shimon-card strong { color: var(--s-navy, #083457); }

.shimon-card a { color: #0a6a8a; font-weight: 700; }

/* ── כרטיסי השוואה — רקע בהיר, טקסט כהה ──────────── */

.shimon-compare {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin: 26px 0;
}

.shimon-compare > div {
	border-radius: var(--s-radius, 14px);
	padding: 24px 26px;
	color: var(--s-ink, #16232e);
	box-shadow: var(--s-shadow, 0 6px 20px rgba(0,0,0,0.22));
}

.shimon-compare__yes { background: #eafaf2; border: 2px solid var(--s-mint, #39df8f); }
.shimon-compare__no  { background: #fff4ea; border: 2px solid #f0b184; }

.shimon-compare h3 { margin-top: 0; color: var(--s-navy, #083457); }
.shimon-compare li { color: var(--s-ink, #16232e); margin-bottom: 6px; }
.shimon-compare li::marker { color: var(--s-ink-muted, #5d6d7a); }
.shimon-compare a { color: #0a6a8a; font-weight: 700; }

/* ── שלבים ממוספרים — פאנל מוגבה ─────────────────── */

.shimon-steps {
	list-style: none;
	counter-reset: step;
	padding: 0;
	margin: 26px 0;
	display: grid;
	gap: 12px;
}

.shimon-steps li {
	counter-increment: step;
	position: relative;
	background: var(--s-raised, #0d456d);
	border: 1px solid var(--s-hairline, rgba(57,196,229,0.28));
	border-radius: var(--s-radius, 14px);
	padding: 18px 76px 18px 24px;
	max-width: none;
	font-size: 17px;
	color: var(--s-on-dark, #dbe9f2);
}

.shimon-steps li strong { color: var(--s-white, #ffffff); }
.shimon-steps li a { color: var(--s-cyan, #39c4e5); font-weight: 700; }

.shimon-steps li::before {
	content: counter(step);
	position: absolute;
	inset-inline-start: 22px;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	background: var(--s-cyan, #39c4e5);
	color: #042b3a;
	font-weight: 800;
	font-size: 18px;
	border-radius: 50%;
}

/* ── תיבות הדגשה — פאנל מוגבה ────────────────────── */

.shimon-note {
	border-inline-start: 5px solid var(--s-cyan, #39c4e5);
	background: var(--s-raised, #0d456d);
	border-radius: var(--s-radius, 14px);
	padding: 20px 24px;
	margin: 30px 0;
	color: var(--s-on-dark, #dbe9f2);
	box-shadow: var(--s-shadow, 0 6px 20px rgba(0,0,0,0.22));
}

.shimon-note strong { color: var(--s-white, #ffffff); }
.shimon-note a { color: var(--s-cyan, #39c4e5); font-weight: 700; }
.shimon-note > :last-child { margin-bottom: 0; }

.shimon-note--warn {
	border-inline-start-color: #f0b184;
	background: #3b2a1c;
}

/* ── בלוק מחיר ───────────────────────────────────── */

.shimon-price {
	background-color: #062a45;
	background-image: linear-gradient(135deg, #0d456d 0%, #062a45 100%);
	border: 1px solid var(--s-hairline, rgba(57,196,229,0.28));
	box-shadow: var(--s-shadow, 0 6px 20px rgba(0,0,0,0.22));
	color: #ffffff;
	border-radius: var(--s-radius-lg, 20px);
	padding: 32px 34px;
	margin: 30px 0;
}

.shimon-price h3 { color: #ffffff; margin-top: 0; }

.shimon-price__figure {
	font-size: clamp(32px, 5vw, 44px);
	font-weight: 800;
	color: var(--s-mint, #39df8f);
	line-height: 1.1;
	margin: 0 0 6px;
}

.shimon-price p,
.shimon-price li { color: rgba(255, 255, 255, 0.92); max-width: 62ch; }

.shimon-price strong { color: #ffffff; }
.shimon-price a { color: var(--s-cyan, #39c4e5); font-weight: 700; }
.shimon-price li::marker { color: var(--s-cyan, #39c4e5); }

/* ── שאלות נפוצות — כרטיסים בהירים ───────────────── */

.shimon-faq {
	margin: 26px 0;
	display: grid;
	gap: 10px;
}

.shimon-faq details {
	border-radius: var(--s-radius, 14px);
	background: var(--s-card, #ffffff);
	box-shadow: var(--s-shadow, 0 6px 20px rgba(0,0,0,0.22));
	padding: 16px 20px;
	color: var(--s-ink, #16232e);
}

.shimon-faq summary {
	font-weight: 700;
	font-size: 18px;
	color: var(--s-navy, #083457);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.shimon-faq summary::-webkit-details-marker { display: none; }

.shimon-faq summary::after {
	content: "+";
	color: #0a6a8a;
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	flex: none;
}

.shimon-faq details[open] summary::after { content: "\2013"; }
.shimon-faq details[open] summary { margin-bottom: 10px; }

.shimon-faq p { margin: 0; color: var(--s-ink-muted, #5d6d7a); }
.shimon-faq a { color: #0a6a8a; font-weight: 700; }

/* ── שירותים נוספים ──────────────────────────────── */

.shimon-related {
	margin: 52px 0 0;
	padding: 28px 30px;
	background: var(--s-raised, #0d456d);
	border: 1px solid var(--s-hairline, rgba(57,196,229,0.28));
	border-radius: var(--s-radius-lg, 20px);
}

.shimon-related h2 { margin-top: 0; font-size: 22px; }

.shimon-related ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shimon-related li {
	background: var(--s-card, #ffffff);
	border-radius: var(--s-radius, 14px);
	padding: 16px 18px;
	max-width: none;
}

.shimon-related a {
	text-decoration: none;
	color: var(--s-navy, #083457);
	font-weight: 700;
}

.shimon-related span {
	display: block;
	font-size: 15px;
	color: var(--s-ink-muted, #5d6d7a);
	font-weight: 400;
	margin-top: 3px;
}

/* ── CTA סוגר ────────────────────────────────────── */

.shimon-closing {
	margin: 48px 0 0;
	padding: 34px;
	border-radius: var(--s-radius-lg, 20px);
	background-color: #0d456d;
	background-image:
		radial-gradient(110% 130% at 15% 0%, rgba(57, 223, 143, 0.24) 0%, rgba(57, 223, 143, 0) 62%),
		linear-gradient(135deg, #0d456d 0%, #062a45 100%);
	border: 1px solid var(--s-hairline, rgba(57,196,229,0.28));
	box-shadow: var(--s-shadow, 0 6px 20px rgba(0,0,0,0.22));
	color: #ffffff;
	text-align: center;
}

.shimon-closing h2 {
	color: #ffffff;
	border-bottom-color: var(--s-mint, #39df8f);
	margin-top: 0;
}

.shimon-closing p { max-width: none; color: rgba(255, 255, 255, 0.93); }
.shimon-closing .shimon-actions { justify-content: center; }

/* ── תמונות ותיאורים ─────────────────────────────── */

.shimon-service figure { margin: 30px 0; }

.shimon-service figcaption {
	font-size: 15px;
	color: var(--s-on-dark-muted, #9db8cb);
	margin-top: 8px;
}

/* ── מובייל ──────────────────────────────────────── */

@media (max-width: 860px) {
	.shimon-hero {
		grid-template-columns: 1fr;
		padding: 30px 24px;
		gap: 24px;
	}
	.shimon-hero__media { order: 2; }
}

@media (max-width: 560px) {
	.shimon-service { font-size: 17px; padding-inline: 16px; }
	.shimon-btn { width: 100%; justify-content: center; }
	.shimon-steps li { padding: 16px 66px 16px 18px; }
	.shimon-closing, .shimon-price { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.shimon-btn { transition: none; }
	.shimon-btn:hover { transform: none; }
}
