.tp-page {
    --tp-text: #17202a;
    --tp-muted: #667085;
    --tp-border: #e7e9ee;
    --tp-soft: #f7f8fa;
    --tp-white: #ffffff;
    --tp-dark: #182230;
    --tp-purple: #6d5dfc;
    --tp-purple-soft: #f3f1ff;
    --tp-green: #15835c;

    width: 100%;
    min-height: 100vh;

    padding:
        44px 18px
        80px;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(109, 93, 252, 0.08),
            transparent 30%
        ),
        #f8f9fb;

    color: var(--tp-text);
}


.tp-page *,
.tp-page *::before,
.tp-page *::after {
    box-sizing: border-box;
}


.tp-shell {
    width: 100%;
    max-width: 980px;

    margin: 0 auto;
}


/* HERO */

.tp-hero {
    max-width: 720px;

    margin:
        0 auto
        28px;

    text-align: center;
}


.tp-ai-label {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding:
        7px 12px;

    border:
        1px solid
        #ddd9ff;

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            0.9
        );

    color: #5748df;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.08em;
}


.tp-ai-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #6857ef;

    box-shadow:
        0 0 0 4px
        rgba(
            104,
            87,
            239,
            0.12
        );
}


.tp-hero h1 {
    margin:
        16px 0
        9px;

    color: #141b25;

    font-size:
        clamp(
            34px,
            5vw,
            52px
        );

    font-weight: 780;

    line-height: 1.05;

    letter-spacing:
        -0.045em;
}


.tp-hero p {
    max-width: 650px;

    margin: 0 auto;

    color: var(--tp-muted);

    font-size: 16px;

    line-height: 1.65;
}


/* PLANNER */

.tp-planner {
    overflow: hidden;

    border:
        1px solid
        var(--tp-border);

    border-radius: 24px;

    background: #fff;

    box-shadow:
        0 24px 70px
        rgba(
            16,
            24,
            40,
            0.09
        );
}


/* HEADER */

.tp-header {
    min-height: 76px;

    padding:
        15px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    border-bottom:
        1px solid
        var(--tp-border);
}


.tp-assistant {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}


.tp-avatar {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #17202a,
            #303c4b
        );

    color: #fff;

    font-size: 19px;
}


.tp-assistant-name {
    font-size: 14px;

    font-weight: 760;
}


.tp-status {
    margin-top: 4px;

    display: flex;
    align-items: center;

    gap: 6px;

    color: var(--tp-muted);

    font-size: 12px;
}


.tp-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #12b76a;
}


.tp-status-dot-loading {
    animation:
        tpPulse
        1.15s
        infinite;
}


@keyframes tpPulse {

    50% {
        opacity: 0.3;
    }

}


.tp-header-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}


