/* ========== THEME VARIABLES (optional but handy) ========== */

:root {

    --brand-primary: #ffc727db; /* yellow accent from cards/banner */

    --brand-primary-dark: #ffc727db;

    --brand-dark: #1a1f2d;    /* dark/navy banner */

    --brand-light-bg: #ffffff;

}



/* ========== CORE CONTAINER ELEMENTS ========== */



/* Floating Button (launcher) */

.chatbot-button {

    position: fixed;

    bottom: 80px;

    right: 20px;

    width: 60px;

    height: 60px;

    background: var(--brand-primary);

    border-radius: 50%;

    box-shadow: 0 4px 15px rgba(0,0,0,0.25);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform .25s ease;

    z-index: 1000;

    font-size: 14px;

    line-height: 1.4;

    font-family: var(--font-family-2, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);

}

.chatbot-button img {

    width: 32px;

    height: 32px;

}

.chatbot-button:hover {

    transform: scale(1.08);

}



/* Chat Window Shell */

.chatbot-window {

    position: fixed;

    bottom: 10px;

    right: 55px;

    width: 360px;

    height: 520px;     /* ← FIXED HEIGHT */



    display: none;

    flex-direction: column;

    overflow: hidden;



    background: var(--brand-light-bg);

    border-radius: 10px;

    border: 1px solid #dcdcdc;

    box-shadow: 0 16px 40px rgba(0,0,0,0.3);



    z-index: 1100;

    font-size: 14px;

    line-height: 1.4;

    font-family: var(--font-family-2, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);

}



/* ===== BIGGER CHAT WINDOW (Desktop) ===== */

.chatbot-window.chatbot-fullscreen {

    position: fixed;

    bottom: 20px;

    right: 55px;



    width: 520px;

    height: 720px;



    max-height: none;

    border-radius: 10px;

    border: 1px solid #dcdcdc;

    box-shadow: 0 16px 40px rgba(0,0,0,0.3);



    transition: all .25s ease;

}



/* ===== LARGE TABLETS (1024px ↓) ===== */

@media (max-width: 1024px) {

    .chatbot-window.chatbot-fullscreen {

        width: 450px;

        height: 650px;

        bottom: 20px;

        right: 20px;

    }

}



/* ===== SMALL TABLETS / LARGE PHONES (768px ↓) ===== */

@media (max-width: 768px) {

    .chatbot-window.chatbot-fullscreen {

        width: 90%;

        height: 80vh;

        right: 5%;

        bottom: 10px;

    }

}



/* ===== MOBILE PHONES (480px ↓) ===== */

@media (max-width: 480px) {

    .chatbot-window.chatbot-fullscreen {

        width: 100%;

        height: 100vh;

        right: 0;

        bottom: 0;

        top: 0;

        left: 0;



        border-radius: 0;

        border: none;

    }

}





#chatFullscreen {

    background: none;

    border: none;

    padding: 0 4px;

    cursor: pointer;

    color: #fff;

    font-size: 18px;

    line-height: 1;

}







/* ========== HEADER ========== */



.chat-header {

    background: var(--brand-dark);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: space-between;

    column-gap: 12px;

    padding: 10px 12px;

}



.chat-header .chat-logo {

    max-height: 28px;

    max-width: 160px;

    object-fit: contain;

}



.chat-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}



#chatRetry {

    background: none;

    border: none;

    padding: 0;

    line-height: 0;

    cursor: pointer;

}

#chatRetry img {

    width: 20px;

    height: 20px;

    display: block;

    filter: invert(1) brightness(1.5);

}



.chat-close {

    background: none;

    border: none;

    cursor: pointer;

    color: #fff;

    font-size: 20px;

    line-height: 1;

    font-weight: 600;

    padding: 0 4px;

}



/* ========== BODY (messages area) ========== */



.chat-body {

    background: #ffffff;

    flex: 1;

    overflow-y: auto;

    padding: 16px;

    display: flex;

    flex-direction: column;

    row-gap: 10px;



    scrollbar-width: thin;

    scrollbar-color: #bbb #f9f9f9;

}

