/*
 * UkraineType UI Foundation v1
 *
 * Scope:
 * - foundational design tokens
 * - accessibility states
 * - Discover / traveller-input experience
 *
 * Product semantics:
 * blue  = verified / source-connected context
 * amber = attention
 * red   = justified active official alert only
 * gray  = unavailable / pending / neutral
 *
 * This stylesheet does not create safety semantics.
 */

:root {
    --ut-primary:
        #0057B7;

    --ut-primary-hover:
        #004A9C;

    --ut-primary-active:
        #003D82;

    --ut-primary-soft:
        #EAF3FF;

    --ut-bg:
        #F6F8FB;

    --ut-surface:
        #FFFFFF;

    --ut-surface-subtle:
        #F9FBFD;

    --ut-text:
        #102A43;

    --ut-text-secondary:
        #52697E;

    --ut-text-tertiary:
        #73869A;

    --ut-border:
        #DCE5EE;

    --ut-border-strong:
        #C7D4E1;

    --ut-info:
        #175CD3;

    --ut-info-bg:
        #EFF6FF;

    --ut-attention:
        #946200;

    --ut-attention-bg:
        #FFF7E6;

    --ut-danger:
        #B42318;

    --ut-danger-bg:
        #FEF3F2;

    --ut-success:
        #087A55;

    --ut-disabled:
        #98A7B5;

    --ut-space-1:
        4px;

    --ut-space-2:
        8px;

    --ut-space-3:
        12px;

    --ut-space-4:
        16px;

    --ut-space-5:
        20px;

    --ut-space-6:
        24px;

    --ut-space-8:
        32px;

    --ut-space-10:
        40px;

    --ut-space-12:
        48px;

    --ut-radius-sm:
        10px;

    --ut-radius-md:
        14px;

    --ut-radius-lg:
        20px;

    --ut-radius-xl:
        28px;

    --ut-shadow-surface:
        0 1px 2px rgba(16,42,67,.04),
        0 12px 36px rgba(16,42,67,.06);

    --ut-shadow-raised:
        0 16px 42px rgba(16,42,67,.10);

    --ut-focus:
        0 0 0 3px rgba(0,87,183,.22);

    --ut-container:
        1180px;

    --ut-transition:
        160ms ease;
}


/* ======================================================
   GLOBAL FOUNDATION
   ====================================================== */

html {
    scroll-behavior:
        smooth;
}

body {
    background:
        var(--ut-bg);

    color:
        var(--ut-text);

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;
}

img {
    max-width:
        100%;
}

button,
input,
select,
textarea {
    font:
        inherit;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color:
        transparent;
}

:where(
    a,
    button,
    input,
    select,
    textarea,
    [tabindex]
):focus-visible {
    outline:
        3px solid
        rgba(0,87,183,.28);

    outline-offset:
        3px;
}

button:disabled,
input:disabled,
select:disabled {
    cursor:
        not-allowed;
}

.shell {
    width:
        min(
            calc(100% - 40px),
            var(--ut-container)
        );

    margin-inline:
        auto;
}


/* ======================================================
   DISCOVER — INFORMATION HIERARCHY
   ====================================================== */

.travellerInputPanel,
.tripModePanel {
    border:
        1px solid
        var(--ut-border);

    border-radius:
        var(--ut-radius-lg);

    background:
        var(--ut-surface);

    box-shadow:
        var(--ut-shadow-surface);

    padding:
        clamp(
            20px,
            2.4vw,
            28px
        );
}

.travellerInputHead,
.tripModeHead {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    margin-bottom:
        var(--ut-space-5);
}

.travellerInputHead strong,
.tripModeHead strong {
    color:
        var(--ut-text);

    font-size:
        15px;

    font-weight:
        800;

    line-height:
        1.35;
}

.travellerInputHead > span,
.tripModeHead > span {
    color:
        var(--ut-text-secondary);

    font-size:
        13px;

    line-height:
        1.55;
}

.travellerField {
    min-width:
        0;
}

.travellerField
+ .travellerField {
    margin-top:
        var(--ut-space-5);

    padding-top:
        var(--ut-space-5);

    border-top:
        1px solid
        var(--ut-border);
}

.travellerFieldLabel {
    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--ut-text);

    font-size:
        13px;

    font-weight:
        780;

    line-height:
        1.35;
}

.travellerChoices {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        var(--ut-space-2);
}

.travellerChoice {
    position:
        relative;

    display:
        inline-flex;

    min-width:
        0;

    cursor:
        pointer;
}

.travellerChoice input {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0 0 0 0);

    clip-path:
        inset(50%);

    white-space:
        nowrap;
}

.travellerChoice > span {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        0 14px;

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

    border-radius:
        999px;

    background:
        var(--ut-surface-subtle);

    color:
        var(--ut-text-secondary);

    font-size:
        12px;

    font-weight:
        720;

    line-height:
        1.2;

    transition:
        border-color
        var(--ut-transition),
        background
        var(--ut-transition),
        color
        var(--ut-transition),
        box-shadow
        var(--ut-transition),
        transform
        var(--ut-transition);
}

