/**
 * Inline success card — canonical Trainingcred styles.
 *
 * Each lead-capture form (brochure, booking, trainer application,
 * in-house enquiry) shows an inline confirmation after AJAX success
 * instead of reloading the page. They all share the same visual
 * language: green-tinted card, white check on a green circle, title +
 * message + 1-3 CTAs.
 *
 * Use the canonical .tc-success class so the look stays consistent
 * across the site. Modifier classes:
 *   .tc-success                            — card root
 *   .tc-success__icon                      — circular check badge
 *   .tc-success__title                     — heading
 *   .tc-success__msg                       — short paragraph
 *   .tc-success__timeline                  — optional ordered list
 *     .tc-success__when                    — left rail in list items
 *   .tc-success__ctas                      — button cluster
 *     .tc-success__cta                       — base button
 *     .tc-success__cta--primary              — solid teal
 *     .tc-success__cta--secondary            — outlined teal
 *     .tc-success__cta--ghost                — text link
 *
 * Margins / padding can be overridden per-form via the parent context
 * (e.g. modals tend to want margin: 1rem 1.25rem while inline cards
 * on a page can use margin: 0.5rem 0).
 */

.tc-success {
    margin: 1rem 1.25rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
}
.tc-success[hidden] { display: none; }

.tc-success__icon {
    width: 52px; height: 52px; line-height: 52px;
    margin: 0 auto 0.7rem;
    background: #10b981; color: #fff;
    border-radius: 50%;
    font-size: 1.2rem;
}

.tc-success__title {
    margin: 0 0 0.4rem;
    color: #065f46;
    font-weight: 700;
    font-size: 1.15rem;
}

.tc-success__msg {
    margin: 0 auto 1.1rem;
    max-width: 480px;
    color: #047857;
    font-size: 0.88rem;
}

.tc-success__timeline {
    max-width: 540px;
    margin: 0 auto 1.25rem;
    padding: 0;
    list-style: none;
    text-align: left;
}
.tc-success__timeline li {
    display: flex; gap: 0.85rem;
    padding: 0.6rem 0.85rem;
    background: #fff;
    border: 1px solid #d1fae5;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    color: #064e3b;
    font-size: 0.86rem;
}
.tc-success__when {
    flex: 0 0 110px;
    font-weight: 700; color: #065f46;
    font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}

.tc-success__ctas {
    display: flex; justify-content: center; gap: 0.55rem; flex-wrap: wrap;
}

.tc-success__cta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem; font-weight: 600;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform 0.05s ease-out, background 0.15s ease;
}
.tc-success__cta:active { transform: scale(0.98); }

.tc-success__cta--primary             { background: #0b7269; color: #fff; }
.tc-success__cta--primary:hover       { background: #095e57; color: #fff; }

.tc-success__cta--secondary           { background: #fff; color: #0b7269; border: 1px solid #99e2dd; }
.tc-success__cta--secondary:hover     { background: #f0fdfa; color: #0b7269; }

.tc-success__cta--ghost               { background: transparent; color: #0a4772; }
.tc-success__cta--ghost:hover         { color: #064a76; text-decoration: underline; }

/* Larger card variant — used for the trainer-application timeline. */
.tc-success--lg {
    padding: 1.75rem 1.25rem;
    border-radius: 14px;
}
.tc-success--lg .tc-success__icon  { width: 56px; height: 56px; line-height: 56px; font-size: 1.35rem; }
.tc-success--lg .tc-success__title { font-size: 1.3rem; }
.tc-success--lg .tc-success__msg   { font-size: 0.92rem; max-width: 520px; }