/*
 * smm.css — page-scoped styling for the SMM section templates
 * (page-smm-hub.php, page-smm-service.php).
 *
 * Everything is scoped under `body.smm-page` and prefixed `.smm-` so it can never
 * leak into the WooCommerce catalogue, Elementor pages or the FunnelKit checkout,
 * all of which share the document with these templates.
 *
 * Deliberately NOT here: dark-mode variants (the store is light-only), any styling
 * for countdowns / scarcity ribbons / live counters — those elements do not exist
 * in this section by policy, so there is nothing to style.
 *
 * RTL: the section is Hebrew-only, but every directional rule uses logical
 * properties (inline-start/end, text-align:start) so an LTR embed does not break.
 */

body.smm-page {
	--smm-g: #1f7a45;
	--smm-g-dark: #186236;
	--smm-g-soft: #f2f9f5;
	--smm-ink: #12203a;
	--smm-mut: #5d6d88;
	--smm-bg: #f4f6fa;
	--smm-card: #fff;
	--smm-line: #e4e8f0;
	--smm-line-2: #cfd7e4;
	--smm-warn: #8a6100;
	--smm-warn-bg: #fff8e6;
	--smm-warn-line: #f0dda6;
	--smm-rad: 14px;

	margin: 0;
	background: var(--smm-bg);
	color: var(--smm-ink);
	font: 16px/1.65 "Segoe UI", Rubik, Arial, sans-serif;
}