.travellerChoice:hover
> span {
    border-color:
        var(--ut-border-strong);

    background:
        #FFFFFF;

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

.travellerChoice input:checked
+ span {
    border-color:
        rgba(0,87,183,.42);

    background:
        var(--ut-primary-soft);

    color:
        var(--ut-primary);
}

.travellerChoice input:focus-visible
+ span {
    outline:
        none;

    box-shadow:
        var(--ut-focus);
}

.travellerInputNote {
    margin-top:
        var(--ut-space-5);

    padding:
        12px 14px;

    border-radius:
        var(--ut-radius-sm);

    background:
        var(--ut-surface-subtle);

    color:
        var(--ut-text-tertiary);

    font-size:
        12px;

    line-height:
        1.55;
}


/* ======================================================
   TRIP MODE
   ====================================================== */

.tripModeChoices {
    display:
        grid;

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

    gap:
        var(--ut-space-3);
}

.tripModeChoice {
    position:
        relative;

    display:
        block;

    min-width:
        0;

    cursor:
        pointer;
}

.tripModeChoice > input {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0 0 0 0);

    clip-path:
        inset(50%);

    white-space:
        nowrap;
}

.tripModeCard {
    min-height:
        92px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        5px;

    padding:
        16px;

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

    border-radius:
        var(--ut-radius-md);

    background:
        var(--ut-surface-subtle);

    transition:
        border-color
        var(--ut-transition),
        background
        var(--ut-transition),
        box-shadow
        var(--ut-transition),
        transform
        var(--ut-transition);
}

.tripModeCard b {
    color:
        var(--ut-text);

    font-size:
        13px;

    font-weight:
        800;
}

.tripModeCard span {
    color:
        var(--ut-text-secondary);

    font-size:
        12px;

    line-height:
        1.5;
}

.tripModeChoice:hover
.tripModeCard {
    border-color:
        var(--ut-border-strong);

    background:
        #FFFFFF;
}

.tripModeChoice
> input:checked
+ .tripModeCard {
    border-color:
        rgba(0,87,183,.48);

    background:
        var(--ut-primary-soft);

    box-shadow:
        inset 0 0 0 1px
        rgba(0,87,183,.05);
}

.tripModeChoice
> input:focus-visible
+ .tripModeCard {
    box-shadow:
        var(--ut-focus);
}

.tripModeRuntime {
    margin-top:
        var(--ut-space-3);

    padding:
        11px 13px;

    border-radius:
        var(--ut-radius-sm);

    background:
        var(--ut-info-bg);

    color:
        var(--ut-text-secondary);

    font-size:
        12px;

    line-height:
        1.5;
}


/* ======================================================
   CURRENT LOCATION — OPTIONAL / TRANSIENT
   ====================================================== */

.currentLocationPanel {
    margin-top:
        var(--ut-space-4);

    padding:
        16px;

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

    border-radius:
        var(--ut-radius-md);

    background:
        var(--ut-surface-subtle);
}

.currentLocationTop {
    display:
        grid;

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

    align-items:
        center;

    gap:
        var(--ut-space-4);
}

.currentLocationCopy {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}

.currentLocationCopy strong {
    color:
        var(--ut-text);

    font-size:
        13px;

    font-weight:
        800;
}

.currentLocationCopy span,
.currentLocationPrivacy,
.currentLocationStatus {
    color:
        var(--ut-text-secondary);

    font-size:
        12px;

    line-height:
        1.5;
}

.currentLocationBtn {
    min-height:
        42px;

    padding:
        0 14px;

    border:
        1px solid
        var(--ut-border-strong);

    border-radius:
        var(--ut-radius-sm);

    background:
        var(--ut-surface);

    color:
        var(--ut-primary);

    font-size:
        12px;

    font-weight:
        780;

    cursor:
        pointer;

    transition:
        background
        var(--ut-transition),
        border-color
        var(--ut-transition),
        transform
        var(--ut-transition);
}

.currentLocationBtn:hover {
    border-color:
        rgba(0,87,183,.4);

    background:
        var(--ut-primary-soft);
}

.currentLocationBtn:active {
    transform:
        translateY(1px);
}

.currentLocationStatus {
    margin-top:
        10px;

    font-weight:
        700;
}

.currentLocationPrivacy {
    margin-top:
        6px;

    color:
        var(--ut-text-tertiary);
}


/* ======================================================
   PRIMARY ANALYZE ACTION
   ====================================================== */

.photoMatchRow {
    display:
        flex;

    margin-top:
        var(--ut-space-5);
}

#searchBtn {
    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    padding:
        0 22px;

    border:
        1px solid
        transparent;

    border-radius:
        var(--ut-radius-md);

    background:
        var(--ut-primary);

    color:
        #FFFFFF;

    font-size:
        13px;

    font-weight:
        820;

    line-height:
        1;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px
        rgba(0,87,183,.16);

    transition:
        background
        var(--ut-transition),
        box-shadow
        var(--ut-transition),
        transform
        var(--ut-transition);
}

#searchBtn:hover:not(:disabled) {
    background:
        var(--ut-primary-hover);

    box-shadow:
        0 10px 26px
        rgba(0,87,183,.21);

    transform:
        translateY(-1px);
}

#searchBtn:active:not(:disabled) {
    background:
        var(--ut-primary-active);

    transform:
        translateY(0);
}

#searchBtn:disabled {
    background:
        #D8E0E8;

    color:
        #708292;

    box-shadow:
        none;

    opacity:
        1;
}

