/*
Theme Name: Plan 360
Theme URI: https://www.plan-360.co.il/
Author: Plan 360
Description: תבנית ייעודית לפלטפורמת ספקי אירועים. RTL מלא, נגישות לפי ת״י 5568, נתונים מובנים ומהירות טעינה גבוהה. פועלת יחד עם התוסף Plan 360 Core.
Version: 3.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plan360
Tags: rtl-language-support, accessibility-ready, custom-menu, translation-ready
*/

/* ==========================================================================
   1. אסימוני עיצוב
   ========================================================================== */

:root {
	/* דיו וניטרליים, מוטים לגוון החם של המותג */
	--p360-ink: #1a1220;
	--p360-ink-2: #443a4e;
	--p360-ink-3: #756a7f;
	--p360-line: #efe1d5;
	--p360-line-2: #dcc7b5;

	--p360-bg: #fffaf6;
	--p360-surface: #ffffff;
	--p360-sand: #fbf1e8;
	--p360-sand-2: #f5e5d7;

	/* מותג: יין חם שנפתח לגחלת ולענבר, בהשראת תאורת השקיעה בתמונות */
	--p360-brand: #a32b57;
	--p360-brand-dark: #7a1b3e;
	--p360-brand-mid: #c23a67;
	--p360-brand-light: #fdeef2;
	--p360-ember: #ef6a3d;
	--p360-ember-light: #fdeee6;
	--p360-amber: #f5a623;
	--p360-gold: #b07f2e;
	--p360-gold-mid: #d9a54a;
	--p360-gold-light: #fdf4e3;

	/* מעברי צבע חוזרים */
	--p360-grad-warm: linear-gradient(135deg, #c23a67 0%, #ef6a3d 62%, #f5a623 100%);
	--p360-grad-brand: linear-gradient(135deg, #c23a67, #7a1b3e);
	--p360-grad-save: linear-gradient(135deg, #16a06b, #0f7a52);

	/* זכוכית */
	--p360-glass: rgba(255, 255, 255, .72);
	--p360-glass-line: rgba(255, 255, 255, .55);
	--p360-glass-dark: rgba(26, 16, 34, .55);

	/* חיסכון: הצבע שמסמן כסף שנשאר אצל הלקוח */
	--p360-save: #0f7a52;
	--p360-save-mid: #16a06b;
	--p360-save-light: #e5f6ee;

	--p360-ok: #0f7a52;
	--p360-ok-bg: #e5f6ee;
	--p360-warn: #8a5a12;
	--p360-warn-bg: #fbf1de;
	--p360-err: #a01f1f;
	--p360-err-bg: #fbeaea;

	/* טיפוגרפיה */
	--p360-font: 'Assistant', 'Segoe UI', 'Arial Hebrew', system-ui, sans-serif;
	--p360-font-head: 'Heebo', 'Assistant', 'Segoe UI', system-ui, sans-serif;
	--p360-scale: 1;

	--p360-fs-xs: calc(0.8125rem * var(--p360-scale));
	--p360-fs-sm: calc(0.9375rem * var(--p360-scale));
	--p360-fs-base: calc(1.0625rem * var(--p360-scale));
	--p360-fs-lg: calc(1.1875rem * var(--p360-scale));
	--p360-fs-xl: calc(1.5rem * var(--p360-scale));
	--p360-fs-2xl: calc(2.05rem * var(--p360-scale));
	--p360-fs-3xl: calc(2.8rem * var(--p360-scale));
	--p360-fs-4xl: calc(3.9rem * var(--p360-scale));

	--p360-lh: 1.7;
	--p360-lh-tight: 1.12;
	--p360-ls: 0;

	/* מרווח וצורה */
	--p360-gap: 1rem;
	--p360-gap-lg: 2rem;
	--p360-section: clamp(3.5rem, 7vw, 6.5rem);
	--p360-wrap: 1220px;
	--p360-wrap-narrow: 780px;

	--p360-radius-sm: 10px;
	--p360-radius: 16px;
	--p360-radius-lg: 26px;
	--p360-radius-xl: 36px;
	--p360-radius-pill: 999px;

	--p360-shadow-xs: 0 1px 2px rgba(26, 18, 32, .05);
	--p360-shadow: 0 2px 4px rgba(26, 18, 32, .04), 0 10px 28px -14px rgba(26, 18, 32, .22);
	--p360-shadow-lg: 0 3px 6px rgba(26, 18, 32, .05), 0 28px 56px -24px rgba(26, 18, 32, .32);
	--p360-shadow-brand: 0 18px 40px -18px rgba(194, 58, 103, .55);
	--p360-shadow-ember: 0 18px 40px -18px rgba(239, 106, 61, .5);
	--p360-shadow-save: 0 18px 40px -18px rgba(15, 122, 82, .45);

	--p360-t: 200ms cubic-bezier(.2, .7, .3, 1);
	--p360-t-slow: 520ms cubic-bezier(.16, .84, .32, 1);
}

/* ==========================================================================
   2. איפוס ובסיס
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6.5rem;
	/* clip ולא hidden: מונע גלילה אופקית בלי לשבור position: sticky */
	overflow-x: clip;
	max-inline-size: 100%;
}

body {
	margin: 0;
	background: var(--p360-bg);
	color: var(--p360-ink);
	font-family: var(--p360-font);
	font-size: var(--p360-fs-base);
	line-height: var(--p360-lh);
	letter-spacing: var(--p360-ls);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
	max-inline-size: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--p360-font-head);
	line-height: var(--p360-lh-tight);
	margin: 0 0 .6em;
	font-weight: 800;
	letter-spacing: -.02em;
	text-wrap: balance;
}

h1 { font-size: var(--p360-fs-3xl); }
h2 { font-size: var(--p360-fs-2xl); }
h3 { font-size: var(--p360-fs-xl); }
h4 { font-size: var(--p360-fs-lg); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--p360-brand);
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	transition: color var(--p360-t);
}
a:hover { color: var(--p360-brand-dark); }

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

ul, ol { padding-inline-start: 1.3em; }

hr { border: 0; border-top: 1px solid var(--p360-line); margin: var(--p360-gap-lg) 0; }

:focus-visible {
	outline: 3px solid var(--p360-brand);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection { background: var(--p360-brand); color: #fff; }

.p360-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   3. אייקונים
   ========================================================================== */

.p360-icon { flex-shrink: 0; }
.p360-icon__fill { opacity: .16; }
.p360-icon--check .p360-icon__line,
.p360-icon--arrow .p360-icon__line { stroke-width: 2; }

/* שבב אייקון: הריבוע המדורג שמאחורי האייקון */
.p360-chip {
	display: grid;
	place-items: center;
	inline-size: 54px;
	block-size: 54px;
	border-radius: 17px;
	background: linear-gradient(145deg, var(--p360-brand-light), var(--p360-sand));
	color: var(--p360-brand);
	position: relative;
	flex-shrink: 0;
	transition: transform var(--p360-t), box-shadow var(--p360-t), background var(--p360-t);
}
.p360-chip::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid rgba(138, 43, 82, .12);
}
.p360-chip--gold { background: linear-gradient(145deg, var(--p360-gold-light), var(--p360-sand)); color: var(--p360-gold); }
.p360-chip--save { background: linear-gradient(145deg, var(--p360-save-light), var(--p360-sand)); color: var(--p360-save); }
.p360-chip--solid { background: var(--p360-grad-warm); color: #fff; box-shadow: var(--p360-shadow-brand); }
.p360-chip--sm { inline-size: 42px; block-size: 42px; border-radius: 13px; }
.p360-chip--lg { inline-size: 66px; block-size: 66px; border-radius: 21px; }

/* ==========================================================================
   4. פריסה
   ========================================================================== */

.p360-wrap { width: min(100% - 2.5rem, var(--p360-wrap)); margin-inline: auto; }
.p360-wrap--narrow { max-width: var(--p360-wrap-narrow); }

.p360-section { padding-block: var(--p360-section); position: relative; }
.p360-section--sand { background: var(--p360-sand); }
.p360-section--tight { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }
.p360-section--ink { background: var(--p360-ink); color: #efe6ee; }
.p360-section--ink h2, .p360-section--ink h3 { color: #fff; }

.p360-section--mesh {
	background:
		radial-gradient(900px 420px at 90% 0%, var(--p360-brand-light), transparent 62%),
		radial-gradient(700px 380px at 0% 100%, var(--p360-gold-light), transparent 58%),
		var(--p360-bg);
}

.p360-section__head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.p360-section__head--center { margin-inline: auto; text-align: center; }

.p360-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--p360-font-head);
	font-size: var(--p360-fs-xs);
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--p360-gold);
	background: var(--p360-gold-light);
	padding: .4rem .95rem .4rem .8rem;
	border-radius: var(--p360-radius-pill);
	margin-bottom: 1rem;
}
.p360-eyebrow .p360-icon { color: var(--p360-gold-mid); }
.p360-eyebrow--save { color: var(--p360-save); background: var(--p360-save-light); }
.p360-eyebrow--save .p360-icon { color: var(--p360-save-mid); }

.p360-lead { font-size: var(--p360-fs-lg); color: var(--p360-ink-2); }

/* חשיפה בגלילה.
   ההסתרה חלה רק כאשר JavaScript פעיל (המחלקה p360-js נוספת בתחילת הטעינה),
   כדי שהתוכן יישאר גלוי במלואו גם אם הסקריפט נחסם או נכשל. */
.p360-js [data-anim] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--p360-t-slow), transform var(--p360-t-slow);
}
.p360-js [data-anim].is-in { opacity: 1; transform: none; }
.p360-js [data-anim][data-anim-delay='1'] { transition-delay: 80ms; }
.p360-js [data-anim][data-anim-delay='2'] { transition-delay: 160ms; }
.p360-js [data-anim][data-anim-delay='3'] { transition-delay: 240ms; }
.p360-js [data-anim][data-anim-delay='4'] { transition-delay: 320ms; }

/* ==========================================================================
   5. קישורי דילוג וסרגל נגישות
   ========================================================================== */

.p360-skip { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 1000; }
.p360-skip__link {
	position: absolute;
	inset-block-start: -100vh;
	inset-inline-start: .5rem;
	background: var(--p360-ink);
	color: #fff;
	padding: .85rem 1.4rem;
	border-radius: 0 0 var(--p360-radius) var(--p360-radius);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.p360-skip__link:focus { inset-block-start: 0; color: #fff; outline: 3px solid var(--p360-gold); outline-offset: 2px; }



/* ==========================================================================
   6. כותרת עליונה
   ========================================================================== */

.p360-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 500;
	background: rgba(253, 250, 247, .86);
	backdrop-filter: saturate(1.6) blur(14px);
	border-block-end: 1px solid transparent;
	transition: border-color var(--p360-t), box-shadow var(--p360-t), background var(--p360-t);
}
.p360-header.is-stuck {
	border-block-end-color: var(--p360-line);
	box-shadow: 0 6px 24px -18px rgba(26, 18, 32, .5);
}

.p360-header__inner { display: flex; align-items: center; gap: 1.25rem; min-block-size: 78px; }

.p360-brand {
	display: inline-flex; align-items: center; gap: .65rem;
	text-decoration: none; color: var(--p360-ink);
	font-family: var(--p360-font-head);
	font-weight: 800; font-size: 1.35rem;
	letter-spacing: -.03em;
	flex-shrink: 0;
}
.p360-brand__mark {
	inline-size: 42px; block-size: 42px;
	border-radius: 13px;
	background: var(--p360-grad-warm);
	display: grid; place-items: center;
	color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: -.04em;
	box-shadow: var(--p360-shadow-brand);
	position: relative;
	overflow: hidden;
}
.p360-brand__mark::after {
	content: '';
	position: absolute;
	inset-block-start: -60%;
	inset-inline-start: -30%;
	inline-size: 60%;
	block-size: 220%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
	transform: rotate(18deg);
	transition: transform 700ms ease;
}
.p360-brand:hover .p360-brand__mark::after { transform: rotate(18deg) translateX(340%); }
.p360-brand__sub {
	display: block;
	font-family: var(--p360-font);
	font-size: .68rem; font-weight: 600;
	letter-spacing: .1em;
	color: var(--p360-ink-3);
}

.p360-nav { margin-inline-start: auto; }
.p360-nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.p360-nav__list a {
	display: block;
	padding: .6rem .85rem;
	border-radius: var(--p360-radius-pill);
	color: var(--p360-ink-2);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--p360-fs-sm);
	white-space: nowrap;
	transition: background var(--p360-t), color var(--p360-t);
}
.p360-nav__list a:hover,
.p360-nav__list .current-menu-item > a { background: var(--p360-brand-light); color: var(--p360-brand); }

.p360-nav li { position: relative; }
.p360-nav .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-inline-size: 230px;
	background: var(--p360-surface);
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius);
	box-shadow: var(--p360-shadow-lg);
	padding: .4rem; margin: 0; list-style: none;
	display: none; z-index: 10;
}
.p360-nav li:hover > .sub-menu,
.p360-nav li:focus-within > .sub-menu { display: block; }

.p360-header__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.p360-burger {
	display: none;
	inline-size: 46px; block-size: 46px;
	border: 1px solid var(--p360-line-2);
	background: var(--p360-surface);
	border-radius: 13px;
	cursor: pointer;
	color: var(--p360-ink);
}

@media (max-width: 1080px) {
	.p360-burger { display: grid; place-items: center; }
	.p360-header__actions .p360-btn--ghost { display: none; }
	.p360-nav {
		position: fixed;
		inset: 78px 0 0;
		background: var(--p360-bg);
		padding: 1.5rem;
		overflow-y: auto;
		transform: translateY(-100%);
		visibility: hidden;
		transition: transform var(--p360-t), visibility var(--p360-t);
	}
	.p360-nav.is-open { transform: none; visibility: visible; }
	.p360-nav__list { flex-direction: column; align-items: stretch; gap: .2rem; }
	.p360-nav__list a { padding: .9rem 1rem; font-size: var(--p360-fs-lg); }
	.p360-nav .sub-menu {
		position: static; display: block; border: 0; box-shadow: none;
		padding-inline-start: 1rem; background: transparent;
	}
}

/* ==========================================================================
   7. כפתורים
   ========================================================================== */

.p360-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-block-size: 50px;
	padding: .75rem 1.6rem;
	border-radius: var(--p360-radius-pill);
	border: 1.5px solid transparent;
	font-family: var(--p360-font-head);
	font-size: var(--p360-fs-sm);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform var(--p360-t), box-shadow var(--p360-t), background var(--p360-t), color var(--p360-t), border-color var(--p360-t);
}
.p360-btn:hover { transform: translateY(-2px); }
.p360-btn:active { transform: translateY(0); }
.p360-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.p360-btn .p360-icon { transition: transform var(--p360-t); }
.p360-btn:hover .p360-icon--arrow { transform: translateX(-4px); }

.p360-btn--primary {
	background: var(--p360-grad-warm);
	background-size: 180% 180%;
	background-position: 0% 50%;
	color: #fff;
	box-shadow: var(--p360-shadow-brand);
	transition: transform var(--p360-t), box-shadow var(--p360-t), background-position 420ms ease;
}
.p360-btn--primary:hover {
	color: #fff;
	background-position: 100% 50%;
	box-shadow: 0 22px 46px -18px rgba(239, 106, 61, .6);
}

