/* ============================================================
   KLD-IPATS - "Contact Us" dialog (assets/include/contact-modal.php)
   ============================================================ */
.contact-cta .section-badge { display: inline-flex; align-items: center; }

.cm { --cm-green: var(--kld-primary, #1a6b3a); --cm-dark: var(--kld-primary-dark, #0d3d21); --cm-gold: var(--kld-gold, #c9a227); --cm-ink: #14201a; --cm-muted: #5d6b63; --cm-line: #dfe6e1; --cm-tint: #eef6f1; }
.cm *, .cm *::before, .cm *::after { box-sizing: border-box; }
.cm h2, .cm h3, .cm p, .cm ul, .cm legend { margin: 0; padding: 0; }
.cm .modal-dialog { max-width: 860px; }
.cm-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 0; border-radius: 26px; overflow: hidden; color: var(--cm-ink); background: #fff; box-shadow: 0 40px 90px -30px rgba(8, 32, 20, .65); }
/* a plain darker backdrop: a full-screen blur is very slow on modest phones and laptops */
body.cm-open .modal-backdrop.show { --bs-backdrop-bg: #061a0d; --bs-backdrop-opacity: .68; }
.cm.fade .modal-dialog { transform: translateY(24px) scale(.98); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.cm.show .modal-dialog { transform: none; }

/* ---------- info panel ---------- */
.cm-info { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 2.2rem 1.9rem; color: #fff;
    background: radial-gradient(420px 260px at 100% 0%, rgba(201, 162, 39, .34), transparent 60%), linear-gradient(160deg, #0d3d21 0%, #1a6b3a 62%, #2d8a50 130%); }
.cm-orb { position: absolute; border-radius: 50%; pointer-events: none; width: 220px; height: 220px; right: -90px; bottom: -70px; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 0 0 34px rgba(255, 255, 255, .04), 0 0 0 68px rgba(255, 255, 255, .03); }
.cm-info > :not(.cm-orb) { position: relative; z-index: 1; }
.cm-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .85rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); }
.cm-badge i { color: #f1d572; }
.cm-info h2 { margin-top: 1.1rem; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cm-lead { margin-top: .8rem; font-size: .92rem; line-height: 1.65; color: rgba(255, 255, 255, .8); }
.cm-list { list-style: none; display: grid; gap: 1rem; margin-top: 1.7rem !important; }
.cm-list li { display: flex; align-items: flex-start; gap: .8rem; }
.cm-ico { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 1.05rem; background: rgba(255, 255, 255, .13); }
.cm-list small { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.cm-list a, .cm-list b { display: block; margin-top: .05rem; font-size: .9rem; font-weight: 600; line-height: 1.4; color: #fff; text-decoration: none; word-break: break-word; }
.cm-list a:hover { text-decoration: underline; }
.cm-more { margin-top: auto; padding-top: 1.6rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 700; color: #f1d572; text-decoration: none; }
.cm-more:hover { color: #fff; } .cm-more i { transition: transform .2s; } .cm-more:hover i { transform: translateX(4px); }

/* ---------- form panel ---------- */
.cm-panel { position: relative; display: flex; flex-direction: column; padding: 2.1rem 2.2rem 1.8rem; background: #fff; }
.cm-close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f5f2; color: var(--cm-muted); cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.cm-close:hover { background: #e2ebe5; color: var(--cm-ink); transform: rotate(90deg); }
.cm-panel h3 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; padding-right: 2.5rem; }
.cm-sub { margin-top: .25rem; font-size: .84rem; color: var(--cm-muted); }
.cm-star { color: #dc2626; }
.cm-alert { margin-top: 1rem; padding: .7rem .95rem; border-radius: 12px; font-size: .86rem; font-weight: 600; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
.cm form { margin-top: 1.3rem; display: grid; gap: 1.05rem; }
.cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cm-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.cm-field > label, .cm-topics legend { display: block; margin-bottom: .4rem; font-size: .78rem; font-weight: 700; color: #33423a; }
.cm-input { position: relative; }
.cm-input > i { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: #94a39a; font-size: 1rem; pointer-events: none; transition: color .15s; }
.cm-input input, .cm textarea { display: block; width: 100%; font: inherit; font-size: .93rem; color: var(--cm-ink); background: #fbfcfb; border: 1.5px solid var(--cm-line); border-radius: 13px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.cm-input input { height: 48px; padding: 0 1rem 0 2.6rem; }
.cm textarea { padding: .8rem 1rem; min-height: 112px; resize: vertical; line-height: 1.55; }
.cm-input input::placeholder, .cm textarea::placeholder { color: #a6b2ab; }
.cm-input input:hover, .cm textarea:hover { border-color: #c4d3c9; }
.cm-input input:focus, .cm textarea:focus { background: #fff; border-color: var(--cm-green); box-shadow: 0 0 0 4px rgba(26, 107, 58, .13); }
.cm-input:focus-within > i { color: var(--cm-green); }
.cm .is-bad { border-color: #dc2626 !important; background: #fffafa !important; box-shadow: 0 0 0 4px rgba(220, 38, 38, .09) !important; }
.cm-err { min-height: 0; margin-top: .35rem; font-size: .78rem; font-weight: 600; color: #dc2626; }
.cm-err:empty { display: none; }
.cm-err::before { content: "\F430"; font-family: "bootstrap-icons"; margin-right: .35rem; }
.cm-err:empty::before { content: none; }
.cm-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cm-foot .cm-err { flex: 1 1 auto; } .cm-count { flex: 0 0 auto; margin-top: .35rem; margin-left: auto; font-size: .74rem; color: #94a39a; font-variant-numeric: tabular-nums; }
.cm-count.warn { color: #d97706; font-weight: 700; }

/* topic pills */
.cm-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.cm-pills label { margin: 0; }
.cm-pills input { position: absolute; opacity: 0; pointer-events: none; }
.cm-pills span { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; border: 1.5px solid var(--cm-line); background: #fbfcfb; color: #46544c; font-size: .82rem; font-weight: 600; cursor: pointer; user-select: none; transition: all .15s; }
.cm-pills span i { color: #94a39a; transition: color .15s; }
.cm-pills span:hover { border-color: #b9d8c4; background: var(--cm-tint); }
.cm-pills input:checked + span { color: #fff; border-color: var(--cm-green); background: linear-gradient(135deg, #1a6b3a, #2d8a50); box-shadow: 0 10px 20px -12px rgba(26, 107, 58, .9); }
.cm-pills input:checked + span i { color: #f1d572; }
.cm-pills input:focus-visible + span { outline: 3px solid rgba(201, 162, 39, .65); outline-offset: 2px; }
.cm-topics.is-bad-group .cm-pills span { border-color: #f5b5b5; }

/* submit */
.cm-submit { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 52px; border: 0; border-radius: 14px; font: inherit; font-size: .96rem; font-weight: 700; color: #fff; cursor: pointer; background: linear-gradient(135deg, #1a6b3a, #2d8a50); box-shadow: 0 18px 28px -18px rgba(26, 107, 58, .95); transition: transform .15s, box-shadow .15s, filter .15s; }
.cm-submit:hover:not([aria-disabled="true"]) { transform: translateY(-2px); filter: brightness(1.05); }
.cm-submit:focus-visible { outline: 3px solid rgba(201, 162, 39, .65); outline-offset: 3px; }
.cm-submit[aria-disabled="true"] { opacity: .8; cursor: progress; }
.cm-btn-label, .cm-btn-busy { display: inline-flex; align-items: center; gap: .55rem; }
.cm-note { margin-top: -.15rem !important; text-align: center; font-size: .75rem; color: #7b8a81; } .cm-note i { margin-right: .3rem; color: var(--cm-green); }

/* success */
.cm-success { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 420px; text-align: center; outline: none; }
.cm-success h3 { padding: 0; margin-top: 1.1rem; font-size: 1.6rem; }
.cm-success p { max-width: 340px; margin-top: .5rem; line-height: 1.65; color: var(--cm-muted); font-size: .95rem; } .cm-success p b { color: var(--cm-ink); word-break: break-word; }
.cm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.6rem; }
.cm-btn { padding: .7rem 1.4rem; border-radius: 999px; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; transition: transform .15s, background .15s; }
.cm-btn:hover { transform: translateY(-2px); }
.cm-btn.solid { color: #fff; background: linear-gradient(135deg, #1a6b3a, #2d8a50); } .cm-btn.line { color: var(--cm-green); background: #fff; border-color: #b9d8c4; } .cm-btn.line:hover { background: var(--cm-tint); }
.cm-tick { width: 92px; height: 92px; }
.cm-tick-c { stroke: #1a6b3a; stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: cm-draw .6s ease-out .05s forwards; }
.cm-tick-p { stroke: #1a6b3a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: cm-draw .4s ease-out .55s forwards; }
@keyframes cm-draw { to { stroke-dashoffset: 0; } }
.cm-success:not(.d-none) { animation: cm-pop .35s ease-out; }
@keyframes cm-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cm-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.cm form.shake { animation: cm-shake .32s; }

/* ---------- phones ---------- */
@media (max-width: 767px) {
    .cm .modal-dialog { margin: .6rem; max-width: none; }
    .cm-shell { grid-template-columns: 1fr; border-radius: 22px; }
    .cm-info { padding: 1.3rem 1.4rem 1.2rem; }
    .cm-info h2 { margin-top: .8rem; font-size: 1.5rem; } .cm-lead, .cm-more { display: none; }
    .cm-list { grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1rem !important; }
    .cm-list li:nth-child(n+3) { display: none; }
    /* the close button belongs to the whole dialog here, so it sits on the green header instead of the white form */
    .cm-panel { position: static; padding: 1.4rem 1.3rem 1.3rem; } .cm-row { grid-template-columns: 1fr; }
    .cm-close { top: .7rem; right: .7rem; background: rgba(255, 255, 255, .16); color: #fff; } .cm-close:hover { background: rgba(255, 255, 255, .3); color: #fff; }
    .cm-success { min-height: 340px; }
}
@media (max-width: 400px) { .cm-list { grid-template-columns: 1fr; } .cm-list li:nth-child(2) { display: none; } }
@media (prefers-reduced-motion: reduce) { .cm *, .cm *::before, .cm *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .cm-tick-c, .cm-tick-p { stroke-dashoffset: 0; } }