/*
 * TW Download — frontend styles.
 * Same TariffWolf colour coding as the original lead form:
 *   navy card (#0a1628 / #08111f), gold accent/button (#c9a84c),
 *   error orange (#ff5733), light text (#e6edf6).
 * Scoped under .twd-instance to avoid leaking into other content.
 */

.twd-instance.tw-dl-wrap,
.tw-dl-wrap.twd-instance { margin: 32px 0; }

.twd-instance .tw-dl-cta,
.twd-instance .tw-dl-thanks {
	padding: 22px 22px 18px;
	background: linear-gradient(180deg, #0a1628 0%, #08111f 100%);
	border: 1px solid rgba(201, 168, 76, 0.30);
	border-radius: 14px;
	box-shadow: 0 12px 40px -12px rgba(201, 168, 76, 0.18),
	            0 8px 28px -10px rgba(0, 0, 0, 0.45);
	color: #e6edf6;
	font-family: inherit;
}

.twd-instance .tw-dl-cta__head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .2px;
	color: #e6edf6;
	margin-bottom: 14px;
}

.twd-instance .tw-dl-cta__head i,
.twd-instance .tw-dl-cta__head .twd-icon-dl,
.twd-instance .twd-icon-check { color: #c9a84c; }

/* Icon INSIDE the gold button must be dark (navy), not gold, or it vanishes. */
.twd-instance .tw-dl-cta__btn i,
.twd-instance .tw-dl-cta__btn .twd-icon-dl { color: #0a1628; }

/* Inline fallback icons (in case Font Awesome isn't loaded by the theme). */
.twd-instance .fas.twd-icon-dl::before    { content: "\2B07"; font-family: inherit; }
.twd-instance .fas.twd-icon-check::before { content: "\2705"; font-family: inherit; }

.twd-instance .tw-dl-cta__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}

.twd-instance .tw-dl-cta__input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 13px 14px;
	font-size: 15px;
	font-family: inherit;
	color: #0a1628;
	background: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 10px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.twd-instance .tw-dl-cta__input::placeholder { color: #7e8aa0; }

.twd-instance .tw-dl-cta__input:focus {
	border-color: #c9a84c;
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.28);
}

.twd-instance .tw-dl-cta__input:invalid:not(:placeholder-shown) {
	border-color: #ff5733;
	box-shadow: 0 0 0 3px rgba(255, 87, 51, 0.18);
}

.twd-instance .tw-dl-cta__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	line-height: 1;
	color: #0a1628;
	background: #c9a84c;
	border: 1px solid #c9a84c;
	border-radius: 10px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, transform .08s ease;
	box-shadow: 0 6px 18px -8px rgba(201, 168, 76, 0.55);
}

.twd-instance .tw-dl-cta__btn:hover    { background: #d4b85a; }
.twd-instance .tw-dl-cta__btn:active   { transform: translateY(1px); }
.twd-instance .tw-dl-cta__btn:disabled { opacity: .7; cursor: wait; }

.twd-instance .tw-dl-cta__honey {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.twd-instance .tw-dl-cta__note {
	margin: 12px 2px 0;
	font-size: 12.5px;
	color: #b3becf;
}

.twd-instance .tw-dl-cta__error {
	margin: 12px 0 0;
	padding: 10px 12px;
	font-size: 13.5px;
	color: #ff7a55;
	background: rgba(255, 87, 51, 0.10);
	border: 1px solid rgba(255, 87, 51, 0.35);
	border-radius: 8px;
}

/* Thank-you stage */
.twd-instance .tw-dl-thanks .tw-dl-cta__head { margin-bottom: 0; }

@media (max-width: 640px) {
	.twd-instance .tw-dl-cta__form { flex-direction: column; }
	.twd-instance .tw-dl-cta__input,
	.twd-instance .tw-dl-cta__btn  { width: 100%; flex: 1 1 auto; }
	.twd-instance .tw-dl-cta__btn  { justify-content: center; }
}

/* JSON config block must never render. */
.twd-instance .twd-config { display: none !important; }