body.smm-page * { box-sizing: border-box; }
body.smm-page img { max-width: 100%; height: auto; display: block; }
body.smm-page a { color: inherit; text-decoration: none; }
body.smm-page a:focus-visible,
body.smm-page button:focus-visible,
body.smm-page input:focus-visible,
body.smm-page summary:focus-visible { outline: 3px solid #7fb79a; outline-offset: 2px; }

.smm-w { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.smm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ chrome -- */

.smm-flag {
	background: #3a2a00; color: #ffd85e; font-size: 12.5px; padding: 7px 12px; font-weight: 600;
	display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: center;
}
.smm-flag a {
	background: rgba(255, 216, 94, .14); border: 1px solid rgba(255, 216, 94, .3);
	border-radius: 999px; padding: 2px 10px; font-size: 11.5px; color: #ffd85e !important;
}
.smm-flag a.on { background: #ffd85e; color: #3a2a00 !important; }

.smm-head { background: #fff; border-bottom: 1px solid var(--smm-line); }
.smm-head__in { display: flex; align-items: center; gap: 14px; max-width: 1120px; margin: 0 auto; padding: 10px 16px; }
.smm-logo img { width: 124px; }
.smm-head__hl { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--smm-mut); white-space: nowrap; margin-inline-start: auto; }
.smm-head__hl svg { color: var(--smm-g); }

.smm-nav { background: linear-gradient(180deg, #23884e, #1b6d3e); box-shadow: 0 3px 12px rgba(16, 44, 28, .16); }
.smm-nav ul { display: flex; gap: 3px; list-style: none; margin: 0 auto; padding: 7px 16px; max-width: 1120px; flex-wrap: wrap; }
.smm-nav a { display: block; padding: 10px 14px; font-size: 15px; font-weight: 700; color: #fff !important; border-radius: 10px; white-space: nowrap; }
.smm-nav a:hover { background: rgba(255, 255, 255, .17); }
.smm-nav a.on { background: #fff; color: var(--smm-g) !important; }

.smm-crumb { font-size: 12.5px; color: var(--smm-mut); padding: 12px 0 0; }
.smm-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.smm-crumb li::after { content: "›"; margin-inline-start: 6px; color: var(--smm-line-2); }
.smm-crumb li:last-child::after { content: ""; }
.smm-crumb a:hover { color: var(--smm-g); }

/* -------------------------------------------------------------- hero -- */

.smm-hero { padding: 22px 0 4px; }
.smm-hero h1 { font-size: 30px; margin: 0 0 8px; font-weight: 800; line-height: 1.25; }
.smm-hero__lede { margin: 0 0 14px; max-width: 68ch; color: var(--smm-mut); font-size: 16.5px; }

.smm-assure { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.smm-assure li {
	display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--smm-line);
	border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600;
}
.smm-assure svg { color: var(--smm-g); flex: 0 0 auto; }

/* ---------------------------------------------------------- buy card -- */

.smm-buy {
	background: var(--smm-card); border: 1.5px solid var(--smm-line); border-radius: var(--smm-rad);
	padding: 18px 18px 20px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: start;
}
.smm-buy h2 { font-size: 19px; margin: 0 0 12px; font-weight: 800; }
.smm-buy__legend { font-size: 13.5px; color: var(--smm-mut); margin: 0 0 10px; }

.smm-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.smm-tier { position: relative; }
.smm-tier input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.smm-tier label {
	display: block; cursor: pointer; border: 1.5px solid var(--smm-line); border-radius: 11px;
	padding: 10px 12px; background: #fff; transition: border-color .12s, background .12s;
}
.smm-tier label:hover { border-color: var(--smm-line-2); }
.smm-tier input:checked + label { border-color: var(--smm-g); background: var(--smm-g-soft); box-shadow: 0 4px 14px rgba(31, 122, 69, .12); }
.smm-tier input:focus-visible + label { outline: 3px solid #7fb79a; outline-offset: 2px; }
.smm-tier__q { display: block; font-weight: 800; font-size: 15.5px; }
.smm-tier__p { display: block; font-size: 14px; color: var(--smm-g); font-weight: 700; margin-top: 2px; }
.smm-tier__u { display: block; font-size: 11.5px; color: var(--smm-mut); margin-top: 2px; }

.smm-field { margin: 0 0 12px; }
.smm-field label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 5px; }
.smm-field input[type="text"], .smm-field input[type="url"] {
	width: 100%; border: 1.5px solid var(--smm-line-2); border-radius: 10px; padding: 12px 13px;
	font: inherit; font-size: 15px; background: #fff; color: var(--smm-ink);
	direction: ltr; text-align: left;
}
.smm-field input:focus { border-color: var(--smm-g); }
.smm-field__hint { font-size: 12.5px; color: var(--smm-mut); margin: 6px 0 0; }
.smm-field__msg { font-size: 12.5px; margin: 6px 0 0; color: var(--smm-warn); font-weight: 600; }
.smm-field__msg[hidden] { display: none; }

/* AMENDMENT 4.3 — the target instructions around the field. The checklist and the accepted
   examples are always visible; the steps fold away for the buyer who already knows; the
   wrong-value list is hidden until something is actually refused (smm.js reveals it). */
.smm-req { margin: 10px 0 0; border: 1px solid var(--smm-line); border-radius: 10px; background: #f8fafc; padding: 9px 12px; }
.smm-req ul { margin: 4px 0 0; padding-inline-start: 18px; font-size: 12.5px; color: var(--smm-mut); }
.smm-req li { margin: 2px 0; }
.smm-req__head { font-size: 12.5px; font-weight: 700; margin: 10px 0 0; }
.smm-how { margin: 10px 0 0; border: 1px solid var(--smm-line); border-radius: 10px; background: #fff; padding: 9px 12px; }
.smm-how summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--smm-g); }
.smm-how ol { margin: 6px 0 0; padding-inline-start: 20px; font-size: 13px; }
.smm-how li { margin: 4px 0; }
.smm-ex { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.smm-ex li { font-size: 12.5px; }
.smm-ex code { display: inline-block; background: #f2f5f9; border: 1px solid var(--smm-line); border-radius: 6px; padding: 2px 6px; font-size: 12px; word-break: break-all; }
.smm-ex span { display: block; color: var(--smm-mut); margin-top: 2px; }
.smm-bad { margin: 10px 0 0; border: 1px solid #f0c9c9; background: #fdf2f2; border-radius: 10px; padding: 9px 12px; }
.smm-bad .smm-req__head { margin: 0; }
.smm-bad .smm-ex span { color: var(--smm-warn); }
.smm-bad[hidden] { display: none; }

.smm-sum {
	background: var(--smm-g-soft); border: 1px solid #d6e8dd; border-radius: 12px; padding: 16px;
	position: sticky; top: 12px;
}
.smm-sum dl { margin: 0 0 12px; display: grid; gap: 6px; }
.smm-sum dt { font-size: 13px; color: var(--smm-mut); }
.smm-sum dd { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; }
.smm-sum__total { font-size: 33px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.smm-sum__vat { font-size: 12.5px; color: var(--smm-mut); font-weight: 500; }
.smm-cta {
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
	background: var(--smm-g); color: #fff; border: 0; border-radius: 11px; padding: 14px 12px;
	font: inherit; font-weight: 800; font-size: 16.5px; cursor: pointer;
}
.smm-cta:hover { background: var(--smm-g-dark); }
.smm-cta[disabled] { background: #9db3a6; cursor: not-allowed; }
.smm-sum__note { font-size: 12px; color: var(--smm-mut); margin: 10px 0 0; text-align: center; }

.smm-empty {
	background: var(--smm-warn-bg); border: 1px solid var(--smm-warn-line); border-radius: var(--smm-rad);
	padding: 18px; color: var(--smm-warn); font-weight: 600;
}

/* ---------------------------------------------------------- sections -- */

.smm-sec { margin: 34px 0; }
.smm-sec > h2 { font-size: 24px; margin: 0 0 6px; font-weight: 800; line-height: 1.3; }
.smm-sec__sub { margin: 0 0 16px; color: var(--smm-mut); font-size: 14.5px; max-width: 70ch; }
.smm-prose { max-width: 72ch; }
.smm-prose p { margin: 0 0 12px; font-size: 15.5px; }
.smm-prose h3 { font-size: 17px; margin: 20px 0 6px; font-weight: 800; }
.smm-prose ul { margin: 0 0 12px; padding-inline-start: 20px; }
.smm-prose li { margin-bottom: 5px; }

.smm-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: smmstep; }
.smm-steps li { background: var(--smm-card); border: 1px solid var(--smm-line); border-radius: var(--smm-rad); padding: 18px 16px; }
.smm-steps h3 { margin: 0 0 5px; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.smm-steps h3::before {
	counter-increment: smmstep; content: counter(smmstep);
	background: var(--smm-g); color: #fff; width: 26px; height: 26px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto;
}
.smm-steps p { margin: 0; font-size: 14px; color: var(--smm-mut); }

/* price table — server-rendered, and the reason this section exists */
.smm-box { background: var(--smm-card); border: 1px solid var(--smm-line); border-radius: var(--smm-rad); overflow-x: auto; }
.smm-tbl { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.smm-tbl caption { text-align: start; padding: 14px 14px 0; font-size: 13px; color: var(--smm-mut); }
.smm-tbl th, .smm-tbl td { padding: 12px 14px; border-bottom: 1px solid var(--smm-line); text-align: start; }
.smm-tbl thead th { background: #f7f9fc; font-size: 13.5px; font-weight: 800; color: #33445f; }
.smm-tbl tbody tr:last-child th, .smm-tbl tbody tr:last-child td { border-bottom: 0; }
.smm-tbl tbody th { font-weight: 800; white-space: nowrap; }
.smm-tbl td.smm-price { font-weight: 800; color: var(--smm-g); white-space: nowrap; }
.smm-tbl td.smm-unit { color: var(--smm-mut); font-size: 13.5px; white-space: nowrap; }
.smm-tbl a { color: var(--smm-g); font-weight: 700; }
.smm-tbl a:hover { text-decoration: underline; }

/* platform / service cards */
.smm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.smm-card { background: var(--smm-card); border: 1.5px solid var(--smm-line); border-radius: var(--smm-rad); padding: 18px 16px; display: flex; flex-direction: column; }
.smm-card h3 { font-size: 17.5px; margin: 0 0 6px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.smm-card h3 svg { color: var(--smm-g); flex: 0 0 auto; }
.smm-card__who { font-size: 13.5px; color: var(--smm-mut); margin: 0 0 12px; }
.smm-card__from { font-size: 14px; font-weight: 700; color: var(--smm-g); margin: 0 0 12px; }
.smm-card ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; flex: 1; }
.smm-card li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14.5px; padding: 7px 10px; border-radius: 9px; background: #f7f9fc; }
.smm-card li a:hover { background: var(--smm-g-soft); color: var(--smm-g); }
.smm-card li span { font-size: 12.5px; color: var(--smm-mut); }
.smm-link {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	border: 1.5px solid var(--smm-g); color: var(--smm-g) !important; border-radius: 10px;
	padding: 10px 14px; font-weight: 800; font-size: 14.5px;
}
.smm-link:hover { background: var(--smm-g-soft); }

/* honest-note band — used for platform-terms disclosure and the public-account rule */
.smm-note {
	background: var(--smm-warn-bg); border: 1px solid var(--smm-warn-line); border-radius: var(--smm-rad);
	padding: 16px 18px; margin: 20px 0; font-size: 14.5px; color: #4a3a10;
}
.smm-note strong { color: var(--smm-warn); }
.smm-note p { margin: 0 0 8px; }
.smm-note p:last-child { margin: 0; }

/* trust — plain statements only, no counters and no ratings */
.smm-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.smm-trust li { background: var(--smm-card); border: 1px solid var(--smm-line); border-radius: var(--smm-rad); padding: 16px; }
.smm-trust b { display: flex; align-items: center; gap: 8px; font-size: 15.5px; margin-bottom: 5px; }
.smm-trust svg { color: var(--smm-g); flex: 0 0 auto; }
.smm-trust p { margin: 0; font-size: 14px; color: var(--smm-mut); }

/* faq */
.smm-faq { max-width: 860px; }
.smm-faq details { background: var(--smm-card); border: 1px solid var(--smm-line); border-radius: 12px; margin-bottom: 9px; }
.smm-faq summary { cursor: pointer; padding: 15px 17px; font-weight: 700; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.smm-faq summary::-webkit-details-marker { display: none; }
.smm-faq summary::after { content: "+"; color: var(--smm-g); font-size: 21px; font-weight: 700; }
.smm-faq details[open] summary { color: var(--smm-g); }
.smm-faq details[open] summary::after { content: "−"; }
.smm-faq p { margin: 0; padding: 0 17px 16px; font-size: 14.5px; color: #2c3a54; line-height: 1.7; }
.smm-faq a { color: var(--smm-g); text-decoration: underline; text-underline-offset: 3px; }

/* footer */
.smm-foot { background: #101f38; color: #c8d3e6; margin-top: 34px; padding: 24px 0 18px; font-size: 14px; }
.smm-foot p { margin: 0 0 12px; color: #93a3bf; font-size: 13.5px; max-width: 78ch; }
.smm-foot__l { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.smm-foot__l a { color: #c8d3e6 !important; font-size: 13.5px; }
.smm-foot__l a:hover { color: #fff !important; }
.smm-foot__b { border-top: 1px solid #24365a; padding-top: 12px; font-size: 12.5px; color: #8fa1bd; }

/* ------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
	.smm-buy { grid-template-columns: 1fr; gap: 16px; }
	.smm-sum { position: static; }
	.smm-hero h1 { font-size: 24px; }
	.smm-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.smm-nav ul::-webkit-scrollbar { display: none; }
	.smm-head__hl b { display: none; }
}

@media (max-width: 560px) {
	.smm-grid { grid-template-columns: 1fr; }
	.smm-tiers { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
	.smm-sec > h2 { font-size: 20px; }
	.smm-sum__total { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	body.smm-page * { transition: none !important; }
}