/* IOS DSPS System Configurator — Frontend Styles
   All rules scoped to .ios-dsps-wrap to avoid WordPress theme conflicts */

.ios-dsps-wrap {
	--ios-green:    #78b82a;
	--ios-green-d:  #5a8a1e;
	--ios-green-l:  #eef7e0;
	--ios-green-b:  #a8d56a;
	--ios-blue:     #1565c0;
	--ios-blue-l:   #e8f2fd;
	--ios-blue-b:   #90c2f5;
	--ios-teal:     #0f766e;
	--ios-teal-l:   #d1faf5;
	--ios-teal-b:   #5eead4;
	--ios-amber:    #b45309;
	--ios-amber-l:  #fef3c7;
	--ios-amber-b:  #f5c97a;
	--ios-purple:   #6d28d9;
	--ios-purple-l: #ede9fe;
	--ios-purple-b: #c4b5fd;
	--ios-g50:      #fafaf9;
	--ios-g100:     #f5f5f3;
	--ios-g200:     #e7e5e2;
	--ios-g300:     #d4d1cc;
	--ios-g400:     #a8a29e;
	--ios-g500:     #78716c;
	--ios-g600:     #57534e;
	--ios-g700:     #44403c;
	--ios-g900:     #1c1917;
	--ios-white:    #ffffff;
	--ios-shadow:   0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
	--ios-shadow-md:0 4px 12px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
	--ios-r:        8px;
	--ios-r-lg:     12px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	background:  var(--ios-g50);
	border-radius: var(--ios-r-lg);
	overflow: hidden;
	border: 1px solid var(--ios-g200);
	box-shadow: var(--ios-shadow-md);
	margin: 24px 0;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.ios-dsps-wrap .ios-dsps-hdr {
	background: var(--ios-white);
	border-bottom: 1px solid var(--ios-g200);
	padding: 14px 22px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.ios-dsps-wrap .ios-logo-mark {
	width: 40px;
	height: 40px;
	background: var(--ios-green);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: -.5px;
	flex-shrink: 0;
}

.ios-dsps-wrap .ios-hdr-text { flex: 1; min-width: 0; }

.ios-dsps-wrap .ios-dsps-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--ios-g900);
	line-height: 1.2;
}

.ios-dsps-wrap .ios-dsps-subtitle {
	font-size: 12px;
	color: var(--ios-g500);
	margin-top: 2px;
}

.ios-dsps-wrap .ios-hdr-restart {
	margin-left: auto;
	font-size: 12px;
	color: var(--ios-g500);
	background: none;
	border: 1px solid var(--ios-g200);
	padding: 5px 12px;
	border-radius: 6px;
	cursor: pointer;
	transition: border-color .15s, color .15s;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: inherit;
}
.ios-dsps-wrap .ios-hdr-restart:hover {
	border-color: var(--ios-g400);
	color: var(--ios-g900);
}

/* ── Inner body ─────────────────────────────────────────────────────────── */

#ios-flow-section,
#ios-results-section {
	padding: 24px 22px;
}

/* ── Progress ───────────────────────────────────────────────────────────── */

.ios-dsps-wrap .prog-dots {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 8px;
}

.ios-dsps-wrap .prog-dot {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--ios-g200);
	background: var(--ios-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--ios-g400);
	transition: background .25s, border-color .25s, color .25s;
	flex-shrink: 0;
}
.ios-dsps-wrap .prog-dot.active {
	border-color: var(--ios-green);
	color: var(--ios-green);
	background: var(--ios-green-l);
}
.ios-dsps-wrap .prog-dot.done {
	background: var(--ios-green);
	border-color: var(--ios-green);
	color: white;
}

.ios-dsps-wrap .prog-line {
	flex: 1;
	height: 2px;
	background: var(--ios-g200);
	border-radius: 1px;
	position: relative;
	overflow: hidden;
}
.ios-dsps-wrap .prog-line.done {
	background: var(--ios-green);
}

.ios-dsps-wrap .prog-label {
	font-size: 12px;
	color: var(--ios-g500);
	margin-top: 4px;
}

/* ── Step card ──────────────────────────────────────────────────────────── */