.tp-header-btn {
    padding:
        8px 10px;

    border:
        1px solid
        var(--tp-border);

    border-radius: 9px;

    background: #fff;

    color: #475467;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}


.tp-header-btn:hover {
    background: #f8f9fb;

    border-color: #cbd0d8;
}


/* PROGRESS */

.tp-progress-scroll {
    overflow-x: auto;

    border-bottom:
        1px solid
        var(--tp-border);

    scrollbar-width: none;
}


.tp-progress-scroll::-webkit-scrollbar {
    display: none;
}


.tp-progress {
    min-width: 760px;

    padding:
        13px 20px;

    display: grid;

    grid-template-columns:
        repeat(
            7,
            minmax(
                92px,
                1fr
            )
        );

    gap: 6px;

    background: #fbfbfc;
}


.tp-progress-item {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 7px;

    color: #98a2b3;
}


.tp-progress-item span {
    flex: 0 0 auto;

    width: 25px;
    height: 25px;

    display: grid;

    place-items: center;

    border:
        1px solid
        #d9dde4;

    border-radius: 50%;

    background: #fff;

    color: #98a2b3;

    font-size: 11px;
    font-weight: 800;
}


.tp-progress-item small {
    overflow: hidden;

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.tp-progress-item.active {
    color: #4236c7;
}


.tp-progress-item.active span {
    border-color: #7768f5;

    background: #eeecff;

    color: #5d4ce5;
}


.tp-progress-item.done {
    color: #18855c;
}


.tp-progress-item.done span {
    border-color: #b5ead5;

    background: #eafaf3;

    color: #16865d;
}


/* CHAT */

.tp-chat {
    min-height: 540px;

    max-height: 760px;

    overflow-y: auto;

    padding: 29px;

    background:
        linear-gradient(
            180deg,
            #fcfcfd 0,
            #fff 240px
        );

    scroll-behavior: smooth;
}


/* MESSAGE */

.tp-message-row {
    width: 100%;

    margin-bottom: 17px;

    display: flex;
    align-items: flex-start;

    gap: 9px;
}


.tp-message-row-user {
    justify-content: flex-end;
}


.tp-message-avatar {
    flex: 0 0 auto;

    width: 29px;
    height: 29px;

    margin-top: 3px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background: #1c2734;

    color: #fff;

    font-size: 12px;
}


.tp-message {
    max-width: 74%;

    padding:
        12px 15px;

    border-radius: 15px;

    font-size: 14px;

    line-height: 1.55;

    overflow-wrap: anywhere;
}


.tp-message-bot {
    border:
        1px solid
        var(--tp-border);

    border-top-left-radius: 5px;

    background: #fff;

    color: #344054;
}


.tp-message-user {
    border-top-right-radius: 5px;

    background: #192431;

    color: #fff;
}


.tp-message-muted {
    color: #98a2b3;

    font-size: 12px;
}


/* COMMON CARDS */

.tp-preset-panel,
.tp-selection-card,
.tp-counter-card,
.tp-interest-wrapper,
.tp-preferences-card,
.tp-summary-card,
.tp-two-actions,
.tp-options-grid,
.tp-loading-card,
.tp-itinerary {
    width:
        calc(
            100% - 38px
        );

    max-width: 790px;

    margin:
        2px 0
        26px 38px;
}


.tp-preset-panel,
.tp-selection-card,
.tp-counter-card,
.tp-interest-wrapper,
.tp-preferences-card,
.tp-summary-card {
    padding: 18px;

    border:
        1px solid
        var(--tp-border);

    border-radius: 17px;

    background: #fff;

    box-shadow:
        0 8px 22px
        rgba(
            16,
            24,
            40,
            0.035
        );
}


/* PRESETS */

.tp-block-head {
    display: flex;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 13px;
}


.tp-block-head strong {
    display: block;

    font-size: 13px;

    color: #344054;
}


.tp-block-head small {
    display: block;

    margin-top: 3px;

    color: #98a2b3;

    font-size: 10px;

    line-height: 1.45;
}


.tp-preset-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 9px;
}


.tp-preset-card {
    min-width: 0;

    min-height: 78px;

    padding: 12px;

    display: grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        )
        auto;

    align-items: center;

    gap: 10px;

    text-align: left;

    border:
        1px solid
        var(--tp-border);

    border-radius: 13px;

    background: #fff;

    cursor: pointer;

    transition: 0.16s;
}


.tp-preset-card:hover {
    border-color: #aaa1f8;

    background: #fbfaff;

    transform:
        translateY(
            -1px
        );
}


.tp-preset-icon {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background: #f4f2ff;

    font-size: 19px;
}


.tp-preset-card > span:nth-child(2) {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.tp-preset-card strong {
    color: #293440;

    font-size: 12px;
}


.tp-preset-card small {
    color: #98a2b3;

    font-size: 10px;

    line-height: 1.35;
}


.tp-preset-card i {
    color: #b0b6bf;

    font-style: normal;
}


.tp-text-button {
    margin-top: 11px;

    padding: 7px 0;

    border: 0;

    background: transparent;

    color: #5b50c9;

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;
}


/* DESTINATION */

.tp-search-row {
    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap: 9px;
}


.tp-search-box {
    min-width: 0;

    height: 47px;

    padding:
        0 12px;

    display: flex;
    align-items: center;

    gap: 8px;

    border:
        1px solid
        #d8dce3;

    border-radius: 11px;

    background: #fff;
}


.tp-search-box:focus-within {
    border-color: #786af2;

    box-shadow:
        0 0 0 3px
        rgba(
            120,
            106,
            242,
            0.1
        );
}


.tp-search-box span {
    color: #98a2b3;

    font-size: 18px;
}


.tp-search-box input {
    min-width: 0;

    flex: 1;

    border: 0;

    outline: 0;

    background: transparent;

    color: #27313d;

    font-size: 13px;
}


.tp-surprise-btn {
    padding:
        0 13px;

    border:
        1px solid
        #ddd9ff;

    border-radius: 11px;

    background: #f5f3ff;

    color: #5748df;

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;
}


.tp-surprise-btn:hover {
    background: #ece9ff;
}


.tp-destination-results {
    margin-top: 11px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 7px;
}


.tp-destination-row {
    min-width: 0;

    padding:
        10px 11px;

    display: grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        )
        auto
        auto;

    align-items: center;

    gap: 8px;

    text-align: left;

    border:
        1px solid
        #e6e8ec;

    border-radius: 11px;

    background: #fff;

    cursor: pointer;
}


