/* Plans (Plans.dc.html) and Claim or add your listing (Claim.dc.html).
   Form fields, plan cards and the thank-you panel reuse the shared styles in events.css. */

.tdid-p-intro { max-width: 640px; margin: 0 auto; line-height: 1.5; }
.tdid-cl-h1 { font-size: 44px !important; }

/* ---------- Plans ---------- */
.tdid-p-plans { padding: 48px 40px 24px; }
.tdid-p-plans__row { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: stretch; }
.tdid-p-card {
	flex: 1 1 290px;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	padding: 30px 28px;
	box-sizing: border-box;
	border: 1px solid var(--tdid-border);
	border-radius: 22px;
	background: var(--tdid-white);
}
.tdid-p-card--featured { border: 2px solid var(--tdid-accent); }
.tdid-p-badge { align-self: flex-start; margin-bottom: 14px; padding: 6px 12px; border-radius: 20px; background: var(--tdid-accent); color: var(--tdid-white); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.tdid-p-card__name { margin: 0 0 6px; font-size: 24px; color: var(--tdid-text); }
.tdid-p-card__price { margin: 0 0 6px; font-family: var(--tdid-font-heading); font-size: 30px; text-transform: uppercase; color: var(--tdid-accent); }
.tdid-p-card__yearly { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.tdid-p-card__blurb { margin: 0 0 18px; font-size: 15px; color: var(--tdid-muted); }
.tdid-p-card ul { flex: 1 1 auto; margin: 0 0 24px; padding-left: 20px; }
.tdid-p-card li { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.tdid-p-card .tdid-button { text-align: center; padding: 12px 24px; }

.tdid-p-how { max-width: 1000px; margin: 0 auto; padding: 40px 40px 24px; }
.tdid-p-how .tdid-section-title { font-size: 28px; margin-bottom: 28px; }
.tdid-p-steps { display: flex; flex-wrap: wrap; gap: 24px; }
.tdid-p-step { flex: 1 1 260px; padding: 0 12px; text-align: center; }
.tdid-p-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	border-radius: 26px;
	background: var(--tdid-button);
	color: var(--tdid-white);
	font-family: var(--tdid-font-heading);
	font-size: 22px;
}
.tdid-p-step h3 { margin: 0 0 8px; font-size: 20px; }
.tdid-p-step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tdid-muted); }
.tdid-p-center { margin-top: 32px; text-align: center; }
.tdid-p-center .tdid-button { padding: 14px 28px; }