.p360-btn--save {
	background: linear-gradient(135deg, var(--p360-save-mid), var(--p360-save));
	color: #fff;
	box-shadow: var(--p360-shadow-save);
}
.p360-btn--save:hover { color: #fff; }

.p360-btn--gold {
	background: linear-gradient(135deg, var(--p360-gold-mid), var(--p360-gold));
	color: #fff;
}
.p360-btn--gold:hover { color: #fff; }

.p360-btn--ghost { background: var(--p360-surface); color: var(--p360-ink); border-color: var(--p360-line-2); }
.p360-btn--ghost:hover { background: var(--p360-sand); color: var(--p360-ink); border-color: var(--p360-brand); }

.p360-btn--light { background: #fff; color: var(--p360-brand); border-color: #fff; }
.p360-btn--light:hover { color: var(--p360-brand-dark); }
.p360-panel--brand .p360-btn--light,
.p360-panel--brand .p360-btn--light:hover { color: var(--p360-brand); }
.p360-panel--save .p360-btn--light,
.p360-panel--save .p360-btn--light:hover { color: var(--p360-save); }

.p360-btn--block { inline-size: 100%; }
.p360-btn--lg { min-block-size: 58px; padding-inline: 2.1rem; font-size: var(--p360-fs-base); }

/* ==========================================================================
   8. גיבור
   ========================================================================== */

.p360-hero {
	position: relative;
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
	overflow: hidden;
	background:
		radial-gradient(1200px 560px at 88% -14%, var(--p360-brand-light) 0%, transparent 60%),
		radial-gradient(820px 460px at 2% 108%, var(--p360-gold-light) 0%, transparent 58%),
		var(--p360-bg);
}

.p360-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(58px);
	opacity: .5;
	pointer-events: none;
	z-index: 0;
	animation: p360-float 18s ease-in-out infinite;
}
.p360-orb--1 { inline-size: 340px; block-size: 340px; inset-block-start: -80px; inset-inline-end: 6%; background: radial-gradient(circle, rgba(168, 58, 102, .5), transparent 68%); }
.p360-orb--2 { inline-size: 280px; block-size: 280px; inset-block-end: -60px; inset-inline-start: 4%; background: radial-gradient(circle, rgba(201, 162, 83, .45), transparent 68%); animation-delay: -7s; }
.p360-orb--3 { inline-size: 210px; block-size: 210px; inset-block-start: 42%; inset-inline-start: 44%; background: radial-gradient(circle, rgba(22, 160, 107, .3), transparent 70%); animation-delay: -12s; }

@keyframes p360-float {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	33%      { transform: translate3d(-22px, 26px, 0) scale(1.06); }
	66%      { transform: translate3d(18px, -18px, 0) scale(.96); }
}

.p360-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.p360-hero__title { font-size: var(--p360-fs-4xl); margin-bottom: .45em; }
.p360-hero__title em {
	font-style: normal;
	position: relative;
	background: linear-gradient(100deg, var(--p360-brand-mid) 10%, var(--p360-gold) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	white-space: nowrap;
}
.p360-hero__title em::after {
	content: '';
	position: absolute;
	inset-inline: -.06em;
	inset-block-end: .04em;
	block-size: .16em;
	border-radius: var(--p360-radius-pill);
	background: linear-gradient(90deg, var(--p360-gold), var(--p360-brand-mid));
	opacity: .28;
	transform-origin: right center;
	animation: p360-underline var(--p360-t-slow) .5s both;
}
@keyframes p360-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.p360-hero__text { font-size: var(--p360-fs-lg); color: var(--p360-ink-2); max-width: 56ch; }

.p360-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.9rem 1.6rem; }

.p360-hero__trust {
	display: flex; flex-wrap: wrap; gap: .75rem 1.6rem;
	list-style: none; padding: 0; margin: 0;
	font-size: var(--p360-fs-sm); color: var(--p360-ink-2);
}
.p360-hero__trust li { display: flex; align-items: center; gap: .45rem; }
.p360-hero__trust .p360-icon { color: var(--p360-save); }

.p360-hero__panel {
	position: relative;
	background: var(--p360-surface);
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius-lg);
	box-shadow: var(--p360-shadow-lg);
	padding: clamp(1.35rem, 3vw, 2.1rem);
}
.p360-hero__panel::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(150deg, rgba(168, 58, 102, .35), rgba(201, 162, 83, .28) 55%, transparent);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

@media (max-width: 940px) {
	.p360-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.p360-hero__text { max-width: none; }
}

/* תג צף מעל הפאנל */
.p360-float-badge {
	position: absolute;
	inset-block-start: -18px;
	inset-inline-start: -14px;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background: linear-gradient(135deg, var(--p360-save-mid), var(--p360-save));
	color: #fff;
	font-family: var(--p360-font-head);
	font-weight: 800;
	font-size: var(--p360-fs-xs);
	padding: .5rem 1rem;
	border-radius: var(--p360-radius-pill);
	box-shadow: var(--p360-shadow-save);
	z-index: 2;
}

/* ==========================================================================
   9. חיפוש מהיר
   ========================================================================== */

.p360-finder__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.p360-finder__row--full { grid-template-columns: 1fr; }
@media (max-width: 520px) { .p360-finder__row { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   10. רצועת מספרים
   ========================================================================== */

.p360-stripe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: 1px;
	background: var(--p360-line);
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius-lg);
	overflow: hidden;
}
.p360-stripe__item {
	background: var(--p360-surface);
	padding: 1.5rem 1.25rem;
	text-align: center;
	display: flex; flex-direction: column; gap: .2rem;
}
.p360-stripe__num {
	font-family: var(--p360-font-head);
	font-weight: 800;
	font-size: clamp(1.9rem, 3.6vw, 2.6rem);
	line-height: 1.05;
	color: var(--p360-brand);
	font-variant-numeric: tabular-nums;
}
.p360-stripe__num--save { color: var(--p360-save); }
.p360-stripe__label { font-size: var(--p360-fs-sm); color: var(--p360-ink-3); }

/* ==========================================================================
   11. כרטיסים ורשתות
   ========================================================================== */

.p360-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(265px, 100%), 1fr));
	gap: 1.15rem;
	list-style: none; padding: 0; margin: 0;
}
.p360-cards--cat { grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); }
.p360-cards--wide { grid-template-columns: repeat(auto-fill, minmax(min(335px, 100%), 1fr)); }

.p360-card {
	background: var(--p360-surface);
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius);
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: border-color var(--p360-t), box-shadow var(--p360-t), transform var(--p360-t);
}
.p360-card:hover {
	border-color: rgba(138, 43, 82, .35);
	box-shadow: var(--p360-shadow);
	transform: translateY(-3px);
}

.p360-card__link {
	display: flex; align-items: center; gap: .9rem;
	padding: 1.15rem 1.25rem;
	text-decoration: none; color: inherit;
	block-size: 100%;
}
.p360-card:hover .p360-chip { transform: scale(1.07) rotate(-3deg); }

.p360-card__body { display: flex; flex-direction: column; gap: .12rem; min-inline-size: 0; flex: 1; }
.p360-card__title { font-family: var(--p360-font-head); font-weight: 700; font-size: var(--p360-fs-base); }
.p360-card__meta { font-size: var(--p360-fs-xs); color: var(--p360-ink-3); }
.p360-card__save {
	font-size: var(--p360-fs-xs);
	font-weight: 700;
	color: var(--p360-save);
	display: inline-flex; align-items: center; gap: .25rem;
}
.p360-card__go {
	margin-inline-start: auto;
	color: var(--p360-line-2);
	transition: color var(--p360-t), transform var(--p360-t);
}
.p360-card:hover .p360-card__go { color: var(--p360-brand); transform: translateX(-4px); }

/* כרטיס ערך */
.p360-value {
	padding: 1.6rem 1.5rem;
	gap: .7rem;
	background: var(--p360-surface);
}
.p360-value h3 { font-size: var(--p360-fs-lg); margin: 0; }
.p360-value p { font-size: var(--p360-fs-sm); color: var(--p360-ink-2); margin: 0; }

/* כרטיס ספק */
.p360-vendor-card { padding: 0; }
.p360-vendor-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--p360-sand-2); overflow: hidden; }
.p360-vendor-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 500ms ease; }
.p360-card:hover .p360-vendor-card__media img { transform: scale(1.05); }

.p360-vendor-card__badges {
	position: absolute; inset-block-start: .7rem; inset-inline-start: .7rem;
	display: flex; gap: .35rem; flex-wrap: wrap;
}

.p360-badge {
	display: inline-flex; align-items: center; gap: .3rem;
	background: rgba(255, 255, 255, .95);
	color: var(--p360-ink);
	font-size: var(--p360-fs-xs); font-weight: 700;
	padding: .3rem .7rem;
	border-radius: var(--p360-radius-pill);
	box-shadow: var(--p360-shadow-xs);
	text-decoration: none;
}
.p360-badge--verified { background: var(--p360-ok-bg); color: var(--p360-ok); }
.p360-badge--gold { background: var(--p360-gold-light); color: var(--p360-gold); }
.p360-badge--save { background: var(--p360-save); color: #fff; }

.p360-vendor-card__body { padding: 1.15rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.p360-vendor-card__title { font-size: var(--p360-fs-lg); margin: 0; }
.p360-vendor-card__title a { color: inherit; text-decoration: none; }
.p360-vendor-card__title a::after { content: ''; position: absolute; inset: 0; }

.p360-vendor-card__meta {
	display: flex; flex-wrap: wrap; gap: .35rem .9rem;
	font-size: var(--p360-fs-sm); color: var(--p360-ink-3);
	list-style: none; padding: 0; margin: 0;
}
.p360-vendor-card__meta li { display: flex; align-items: center; gap: .3rem; }
.p360-vendor-card__meta .p360-icon { color: var(--p360-brand); }

.p360-vendor-card__excerpt { font-size: var(--p360-fs-sm); color: var(--p360-ink-2); margin: 0; }

.p360-vendor-card__foot {
	margin-block-start: auto;
	padding-block-start: .85rem;
	border-block-start: 1px solid var(--p360-line);
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.p360-vendor-card__price { font-family: var(--p360-font-head); font-weight: 700; color: var(--p360-brand); font-size: var(--p360-fs-sm); }

/* ==========================================================================
   12. שלבים ממוספרים
   ========================================================================== */

.p360-steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 1.25rem;
	list-style: none; padding: 0; margin: 0;
	counter-reset: p360step;
	position: relative;
}
.p360-step-card {
	background: var(--p360-surface);
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius-lg);
	padding: 1.75rem 1.5rem 1.6rem;
	display: flex; flex-direction: column; gap: .7rem;
	position: relative;
	transition: transform var(--p360-t), box-shadow var(--p360-t);
}
.p360-step-card:hover { transform: translateY(-4px); box-shadow: var(--p360-shadow); }
.p360-step-card__num {
	counter-increment: p360step;
	position: absolute;
	inset-block-start: 1.1rem;
	inset-inline-start: 1.35rem;
	font-family: var(--p360-font-head);
	font-weight: 800;
	font-size: 3.4rem;
	line-height: 1;
	color: var(--p360-sand-2);
	pointer-events: none;
}
.p360-step-card__num::after { content: counter(p360step); }
.p360-step-card h3 { font-size: var(--p360-fs-lg); margin: 0; }
.p360-step-card p { font-size: var(--p360-fs-sm); color: var(--p360-ink-2); margin: 0; }

/* ==========================================================================
   13. מחשבון החיסכון
   ========================================================================== */

.p360-calc {
	background: var(--p360-surface);
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius-xl);
	box-shadow: var(--p360-shadow-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 900px) { .p360-calc { grid-template-columns: minmax(0, 1fr); } }

.p360-calc__form { padding: clamp(1.5rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 1.1rem; }
.p360-calc__form h3 { margin: 0; }

.p360-calc__out {
	background: linear-gradient(155deg, var(--p360-ink) 0%, #2b1c33 60%, #3a2140 100%);
	color: #f3ebf1;
	padding: clamp(1.5rem, 3vw, 2.4rem);
	display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
	position: relative;
	overflow: hidden;
}
.p360-calc__out::after {
	content: '';
	position: absolute;
	inline-size: 320px; block-size: 320px;
	inset-block-start: -120px; inset-inline-start: -120px;
	background: radial-gradient(circle, rgba(22, 160, 107, .45), transparent 68%);
	filter: blur(20px);
	pointer-events: none;
}
.p360-calc__out > * { position: relative; z-index: 1; }
.p360-calc__label { font-size: var(--p360-fs-xs); letter-spacing: .1em; color: rgba(243, 235, 241, .65); }
.p360-calc__big {
	font-family: var(--p360-font-head);
	font-weight: 800;
	font-size: clamp(2.6rem, 6vw, 3.8rem);
	line-height: 1;
	color: #5fe3a8;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
}
.p360-calc__sub { font-size: var(--p360-fs-sm); color: rgba(243, 235, 241, .8); margin: 0; }

.p360-compare { display: flex; flex-direction: column; gap: .7rem; margin-block: .4rem; }
.p360-compare__row { display: flex; flex-direction: column; gap: .3rem; }
.p360-compare__head {
	display: flex; justify-content: space-between; align-items: baseline;
	font-size: var(--p360-fs-sm);
}
.p360-compare__val { font-family: var(--p360-font-head); font-weight: 700; font-variant-numeric: tabular-nums; }
.p360-compare__track {
	block-size: 12px;
	border-radius: var(--p360-radius-pill);
	background: rgba(255, 255, 255, .12);
	overflow: hidden;
}
.p360-compare__bar {
	block-size: 100%;
	inline-size: var(--w, 0%);
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .28));
	transition: inline-size 700ms cubic-bezier(.16, .84, .32, 1);
}
.p360-compare__bar--save { background: linear-gradient(90deg, #5fe3a8, #16a06b); }

.p360-calc__breakdown { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.p360-calc__breakdown li {
	display: flex; justify-content: space-between; gap: 1rem;
	font-size: var(--p360-fs-sm);
	padding-block-end: .45rem;
	border-block-end: 1px dashed rgba(255, 255, 255, .14);
}
.p360-calc__breakdown li:last-child { border-block-end: 0; }
.p360-calc__breakdown b { color: #5fe3a8; font-variant-numeric: tabular-nums; }

.p360-calc__note { font-size: var(--p360-fs-xs); color: rgba(243, 235, 241, .55); margin: 0; }

/* ==========================================================================
   14. עמודי נחיתה
   ========================================================================== */

.p360-page-head {
	padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.5rem);
	background:
		radial-gradient(700px 320px at 92% 0%, var(--p360-brand-light), transparent 62%),
		linear-gradient(180deg, var(--p360-sand), var(--p360-bg));
	border-block-end: 1px solid var(--p360-line);
}
.p360-page-head__title { margin-bottom: .35em; }
.p360-page-head__intro { max-width: 70ch; color: var(--p360-ink-2); }

.p360-crumbs { font-size: var(--p360-fs-xs); color: var(--p360-ink-3); margin-bottom: 1rem; }
.p360-crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.p360-crumbs li::after { content: '‹'; margin-inline-start: .35rem; color: var(--p360-line-2); }
.p360-crumbs li:last-child::after { content: none; }
.p360-crumbs a { color: var(--p360-ink-3); }

.p360-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
	gap: 1rem;
	list-style: none; padding: 0; margin: 1.75rem 0 0;
}
.p360-fact {
	background: var(--p360-surface);
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius);
	padding: 1.05rem 1.15rem;
}
.p360-fact--save { background: var(--p360-save-light); border-color: rgba(15, 122, 82, .25); }
.p360-fact__label { display: block; font-size: var(--p360-fs-xs); color: var(--p360-ink-3); margin-bottom: .15rem; }
.p360-fact__value { font-family: var(--p360-font-head); font-weight: 800; font-size: var(--p360-fs-lg); }
.p360-fact--save .p360-fact__value { color: var(--p360-save); }

.p360-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
@media (max-width: 1020px) { .p360-layout { grid-template-columns: minmax(0, 1fr); } }

.p360-sidebar { position: sticky; inset-block-start: 100px; display: grid; gap: 1.25rem; }
@media (max-width: 1020px) { .p360-sidebar { position: static; } }

.p360-panel {
	background: var(--p360-surface);
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius-lg);
	padding: 1.5rem;
}
.p360-panel--brand {
	background: linear-gradient(150deg, var(--p360-brand-mid), var(--p360-brand-dark) 70%);
	color: #fff;
	border-color: transparent;
	box-shadow: var(--p360-shadow-brand);
}
.p360-panel--brand a { color: #fff; }
.p360-panel--save {
	background: linear-gradient(150deg, var(--p360-save-mid), var(--p360-save) 70%);
	color: #fff;
	border-color: transparent;
	box-shadow: var(--p360-shadow-save);
}
.p360-panel--save a { color: #fff; }
.p360-panel__title { font-size: var(--p360-fs-lg); margin-bottom: .6rem; }

.p360-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.p360-checklist li { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--p360-fs-sm); }
.p360-checklist .p360-icon { color: var(--p360-save); margin-block-start: .2em; }

.p360-linklist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(245px, 100%), 1fr));
	gap: .6rem; list-style: none; padding: 0; margin: 0;
}
.p360-linklist a {
	display: flex; flex-direction: column; gap: .1rem;
	padding: .85rem 1rem;
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius);
	background: var(--p360-surface);
	text-decoration: none; color: var(--p360-ink);
	font-weight: 600; font-size: var(--p360-fs-sm);
	transition: border-color var(--p360-t), background var(--p360-t), transform var(--p360-t);
}
.p360-linklist a:hover { border-color: var(--p360-brand); background: var(--p360-brand-light); transform: translateY(-2px); }
.p360-linklist small { color: var(--p360-ink-3); font-weight: 400; }