.tp-destination-row:hover {
    border-color: #aaa1f8;

    background: #fbfaff;
}


.tp-city-flag {
    font-size: 20px;
}


.tp-destination-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.tp-destination-copy strong {
    overflow: hidden;

    color: #27313d;

    font-size: 12px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.tp-destination-copy small {
    margin-top: 1px;

    overflow: hidden;

    color: #98a2b3;

    font-size: 9px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.tp-verified {
    padding:
        3px 6px;

    border-radius: 999px;

    background: #ecfdf3;

    color: #15835c;

    font-size: 8px;

    font-weight: 750;
}


.tp-row-arrow {
    color: #b3b8c0;

    font-size: 12px;
}


.tp-empty,
.tp-empty-day {
    padding: 18px;

    grid-column:
        1 / -1;

    border:
        1px dashed
        #d9dde4;

    border-radius: 11px;

    color: #667085;

    text-align: center;
}


.tp-empty strong,
.tp-empty small {
    display: block;
}


.tp-empty small {
    margin-top: 3px;

    color: #98a2b3;

    font-size: 10px;
}


/* DAYS */

.tp-day-choice-grid {
    display: grid;

    grid-template-columns:
        repeat(
            7,
            minmax(
                0,
                1fr
            )
        );

    gap: 7px;
}


.tp-day-choice {
    min-width: 0;

    min-height: 67px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;

    border:
        1px solid
        var(--tp-border);

    border-radius: 11px;

    background: #fff;

    color: #344054;

    cursor: pointer;
}


.tp-day-choice:hover {
    border-color: #7768f5;

    background: #f7f5ff;

    color: #5646d8;
}


.tp-day-choice strong {
    font-size: 19px;
}


.tp-day-choice small {
    color: #98a2b3;

    font-size: 9px;
}


.tp-custom-day-row {
    margin-top: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    color: #667085;

    font-size: 11px;
}


.tp-custom-day-row select {
    min-width: 160px;

    height: 38px;

    padding:
        0 9px;

    border:
        1px solid
        #d8dce3;

    border-radius: 9px;

    background: #fff;

    color: #344054;

    font-size: 11px;
}


/* GUEST COUNTER */

.tp-counter-card {
    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    align-items: center;

    gap: 16px;
}


.tp-counter-copy {
    display: flex;
    align-items: center;

    gap: 10px;
}


.tp-counter-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background: #f4f2ff;

    font-size: 19px;
}


.tp-counter-copy strong,
.tp-counter-copy small {
    display: block;
}


.tp-counter-copy strong {
    color: #344054;

    font-size: 13px;
}


.tp-counter-copy small {
    margin-top: 2px;

    color: #98a2b3;

    font-size: 10px;
}


.tp-counter {
    display: grid;

    grid-template-columns:
        35px
        43px
        35px;

    align-items: center;
}


.tp-counter button {
    width: 35px;
    height: 35px;

    border:
        1px solid
        #d9dde4;

    border-radius: 9px;

    background: #fff;

    color: #344054;

    font-size: 18px;

    cursor: pointer;
}


.tp-counter strong {
    text-align: center;

    font-size: 16px;
}


.tp-counter-card .tp-primary-button {
    grid-column:
        1 / -1;
}


/* OPTIONS */

.tp-options-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 9px;
}


