/* CLR Software custom overrides on top of Quiety theme */

/* Extra vibrant accent palette for the second row of service cards
   (Quiety only ships primary/success/warning/danger soft variants). */
.bg-purple-soft { background-color: rgba(139, 92, 246, 0.12); }
.text-purple    { color: #8B5CF6; }

.bg-teal-soft   { background-color: rgba(20, 184, 166, 0.12); }
.text-teal      { color: #14B8A6; }

.bg-orange-soft { background-color: rgba(249, 115, 22, 0.12); }
.text-orange    { color: #F97316; }

.bg-pink-soft   { background-color: rgba(236, 72, 153, 0.12); }
.text-pink      { color: #EC4899; }

/* Hide the form validation summary alert when there are no model-level errors.
   ASP.NET Core's validation summary tag helper adds .validation-summary-valid
   when the model is valid, .validation-summary-errors when it isn't. */
.alert.validation-summary-valid { display: none; }

/* On small screens the theme shrinks .ptb-120's top padding to 60px, but the mobile
   header is position:fixed and ~103px tall — which tucked the page-header titles
   underneath it. Restore enough top clearance so the title sits below the header.
   (The home hero is .hero-section, not .page-header, so it's unaffected.) */
@media (max-width: 1199.98px) {
    .page-header { padding-top: 130px; }
}

/* Chatbot "thinking" indicator — three pulsing dots (no image asset needed). */
.clr-typing { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.clr-typing > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.3;
    animation: clr-typing 1.2s infinite ease-in-out both;
}
.clr-typing > span:nth-child(2) { animation-delay: 0.15s; }
.clr-typing > span:nth-child(3) { animation-delay: 0.3s; }
@keyframes clr-typing {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40%          { opacity: 1;   transform: translateY(-4px); }
}

/* Markdown rendered inside chatbot assistant bubbles — keep the spacing tight. */
.md-content > :first-child { margin-top: 0; }
.md-content > :last-child { margin-bottom: 0; }
.md-content p { margin: 0 0 0.5rem; }
.md-content ul, .md-content ol { margin: 0 0 0.5rem; padding-left: 1.25rem; }
.md-content li { margin-bottom: 0.15rem; }
.md-content h1, .md-content h2, .md-content h3, .md-content h4 { font-size: 1rem; font-weight: 700; margin: 0.5rem 0 0.25rem; }
.md-content code { background: rgba(0, 0, 0, 0.06); padding: 0.1rem 0.3rem; border-radius: 4px; }
.md-content pre { background: rgba(0, 0, 0, 0.06); padding: 0.5rem 0.6rem; border-radius: 6px; overflow-x: auto; margin: 0 0 0.5rem; }
.md-content pre code { background: none; padding: 0; }
.md-content a { color: inherit; text-decoration: underline; }
.md-content table { border-collapse: collapse; margin: 0 0 0.5rem; }
.md-content th, .md-content td { border: 1px solid rgba(0, 0, 0, 0.15); padding: 0.25rem 0.5rem; }