.p360-citylist { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.p360-citylist a {
	display: inline-block;
	padding: .45rem .95rem;
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius-pill);
	background: var(--p360-surface);
	font-size: var(--p360-fs-sm);
	text-decoration: none; color: var(--p360-ink-2);
	transition: all var(--p360-t);
}
.p360-citylist a:hover { border-color: var(--p360-brand); color: var(--p360-brand); background: var(--p360-brand-light); }

/* ==========================================================================
   15. שאלות ותשובות
   ========================================================================== */

.p360-faq { display: grid; gap: .75rem; }
.p360-faq__item {
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius);
	background: var(--p360-surface);
	overflow: hidden;
	transition: border-color var(--p360-t), box-shadow var(--p360-t);
}
.p360-faq__item[open] { border-color: rgba(138, 43, 82, .3); box-shadow: var(--p360-shadow-xs); }
.p360-faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.1rem 1.3rem;
	font-family: var(--p360-font-head);
	font-weight: 700; font-size: var(--p360-fs-base);
	cursor: pointer; list-style: none;
	min-block-size: 48px;
}
.p360-faq__q::-webkit-details-marker { display: none; }
.p360-faq__q::after {
	content: '';
	inline-size: 11px; block-size: 11px;
	border-inline-end: 2px solid var(--p360-brand);
	border-block-end: 2px solid var(--p360-brand);
	transform: rotate(45deg);
	flex-shrink: 0;
	transition: transform var(--p360-t);
}
.p360-faq__item[open] .p360-faq__q::after { transform: rotate(-135deg); }
.p360-faq__a { padding: 0 1.3rem 1.3rem; color: var(--p360-ink-2); font-size: var(--p360-fs-sm); }

/* ==========================================================================
   16. כרטיס ספק בודד
   ========================================================================== */

.p360-vendor__hero {
	position: relative;
	aspect-ratio: 21 / 8;
	min-block-size: 260px;
	background: var(--p360-sand-2);
	overflow: hidden;
	border-radius: 0 0 var(--p360-radius-xl) var(--p360-radius-xl);
}
.p360-vendor__hero img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.p360-vendor__header {
	display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
	gap: 1.5rem; padding-block: 1.9rem;
}
.p360-vendor__title { margin-bottom: .3em; }
.p360-vendor__tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .8rem 0 0; }

.p360-contact-panel { display: grid; gap: .6rem; }
.p360-contact-panel .p360-btn { inline-size: 100%; }
.p360-contact-panel__note { font-size: var(--p360-fs-xs); color: var(--p360-ink-3); text-align: center; }
.p360-panel--brand .p360-contact-panel__note,
.p360-panel--save .p360-contact-panel__note { color: rgba(255, 255, 255, .82); }

.p360-live { font-size: var(--p360-fs-xs); margin: .35rem 0 0; }
.p360-live.is-error { color: var(--p360-err); font-weight: 700; }

.p360-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 1rem; margin: 0; }
.p360-specs > div {
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius);
	padding: .95rem 1.05rem;
	background: var(--p360-surface);
}
.p360-specs dt { font-size: var(--p360-fs-xs); color: var(--p360-ink-3); }
.p360-specs dd { margin: .15rem 0 0; font-family: var(--p360-font-head); font-weight: 700; }

.p360-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: .75rem; list-style: none; padding: 0; margin: 0; }
.p360-gallery img { border-radius: var(--p360-radius); aspect-ratio: 4/3; object-fit: cover; inline-size: 100%; }

/* ==========================================================================
   17. טפסים
   ========================================================================== */

.p360-form { display: grid; gap: 1rem; }
.p360-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(225px, 100%), 1fr)); gap: 1rem; }
.p360-form--inline .p360-field { margin: 0; }

.p360-field { display: grid; gap: .35rem; margin: 0; }
.p360-field label { font-family: var(--p360-font-head); font-weight: 700; font-size: var(--p360-fs-sm); }
.p360-field input,
.p360-field select,
.p360-field textarea {
	font: inherit;
	font-size: var(--p360-fs-base);
	color: var(--p360-ink);
	background: var(--p360-surface);
	border: 1.5px solid var(--p360-line-2);
	border-radius: 13px;
	padding: .72rem .9rem;
	min-block-size: 50px;
	inline-size: 100%;
	transition: border-color var(--p360-t), box-shadow var(--p360-t);
}
.p360-field textarea { min-block-size: 96px; resize: vertical; }
.p360-field input:focus,
.p360-field select:focus,
.p360-field textarea:focus {
	border-color: var(--p360-brand);
	box-shadow: 0 0 0 4px var(--p360-brand-light);
	outline: 2px solid transparent;
}
.p360-field input[aria-invalid='true'],
.p360-field select[aria-invalid='true'],
.p360-field textarea[aria-invalid='true'] { border-color: var(--p360-err); background: var(--p360-err-bg); }

.p360-field__help { font-size: var(--p360-fs-xs); color: var(--p360-ink-3); }
.p360-field__error {
	font-size: var(--p360-fs-xs); color: var(--p360-err); font-weight: 700;
	display: flex; align-items: center; gap: .3rem;
}
.p360-field__error::before { content: '⚠'; }
.p360-field__out { font-family: var(--p360-font-head); font-weight: 700; color: var(--p360-brand); }

.p360-field--check label,
.p360-field--check {
	display: flex; align-items: flex-start; gap: .6rem;
	font-weight: 400; font-size: var(--p360-fs-sm);
	font-family: var(--p360-font);
}
.p360-field--check input { inline-size: 22px; block-size: 22px; min-block-size: 22px; flex-shrink: 0; accent-color: var(--p360-brand); }

.p360-req { color: var(--p360-err); }

.p360-hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.p360-form__status { font-size: var(--p360-fs-sm); font-weight: 700; padding: .8rem 1rem; border-radius: 13px; display: none; }
.p360-form__status.is-ok { display: block; background: var(--p360-ok-bg); color: var(--p360-ok); }
.p360-form__status.is-error { display: block; background: var(--p360-err-bg); color: var(--p360-err); }
.p360-form__status.is-busy { display: block; background: var(--p360-sand); color: var(--p360-ink-2); }

.p360-form__legal { font-size: var(--p360-fs-xs); color: var(--p360-ink-3); }

.p360-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.p360-chip-check { position: relative; }
.p360-chip-check input { position: absolute; opacity: 0; inline-size: 100%; block-size: 100%; cursor: pointer; }
.p360-chip-check span {
	display: inline-flex; align-items: center; gap: .35rem;
	min-block-size: 44px;
	padding: .5rem 1.05rem;
	border: 1.5px solid var(--p360-line-2);
	border-radius: var(--p360-radius-pill);
	font-size: var(--p360-fs-sm); font-weight: 600;
	background: var(--p360-surface);
	transition: all var(--p360-t);
}
.p360-chip-check input:checked + span {
	background: linear-gradient(135deg, var(--p360-brand-mid), var(--p360-brand-dark));
	border-color: transparent; color: #fff;
	box-shadow: var(--p360-shadow-brand);
}
.p360-chip-check input:focus-visible + span { outline: 3px solid var(--p360-brand); outline-offset: 3px; }

.p360-quote {
	background: var(--p360-surface);
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius-lg);
	padding: clamp(1.35rem, 3vw, 2.35rem);
	box-shadow: var(--p360-shadow);
}
.p360-quote__head { margin-bottom: 1.5rem; }
.p360-quote__title { font-size: var(--p360-fs-xl); margin-bottom: .3em; }
.p360-quote__sub { color: var(--p360-ink-2); font-size: var(--p360-fs-sm); margin: 0; }
.p360-quote--compact { padding: 1.35rem; }
.p360-form__cats { border: 0; padding: 0; margin: 0; }
.p360-form__cats legend { font-family: var(--p360-font-head); font-weight: 700; font-size: var(--p360-fs-sm); margin-bottom: .5rem; }

/* ==========================================================================
   18. טבלאות
   ========================================================================== */

.p360-table-wrap { overflow-x: auto; border-radius: var(--p360-radius); border: 1px solid var(--p360-line); background: var(--p360-surface); }
.p360-table { inline-size: 100%; border-collapse: collapse; background: var(--p360-surface); font-size: var(--p360-fs-sm); }
.p360-table th, .p360-table td { padding: .8rem 1rem; text-align: start; border-block-end: 1px solid var(--p360-line); }
.p360-table thead th {
	background: var(--p360-sand);
	font-family: var(--p360-font-head); font-weight: 700; white-space: nowrap;
}
.p360-table tbody tr:last-child th,
.p360-table tbody tr:last-child td { border-block-end: 0; }
.p360-table tbody tr { transition: background var(--p360-t); }
.p360-table tbody tr:hover { background: var(--p360-sand); }
.p360-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.p360-save-cell { color: var(--p360-save); font-weight: 700; }

/* ==========================================================================
   19. תגיות מצב
   ========================================================================== */

.p360-pill {
	display: inline-block;
	padding: .2rem .65rem;
	border-radius: var(--p360-radius-pill);
	font-size: var(--p360-fs-xs); font-weight: 700; white-space: nowrap;
}
.p360-pill--ok { background: var(--p360-ok-bg); color: var(--p360-ok); }
.p360-pill--low { background: var(--p360-err-bg); color: var(--p360-err); }
.p360-pill--high { background: var(--p360-warn-bg); color: var(--p360-warn); }

.p360-alert { border-radius: var(--p360-radius); padding: 1.05rem 1.2rem; font-size: var(--p360-fs-sm); border-inline-start: 4px solid; }
.p360-alert--warn { background: var(--p360-warn-bg); border-color: var(--p360-warn); color: #4a3208; }
.p360-alert--info { background: var(--p360-brand-light); border-color: var(--p360-brand); }

/* ==========================================================================
   20. המלצות
   ========================================================================== */

.p360-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.15rem; list-style: none; padding: 0; margin: 0; }
.p360-quote-card {
	background: var(--p360-surface);
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius-lg);
	padding: 1.6rem 1.5rem;
	display: flex; flex-direction: column; gap: .85rem;
	position: relative;
}
.p360-quote-card::before {
	content: '”';
	position: absolute;
	inset-block-start: .3rem;
	inset-inline-start: 1.2rem;
	font-family: var(--p360-font-head);
	font-size: 4.5rem;
	line-height: 1;
	color: var(--p360-sand-2);
	pointer-events: none;
}
.p360-quote-card p { font-size: var(--p360-fs-sm); color: var(--p360-ink-2); margin: 0; position: relative; }
.p360-quote-card footer { display: flex; align-items: center; gap: .65rem; margin-block-start: auto; }
.p360-quote-card cite { font-style: normal; font-family: var(--p360-font-head); font-weight: 700; font-size: var(--p360-fs-sm); }
.p360-quote-card small { display: block; color: var(--p360-ink-3); font-weight: 400; font-size: var(--p360-fs-xs); }
.p360-quote-card__saved {
	margin-inline-start: auto;
	background: var(--p360-save-light);
	color: var(--p360-save);
	font-family: var(--p360-font-head); font-weight: 800;
	font-size: var(--p360-fs-xs);
	padding: .3rem .7rem;
	border-radius: var(--p360-radius-pill);
	white-space: nowrap;
}

/* ==========================================================================
   21. אזור אישי
   ========================================================================== */

.p360-portal { display: grid; gap: 2rem; }
.p360-portal__vendor {
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius-lg);
	padding: clamp(1.35rem, 3vw, 2rem);
	background: var(--p360-surface);
}
.p360-portal__head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.p360-portal__head h2 { margin: 0; }
.p360-portal__state { margin: 0; font-size: var(--p360-fs-sm); font-weight: 700; }
.p360-portal__state.is-on { color: var(--p360-ok); }
.p360-portal__state.is-off { color: var(--p360-err); }
.p360-portal__empty { color: var(--p360-ink-3); }

.p360-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.p360-stat { background: var(--p360-sand); border-radius: var(--p360-radius); padding: 1rem; }
.p360-stat.is-warn { background: var(--p360-err-bg); }
.p360-stat dt { font-size: var(--p360-fs-xs); color: var(--p360-ink-3); }
.p360-stat dd { margin: .2rem 0 0; font-family: var(--p360-font-head); font-weight: 800; font-size: var(--p360-fs-xl); }

