/**
 * Franchise page template — forms, stat board, growth tiers, step timeframes.
 * Loaded only on page-franchise.php (after pages.css + page-accents.css).
 *
 * @package Waggles
 */

/* ---- Lead / application forms ------------------------------------------- */
.wg-franchise-form__flag {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .4rem .9rem; margin-bottom: 1rem;
	background: var(--wg-pink-100, #FCE4E6); color: var(--wg-pink-600, #E07A82);
	border-radius: 999px; font-weight: 700; font-size: .82rem;
}

.wg-form { display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.wg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wg-form__field { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .9rem; color: var(--wg-blue, #235868); }
.wg-form input,
.wg-form select,
.wg-form textarea {
	width: 100%; padding: .75rem .9rem;
	border: 1.5px solid var(--dtp-line, rgba(61,81,85,.12)); border-radius: 14px;
	background: #fff; font-family: var(--font-primary); font-size: 1rem;
	color: var(--wg-ink, #2B2829); font-weight: 500;
	transition: border-color .15s, box-shadow .15s;
}
.wg-form input:focus,
.wg-form select:focus,
.wg-form textarea:focus {
	outline: none; border-color: var(--wg-pink, #F49DA3);
	box-shadow: 0 0 0 4px var(--wg-stroke-soft, rgba(244,157,163,.30));
}
.wg-form textarea { resize: vertical; }
.wg-form__check { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; font-size: .92rem; color: var(--wg-ink, #2B2829); cursor: pointer; }
.wg-form__check input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--wg-pink-600, #E07A82); flex: 0 0 auto; }
.wg-form__consent { font-size: .78rem; line-height: 1.5; color: var(--dtp-ink-soft, #6a7a7e); margin: .2rem 0 0; }
.wg-form__submit { align-self: flex-start; border: 0; cursor: pointer; }
.wg-franchise-form--full { max-width: 780px; margin: 0 auto; }
@media (max-width: 575.98px) { .wg-form__row { grid-template-columns: 1fr; } }

/* ---- Investment stat board ---------------------------------------------- */
.wg-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem; margin-top: .5rem; }
.wg-stat {
	display: flex; flex-direction: column; gap: .35rem; text-align: center;
	padding: 1.6rem 1.4rem; background: #fff;
	border: 1.5px solid var(--dtp-line, rgba(61,81,85,.12));
	border-radius: var(--dtp-radius-md, 18px); box-shadow: var(--dtp-shadow-sm);
}
.wg-stat__num { font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1.05; color: var(--wg-pink-600, #E07A82); }
.wg-stat__label { font-weight: 600; font-size: .9rem; color: var(--wg-blue, #235868); }
.wg-stat--wide { grid-column: 1 / -1; }
.wg-stat--wide .wg-stat__num { color: var(--wg-blue, #235868); }

.wg-franchise-reqs { max-width: 760px; margin: 1.6rem auto 0; padding: 1.4rem 1.6rem; background: var(--wg-sky-100, #E3F4FE); border-radius: var(--dtp-radius-md, 18px); }
.wg-franchise-reqs h3 { margin: 0 0 .6rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--wg-blue, #235868); }
.wg-franchise-reqs ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 2rem; }
.wg-franchise-reqs li { color: var(--wg-ink, #2B2829); }

/* ---- Growth tiers ------------------------------------------------------- */
.wg-tier-row { display: flex; align-items: stretch; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.wg-tier { flex: 1 1 220px; max-width: 300px; text-align: center; padding: 1.8rem 1.5rem; background: #fff; border: 1.5px solid var(--dtp-line, rgba(61,81,85,.12)); border-radius: var(--dtp-radius-md, 18px); box-shadow: var(--dtp-shadow-sm); }
.wg-tier__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: .9rem; border-radius: 50%; background: linear-gradient(135deg, var(--wg-sky-100, #E3F4FE), #fff); color: var(--wg-blue, #235868); font-size: 1.5rem; }
.wg-tier__title { font-family: var(--font-display); font-size: 1.2rem; color: var(--wg-blue, #235868); margin: 0 0 .5rem; }
.wg-tier__desc { font-size: .92rem; color: var(--dtp-ink-soft, #6a7a7e); margin: 0; }
.wg-tier__arrow { align-self: center; color: var(--wg-pink, #F49DA3); font-size: 1.5rem; }
@media (max-width: 767.98px) { .wg-tier__arrow { transform: rotate(90deg); } }

/* ---- 7-step timeline tweaks --------------------------------------------- */
.wg-step-grid--compact { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.wg-step-when { display: inline-block; margin-top: .2rem; padding: .2rem .7rem; background: var(--wg-cream, #FFF6F4); color: var(--wg-pink-600, #E07A82); border-radius: 999px; font-weight: 700; font-size: .8rem; }