/* ======================================== CSS VARIABLES & RESET ======================================== */
 .popup-wrapper {
    /* --primary-gradient: var(--primary-color);
     */
     --chat-width: 450px;
     --chat-height: 520px;
    /* --header-height: 56px;
     */
    /* --border-radius: 16px;
     */
     --transition-speed: 0.3s;
     -webkit-overflow-scrolling: touch;
     --green-600: #004e38;
     --green-1000: #00231b;
     --black-soft: #212220;
     --black-softer: #323332;
     --silver-700: #adb0af;
     --silver-900: #565858;
     --green-100: #e5edeb;
     --gold-600: #b79257;
     --size-xs: 11px;
     --size-xxs: 6px;
}
 .popup-wrapper * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* ======================================== POPUP WRAPPER & LAYOUT ======================================== */
 .popup-wrapper {
     max-width: 1200px;
     margin: 0 auto;
}
 .popup-wrapper {
     width: 100% !important;
     margin: 0;
     padding: 0;
     height: auto;
}
 .popup-wrapper h1 {
     font-size: 36px;
     color: #111827;
     text-align: center;
}
 .popup-wrapper p {
     margin-bottom: 1rem;
     text-align: left;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 1.42;
     color: var(--black-softer);
     padding: 0;
}
 @media (max-width: 768px) {
     .popup-wrapper {
         padding: 24px 16px;
         overflow: hidden;
    }
     .popup-wrapper h1 {
         font-size: 28px;
    }
}
/* ======================================== CHATBOT POPUP ======================================== */
 #chatbot-popup {
     display: none;
     position: fixed;
     bottom: 32px;
     right: 32px;
     width: var(--chat-width);
     height: var(--chat-height);
     background: white;
     box-shadow: 0 18px 40px -5px rgba(0, 0, 0, 0.2), 0 15px 20px -5px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     opacity: 0;
     transform-origin: bottom right;
     transition: all var(--transition-speed) ease-in-out;
     z-index: 999;
}
 #chatbot-popup.visible {
     display: block;
     opacity: 1;
}
 @media (max-width: 768px) {
     #chatbot-popup {
         width: 100%;
         height: 100%;
         border-radius: 0;
         left: 0;
         top: 0;
    }
}
 @media (hover: none) and (pointer: coarse) {
     #chatbot-popup {
         -webkit-overflow-scrolling: touch;
    }
}
/* ======================================== CHATBOT HEADER ======================================== */
 #chatbot-header {
     background: linear-gradient(90deg, var(--green-600) 0%, var(--green-1000) 100%);
     padding: 12px var(--size-xs);
     height: 50px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: white;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: 1;
     border-bottom: 3px solid var(--gold-600);
}
 .header-title {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 16px;
     font-weight: 500;
}
 .header-buttons {
     display: flex;
     gap: 12px;
     align-items: center;
     justify-content: center;
}
 #close-button {
     color: white;
     font-family: 'Font Awesome 7 Pro';
     font-size: 20px;
     font-style: normal;
     font-weight: 400;
     line-height: 1;
     margin: 0;
     background: transparent;
}
/* ======================================== OPEN CHAT BUTTON ======================================== */
 #open-chat {
     position: fixed;
     bottom: 32px;
     right: 32px;
     width: 56px;
     height: 56px;
     background: #115740;
     border: 1px solid white;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all var(--transition-speed) ease-in-out;
     z-index: 998;
     padding: var(--size-xxs) var(--size-xs);
     font-size: 14px;
     line-height: 1;
     letter-spacing: 0;
     border-radius: 50%;
}
 #open-chat.hidden {
     opacity: 0;
     transform: scale(0.95) translateY(10px);
     pointer-events: none;
}
 #open-chat:hover {
     background: #28463d;
}
 #open-chat:focus {
     outline: 3px solid rgba(79, 70, 229, 0.5);
     outline-offset: 2px;
}
 #open-chat .open-chat-text {
     font-size: 14px;
     line-height: 1;
     letter-spacing: 0;
     display: none;
}
 #open-chat i {
     font-size: 14px;
     display: inline-block;
     padding-left: var(--size-xs);
     width: max-content;
     height: max-content;
     font-weight: 400;
     color: white;
     transition: transform 0.2s ease;
}
 #open-chat svg {
     width: 20px !important;
     padding-left: 0;
}
/* ======================================== WEBCHAT CONTAINER ======================================== */
 #webchat {
     height: calc(100dvh - 50px);
     background-color: white;
     position: relative;
     overflow-x: hidden;
     width: 100%;
}
 @media (min-width: 768px) {
     #webchat {
         height: calc(var(--chat-height) - 50px);
    }
}
 #webchat > div {
     position: relative;
     z-index: 2;
}
 .webchat-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(255, 255, 255, 0.85);
     pointer-events: none;
     z-index: 1;
}
/* ======================================== WEBCHAT ICON BUTTONS ======================================== */
 #webchat .icon-button {
     background: none;
     border: none;
     color: var(--header-textColor);
     cursor: pointer;
     padding: 8px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s ease;
}
 #webchat .icon-button:hover {
     color: var(--header-textColor);
     background: rgba(255, 255, 255, 0.1);
}
 #webchat .icon-button:focus {
     outline: 2px solid rgba(255, 255, 255, 0.5);
     outline-offset: 2px;
}
 #webchat .webchat__icon-button {
     justify-content: flex-end;
     padding-right: var(--size-xs);
}
/* ======================================== WEBCHAT TRANSCRIPT ======================================== */
 .webchat__basic-transcript {
     position: relative;
     overscroll-behavior: contain !important;
     overflow: auto !important;
}
 .webchat__basic-transcript .webchat__basic-transcript__scrollable {
     overflow: auto !important;
     overscroll-behavior: contain;
}
 .webchat__basic-transcript .webchat__basic-transcript__filler {
     flex: 1 1 0%;
}
 #webchat .webchat__basic-transcript__content {
     white-space: pre-wrap !important;
     word-break: break-word !important;
}
/* ======================================== WEBCHAT BUBBLES & CONTENT ======================================== */
 #webchat .webchat__bubble {
     max-width: calc(100% - 71px) !important;
     margin: 0;
}
 #webchat .webchat__bubble__content {
     padding: 0;
     background: #e7eeec;
     border-radius: var(--size-xxs);
     border: none;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
     color: var(--black-softer);
     min-height: auto;
}
 #webchat .webchat__text-content {
     padding: 12px 16px !important;
}
 #webchat .webchat__text-content.webchat__text-content--is-markdown p:not(:last-child) {
     margin-bottom: 1rem !important;
}
/* ======================================== WEBCHAT LISTS ======================================== */
 #webchat .webchat__basic-transcript__content ul, #webchat .webchat__basic-transcript__content ol, #webchat .webchat__bubble__content ul, #webchat .webchat__bubble__content ol {
     padding-left: 24px !important;
     margin: 8px 0 !important;
     list-style-position: outside !important;
}
 #webchat .webchat__basic-transcript__content li, #webchat .webchat__bubble__content li {
     margin: 4px 0 !important;
     padding-left: 4px !important;
}
/* ======================================== WEBCHAT STACKED LAYOUT ======================================== */
 .webchat__stacked-layout.webchat__stacked-layout--hide-avatar .webchat__stacked-layout__avatar-gutter, .webchat__stacked-layout.webchat__stacked-layout--show-avatar .webchat__stacked-layout__avatar-gutter {
     width: 44px !important;
}
 .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__stacked-layout__main {
     justify-content: flex-start !important;
}
 #webchat .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__bubble__content {
     background: white !important;
     border-radius: var(--size-xxs);
     border: 1px solid #d0d3d4;
}
 .webchat__stacked-layout.webchat__stacked-layout--from-user .webchat__stacked-layout__main {
     justify-content: flex-end !important;
}
 .webchat__stacked-layout.webchat__stacked-layout--from-user .webchat__stacked-layout__avatar-gutter, .webchat__stacked-layout.webchat__stacked-layout--from-user .webchat__bubble__nub-pad {
     display: none;
}
 #webchat .webchat__stacked-layout__content {
     gap: var(--size-xxs) !important;
}
/* ======================================== WEBCHAT AVATARS ======================================== */
 .webchat__imageAvatar__image {
     width: 44px !important;
     height: 44px !important;
}
 .webchat__initialsAvatar, .webchat__defaultAvatar {
     width: 100% !important;
     height: 100% !important;
     min-height: 44px !important;
}
 .webchat__imageAvatar {
     width: 100% !important;
     height: 100% !important;
}
 #webchat .webchat__defaultAvatar {
     border-radius: 0 !important;
}
 #webchat .webchat__imageAvatar__image img {
     height: auto;
     left: 50%;
     position: static !important;
     top: 50%;
     transform: none !important;
     width: 100%;
}
/* ======================================== WEBCHAT SEND BOX ======================================== */
 .webchat__send-box-text-box {
     padding: var(--size-xs) !important;
}
 #webchat .webchat__send-box .webchat__send-box__main {
     border: 1px solid #d0d3d4 !important;
     margin: var(--size-xs) !important;
     margin-top: var(--size-xxs) !important;
     border-radius: 8px;
     align-items: center;
     min-height: auto;
}
 #webchat .webchat__send-box .webchat__send-box__button {
     margin: 0 !important;
     min-height: auto !important;
}
 .webchat__send-box-text-box .webchat__send-box-text-box__input::placeholder, .webchat__send-box-text-box__input {
     color: var(--black-softer) !important;
     font-size: 14px !important;
     font-style: normal !important;
     font-weight: 400 !important;
     line-height: 1.42 !important;
}
 @media (hover: none) and (pointer: coarse) {
     .webchat__send-box-text-box__input {
         font-size: 16px !important;
    }
}
 svg.webchat__send-icon {
     fill: var(--silver-700) !important;
}
 .webchat__send-box__main:has(.webchat__send-box-text-box__input:focus) svg.webchat__send-icon {
     fill: var(--black-soft) !important;
}
/* ======================================== WEBCHAT SUGGESTED ACTIONS ======================================== */
 #webchat .webchat__suggested-actions__flow-box {
     display: flex !important;
     flex-wrap: wrap !important;
     justify-content: flex-end !important;
     align-items: center !important;
     padding-bottom: 0 !important;
}
 #webchat webchat__suggested-actions__item-box {
     padding: 5px;
     padding-bottom: 0 !important;
}
 #webchat .webchat__suggested-action {
     display: flex;
     overflow: hidden;
     font-size: 12px !important;
     font-style: normal;
     font-weight: 400 !important;
     line-height: 1.5 !important;
     padding: 0px 8px !important;
     color: var(--black-soft) !important;
     border-radius: 8px !important;
     border: 1px solid #d0d3d4 !important;
     background: white !important;
     height: auto !important;
}
 #webchat .webchat__suggested-action:hover {
     background-color: #f0f1f2 !important;
}
 #webchat .webchat__suggested-actions__button-text {
     overflow: hidden;
     text-overflow: ellipsis;
     text-transform: none !important;
     letter-spacing: 0 !important;
}
/* ======================================== WEBCHAT ACTIVITY STATUS ======================================== */
 .webchat__activity-status--slotted {
     color: #535455;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: 1.5;
}
/* ======================================== ADAPTIVE CARDS ======================================== */
 .webchat__adaptive-card-renderer .ac-pushButton {
     width: 100% !important;
}
 .ac-container.ac-adaptiveCard {
     background: white !important;
     font-size: 14px !important;
     font-style: normal;
     font-weight: 400;
     line-height: 1.4 !important;
     padding: 12px !important;
     gap: 0;
}
 button.ac-pushButton.ac-selectable.primary {
     background: var(--green-600) !important;
     border-radius: 4px;
     text-transform: none;
     letter-spacing: 0;
     font-size: 18.36px !important;
     font-weight: 500 !important;
     padding: var(--size-xs) 44px !important;
}
 button.ac-pushButton.ac-selectable.primary:hover {
     background-color: #001f16 !important;
}
 button.ac-pushButton.style-default.ac-selectable[aria-pressed='true'] {
     background: var(--green-100);
     border-color: black;
     color: black;
}
 span.ac-textRun {
     font-size: 14px !important;
     font-style: normal;
     font-weight: 400;
     line-height: 1.42;
     color: var(--black-softer);
}
 input.ac-textInput {
     padding: 4px 0 4px var(--size-xxs);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 1.42;
     color: var(--silver-900);
}
/* ======================================== CONTENT GRID & BOXES ======================================== */
 #chatbot-popup .content-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 32px;
     margin-bottom: 32px;
}
 @media (max-width: 768px) {
     #chatbot-popup .content-grid {
         grid-template-columns: 1fr;
    }
}
 #chatbot-popup .content-box {
     background: linear-gradient(135deg, #e6e6e6, #c4c4c4, #9f9f9f);
     padding: 32px;
     border-radius: 12px;
     box-shadow: 0 4px var(--size-xxs) -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     min-height: 300px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     position: relative;
     overflow: hidden;
}
 #chatbot-popup .content-box::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
}
 #chatbot-popup .content-box.featured {
     grid-column: span 2;
     min-height: 350px;
     background: linear-gradient(135deg, #e6e6e6, #c4c4c4, #9f9f9f);
     color: #000000;
}
 @media (max-width: 768px) {
     #chatbot-popup .content-box.featured {
         grid-column: span 1;
    }
}
 #chatbot-popup .content-box h2 {
     font-size: 24px;
     margin-bottom: 16px;
     position: relative;
}
 #chatbot-popup .content-box p {
     font-size: 16px;
     color: #6b7280;
     margin-bottom: 0;
}
 #chatbot-popup .content-box.featured p {
     color: #000000;
}