.chat-body::-webkit-scrollbar {

    width: 6px;

}

.chat-body::-webkit-scrollbar-thumb {

    background-color: #bbb;

    border-radius: 10px;

}



/* Message bubbles */

.chat-message {

    max-width: 85%;

    border-radius: 8px;

    font-size: 14px;

    line-height: 1.4;

    padding: 10px 12px;

    word-wrap: break-word;

    box-shadow: 0 4px 10px rgba(0,0,0,0.06);

    animation: fadeUp .25s ease;

    background: #f4f4f4;

    color: #000;

    align-self: flex-end; /* default: user */

}



/* Bot bubble */

.chat-message.bot {

    background: var(--brand-dark);

    color: #fff;

    align-self: flex-start;

}



/* Force paragraphs inside bot messages to stay white */

.chat-message.bot p,

.bot p {

    color: #fff;

    margin: 0;

}



/* User bubble */

.chat-message.user {

    background: #d5cfcf;

    color: #000;

    align-self: flex-end;

}



/* ========== SUGGESTION CHIPS / OPTIONS ========== */



.suggestions {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    row-gap: 8px;

    width: 100%;

}



/* Individual chips (main menu, services menu, etc.) */

.suggestion-chip {

    display: inline-block;

    background: var(--brand-primary);

    color: #1a1f2d;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 600;



    padding: 10px 14px;

    border-radius: 20px;

    cursor: pointer;

    box-shadow: 0 3px 8px rgba(0,0,0,0.15);

    transition: all .2s ease;

    border: 1px solid transparent;

    max-width: 100%;

    text-align: left;

    word-break: break-word;

}



.suggestion-chip:hover {

    background: #ffffff;

    color: var(--brand-dark);

    border-color: var(--brand-primary);

    transform: scale(1.05);

}



/* serviceSuggestions group specifically */

#serviceSuggestions {

    display: flex;

    flex-direction: column;

    row-gap: 8px;

    width: 100%;

}



/* YES / NO group */

#yesNoOptions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    width: 100%;

    margin-top: 8px;

    justify-content: flex-start;

}

#yesNoOptions .suggestion-chip {

    min-width: 72px;

    text-align: center;

    padding: 10px 14px;

    border-radius: 20px;

    background: var(--brand-primary);

    color: #1a1f2d;

    border: 1px solid transparent;

    box-shadow: 0 3px 8px rgba(0,0,0,0.15);

    transition: all .2s ease;

}

#yesNoOptions .suggestion-chip:hover {

    background: var(--brand-primary-dark);

    color: #1a1f2d;

    border-color: var(--brand-primary-dark);

    transform: translateY(-2px);

}



/* Close Chat button (appears at end of flow) */

#finalCloseBtn {

    display: block;

    background: var(--brand-primary);

    color: #1a1f2d;

    border: none;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;

    cursor: pointer;



    padding: 10px 12px;

    margin: 16px auto 8px auto;

    width: calc(100% - 32px);

    max-width: 200px;



    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

    transition: background .2s ease, box-shadow .2s ease;

}

#finalCloseBtn:hover {

    background: var(--brand-primary-dark);

    box-shadow: 0 6px 16px rgba(0,0,0,0.3);

}



/* ========== CONTACT FORM BLOCK ========== */



.chat-form {

    background: #ffffff;

    border: 1px solid #e2e2e2;

    border-radius: 8px;



    display: flex;

    flex-direction: column;

    gap: 12px;



    padding: 16px;

    width: 100%;



    box-shadow: 0 4px 12px rgba(0,0,0,0.08);

    font-family: inherit;

    font-size: 14px;

    line-height: 1.4;

}



/* Inputs */

.chat-form input,

.chat-form select {

    width: 100%;

    background: #fff;

    border: 1px solid #cfd3d9;

    border-radius: 6px;



    padding: 10px 12px;

    font-size: 14px;

    line-height: 1.4;

    color: #1a1f2d;

    outline: none;

    font-family: inherit;

}



/* Placeholder color */

.chat-form input::placeholder,

.chat-form section::placeholder {

    color: #888;

    opacity: 1;

}



/* Focus styles */