.tp-option-card {
    min-width: 0;

    min-height: 76px;

    padding:
        12px 13px;

    display: grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        )
        auto;

    align-items: center;

    gap: 10px;

    text-align: left;

    border:
        1px solid
        var(--tp-border);

    border-radius: 14px;

    background: #fff;

    color: #344054;

    cursor: pointer;

    transition: 0.16s;
}


.tp-option-card:hover {
    border-color: #aaa1f8;

    transform:
        translateY(
            -1px
        );

    box-shadow:
        0 7px 15px
        rgba(
            16,
            24,
            40,
            0.05
        );
}


.tp-option-icon {
    min-width: 36px;

    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background: #f4f5f7;

    font-size: 18px;
}


.tp-option-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.tp-option-content strong {
    color: #27313d;

    font-size: 13px;

    overflow-wrap: anywhere;
}


.tp-option-content small {
    color: #98a2b3;

    font-size: 10px;

    line-height: 1.4;

    overflow-wrap: anywhere;
}


.tp-option-arrow {
    color: #b2b8c1;

    font-size: 15px;
}


/* INTERESTS */

.tp-interest-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(
                0,
                1fr
            )
        );

    gap: 8px;
}


.tp-interest-card {
    position: relative;

    min-width: 0;

    min-height: 88px;

    padding:
        12px 7px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    border:
        1px solid
        var(--tp-border);

    border-radius: 12px;

    background: #fff;

    color: #344054;

    cursor: pointer;
}


.tp-interest-card > span {
    font-size: 21px;
}


.tp-interest-card strong {
    max-width: 100%;

    overflow: hidden;

    font-size: 11px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.tp-interest-check {
    position: absolute;

    top: 6px;
    right: 7px;

    width: 17px;
    height: 17px;

    display: none;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #6455df;

    color: #fff;

    font-size: 9px;
}


.tp-interest-card.selected {
    border-color: #7161ea;

    background: #f4f2ff;

    color: #493bc8;
}


.tp-interest-card.selected
.tp-interest-check {
    display: flex;
}


.tp-interest-wrapper
.tp-primary-button {
    margin-top: 13px;
}


/* PREFERENCES */

.tp-preferences-card {
    display: grid;

    gap: 12px;
}


.tp-pref-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 10px;
}


.tp-pref-field {
    min-width: 0;

    padding: 11px;

    display: grid;

    gap: 8px;

    border:
        1px solid
        #eceef1;

    border-radius: 11px;

    background: #fafbfc;
}


.tp-pref-field > span {
    color: #344054;

    font-size: 11px;

    font-weight: 750;
}


.tp-pref-field > span small {
    display: block;

    margin-top: 2px;

    color: #98a2b3;

    font-size: 9px;

    font-weight: 500;
}


.tp-pref-field input,
.tp-pref-field select {
    width: 100%;

    height: 38px;

    padding:
        0 9px;

    border:
        1px solid
        #d8dce3;

    border-radius: 9px;

    background: #fff;

    color: #344054;

    font-size: 11px;
}


.tp-toggle-row {
    position: relative;

    min-width: 0;

    padding:
        11px 52px
        11px 12px;

    display: block;

    border:
        1px solid
        #eceef1;

    border-radius: 11px;

    background: #fff;

    cursor: pointer;
}


.tp-toggle-row span strong,
.tp-toggle-row span small {
    display: block;
}


.tp-toggle-row span strong {
    color: #344054;

    font-size: 11px;
}


.tp-toggle-row span small {
    margin-top: 2px;

    color: #98a2b3;

    font-size: 9px;

    line-height: 1.4;
}


.tp-toggle-row input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.tp-toggle-row i {
    position: absolute;

    top: 50%;
    right: 12px;

    width: 34px;
    height: 20px;

    transform:
        translateY(
            -50%
        );

    border-radius: 999px;

    background: #d0d5dd;

    transition: 0.18s;
}


.tp-toggle-row i::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 1px 3px
        rgba(
            16,
            24,
            40,
            0.2
        );

    transition: 0.18s;
}


.tp-toggle-row
input:checked + i {
    background: #6959e8;
}


.tp-toggle-row
input:checked + i::after {
    transform:
        translateX(
            14px
        );
}


/* BUTTONS */

.tp-primary-button,
.tp-secondary-button {
    min-height: 44px;

    padding:
        0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border-radius: 10px;

    font-size: 11px;

    font-weight: 750;

    cursor: pointer;
}