.inputTrustLine {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        13px;

    color:
        var(--ut-text-tertiary);

    font-size:
        11px;

    font-weight:
        650;

    line-height:
        1.4;
}

.inputTrustLine i {
    width:
        3px;

    height:
        3px;

    flex:
        0 0 3px;

    border-radius:
        50%;

    background:
        var(--ut-border-strong);
}


/* ======================================================
   FEEDBACK STATES
   ====================================================== */

.loading {
    margin-top:
        16px;

    color:
        var(--ut-text-secondary);

    font-size:
        13px;

    line-height:
        1.5;
}

.err {
    margin-top:
        14px;

    padding:
        0;

    color:
        var(--ut-danger);

    font-size:
        13px;

    font-weight:
        650;

    line-height:
        1.5;
}

.err:not(:empty) {
    padding:
        12px 14px;

    border:
        1px solid
        rgba(180,35,24,.18);

    border-radius:
        var(--ut-radius-sm);

    background:
        var(--ut-danger-bg);
}


/* ======================================================
   RESULTS ENTRY POINT
   ====================================================== */

.analysis {
    border:
        1px solid
        var(--ut-border);

    border-radius:
        var(--ut-radius-md);

    background:
        var(--ut-surface);

    box-shadow:
        var(--ut-shadow-surface);
}


/* ======================================================
   MOBILE-FIRST REFINEMENT
   ====================================================== */

@media (
    max-width:
        760px
) {
    .shell {
        width:
            min(
                calc(100% - 28px),
                var(--ut-container)
            );
    }

    .travellerInputPanel,
    .tripModePanel {
        padding:
            18px;

        border-radius:
            16px;
    }

    .travellerChoices {
        gap:
            7px;
    }

    .travellerChoice > span {
        min-height:
            44px;

        padding-inline:
            13px;
    }

    .tripModeChoices {
        grid-template-columns:
            1fr;
    }

    .tripModeCard {
        min-height:
            82px;
    }

    .currentLocationTop {
        grid-template-columns:
            1fr;
    }

    .currentLocationBtn {
        width:
            100%;

        min-height:
            44px;
    }

    .photoMatchRow {
        display:
            block;
    }

    #searchBtn {
        width:
            100%;

        min-height:
            52px;
    }

    .inputTrustLine {
        justify-content:
            flex-start;
    }
}

@media (
    max-width:
        375px
) {
    .shell {
        width:
            min(
                calc(100% - 20px),
                var(--ut-container)
            );
    }

    .travellerInputPanel,
    .tripModePanel {
        padding:
            15px;
    }

    .travellerChoice {
        flex:
            1 1
            calc(50% - 7px);
    }

    .travellerChoice > span {
        width:
            100%;

        padding-inline:
            10px;
    }

    .inputTrustLine i {
        display:
            none;
    }

    .inputTrustLine span {
        flex:
            1 1 100%;
    }
}


/* ======================================================
   REDUCED MOTION
   ====================================================== */

@media (
    prefers-reduced-motion:
        reduce
) {
    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }
}


/* ======================================================
   MATCH CARDS V2 START
   ====================================================== */

/*
 * Match percentage represents experience compatibility.
 * It is never a safety score.
 *
 * Card intelligence is intentionally compact.
 * Detailed traveller intelligence belongs in My Trip.
 */

.results .cards {
    display:
        grid;

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

    gap:
        20px;

    align-items:
        stretch;
}

.results .cards > .card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    overflow:
        hidden;

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

    border-radius:
        var(--ut-radius-lg);

    background:
        var(--ut-surface);

    box-shadow:
        var(--ut-shadow-surface);

    transition:
        border-color
        var(--ut-transition),
        box-shadow
        var(--ut-transition),
        transform
        var(--ut-transition);
}

.results .cards > .card:hover {
    border-color:
        var(--ut-border-strong);

    box-shadow:
        var(--ut-shadow-raised);

    transform:
        translateY(-2px);
}

.results .cards
> .card.topChoice {
    border:
        1px solid
        rgba(0,87,183,.38);

    box-shadow:
        0 1px 2px
        rgba(16,42,67,.04),
        0 18px 44px
        rgba(0,87,183,.10);
}

.results .cards
> .card.selectedDestination {
    border-color:
        var(--ut-primary);

    box-shadow:
        0 0 0 2px
        rgba(0,87,183,.10),
        0 18px 42px
        rgba(16,42,67,.10);
}


/* IMAGE */

.results .card .photo {
    position:
        relative;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

    background:
        #E8EEF4;
}

.results .card .photo::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(5,24,43,.18)
            0%,
            rgba(5,24,43,0)
            36%,
            rgba(5,24,43,.08)
            100%
        );
}

.results .card .photo img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        320ms ease;
}

.results .card:hover
.photo img {
    transform:
        scale(1.018);
}

.results .card
.photoFallback {
    width:
        100%;

    height:
        100%;

    display:
        grid;

    place-items:
        center;

    background:
        linear-gradient(
            145deg,
            #E7EEF6,
            #CAD9E8
        );

    color:
        #54708A;

    font-size:
        44px;

    font-weight:
        850;
}


/* IMAGE OVERLAY */

.matchCardOverlay {
    position:
        absolute;

    z-index:
        2;

    inset:
        12px 12px auto 12px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        10px;

    pointer-events:
        none;
}

