/* Override host-theme spacing on pages where the shortcode lives.
 * The iptv-starter-theme (and many others) hardcodes huge padding-top and
 * a narrow max-width on .site-main / .container. Both are inline styles
 * so we need !important to override.
 */
body.ispc-has-checkout .site-main{padding-top:24px !important;padding-bottom:32px !important}
body.ispc-has-checkout .site-main > .container,
body.ispc-has-checkout .container{max-width:1200px !important;width:100% !important}
body.ispc-has-checkout .entry-content{margin-top:8px !important}
body.ispc-has-checkout article > h1{font-size:28px;margin:0 0 16px}

/* Hide footer (and common pre-footer widgets) on checkout pages. */
body.ispc-has-checkout .site-footer,
body.ispc-has-checkout #colophon,
body.ispc-has-checkout footer.site-footer,
body.ispc-has-checkout .footer-widgets,
body.ispc-has-checkout .pre-footer,
body.ispc-has-checkout .back-to-top{display:none !important}

/* ──────── Wizard layout (3-step checkout) ──────── */
.ispc-wizard{
	max-width:640px;margin:0 auto;padding:24px 16px;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#0a1f44;
}

/* Progress indicator at the top */
.ispc-progress{
	display:flex;align-items:center;justify-content:center;gap:8px;
	margin:0 auto 28px;flex-wrap:wrap;
}
.ispc-progress-step{
	display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;
	color:#94a3b8;transition:color .2s;
}
.ispc-progress-step.is-active{color:#0a1f44;font-weight:700}
.ispc-progress-step.is-done{color:#0a7c2a}
.ispc-progress-num{
	display:inline-flex;align-items:center;justify-content:center;
	width:26px;height:26px;border-radius:50%;
	background:#e5e7eb;color:#64748b;font-size:12px;font-weight:700;
	transition:background .2s,color .2s;
}
.ispc-progress-step.is-active .ispc-progress-num{background:#0a1f44;color:#fff}
.ispc-progress-step.is-done .ispc-progress-num{background:#0a7c2a;color:#fff}
.ispc-progress-line{flex:1;height:2px;background:#e5e7eb;max-width:48px}

/* Step section */
.ispc-step{display:none}
.ispc-step.is-active{display:block;animation:ispc-fade-in .25s ease-out}
@keyframes ispc-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ispc-step-title{font-size:22px;font-weight:700;margin:0 0 6px;color:#0a1f44;letter-spacing:-.3px}
.ispc-step-sub{font-size:14px;color:#64748b;margin:0 0 22px}

/* Step navigation buttons */
.ispc-step-nav{
	display:flex;justify-content:space-between;align-items:center;
	margin-top:24px;gap:12px;
}
.ispc-btn-next{
	background:#0a1f44;color:#fff;border:0;border-radius:8px;
	padding:12px 22px;font-size:14px;font-weight:600;cursor:pointer;
	transition:background .15s;
}
.ispc-btn-next:hover{background:#1c3160}
.ispc-btn-back{
	background:transparent;color:#64748b;border:0;
	padding:12px 0;font-size:14px;font-weight:500;cursor:pointer;
}
.ispc-btn-back:hover{color:#0a1f44}

/* "Save my info" button (no-JS fallback). Hidden by JS when the live
 * tracker can do it automatically. */
.ispc-save-btn{
	margin-top:14px;width:100%;background:#0a1f44;color:#fff;border:0;
	border-radius:8px;padding:12px 16px;font-size:14px;font-weight:600;
	cursor:pointer;transition:background .15s;
}
.ispc-save-btn:hover{background:#1c3160}
/* Hide save button when JS is running (we track on input automatically). */
html.has-js .ispc-save-btn{display:none}

/* ──────── Two-column checkout layout ──────── */
.ispc-checkout{
	display:grid;grid-template-columns:1fr 1fr;gap:32px;
	max-width:1140px;margin:0 auto;padding:24px;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#0a1f44;
	align-items:start;
}
@media (max-width:880px){
	.ispc-checkout{grid-template-columns:1fr;gap:24px;padding:16px}
}

.ispc-checkout h2{
	font-size:24px;font-weight:700;margin:0 0 18px;color:#0a1f44;letter-spacing:-.3px;
}

/* ---------- Billing column ---------- */
.ispc-billing .ispc-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ispc-field{display:block;margin-bottom:14px}
.ispc-field>span{display:block;margin-bottom:6px;font-size:13px;font-weight:500}
.ispc-field>span em{font-style:normal;color:#6b7280;font-weight:400}
.ispc-field>span .ispc-req{color:#e11d48;margin-left:2px}
.ispc-field input,.ispc-field textarea,.ispc-field select{
	width:100%;border:1px solid #d1d5db;background:#fff;border-radius:8px;
	padding:11px 14px;font-size:14px;font-family:inherit;color:#0a1f44;
	box-sizing:border-box;transition:border-color .15s,box-shadow .15s;
}
.ispc-field select{
	appearance:none;-webkit-appearance:none;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;
}
.ispc-field input:focus,.ispc-field textarea:focus,.ispc-field select:focus{
	outline:0;border-color:#0a1f44;box-shadow:0 0 0 3px rgba(10,31,68,.08);
}
.ispc-field textarea{resize:vertical;min-height:60px}

/* Email field needs attention — soft yellow ring while user hovers iframe */
.ispc-field input.ispc-attn{
	border-color:#f59e0b;
	box-shadow:0 0 0 3px rgba(245,158,11,.18);
}

/* Email field is empty/invalid AND user clicked iframe → red shake */
.ispc-field input.ispc-invalid{
	border-color:#e11d48 !important;
	box-shadow:0 0 0 3px rgba(225,29,72,.18) !important;
	animation:ispc-shake .35s ease-in-out;
}
@keyframes ispc-shake{
	0%,100%{transform:translateX(0)}
	20%{transform:translateX(-6px)}
	40%{transform:translateX(6px)}
	60%{transform:translateX(-4px)}
	80%{transform:translateX(4px)}
}

/* ---------- Order column ---------- */
.ispc-order{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px}

.ispc-order-card{
	background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:18px 20px;
}
.ispc-order-row{
	display:flex;justify-content:space-between;align-items:baseline;
	padding:10px 0;border-bottom:1px solid #e5e7eb;font-size:14px;
}
.ispc-order-row.ispc-order-head{
	font-size:11px;font-weight:700;letter-spacing:.5px;color:#64748b;
	padding-top:0;padding-bottom:8px;text-transform:uppercase;
}
.ispc-order-item{color:#475569}
.ispc-order-item .ispc-x{font-size:12px;color:#94a3b8;margin-left:2px}
.ispc-order-item span:last-child{color:#0f172a;font-weight:500}
.ispc-total{
	font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.5px;
	border-bottom:0;padding:14px 0 4px;color:#0a1f44;
}
.ispc-total span:last-child{font-size:18px}

/* Stripe iframe lives in its own clean card. */
.ispc-pay-card{
	background:#fff;border:1px solid #e5e7eb;border-radius:10px;
	padding:6px;overflow:hidden;
}
.ispc-frame-wrap{min-height:120px}
.ispc-frame{
	display:block;width:100%;border:0;background:transparent;
	transition:height .25s cubic-bezier(.2,.8,.2,1);
}

/* Status / error / success messages under the iframe. */
.ispc-msg{font-size:12px;margin-top:6px;min-height:16px;text-align:center}
.ispc-msg.ok{color:#0a7c2a}
.ispc-msg.err{color:#e11d48}
.ispc-error{
	padding:12px 16px;margin:8px;border:1px solid #fcc;background:#fff5f5;
	border-radius:8px;color:#991b1b;font-size:13px;
}