.tp-primary-button {
    border: 0;

    background: #1b2633;

    color: #fff;
}


.tp-primary-button:hover {
    background: #101923;
}


.tp-secondary-button {
    border:
        1px solid
        var(--tp-border);

    background: #fff;

    color: #475467;
}


.tp-secondary-button:hover {
    background: #f8f9fb;
}


.tp-two-actions {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 8px;
}


/* SUMMARY */

.tp-summary-top {
    display: flex;
    justify-content: space-between;

    gap: 14px;
}


.tp-summary-eyebrow {
    color: #8b93a1;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.1em;
}


.tp-summary-top h3 {
    margin:
        7px 0
        2px;

    color: #202a36;

    font-size: 21px;

    line-height: 1.2;
}


.tp-summary-top p {
    margin: 0;

    color: #98a2b3;

    font-size: 11px;
}


.tp-summary-ai {
    flex: 0 0 auto;

    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background: #f0edff;

    color: #6554e8;
}


.tp-summary-grid {
    margin-top: 17px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 8px;
}


.tp-summary-grid > div {
    position: relative;

    min-width: 0;

    padding:
        10px 48px
        10px 10px;

    border-radius: 10px;

    background: #f8f9fb;
}


.tp-summary-grid small,
.tp-summary-grid strong {
    display: block;
}


.tp-summary-grid small {
    margin-bottom: 3px;

    color: #98a2b3;

    font-size: 9px;
}


.tp-summary-grid strong {
    overflow: hidden;

    color: #344054;

    font-size: 12px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.tp-summary-grid button {
    position: absolute;

    top: 50%;
    right: 8px;

    transform:
        translateY(
            -50%
        );

    padding:
        4px 6px;

    border: 0;

    border-radius: 6px;

    background: #fff;

    color: #6a5ae0;

    font-size: 8px;

    font-weight: 750;

    cursor: pointer;
}


.tp-summary-interests {
    margin-top: 12px;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.tp-summary-interests span {
    padding:
        5px 9px;

    border-radius: 999px;

    background: #f0edff;

    color: #5c4bd8;

    font-size: 10px;

    font-weight: 650;
}


.tp-review-details {
    margin-top: 12px;

    border-top:
        1px solid
        #eef0f3;

    border-bottom:
        1px solid
        #eef0f3;
}


.tp-review-details summary {
    padding:
        10px 0;

    color: #667085;

    font-size: 10px;

    font-weight: 750;

    cursor: pointer;
}


.tp-review-meta {
    padding:
        0 0
        10px;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.tp-review-meta span {
    padding:
        5px 7px;

    border-radius: 7px;

    background: #f8f9fb;

    color: #667085;

    font-size: 9px;
}


.tp-summary-actions {
    margin-top: 14px;

    display: grid;

    grid-template-columns:
        120px
        minmax(
            0,
            1fr
        );

    gap: 8px;
}


.tp-build-button {
    min-width: 0;

    min-height: 60px;

    padding:
        10px 13px;

    display: grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        )
        auto;

    align-items: center;

    gap: 10px;

    text-align: left;

    border: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #192430,
            #293748
        );

    color: #fff;

    cursor: pointer;
}


.tp-build-icon {
    width: 33px;
    height: 33px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(
            255,
            255,
            255,
            0.1
        );
}


.tp-build-button
> span:nth-child(2) {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.tp-build-button strong {
    font-size: 12px;
}


.tp-build-button small {
    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size: 9px;
}


.tp-build-arrow {
    font-size: 16px;
}


/* QUICK EDIT */

.tp-edit-head strong,
.tp-edit-head small {
    display: block;
}


.tp-edit-head strong {
    color: #344054;

    font-size: 13px;
}


.tp-edit-head small {
    margin-top: 3px;

    color: #98a2b3;

    font-size: 10px;
}


.tp-edit-grid {
    margin-top: 13px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 8px;
}


.tp-edit-grid label {
    min-width: 0;

    display: grid;

    gap: 5px;
}


.tp-edit-grid label > span,
.tp-edit-interests > span {
    color: #667085;

    font-size: 9px;

    font-weight: 750;
}


.tp-edit-grid input,
.tp-edit-grid select {
    width: 100%;

    height: 38px;

    padding:
        0 8px;

    border:
        1px solid
        #d8dce3;

    border-radius: 8px;

    background: #fff;

    color: #344054;

    font-size: 10px;
}


.tp-edit-interests {
    margin-top: 11px;
}


.tp-edit-interests > div {
    margin-top: 6px;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.tp-edit-interests label,
.tp-edit-toggles label {
    padding:
        6px 8px;

    border:
        1px solid
        #e4e7ec;

    border-radius: 8px;

    color: #475467;

    font-size: 9px;
}


.tp-edit-interests input,
.tp-edit-toggles input {
    margin-right: 5px;
}


.tp-edit-toggles {
    margin-top: 9px;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.tp-edit-actions {
    margin-top: 13px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 8px;
}


/* LOADING */

.tp-loading-card {
    padding: 18px;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    border:
        1px solid
        #ddd9ff;

    border-radius: 15px;

    background: #faf9ff;
}


.tp-loader-icon {
    flex: 0 0 auto;

    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background: #6555e6;

    color: #fff;

    animation:
        tpLoader
        1.3s
        infinite;
}


@keyframes tpLoader {

    50% {
        transform:
            scale(
                1.07
            );
    }

}


.tp-loading-card strong {
    color: #352ca7;

    font-size: 12px;
}


.tp-loading-card p {
    margin:
        4px 0
        8px;

    color: #7770ab;

    font-size: 10px;
}


.tp-loading-dots {
    display: flex;

    gap: 4px;
}


.tp-loading-dots span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #7666eb;

    animation:
        tpDot
        1s
        infinite;
}


.tp-loading-dots span:nth-child(2) {
    animation-delay: 0.15s;
}


.tp-loading-dots span:nth-child(3) {
    animation-delay: 0.3s;
}


@keyframes tpDot {

    0%,
    80%,
    100% {
        opacity: 0.25;
    }

    40% {
        opacity: 1;
    }

}


/* RESULT */

.tp-result-header {
    margin-bottom: 12px;

    padding: 18px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 14px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #192431,
            #314153
        );

    color: #fff;
}


.tp-result-eyebrow {
    color:
        rgba(
            255,
            255,
            255,
            0.56
        );

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.11em;
}


.tp-result-header h2 {
    margin:
        5px 0
        0;

    color: #fff;

    font-size: 20px;

    line-height: 1.25;
}


.tp-result-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 6px;
}


.tp-result-meta span {
    padding:
        5px 7px;

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            0.09
        );

    color:
        rgba(
            255,
            255,
            255,
            0.84
        );

    font-size: 9px;
}