.results .topChoiceBadge {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        30px;

    max-width:
        calc(100% - 76px);

    padding:
        0 10px;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius:
        999px;

    background:
        rgba(8,34,61,.82);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    color:
        #FFFFFF;

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        .02em;

    box-shadow:
        0 4px 14px
        rgba(0,0,0,.10);
}

.results .matchScore {
    position:
        static;

    flex:
        0 0 auto;

    width:
        auto;

    height:
        36px;

    min-width:
        58px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 10px;

    border:
        1px solid
        rgba(255,255,255,.62);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.94);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    color:
        var(--ut-text);

    font-size:
        13px;

    font-weight:
        850;

    box-shadow:
        0 5px 16px
        rgba(12,35,56,.12);
}

.results .matchScore::after {
    content:
        none;
}


/* BODY */

.results .cardbody {
    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    padding:
        18px;
}

.matchCardHeading {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;
}

.matchCardDestination {
    min-width:
        0;
}

.results .cardbody h3 {
    margin:
        0;

    color:
        var(--ut-text);

    font-size:
        clamp(
            20px,
            1.7vw,
            23px
        );

    font-weight:
        820;

    line-height:
        1.18;

    letter-spacing:
        -.025em;
}

.results .card .region {
    margin-top:
        5px;

    color:
        var(--ut-text-tertiary);

    font-size:
        12px;

    font-weight:
        650;

    line-height:
        1.35;
}


/* WHY MATCH */

.matchWhy {
    margin-top:
        17px;

    padding-top:
        15px;

    border-top:
        1px solid
        var(--ut-border);
}

.matchWhyLabel {
    margin-bottom:
        6px;

    color:
        var(--ut-primary);

    font-size:
        10px;

    font-weight:
        850;

    line-height:
        1.2;

    letter-spacing:
        .075em;

    text-transform:
        uppercase;
}

.results .card .why {
    margin:
        0;

    color:
        var(--ut-text-secondary);

    font-size:
        13px;

    line-height:
        1.58;
}


/* MATCH TAGS */

.results .card .micro {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-top:
        13px;
}

.results .card
.micro span {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    padding:
        0 9px;

    border:
        1px solid
        #E4EBF2;

    border-radius:
        999px;

    background:
        #F6F9FC;

    color:
        #536A80;

    font-size:
        10px;

    font-weight:
        750;

    line-height:
        1;
}


/* COMPACT 4-LAYER CONTEXT */

.matchContextMini {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        16px;

    padding:
        10px 11px;

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

    border-radius:
        var(--ut-radius-sm);

    background:
        var(--ut-surface-subtle);

    color:
        var(--ut-text-tertiary);

    font-size:
        10px;

    font-weight:
        650;

    line-height:
        1.35;
}

.matchContextDots {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            7px
        );

    gap:
        4px;

    flex:
        0 0 auto;
}

.matchContextDots i {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #C9D3DD;
}

.matchContextDots
i.verified {
    background:
        var(--ut-primary);
}

.matchContextDots
i.pending {
    background:
        #C9D3DD;
}

.matchContextDots
i.reference {
    background:
        #8F9EAC;
}

.matchContextMini > span {
    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* FOOTER / CTA */

.matchCardFooter {
    display:
        grid;

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

    align-items:
        center;

    gap:
        12px;

    margin-top:
        auto;

    padding-top:
        18px;
}

.matchPosition {
    color:
        var(--ut-text-tertiary);

    font-size:
        10px;

    font-weight:
        750;

    white-space:
        nowrap;

    font-variant-numeric:
        tabular-nums;
}

.results
.chooseDestinationBtn {
    width:
        100%;

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 14px;

    border:
        1px solid
        var(--ut-primary);

    border-radius:
        var(--ut-radius-sm);

    background:
        var(--ut-primary);

    color:
        #FFFFFF;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1.2;

    text-align:
        center;

    cursor:
        pointer;

    transition:
        background
        var(--ut-transition),
        border-color
        var(--ut-transition),
        box-shadow
        var(--ut-transition),
        transform
        var(--ut-transition);
}

.results
.chooseDestinationBtn:hover {
    border-color:
        var(--ut-primary-hover);

    background:
        var(--ut-primary-hover);

    transform:
        translateY(-1px);
}

.results
.chooseDestinationBtn:active {
    background:
        var(--ut-primary-active);

    transform:
        translateY(0);
}

.results
.chooseDestinationBtn.selected {
    border-color:
        rgba(0,87,183,.24);

    background:
        var(--ut-primary-soft);

    color:
        var(--ut-primary);

    box-shadow:
        inset 0 0 0 1px
        rgba(0,87,183,.06);
}


/* RESPONSIVE */

@media (
    max-width:
        1023px
) {
    .results .cards {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }
}

@media (
    max-width:
        680px
) {
    .results .cards {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }

    .results .card .photo {
        aspect-ratio:
            16 / 9;
    }

    .results .cardbody {
        padding:
            17px;
    }

    .results .card:hover {
        transform:
            none;
    }

    .results .card:hover
    .photo img {
        transform:
            none;
    }

    .matchContextMini > span {
        white-space:
            normal;
    }
}

@media (
    max-width:
        375px
) {
    .results .cardbody {
        padding:
            15px;
    }

    .matchCardOverlay {
        inset:
            10px 10px auto;
    }

    .results .topChoiceBadge {
        min-height:
            28px;

        padding-inline:
            8px;

        font-size:
            9px;
    }

    .results .matchScore {
        height:
            32px;

        min-width:
            52px;

        padding-inline:
            8px;

        font-size:
            12px;
    }

    .matchCardFooter {
        grid-template-columns:
            1fr;
    }

    .matchPosition {
        order:
            2;

        text-align:
            center;
    }

    .results
    .chooseDestinationBtn {
        min-height:
            46px;
    }
}

@media (
    prefers-reduced-motion:
        reduce
) {
    .results .card,
    .results .card .photo img,
    .results .chooseDestinationBtn {
        transform:
            none !important;
    }
}

/* ======================================================
   MATCH CARDS V2 END
   ====================================================== */


/* ======================================================
   MY TRIP V2 START
   ====================================================== */

/*
 * My Trip is the traveller decision workspace.
 *
 * Hierarchy:
 * destination
 * -> trip mode
 * -> current evidence context
 * -> meaningful change
 * -> backend-selected One Clear Action
 * -> supporting detail
 *
 * Blue never means "safe".
 * Amber means attention/relevance.
 * Red is not introduced by this presentation layer.
 */


/* ------------------------------------------------------
   WORKSPACE
   ------------------------------------------------------ */

#myTripPanel.myTripChoice {
    display:
        flex;

    flex-direction:
        column;

    margin-top:
        24px;

    padding:
        clamp(
            20px,
            2.4vw,
            28px
        );

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

    border-radius:
        var(--ut-radius-lg);

    background:
        var(--ut-surface);

    box-shadow:
        var(--ut-shadow-surface);
}