.ios-dsps-wrap .ios-step-card {
	background: var(--ios-white);
	border: 1px solid var(--ios-g200);
	border-radius: var(--ios-r-lg);
	padding: 24px;
	box-shadow: var(--ios-shadow);
	margin-top: 16px;
	animation: iosFadeUp .2s ease;
}

@keyframes iosFadeUp {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ios-dsps-wrap .step-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	color: var(--ios-green);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.ios-dsps-wrap .step-title {
	font-size: 19px;
	font-weight: 700;
	color: var(--ios-g900);
	line-height: 1.3;
	margin-bottom: 6px;
}

.ios-dsps-wrap .step-sub {
	font-size: 14px;
	color: var(--ios-g500);
	line-height: 1.55;
	margin-bottom: 20px;
}

/* ── Option grid ────────────────────────────────────────────────────────── */

.ios-dsps-wrap .opts-grid {
	display: grid;
	gap: 8px;
}
.ios-dsps-wrap .opts-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.ios-dsps-wrap .opts-grid.cols-1 { grid-template-columns: 1fr; }

.ios-dsps-wrap .ios-opt {
	border: 1.5px solid var(--ios-g200);
	border-radius: var(--ios-r);
	padding: 12px 14px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	background: var(--ios-white);
	user-select: none;
	position: relative;
}
.ios-dsps-wrap .ios-opt:hover {
	border-color: var(--ios-green-b);
	background: var(--ios-green-l);
}
.ios-dsps-wrap .ios-opt.sel {
	border-color: var(--ios-green);
	background: var(--ios-green-l);
}
.ios-dsps-wrap .ios-opt.sel::after {
	content: '✓';
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 13px;
	font-weight: 800;
	color: var(--ios-green);
}

.ios-dsps-wrap .opt-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--ios-g900);
	padding-right: 24px;
	margin-bottom: 3px;
}
.ios-dsps-wrap .opt-desc {
	font-size: 12px;
	color: var(--ios-g500);
	line-height: 1.4;
}
.ios-dsps-wrap .opt-product-link {
	display: inline-block;
	margin-top: 7px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ios-green-d);
	text-decoration: none;
	border-bottom: 1px solid var(--ios-green-b);
	transition: color .15s;
}
.ios-dsps-wrap .opt-product-link:hover {
	color: var(--ios-green);
	text-decoration: none;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */

#ios-step-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 18px;
}

.ios-dsps-wrap .ios-btn {
	padding: 10px 22px;
	border-radius: var(--ios-r);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
	border: none;
	font-family: inherit;
	line-height: 1;
}
.ios-dsps-wrap .ios-btn-back {
	background: none;
	border: 1.5px solid var(--ios-g200);
	color: var(--ios-g500);
}
.ios-dsps-wrap .ios-btn-back:hover {
	border-color: var(--ios-g400);
	color: var(--ios-g900);
}
.ios-dsps-wrap .ios-btn-next {
	background: var(--ios-green);
	color: white;
}
.ios-dsps-wrap .ios-btn-next:hover:not(:disabled) {
	background: var(--ios-green-d);
}
.ios-dsps-wrap .ios-btn-next:disabled {
	background: var(--ios-g200);
	color: var(--ios-g400);
	cursor: not-allowed;
}

.ios-dsps-wrap .ios-nav-hint {
	font-size: 12px;
	color: var(--ios-g400);
	text-align: center;
	flex: 1;
	padding: 0 10px;
}

/* ── Results ────────────────────────────────────────────────────────────── */

.ios-dsps-wrap .results-hdr {
	text-align: center;
	margin-bottom: 22px;
}
.ios-dsps-wrap .results-hdr h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--ios-g900);
	margin: 0 0 5px;
}
.ios-dsps-wrap .results-hdr p {
	font-size: 13px;
	color: var(--ios-g500);
	margin: 0;
}

.ios-dsps-wrap .start-note {
	background: var(--ios-blue-l);
	border-left: 3px solid var(--ios-blue);
	border-radius: 0 var(--ios-r) var(--ios-r) 0;
	padding: 11px 14px;
	font-size: 13px;
	color: var(--ios-g700);
	line-height: 1.65;
	margin-bottom: 16px;
}
.ios-dsps-wrap .start-note strong { color: var(--ios-g900); }

