/* ==========================================================================
   Fintech Week — Cards generator
   Scoped to #ftw-cards. Inherits palette/type from style.css (:root vars).
   ========================================================================== */

.ftw-cards {
	max-width: var(--ftw-maxw);
	margin: 0 auto;
	padding: 140px 24px 96px;
}

/* ---------- Intro ---------- */
.ftw-cards__intro { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.ftw-cards__eyebrow {
	color: var(--ftw-accent);
	font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
	margin: 0 0 12px;
}
.ftw-cards__title { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; margin: 0 0 16px; }
.ftw-cards__lede { color: var(--ftw-muted); font-size: 17px; margin: 0; }

/* ---------- Step indicator ---------- */
.ftw-steps {
	list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
	gap: 12px; margin: 0 auto 44px; padding: 0; max-width: 640px;
}
.ftw-steps__item {
	display: flex; align-items: center; gap: 9px;
	color: var(--ftw-muted); font-size: 13px; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase;
}
.ftw-steps__item span {
	display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
	background: rgba(255,255,255,.08); color: #fff; font-size: 13px;
}
.ftw-steps__item.is-current { color: #fff; }
.ftw-steps__item.is-current span { background: var(--ftw-accent); color: #2a2150; }
.ftw-steps__item.is-done span { background: rgba(244,183,64,.25); color: var(--ftw-accent); }

/* ---------- Steps ---------- */
.ftw-step { display: none; }
.ftw-step.is-active { display: block; animation: ftw-fade .28s ease; }
@keyframes ftw-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ftw-step__heading { font-size: clamp(24px, 3vw, 32px); text-align: center; margin: 0 0 8px; }
.ftw-step__sub { color: var(--ftw-muted); text-align: center; margin: 0 0 32px; }

.ftw-step__bar { max-width: 900px; margin: 0 auto 18px; }
.ftw-back {
	display: inline-flex; align-items: center; gap: 7px;
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
	color: var(--ftw-muted); font: inherit; font-weight: 600; font-size: 14px;
	cursor: pointer; padding: 8px 16px; border-radius: 999px;
	transition: border-color .18s, color .18s, background .18s;
}
.ftw-back:hover { color: #fff; border-color: var(--ftw-accent); background: rgba(244,183,64,.1); }
.ftw-back span { font-size: 15px; }

/* ---------- Choice grid ---------- */
.ftw-choices {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px; max-width: 900px; margin: 0 auto;
}
.ftw-choice {
	position: relative; text-align: left; cursor: pointer;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
	padding: 26px 24px; color: #fff; font: inherit;
	transition: border-color .18s, background .18s, transform .18s;
	display: flex; flex-direction: column; gap: 8px;
}
.ftw-choice:hover, .ftw-choice:focus-visible {
	border-color: var(--ftw-accent); background: rgba(244,183,64,.08);
	transform: translateY(-2px); outline: none;
}
.ftw-choice.is-selected { border-color: var(--ftw-accent); background: rgba(244,183,64,.12); }
.ftw-choice__label { font-size: 20px; font-weight: 700; }
.ftw-choice__desc { color: var(--ftw-muted); font-size: 14px; }
.ftw-choice__soon {
	position: absolute; top: 14px; right: 14px;
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ftw-accent); background: rgba(244,183,64,.14);
	padding: 4px 9px; border-radius: 999px;
}
.ftw-choice.is-disabled { cursor: not-allowed; opacity: .55; }
.ftw-choice.is-disabled:hover { transform: none; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); }

/* ---------- Summit tiles (with representative photo) ---------- */
.ftw-choices--summits { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ftw-choice--summit { padding: 0; overflow: hidden; gap: 0; }
.ftw-choice__thumb { display: block; aspect-ratio: 1 / 1; background: rgba(255,255,255,.04); }
.ftw-choice__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.ftw-choice--summit:hover .ftw-choice__thumb img,
.ftw-choice--summit:focus-visible .ftw-choice__thumb img { transform: scale(1.04); }
.ftw-choice--summit .ftw-choice__label { padding: 16px 18px; font-size: 17px; }
.ftw-choice--summit.is-disabled:hover .ftw-choice__thumb img { transform: none; }

/* ---------- Shared pill button ---------- */
.ftw-cta__btn {
	display: inline-block; background: var(--ftw-accent); color: #2a2150;
	text-decoration: none; font-weight: 700; font-size: 17px; border: none;
	padding: 15px 34px; border-radius: 999px; cursor: pointer; font-family: inherit;
	transition: transform .18s, box-shadow .18s, opacity .18s;
}
.ftw-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(244,183,64,.28); }
.ftw-cta__btn[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }

/* ---------- Panel (contains the form / result) ---------- */
.ftw-panel {
	max-width: 560px; margin: 0 auto;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 18px; padding: 32px 30px;
}

/* ---------- Details form ---------- */
.ftw-form { display: flex; flex-direction: column; gap: 20px; }
.ftw-field { display: flex; flex-direction: column; gap: 7px; text-align: left; }
.ftw-field__label { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.ftw-field input[type="text"] {
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18);
	border-radius: 10px; color: #fff; font: inherit; padding: 13px 15px;
}
.ftw-field input[type="text"]::placeholder { color: rgba(255,255,255,.4); }
.ftw-field input[type="text"]:focus { outline: none; border-color: var(--ftw-accent); }
.ftw-field input[type="file"] { font: inherit; color: var(--ftw-muted); }
.ftw-field input[type="file"]::file-selector-button {
	background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2);
	border-radius: 8px; padding: 9px 14px; margin-right: 12px; cursor: pointer; font: inherit;
}
.ftw-field__hint { color: var(--ftw-muted); font-size: 13px; }
.ftw-form__foot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 4px; }
.ftw-form__error { color: #ff9a9a; font-size: 14px; margin: 0; text-align: center; }
.ftw-form__submit { align-self: center; }
.ftw-form__fallback { color: var(--ftw-muted); font-size: 14px; margin: 0; text-align: center; }
.ftw-form__fallback a { color: var(--ftw-accent); font-weight: 600; }

/* ---------- Generated card ---------- */
.ftw-result {
	text-align: center; margin-top: 32px; padding-top: 32px;
	border-top: 1px solid rgba(255,255,255,.12);
}
.ftw-result__label {
	font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ftw-muted); margin: 0 0 16px;
}
.ftw-result__img img { border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.ftw-result__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: stretch; margin-top: 24px; }
.ftw-result__actions .ftw-cta__btn,
.ftw-result__actions .ftw-restart {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 50px; margin: 0; padding-top: 0; padding-bottom: 0;
}

.ftw-restart {
	display: block; margin: 32px auto 0; cursor: pointer;
	background: none; border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
	color: #fff; font: inherit; font-weight: 600; padding: 11px 26px;
	transition: border-color .18s, color .18s;
}
.ftw-restart:hover { border-color: var(--ftw-accent); color: var(--ftw-accent); }

@media (max-width: 600px) {
	.ftw-cards { padding-top: 116px; }
	.ftw-steps { gap: 8px; }
	.ftw-steps__item { font-size: 11px; }
}