/**
 * Iron Compound checkout — gold/black palette matching the protocols page.
 *
 * @package Iron_Compound
 */

.ic-checkout {
	--ic-bg: #000000;
	--ic-bg-panel: #0a0a0a;
	--ic-bg-card: #141414;
	--ic-gold: #D4AF37;
	--ic-gold-soft: rgba(212, 175, 55, 0.18);
	--ic-gold-line: rgba(212, 175, 55, 0.32);
	--ic-gold-line-strong: rgba(212, 175, 55, 0.6);
	--ic-gold-hover: #E5C158;
	--ic-text: #f5f5f5;
	--ic-text-muted: #9a9a9a;
	--ic-text-dim: #6b6b6b;
	--ic-radius: 14px;
	--ic-radius-sm: 8px;
	--ic-error: #f8a3a3;
	--ic-error-bg: rgba(220, 38, 38, 0.12);

	background: var(--ic-bg);
	color: var(--ic-text);
	font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	min-height: 100vh;
	padding: 60px 24px 80px;
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 36px;
	max-width: 1280px;
	margin: 0 auto;
	box-sizing: border-box;
}

.ic-checkout *,
.ic-checkout *::before,
.ic-checkout *::after {
	box-sizing: border-box;
}

/* Theme reset within scope */
.ic-checkout article,
.ic-checkout section,
.ic-checkout header,
.ic-checkout aside,
.ic-checkout main,
.ic-checkout button,
.ic-checkout form {
	background: transparent;
	color: inherit;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	box-shadow: none;
}

.ic-checkout h1,
.ic-checkout h2,
.ic-checkout h3,
.ic-checkout h4,
.ic-checkout p,
.ic-checkout label,
.ic-checkout span,
.ic-checkout dt,
.ic-checkout dd,
.ic-checkout dl {
	color: inherit;
	margin: 0;
	padding: 0;
	background: transparent;
}

.ic-checkout a {
	color: var(--ic-gold);
	text-decoration: none;
}

.ic-checkout a:hover { color: var(--ic-gold-hover); }

.ic-checkout button { font-family: inherit; cursor: pointer; }

/* =========================================================
   Empty state (no package picked)
   ========================================================= */

.ic-checkout--empty {
	grid-template-columns: 1fr;
	max-width: 640px;
	text-align: center;
	padding: 100px 24px;
}

.ic-checkout--empty .ic-checkout__panel {
	background: var(--ic-bg-card) !important;
	border: 1px solid var(--ic-gold-line) !important;
	border-radius: var(--ic-radius);
	padding: 50px 36px;
}

.ic-checkout--empty .ic-checkout__title {
	font-size: 1.6rem;
	color: var(--ic-gold) !important;
	margin: 0 0 12px;
}

.ic-checkout--empty .ic-checkout__lede {
	color: var(--ic-text-muted) !important;
	margin: 0 0 24px;
}

/* =========================================================
   Order summary sidebar
   ========================================================= */

.ic-checkout__summary {
	position: sticky;
	top: 40px;
	align-self: start;
}

.ic-summary-card {
	background: var(--ic-bg-card) !important;
	border: 1px solid var(--ic-gold-line) !important;
	border-radius: var(--ic-radius);
	padding: 26px 26px 22px;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
}

.ic-summary-card__kicker {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ic-gold) !important;
	margin-bottom: 8px;
	font-weight: 700;
}

.ic-summary-card__title {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--ic-text) !important;
	letter-spacing: 0.01em;
	margin: 0 0 18px !important;
	line-height: 1.25;
}

.ic-summary-card__rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 18px;
	border-bottom: 1px dashed rgba(212, 175, 55, 0.25);
	margin: 0 0 16px;
}

.ic-summary-card__rows > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ic-summary-card__rows dt {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ic-text-dim) !important;
	font-weight: 600;
}

.ic-summary-card__rows dd {
	color: var(--ic-text) !important;
	font-size: 0.94rem;
	font-weight: 500;
}

.ic-summary-card__breakdown {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 0 14px;
	margin: 0 0 12px;
	border-bottom: 1px dashed rgba(212, 175, 55, 0.25);
}