#myTripPanel[hidden] {
    display:
        none;
}


/* ------------------------------------------------------
   HEADER
   ------------------------------------------------------ */

.myTripChoiceTop {
    order:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;
}

.myTripChoiceKicker {
    color:
        var(--ut-primary);

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        .08em;

    line-height:
        1.2;

    text-transform:
        uppercase;
}

.myTripChoiceSelected {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        30px;

    padding:
        0 10px;

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

    border-radius:
        999px;

    background:
        var(--ut-surface-subtle);

    color:
        var(--ut-text-secondary);

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;
}

.myTripChoiceSelected.during {
    border-color:
        rgba(0,87,183,.20);

    background:
        var(--ut-primary-soft);

    color:
        var(--ut-primary);
}

.myTripChoiceDestination {
    order:
        2;

    margin-top:
        14px;

    color:
        var(--ut-text);

    font-size:
        clamp(
            26px,
            3vw,
            36px
        );

    font-weight:
        850;

    line-height:
        1.08;

    letter-spacing:
        -.035em;
}

.myTripChoiceRegion {
    order:
        3;

    margin-top:
        5px;

    color:
        var(--ut-text-tertiary);

    font-size:
        12px;

    font-weight:
        650;

    line-height:
        1.4;
}


/* ------------------------------------------------------
   BEFORE / DURING SEGMENT
   ------------------------------------------------------ */

.myTripModeSwitch {
    order:
        4;

    display:
        grid;

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

    gap:
        4px;

    width:
        min(
            100%,
            420px
        );

    margin-top:
        20px;

    padding:
        4px;

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

    border-radius:
        12px;

    background:
        #F3F6F9;
}

.myTripModeBtn {
    min-height:
        42px;

    padding:
        0 14px;

    border:
        1px solid
        transparent;

    border-radius:
        9px;

    background:
        transparent;

    color:
        var(--ut-text-secondary);

    font-size:
        11px;

    font-weight:
        780;

    cursor:
        pointer;

    transition:
        background
        var(--ut-transition),
        color
        var(--ut-transition),
        border-color
        var(--ut-transition),
        box-shadow
        var(--ut-transition);
}

.myTripModeBtn:hover {
    color:
        var(--ut-text);

    background:
        rgba(255,255,255,.65);
}

.myTripModeBtn.active {
    border-color:
        var(--ut-border);

    background:
        #FFFFFF;

    color:
        var(--ut-primary);

    box-shadow:
        0 2px 8px
        rgba(16,42,67,.06);
}


/* ------------------------------------------------------
   CURRENT CONTEXT
   ------------------------------------------------------ */

.myTripCurrentContext {
    order:
        5;

    margin-top:
        22px;

    padding:
        16px;

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

    border-radius:
        var(--ut-radius-md);

    background:
        var(--ut-surface-subtle);
}

.myTripSectionLabel {
    margin-bottom:
        10px;

    color:
        var(--ut-text-tertiary);

    font-size:
        10px;

    font-weight:
        850;

    line-height:
        1.2;

    letter-spacing:
        .075em;

    text-transform:
        uppercase;
}

.myTripChoiceContext {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--ut-text-secondary);

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1.45;
}

.myTripChoiceDots {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            9px
        );

    gap:
        5px;

    flex:
        0 0 auto;
}

.myTripChoiceDots i {
    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #C9D3DD;
}

.myTripChoiceDots i.on {
    background:
        var(--ut-primary);
}


/* ------------------------------------------------------
   REFRESH CONTROL
   ------------------------------------------------------ */

#myTripPanel
.myTripRefresh {
    order:
        6;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-top:
        12px;

    padding:
        14px 16px;

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

    border-radius:
        var(--ut-radius-md);

    background:
        #FFFFFF;
}