/* SMART NOTE */

.tp-smart-note {
    margin-bottom: 10px;

    padding:
        10px 12px;

    display: flex;
    align-items: flex-start;

    gap: 9px;

    border:
        1px solid
        #d9d4ff;

    border-radius: 10px;

    background: #f8f7ff;
}


.tp-smart-note > span {
    color: #6555e6;
}


.tp-smart-note strong,
.tp-smart-note small {
    display: block;
}


.tp-smart-note strong {
    color: #5145b9;

    font-size: 10px;
}


.tp-smart-note small {
    margin-top: 2px;

    color: #8179b7;

    font-size: 9px;

    line-height: 1.4;
}


/* TOOLBAR */

.tp-toolbar {
    margin-bottom: 10px;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.tp-toolbar button {
    min-height: 34px;

    padding:
        0 10px;

    border:
        1px solid
        #e1e4e8;

    border-radius: 8px;

    background: #fff;

    color: #475467;

    font-size: 9px;

    font-weight: 750;

    cursor: pointer;
}


.tp-toolbar button:hover:not(:disabled) {
    border-color: #aaa1f8;

    color: #5b4bd1;
}


.tp-toolbar button:disabled {
    opacity: 0.42;

    cursor: not-allowed;
}


/* DAY */

.tp-day {
    margin-bottom: 11px;

    overflow: hidden;

    border:
        1px solid
        var(--tp-border);

    border-radius: 15px;

    background: #fff;
}


.tp-day-header {
    padding:
        13px 15px;

    display: grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        )
        auto;

    align-items: center;

    gap: 11px;

    border-bottom:
        1px solid
        #eef0f3;

    background: #fbfbfc;
}