.chat-form input:focus,

.chat-form select:focus {

    border-color: var(--brand-primary);

    box-shadow: 0 0 0 2px rgba(255,199,39,0.3);

}



/* Submit button in the form */

.chat-form button#submitBtn {

    width: 100%;

    background: var(--brand-primary);

    color: #1a1f2d;

    border: none;

    border-radius: 6px;



    padding: 10px 12px;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 600;

    cursor: pointer;

    transition: background .2s ease, box-shadow .2s ease;

    font-family: inherit;

}



.chat-form button#submitBtn:hover {

    background: var(--brand-primary-dark);

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

}



/* ========== FOOTER INPUT BAR (user typing area) ========== */



.chat-footer {

    background: #f8f9fa;

    border-top: 1px solid #ddd;

    padding: 10px;

    display: flex;

    align-items: center;

    column-gap: 8px;

    font-size: 14px;

    line-height: 1.4;

}



/* User typing field */

#chatInput {

    flex: 1;

    background: #fff;

    border: 1px solid #cfd3d9;

    border-radius: 20px;

    padding: 8px 12px;

    font-size: 14px;

    line-height: 1.4;

    color: #1a1f2d;

    outline: none;

    font-family: inherit;

}

#chatInput::placeholder {

    color: #888;

    opacity: 1;

}

#chatInput:focus {

    border-color: var(--brand-primary);

    box-shadow: 0 0 0 2px rgba(255,199,39,0.3);

}

#chatInput:disabled {

    background: #eceeef;

    color: #999;

    cursor: not-allowed;

}



/* Send button (circle with send icon) */

#sendBtn {

    background: var(--brand-primary);

    border: none;

    border-radius: 50%;

    width: 40px;

    height: 40px;



    display: flex;

    align-items: center;

    justify-content: center;



    color: #1a1f2d;

    font-size: 16px;

    line-height: 1.4;

    cursor: pointer;

    transition: background .2s ease, box-shadow .2s ease;

}

#sendBtn img {

    width: 20px;

    height: 20px;

    filter: invert(0); /* keep icon dark or adjust your SVG directly */

}

#sendBtn:disabled {

    background: #999;

    cursor: not-allowed;

    box-shadow: none;

}

#sendBtn:not(:disabled):hover {

    background: var(--brand-primary-dark);

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

}



/* ========== ANIMATIONS ========== */



@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: scale(0.95);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}



/* ========== RESPONSIVE (mobile narrow screens) ========== */



@media screen and (max-width: 480px) {

    .chatbot-window {

        width: 90%;

        right: 5%;

        bottom: 80px;

        max-height: 70vh;

    }

    .chat-header .chat-logo {

        max-width: 140px;

        max-height: 24px;

    }

}



/* Floating “open chat” button (legacy) */

.open-chat-popup {

    position: fixed;

    bottom: 20px;

    right: 20px;

    padding: 14px 18px;

    background: #ffc727db;

    color: #1a1f2d;

    font-size: 14px;

    font-weight: 600;

    border-radius: 30px;

    box-shadow: 0 6px 12px rgba(0,0,0,0.3);

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 10px;

    transition: all 0.3s ease;

    z-index: 50;

}



.open-chat-popup:hover {

    transform: translateY(-4px);

}



/* Add label + icon */

.open-chat-popup::before { content: "Chat with Us"; }

.open-chat-popup::after {

    content: "";

    width: 20px;

    height: 20px;

    background: url('/mnt/data/ef9675e9-d4ed-4e2b-8d59-acf3c080c161.png') center/cover no-repeat;

}





.instruction-text {

    margin: 10px 0;

    font-size: 14px;

    color: #666;

}



#chatbotContainer {

    display: block;

}



#chatbotContainer1 {

    display: none;

}



.chat-form .phone-group {

  display: flex;

  gap: 8px;

  margin-top: 8px;

}



.chat-form .phone-group select,

.chat-form .phone-group input {

  flex: 1;

}

.field-error{
  margin-top: 6px;
  font-size: 12px;
  color: #ff3b30;
}

.input-error{
  border: 1.5px solid #ff3b30 !important;
}