#myTripPanel
.myTripRefresh > span {
    min-width:
        0;

    color:
        var(--ut-text-secondary);

    font-size:
        11px;

    font-weight:
        650;

    line-height:
        1.45;
}

#myTripPanel
.myTripRefreshBtn {
    flex:
        0 0 auto;

    min-height:
        40px;

    padding:
        0 13px;

    border:
        1px solid
        var(--ut-primary);

    border-radius:
        var(--ut-radius-sm);

    background:
        #FFFFFF;

    color:
        var(--ut-primary);

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        background
        var(--ut-transition),
        color
        var(--ut-transition);
}

#myTripPanel
.myTripRefreshBtn:hover:not(:disabled) {
    background:
        var(--ut-primary-soft);
}

#myTripPanel
.myTripRefreshBtn:disabled {
    cursor:
        wait;

    opacity:
        .55;
}


/* ------------------------------------------------------
   CHANGE STATE
   ------------------------------------------------------ */

#myTripPanel
.myTripChangeStatus {
    order:
        7;

    margin-top:
        16px;

    padding:
        16px;

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

    border-radius:
        var(--ut-radius-md);

    background:
        #FFFFFF;

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

#myTripPanel
.myTripChangeStatus.neutral {
    background:
        var(--ut-surface-subtle);
}

#myTripPanel
.myTripChangeStatus.attention {
    border-color:
        #E9CB74;

    background:
        var(--ut-attention-bg);
}

.myTripChangeHeadline {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;
}

.myTripChangeHeadline
.myTripChangeDot {
    width:
        26px;

    height:
        26px;

    flex:
        0 0 26px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #F6E5A8;

    color:
        #765000;

    font-size:
        12px;

    font-weight:
        900;
}

.myTripChangeHeadline strong {
    display:
        block;

    color:
        var(--ut-text);

    font-size:
        13px;

    font-weight:
        820;

    line-height:
        1.35;
}

.myTripChangeHeadline small {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--ut-text-secondary);

    font-size:
        11px;

    line-height:
        1.45;
}


/* ------------------------------------------------------
   ONE CLEAR ACTION
   ------------------------------------------------------ */

.myTripPrimaryAction {
    margin-top:
        15px;

    padding:
        15px;

    border:
        1px solid
        rgba(0,87,183,.20);

    border-radius:
        var(--ut-radius-md);

    background:
        #FFFFFF;

    box-shadow:
        0 4px 14px
        rgba(16,42,67,.04);
}

.myTripPrimaryActionKicker {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--ut-primary);

    font-size:
        9px;

    font-weight:
        900;

    line-height:
        1.2;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}

.myTripPrimaryAction strong {
    display:
        block;

    color:
        var(--ut-text);

    font-size:
        15px;

    font-weight:
        850;

    line-height:
        1.35;
}

.myTripPrimaryActionInstruction {
    margin-top:
        7px;

    color:
        var(--ut-text-secondary);

    font-size:
        12px;

    line-height:
        1.58;
}


/* ------------------------------------------------------
   CHANGE DISCLOSURE
   ------------------------------------------------------ */

.myTripImpactDisclosure {
    margin-top:
        13px;

    border-top:
        1px solid
        rgba(148,98,0,.14);

    padding-top:
        12px;
}

.myTripImpactDisclosure summary {
    width:
        fit-content;

    color:
        var(--ut-primary);

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;
}

.myTripImpactDisclosure summary:hover {
    text-decoration:
        underline;
}

.myTripImpactList {
    display:
        grid;

    gap:
        8px;

    margin-top:
        12px;
}

.myTripImpactItem {
    padding:
        11px 12px;

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

    border-radius:
        var(--ut-radius-sm);

    background:
        #FFFFFF;
}

.myTripImpactItem strong {
    display:
        block;

    color:
        var(--ut-text);

    font-size:
        11px;
}

.myTripImpactItem span {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--ut-text-secondary);

    font-size:
        11px;

    line-height:
        1.5;
}


/* ------------------------------------------------------
   GLOBAL CHANGE SUMMARY
   ------------------------------------------------------ */

.results
.contextChangeWrap {
    margin:
        18px 0;
}

.results
.contextChangePanel {
    border:
        1px solid
        var(--ut-border);

    border-radius:
        var(--ut-radius-md);

    background:
        var(--ut-surface);

    box-shadow:
        none;
}

.results
.contextChangePanel.changed {
    border-color:
        #E9CB74;

    background:
        #FFFDF6;
}

.results
.contextChangePanel.unchanged {
    background:
        var(--ut-surface-subtle);
}

.results
.contextChangeKicker {
    color:
        var(--ut-text-tertiary);

    font-size:
        9px;

    letter-spacing:
        .08em;
}

.results
.contextChangeItem {
    border-color:
        var(--ut-border);

    background:
        #FFFFFF;
}


/* ------------------------------------------------------
   QUICK HELP
   ------------------------------------------------------ */

#travelHelpCenterWrap {
    margin-top:
        18px;
}

#travelHelpCenterWrap:empty {
    display:
        none;
}

.travelHelpCenter.on.compact {
    padding:
        18px;

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

    background:
        var(--ut-surface);

    box-shadow:
        var(--ut-shadow-surface);
}

.travelHelpCompactHead {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        13px;
}