.tdid-p-events { margin-top: 32px; padding: 56px 40px 64px; background: var(--tdid-bg-light); }
.tdid-p-events .tdid-section-title { font-size: 28px; margin-bottom: 8px; }
.tdid-p-events__intro { max-width: 560px; margin: 0 auto 28px; text-align: center; font-size: 16px; line-height: 1.5; color: var(--tdid-muted); }
.tdid-p-events__row { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.tdid-p-ecard { flex: 1 1 340px; max-width: 460px; padding: 28px; box-sizing: border-box; border: 1px solid var(--tdid-border); border-radius: 22px; background: var(--tdid-white); }
.tdid-p-ecard--featured { border: 2px solid var(--tdid-accent); }
.tdid-p-ecard h3 { margin: 0 0 4px; font-size: 22px; }
.tdid-p-ecard__price { margin: 0 0 14px; font-family: var(--tdid-font-heading); font-size: 28px; color: var(--tdid-accent); }
.tdid-p-ecard ul { margin: 0; padding-left: 20px; }
.tdid-p-ecard li { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }

/* ---------- Claim form ---------- */
.tdid-cl { padding: 48px 40px 72px; scroll-margin-top: 16px; }
.tdid-cl-form { max-width: 860px; margin: 0 auto; }
.tdid-cl-step { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.tdid-cl-step h2 { margin: 0; font-size: 26px; color: var(--tdid-accent); }
.tdid-cl-step h2 > span:first-child { color: var(--tdid-text); }
.tdid-cl-help { margin: -8px 0 2px; font-size: 15px; line-height: 1.5; color: var(--tdid-muted); }
.tdid-cl-tag { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 12px; background: var(--tdid-chip); color: var(--tdid-text); font-family: var(--tdid-font-body); font-size: 12px; font-weight: 800; letter-spacing: 0; vertical-align: middle; text-transform: uppercase; }
.tdid-cl-match { padding: 8px 12px; border-radius: 10px; background: var(--tdid-chip); font-size: 14px; font-weight: 700; color: var(--tdid-text); }
.tdid-cl-match[hidden] { display: none; }

.tdid-cl-billing { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 0; padding: 14px 18px; border: 1px solid var(--tdid-border); border-radius: 14px; background: var(--tdid-bg-light); }
.tdid-cl-billing legend { float: left; margin-right: 8px; padding: 0; font-size: 14px; font-weight: 800; }
.tdid-cl-billing label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 700; cursor: pointer; }
.tdid-cl-billing input { width: 18px; height: 18px; margin: 0; accent-color: var(--tdid-button); }
.tdid-cl-form[data-plan="free"] .tdid-cl-billing,
.tdid-cl-form[data-plan="none"] .tdid-cl-billing { display: none; }

.tdid-cl-fit { display: flex; flex-wrap: wrap; gap: 40px; }
.tdid-cl-checks { flex: 1 1 300px; margin: 0; padding: 0; border: 0; }
.tdid-cl-checks legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--tdid-muted); }
.tdid-cl-checks label { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 15px; cursor: pointer; }
.tdid-cl-checks input { width: 20px; height: 20px; margin: 0; accent-color: var(--tdid-button); }
.tdid-cl-checks input:disabled + * , .tdid-cl-checks label:has(input:disabled) { color: #9AA8AD; cursor: not-allowed; }
.tdid-cl-checks[aria-invalid="true"] legend { color: #B3261E; }
.tdid-cl-count { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--tdid-accent); }

/* Paid & Featured fields locked on Free */
.tdid-cl-paidonly.is-locked { opacity: 0.45; }
.tdid-cl-paidonly.is-locked input, .tdid-cl-paidonly.is-locked textarea, .tdid-cl-paidonly.is-locked select { background: #F4F6F6; cursor: not-allowed; }
.tdid-cl-locked-note { display: none; margin: 0; font-size: 14px; color: var(--tdid-muted); }
.tdid-cl-form[data-plan="free"] .tdid-cl-locked-note { display: block; }
.tdid-cl-paidonly-note { display: none; }
.tdid-cl-form[data-plan="paid"] .tdid-cl-paidonly-note,
.tdid-cl-form[data-plan="featured"] .tdid-cl-paidonly-note { display: block; }

.tdid-cl-offer { padding: 28px; border: 1px solid var(--tdid-border); border-radius: 18px; background: var(--tdid-bg-light); }
.tdid-cl-offer > .tdid-cl-paidonly { display: flex; flex-direction: column; gap: 16px; }
.tdid-cl-offer-fields { display: flex; flex-direction: column; gap: 16px; }
.tdid-cl-offer-fields[hidden] { display: none; }
.tdid-cl-upsell { display: none; margin: 0; font-size: 14px; color: var(--tdid-muted); }
.tdid-cl-upsell a { font-weight: 700; }
.tdid-cl-form[data-plan="free"] .tdid-cl-upsell { display: block; }

.tdid-cl-submit {
	min-height: 56px;
	padding: 0 40px;
	border: 0;
	border-radius: 30px;
	background: var(--tdid-button);
	color: var(--tdid-white);
	font: 800 17px var(--tdid-font-body);
	cursor: pointer;
}
.tdid-cl-submit:hover, .tdid-cl-submit:focus { background: var(--tdid-text); color: var(--tdid-white); }
.tdid-cl-after { margin: 14px 0 0; font-size: 14px; }
.tdid-thanks__small { font-size: 14px !important; }

@media (max-width: 720px) {
	.tdid-cl-h1 { font-size: 30px !important; }
	.tdid-p-plans, .tdid-p-how, .tdid-p-events, .tdid-cl { padding-left: 16px; padding-right: 16px; }
	.tdid-p-card { max-width: none; }
	.tdid-cl-step h2 { font-size: 22px; }
	.tdid-cl-offer { padding: 20px; }
	.tdid-cl-fit { gap: 20px; }
}

/* Claim form: "Is your business already on To Do In Destin?" + Find your business */
.tdid-cl-which { margin: 0; padding: 0; border: 0; }
.tdid-cl-which legend { margin-bottom: 10px; font-size: 17px; font-weight: 700; color: var(--tdid-text); }
.tdid-cl-which__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tdid-cl-which__opt { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; border: 2px solid var(--tdid-border, #D5E7E5); border-radius: 14px; background: #FFFFFF; font-size: 15px; line-height: 1.4; color: var(--tdid-muted); cursor: pointer; }
.tdid-cl-which__opt strong { display: block; margin-bottom: 2px; font-size: 16px; color: var(--tdid-text); }
.tdid-cl-which__opt input { margin-top: 4px; accent-color: var(--tdid-accent); }
.tdid-cl-which__opt:has(input:checked) { border-color: var(--tdid-accent); background: var(--tdid-bg-light, #F2FAF8); }
.tdid-cl-pick { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 14px; background: var(--tdid-bg-light, #F2FAF8); }
.tdid-cl-pick[hidden] { display: none; }
.tdid-cl-pick .tdid-es-field { flex: none; }
.tdid-cl-pick select { width: 100%; min-height: 48px; }
.tdid-cl-pick .tdid-cl-help { margin: 0; }
.tdid-cl-pick__note { margin: 0; padding: 12px 14px; border-left: 4px solid var(--tdid-accent); border-radius: 8px; background: #FFFFFF; font-size: 15px; line-height: 1.5; }
.tdid-cl-pick__note a { color: var(--tdid-button); font-weight: 700; }
#tdid-cl-business[readonly] { background: var(--tdid-bg-light, #F2FAF8); color: var(--tdid-text); }
@media (max-width: 700px) { .tdid-cl-which__opts { grid-template-columns: 1fr; } }

/* Get Listed: "Already on To Do In Destin?" claim bar above the plans */
.tdid-p-claimbar { padding: 0 40px; margin: 8px 0 8px; }
.tdid-p-claimbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; max-width: 1100px; margin: 0 auto; padding: 22px 28px; border: 2px solid var(--tdid-accent); border-radius: 20px; background: var(--tdid-bg-light, #F2FAF8); }
.tdid-p-claimbar h2 { margin: 0 0 4px; font-size: 22px; color: var(--tdid-accent); }
.tdid-p-claimbar p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--tdid-text); }
.tdid-p-claimbar .tdid-button { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 760px) {
	.tdid-p-claimbar { padding: 0 16px; }
	.tdid-p-claimbar__in { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
	.tdid-p-claimbar .tdid-button { white-space: normal; }
}

/* Claim form: ownership request for an already-claimed listing (only name, email, phone) */
.tdid-cl-form.is-ownership .tdid-cl-step:not(.tdid-cl-step--business),
.tdid-cl-form.is-ownership .tdid-cl-after,
.tdid-cl-form.is-ownership .tdid-cl-paidonly-note { display: none; }
.tdid-cl-form.is-ownership .tdid-cl-pick__note { border-left-color: #D93A3A; }

/* Claim form: complimentary listing (no charge at its plan) */
.tdid-cl-comp-note { margin: 0 0 10px; padding: 12px 14px; border-left: 4px solid var(--tdid-accent); border-radius: 8px; background: var(--tdid-bg-light, #F2FAF8); font-size: 15px; line-height: 1.5; }
.tdid-cl-form.is-comp .tdid-cl-paidonly-note { display: none; }