/* ==========================================================================
   Polyshield Protection page: Protection Configurator widget + small helpers
   Helper classes are set under Advanced > CSS Classes in Elementor:
     ps-clip        clipped top-right corner (logo angle)
     ps-threats     "What it stops" grid lines
     ps-pills       icon list shown as outlined pills
     ps-faq         FAQ toggle styling
     ps-num-small   heading whose <small> part is a smaller unit label
   ========================================================================== */

.ps-shrink { min-width: 0; flex: 1 1 320px !important; }
.ps-clip { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }

/* ---------- What it stops: grid lines ---------- */
.ps-threats > .elementor-element { border-bottom: 1px solid #D6D7D4; }
@media (min-width: 861px) {
	.ps-threats > .elementor-element:not(:nth-child(3n+1)) { border-left: 1px solid #D6D7D4; }
}
@media (min-width: 541px) and (max-width: 860px) {
	.ps-threats > .elementor-element:nth-child(even) { border-left: 1px solid #D6D7D4; }
}

/* ---------- Pills ---------- */
.ps-pills .elementor-icon-list-items { gap: 8px; }
.ps-pills .elementor-icon-list-item {
	border: 1px solid #C9CBC8; border-radius: 999px; padding: 6px 14px !important; margin: 0 !important;
}
.ps-pills .elementor-icon-list-item::after { display: none !important; }

/* ---------- FAQ ---------- */
.ps-faq .elementor-toggle-item { border-bottom: 1px solid #D6D7D4; }
.ps-faq .elementor-toggle-item:first-child { border-top: 1px solid #D6D7D4; }
.ps-faq .elementor-tab-title { border: 0 !important; padding: 20px 40px 20px 0 !important; position: relative; }
.ps-faq .elementor-tab-content { border: 0 !important; padding: 0 0 22px !important; max-width: 64ch; }
.ps-faq .elementor-toggle-icon { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.ps-faq .elementor-tab-content p { margin: 0; }
.ps-faq .elementor-tab-content p + p { margin-top: .7em; }
.ps-faq .elementor-tab-content strong { color: #050505; }
.ps-faq .elementor-tab-content a { color: #35506E; text-decoration: underline; }

.ps-num-small .elementor-heading-title small { font-size: .32em; letter-spacing: 0; margin-left: 8px; font-weight: 500; opacity: .7; }

/* ==========================================================================
   Protection Configurator widget
   ========================================================================== */
.ps-cfg {
	display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: start;
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; color: #E7E8E6;
}
@media (min-width: 981px) {
	.ps-cfg-stage-wrap { position: sticky; top: 96px; }
	body.admin-bar .ps-cfg-stage-wrap { top: 128px; }
}
@media (max-width: 980px) { .ps-cfg { grid-template-columns: 1fr; } }

.ps-cfg-stage {
	background: radial-gradient(ellipse at 50% 58%, #34373C 0%, #1C1D20 48%, #0D0D0F 100%);
	border: 1px solid #292B2F; border-radius: 8px; position: relative; overflow: hidden;
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.ps-cfg-car { display: block; width: 100%; height: auto; }
.ps-cfg-car path { transition: opacity .35s cubic-bezier(.22,.68,0,1); }
.ps-cfg-stage-top {
	position: absolute; left: 18px; right: 18px; top: 16px; z-index: 2;
	display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	font: 500 11px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #7D828A;
}
.ps-cfg-legend { display: flex; gap: 16px; }
.ps-cfg-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border: 1.5px solid #82A8CC; }
.ps-cfg-legend i.no { border-color: #55595F; }
.ps-cfg-stage-foot { padding: 14px 18px; border-top: 1px solid #292B2F; background: rgba(5,5,5,.5); font-size: 12px; color: #7D828A; }

.ps-cfg-panel { display: grid; gap: 22px; }
.ps-cfg-step {
	display: block; margin-bottom: 10px;
	font: 500 11px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #7D828A;
}
.ps-cfg-pkgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ps-cfg .ps-cfg-pkg {
	text-align: left; display: grid; gap: 6px; cursor: pointer; white-space: normal;
	background: #1C1D20; border: 1px solid #292B2F; color: #E7E8E6; border-radius: 8px; padding: 14px 14px 12px;
	font-family: inherit; transition: border-color .2s, background .2s;
}
.ps-cfg .ps-cfg-pkg:hover, .ps-cfg .ps-cfg-pkg:focus { border-color: #4A4E55; background: #1C1D20; color: #E7E8E6; }
.ps-cfg-pkg b { font: 600 16px/1.2 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; color: #FFFFFF; }
.ps-cfg .ps-cfg-pkg[aria-pressed="true"] { border-color: #82A8CC; background: #1D242C; }
.ps-cfg-tag {
	justify-self: start; padding: 3px 8px; border-radius: 999px; border: 1px solid #3A3D42; color: #A7ABB1;
	font: 500 10px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase;
}
.ps-cfg-tag.is-diy { border-color: #82A8CC; color: #82A8CC; }
.ps-cfg-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-cfg .ps-cfg-seg button {
	font: 400 14px/1.3 'Inter', 'Helvetica Neue', Arial, sans-serif; padding: 9px 16px; border-radius: 999px;
	border: 1px solid #292B2F; background: transparent; color: #C9CCD0; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.ps-cfg .ps-cfg-seg button:hover, .ps-cfg .ps-cfg-seg button:focus { border-color: #4A4E55; background: transparent; color: #FFFFFF; }
.ps-cfg .ps-cfg-seg button[aria-pressed="true"] { background: #FFFFFF; color: #050505; border-color: #FFFFFF; }

.ps-cfg-info { background: #1C1D20; border: 1px solid #292B2F; border-radius: 8px; padding: 22px; display: grid; gap: 14px; }
.ps-cfg .ps-cfg-title { margin: 0; font: 600 24px/1.15 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.01em; color: #FFFFFF; }
.ps-cfg-desc { margin: 0; color: #B4B8BD; font-size: 15px; line-height: 1.55; }
.ps-cfg-facts { margin: 0; border-top: 1px solid #292B2F; }
.ps-cfg-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #292B2F; font-size: 14px; line-height: 1.45; }
.ps-cfg-facts dt { color: #7D828A; font-weight: 400; }
.ps-cfg-facts dd { margin: 0; color: #FFFFFF; text-align: right; font-weight: 500; }
.ps-cfg-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.ps-cfg-btn {
	display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 4px; text-decoration: none !important;
	font: 600 14px/1.3 'Inter', 'Helvetica Neue', Arial, sans-serif; border: 1px solid transparent; transition: background .2s, border-color .2s;
}
.ps-cfg-btn.is-primary { background: #FFFFFF; color: #050505 !important; }
.ps-cfg-btn.is-primary:hover { background: #E7E8E6; }
.ps-cfg-btn.is-ghost { border-color: rgba(255,255,255,.28); color: #FFFFFF !important; }
.ps-cfg-btn.is-ghost:hover { border-color: #FFFFFF; }
.ps-cfg-arr { width: 10px; height: 10px; background: currentColor; clip-path: polygon(0 0,100% 50%,0 100%,0 62%,48% 50%,0 38%); transition: transform .2s; }
.ps-cfg-btn:hover .ps-cfg-arr { transform: translateX(3px); }
.ps-cfg-warn { margin: 0; display: flex; gap: 10px; font-size: 13px; line-height: 1.5; color: #C9CCD0; }
.ps-cfg-warn::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 6px; background: #E0895F; clip-path: polygon(0 0,100% 0,0 100%); }
.ps-cfg button:focus-visible, .ps-cfg a:focus-visible { outline: 2px solid #82A8CC; outline-offset: 3px; }

@media (max-width: 600px) {
	.ps-cfg-stage-top { position: static; padding: 14px 16px 0; font-size: 10px; }
}
@media (max-width: 480px) {
	.ps-cfg-stage-top { font-size: 10px; }
	.ps-cfg-legend { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ps-cfg-car path { transition: none; } }

/* Covered panels: translucent shade so the body shows through */
.ps-cfg-cover path { fill: #82A8CC; fill-opacity: .3; }
.ps-cfg-legend i:not(.no) { background: rgba(130,168,204,.3); }