.travelHelpCompactHead strong {
    color:
        var(--ut-text);

    font-size:
        13px;

    font-weight:
        850;
}

.travelHelpCompactActions {
    display:
        grid;

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

    gap:
        8px;
}

.travelHelpQuickAction {
    min-width:
        0;

    min-height:
        58px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    gap:
        4px;

    padding:
        10px 11px;

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

    border-radius:
        var(--ut-radius-sm);

    background:
        var(--ut-surface-subtle);

    color:
        var(--ut-text);

    text-decoration:
        none;

    transition:
        background
        var(--ut-transition),
        border-color
        var(--ut-transition),
        transform
        var(--ut-transition);
}

.travelHelpQuickAction:hover {
    border-color:
        rgba(0,87,183,.30);

    background:
        var(--ut-primary-soft);

    transform:
        translateY(-1px);
}

.travelHelpQuickAction b {
    color:
        var(--ut-primary);

    font-size:
        14px;

    font-weight:
        900;

    line-height:
        1;
}

.travelHelpQuickAction span {
    min-width:
        0;

    color:
        var(--ut-text-secondary);

    font-size:
        10px;

    font-weight:
        750;

    line-height:
        1.25;
}

.travelHelpQuickAction.emergency {
    border-color:
        #D7E2EC;

    background:
        #F7FAFD;
}

/*
 * Emergency access is intentionally not styled red.
 * Presence of an emergency number does not mean an
 * emergency has been detected.
 */

.travelHelpQuickAction.disabled {
    opacity:
        .52;

    pointer-events:
        none;
}

.travelHelpCompactMeta {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        11px;

    color:
        var(--ut-text-tertiary);

    font-size:
        10px;

    line-height:
        1.4;
}

.travelHelpCompactMeta b {
    color:
        var(--ut-text-secondary);

    font-weight:
        750;
}

.travelHelpMore {
    margin-top:
        12px;

    padding-top:
        11px;

    border-top:
        1px solid
        var(--ut-border);
}

.travelHelpMore > summary {
    width:
        fit-content;

    color:
        var(--ut-primary);

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;
}

.travelHelpMoreBody {
    display:
        grid;

    gap:
        14px;

    margin-top:
        13px;
}

.travelHelpDetailSection > strong {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--ut-text);

    font-size:
        11px;
}

.travelHelpSecondaryCalls,
.travelHelpDetailLinks {
    display:
        grid;

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

    gap:
        7px;
}

.travelHelpSecondaryCall,
.travelHelpDetailLink {
    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 10px;

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

    border-radius:
        var(--ut-radius-sm);

    background:
        var(--ut-surface-subtle);

    color:
        var(--ut-text-secondary);

    font-size:
        10px;

    text-decoration:
        none;
}

.travelHelpReferenceNote {
    padding:
        10px 11px;

    border-radius:
        var(--ut-radius-sm);

    background:
        #F4F7FA;

    color:
        var(--ut-text-tertiary);

    font-size:
        10px;

    line-height:
        1.5;
}


/* ------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------ */

@media (
    max-width:
        700px
) {
    #myTripPanel.myTripChoice {
        padding:
            18px;
    }

    .myTripChoiceDestination {
        font-size:
            28px;
    }

    #myTripPanel
    .myTripRefresh {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    #myTripPanel
    .myTripRefreshBtn {
        width:
            100%;

        min-height:
            44px;
    }

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

@media (
    max-width:
        375px
) {
    #myTripPanel.myTripChoice {
        padding:
            15px;
    }

    .myTripChoiceTop {
        align-items:
            flex-start;
    }

    .myTripModeSwitch {
        width:
            100%;
    }

    .myTripCurrentContext,
    #myTripPanel
    .myTripChangeStatus {
        padding:
            14px;
    }

    .travelHelpCenter.on.compact {
        padding:
            14px;
    }

    .travelHelpQuickAction {
        min-height:
            62px;
    }

    .travelHelpSecondaryCalls,
    .travelHelpDetailLinks {
        grid-template-columns:
            1fr;
    }
}

@media (
    prefers-reduced-motion:
        reduce
) {
    .travelHelpQuickAction {
        transform:
            none !important;
    }
}

/* ======================================================
   MY TRIP V2 END
   ====================================================== */


/* ======================================================
   UI PRODUCTION POLISH V1 START
   ====================================================== */

/*
 * Evidence semantics:
 *
 * blue  = verified / source-connected
 * amber = relevant attention
 * gray  = pending / unavailable / reference
 *
 * Verified must never visually imply "safe".
 */


/* ------------------------------------------------------
   SOURCE / EVIDENCE SEMANTICS
   ------------------------------------------------------ */

.evidenceFreshness.verified span {
    color:
        var(--ut-primary);
}

.evidenceFreshness.pending span {
    color:
        var(--ut-attention);
}

.evidenceFreshness.unavailable span {
    color:
        var(--ut-text-tertiary);
}

.evidenceFreshness {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-top:
        9px;

    padding-top:
        9px;

    border-top:
        1px solid
        var(--ut-border);
}

.evidenceFreshness span {
    min-width:
        0;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1.4;
}

.evidenceFreshness small {
    flex:
        0 1 auto;

    min-width:
        0;

    color:
        var(--ut-text-tertiary);

    font-size:
        10px;

    line-height:
        1.4;

    text-align:
        end;

    overflow-wrap:
        anywhere;
}

