/* Trip wizard (step 1: days/dates, step 2: interests) on index.html. Style-only refresh. */
:root {
    --wz-ocean: #0F3D4C;
    --wz-terracotta-ink: #A8432A;
    --wz-sun: #F2B33D;
    --wz-sand: #F5EEE3;
    --wz-ink: #1D2A33;
    --wz-muted: #5B6770;
    --wz-line: #E4DCCD;
    --wz-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- step cards ---------- */
#dayPanel.panel,
#interestPanel.panel {
    margin: 0 0 20px;
    border: 1px solid var(--wz-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 61, 76, .06);
    overflow: hidden;
    font-family: "DM Sans", -apple-system, "Segoe UI", sans-serif;
    animation: wz-rise .5s var(--wz-ease) both;
}
#interestPanel.panel { animation-delay: .08s; }
@keyframes wz-rise {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: none; }
}

#dayPanel .panel-heading,
#interestPanel .panel-heading {
    padding: 22px 26px 6px;
    border: 0;
    background: #fff;
}
#dayPanel .panel-title > div,
#interestPanel .panel-title > div {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: "Fraunces", Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--wz-ocean);
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
#dayPanel .panel-title .icon,
#interestPanel .panel-title .icon {
    flex: none;
    position: static !important;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--wz-ocean);
    color: var(--wz-sand);
    font-size: 18px;
}
#dayPanel .panel-body,
#interestPanel .panel-body {
    padding: 16px 26px 26px;
    border: 0 !important;
}

/* ---------- step 1: how long / when ---------- */
#dayPanel .panel-body > .row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; margin-bottom: 6px; }
#langKeyHowLong, #langKeyExactDates {
    font-size: 15px;
    font-weight: 700;
    color: var(--wz-ink);
}
#langKeyOr {
    display: inline-block;
    margin: 6px 0;
    font-size: 12px !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wz-muted);
}
#dayPanel input[type="radio"],
#interestPanel input[type="checkbox"] { accent-color: var(--wz-ocean); }

#dayPanel .select2-container--default .select2-selection--single {
    height: 46px;
    border: 1px solid var(--wz-line);
    border-radius: 999px;
    background: #fff;
    transition: border-color .2s;
}
#dayPanel .select2-container--default .select2-selection--single:hover { border-color: var(--wz-ocean); }
#dayPanel .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding-left: 18px;
    font-weight: 700;
    color: var(--wz-ink);
}
#dayPanel .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 10px; }

#dayPanel .left-inner-addon { position: relative; margin: 0; }
#dayPanel .left-inner-addon i {
    position: absolute;
    left: 16px;
    padding: 0; /* the old style padded the icon into the text */
    width: auto;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wz-muted);
    pointer-events: none;
}
#dayPanel .left-inner-addon input.form-control {
    height: 46px;
    padding-left: 42px !important;
    border: 1px solid var(--wz-line);
    border-radius: 999px !important;
    box-shadow: none;
    background: #fff;
    font-weight: 600;
    color: var(--wz-ink);
    cursor: pointer;
    transition: border-color .2s;
}
#dayPanel .left-inner-addon input.form-control:hover,
#dayPanel .left-inner-addon input.form-control:focus { border-color: var(--wz-ocean); }
#lblDays {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: #EEF5F4;
    color: var(--wz-ocean);
}
#lblDays:empty { display: none; }

/* ---------- step 2: interests as tiles ---------- */
#interestPanel .interests {
    /* fixed columns, last row centred, so the block stays symmetric whatever the number of interests */
    --cols: 4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
#interestPanel .interests > .row:empty { display: none; }
#interestPanel .interests > [class*="col-"] {
    position: relative;
    width: auto;
    float: none;
    padding: 0;
    min-height: 0;
    flex: 0 0 calc((100% - (var(--cols) - 1) * 8px) / var(--cols));
}
@media (max-width: 991px) { #interestPanel .interests { --cols: 3; } }
#interestPanel .interests input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
#interestPanel .interests label {
    /* compact: one line, every tile the same size (Christian, 14 Oct) */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 12px 0 8px;
    border: 1px solid var(--wz-line);
    border-radius: 12px;
    background: #fff;
    color: var(--wz-ink);
    font: 600 14px/1.2 "DM Sans", -apple-system, "Segoe UI", sans-serif;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s, box-shadow .25s, translate .2s var(--wz-ease);
}
#interestPanel .interests label:hover {
    border-color: var(--wz-ocean);
    box-shadow: 0 8px 20px rgba(15, 61, 76, .08);
    translate: 0 -1px;
}
#interestPanel .interests .interestName { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#interestPanel .interests .interestIcon {
    flex: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--wz-sand);
    color: var(--wz-terracotta-ink);
    font-size: 15px;
    transition: background .2s, color .2s;
}
#interestPanel .interests label.showAllInterests { border-style: dashed; }
#interestPanel .interests input:checked + label {
    border-color: var(--wz-ocean);
    background: var(--wz-ocean);
    color: var(--wz-sand);
}
#interestPanel .interests input:checked + label .interestIcon { background: var(--wz-sun); color: var(--wz-ocean); }
#interestPanel .interests input:checked + label .interestIcon::before { content: "\f00c"; } /* selected: the icon becomes a tick */
#interestPanel .interests input:checked + label::after {
    display: none;
    content: "✓";
    position: absolute;
    top: 14px;
    right: 10px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wz-sun);
    color: var(--wz-ocean);
    font-size: 13px;
}
#interestPanel .interests input:focus-visible + label { outline: 3px solid var(--wz-sun); outline-offset: 2px; }

