/* chatbot-cards.css — RTS Ferries */

.quick-options .opt-btn:nth-child(5) .opt-icon { background: rgba(200,155,60,.14); color: var(--gold-dark); }
.quick-options .opt-btn:nth-child(6) .opt-icon { background: rgba(2,132,199,.1); color: #0284c7; }

.msg-bot:has(> .cc) { background: none; border: none; padding: 0; width: 100%; max-width: 100%; animation: none; }
.cc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cc > * { animation: msgIn .3s ease-out both; }
.cc > .cc-wait { display: none; }

.cc-say { align-self: flex-start; max-width: 88%; padding: 10px 14px; border: 1px solid var(--grey-light); border-radius: 14px 14px 14px 4px; background: #fff; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.cc-say b { color: var(--navy); white-space: nowrap; }
.cc-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--grey-light); border-radius: 16px; background: #fff; box-shadow: var(--shadow-md); }
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding-bottom: 12px; border-bottom: 1.5px dashed var(--grey-mid); }
.cc-title { font-family: var(--font-head); font-size: 19px; font-weight: 800; line-height: 1.15; color: var(--navy); }
.cc-sub { margin-top: 5px; font-size: 12.5px; color: var(--grey-text); }
.cc-tag { flex-shrink: 0; padding: 5px 10px; border-radius: 14px; background: rgba(59,125,216,.1); color: var(--accent-dark); font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }

.msg .cc-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.msg .cc-steps li { display: flex; align-items: flex-start; gap: 11px; margin: 0; font-size: 13px; line-height: 1.45; counter-increment: step; }
.msg .cc-steps li::before { content: counter(step); flex: 0 0 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--wa-grad-brand); color: #fff; font-size: 11.5px; font-weight: 800; box-shadow: 0 3px 8px rgba(11,37,69,.25); }
.msg .cc-steps li span { min-width: 0; padding-top: 2px; }
.msg .cc-dots li::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; margin: 7px 8px 0 8px; background: var(--accent); box-shadow: none; }
.cc-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1px solid var(--grey-light); border-radius: 12px; background: var(--off-white); font-size: 12.5px; line-height: 1.45; }
.cc-note svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); }

#chat-window a.cc-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; border-radius: 12px; background: var(--wa-grad-btn); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; word-break: normal; box-shadow: var(--wa-glow-red); transition: transform .2s, box-shadow .2s; }
#chat-window a.cc-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--wa-glow-red-lg); }
#chat-window a.cc-link { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--grey-light); border-radius: 14px; background: #fff; color: var(--text); font-weight: 400; text-decoration: none; word-break: normal; transition: border-color .2s, box-shadow .2s, transform .2s; }
#chat-window a.cc-link:hover { color: var(--text); border-color: var(--accent); box-shadow: 0 6px 16px rgba(11,37,69,.1); transform: translateY(-1px); }
.cc-link-ico { flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(59,125,216,.1); color: var(--accent-dark); }
.cc-link-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-link-txt b { font-size: 13.5px; color: var(--navy); }
.cc-link-txt small { font-size: 12px; font-weight: 400; color: var(--grey-text); overflow-wrap: anywhere; }
.cc-chev { font-size: 22px; line-height: 1; color: var(--grey-mid); }

.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-chip { padding: 9px 15px; border: 1px solid var(--grey-light); border-radius: 20px; background: #fff; color: var(--accent-dark); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.cc-chip:hover { border-color: var(--accent); background: var(--off-white); transform: translateY(-1px); }
.cc-chip.done::before { content: '✓ '; }

.opt-btn:focus-visible, .see-all-btn:focus-visible, .chat-back:focus-visible, .fb-btn:focus-visible, .cc-chip:focus-visible, #chat-window a.cc-cta:focus-visible, #chat-window a.cc-link:focus-visible { outline: 3px solid rgba(59,125,216,.55); outline-offset: 2px; }

@media (max-width: 380px) { .cc-title { font-size: 17px; } .cc-say { max-width: 100%; } .cc-head { flex-direction: column; } }