.evidenceValidity,
.evidenceFreshnessNote {
    margin-top:
        7px;

    color:
        var(--ut-text-tertiary);

    font-size:
        10px;

    line-height:
        1.55;

    overflow-wrap:
        anywhere;
}


/* ------------------------------------------------------
   SOURCE CHIPS
   ------------------------------------------------------ */

.sourceChip {
    display:
        inline-flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        4px;

    max-width:
        100%;

    color:
        var(--ut-text-tertiary);

    font-size:
        10px;

    line-height:
        1.45;

    overflow-wrap:
        anywhere;
}

.sourceChip a {
    max-width:
        100%;

    color:
        var(--ut-primary);

    font-weight:
        750;

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        2px;

    overflow-wrap:
        anywhere;
}

.sourceChip a:hover {
    color:
        var(--ut-primary-hover);
}


/* ------------------------------------------------------
   DECISION DETAILS
   ------------------------------------------------------ */

.decisionDetailSections {
    display:
        grid;

    gap:
        14px;

    min-width:
        0;
}

.decisionDetailSection {
    min-width:
        0;

    padding:
        16px;

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

    border-radius:
        var(--ut-radius-md);

    background:
        var(--ut-surface);
}

.decisionDetailTitle {
    margin-bottom:
        12px;

    color:
        var(--ut-text-tertiary);

    font-size:
        10px;

    font-weight:
        850;

    line-height:
        1.25;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


/* ------------------------------------------------------
   EVIDENCE CONTENT
   ------------------------------------------------------ */

.evidenceSource {
    min-width:
        0;

    color:
        var(--ut-text-secondary);

    font-size:
        11px;

    line-height:
        1.5;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}

.contextStatus {
    min-width:
        0;

    margin-top:
        12px;

    padding:
        13px;

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

    border-radius:
        var(--ut-radius-sm);

    background:
        var(--ut-surface-subtle);
}

.contextStatusTop,
.contextVerificationSummary {
    min-width:
        0;
}

.contextMode.live {
    color:
        var(--ut-primary);
}

/*
 * Override any previous green "verified" treatment.
 * Verified is evidence state, not safety state.
 */
.contextMode.live i,
.visualIntelLayer.verified
.visualIntelState {
    background:
        var(--ut-primary);
}


/* ------------------------------------------------------
   DETAILS / DISCLOSURES
   ------------------------------------------------------ */

.decisionDetailSection details,
.tripHelpDisclosure,
.myTripImpactDisclosure,
.travelHelpMore {
    min-width:
        0;
}

.decisionDetailSection summary,
.tripHelpDisclosure summary,
.myTripImpactDisclosure summary,
.travelHelpMore summary {
    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    color:
        var(--ut-primary);

    cursor:
        pointer;

    border-radius:
        6px;
}

.decisionDetailSection summary:focus-visible,
.tripHelpDisclosure summary:focus-visible,
.myTripImpactDisclosure summary:focus-visible,
.travelHelpMore summary:focus-visible {
    outline:
        3px solid
        rgba(0,87,183,.28);

    outline-offset:
        3px;
}


/* ------------------------------------------------------
   LONG CONTENT / OVERFLOW PROTECTION
   ------------------------------------------------------ */

.results,
.card,
.cardbody,
.myTripChoice,
.myTripCurrentContext,
.myTripChangeStatus,
.myTripPrimaryAction,
.myTripImpactItem,
.decisionDetailSections,
.decisionDetailSection,
.contextStatus,
.travelHelpCenter,
.travelHelpMoreBody,
.travelHelpDetailSection,
.contextChangePanel,
.contextChangeItem {
    min-width:
        0;
}

.results p,
.results span,
.results strong,
.results small,
.results a,
.myTripChoice p,
.myTripChoice span,
.myTripChoice strong,
.decisionDetailSection p,
.decisionDetailSection span,
.decisionDetailSection strong,
.decisionDetailSection small,
.decisionDetailSection a,
.travelHelpCenter a,
.travelHelpCenter span {
    overflow-wrap:
        anywhere;
}


/* ------------------------------------------------------
   TOUCH / KEYBOARD
   ------------------------------------------------------ */

.chooseDestinationBtn,
.myTripModeBtn,
.myTripRefreshBtn,
.currentLocationBtn,
.travelHelpQuickAction {
    touch-action:
        manipulation;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    scroll-margin:
        16px;
}


/* ------------------------------------------------------
   MOBILE FINAL PASS
   ------------------------------------------------------ */

@media (
    max-width:
        700px
) {
    .decisionDetailSection {
        padding:
            14px;
    }

    .evidenceFreshness {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            4px;
    }

    .evidenceFreshness small {
        text-align:
            start;
    }

    .contextStatus {
        padding:
            12px;
    }
}

@media (
    max-width:
        375px
) {
    .decisionDetailSection {
        padding:
            12px;

        border-radius:
            12px;
    }

    .decisionDetailTitle {
        font-size:
            9px;
    }

    .sourceChip {
        width:
            100%;
    }
}


/* ------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------ */

@media (
    prefers-reduced-motion:
        reduce
) {
    .decisionDetailSection *,
    .travelHelpCenter *,
    .myTripChoice * {
        scroll-behavior:
            auto;
    }
}

/* ======================================================
   UI PRODUCTION POLISH V1 END
   ====================================================== */