/* AI Mock Interview promos placed across CRNA Compass. Uses the site's .cc tokens. */

/* hero pill */
.ccc-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--cc-card, #fff); border: 1px solid var(--cc-line, #E4DCCF); color: var(--cc-ink, #14213D) !important; font-weight: 700; font-size: .92rem; text-decoration: none !important; box-shadow: 0 1px 2px rgba(20,33,61,.06); transition: border-color .12s, transform .12s; }
.ccc-pill:hover { border-color: var(--cc-ink, #14213D); transform: translateY(-1px); }
.ccc-pill-tag { background: var(--cc-accent, #D64933); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }

/* spotlight */
.ccc-spot { display: grid; gap: 28px; align-items: center; background: var(--cc-sand, #F3EDE3); border-radius: 22px; padding: 28px 22px; }
.ccc-spot .cc-lead { font-size: 1.05rem; color: var(--cc-ink-2, #2E3A55); }
.ccc-spot-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.ccc-spot-list li { position: relative; padding-left: 28px; font-weight: 600; color: var(--cc-ink, #14213D); }
.ccc-spot-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--cc-ok, #1F7A4A) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.ccc-spot .cc-small { margin-top: 10px; }
.ccc-spot-art { background: var(--cc-card, #fff); border: 1px solid var(--cc-line, #E4DCCF); border-radius: 18px; padding: 18px; box-shadow: var(--cc-shadow); display: grid; gap: 10px; font-size: .95rem; }
.ccc-spot-panel { display: flex; gap: 8px; margin-bottom: 4px; }
.ccc-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .85rem; }
.ccc-av-d { background: #1C6E7E; }
.ccc-av-f { background: #2E3A55; }
.ccc-av-s { background: #8C6A0F; }
.ccc-av.is-on { box-shadow: 0 0 0 3px var(--cc-card, #fff), 0 0 0 5px var(--cc-accent, #D64933); }
.ccc-b { border-radius: 4px 14px 14px 14px; padding: 10px 13px; line-height: 1.45; max-width: 92%; }
.ccc-b b { color: var(--cc-ink, #14213D); }
.ccc-b i { font-style: normal; color: var(--cc-muted, #56607A); font-weight: 600; font-size: .85rem; }
.ccc-b-p { background: var(--cc-paper, #FBF8F3); border: 1px solid var(--cc-line, #E4DCCF); color: var(--cc-ink, #14213D); }
.ccc-b-y { background: var(--cc-ink, #14213D); color: #fff; justify-self: end; border-radius: 14px 4px 14px 14px; }
.ccc-b-r { display: flex; gap: 12px; align-items: center; background: var(--cc-warn-soft, #FDF0DC); border-radius: 14px; max-width: 100%; color: var(--cc-ink, #14213D); }
.ccc-b-r b { color: #6e4200; }
.ccc-score { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 4px solid #C27A00; display: grid; place-items: center; font-family: var(--cc-display, Georgia, serif); font-weight: 700; font-size: 1.2rem; background: #fff; }
@media (min-width: 900px) {
	.ccc-spot { grid-template-columns: 1.1fr 1fr; padding: 40px; gap: 40px; }
}

/* tool card + pricing */
.ccc-tool-new { border-color: var(--cc-accent, #D64933) !important; }
.ccc-badge-new { background: var(--cc-accent-soft, #FBE7E3) !important; color: var(--cc-accent-ink, #A8321F) !important; }
.ccc-li-new { font-weight: 600; }

/* banner on Interview Dojo, The Hot Seat, My Compass */
.ccc-banner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: var(--cc-card, #fff); border: 2px solid var(--cc-accent, #D64933); border-radius: 16px; padding: 16px 18px; margin: 0 0 24px; box-shadow: var(--cc-shadow); }
.ccc-banner-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--cc-accent-soft, #FBE7E3); color: var(--cc-accent-ink, #A8321F); }
.ccc-banner-txt { flex: 1 1 260px; display: grid; gap: 2px; }
.ccc-banner-txt strong { font-family: var(--cc-display, Georgia, serif); font-size: 1.15rem; color: var(--cc-ink, #14213D); }
.ccc-banner-txt span { color: var(--cc-ink-2, #2E3A55); font-size: .95rem; }
.cc-game-page + .ccc-banner, .ccc-banner:last-child { margin-top: 20px; }
@media (max-width: 600px) {
	.ccc-banner .cc-btn { width: 100%; }
}