.tp-day-number {
    width: 37px;
    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background: #1d2937;

    color: #fff;

    font-size: 11px;

    font-weight: 800;
}


.tp-day-header small {
    color: #98a2b3;

    font-size: 8px;

    font-weight: 750;

    letter-spacing: 0.06em;
}


.tp-day-header h3 {
    margin:
        2px 0
        0;

    color: #27313d;

    font-size: 13px;
}


.tp-day-actions {
    display: flex;
    align-items: center;

    gap: 6px;
}


.tp-stop-count,
.tp-day-actions a {
    padding:
        5px 7px;

    border-radius: 999px;

    font-size: 8px;

    text-decoration: none;
}


.tp-stop-count {
    background: #f0f1f3;

    color: #667085;
}


.tp-day-actions a {
    border:
        1px solid
        #ddd9ff;

    background: #f7f5ff;

    color: #5f50d7;

    font-weight: 750;
}


.tp-day-body {
    padding:
        5px 15px;
}


/* ACTIVITY */

.tp-activity {
    display: grid;

    grid-template-columns:
        67px
        minmax(
            0,
            1fr
        );

    gap: 8px;
}


.tp-activity-time {
    padding-top: 15px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.tp-activity-time > span {
    color: #667085;

    font-size: 9px;

    font-weight: 750;
}


.tp-timeline {
    position: relative;

    width: 100%;

    min-height: 66px;

    margin-top: 6px;
}


.tp-timeline::before {
    content: "";

    position: absolute;

    top: 5px;
    left: 6px;
    bottom: 0;

    width: 1px;

    background: #e4e7ec;
}


.tp-timeline i {
    position: absolute;

    top: 0;
    left: 2px;

    width: 9px;
    height: 9px;

    border:
        2px solid
        #fff;

    border-radius: 50%;

    background: #7767ec;

    box-shadow:
        0 0 0 1px
        #7767ec;
}


.tp-activity:last-child
.tp-timeline::before {
    display: none;
}


.tp-activity-content {
    min-width: 0;

    padding:
        12px 0
        14px;

    border-bottom:
        1px solid
        #f0f1f3;
}


.tp-activity:last-child
.tp-activity-content {
    border-bottom: 0;
}


.tp-activity-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 9px;
}


.tp-activity-heading > div {
    min-width: 0;
}


