/* ============================================================
   Sedunia Search Assist — AI-style unified search panel.
   STAGING ONLY. Brand: gold #c8a24d · green #0f6f51 · ink #181818
   ============================================================ */

.ssa-panel {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(200, 162, 77, .35);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(24, 24, 24, .14);
    padding: 16px 18px 14px;
    font-family: "Barlow", sans-serif;
    text-align: left;
    z-index: 50;
}

.ssa-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0f6f51;
    white-space: nowrap;
}

.ssa-head em { font-style: normal; font-weight: 500; color: #8b8b85; text-transform: none; letter-spacing: 0; font-size: 12px; }

.ssa-spark { color: #c8a24d; font-size: 15px; }

.ssa-formwrap .ssa-form { margin: 0 !important; }

.ssa-input {
    width: 100% !important;
    border: 1.5px solid rgba(24, 24, 24, .14) !important;
    border-radius: 14px !important;
    padding: 15px 18px !important;
    font-size: 16px !important;
    font-family: "Barlow", sans-serif !important;
    color: #181818 !important;
    background: #fbfaf7 !important;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.ssa-input:focus {
    outline: none !important;
    border-color: #c8a24d !important;
    box-shadow: 0 0 0 4px rgba(200, 162, 77, .15) !important;
    background: #fff !important;
}

/* chips */
.ssa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ssa-chip {
    border: 1px solid rgba(15, 111, 81, .25);
    background: #f4faf7;
    color: #0f6f51;
    border-radius: 999px;
    padding: 6px 14px;
    font-family: "Barlow", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}
.ssa-chip:hover { background: #0f6f51; color: #fff; }

/* dropdown */
.ssa-drop {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 8px);
    max-height: 65vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(24, 24, 24, .1);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(24, 24, 24, .22);
    padding: 10px;
    z-index: 99;
}

.ssa-loading { padding: 18px 14px; color: #6a6a64; font-size: 14px; }

.ssa-assist {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: linear-gradient(120deg, #fdfaf3, #f4faf7);
    border: 1px solid rgba(200, 162, 77, .3);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.ssa-assist p { margin: 0; flex: 1 1 240px; font-size: 13.5px; color: #45453f; line-height: 1.55; }
.ssa-ai-cta {
    flex: 0 0 auto;
    background: #0f6f51;
    color: #fff !important;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease;
}
.ssa-ai-cta:hover { background: #c8a24d; }

.ssa-group { padding: 6px 4px 2px; }
.ssa-group h4 {
    margin: 8px 8px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #c8a24d;
}

.ssa-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s ease;
}
.ssa-item:hover { background: #f6f4ee; }
.ssa-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 42px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: #eee;
}
.ssa-item-body { flex: 1 1 auto; min-width: 0; }
.ssa-item-body strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #181818;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ssa-item-body em { display: block; font-style: normal; font-size: 12px; color: #8b8b85; }
.ssa-price { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #0f6f51; }

/* enquiry capture card (thin-inventory fallback — replaces external
   partner links so the customer never leaves the site) */
.ssa-enquire {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 4px 2px;
    padding: 13px 14px;
    background: linear-gradient(120deg, #f4faf7, #fdfaf3);
    border: 1px dashed rgba(15, 111, 81, .35);
    border-radius: 12px;
}
.ssa-enquire-body { flex: 1 1 240px; }
.ssa-enquire-body strong { display: block; font-size: 14px; font-weight: 700; color: #0f6f51; }
.ssa-enquire-body em { display: block; font-style: normal; font-size: 12.5px; color: #6a6a64; line-height: 1.5; margin-top: 2px; }
.ssa-enquire-cta {
    flex: 0 0 auto;
    background: #c8a24d;
    color: #fff !important;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease;
}
.ssa-enquire-cta:hover { background: #0f6f51; }

.ssa-all {
    display: block;
    text-align: center;
    padding: 12px;
    margin-top: 6px;
    border-top: 1px solid rgba(24, 24, 24, .08);
    font-size: 13.5px;
    font-weight: 700;
    color: #0f6f51 !important;
    text-decoration: none;
}
.ssa-all:hover { color: #c8a24d !important; }

/* ------------------------------------------------------------
   Hard overrides: Elementor kit (.elementor-kit-7 button → transparent
   bg + #FBFBFB text) and theme .search_form submit (absolute 4em
   fontawesome magnifier) both outrank plain .ssa-* classes.
   ------------------------------------------------------------ */
.elementor-kit-7 .ssa-chips button.ssa-chip,
body .ssa-chips button.ssa-chip {
    border: 1px solid rgba(15, 111, 81, .25) !important;
    background: #f4faf7 !important;
    background-color: #f4faf7 !important;
    color: #0f6f51 !important;
    fill: #0f6f51 !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-family: "Barlow", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.elementor-kit-7 .ssa-chips button.ssa-chip:hover,
body .ssa-chips button.ssa-chip:hover {
    background: #0f6f51 !important;
    background-color: #0f6f51 !important;
    color: #fff !important;
    border-color: #0f6f51 !important;
}

/* submit button: dock it inside the input as a round brand button */
.ssa-formwrap { position: relative; }
body .ssa-panel .ssa-form button[type=submit],
body#new-design .ssa-panel .search_form button[type=submit] {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #0f6f51 !important;
    background-color: #0f6f51 !important;
    box-shadow: none !important;
    font-size: 0 !important;   /* hides the "Search" label text */
    line-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background .2s ease;
    z-index: 3;
}
body .ssa-panel .ssa-form button[type=submit]:hover,
body#new-design .ssa-panel .search_form button[type=submit]:hover {
    background: #c8a24d !important;
    background-color: #c8a24d !important;
}
body .ssa-panel .ssa-form button[type=submit]::before,
body#new-design .ssa-panel .search_form button[type=submit]::before {
    content: "\f002";
    font-family: 'fontawesome', 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: #fff !important;
    margin: 0 !important;
    display: block !important;
    text-align: center !important;
}

/* keep typed text clear of the docked button — selectors carry two ids
   because the customizer/theme target input#mainSearchInput directly */
body .ssa-panel .ssa-input { padding-right: 62px !important; }
html body#new-design .custom_search_form .ssa-panel input#mainSearchInput,
html body .ssa-panel input#mainSearchInput,
html body .ssa-panel input#tour-keywords,
html body .ssa-panel input.ssa-input {
    padding: 15px 62px 15px 18px !important;
    font-size: 16px !important;
    height: auto !important;
}
html body .ssa-panel .ssa-form button[type=submit],
html body#new-design .ssa-panel .search_form button[type=submit] {
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
}

/* ============================================================
   /ai-trips/ — AI planner page reskin (plugin ships lime #A7D13B
   + default blue #0073e6; bring it onto brand: ivory backdrop,
   deep green #0f6f51, gold #c8a24d, Barlow)
   ============================================================ */
body.page-id-79000 .elementor-79000 > .elementor-element.e-parent,
body.page-id-79000 .elementor-element.elementor-element-23fb9e1,
body.page-id-79000 .elementor-element.elementor-element-23fb9e1 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #f7f5ee !important;
    background-image: none !important;
}
body.page-id-79000 .sedunia-ai-search {
    background: transparent !important;
    font-family: "Barlow", sans-serif !important;
    max-width: 980px !important;
    padding: 44px 16px 72px !important;
}
body.page-id-79000 .ai-header::before {
    content: "✦ Sedunia AI Trip Planner";
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #0f6f51;
    margin-bottom: 10px;
}
body.page-id-79000 .ai-header h2 {
    font-size: clamp(28px, 4.5vw, 42px) !important;
    font-weight: 800 !important;
    color: #181818 !important;
    margin-bottom: 10px !important;
}
body.page-id-79000 .ai-header h2 span { color: #c8a24d !important; }
body.page-id-79000 .ai-header p {
    color: #6a6a64 !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
}

/* chips row injected above the chat box */
.ssa-ai-chips { max-width: 780px; margin: 18px auto 0; justify-content: center; }

/* chat box → same language as the AI Search & Assist panel */
body.page-id-79000 .ai-chat-box {
    max-width: 780px !important;
    border: 1px solid rgba(200, 162, 77, .35) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 50px rgba(24, 24, 24, .12) !important;
    padding: 18px !important;
    margin-top: 18px !important;
}
body.page-id-79000 .ai-chat-messages {
    background: #fbfaf7 !important;
    border: 1px solid rgba(24, 24, 24, .06) !important;
    border-radius: 14px !important;
    max-height: 460px !important;
    padding: 14px !important;
    text-align: left !important;
}
body.page-id-79000 .bot-msg {
    background: #f1efe7 !important;
    color: #181818 !important;
    border-radius: 4px 16px 16px 16px !important;
    width: auto !important;
    max-width: 88% !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    font-family: "Barlow", sans-serif !important;
}
body.page-id-79000 .user-msg {
    background: #0f6f51 !important;
    color: #fff !important;
    border-radius: 16px 4px 16px 16px !important;
    width: auto !important;
    max-width: 88% !important;
    margin-left: auto !important;
    font-size: 14.5px !important;
    font-family: "Barlow", sans-serif !important;
}
body.page-id-79000 .ai-chat-input { border-top: 0 !important; gap: 10px; margin-top: 4px; align-items: center; }
body.page-id-79000 .ai-chat-input input {
    background: #fbfaf7 !important;
    border: 1.5px solid rgba(24, 24, 24, .14) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    font-family: "Barlow", sans-serif !important;
    color: #181818 !important;
}
body.page-id-79000 .ai-chat-input input:focus {
    border-color: #c8a24d !important;
    box-shadow: 0 0 0 4px rgba(200, 162, 77, .15) !important;
    background: #fff !important;
}
body.page-id-79000 .ai-chat-input button {
    background: #0f6f51 !important;
    border-radius: 12px !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .2s ease;
}
body.page-id-79000 .ai-chat-input button::after { content: "→"; font-size: 20px; color: #fff; line-height: 1; }
body.page-id-79000 .ai-chat-input button:hover { background: #c8a24d !important; }

/* recommended tour cards */
body.page-id-79000 .tour-card {
    border: 1px solid rgba(24, 24, 24, .08) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(24, 24, 24, .08) !important;
    padding: 0 0 4px !important;
    overflow: hidden !important;
    text-align: left !important;
    background: #fff !important;
}
body.page-id-79000 .tour-card img {
    border-radius: 0 !important;
    height: 180px !important;
    object-fit: cover !important;
}
body.page-id-79000 .tour-card h4 {
    font-family: "Barlow", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #181818 !important;
    padding: 4px 16px 0 !important;
}
body.page-id-79000 .tour-card p {
    color: #6a6a64 !important;
    font-size: 13.5px !important;
    padding: 0 16px !important;
    font-family: "Barlow", sans-serif !important;
}
body.page-id-79000 .tour-card .btn {
    background: #0f6f51 !important;
    border-radius: 999px !important;
    margin: 6px 16px 14px !important;
    padding: 9px 20px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    font-family: "Barlow", sans-serif !important;
    align-self: flex-start;
    transition: background .2s ease;
}
body.page-id-79000 .tour-card .btn:hover { background: #c8a24d !important; }
body.page-id-79000 .ai-loading { color: #6a6a64 !important; font-family: "Barlow", sans-serif !important; }

@media (max-width: 640px) {
    body.page-id-79000 .sedunia-ai-search { padding: 28px 10px 48px !important; }
    body.page-id-79000 .ai-chat-box { padding: 12px !important; border-radius: 18px !important; }
    body.page-id-79000 .ai-chat-messages { max-height: 55vh !important; }
    .ssa-ai-chips { justify-content: flex-start; padding: 0 12px; }
}

/* ------------------------------------------------------------
   /tour-search/ keyword form inside the panel: the theme pulls
   #tour__search_formmain up 40px (it was built to overlap the
   page hero) and supersizes the input/button with two-id
   selectors — neutralise all of it inside the panel.
   ------------------------------------------------------------ */
body .ssa-panel #tour__search_formmain {
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
html body .ssa-panel #tour__search_formmain input#tour-keywords {
    height: auto !important;
    min-height: 48px !important;
    padding: 13px 58px 13px 16px !important;
    font-size: 15px !important;
}
html body .ssa-panel #tour__search_formmain button#find-tour-button {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #0f6f51 !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .2s ease;
}
html body .ssa-panel #tour__search_formmain button#find-tour-button::before {
    content: "\f002";
    font-family: 'fontawesome', 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: #fff !important;
    margin: 0 !important;
    display: block !important;
}
html body .ssa-panel #tour__search_formmain button#find-tour-button:hover { background: #c8a24d !important; }

/* active filter pills (tour-search page) */
.ssa-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px auto 0; max-width: 860px; }
.ssa-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f4faf7;
    border: 1px solid rgba(15, 111, 81, .3);
    color: #0f6f51;
    border-radius: 999px;
    padding: 5px 6px 5px 12px;
    font-family: "Barlow", sans-serif;
    font-size: 13px;
    font-weight: 600;
}
.ssa-filter-pill em { font-style: normal; color: #8b8b85; font-weight: 500; }
.ssa-filter-pill button {
    border: none;
    background: rgba(15, 111, 81, .12);
    color: #0f6f51;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}
.ssa-filter-pill button:hover { background: #0f6f51; color: #fff; }

@media (max-width: 640px) {
    .ssa-panel { padding: 14px 14px 12px; border-radius: 18px; }
    .ssa-chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
    .ssa-chips::-webkit-scrollbar { display: none; }
    .ssa-chip { flex: 0 0 auto; }
    .ssa-drop { left: 4px; right: 4px; max-height: 70vh; }
    body .ssa-panel .ssa-form button[type=submit],
    body#new-design .ssa-panel .search_form button[type=submit] { width: 38px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; flex: 0 0 38px !important; right: 6px !important; }
    /* smaller type on phones so placeholders don't clip */
    html body#new-design .custom_search_form .ssa-panel input#mainSearchInput,
    html body .ssa-panel input#mainSearchInput,
    html body .ssa-panel input#tour-keywords,
    html body .ssa-panel input.ssa-input {
        font-size: 15px !important;
        padding: 13px 50px 13px 14px !important;
        min-height: 48px !important;
    }
    .ssa-input::placeholder { font-size: 14px !important; opacity: .75; }
    .ssa-head em { display: none; } /* keep the header to one tidy line on phones */
    .ssa-enquire { margin: 8px 2px 2px; }
    .ssa-enquire-cta { width: 100%; text-align: center; }
}