/* System recommendation cards */
.ios-dsps-wrap .sys-card {
	border-radius: var(--ios-r-lg);
	overflow: hidden;
	border: 1px solid var(--ios-g200);
	box-shadow: var(--ios-shadow);
	margin-bottom: 14px;
}
.ios-dsps-wrap .sys-card-head {
	padding: 14px 18px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.ios-dsps-wrap .sys-head-prom { background: var(--ios-teal-l); }
.ios-dsps-wrap .sys-head-dsps { background: var(--ios-blue-l); }

.ios-dsps-wrap .sys-badge {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .06em;
	padding: 3px 8px;
	border-radius: 3px;
	flex-shrink: 0;
	margin-top: 3px;
}
.ios-dsps-wrap .badge-primary   { background: var(--ios-green); color: white; }
.ios-dsps-wrap .badge-complement { background: var(--ios-amber-l); color: var(--ios-amber); border: 1px solid var(--ios-amber-b); }
.ios-dsps-wrap .badge-upgrade   { background: var(--ios-blue-l); color: var(--ios-blue); border: 1px solid var(--ios-blue-b); }

.ios-dsps-wrap .sys-head-text { flex: 1; min-width: 0; }
.ios-dsps-wrap .sys-name { font-size: 16px; font-weight: 700; color: var(--ios-g900); }
.ios-dsps-wrap .sys-sub  { font-size: 12px; color: var(--ios-g500); margin-top: 2px; }
.ios-dsps-wrap .sys-learn-more {
	display: inline-block;
	margin-top: 7px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ios-green-d);
	text-decoration: none;
	border-bottom: 1px solid var(--ios-green-b);
	transition: color .15s;
}
.ios-dsps-wrap .sys-learn-more:hover { color: var(--ios-green); text-decoration: none; }

.ios-dsps-wrap .sys-card-body {
	background: var(--ios-white);
	padding: 16px 18px;
	border-top: 1px solid var(--ios-g100);
}

.ios-dsps-wrap .sec-label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	color: var(--ios-g400);
	text-transform: uppercase;
	margin-bottom: 8px;
	margin-top: 14px;
}
.ios-dsps-wrap .sec-label:first-child { margin-top: 0; }

.ios-dsps-wrap .pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ios-dsps-wrap .pill {
	font-size: 12px;
	font-weight: 600;
	padding: 4px 11px;
	border-radius: 20px;
	border: 1.5px solid;
	text-decoration: none;
}
.ios-dsps-wrap .pill.pill-link {
	cursor: pointer;
	transition: opacity .15s;
}
.ios-dsps-wrap .pill.pill-link:hover { opacity: .8; }
.ios-dsps-wrap .pill .pill-ext { font-size: 10px; opacity: .7; }
.ios-dsps-wrap .pill-green  { background: var(--ios-green-l);  color: #3d6b0a;         border-color: var(--ios-green-b); }
.ios-dsps-wrap .pill-blue   { background: var(--ios-blue-l);   color: var(--ios-blue); border-color: var(--ios-blue-b); }
.ios-dsps-wrap .pill-amber  { background: var(--ios-amber-l);  color: var(--ios-amber);border-color: var(--ios-amber-b); }
.ios-dsps-wrap .pill-teal   { background: var(--ios-teal-l);   color: var(--ios-teal); border-color: var(--ios-teal-b); }
.ios-dsps-wrap .pill-purple { background: var(--ios-purple-l); color: var(--ios-purple);border-color: var(--ios-purple-b); }

.ios-dsps-wrap .reason {
	font-size: 13px;
	color: var(--ios-g600);
	line-height: 1.65;
	padding: 3px 0 3px 16px;
	position: relative;
}
.ios-dsps-wrap .reason::before {
	content: '·';
	position: absolute;
	left: 4px;
	color: var(--ios-green);
	font-size: 18px;
	line-height: 1.1;
}

/* Upgrade / SRS note cards */
.ios-dsps-wrap .upgrade-card {
	background: var(--ios-g50);
	border: 1px solid var(--ios-g200);
	border-radius: var(--ios-r-lg);
	padding: 14px 18px;
	margin-bottom: 12px;
}
.ios-dsps-wrap .upgrade-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--ios-g700);
	margin-bottom: 5px;
}
.ios-dsps-wrap .upgrade-card p {
	font-size: 13px;
	color: var(--ios-g500);
	line-height: 1.6;
	margin: 0;
}
.ios-dsps-wrap .upgrade-card strong { color: var(--ios-g700); }