.tp-place-type {
    display: inline-block;

    margin-bottom: 3px;

    color: #7062dc;

    font-size: 8px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


.tp-activity-heading h4 {
    margin: 0;

    color: #26313d;

    font-size: 12px;

    line-height: 1.35;

    overflow-wrap: anywhere;
}


.tp-map-link {
    flex: 0 0 auto;

    padding:
        5px 7px;

    border:
        1px solid
        #ddd9ff;

    border-radius: 7px;

    background: #f7f5ff;

    color: #5f50d7 !important;

    font-size: 8px;

    font-weight: 700;

    text-decoration: none !important;
}


.tp-address {
    margin:
        5px 0
        0;

    color: #8b94a1;

    font-size: 9px;

    line-height: 1.45;

    overflow-wrap: anywhere;
}


.tp-activity-meta {
    margin-top: 5px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 5px;

    color: #a0a7b1;

    font-size: 8px;
}


.tp-access-badge {
    padding:
        3px 5px;

    border-radius: 999px;

    background: #ecfdf3;

    color: #15835c;

    font-weight: 700;
}


.tp-empty-day {
    margin:
        10px 0;

    font-size: 10px;
}


/* AFTER PLAN */

.tp-after-plan {
    margin:
        12px 0;

    padding: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border:
        1px solid
        #e8e4ff;

    border-radius: 12px;

    background: #fbfaff;
}


.tp-after-plan strong,
.tp-after-plan small {
    display: block;
}


.tp-after-plan strong {
    color: #4538b2;

    font-size: 10px;
}


.tp-after-plan small {
    margin-top: 2px;

    color: #837bb6;

    font-size: 8px;

    line-height: 1.4;
}


.tp-pace-switch {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;
}


.tp-pace-switch button {
    padding:
        6px 7px;

    border:
        1px solid
        #ddd9ff;

    border-radius: 8px;

    background: #fff;

    color: #6659c9;

    font-size: 8px;

    font-weight: 700;

    cursor: pointer;
}


.tp-pace-switch button.active {
    background: #6757e6;

    color: #fff;

    border-color: #6757e6;
}


/* SHAKE */

.shake {
    animation:
        tpShake
        0.35s;
}


@keyframes tpShake {

    25% {
        transform:
            translateX(
                -4px
            );
    }

    75% {
        transform:
            translateX(
                4px
            );
    }

}


/* TABLET */

@media
(max-width: 760px) {

    .tp-page {
        padding:
            30px 12px
            60px;
    }


    .tp-chat {
        padding:
            22px 16px;
    }


    .tp-preset-grid,
    .tp-destination-results,
    .tp-options-grid,
    .tp-pref-grid,
    .tp-edit-grid {
        grid-template-columns: 1fr;
    }


    .tp-interest-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .tp-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .tp-day-choice-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .tp-result-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .tp-result-meta {
        justify-content: flex-start;
    }


    .tp-after-plan {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* MOBILE */

@media
(max-width: 540px) {

    .tp-page {
        padding:
            22px 8px
            44px;
    }


    .tp-hero {
        margin-bottom: 19px;
    }


    .tp-hero h1 {
        font-size: 31px;
    }


    .tp-hero p {
        font-size: 13px;
    }


    .tp-planner {
        border-radius: 17px;
    }


    .tp-header {
        padding: 12px;
    }


    .tp-avatar {
        width: 36px;
        height: 36px;

        border-radius: 10px;
    }


    .tp-header-actions {
        gap: 5px;
    }


    .tp-header-btn {
        padding: 7px;

        font-size: 9px;
    }


    .tp-progress {
        min-width: 720px;

        padding:
            10px 12px;
    }


    .tp-chat {
        min-height: 460px;

        max-height: none;

        padding:
            18px 10px;
    }


    .tp-message {
        max-width: 86%;

        padding:
            10px 12px;

        font-size: 12px;
    }


    .tp-message-avatar {
        width: 25px;
        height: 25px;

        font-size: 10px;
    }


    .tp-preset-panel,
    .tp-selection-card,
    .tp-counter-card,
    .tp-interest-wrapper,
    .tp-preferences-card,
    .tp-summary-card,
    .tp-two-actions,
    .tp-options-grid,
    .tp-loading-card,
    .tp-itinerary {
        width: 100%;

        margin-left: 0;
    }


    .tp-search-row {
        grid-template-columns: 1fr;
    }


    .tp-surprise-btn {
        min-height: 39px;
    }


    .tp-destination-results {
        grid-template-columns: 1fr;
    }


    .tp-verified {
        display: none;
    }


    .tp-day-choice-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .tp-custom-day-row {
        align-items: flex-start;

        flex-direction: column;
    }


    .tp-custom-day-row select {
        width: 100%;
    }


    .tp-counter-card {
        grid-template-columns: 1fr;
    }


    .tp-counter {
        justify-self: start;
    }


    .tp-interest-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .tp-summary-actions {
        grid-template-columns: 1fr;
    }


    .tp-two-actions,
    .tp-edit-actions {
        grid-template-columns: 1fr;
    }


    .tp-day-header {
        grid-template-columns:
            auto
            minmax(
                0,
                1fr
            );
    }


    .tp-day-actions {
        grid-column: 2;

        justify-content: flex-start;
    }


    .tp-activity {
        grid-template-columns:
            52px
            minmax(
                0,
                1fr
            );
    }


    .tp-toolbar button {
        flex:
            1 1 auto;
    }

}


/* PRINT */

@media print {

    .tp-hero,
    .tp-header,
    .tp-progress-scroll,
    .tp-message-row,
    .tp-toolbar,
    .tp-after-plan,
    .tp-itinerary
    > .tp-secondary-button {
        display: none !important;
    }


    .tp-page {
        padding: 0;

        background: #fff;
    }


    .tp-planner {
        border: 0;

        box-shadow: none;
    }


    .tp-chat {
        max-height: none;

        overflow: visible;

        padding: 0;
    }


    .tp-itinerary {
        width: 100%;

        margin: 0;
    }


    .tp-day {
        break-inside: avoid;
    }

}