/* ==========================================================================
   22. תוכן ארוך
   ========================================================================== */

.p360-prose { max-width: 72ch; }
.p360-prose h2 { margin-block-start: 2em; }
.p360-prose h3 { margin-block-start: 1.6em; }
.p360-prose ul, .p360-prose ol { display: grid; gap: .4rem; margin-block: 0 1.2em; }
.p360-prose blockquote {
	margin: 1.5em 0;
	padding: 1.1rem 1.3rem;
	border-inline-start: 4px solid var(--p360-gold);
	background: var(--p360-gold-light);
	border-radius: 0 var(--p360-radius) var(--p360-radius) 0;
}
.p360-prose img { border-radius: var(--p360-radius); margin-block: 1.5em; }
.p360-prose table { inline-size: 100%; border-collapse: collapse; }
.p360-prose th, .p360-prose td { border: 1px solid var(--p360-line); padding: .6rem .8rem; }

.p360-statement__contact { list-style: none; padding: 0; }
.p360-statement__date { font-size: var(--p360-fs-sm); color: var(--p360-ink-3); }

/* ==========================================================================
   23. עימוד
   ========================================================================== */

.p360-pagination { margin-block-start: 2.5rem; }
.p360-pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-inline-size: 46px; min-block-size: 46px;
	padding: 0 .6rem;
	border: 1px solid var(--p360-line-2);
	border-radius: 13px;
	text-decoration: none; color: var(--p360-ink); font-weight: 700;
	transition: all var(--p360-t);
}
.p360-pagination .page-numbers.current {
	background: linear-gradient(135deg, var(--p360-brand-mid), var(--p360-brand-dark));
	border-color: transparent; color: #fff;
}
.p360-pagination .page-numbers:hover:not(.current) { background: var(--p360-sand); border-color: var(--p360-brand); }

/* ==========================================================================
   24. סרגל פעולה נייד
   ========================================================================== */

.p360-mobile-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 880;
	display: none;
	gap: .5rem;
	padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
	background: rgba(253, 250, 247, .95);
	backdrop-filter: blur(14px);
	border-block-start: 1px solid var(--p360-line);
	transform: translateY(120%);
	transition: transform var(--p360-t);
}
.p360-mobile-bar.is-in { transform: none; }
.p360-mobile-bar .p360-btn {
	flex: 1 1 0;
	min-inline-size: 0;
	min-block-size: 46px;
	font-size: var(--p360-fs-xs);
	padding-inline: .6rem;
	white-space: nowrap;
	overflow: hidden;
}

@media (max-width: 780px) {
	.p360-mobile-bar { display: flex; }
	body { padding-block-end: 72px; }
}

/* ==========================================================================
   25. כותרת תחתונה
   ========================================================================== */

.p360-footer {
	background: var(--p360-ink);
	color: #d6cddc;
	padding-block: clamp(2.75rem, 6vw, 4.25rem) 1.5rem;
	margin-block-start: var(--p360-section);
	position: relative;
	overflow: hidden;
}
.p360-footer::before {
	content: '';
	position: absolute;
	inline-size: 520px; block-size: 520px;
	inset-block-start: -260px; inset-inline-end: -160px;
	background: radial-gradient(circle, rgba(168, 58, 102, .32), transparent 68%);
	filter: blur(30px);
	pointer-events: none;
}
.p360-footer > * { position: relative; z-index: 1; }
.p360-footer a { color: #f0eaf4; text-decoration: none; }
.p360-footer a:hover { color: #fff; text-decoration: underline; }

.p360-footer__grid {
	display: grid;
	grid-template-columns: 1.45fr repeat(3, 1fr);
	gap: 2rem;
	padding-block-end: 2rem;
	border-block-end: 1px solid rgba(255, 255, 255, .12);
}
@media (max-width: 880px) { .p360-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .p360-footer__grid { grid-template-columns: 1fr; } }

.p360-footer h2 {
	font-size: var(--p360-fs-sm);
	letter-spacing: .1em;
	color: #fff;
	margin-bottom: .9rem;
}
.p360-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: var(--p360-fs-sm); }
.p360-footer__about { font-size: var(--p360-fs-sm); color: #b3a9bc; max-width: 42ch; }
.p360-footer__brand { color: #fff; }

.p360-footer__bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
	padding-block-start: 1.5rem;
	font-size: var(--p360-fs-xs);
	color: #a297ac;
}

/* ==========================================================================
   26. הדפסה
   ========================================================================== */

@media print {
	.p360-header, .p360-footer, .p360-acc, .p360-skip, .p360-sidebar,
	.p360-mobile-bar, .p360-orb, .p360-result__cta, .p360-result__actions,
	.p360-pagination { display: none !important; }

	body { background: #fff; font-size: 11pt; padding-block-end: 0; }
	.p360-wrap { width: 100%; }
	[data-anim] { opacity: 1 !important; transform: none !important; }
	a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
	.p360-card, .p360-panel, .p360-table-wrap { break-inside: avoid; }
}

/* ==========================================================================
   27. גיבור עם תמונה
   ========================================================================== */

.p360-hero--photo {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(7rem, 12vw, 9rem);
	color: #fff;
	background: var(--p360-ink);
	overflow: hidden;
}

.p360-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.p360-hero__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	transform: scale(1.04);
	animation: p360-kenburns 24s ease-in-out infinite alternate;
}
@keyframes p360-kenburns {
	from { transform: scale(1.04) translate3d(0, 0, 0); }
	to   { transform: scale(1.12) translate3d(1.4%, -1.6%, 0); }
}

.p360-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(275deg, rgba(20, 12, 24, .93) 0%, rgba(20, 12, 24, .82) 28%, rgba(20, 12, 24, .42) 56%, rgba(20, 12, 24, .18) 78%, rgba(20, 12, 24, .34) 100%),
		linear-gradient(to top, rgba(20, 12, 24, .72) 0%, transparent 42%);
}

.p360-hero--photo .p360-hero__inner {
	position: relative;
	max-width: 40rem;
}
.p360-hero--photo .p360-hero__title { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.p360-hero--photo .p360-hero__title em {
	background: linear-gradient(100deg, #ffd9a8 5%, #ff9ec4 55%, #ffd9a8 95%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.p360-hero--photo .p360-hero__title em::after { background: linear-gradient(90deg, #ffd9a8, #ff9ec4); opacity: .5; }
.p360-hero--photo .p360-hero__text { color: rgba(255, 255, 255, .9); }
.p360-hero--photo .p360-hero__trust { color: rgba(255, 255, 255, .9); }
.p360-hero--photo .p360-hero__trust .p360-icon { color: #6ee7a8; }
.p360-hero--photo .p360-eyebrow {
	color: #ffd9a8;
	background: rgba(255, 255, 255, .12);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .18);
}
.p360-hero--photo .p360-eyebrow .p360-icon { color: #ffd9a8; }
.p360-hero--photo .p360-btn--ghost {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .35);
	color: #fff;
	backdrop-filter: blur(6px);
}
.p360-hero--photo .p360-btn--ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; }

@media (max-width: 940px) {
	.p360-hero__scrim {
		background:
			linear-gradient(180deg, rgba(20, 12, 24, .78) 0%, rgba(20, 12, 24, .62) 45%, rgba(20, 12, 24, .88) 100%);
	}
	.p360-hero--photo .p360-hero__inner { max-width: none; }
}

/* כרטיס החיפוש שמרחף על גבול הגיבור */
.p360-hero__dock {
	position: relative;
	z-index: 3;
	margin-block-start: clamp(-6rem, -8vw, -4.5rem);
}
.p360-hero__dock .p360-hero__panel { background: var(--p360-surface); }

/* ==========================================================================
   28. שורת אורות חגיגית
   ========================================================================== */

.p360-lights {
	position: relative;
	block-size: 26px;
	overflow: hidden;
	pointer-events: none;
}
.p360-lights::before {
	content: '';
	position: absolute;
	inset-inline: -2%;
	inset-block-start: 5px;
	block-size: 22px;
	border-block-start: 2px solid rgba(168, 129, 60, .35);
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.p360-lights__row {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
}
.p360-lights__bulb {
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--p360-gold-mid);
	box-shadow: 0 0 10px 2px rgba(201, 162, 83, .55);
	margin-block-start: 10px;
	animation: p360-twinkle 3.2s ease-in-out infinite;
}
.p360-lights__bulb:nth-child(3n)   { animation-delay: -.7s; margin-block-start: 14px; }
.p360-lights__bulb:nth-child(4n)   { animation-delay: -1.5s; margin-block-start: 8px; }
.p360-lights__bulb:nth-child(5n)   { animation-delay: -2.1s; margin-block-start: 16px; }
@keyframes p360-twinkle {
	0%, 100% { opacity: 1; box-shadow: 0 0 10px 2px rgba(201, 162, 83, .55); }
	50%      { opacity: .45; box-shadow: 0 0 4px 1px rgba(201, 162, 83, .3); }
}

/* ==========================================================================
   29. כותרת עמוד עם תמונה
   ========================================================================== */

.p360-page-head--photo {
	position: relative;
	isolation: isolate;
	color: #fff;
	background: var(--p360-ink);
	border-block-end: 0;
	padding-block: clamp(2.75rem, 7vw, 4.75rem);
	overflow: hidden;
}
.p360-page-head--photo .p360-hero__media img { object-position: 50% 45%; animation: none; transform: none; }
.p360-page-head--photo .p360-hero__scrim {
	background:
		linear-gradient(275deg, rgba(20, 12, 24, .92) 0%, rgba(20, 12, 24, .78) 32%, rgba(20, 12, 24, .38) 62%, rgba(20, 12, 24, .28) 100%),
		linear-gradient(to top, rgba(20, 12, 24, .6), transparent 55%);
}
.p360-page-head--photo .p360-page-head__title { color: #fff; }
.p360-page-head--photo .p360-page-head__intro { color: rgba(255, 255, 255, .88); }
.p360-page-head--photo .p360-crumbs,
.p360-page-head--photo .p360-crumbs a { color: rgba(255, 255, 255, .75); }
.p360-page-head--photo .p360-crumbs li::after { color: rgba(255, 255, 255, .4); }
.p360-page-head--photo .p360-fact {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .2);
	backdrop-filter: blur(8px);
	color: #fff;
}
.p360-page-head--photo .p360-fact__label { color: rgba(255, 255, 255, .72); }
.p360-page-head--photo .p360-fact--save { background: rgba(22, 160, 107, .3); border-color: rgba(110, 231, 168, .45); }
.p360-page-head--photo .p360-fact--save .p360-fact__value { color: #6ee7a8; }
.p360-page-head--photo .p360-chip--solid {
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .26);
	color: #fff;
	box-shadow: none;
	backdrop-filter: blur(8px);
}

@media (max-width: 940px) {
	.p360-page-head--photo .p360-hero__scrim {
		background: linear-gradient(180deg, rgba(20, 12, 24, .74), rgba(20, 12, 24, .88));
	}
}

/* ==========================================================================
   30. כרטיס קטגוריה עם תמונה
   ========================================================================== */

.p360-cat-tile { position: relative; padding: 0; overflow: hidden; min-block-size: 190px; }
.p360-cat-tile__media { position: absolute; inset: 0; }
.p360-cat-tile__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 600ms ease; }
.p360-cat-tile:hover .p360-cat-tile__media img { transform: scale(1.07); }
.p360-cat-tile__body {
	position: relative;
	z-index: 1;
	margin-block-start: auto;
	padding: 1.1rem 1.2rem;
	background: linear-gradient(to top, rgba(20, 12, 24, .92) 12%, rgba(20, 12, 24, .55) 60%, transparent);
	color: #fff;
	display: flex;
	align-items: center;
	gap: .8rem;
}
.p360-cat-tile__body .p360-card__meta,
.p360-cat-tile__body .p360-card__save { color: rgba(255, 255, 255, .82); }
.p360-cat-tile__body .p360-card__save { color: #6ee7a8; }
.p360-cat-tile__link { position: absolute; inset: 0; z-index: 2; }
.p360-cat-tile .p360-chip {
	background: rgba(255, 255, 255, .18);
	color: #fff;
	backdrop-filter: blur(6px);
}
.p360-cat-tile .p360-chip::after { border-color: rgba(255, 255, 255, .22); }

/* ==========================================================================
   31. רשת הדוק שמתחת לגיבור
   ========================================================================== */

.p360-hero__dock-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(min(300px, 100%), 420px);
	gap: 1.25rem;
	align-items: end;
}

.p360-hero__panel--compare {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.p360-hero__panel--compare h2 { display: flex; align-items: center; gap: .5rem; }
.p360-hero__panel--compare .p360-compare__head { color: var(--p360-ink-2); }
.p360-hero__panel--compare .p360-compare__val { color: var(--p360-ink); }

@media (max-width: 900px) {
	.p360-hero__dock-grid { grid-template-columns: minmax(0, 1fr); }
	.p360-hero__dock { margin-block-start: clamp(-3.5rem, -6vw, -2.5rem); }
	.p360-hero--photo { padding-block: clamp(2.75rem, 8vw, 4rem) clamp(4.5rem, 10vw, 6rem); }
}

@media (max-width: 560px) {
	.p360-hero__title { font-size: clamp(2.1rem, 10vw, 2.9rem); }
	.p360-hero__cta .p360-btn { inline-size: 100%; }
	.p360-hero__trust { gap: .5rem 1rem; font-size: var(--p360-fs-xs); }
}

/* ==========================================================================
   32. רצועת תמונה מלאה
   ========================================================================== */

.p360-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	background: var(--p360-ink);
	padding-block: clamp(3.25rem, 8vw, 5.5rem);
}
.p360-band .p360-hero__media img { object-position: 50% 55%; }
.p360-band__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(275deg, rgba(16, 8, 24, .92) 0%, rgba(16, 8, 24, .74) 38%, rgba(16, 8, 24, .42) 70%, rgba(16, 8, 24, .55) 100%);
}
.p360-band h2, .p360-band h3 { color: #fff; }
.p360-band p { color: rgba(255, 255, 255, .88); }
.p360-band .p360-eyebrow {
	color: #ffd9a8;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .18);
}
.p360-band .p360-eyebrow .p360-icon { color: #ffd9a8; }
.p360-band .p360-checklist .p360-icon { color: #6ee7a8; }
.p360-band__inner { position: relative; max-width: 44rem; }

@media (max-width: 940px) {
	.p360-band__scrim { background: linear-gradient(180deg, rgba(16, 8, 24, .82), rgba(16, 8, 24, .92)); }
	.p360-band__inner { max-width: none; }
}

/* ==========================================================================
   33. מרקם בוקה עדין למקטעי החול
   ========================================================================== */

.p360-section--sand {
	position: relative;
	background-color: var(--p360-sand);
	background-image:
		radial-gradient(circle at 12% 18%, rgba(201, 162, 83, .16) 0, transparent 12%),
		radial-gradient(circle at 82% 12%, rgba(168, 58, 102, .13) 0, transparent 14%),
		radial-gradient(circle at 68% 82%, rgba(201, 162, 83, .14) 0, transparent 13%),
		radial-gradient(circle at 26% 76%, rgba(168, 58, 102, .1) 0, transparent 12%);
	background-repeat: no-repeat;
}

/* ==========================================================================
   34. נצנוץ על מספר החיסכון
   ========================================================================== */

.p360-calc__big { position: relative; display: inline-block; }
.p360-calc__big.is-pulse { animation: p360-pulse 620ms cubic-bezier(.2, .8, .3, 1); }
@keyframes p360-pulse {
	0%   { transform: scale(1); text-shadow: none; }
	38%  { transform: scale(1.055); text-shadow: 0 0 26px rgba(95, 227, 168, .55); }
	100% { transform: scale(1); text-shadow: none; }
}

.p360-sparks { position: absolute; inset: -18px -26px; pointer-events: none; }
.p360-spark {
	position: absolute;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: #5fe3a8;
	opacity: 0;
}
.p360-spark.is-on { animation: p360-spark 700ms ease-out forwards; }
@keyframes p360-spark {
	0%   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
	100% { opacity: 0; transform: translate3d(var(--dx, 0), var(--dy, -26px), 0) scale(.3); }
}

@media (prefers-reduced-motion: reduce) {
	.p360-calc__big.is-pulse { animation: none; }
	.p360-spark.is-on { animation: none; opacity: 0; }
	.p360-hero__media img { animation: none !important; }
	.p360-lights__bulb { animation: none; }
}

/* ==========================================================================
   35. חיוג מהיר צף
   ========================================================================== */

.p360-fab {
	position: fixed;
	inset-block-end: 1rem;
	inset-inline-end: 1rem;
	z-index: 890;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .6rem;
}

.p360-fab__item {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	text-decoration: none;
	font: inherit;
	transform: translateY(12px) scale(.86);
	opacity: 0;
	visibility: hidden;
	transition: transform var(--p360-t), opacity var(--p360-t), visibility var(--p360-t);
}
.p360-fab.is-open .p360-fab__item { transform: none; opacity: 1; visibility: visible; }
.p360-fab.is-open .p360-fab__item:nth-child(1) { transition-delay: 40ms; }
.p360-fab.is-open .p360-fab__item:nth-child(2) { transition-delay: 80ms; }
.p360-fab.is-open .p360-fab__item:nth-child(3) { transition-delay: 120ms; }

.p360-fab__label {
	background: var(--p360-ink);
	color: #fff;
	font-family: var(--p360-font-head);
	font-weight: 700;
	font-size: var(--p360-fs-xs);
	padding: .42rem .85rem;
	border-radius: var(--p360-radius-pill);
	white-space: nowrap;
	box-shadow: var(--p360-shadow);
}

.p360-fab__dot {
	inline-size: 50px;
	block-size: 50px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	box-shadow: var(--p360-shadow-lg);
	flex-shrink: 0;
	transition: transform var(--p360-t);
}
.p360-fab__item:hover .p360-fab__dot { transform: scale(1.08); }
.p360-fab__dot--wa    { background: linear-gradient(135deg, #37d15b, #1faa46); }
.p360-fab__dot--phone { background: var(--p360-grad-warm); }
.p360-fab__dot--form  { background: var(--p360-grad-brand); }

.p360-fab__toggle {
	inline-size: 62px;
	block-size: 62px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .85);
	background: var(--p360-grad-warm);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: var(--p360-shadow-ember);
	position: relative;
	transition: transform var(--p360-t);
}
.p360-fab__toggle:hover { transform: scale(1.06); }
.p360-fab.is-open .p360-fab__toggle { transform: rotate(135deg); }
.p360-fab.is-open .p360-fab__toggle .p360-fab__plus { opacity: 1; }
.p360-fab__toggle .p360-icon { transition: opacity var(--p360-t); }
.p360-fab.is-open .p360-fab__toggle .p360-icon--phone { opacity: 0; }
.p360-fab__plus {
	position: absolute;
	inline-size: 22px;
	block-size: 2.5px;
	background: currentColor;
	border-radius: 2px;
	opacity: 0;
	transition: opacity var(--p360-t);
}
.p360-fab__plus:last-of-type { transform: rotate(90deg); }

/* טבעת פעימה שמושכת את העין אל הכפתור */
.p360-fab__toggle::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--p360-ember);
	opacity: 0;
	animation: p360-ring 2.8s ease-out infinite;
	pointer-events: none;
}
@keyframes p360-ring {
	0%   { transform: scale(.9); opacity: .7; }
	70%  { transform: scale(1.35); opacity: 0; }
	100% { transform: scale(1.35); opacity: 0; }
}
.p360-fab.is-open .p360-fab__toggle::after { animation: none; }

@media (max-width: 780px) {
	.p360-fab { inset-block-end: 80px; }
}

/* ==========================================================================
   36. חלון טופס צף
   ========================================================================== */

.p360-modal {
	border: 0;
	padding: 0;
	max-inline-size: min(560px, calc(100vw - 2rem));
	inline-size: 100%;
	max-block-size: min(88vh, 900px);
	border-radius: var(--p360-radius-xl);
	background: var(--p360-surface);
	color: var(--p360-ink);
	box-shadow: var(--p360-shadow-lg);
	overflow: hidden;
}
.p360-modal::backdrop {
	background: rgba(20, 12, 24, .62);
	backdrop-filter: blur(5px);
}
.p360-modal[open] { animation: p360-modal-in 260ms cubic-bezier(.2, .8, .3, 1); }
@keyframes p360-modal-in {
	from { opacity: 0; transform: translateY(18px) scale(.97); }
	to   { opacity: 1; transform: none; }
}
.p360-modal__body { max-block-size: min(88vh, 900px); overflow-y: auto; padding: 0; }
.p360-modal__body .p360-quote { border: 0; box-shadow: none; border-radius: 0; }
.p360-modal__close {
	position: absolute;
	inset-block-start: .75rem;
	inset-inline-end: .75rem;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	border: 1px solid var(--p360-line);
	background: var(--p360-surface);
	color: var(--p360-ink-2);
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 20px;
	line-height: 1;
	z-index: 5;
}
.p360-modal__close:hover { background: var(--p360-sand); }

/* ==========================================================================
   37. מגע זכוכית וזוהר
   ========================================================================== */

.p360-header {
	background: rgba(255, 250, 246, .78);
	backdrop-filter: saturate(1.7) blur(18px);
	-webkit-backdrop-filter: saturate(1.7) blur(18px);
}

.p360-hero__panel,
.p360-calc,
.p360-step-card {
	position: relative;
}
.p360-hero__panel::after,
.p360-calc::after {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 12%;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, rgba(239, 106, 61, .55), transparent);
	pointer-events: none;
}

.p360-header__phone {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--p360-font-head);
	font-weight: 800;
	font-size: var(--p360-fs-sm);
	color: var(--p360-brand);
	text-decoration: none;
	padding: .5rem .9rem;
	border-radius: var(--p360-radius-pill);
	background: var(--p360-brand-light);
	white-space: nowrap;
	direction: ltr;
	transition: background var(--p360-t), transform var(--p360-t);
}
.p360-header__phone:hover { background: var(--p360-ember-light); transform: translateY(-1px); }
.p360-header__phone .p360-icon { color: var(--p360-ember); }

@media (max-width: 1180px) { .p360-header__phone span { display: none; } }
@media (max-width: 1080px) { .p360-header__phone { display: none; } }

/* ==========================================================================
   38. סרגל נייד עם חיוג
   ========================================================================== */

.p360-mobile-bar .p360-btn--wa {
	background: linear-gradient(135deg, #37d15b, #1faa46);
	color: #fff;
	border-color: transparent;
}
.p360-mobile-bar .p360-btn--call {
	background: var(--p360-grad-warm);
	color: #fff;
	border-color: transparent;
}

/* מרווח לתנועת הפרלקסה, כדי שלא ייחשף פס ריק בקצוות */
.p360-hero--photo .p360-hero__media,
.p360-band .p360-hero__media {
	inset-block: -22px;
	will-change: transform;
}

/* ==========================================================================
   39. בודק התאריכים
   ========================================================================== */

.p360-datecheck {
	background: var(--p360-surface);
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius-lg);
	padding: clamp(1.35rem, 3vw, 2.25rem);
	box-shadow: var(--p360-shadow);
}
.p360-datecheck__form { display: grid; gap: 1rem; }
.p360-datecheck__result { margin-block-start: 1.5rem; display: grid; gap: 1rem; }

.p360-dc-head {
	border-radius: var(--p360-radius);
	padding: 1rem 1.15rem;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	border-inline-start: 4px solid;
}
.p360-dc-head__status { font-family: var(--p360-font-head); font-size: var(--p360-fs-lg); }
.p360-dc-head__heb { font-size: var(--p360-fs-sm); opacity: .85; }
.p360-dc-head.is-ok         { background: var(--p360-ok-bg); border-color: var(--p360-ok); color: var(--p360-ok); }
.p360-dc-head.is-special    { background: var(--p360-gold-light); border-color: var(--p360-gold); color: var(--p360-gold); }
.p360-dc-head.is-restricted { background: var(--p360-warn-bg); border-color: var(--p360-warn); color: var(--p360-warn); }
.p360-dc-head.is-blocked    { background: var(--p360-err-bg); border-color: var(--p360-err); color: var(--p360-err); }

.p360-dc-notes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
	font-size: var(--p360-fs-sm);
	color: var(--p360-ink-2);
}
.p360-dc-notes li {
	padding: .6rem .9rem;
	background: var(--p360-sand);
	border-radius: var(--p360-radius-sm);
}