#errorOnly3Interests {
    border: 0;
    border-radius: 12px;
    background: #FFF4E0;
    color: #6B4A0E;
}

/* ---------- next button ---------- */
#interestNext.btn {
    padding: 12px 28px;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--wz-terracotta-ink) !important;
    color: #fff !important;
    font: 700 15px "DM Sans", -apple-system, "Segoe UI", sans-serif !important;
    text-shadow: none !important;
    box-shadow: 0 6px 16px rgba(168, 67, 42, .25);
    transition: background .2s, translate .2s var(--wz-ease);
}
#interestNext.btn:hover { background: #8F3822 !important; translate: 0 -1px; }
#interestNext.btn.disabled {
    background: #E9E3D8 !important;
    color: #8A8F93 !important;
    box-shadow: none;
    opacity: 1;
}

/* ---------- small screens ---------- */
@media (max-width: 767px) {
    #dayPanel .panel-heading, #interestPanel .panel-heading { padding: 18px 18px 4px; }
    #dayPanel .panel-body, #interestPanel .panel-body { padding: 12px 18px 20px; }
    #dayPanel .panel-title > div, #interestPanel .panel-title > div { font-size: 20px; }
    #interestPanel .interests { --cols: 2; }
    #interestPanel .interests label { height: 46px; padding: 0 8px 0 6px; gap: 8px; font-size: 13px; }
    #interestPanel .interests .interestIcon { width: 30px; height: 30px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    #dayPanel.panel, #interestPanel.panel { animation: none; }
    #interestPanel .interests label, #interestNext.btn { transition: none; }
    #interestPanel .interests label:hover { translate: none; }
}

/* Calendar (jQuery UI datepicker) in the page style */
#ui-datepicker-div.ui-datepicker {
    width: 296px;
    padding: 12px;
    border: 1px solid #E4DCCD;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 61, 76, .18);
    font: 500 14px/1.2 "DM Sans", "Open Sans", sans-serif;
    color: #1D2A33;
}
#ui-datepicker-div .ui-datepicker-header {
    position: relative;
    padding: 4px 36px 10px;
    border: 0;
    background: transparent;
}
#ui-datepicker-div .ui-datepicker-title { display: flex; gap: 6px; justify-content: center; margin: 0; }
#ui-datepicker-div .ui-datepicker-title select {
    width: auto;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid #E4DCCD;
    border-radius: 999px;
    background: #fff;
    font: 600 13px/1.2 "DM Sans", sans-serif;
    color: #0F3D4C;
    cursor: pointer;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    top: 4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
}
#ui-datepicker-div .ui-datepicker-prev { left: 2px; }
#ui-datepicker-div .ui-datepicker-next { right: 2px; }
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover { background: #F5EEE3; border: 0; }
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-next.ui-state-disabled { opacity: .3; cursor: default; }
#ui-datepicker-div table.ui-datepicker-calendar { width: 100%; margin: 0; border-collapse: separate; border-spacing: 2px; }
#ui-datepicker-div .ui-datepicker-calendar th {
    padding: 6px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5B6770;
}
#ui-datepicker-div .ui-datepicker-calendar td { padding: 0; }
#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
    display: grid;
    place-items: center;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-weight: 600;
    text-align: center;
}
#ui-datepicker-div .ui-datepicker-calendar td a { color: #0F3D4C; }
#ui-datepicker-div .ui-datepicker-calendar td a:hover,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-hover { background: #F5EEE3; color: #A8432A; }
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight { box-shadow: inset 0 0 0 1.5px #F2B33D; }
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active { background: #C4532F; color: #fff; }
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span { color: #C9C1B3; font-weight: 400; }

/* space between a button's text and its arrow ("Next ›") */
.btn .fa-angle-right { margin-left: 6px; }
.btn .fa-angle-left { margin-right: 6px; }
#interestPanel .interests input:checked + label::after { content: none; }
#interestPanel .interests > [class*="col-"] { min-width: 0; } /* let long names shorten instead of widening the tile */
#interestPanel .interests label { min-width: 0; }
@media (max-width: 767px) {
    /* phones: same tile size everywhere, names may use two short lines */
    #interestPanel .interests label { height: 52px; gap: 7px; padding: 0 8px 0 6px; font-size: 12.5px; }
    #interestPanel .interests .interestIcon { width: 28px; height: 28px; font-size: 12px; }
    #interestPanel .interests .interestName { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; }
}
#interestPanel .interests { margin-bottom: 4px; }
/* Required steps: red asterisk; "List with all interests" is the default choice, marked in red (Christian, 18 Oct) */
.wz-required-title::after { content: " * " attr(data-required); color: #C0392B; font: 700 14px/1 "DM Sans", -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em; white-space: nowrap; } /* "* Required" after the last word of the title */
#interestPanel .interests label.showAllInterests { border: 2px dashed #C0392B; color: #A5281B; }
#interestPanel .interests label.showAllInterests .interestIcon { background: #FBE6E2; color: #C0392B; }
#interestPanel .interests input:checked + label.showAllInterests { background: #A5281B; border: 2px solid #A5281B; color: #fff; }
#interestPanel .interests input:checked + label.showAllInterests .interestIcon { background: #fff; color: #A5281B; }