.ic-summary-card__breakdown > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.ic-summary-card__breakdown dt {
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--ic-text-muted) !important;
	font-weight: 500;
}

.ic-summary-card__breakdown dd {
	font-size: 0.95rem;
	color: var(--ic-text) !important;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ic-summary-card__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 14px;
}

.ic-summary-card__total-label {
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ic-text-muted) !important;
	font-weight: 600;
}

.ic-summary-card__total-value {
	font-size: 1.55rem;
	font-weight: 700;
	color: var(--ic-gold) !important;
	letter-spacing: 0.02em;
}

.ic-summary-card__edit {
	display: inline-block;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ic-text-muted) !important;
	border-top: 1px solid rgba(212, 175, 55, 0.18);
	padding-top: 14px;
	width: 100%;
	transition: color 0.2s ease;
}

.ic-summary-card__edit:hover {
	color: var(--ic-gold) !important;
}

/* =========================================================
   Main column / steps
   ========================================================= */

.ic-checkout__main {
	min-width: 0;
}

.ic-step {
	background: var(--ic-bg-panel) !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-radius: var(--ic-radius);
	padding: 32px 32px 28px;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

.ic-step[hidden] { display: none !important; }

.ic-step__head {
	margin-bottom: 26px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.ic-step__count {
	display: inline-block;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ic-gold) !important;
	font-weight: 700;
	margin-bottom: 8px;
}

.ic-step__title {
	font-size: 1.55rem;
	font-weight: 600;
	color: var(--ic-text) !important;
	letter-spacing: 0.01em;
	margin: 0 0 6px !important;
	line-height: 1.2;
}

.ic-step__intro {
	color: var(--ic-text-muted) !important;
	margin: 0 !important;
	font-size: 0.94rem;
}

.ic-step__actions {
	display: flex;
	gap: 14px;
	justify-content: space-between;
	align-items: center;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid rgba(212, 175, 55, 0.16);
}

.ic-step__footnote {
	margin: 18px 0 0 !important;
	text-align: center;
	color: var(--ic-text-dim) !important;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}

/* =========================================================
   Fieldsets / form layout
   ========================================================= */

.ic-fieldset {
	margin-bottom: 26px;
}

.ic-fieldset:last-of-type { margin-bottom: 0; }

.ic-fieldset__title {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ic-gold) !important;
	margin: 0 0 14px !important;
	padding-bottom: 10px;
	border-bottom: 1px dashed rgba(212, 175, 55, 0.2);
}

.ic-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.ic-grid + .ic-grid {
	margin-top: 14px;
}

.ic-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ic-grid--3 { grid-template-columns: 2fr 1fr 1fr; }

.ic-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ic-label {
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ic-text-muted) !important;
	font-weight: 600;
}

.ic-input {
	background: #0d0d0d !important;
	border: 1px solid rgba(212, 175, 55, 0.22) !important;
	color: var(--ic-text) !important;
	padding: 12px 14px !important;
	border-radius: var(--ic-radius-sm) !important;
	font-size: 0.95rem;
	font-family: inherit;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	outline: 0;
	margin: 0;
}

textarea.ic-input {
	min-height: 88px;
	resize: vertical;
	line-height: 1.45;
}

select.ic-input {
	background-image: linear-gradient(45deg, transparent 50%, var(--ic-gold) 50%),
	                  linear-gradient(135deg, var(--ic-gold) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 36px !important;
}

.ic-input:hover:not(:disabled) {
	border-color: var(--ic-gold-line-strong) !important;
	background: #111 !important;
}

.ic-input:focus {
	border-color: var(--ic-gold) !important;
	background: #111 !important;
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18) !important;
}

.ic-input:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.ic-input::placeholder {
	color: var(--ic-text-dim);
}

.ic-field__help {
	margin: 6px 2px 0 !important;
	color: var(--ic-text-dim) !important;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
}

/* =========================================================
   Buttons
   ========================================================= */

.ic-checkout .ic-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px !important;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 4px !important;
	border: 1px solid transparent !important;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
	text-decoration: none !important;
	line-height: 1;
	min-height: 0;
	height: auto;
	width: auto;
}