/* Detail cards */
.ios-dsps-wrap .detail-card {
	background: var(--ios-white);
	border: 1px solid var(--ios-g200);
	border-radius: var(--ios-r-lg);
	padding: 16px 18px;
	margin-bottom: 12px;
	box-shadow: var(--ios-shadow);
}
.ios-dsps-wrap .detail-card-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--ios-g900);
	margin-bottom: 10px;
}
.ios-dsps-wrap .detail-item {
	font-size: 13px;
	color: var(--ios-g600);
	padding: 3px 0 3px 16px;
	position: relative;
	line-height: 1.55;
}
.ios-dsps-wrap .detail-item::before {
	content: '·';
	position: absolute;
	left: 4px;
	color: var(--ios-green);
	font-size: 18px;
	line-height: 1.1;
}
.ios-dsps-wrap .detail-item.detail-bold { color: var(--ios-g900); font-weight: 600; }
.ios-dsps-wrap .detail-item .sku {
	font-size: 11px;
	color: var(--ios-g400);
	font-family: monospace;
	margin-left: 4px;
}
.ios-dsps-wrap .detail-product-link {
	font-size: 11px;
	font-weight: 600;
	color: var(--ios-green-d);
	text-decoration: none;
	margin-left: 8px;
	border-bottom: 1px solid var(--ios-green-b);
	transition: color .15s;
}
.ios-dsps-wrap .detail-product-link:hover { color: var(--ios-green); text-decoration: none; }

/* CTA card */
.ios-dsps-wrap .cta-card {
	background: var(--ios-green-l);
	border: 1px solid var(--ios-green-b);
	border-radius: var(--ios-r-lg);
	padding: 22px;
	text-align: center;
	margin-top: 20px;
}
.ios-dsps-wrap .cta-card h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--ios-g900);
	margin: 0 0 5px;
}
.ios-dsps-wrap .cta-card p {
	font-size: 13px;
	color: var(--ios-g600);
	margin: 0 0 16px;
	line-height: 1.55;
}
.ios-dsps-wrap .cta-links {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.ios-dsps-wrap .cta-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--ios-green-d);
	text-decoration: none;
	padding: 8px 16px;
	border: 2px solid var(--ios-green);
	border-radius: var(--ios-r);
	transition: background .15s, color .15s;
	display: inline-block;
}
.ios-dsps-wrap .cta-link:hover {
	background: var(--ios-green);
	color: white;
	text-decoration: none;
}

.ios-dsps-wrap .ios-ghost-btn {
	display: block;
	margin: 18px auto 0;
	background: none;
	border: 1.5px solid var(--ios-g200);
	color: var(--ios-g500);
	padding: 9px 20px;
	border-radius: var(--ios-r);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: border-color .15s, color .15s;
}
.ios-dsps-wrap .ios-ghost-btn:hover {
	border-color: var(--ios-g400);
	color: var(--ios-g900);
}

/* Footer */
.ios-dsps-wrap .ios-dsps-foot {
	background: var(--ios-white);
	border-top: 1px solid var(--ios-g200);
	padding: 12px 22px;
	font-size: 11px;
	color: var(--ios-g400);
	text-align: center;
	line-height: 1.6;
}
.ios-dsps-wrap .ios-dsps-foot a {
	color: var(--ios-g500);
	text-decoration: none;
}
.ios-dsps-wrap .ios-dsps-foot a:hover { text-decoration: underline; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 540px) {
	.ios-dsps-wrap .opts-grid.cols-2 { grid-template-columns: 1fr; }
	.ios-dsps-wrap .ios-step-card   { padding: 18px; }
	#ios-flow-section, #ios-results-section { padding: 18px 14px; }
	.ios-dsps-wrap .ios-dsps-hdr   { padding: 12px 14px; }
	.ios-dsps-wrap .ios-dsps-title  { font-size: 13px; }
	.ios-dsps-wrap .ios-dsps-subtitle { display: none; }
}