.p360-dc-season {
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius);
	padding: 1rem 1.15rem;
}
.p360-dc-season__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .35rem;
	font-family: var(--p360-font-head);
}
.p360-dc-season p { font-size: var(--p360-fs-sm); color: var(--p360-ink-2); margin: 0; }

.p360-meter { display: inline-flex; gap: 3px; }
.p360-meter__seg {
	inline-size: 22px;
	block-size: 8px;
	border-radius: 999px;
	background: var(--p360-sand-2);
}
.p360-meter__seg.is-on.lvl-1, .p360-meter__seg.is-on.lvl-2 { background: var(--p360-save-mid); }
.p360-meter__seg.is-on.lvl-3 { background: var(--p360-amber); }
.p360-meter__seg.is-on.lvl-4, .p360-meter__seg.is-on.lvl-5 { background: var(--p360-ember); }

.p360-dc-shabbat {
	font-size: var(--p360-fs-sm);
	background: var(--p360-brand-light);
	border-radius: var(--p360-radius-sm);
	padding: .75rem 1rem;
	color: var(--p360-ink-2);
}

.p360-dc-sub { font-size: var(--p360-fs-lg); margin: .5rem 0 0; }
.p360-dc-alt {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
	gap: .6rem;
}
.p360-dc-alt li {
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius);
	padding: .8rem .95rem;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	font-size: var(--p360-fs-sm);
	background: var(--p360-surface);
}
.p360-dc-alt li.is-special { border-color: var(--p360-gold); background: var(--p360-gold-light); }
.p360-dc-alt li span { color: var(--p360-ink-3); font-size: var(--p360-fs-xs); }
.p360-dc-alt__tag { color: var(--p360-save) !important; font-weight: 700; }

.p360-dc-busy { color: var(--p360-ink-3); font-size: var(--p360-fs-sm); margin: 0; }
.p360-dc-legal { font-size: var(--p360-fs-xs); color: var(--p360-ink-3); margin: 0; }

/* ==========================================================================
   40. הזמנות דיגיטליות
   ========================================================================== */

.p360-inv > .p360-lead { margin-block-end: 1.5rem; }
.p360-inv h2 { margin-block-start: 2.5rem; }

.p360-inv-designer {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 1.5rem;
	align-items: start;
	background: var(--p360-surface);
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius-lg);
	padding: clamp(1.1rem, 2.5vw, 1.75rem);
	box-shadow: var(--p360-shadow);
	margin-block: 1.5rem 2.5rem;
}
@media (max-width: 860px) {
	.p360-inv-designer { grid-template-columns: 1fr; }
	.p360-inv-designer__preview { order: -1; }
}
.p360-inv-designer__form { display: grid; gap: 1.1rem; }
.p360-inv-group {
	display: grid;
	gap: .8rem;
	padding: 1rem;
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius);
	background: var(--p360-sand);
}
.p360-inv-group .p360-field { margin: 0; }
.p360-inv-toggles { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: flex-end; padding-block-end: .55rem; }
.p360-inv-toggles label { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--p360-fs-sm); cursor: pointer; }