.ic-checkout .ic-btn--primary {
	background: var(--ic-gold) !important;
	color: #0a0a0a !important;
	border: 1px solid var(--ic-gold) !important;
	box-shadow: 0 8px 20px rgba(212, 175, 55, 0.25) !important;
}

.ic-checkout .ic-btn--primary:hover {
	background: var(--ic-gold-hover) !important;
	border-color: var(--ic-gold-hover) !important;
	color: #0a0a0a !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(212, 175, 55, 0.4) !important;
}

.ic-checkout .ic-btn--ghost {
	background: transparent !important;
	color: var(--ic-text) !important;
	border: 1px solid var(--ic-gold) !important;
}

.ic-checkout .ic-btn--ghost:hover {
	background: var(--ic-gold) !important;
	color: #0a0a0a !important;
	transform: translateY(-1px);
}

.ic-checkout .ic-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* =========================================================
   Errors
   ========================================================= */

.ic-checkout__error {
	color: var(--ic-error) !important;
	background: var(--ic-error-bg);
	border: 1px solid rgba(220, 38, 38, 0.35);
	border-radius: var(--ic-radius-sm);
	padding: 10px 14px !important;
	margin: 0 0 16px !important;
	font-size: 0.88rem;
}

/* =========================================================
   GoHighLevel iframe checkout
   ========================================================= */

.ic-ghl-checkout {
	background: var(--ic-bg-panel) !important;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--ic-radius);
	padding: 24px 24px 18px;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

.ic-ghl-checkout__head {
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.ic-ghl-checkout__title {
	font-size: 1.4rem !important;
	font-weight: 600;
	color: var(--ic-text) !important;
	letter-spacing: 0.01em;
	margin: 0 0 6px !important;
}

.ic-ghl-checkout__intro {
	color: var(--ic-text-muted) !important;
	margin: 0 !important;
	font-size: 0.92rem;
}

.ic-ghl-checkout__frame-wrap {
	background: #ffffff;
	border-radius: var(--ic-radius-sm);
	overflow: visible;
}

.ic-ghl-checkout__frame {
	display: block;
	width: 100%;
	/* Reasonable starting height. form_embed.js resizes us to the form's
	   true content height once it loads (we now use the canonical embed URL,
	   not preview, so this works). Scrolling stays enabled so the submit
	   button at the bottom is reachable even if resize messages don't fire. */
	height: 1200px;
	border: 0;
	background: #ffffff;
}

@media (max-width: 640px) {
	.ic-ghl-checkout { padding: 18px 14px 14px; }
	.ic-ghl-checkout__frame { height: 1500px; }
}

/* =========================================================
   Stripe payment element
   ========================================================= */

.ic-payment-element {
	background: #0d0d0d;
	border: 1px solid rgba(212, 175, 55, 0.22);
	border-radius: var(--ic-radius-sm);
	padding: 20px 18px;
	min-height: 120px;
	margin-top: 14px;
}

/* =========================================================
   Authorize.net (Accept.js) card form
   ========================================================= */

.ic-checkout .ic-authnet-card {
	background: #0d0d0d;
	border: 1px solid rgba(212, 175, 55, 0.22);
	border-radius: var(--ic-radius-sm);
	padding: 22px 20px;
	margin-top: 14px;
}

.ic-checkout .ic-authnet-card .ic-fieldset {
	margin: 0;
}

.ic-checkout .ic-authnet-card .ic-fieldset__title {
	margin-top: 0 !important;
}

.ic-checkout .ic-authnet-card input[type="text"] {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 980px) {
	.ic-checkout {
		grid-template-columns: 1fr;
		padding: 36px 18px 60px;
	}

	.ic-checkout__summary {
		position: static;
	}
}

@media (max-width: 640px) {
	.ic-step { padding: 24px 20px 22px; }
	.ic-grid--2,
	.ic-grid--3 { grid-template-columns: 1fr; }
	.ic-step__actions { flex-direction: column-reverse; align-items: stretch; }
	.ic-checkout .ic-btn { width: 100%; }
}