:root {
  --clvr-primary: #1F3B82;
  --clvr-accent: #38C172;
  --clvr-light: #F5F7FA;
  --clvr-darktext: #1E1E1E;
}


 /* ==================
    GENERIC
    ================== */

    /* visible focus ring for accessibility: */
    input.ring,
    input:focus,
    .select:focus {
        outline: 3px solid #111;
        outline-offset: 2px;
    }


    body {
      font-family: 'Hind', sans-serif;
      color: var(--clvr-darktext);
      background-color: #fff;
    }
    img{
      max-width: 100%;
    }

    h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(36px, 5vw, 80px) !important;
      color: var(--clvr-darktext);  
    }
    .bg-clvr-light { background-color: var(--clvr-light); }
    .text-clvr-primary { color: var(--clvr-darktext); }
    .bg-clvr-primary { background-color: var(--clvr-primary); }
    .bg-clvr-accent { background-color: var(--clvr-accent); }

    .btn-success {
      background-color: var(--clvr-accent);
      border: none;
      font-weight: 600;
      padding: 0.75rem 2rem;
      box-shadow: 0 4px 14px rgba(56, 193, 114, 0.3);
    }

    .btn-success:hover {
      background-color: #2ebc68;
    }



    .feature-icon {
      font-size: 2rem;
      color: var(--clvr-accent);
    }

    .section-heading {
      font-weight: 700;
      color: var(--clvr-primary);
    }

/* ==================
   UTILITY CLASSES
   ================== */
    .btn-upgrade {
        background-color: #0e2967;
    }


    header.bg-clvr-light,
    section.bg-clvr-light{
      background-image: radial-gradient(#dddddd 1px, transparent 1px);
      background-size: 25px 25px;
    }

    .animate-bounce {
      animation: bouncer 1.5s infinite;
    }

    @keyframes bouncer {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(8px);
      }
      60% {
        transform: translateY(4px);
      }
    }

    .pulse {
      --pulse-color: rgba(0, 0, 0, 0.4); /* default gray */
      animation: pulse-animation 1.7s ease-out infinite;
    }
    @keyframes pulse-animation {
      0% {
        box-shadow: 0 0 0 0 var(--pulse-color);
      }
      100% {
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
      }  
     
    }

    /* Optional modifiers */
    .pulse-green { --pulse-color: rgba(25, 135, 84, 0.4); }
    .pulse-blue { --pulse-color: rgba(0, 123, 255, 0.4); }
    .pulse-red { --pulse-color: rgba(220, 53, 69, 0.4); }



 /* ==================
    AI ASSISTANT
    ================== */
    .assistant {
        padding: 4rem !important;
        background-color: #f9f9f9;
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid #ddd;
    }


    #assistant-title{
        font-size: clamp(30px,5vw,52px);
        letter-spacing: -1px;
        margin-bottom: 2rem;
    }
    .chat-window {
        max-height: 50vh !important;
        overflow-y: auto;
        margin-bottom: 1em;
    }

    .chat-message {
        margin: 0.5em 0;
        padding: 0.5em;
        border-radius: 8px;
        line-height: 1.4;
    }
    .chat-message h1,.chat-message h2,.chat-message h3,.chat-message h4,.chat-message h5,.chat-message h6 {
        font-size: 1.125rem;
        font-weight: 600;
        margin: 0.5em 0 0.25em;
        line-height: 1.3;
    }
    .from-user {
        background: #d9f2fd;
        text-align: right;
        margin-left: 5em;
    }

    .from-ai {
        background: #f0f0f0;
        text-align: left;
        margin-right: 5em;
    }

    .chat-form {
        gap: 0.5em;
    }

    #chat-input {
        flex: 1;
        padding: 0.5em;
        border-radius: 6px;
        border: 1px solid #ccc;
        width: 100%;
    }

    .chat-message.from-user {
        text-align: right;
    }

    .chat-message.from-user .chat-header {
        justify-content: flex-end;
    }

    .chat-message.from-user .chat-body {
        text-align: right;
    }


    .chat-message.typing .chat-body::after {
        content: '';
        display: inline-block;
        width: 0.75em;
        height: 0.75em;
        border: 2px solid #999;
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin 0.6s linear infinite;
        margin-left: 0.5em;
        vertical-align: middle;
    }

    #typing-dots .dots {
        animation: pulseDots 1.2s infinite steps(3);
        font-size: 1.5rem;
        font-weight: bold;
        letter-spacing: 2px;
    }


    .chat-message.from-ai {
        opacity: 0;
        transform: translateY(10px);
        animation: fadeInUp 0.4s ease forwards;
    }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


    @keyframes pulseDots {
        0%   { content: ''; }
        33%  { content: '.'; }
        66%  { content: '..'; }
        100% { content: '...'; }
    }



    @keyframes spin {
        to { transform: rotate(360deg); }
    }


@media (max-width: 1200px){
    .assistant {
        padding: 2rem !important;
        margin-bottom: 2rem;        
    }
}

@media (max-width: 991px){
    .assistant {
        padding: 3rem !important;
        margin-bottom: 2rem;        
    }
}

@media (max-width: 768px){
    .spacer{
        max-height: 15px;
    }
    .assistant {
        padding: 1.5rem 1rem !important;
        margin-bottom: 2rem;
    }
    #step1,#step2,#step3{
      position: relative;
      margin-left: auto;
      margin-right: auto;
      max-width: 90vw;
      padding: 30px;  
    }
    .btn-gh {
        min-width: unset;
        max-width: auto;
    }
}