.p360-inv-styles { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.p360-inv-styles legend { font-weight: 700; font-size: var(--p360-fs-sm); margin-block-end: .5rem; }
.p360-inv-style {
	position: relative;
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .4rem .7rem .4rem .45rem;
	border: 1.5px solid var(--p360-line);
	border-radius: 999px;
	background: var(--p360-surface);
	font-size: var(--p360-fs-xs);
	cursor: pointer;
	transition: border-color var(--p360-t), box-shadow var(--p360-t);
}
.p360-inv-style input { position: absolute; opacity: 0; pointer-events: none; }
.p360-inv-style:has(input:checked) { border-color: var(--p360-brand); box-shadow: 0 0 0 3px var(--p360-brand-light); }
.p360-inv-style:has(input:focus-visible) { outline: 3px solid var(--p360-brand); outline-offset: 2px; }
.p360-inv-style__swatch { inline-size: 22px; block-size: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.p360-inv-style--gold .p360-inv-style__swatch { background: linear-gradient(135deg, #fbf7ef 45%, #b08a3c 55%); }
.p360-inv-style--floral .p360-inv-style__swatch { background: linear-gradient(135deg, #fde8e3 45%, #c96a6a 55%); }
.p360-inv-style--minimal .p360-inv-style__swatch { background: linear-gradient(135deg, #fff 45%, #111 55%); }
.p360-inv-style--dark .p360-inv-style__swatch { background: linear-gradient(135deg, #14161f 45%, #d4b06a 55%); }
.p360-inv-style--boho .p360-inv-style__swatch { background: linear-gradient(135deg, #f7f0e4 45%, #8a6f4e 55%); }
.p360-inv-style--kids .p360-inv-style__swatch { background: linear-gradient(135deg, #eef7ff 45%, #ff7a59 55%); }
.p360-inv-style--holy .p360-inv-style__swatch { background: linear-gradient(135deg, #faf7ef 45%, #2f4f8f 55%); }

.p360-inv-hebnote {
	margin: 0;
	font-size: var(--p360-fs-xs);
	padding: .55rem .8rem;
	border-radius: var(--p360-radius-sm);
	background: var(--p360-brand-light);
	color: var(--p360-ink-2);
}
.p360-inv-hebnote.is-special { background: var(--p360-gold-light); color: var(--p360-gold); }
.p360-inv-hebnote.is-restricted { background: var(--p360-warn-bg); color: var(--p360-warn); }
.p360-inv-hebnote.is-blocked { background: var(--p360-err-bg); color: var(--p360-err); }
.p360-inv-hebnote a { font-weight: 700; }

.p360-inv-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.p360-inv-actions .p360-btn { flex: 1 1 200px; }
.p360-inv-note, .p360-inv-preview-note, .p360-inv-legal { font-size: var(--p360-fs-xs); color: var(--p360-ink-3); margin: 0; }

.p360-inv-designer__preview { position: sticky; top: 90px; }
.p360-inv-canvas-wrap {
	border-radius: var(--p360-radius);
	overflow: hidden;
	box-shadow: 0 20px 45px -20px rgba(26, 18, 32, .45);
	background: var(--p360-sand-2);
	aspect-ratio: 2 / 3;
}
.p360-inv-canvas-wrap canvas { display: block; inline-size: 100%; block-size: auto; }
.p360-inv-preview-note { margin-block-start: .6rem; text-align: center; }

.p360-inv-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 1rem;
	margin-block: 1.25rem;
}
.p360-inv-tier {
	position: relative;
	display: flex; flex-direction: column; gap: .6rem;
	border: 1px solid var(--p360-line);
	border-radius: var(--p360-radius);
	padding: 1.35rem 1.2rem;
	background: var(--p360-surface);
}
.p360-inv-tier.is-featured { border-color: var(--p360-save); box-shadow: 0 0 0 3px var(--p360-save-light); }
.p360-inv-tier__badge {
	position: absolute; top: -.75rem; inset-inline-start: 1rem;
	background: var(--p360-save); color: #fff;
	font-size: var(--p360-fs-xs); font-weight: 700;
	padding: .2rem .7rem; border-radius: 999px;
}
.p360-inv-tier h3 { margin: 0; font-size: var(--p360-fs-lg); }
.p360-inv-tier__price { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
.p360-inv-tier__price b { font-family: var(--p360-font-head); font-size: var(--p360-fs-2xl); font-weight: 800; }
.p360-inv-tier__price span { color: var(--p360-ink-3); font-size: var(--p360-fs-xs); }
.p360-inv-tier__tag { margin: 0; font-size: var(--p360-fs-sm); color: var(--p360-ink-2); min-block-size: 3em; }
.p360-inv-tier ul { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .45rem; flex: 1; }
.p360-inv-tier li { display: flex; gap: .45rem; align-items: flex-start; font-size: var(--p360-fs-sm); }
.p360-inv-tier li .p360-icon { color: var(--p360-save); flex: none; margin-block-start: .2em; }

.p360-inv-how {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	gap: 1rem;
	margin-block: 1.25rem;
}
.p360-inv-how__step {
	position: relative;
	padding: 1.25rem 1.1rem 1.1rem;
	border-radius: var(--p360-radius);
	background: var(--p360-sand);
	border: 1px solid var(--p360-line);
}
.p360-inv-how__num {
	position: absolute; top: .8rem; inset-inline-end: .9rem;
	font-family: var(--p360-font-head); font-weight: 800; font-size: var(--p360-fs-xl);
	color: var(--p360-line-2);
}
.p360-inv-how__step h3 { font-size: var(--p360-fs-base); margin: .7rem 0 .3rem; }
.p360-inv-how__step p { margin: 0; font-size: var(--p360-fs-sm); color: var(--p360-ink-2); }

.p360-inv-steps { padding-inline-start: 1.3rem; display: grid; gap: .6rem; }
.p360-inv-check { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

.p360-inv-legalbox {
	border: 1px solid var(--p360-line);
	border-inline-start: 4px solid var(--p360-gold);
	border-radius: var(--p360-radius);
	padding: 1.1rem 1.25rem;
	background: var(--p360-surface);
	display: grid; gap: .8rem;
}
.p360-inv-legalbox p { margin: 0; }

.p360-inv-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.p360-inv-sources li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; font-size: var(--p360-fs-sm); }
.p360-inv-sources span { font-size: var(--p360-fs-xs); color: var(--p360-ink-3); background: var(--p360-sand); padding: .1rem .5rem; border-radius: 999px; }

.p360-inv-related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.p360-inv-related a {
	display: inline-block; padding: .45rem .9rem;
	border: 1px solid var(--p360-line); border-radius: 999px;
	background: var(--p360-surface); font-size: var(--p360-fs-sm); text-decoration: none;
}
.p360-inv-related a:hover { border-color: var(--p360-brand); color: var(--p360-brand); }

/* ==========================================================================
   41. מעצב ההזמנות: תבניות, תמונה, סרטון
   ========================================================================== */

.p360-inv-tpls { border: 0; padding: 0; margin: 0; }
.p360-inv-tpls legend { font-weight: 700; font-size: var(--p360-fs-sm); margin-block-end: .5rem; }
.p360-inv-tpls__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr));
	gap: .55rem;
}
.p360-inv-tpl { position: relative; display: block; cursor: pointer; }
.p360-inv-tpl input { position: absolute; opacity: 0; pointer-events: none; }
.p360-inv-tpl__thumb {
	display: block;
	aspect-ratio: 2 / 3;
	border-radius: 10px;
	background: var(--p360-sand-2) center / cover no-repeat;
	border: 2px solid transparent;
	box-shadow: 0 4px 14px -8px rgba(26, 18, 32, .5);
	transition: transform var(--p360-t), border-color var(--p360-t), box-shadow var(--p360-t);
}
.p360-inv-tpl:hover .p360-inv-tpl__thumb { transform: translateY(-2px); }
.p360-inv-tpl:has(input:checked) .p360-inv-tpl__thumb { border-color: var(--p360-brand); box-shadow: 0 0 0 3px var(--p360-brand-light), 0 8px 18px -10px rgba(26, 18, 32, .5); }
.p360-inv-tpl:has(input:focus-visible) .p360-inv-tpl__thumb { outline: 3px solid var(--p360-brand); outline-offset: 2px; }
.p360-inv-tpl__name { display: block; text-align: center; font-size: var(--p360-fs-xs); margin-block-start: .3rem; color: var(--p360-ink-2); }
.p360-inv-tpl:has(input:checked) .p360-inv-tpl__name { color: var(--p360-brand); font-weight: 700; }

.p360-inv-color span, .p360-inv-photo { display: flex; align-items: center; gap: .6rem; }
.p360-inv-color input[type="color"] { inline-size: 52px; block-size: 40px; padding: 2px; border: 1px solid var(--p360-line-2); border-radius: var(--p360-radius-sm); background: var(--p360-surface); cursor: pointer; }
.p360-inv-color a, .p360-inv-photo a { font-size: var(--p360-fs-xs); white-space: nowrap; }
.p360-inv-photo input[type="file"] { min-inline-size: 0; flex: 1; font-size: var(--p360-fs-xs); }

.p360-inv-video {
	margin-block-start: .5rem;
	padding: 1.1rem 1.15rem;
	border-radius: var(--p360-radius);
	border: 1px solid var(--p360-line);
	background: linear-gradient(135deg, var(--p360-brand-light), var(--p360-gold-light));
	display: grid; gap: .8rem;
}
.p360-inv-video h3 { margin: 0; font-size: var(--p360-fs-lg); display: flex; align-items: center; gap: .5rem; }
.p360-inv-video h3 .p360-icon { color: var(--p360-brand); }
.p360-inv-video > p { margin: 0; font-size: var(--p360-fs-sm); color: var(--p360-ink-2); }
.p360-inv-video .p360-field { margin: 0; }
.p360-inv-video__status {
	margin: 0; font-size: var(--p360-fs-sm); font-weight: 700;
	padding: .6rem .9rem; border-radius: var(--p360-radius-sm);
	background: var(--p360-surface); color: var(--p360-ink);
}
.p360-inv-video__status.is-busy { color: var(--p360-brand); animation: p360-pulse 1.2s ease-in-out infinite; }
@keyframes p360-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .p360-inv-video__status.is-busy { animation: none; } }

/* ==========================================================================
   42. סטודיו ההזמנות (עורך חופשי): מעטפת אפליקציה בהירה
   ========================================================================== */

.p360-studio {
	--st-bg: #f4f5f9;
	--st-bar: #ffffff;
	--st-line: #e2e5ee;
	--st-ink: #1a1c26;
	--st-muted: #6b7086;
	--st-panel: #ffffff;
	--st-stage: #eaecf2;
	--st-accent: var(--p360-brand);
	position: relative;
	inline-size: calc(100vw - var(--p360-sbw, 0px));
	margin-inline-start: calc(50% - 50vw + var(--p360-sbw, 0px) / 2);
	margin-block: 1.25rem 2.5rem;
	background: var(--st-bg);
	color: var(--st-ink);
	border-block: 1px solid var(--st-line);
	overflow: clip;
	font-size: 14px;
}
.p360-studio [hidden] { display: none !important; }
.p360-studio:fullscreen { margin: 0; inline-size: 100%; border: 0; overflow: auto; }

.p360-studio__topbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
	padding: .55rem 1.1rem;
	background: var(--st-bar);
	border-block-end: 1px solid var(--st-line);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 6px 18px -14px rgba(26, 28, 38, .35);
	min-block-size: 60px;
	position: relative; z-index: 2;
}
.p360-studio__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.p360-studio__brand {
	display: flex; align-items: center; gap: .5rem;
	font-family: var(--p360-font-head); font-weight: 800; font-size: 14px; color: #fff;
	background: linear-gradient(135deg, var(--p360-brand), var(--p360-ember));
	border-radius: 999px; padding: .45rem .95rem .45rem .8rem; margin-inline-end: .5rem;
	box-shadow: var(--p360-shadow-brand);
}
.p360-studio__brand .p360-icon { color: #fff; }
.p360-studio__topbar .p360-btn--ghost { background: #fff; color: var(--st-ink); border-color: var(--st-line); }
.p360-studio__topbar .p360-btn--ghost:hover { background: var(--st-bg); border-color: #c9cede; color: var(--p360-brand); }
.p360-studio__topbar .p360-btn[disabled] { opacity: .4; }
.p360-btn--sm { min-block-size: 38px; padding-inline: .8rem; font-size: 13px; }
.p360-btn--danger { background: var(--p360-err-bg); color: var(--p360-err); border-color: transparent; }
.p360-studio__zoom { display: inline-flex; align-items: center; gap: .1rem; background: var(--st-bg); border: 1px solid var(--st-line); border-radius: 999px; padding: .15rem; }
.p360-studio__zoom button { inline-size: 32px; block-size: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--st-ink); font: 700 16px/1 var(--p360-font); cursor: pointer; }
.p360-studio__zoom button:hover { background: #fff; color: var(--p360-brand); }
.p360-studio__zoom button:focus-visible { outline: 2px solid var(--p360-brand); }
.p360-studio__zoom output { min-inline-size: 46px; text-align: center; font-size: 12px; font-weight: 700; color: var(--st-muted); }
.p360-studio__toast { margin: 0; padding: .5rem 1.1rem; font-size: 13px; font-weight: 700; background: var(--p360-save); color: #fff; }

.p360-studio__body {
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr) minmax(0, 300px);
	block-size: calc(100vh - 150px);
	min-block-size: 660px;
	max-block-size: 1100px;
}
.p360-studio:fullscreen .p360-studio__body { block-size: calc(100vh - 60px); max-block-size: none; }

.p360-studio__side { background: var(--st-panel); color: var(--p360-ink); display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; border-inline-end: 1px solid var(--st-line); }
.p360-studio__tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: .4rem; background: var(--st-bg); border-block-end: 1px solid var(--st-line); }
.p360-studio__tab {
	display: flex; flex-direction: column; align-items: center; gap: .2rem;
	padding: .55rem .15rem .45rem; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
	font: inherit; font-size: 11px; font-weight: 700; color: var(--st-muted);
	transition: background var(--p360-t), color var(--p360-t);
}
.p360-studio__tab .p360-icon { color: #9096ad; transition: color var(--p360-t); }
.p360-studio__tab:hover { background: #fff; color: var(--st-ink); }
.p360-studio__tab.is-active { color: var(--p360-brand); background: #fff; box-shadow: 0 2px 8px -4px rgba(26, 28, 38, .35); }
.p360-studio__tab.is-active .p360-icon { color: var(--p360-brand); }
.p360-studio__tab:focus-visible { outline: 2px solid var(--p360-brand); outline-offset: -2px; }
.p360-studio__panels { padding: .9rem 1rem 1.2rem; overflow-y: auto; flex: 1; min-block-size: 0; display: block; font-size: 14px; scrollbar-width: thin; }
.p360-studio__panel { display: grid; gap: .7rem; }
.p360-studio__panel .p360-field { margin: 0; gap: .25rem; }
.p360-studio__panel .p360-field label { font-size: 12.5px; color: #4a4f63; }
.p360-studio__panel .p360-field input, .p360-studio__panel .p360-field select { font-size: 14px; min-block-size: 40px; padding-block: .4rem; border-radius: 10px; }
.p360-studio__panel .p360-form__grid { gap: .6rem; }
.p360-studio__panel h4 { margin: .5rem 0 .2rem; font-size: 12px; letter-spacing: .04em; color: var(--st-muted); }
.p360-studio__upload {
	display: grid; justify-items: center; gap: .3rem; text-align: center;
	padding: 1.1rem .9rem; border: 2px dashed #c9cede; border-radius: 14px; background: var(--st-bg); cursor: pointer;
	transition: border-color var(--p360-t), background var(--p360-t);
}
.p360-studio__upload:hover { border-color: var(--p360-brand); background: var(--p360-brand-light); }
.p360-studio__upload .p360-icon { color: var(--p360-brand); }
.p360-studio__upload strong { font-size: 14px; }
.p360-studio__upload span { font-size: 12px; color: var(--st-muted); line-height: 1.5; }
.p360-studio__upload input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.p360-studio__upload:focus-within { outline: 3px solid var(--p360-brand-light); }

.p360-studio__stage {
	position: relative;
	min-inline-size: 0; min-block-size: 0;
	overflow: auto;
	background: var(--st-stage);
	background-image: radial-gradient(rgba(26, 28, 38, .09) 1px, transparent 1px);
	background-size: 20px 20px;
	display: grid;
	place-items: center;
	padding: 22px;
	scrollbar-width: thin;
}
.p360-studio__canvaswrap {
	position: relative;
	flex: none;
	border-radius: 6px;
	box-shadow: 0 24px 50px -18px rgba(26, 28, 38, .45), 0 0 0 1px rgba(26, 28, 38, .08);
	background: #fff;
}
.p360-studio__canvaswrap canvas { display: block; }
.p360-studio__canvaswrap .canvas-container { margin: 0; }
.p360-studio__stage .p360-inv-preview-note {
	position: absolute; inset-block-end: 6px; inset-inline: 0;
	text-align: center; margin: 0; font-size: 11px; color: var(--st-muted); pointer-events: none;
}

.p360-studio__props {
	background: var(--st-panel); color: var(--p360-ink);
	border-inline-start: 1px solid var(--st-line);
	padding: .9rem 1rem; display: grid; gap: .55rem; align-content: start;
	min-inline-size: 0; min-block-size: 0; overflow-y: auto; font-size: 13px; scrollbar-width: thin;
}
.p360-studio__props h3 { margin: 0 0 .2rem; font-size: 14px; padding-block-end: .45rem; border-block-end: 1px solid var(--st-line); display: flex; align-items: center; gap: .4rem; }
.p360-props__empty { margin: 0; font-size: 13px; color: #4a4f63; line-height: 1.65; padding: .9rem; background: var(--st-bg); border-radius: 12px; }
.p360-props__empty kbd { font: 700 11px/1 var(--p360-font); background: #fff; border: 1px solid #d8dbe4; border-radius: 4px; padding: 2px 5px; }
.p360-prop { display: grid; gap: .2rem; font-size: 12px; color: #4a4f63; }
.p360-prop > span { font-weight: 700; }
.p360-prop input[type="range"] { inline-size: 100%; accent-color: var(--p360-brand); }
.p360-prop input[type="color"] { inline-size: 100%; block-size: 34px; padding: 2px; border: 1px solid #d8dbe4; border-radius: 8px; background: #fff; cursor: pointer; }
.p360-prop select, .p360-prop textarea { inline-size: 100%; font: inherit; font-size: 13px; padding: .45rem .55rem; border: 1px solid #d8dbe4; border-radius: 8px; background: #fff; color: var(--p360-ink); }
.p360-prop__btns { display: flex; flex-wrap: wrap; gap: .3rem; }
.p360-prop__btns .p360-btn { flex: 1 1 auto; min-inline-size: 0; min-block-size: 34px; font-size: 12px; padding-inline: .6rem; }
.p360-prop__btns--col { flex-direction: column; }
.p360-prop__btns--col .p360-btn { min-block-size: 42px; font-size: 13px; }

.p360-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(94px, 100%), 1fr)); gap: .55rem; }
.p360-tpl { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; text-align: center; }
.p360-tpl__thumb {
	display: block; aspect-ratio: 2 / 3; border-radius: 10px;
	background: #e9ebf1 center / cover no-repeat;
	border: 2px solid transparent; box-shadow: 0 6px 14px -8px rgba(26, 28, 38, .5);
	transition: transform var(--p360-t), border-color var(--p360-t), box-shadow var(--p360-t);
}
.p360-tpl:hover .p360-tpl__thumb { transform: translateY(-3px); box-shadow: 0 12px 20px -10px rgba(26, 28, 38, .5); }
.p360-tpl.is-active .p360-tpl__thumb { border-color: var(--p360-brand); box-shadow: 0 0 0 3px var(--p360-brand-light); }
.p360-tpl__name { display: block; font-size: 11px; margin-block-start: .25rem; color: #4a4f63; }
.p360-tpl.is-active .p360-tpl__name { color: var(--p360-brand); font-weight: 700; }
.p360-tpl-wrap { position: relative; min-inline-size: 0; }
.p360-tpl-wrap .p360-tpl { inline-size: 100%; }
.p360-tpl__mine { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--p360-brand); color: #fff; pointer-events: none; }
.p360-tpl__del { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; inline-size: 22px; block-size: 22px; border: 0; border-radius: 50%; background: rgba(26, 28, 38, .75); color: #fff; font-size: 14px; line-height: 22px; text-align: center; cursor: pointer; padding: 0; }
.p360-tpl__del:hover { background: var(--p360-brand); }

.p360-orn-grid, .p360-bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(68px, 100%), 1fr)); gap: .4rem; }
.p360-orn, .p360-bg { border: 1px solid var(--st-line); border-radius: 10px; background: #fff; padding: .25rem; cursor: pointer; font: inherit; display: grid; gap: .15rem; transition: border-color var(--p360-t), transform var(--p360-t); }
.p360-orn:hover, .p360-bg:hover { border-color: var(--p360-brand); transform: translateY(-2px); }
.p360-bg.is-active { border-color: var(--p360-brand); box-shadow: 0 0 0 2px var(--p360-brand-light); }
.p360-orn__thumb { display: block; aspect-ratio: 1; background: #f4f5f9 center / contain no-repeat; border-radius: 7px; }
.p360-bg__thumb { display: block; aspect-ratio: 2 / 3; background: #e9ebf1 center / cover no-repeat; border-radius: 7px; }
.p360-orn__name, .p360-bg__name { font-size: 10px; color: var(--st-muted); text-align: center; line-height: 1.2; }
.p360-bg-controls { display: grid; gap: .6rem; margin-block-start: .5rem; }
.p360-bg-controls .p360-prop input[type="color"] { block-size: 30px; }

.p360-studio .p360-inv-video { margin: 0; border-radius: 0; border: 0; border-block-start: 1px solid var(--st-line); background: var(--st-bar); }
.p360-studio .p360-inv-hebnote { font-size: 12px; }

@media (max-width: 1100px) {
	.p360-studio__body { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); block-size: auto; max-block-size: none; }
	.p360-studio__props { grid-column: 1 / -1; border-inline-start: 0; border-block-start: 1px solid var(--st-line); max-block-size: 320px; }
	.p360-studio__stage { block-size: calc(100vh - 220px); min-block-size: 520px; }
	.p360-studio__side { block-size: calc(100vh - 220px); min-block-size: 520px; }
}
@media (max-width: 820px) {
	.p360-studio { margin-block: 1rem 2rem; }
	.p360-studio__body { grid-template-columns: 1fr; }
	.p360-studio__stage { order: -1; block-size: 62vh; min-block-size: 420px; padding: 14px; }
	.p360-studio__side { block-size: auto; min-block-size: 0; border-inline-end: 0; }
	.p360-studio__panels { max-block-size: 60vh; }
	.p360-studio__tab span { font-size: 10px; }
	.p360-studio__props { max-block-size: none; }
	.p360-studio__topbar { padding: .5rem .6rem; }
	.p360-studio__brand { display: none; }
}

/* הצהרת נגישות */
.p360-statement__features { display: grid; gap: .75rem; margin-block: 1rem; }
.p360-statement__features dt { font-family: var(--p360-font-head); font-weight: 700; color: var(--p360-brand); }
.p360-statement__features dd { margin: 0; font-size: var(--p360-fs-sm); color: var(--p360-ink-2); }
.p360-statement kbd {
	font: 700 .85em/1 var(--p360-font);
	background: var(--p360-sand);
	border: 1px solid var(--p360-line-2);
	border-block-end-width: 2px;
	border-radius: 5px;
	padding: .2em .45em;
	white-space: nowrap;
}

/* סטודיו: שכבות, ברכות, אמוג׳י, בורר ייצוא */
.p360-studio__tabs { grid-template-columns: repeat(8, 1fr); }

/* 43. כלים חכמים: אורחים, ציור, צבעים מהתמונה, תצוגת טלפון */
.p360-guest-nav { display: flex; align-items: center; gap: .4rem; margin-block: .4rem .7rem; }
.p360-guest-nav output { flex: 1 1 auto; min-inline-size: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--p360-ink); background: var(--p360-surface-2, #f3f4f8); border-radius: 999px; padding: .45rem .6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p360-guest-nav .p360-btn { flex: 0 0 auto; min-inline-size: 36px; padding-inline: .5rem; }
.p360-guest-list { display: flex; flex-wrap: wrap; gap: .3rem; margin-block-start: .6rem; }
.p360-guest-list button { border: 1px solid var(--p360-line); background: #fff; border-radius: 999px; padding: .2rem .6rem; font: inherit; font-size: 12px; cursor: pointer; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p360-guest-list button.is-active { background: var(--p360-brand); color: #fff; border-color: var(--p360-brand); }
.p360-draw { display: grid; gap: .45rem; padding: .7rem; border: 1px solid var(--p360-line); border-radius: var(--p360-radius-sm); background: #fff; margin-block-end: .6rem; }
.p360-draw label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: 12px; color: var(--p360-ink-2); }
.p360-draw select, .p360-draw input[type="range"] { inline-size: 60%; min-inline-size: 0; }
.p360-draw input[type="color"] { inline-size: 44px; block-size: 28px; padding: 0; border: 1px solid var(--p360-line); border-radius: 6px; background: none; }
.p360-draw.is-on { border-color: var(--p360-brand); box-shadow: 0 0 0 3px var(--p360-brand-light); }
.p360-studio.is-drawing .p360-studio__canvaswrap { cursor: crosshair; outline: 3px dashed var(--p360-brand); outline-offset: 4px; }
.p360-swatches { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: .5rem; }
.p360-swatches button { inline-size: 40px; block-size: 40px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--p360-line), 0 4px 10px -6px rgba(0,0,0,.5); cursor: pointer; padding: 0; }
.p360-swatches button:hover, .p360-swatches button:focus-visible { transform: scale(1.1); }
.p360-inv-smart { background: linear-gradient(135deg, #e9f8ef, var(--p360-gold-light)); }
.p360-inv-smart textarea { inline-size: 100%; min-inline-size: 0; font: inherit; font-size: 14px; line-height: 1.6; padding: .6rem .8rem; border: 1px solid var(--p360-line); border-radius: var(--p360-radius-sm); background: #fff; resize: vertical; }
/* תצוגת טלפון מלאה עם אנימציה: הודעה נכנסת, וי כחול, תשובה ולבבות */
.p360-phone { position: fixed; inset: 0; z-index: 1200; background: rgba(20, 16, 28, .78); backdrop-filter: blur(6px); display: grid; place-content: center; gap: .9rem; padding: 1rem; }
.p360-phone[hidden] { display: none; }
.p360-phone__frame {
	position: relative; inline-size: min(360px, 92vw); block-size: min(720px, 84vh);
	background: #ece5dd; border-radius: 40px; border: 10px solid #111; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), inset 0 0 0 2px #2a2a2a;
	overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; direction: rtl;
	animation: p360-phone-in .55s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes p360-phone-in { from { transform: translateY(60px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.p360-phone__notch { position: absolute; inset-block-start: 6px; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 110px; block-size: 22px; background: #111; border-radius: 0 0 16px 16px; z-index: 2; }
.p360-phone__top { display: flex; align-items: center; gap: .6rem; padding: 2rem .9rem .6rem; background: #075e54; color: #fff; }
.p360-phone__avatar { inline-size: 38px; block-size: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--p360-brand), #ef6a3d); display: grid; place-items: center; font-weight: 700; flex: none; }
.p360-phone__who { display: grid; line-height: 1.2; min-inline-size: 0; }
.p360-phone__who small { opacity: .85; font-size: 11px; }
.p360-phone__chat { position: relative; overflow: auto; padding: .8rem .7rem 1.2rem; display: grid; align-content: start; gap: .5rem; background: #e5ddd5 repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 6px, transparent 6px 14px); scrollbar-width: none; }
.p360-phone__day { justify-self: center; font-size: 11px; color: #5b6168; background: #d9e6f0; border-radius: 8px; padding: .2rem .6rem; }
.p360-phone__typing { justify-self: start; background: #fff; border-radius: 12px 12px 12px 2px; padding: .55rem .7rem; display: none; gap: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.15); }
.p360-phone__typing span { inline-size: 7px; block-size: 7px; border-radius: 50%; background: #9aa0a6; animation: p360-dot 1.1s ease-in-out infinite; }
.p360-phone__typing span:nth-child(2) { animation-delay: .18s; }
.p360-phone__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes p360-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.p360-phone.is-typing .p360-phone__typing { display: flex; }
.p360-phone__bubble { max-inline-size: 86%; padding: .35rem; box-shadow: 0 1px 1px rgba(0,0,0,.15); font-size: 13px; opacity: 0; transform: scale(.6); transform-origin: bottom; transition: opacity .35s, transform .5s cubic-bezier(.2, .9, .3, 1.35); }
.p360-phone__bubble--out { justify-self: end; background: #dcf8c6; border-radius: 12px 12px 2px 12px; }
.p360-phone__bubble--in { justify-self: start; background: #fff; border-radius: 12px 12px 12px 2px; padding: .5rem .7rem; transform-origin: bottom right; }
.p360-phone.is-sent .p360-phone__bubble--out, .p360-phone.is-replied .p360-phone__bubble--in { opacity: 1; transform: none; }
.p360-phone__bubble img { display: block; inline-size: 100%; border-radius: 9px; background: #fff; }
.p360-phone__bubble p { margin: .35rem .3rem .1rem; white-space: pre-line; line-height: 1.45; }
.p360-phone__bubble time { display: flex; justify-content: flex-end; gap: .25rem; font-size: 10px; color: #7a7f85; margin: 0 .3rem .1rem; direction: ltr; }
.p360-phone__ticks { font-style: normal; color: #9aa0a6; transition: color .4s; letter-spacing: -3px; }
.p360-phone.is-read .p360-phone__ticks { color: #34b7f1; }
.p360-phone__float { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.p360-phone__float span { position: absolute; inset-block-end: -30px; font-size: 22px; animation: p360-float 3.2s ease-out forwards; }
@keyframes p360-float { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-520px) rotate(25deg); opacity: 0; } }
.p360-phone__bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; background: #f0f0f0; color: #8a8f95; font-size: 13px; }
.p360-phone__bar span { flex: 1; background: #fff; border-radius: 999px; padding: .5rem .9rem; }
.p360-phone__actions { display: flex; justify-content: center; gap: .6rem; }
@media (prefers-reduced-motion: reduce) { .p360-phone__frame, .p360-phone__typing span, .p360-phone__float span { animation: none; } .p360-phone__bubble { transition: none; } }

/* תצוגה חיה בטלפון בעמודת המאפיינים כשאין בחירה */
.p360-live { display: grid; gap: .55rem; }
.p360-live__head { display: flex; align-items: center; gap: .45rem; font-size: 13px; font-weight: 700; }
.p360-live__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: p360-live 1.6s ease-out infinite; }
@keyframes p360-live { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }
.p360-live__phone { position: relative; inline-size: 100%; max-inline-size: 240px; justify-self: center; background: #ece5dd; border-radius: 26px; border: 7px solid #111; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); direction: rtl; }
.p360-live__top { display: flex; align-items: center; gap: .4rem; padding: .9rem .6rem .4rem; background: #075e54; color: #fff; font-size: 11px; font-weight: 700; }
.p360-live__top i { inline-size: 20px; block-size: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--p360-brand), #ef6a3d); flex: none; }
.p360-live__top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p360-live__chat { padding: .5rem .45rem .6rem; display: grid; gap: .35rem; align-content: start; background: #e5ddd5 repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 5px, transparent 5px 12px); min-block-size: 250px; }
.p360-live__bubble { justify-self: end; inline-size: 82%; background: #dcf8c6; border-radius: 9px 9px 2px 9px; padding: .22rem; box-shadow: 0 1px 1px rgba(0,0,0,.15); }
.p360-live__bubble canvas { display: block; inline-size: 100%; block-size: auto; border-radius: 6px; background: #fff; }
.p360-live__bubble time { display: block; text-align: left; font-size: 8px; color: #7a7f85; margin: .1rem .2rem 0; }
.p360-live__typing, .p360-live__reply { justify-self: start; background: #fff; border-radius: 9px 9px 9px 2px; padding: .35rem .5rem; font-size: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.15); }
.p360-live__typing { display: flex; gap: 3px; animation: p360-live-typing 6s infinite; }
.p360-live__typing span { inline-size: 5px; block-size: 5px; border-radius: 50%; background: #9aa0a6; animation: p360-dot 1.1s ease-in-out infinite; }
.p360-live__typing span:nth-child(2) { animation-delay: .18s; }
.p360-live__typing span:nth-child(3) { animation-delay: .36s; }
.p360-live__reply { animation: p360-live-reply 6s infinite; }
@keyframes p360-live-typing { 0%, 8% { opacity: 0; transform: translateY(6px); } 12%, 40% { opacity: 1; transform: none; } 44%, 100% { opacity: 0; transform: translateY(6px); position: absolute; } }
@keyframes p360-live-reply { 0%, 44% { opacity: 0; transform: scale(.6); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.p360-live .p360-prop__btns .p360-btn { inline-size: 100%; }
.p360-props__hint { margin: 0; font-size: 12px; color: var(--st-muted); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .p360-live__dot, .p360-live__typing, .p360-live__typing span, .p360-live__reply { animation: none; } .p360-live__typing { display: none; } }

/* שלבי העבודה מעל הקנבס וזוהר מאחוריו */
.p360-studio__stage { padding-block-start: 62px; }
.p360-studio__stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(55% 45% at 50% 58%, rgba(163, 43, 87, .10), transparent 70%); pointer-events: none; }
.p360-steps { position: absolute; inset-block-start: 12px; inset-inline: 0; margin-inline: auto; inline-size: max-content; max-inline-size: calc(100% - 24px); display: flex; gap: .25rem; padding: .3rem; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.9); border-radius: 999px; box-shadow: 0 10px 24px -14px rgba(26, 28, 38, .5); z-index: 3; overflow-x: auto; scrollbar-width: none; }
.p360-steps button { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; border-radius: 999px; padding: .35rem .75rem .35rem .55rem; font: inherit; font-size: 12px; font-weight: 700; color: var(--st-muted); cursor: pointer; white-space: nowrap; transition: background var(--p360-t), color var(--p360-t); }
.p360-steps button i { font-style: normal; inline-size: 20px; block-size: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #e6e8ef; color: var(--st-muted); transition: background var(--p360-t), color var(--p360-t); }
.p360-steps button:hover { color: var(--st-ink); background: #fff; }
.p360-steps button.is-active { color: #fff; background: linear-gradient(135deg, var(--p360-brand), #ef6a3d); }
.p360-steps button.is-active i { background: rgba(255,255,255,.25); color: #fff; }
.p360-steps button.is-done i { background: #22c55e; color: #fff; }
@media (max-width: 900px) { .p360-studio__stage { padding-block-start: 56px; } .p360-steps button span { display: none; } .p360-steps button { padding-inline: .45rem; } }

/* 44. מראה מקצועי ורציני: סרגל עליון כהה, צבע מותג רק לפעולה הראשית */
.p360-studio__topbar { background: #1a1c26; border-block-end: 1px solid #2b2e3c; }
.p360-studio__brand { background: transparent; color: #fff; padding: 0 .2rem; border-radius: 0; font-size: 15px; letter-spacing: .01em; }
.p360-studio__brand .p360-icon { color: #f5a623; }
.p360-studio__topbar .p360-btn--ghost { background: transparent; color: #e6e8f0; border-color: #3a3e4f; }
.p360-studio__topbar .p360-btn--ghost:hover { background: #262938; border-color: #4a4f63; color: #fff; }
.p360-studio__topbar .p360-btn--light { background: #fff; color: #1a1c26; border-color: #fff; }
.p360-studio__zoom { background: #262938; border-color: #3a3e4f; }
.p360-studio__zoom button { color: #e6e8f0; }
.p360-studio__zoom button:hover { background: #1a1c26; color: #fff; }
.p360-studio__zoom output { color: #aab0c4; }
.p360-studio__select { background: #262938; color: #e6e8f0; border-color: #3a3e4f; }
.p360-studio__stage::before { content: none; }
.p360-studio__stage { background-image: none; background: #e9ebf0; }
.p360-steps { background: #fff; border-color: var(--st-line); box-shadow: 0 6px 18px -12px rgba(26, 28, 38, .5); backdrop-filter: none; }
.p360-steps button.is-active { background: #1a1c26; color: #fff; }
.p360-steps button.is-active i { background: rgba(255,255,255,.18); color: #fff; }
.p360-steps button.is-done i { background: #1a1c26; color: #fff; }
.p360-live__head { font-size: 12px; color: var(--st-muted); }
.p360-live__dot { background: #22c55e; animation: none; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.p360-live__top i { background: #4a4f63; }
.p360-live__rsvp { display: grid; gap: 3px; margin: .3rem .1rem .05rem; }
.p360-live__rsvp span { text-align: center; font-size: 9.5px; font-weight: 700; color: #027eb5; background: #fff; border-radius: 6px; padding: .2rem; }
.p360-live__rsvp span:first-child { background: #027eb5; color: #fff; }
.p360-live__typing, .p360-live__reply { display: none; }
.p360-props__back { inline-size: 100%; border: 1px solid var(--st-line); background: var(--st-bg); color: var(--st-ink); border-radius: 10px; padding: .55rem .7rem; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-align: start; }
.p360-props__back:hover { border-color: #1a1c26; background: #fff; }
.p360-phone { background: rgba(26, 28, 38, .82); }
.p360-phone__frame { animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
.p360-phone__avatar { background: #4a4f63; }
.p360-phone__rsvp { display: grid; gap: 4px; margin: .45rem .1rem .1rem; border-block-start: 1px solid rgba(0,0,0,.08); padding-block-start: .45rem; }
.p360-phone__rsvp button { border: 0; background: #fff; color: #027eb5; font: inherit; font-size: 13px; font-weight: 700; border-radius: 8px; padding: .5rem; cursor: pointer; transition: background .25s, color .25s, transform .2s; }
.p360-phone__rsvp button.is-picked { background: #027eb5; color: #fff; }
.p360-phone.is-tap [data-rsvp="yes"] { transform: scale(.94); background: #d9eefa; }
.p360-phone__confirm { display: none; margin: .4rem .1rem .1rem; padding: .5rem .6rem; border-radius: 8px; background: #fff; border-inline-start: 3px solid #22c55e; font-size: 12px; line-height: 1.45; }
.p360-phone__confirm b { display: block; color: #15803d; }
.p360-phone.is-confirmed .p360-phone__confirm { display: block; animation: p360-confirm .45s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes p360-confirm { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.p360-phone__bubble--in, .p360-phone__float { display: none; }
@media (prefers-reduced-motion: reduce) { .p360-phone.is-confirmed .p360-phone__confirm { animation: none; } }

/* 45. הגשה מקצועית: סרגל לבן וקומפקטי, אזור מרכזי עם פס שלבים ומצב תצוגה בנייד במקום הבמה */
.p360-studio__topbar { background: #fff; border-block-end: 1px solid var(--st-line); padding: .45rem 1rem; }
.p360-studio__brand { color: var(--st-ink); font-size: 14px; gap: .4rem; }
.p360-studio__brand .p360-icon { color: var(--p360-brand); }
.p360-studio__topbar .p360-btn--ghost, .p360-studio__topbar .p360-btn--primary, .p360-studio__topbar .p360-btn--save, .p360-studio__select { min-block-size: 34px; block-size: 34px; padding-block: 0; border-radius: 8px; font-size: 12.5px; padding-inline: .7rem; line-height: 1; }
.p360-studio__topbar .p360-btn .p360-icon { inline-size: 16px; block-size: 16px; }
.p360-studio__topbar .p360-btn--primary, .p360-studio__topbar .p360-btn--save { box-shadow: none; }
.p360-preview { padding: .8rem 1.2rem; grid-template-rows: minmax(0, 1fr); align-items: center; overflow: hidden; }
.p360-preview .p360-phone__frame { block-size: 100%; max-block-size: 720px; aspect-ratio: auto; inline-size: min(360px, 100%); }
.p360-preview .p360-phone__bubble--out { inline-size: 86%; max-inline-size: 86%; }
.p360-preview .p360-phone__chat { padding-block-end: 2rem; }
.p360-studio__topbar .p360-btn--ghost { background: #fff; color: var(--st-ink); border-color: #d8dbe4; }
.p360-studio__topbar .p360-btn--ghost:hover { background: var(--st-bg); border-color: #b9bfd0; color: var(--st-ink); }
.p360-studio__topbar .p360-btn--ghost .p360-icon { color: var(--st-muted); }
.p360-studio__zoom { background: #fff; border-color: #d8dbe4; border-radius: 8px; padding: .1rem; }
.p360-studio__zoom button { color: var(--st-ink); inline-size: 28px; block-size: 28px; border-radius: 6px; }
.p360-studio__zoom button:hover { background: var(--st-bg); color: var(--st-ink); }
.p360-studio__zoom output { color: var(--st-muted); min-inline-size: 40px; }
.p360-studio__select { background: #fff; color: var(--st-ink); border-color: #d8dbe4; }
.p360-studio__center { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; background: #e9ebf0; }
.p360-studio__bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .5rem .9rem; background: #fff; border-block-end: 1px solid var(--st-line); }
.p360-studio__stage { flex: 1 1 auto; padding: 18px 14px 26px; background: #e9ebf0; }
.p360-studio.is-preview .p360-studio__stage { display: none; }
.p360-steps { position: static; inline-size: auto; max-inline-size: 100%; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; gap: .15rem; }
.p360-steps button { font-size: 12px; padding: .3rem .6rem .3rem .45rem; color: var(--st-muted); }
.p360-steps button i { inline-size: 18px; block-size: 18px; font-size: 10.5px; }
.p360-steps button.is-active { background: var(--st-bg); color: var(--st-ink); }
.p360-steps button.is-active i { background: var(--st-ink); color: #fff; }
.p360-seg { display: inline-flex; padding: 3px; background: var(--st-bg); border: 1px solid var(--st-line); border-radius: 8px; }
.p360-seg button { border: 0; background: transparent; border-radius: 6px; padding: .3rem .75rem; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--st-muted); cursor: pointer; transition: background var(--p360-t), color var(--p360-t); }
.p360-seg button.is-active { background: #fff; color: var(--st-ink); box-shadow: 0 1px 3px rgba(26, 28, 38, .15); }
.p360-seg button:hover:not(.is-active) { color: var(--st-ink); }
.p360-preview { flex: 1 1 auto; min-block-size: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; justify-items: center; gap: 1.5rem; padding: 1.2rem; background: #e9ebf0; overflow: auto; }
.p360-preview[hidden] { display: none; }
.p360-preview .p360-phone__frame { inline-size: min(360px, 100%); block-size: min(700px, 100%); aspect-ratio: 9 / 18.5; animation: p360-phone-in .5s cubic-bezier(.2, .8, .3, 1) both; border-color: #1a1c26; border-radius: 34px; box-shadow: 0 30px 60px -28px rgba(26, 28, 38, .6), 0 0 0 1px rgba(0,0,0,.2); }
.p360-preview .p360-phone__top { padding-block-start: 1.9rem; }
.p360-phone__live { display: block; inline-size: 100%; block-size: auto; border-radius: 9px; background: #fff; }
.p360-preview__side { justify-self: start; max-inline-size: 360px; display: grid; gap: .6rem; font-size: 14px; color: var(--st-ink); }
.p360-preview__side h4 { margin: 0; font-size: 18px; }
.p360-preview__side p { margin: 0; color: var(--st-muted); line-height: 1.6; }
.p360-preview__side ol { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .3rem; color: #4a4f63; }
.p360-preview__side .p360-prop__btns { margin-block-start: .4rem; }
.p360-props__quick { display: grid; gap: .45rem; }
.p360-props__quick .p360-btn { inline-size: 100%; justify-content: flex-start; min-block-size: 40px; font-size: 13px; }
.p360-props__quick h3 { border: 0; padding: 0; margin: 0; }
.p360-props__tip { margin: 0; font-size: 12.5px; color: var(--st-muted); line-height: 1.6; padding: .7rem .8rem; background: var(--st-bg); border-radius: 10px; }
.p360-props__tip kbd { font: 700 11px/1 var(--p360-font); background: #fff; border: 1px solid #d8dbe4; border-radius: 4px; padding: 2px 5px; }
.p360-props__back { text-align: center; }
@media (max-width: 1100px) { .p360-preview { grid-template-columns: 1fr; } .p360-preview__side { justify-self: center; text-align: center; } .p360-preview__side ol { text-align: start; } }
@media (max-width: 900px) { .p360-studio__stage { padding-block-start: 14px; } .p360-studio__bar { padding: .4rem .6rem; } .p360-preview { padding: .8rem; } .p360-preview .p360-phone__frame { block-size: 640px; } }
/* מצבי ההדגמה כשהמסגרת עצמה נושאת את data-phone */
[data-phone].is-typing .p360-phone__typing { display: flex; }
[data-phone].is-sent .p360-phone__bubble--out { opacity: 1; transform: none; }
[data-phone].is-read .p360-phone__ticks { color: #34b7f1; }
[data-phone].is-tap [data-rsvp="yes"] { transform: scale(.94); background: #d9eefa; }
[data-phone].is-confirmed .p360-phone__confirm { display: block; animation: p360-confirm .45s cubic-bezier(.2, .8, .3, 1.2) both; }
@media (prefers-reduced-motion: reduce) { [data-phone].is-confirmed .p360-phone__confirm { animation: none; } .p360-preview .p360-phone__frame { animation: none; } }
.p360-countdown-badge { pointer-events: none; }
.p360-studio__select { font: inherit; font-size: 13px; min-block-size: 38px; padding: 0 .6rem; border: 1px solid var(--st-line); border-radius: 999px; background: #fff; color: var(--st-ink); }
.p360-layers { display: grid; gap: 4px; }
.p360-layer { display: flex; align-items: center; gap: 2px; padding: 3px 4px; border-radius: 8px; background: var(--st-bg); border: 1px solid transparent; }
.p360-layer.is-active { border-color: var(--p360-brand); background: var(--p360-brand-light); }
.p360-layer.is-hidden { opacity: .5; }
.p360-layer__name { flex: 1; min-inline-size: 0; text-align: start; border: 0; background: transparent; font: inherit; font-size: 12.5px; padding: 6px 6px; cursor: pointer; color: var(--p360-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p360-layer__btn { inline-size: 26px; block-size: 26px; border: 0; border-radius: 6px; background: #fff; font-size: 11px; cursor: pointer; color: #4a4f63; }
.p360-layer__btn:hover { background: var(--p360-brand); color: #fff; }
.p360-bless { border: 1px solid var(--st-line); border-radius: 10px; padding: .3rem .6rem; background: #fff; }
.p360-bless summary { cursor: pointer; font-weight: 700; font-size: 13px; padding: .3rem 0; }
.p360-bless__item { display: block; inline-size: 100%; text-align: start; border: 0; background: var(--st-bg); border-radius: 8px; padding: .5rem .6rem; margin-block: .25rem; font: inherit; font-size: 13px; cursor: pointer; color: var(--p360-ink); }
.p360-bless__item:hover { background: var(--p360-brand-light); color: var(--p360-brand); }
.p360-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; }
.p360-emoji { border: 1px solid var(--st-line); border-radius: 8px; background: #fff; font-size: 22px; line-height: 1; padding: 6px 0; cursor: pointer; }
.p360-emoji:hover { border-color: var(--p360-brand); transform: translateY(-2px); }