/* ==========================================================================
   IranDesigner Cinema — legacy content skin
   Inner pages keep their native markup + layout CSS (grids, responsive
   visibility, forms, tools). This layer strips the old light paint and
   repaints every surface in the cinematic system.
   Scope: :is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island)
   ========================================================================== */

body.cinema-skin { background: var(--bg) !important; color: var(--text-2); }
body.cinema-skin #primary-content:not(.cinema-composed) { position: relative; isolation: isolate; background: transparent !important; color: var(--text-2) !important; padding-top: var(--header-h); }
body.cinema-skin .cx-island { color: var(--text-2); }

/* ---- 1. Flatten legacy paint (layout untouched) ---- */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(section, article, aside, header, footer, div, figure, blockquote, li, nav, details, summary, form, fieldset, table, thead, tbody, tfoot, tr, td, th, label, span, a, ul, ol, dl, dd, dt, p, small, strong, em, b, mark) {
	background-color: transparent !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border-color: var(--line) !important;
}
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(section, article, aside, header, div, figure, blockquote, li, nav, details, form, a, span, p, strong, b, em, mark) {
	background-image: none !important;
}
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) * { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is([class*="ui-decoration-"], .hero-mesh, .home-pattern-grid, [class*="blur-"]) { opacity: 0 !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) svg { color: var(--gold); }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) img { filter: none; }

/* ---- 2. Typography ---- */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(h1, h2, h3, h4, h5, h6) { color: var(--text) !important; font-weight: 900; text-wrap: balance; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) h1 { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.6rem) !important; line-height: 1.22 !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) h2 { line-height: 1.38 !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(p, li, dd, td, figcaption, blockquote) { color: var(--text-2) !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(strong, b) { color: var(--text) !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) a:not([class*="brand-button"]):not([class*="ui-action"]) { color: var(--gold-l) !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(h1, h2, h3, h4) a { color: inherit !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) ::selection { background: rgba(224, 169, 95, .35); }

/* ---- 3. First section = cinematic page hero (viewfinder framing) ---- */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) > :is(section, header, div):first-child,
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) > div[data-wordpress-native-content] > :is(section, header):first-child,
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(.id-inner-hero, [class*="-hero"]:is(section, header)) {
	position: relative;
	isolation: isolate;
}
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) > :is(section, header):first-of-type::before {
	content: "";
	position: absolute; inset: -40px 0 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(42% 70% at 18% 40%, rgba(210, 106, 78, .16), transparent 70%),
		radial-gradient(30% 50% at 85% 0%, rgba(90, 167, 178, .08), transparent 70%),
		repeating-conic-gradient(from 0deg at 18% 40%, rgba(255, 214, 160, .035) 0deg 3deg, transparent 3deg 16deg);
	-webkit-mask-image: linear-gradient(#000 60%, transparent);
	mask-image: linear-gradient(#000 60%, transparent);
}

/* ---- 4. Surfaces: cards & panels ---- */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(article, blockquote, aside, [class*="ui-panel-"], [class*="public-color-card"], [class*="public-soft-panel"], [class*="__case"], [class*="-card"]:not([class*="-card__"]):not(img):not(span):not(svg)) {
	background:
		linear-gradient(180deg, rgba(255, 236, 214, .035), rgba(255, 236, 214, .012)) !important;
	border: 1px solid var(--line-2) !important;
	border-radius: 20px !important;
	transition: border-color .4s, transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(article, [class*="public-color-card"], [class*="__case"]):hover {
	border-color: rgba(224, 169, 95, .38) !important;
	box-shadow: 0 30px 60px -36px rgba(210, 106, 78, .55) !important;
}
/* nested surfaces read as insets, not cards-in-cards */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(article, [class*="ui-panel-"], [class*="public-color-card"], [class*="public-soft-panel"]) :is(article, [class*="ui-panel-"], [class*="public-color-card"]) {
	background: rgba(255, 236, 214, .025) !important;
	border-radius: 14px !important;
}
/* section level panels get the film-frame corners */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is([class*="public-soft-panel"], aside[class*="panel"]) { position: relative; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is([class*="public-soft-panel"], aside[class*="panel"])::after {
	content: ""; position: absolute; inset: 12px; pointer-events: none; z-index: 0;
	--cc: rgba(255, 244, 230, .4); --cl: 18px; --cw: 1.5px;
	background:
		linear-gradient(var(--cc), var(--cc)) top left / var(--cl) var(--cw), linear-gradient(var(--cc), var(--cc)) top left / var(--cw) var(--cl),
		linear-gradient(var(--cc), var(--cc)) top right / var(--cl) var(--cw), linear-gradient(var(--cc), var(--cc)) top right / var(--cw) var(--cl),
		linear-gradient(var(--cc), var(--cc)) bottom left / var(--cl) var(--cw), linear-gradient(var(--cc), var(--cc)) bottom left / var(--cw) var(--cl),
		linear-gradient(var(--cc), var(--cc)) bottom right / var(--cl) var(--cw), linear-gradient(var(--cc), var(--cc)) bottom right / var(--cw) var(--cl);
	background-repeat: no-repeat;
}

/* ---- 5. Media ---- */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(figure, picture) { border-radius: 18px; overflow: hidden; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(article, [class*="ui-panel-"]) img,
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) figure img { border-radius: 14px; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) figure:has(> img) { border: 1px solid var(--line-2) !important; }

/* ---- 6. Buttons ---- */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(.brand-button-motion--primary, a[href*="#new-project"], a[href*="/start-project"], button[type="submit"]):not(.brand-button-motion--outline):not(.brand-button-motion--ghost) {
	background: var(--grad-fire) !important;
	color: #1a0d08 !important; -webkit-text-fill-color: #1a0d08 !important;
	border: 0 !important; border-radius: 999px !important;
	box-shadow: 0 12px 30px -12px rgba(210, 106, 78, .75) !important;
	font-weight: 800 !important;
	transition: transform .35s var(--ease-out), box-shadow .35s;
}
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(.brand-button-motion--primary, a[href*="#new-project"], a[href*="/start-project"], button[type="submit"]):not(.brand-button-motion--outline):not(.brand-button-motion--ghost) * { color: #1a0d08 !important; -webkit-text-fill-color: #1a0d08 !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(.brand-button-motion--primary, a[href*="#new-project"], button[type="submit"]):hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(210, 106, 78, .95) !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(.brand-button-motion--outline, .brand-button-motion--ghost, .brand-button-motion:not(.brand-button-motion--primary)) {
	border: 1px solid var(--line-2) !important; border-radius: 999px !important;
	color: var(--text) !important; background: rgba(255, 236, 214, .035) !important;
}
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(.brand-button-motion--outline, .brand-button-motion--ghost):hover { border-color: rgba(224, 169, 95, .55) !important; color: var(--gold-l) !important; }

/* ---- 7. Breadcrumbs ---- */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) nav:is([class*="breadcrumb"], [aria-label*="breadcrumb" i], [aria-label*="مسیر"]),
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) > section:first-child > nav:first-child {
	font-family: var(--mono) !important; font-size: 12px !important; letter-spacing: .04em; color: var(--muted) !important;
}
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) nav[class*="breadcrumb"] a { color: var(--muted) !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) nav[class*="breadcrumb"] a:hover { color: var(--gold-l) !important; }

/* ---- 8. Tables ---- */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) table { width: 100%; border-collapse: separate !important; border-spacing: 0; border: 1px solid var(--line-2) !important; border-radius: 16px; overflow: hidden; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) th { color: var(--gold-l) !important; font-weight: 800; background: rgba(224, 169, 95, .06) !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(td, th) { border-bottom: 1px solid var(--line) !important; padding: 14px 16px !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) tr:last-child td { border-bottom: 0 !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) tbody tr:hover td { background: rgba(255, 236, 214, .025) !important; }

/* ---- 9. Accordions (FAQ) ---- */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) details { border: 1px solid var(--line) !important; border-radius: 16px !important; background: rgba(255, 236, 214, .02) !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) details[open] { border-color: rgba(224, 169, 95, .35) !important; background: rgba(224, 169, 95, .04) !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) summary { color: var(--text) !important; font-weight: 800; cursor: pointer; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) summary:hover { color: var(--gold-l) !important; }

