/* ------------------------------------------------------------------------
   SoulTrips Chat Widget
   All selectors are prefixed `.ctw-` to avoid colliding with the global
   /assets/css/styles.css sheet. Colors/fonts reuse the site's existing
   :root custom properties (--ember, --ink, --cream, --sand, --gold,
   --font-playfair, --font-dm) so the widget matches the site theme without
   redefining brand tokens.
   ------------------------------------------------------------------------ */

.ctw-root {
    position: fixed;
    z-index: 9999;
    right: 24px;
    bottom: 24px;
    font-family: var(--font-dm, sans-serif);
}

/* Floating action button ------------------------------------------------ */

.ctw-fab {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: var(--ember, #c8602a);
    color: var(--white, #fdfaf5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(15, 12, 10, 0.25);
    transition: transform 0.2s ease, background 0.2s ease;
}

.ctw-fab:hover {
    background: var(--ember-light, #e8845a);
    transform: translateY(-2px);
}

/* Popup panel ------------------------------------------------------------ */

.ctw-panel {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 380px;
    height: 600px;
    max-height: calc(100vh - 48px);
    background: var(--white, #fdfaf5);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(15, 12, 10, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ctw-panel-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.ctw-panel-fullscreen {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
}

/* Header ------------------------------------------------------------------ */

.ctw-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--ink, #0f0c0a);
    color: var(--white, #fdfaf5);
}

.ctw-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ctw-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ember, #c8602a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.ctw-header-title {
    font-family: var(--font-playfair, serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.ctw-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    text-transform: capitalize;
    color: var(--sand, #d4c4a0);
}

.ctw-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9a9a9a;
}

.ctw-status-connected { background: #4caf50; }
.ctw-status-connecting { background: var(--gold, #c9a84c); }
.ctw-status-reconnecting { background: var(--gold, #c9a84c); }
.ctw-status-disconnected { background: #c0392b; }

.ctw-header-actions {
    display: flex;
    gap: 4px;
}

.ctw-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--white, #fdfaf5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ctw-icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Mobile tabs (fullscreen only, shown <=768px via media query below) ----- */

.ctw-mobile-tabs {
    display: none;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--sand, #d4c4a0);
}

.ctw-mobile-tab {
    flex: 1;
    border: none;
    background: var(--cream, #f5f0e8);
    padding: 10px;
    font-family: var(--font-dm, sans-serif);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink, #0f0c0a);
    cursor: pointer;
}

.ctw-mobile-tab-active {
    background: var(--white, #fdfaf5);
    color: var(--ember, #c8602a);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--ember, #c8602a);
}

/* Body / layout ------------------------------------------------------------ */

chat-widget-messages {
    flex: 1 1 auto;
    min-height: 0;
}

.ctw-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.ctw-body-fullscreen {
    display: grid;
    grid-template-columns: 4fr 8fr;
}

.ctw-chat-pane {
    width:100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ctw-tours-pane {
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    background: var(--cream, #f5f0e8);
    border-left: 1px solid var(--sand, #d4c4a0);
}

.ctw-tours-heading {
    font-family: var(--font-playfair, serif);
    font-size: 1.1rem;
    margin: 0 0 14px;
    color: var(--ink, #0f0c0a);
}

/* Messages ------------------------------------------------------------------ */

.ctw-messages {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.ctw-messages-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ctw-bubble-row {
    display: flex;
    justify-content: flex-start;
}

.ctw-bubble-row-user {
    justify-content: flex-end;
}

.ctw-bubble {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.4;
}

.ctw-bubble-bot {
    background: var(--cream, #f5f0e8);
    color: var(--ink, #0f0c0a);
    border-bottom-left-radius: 4px;
}

.ctw-bubble-user {
    background: var(--ember, #c8602a);
    color: var(--white, #fdfaf5);
    border-bottom-right-radius: 4px;
}

.ctw-bubble-text {
    margin: 0;
}

.ctw-bubble-time {
    display: block;
    margin-top: 4px;
    font-size: 0.65rem;
    opacity: 0.65;
}

.ctw-composer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--sand, #d4c4a0);
    background: var(--white, #fdfaf5);
}

.ctw-composer-input {
    flex: 1;
    border: 1px solid var(--sand, #d4c4a0);
    border-radius: 20px;
    padding: 9px 16px;
    font-family: var(--font-dm, sans-serif);
    font-size: 0.88rem;
    outline: none;
}

.ctw-composer-input:focus {
    border-color: var(--ember, #c8602a);
}

.ctw-composer-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--ember, #c8602a);
    color: var(--white, #fdfaf5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.ctw-composer-send:hover {
    background: var(--ember-light, #e8845a);
}

/* Tour cards ------------------------------------------------------------------ */

.ctw-tours {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
}

.ctw-tour-card {
    background: var(--white, #fdfaf5);
    border: 1px solid var(--ember, #d4c4a0);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
    animation: ctwFlash 0.4s ease-in-out;
}

.ctw-tour-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(15, 12, 10, 0.12);
}

@keyframes ctwFlash {
    0%   { opacity: 0.5; }
    100% { opacity: 1; }
}

.ctw-tour-img {
    background: linear-gradient(135deg, #1c3a5f, #2e5f8a);
    position: relative;
    min-height: 200px;
}
.ctw-tour-img img {
    object-position:center;
    object-fit: cover;
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
}

.ctw-tour-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--ember);
    color: #fff;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 2px;
    font-weight: 500;
}
.ctw-tour-badge.travel_tip{background-color:var(--ember);}
.ctw-tour-badge.destination{background-color:var(--sage);}
.ctw-tour-badge.tour{background-color:var(--gold);}
.ctw-tour-badge.destination_guide{background-color:var(--terracotta);}

.ctw-tour-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.ctw-tour-destination {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ctw-tour-name {
    font-family: var(--font-playfair, serif);
    font-size: 0.95rem;
    margin: 0;
    color: var(--ink, #0f0c0a);
}

.ctw-tour-summary {
    font-size: 0.76rem;
    color: #5a4f47;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ctw-tour-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    flex-direction: column;
}

.ctw-tour-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.75rem;
    border-top: 1px solid #ddd;
    padding-top: 10px 0;
    color: #5a4f47;
}

.ctw-tour-price {
    font-family: var(--font-playfair, serif);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--ember, #c8602a);
}

.ctw-tour-price em {
    font-style: normal;
    font-weight: 400;
    color: #8a7d70;
    font-size: 0.68rem;
}

.ctw-btn {
    flex: 1;
    border-radius: 4px;
    border: 1px solid var(--ink);
    padding: 7px 8px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    background: transparent;
    color: var(--ember, #c8602a);
    text-align: center;
    text-decoration: none;
}

.ctw-btn-primary {
    background: var(--ink);
    color: var(--white, #fdfaf5);
}

.ctw-btn-primary:hover {
    border: 1px solid var(--ember);
    background: var(--ember);
}

.ctw-btn-ghost:hover {
    background: var(--cream, #f5f0e8);
}

/* Loading / error states (chat pane, while the "suggest" call is in flight) --- */

.ctw-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ctw-loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink, #d4c4a0);
    animation: ctw-loading-bounce 1s infinite ease-in-out;
}

.ctw-loading-dot:nth-child(2) { animation-delay: 0.15s; }
.ctw-loading-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes ctw-loading-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40% { transform: translateY(-6px); opacity: 1; }
}

.ctw-load-error {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    text-align: center;
    color: #5a4f47;
    font-size: 0.85rem;
}

/* User info form ------------------------------------------------------------- */
chat-widget-user-form{height:100%;}
.ctw-body-fullscreen .ctw-form-body {
    max-width: 350px;
    margin: 0 auto;
}
.iti__country-list{max-width:350px;}

.ctw-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    height: 100%;
}

.ctw-form-welcome {
    background: var(--cream, #f5f0e8);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: var(--ink, #0f0c0a);
    margin: 0 0 16px;
}

.ctw-form-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ctw-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ctw-form-field label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a7d70;
}

.ctw-form-field input {
    border: 1px solid var(--sand, #d4c4a0);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: var(--font-dm, sans-serif);
    font-size: 0.88rem;
    outline: none;
}

.ctw-form-field input:focus {
    border-color: var(--ember, #c8602a);
}

/* intl-tel-input wraps #ctwPhone in its own .iti container at runtime -
   match the site's field styling without touching padding-left, which the
   library sets dynamically to make room for its flag button. */
.ctw-form-field .iti {
    width: 100%;
}

.ctw-form-field .iti input {
    width: 100%;
    border: 1px solid var(--sand, #d4c4a0);
    border-radius: 6px;
    font-family: var(--font-dm, sans-serif);
    font-size: 0.88rem;
    outline: none;
}

.ctw-form-field .iti input:focus {
    border-color: var(--ember, #c8602a);
}

.ctw-form-error {
    color: #b71c1c;
    font-size: 0.78rem;
    margin: 0;
}

.ctw-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* Bot HTML content, in-bubble loading/error, disabled composer, End Chat --- */

.ctw-bubble-error {
    background: #fbe4e1;
    color: #8a2e1f;
}

.ctw-bubble-loading {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
}

.ctw-bubble-loading .ctw-loading-dot {
    background: currentColor;
    opacity: 0.5;
}

.ctw-bubble-html {
    line-height: 1.5 rem;
}

.ctw-bubble-html br {
    display:block;
}
.ctw-bubble-html ul li p,
.ctw-bubble-html p {
    margin: 0 0 8px;
}

.ctw-bubble-html p:last-child {
    margin-bottom: 0;
}

.ctw-bubble-html h2,
.ctw-bubble-html h3 {
    font-family: var(--font-playfair, serif);
    font-size: 1rem;
    margin: 0 0 6px;
}

.ctw-bubble-html ul,
.ctw-bubble-html ol {
    margin: 0 0 10px;
    padding-left: 18px;
}
.ctw-bubble-html ul li:not(:last-child),
.ctw-bubble-html ol li:not(:last-child) {
    margin-bottom:10px;
}


.ctw-bubble-html a {
    color: var(--ember, #c8602a);
    text-decoration: underline;
}

.ctw-composer-input:disabled,
.ctw-composer-send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ctw-end-chat {
    flex: 0 0 auto;
    padding: 0 0 10px 0;
    text-align: left;
}

.ctw-end-chat button {
    border: none;
    background: transparent;
    font-size: 0.72rem;
    color: #8a7d70;
    text-decoration: underline;
    cursor: pointer;
}

.ctw-end-chat button:hover {
    color: var(--ember, #c8602a);
}

/* Responsive: mobile fullscreen tabs, matching the codebase's 768px breakpoint */

@media (max-width: 768px) {
    .ctw-panel {
        width: calc(100vw - 48px);
    }

    .ctw-panel-fullscreen .ctw-mobile-tabs {
        display: flex;
    }

    .ctw-body-fullscreen {
        display: block;
    }

    .ctw-body-fullscreen .ctw-form-body{
        max-width:100%;
    }

    .ctw-body-fullscreen .ctw-chat-pane {
        display: flex;
        height: 100%;
    }

    .ctw-body-fullscreen .ctw-tours-pane {
        display: none;
    }

    .ctw-body-fullscreen.ctw-mobile-show-tours .ctw-chat-pane {
        display: none;
    }

    .ctw-body-fullscreen.ctw-mobile-show-tours .ctw-tours-pane {
        display: block;
        height: 100%;
    }

    .ctw-tours-pane .ctw-tours {
        grid-template-columns: 1fr;
    }
}