/* ---- 10. Forms ---- */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
	background: #0f0c0a !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important;
	border: 1px solid var(--line-2) !important; border-radius: 14px !important;
}
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(input, select, textarea):focus { border-color: var(--gold) !important; outline: 2px solid rgba(224, 169, 95, .25) !important; outline-offset: 1px; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) ::placeholder { color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; opacity: 1; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--gold); }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) label { color: var(--text-2) !important; }

/* ---- 11. Long-form article content ---- */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(.article-content, .blog-article-content) { font-size: 1.06rem; line-height: 2.1; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(.article-content, .blog-article-content) :is(h2, h3) { scroll-margin-top: calc(var(--header-h) + 24px); }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(.article-content, .blog-article-content) h2 { padding-top: .4em; border-top: 1px solid var(--line) !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(.article-content, .blog-article-content) blockquote { border-inline-start: 3px solid var(--gold) !important; border-radius: 6px 16px 16px 6px !important; padding: 18px 22px !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(.article-content, .blog-article-content) :is(ul, ol) li::marker { color: var(--gold); }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) code { font-family: var(--mono); font-size: .92em; padding: .1em .4em; border-radius: 6px; background: rgba(255, 236, 214, .07) !important; color: var(--gold-l) !important; }

/* ---- 12. Chips, badges, pagination ---- */
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is([class*="rounded-full"], [class*="chip"], [class*="badge"]):not(a[class*="brand-button"]):not(img):not(span:empty) { border-color: rgba(224, 169, 95, .3) !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(.ir-pagination, [class*="pagination"]) a { border: 1px solid var(--line-2) !important; border-radius: 999px !important; color: var(--text-2) !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) :is(.ir-pagination, [class*="pagination"]) :is([aria-current], .current) { background: var(--grad-fire) !important; color: #1a0d08 !important; -webkit-text-fill-color: #1a0d08 !important; border-color: transparent !important; }
:is(body.cinema-skin #primary-content:not(.cinema-composed), body.cinema-skin .cx-island) hr { border: 0 !important; height: 1px; background: var(--line-2) !important; }