/**
 * Design Cich widgets for Zourney + BA Book Everything.
 *
 * Zourney still supplies the broad BABE visual language. This file only owns
 * the DC card refinements and the Taxonomies / Card Showcase / Search Tabs UI.
 */

/* --------------------------------------------------------------------------
 * Shared booking-card behavior
 * -------------------------------------------------------------------------- */

.dc-booking-card .babe_all_items_item_inner {
    position: relative;
    border-radius: var(--dc-booking-card-border-radius);
    overflow: hidden;
}

/* One semantic main link stretches over the card. Real controls such as the
 * optional CTA sit above it, so future interactive controls remain possible. */
.dc-booking-card .dc-booking-card__stretched-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
}

.dc-booking-card .dc-booking-card__stretched-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -3px;
    border-radius: inherit;
}

.dc-booking-card:not(.dc-booking-card--poster) .dc-booking-card__title-text {
    color: var(--accent);
    transition: color 0.2s ease;
}

.dc-booking-card:not(.dc-booking-card--poster):hover .dc-booking-card__title-text {
    color: var(--primary);
}

.dc-booking-card--poster .dc-booking-card__title-text {
    color: #fff;
}

.dc-booking-card .dc-booking-card__title-link,
.dc-booking-card .dc-booking-card__cta {
    position: relative;
    z-index: 3;
}

.dc-booking-card .dc-booking-card__title-link {
    text-decoration: none;
}

.dc-booking-card .item_info_popular,
.dc-booking-card .item_info_price_discount {
    z-index: 4;
}

/* Keep Zourney's image hover even though the image is no longer its own link. */
.dc-booking-card .item-thumb {
    display: block;
}

/* The outer DC card owns rounding. Zourney's internal 3px image radius would
 * otherwise create a second, conflicting radius inside the card. */
.dc-booking-card .item_img .item-thumb,
.dc-booking-card .item_img .item-thumb img {
    border-radius: 0 !important;
}

.dc-booking-card .item_info_price label.dc-booking-card__price-prefix {
    display: inline-block;
    margin: 0 4px 0 0;
    vertical-align: baseline;
}

/* Poster: photo first, readable information second. */
.dc-booking-card--poster .babe_all_items_item_inner {
    border-radius: var(--dc-booking-card-border-radius);
}

.dc-booking-card--poster .item_img::before {
    background: linear-gradient(
        to top,
        rgba(18, 38, 58, var(--dc-booking-card-poster-overlay)) 0%,
        rgba(18, 38, 58, 0.12) 46%,
        rgba(18, 38, 58, 0) 78%
    );
}

.dc-booking-card--poster .item_text {
    pointer-events: none;
}

.dc-booking-card--poster .dc-booking-card__poster-panel {
    width: fit-content;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(18, 38, 58, 0.55);
    box-shadow: 0 6px 18px rgba(18, 38, 58, 0.22);
}

.dc-booking-card--poster .item_top {
    display: flex;
    justify-content: flex-end;
}

.dc-booking-card--poster .dc-booking-card__poster-panel--price {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    margin-left: auto;
    text-align: right;
}

.dc-booking-card--poster .dc-booking-card__poster-panel--price label {
    color: rgba(255, 255, 255, 0.82);
}

.dc-booking-card--poster .dc-booking-card__poster-panel--location {
    margin-bottom: 8px;
}

.dc-booking-card--poster .dc-booking-card__poster-panel--title {
    display: -webkit-box;
    width: fit-content;
    margin-bottom: 10px;
    padding-block: 5px;
}

.dc-booking-card--poster .dc-booking-card__poster-panel--meta {
    display: inline-flex;
    width: auto;
    margin-bottom: 14px;
    padding-block: 6px;
}

.dc-booking-card--poster .dc-booking-card__title-link,
.dc-booking-card--poster .read-more-item {
    width: fit-content;
    pointer-events: auto;
}

/* Standard stays intentionally close to Zourney's good native layout. */

/* Horizontal: image/content widths stay proportional while the image fills
 * the full card height. Column count is left entirely to Elementor. */
.dc-booking-grid > .dc-booking-card--horizontal {
    margin-bottom: 16px;
}

.dc-booking-card--horizontal .babe_all_items_item_inner {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--dc-booking-card-border-radius);
    background: #fff;
    overflow: hidden;
}

.dc-booking-card--horizontal .item_img {
    position: relative;
    flex: 0 0 var(--dc-booking-card-horizontal-image-width);
    width: var(--dc-booking-card-horizontal-image-width);
    min-width: 0;
    margin: 0;
    overflow: hidden;
}

.dc-booking-card--horizontal .item_img .item-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dc-booking-card--horizontal .item_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dc-booking-card--horizontal .item_text {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 30%);
    align-items: stretch;
    gap: clamp(16px, 2.4vw, 30px);
    min-width: 0;
    padding: clamp(18px, 2.2vw, 28px);
}

.dc-booking-card--horizontal .dc-booking-card__horizontal-main {
    min-width: 0;
}

.dc-booking-card--horizontal .item-location,
.dc-booking-card--horizontal .item_title,
.dc-booking-card--horizontal .item-meta {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dc-booking-card--horizontal .item_head {
    display: block;
    margin-bottom: 0;
}

.dc-booking-card--horizontal .item_head .item-meta {
    margin-bottom: 0;
}

.dc-booking-card--horizontal .dc-booking-card__horizontal-actions {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 0;
    border: 0;
}

.dc-booking-card--horizontal .dc-booking-card__horizontal-actions .item_info_price {
    align-self: flex-end;
    max-width: 100%;
    text-align: right;
}

.dc-booking-card--horizontal .dc-booking-card__horizontal-actions .read-more-item {
    max-width: 100%;
    margin-top: auto;
}

/* Compact is meant for dense lists. */
.dc-booking-card--compact .babe_all_items_item_inner {
    align-items: center;
}

.dc-booking-card--compact .item-thumb {
    overflow: hidden;
}

/* Mobile portrait deliberately becomes the proven stacked/Standard-like form.
 * Landscape phones keep the percentage-based horizontal card. */
@media (max-width: 767px) and (orientation: portrait) {
    .dc-booking-card--horizontal .babe_all_items_item_inner {
        flex-direction: column;
    }

    .dc-booking-card--horizontal .item_img {
        flex-basis: auto;
        width: 100%;
    }

    .dc-booking-card--horizontal .item_img,
    .dc-booking-card--horizontal .item_img .item-thumb,
    .dc-booking-card--horizontal .item_img img {
        width: 100%;
        height: auto;
    }

    .dc-booking-card--horizontal .item_img .item-thumb {
        position: relative;
        inset: auto;
    }

    .dc-booking-card--horizontal .item_text {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 20px;
    }

    .dc-booking-card--horizontal .dc-booking-card__horizontal-actions {
        align-items: flex-start;
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }

    .dc-booking-card--horizontal .dc-booking-card__horizontal-actions .item_info_price {
        align-self: flex-start;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
 * DC Taxonomies - one Photo card foundation
 * -------------------------------------------------------------------------- */

.dc-taxonomies {
    width: 100%;
}

.dc-taxonomies__grid {
    display: grid;
    grid-template-columns: repeat(var(--dc-taxonomies-columns), minmax(0, 1fr));
    gap: var(--dc-taxonomies-card-gap);
}

.dc-taxonomy-card {
    position: relative;
    display: block;
    width: 100%;
    height: var(--dc-taxonomy-card-height);
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--dc-taxonomies-card-border-radius);
    background: #12263a;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    isolation: isolate;
}

.dc-taxonomy-card:hover,
.dc-taxonomy-card:focus,
.dc-taxonomy-card:focus-visible {
    color: #fff;
}

.dc-taxonomy-card:focus-visible {
    outline: 2px solid #f47921;
    outline-offset: 2px;
}

.dc-taxonomies .dc-taxonomy-card > .dc-taxonomy-card__image {
    position: absolute !important;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.dc-taxonomy-card:hover .dc-taxonomy-card__image,
.dc-taxonomy-card:focus-visible .dc-taxonomy-card__image {
    transform: scale(1.06);
}

.dc-taxonomy-card__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(18, 38, 58, 0.55), rgba(18, 38, 58, 0.04) 68%);
    pointer-events: none;
}

.dc-taxonomy-card__content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
    pointer-events: none;
}

.dc-taxonomy-card__title {
    display: inline-block;
    max-width: 100%;
    padding: 3px 7px 4px;
    border-radius: 6px;
    background: rgba(18, 38, 58, 0.55);
    color: #fff;
    font-family: "Cairo", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 6px 18px rgba(18, 38, 58, 0.2);
}

.dc-taxonomy-card__count {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #12263a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.dc-taxonomies--staggered .dc-taxonomies__grid {
    padding-bottom: var(--dc-taxonomies-stagger-offset);
}

.dc-taxonomies--staggered .dc-taxonomies__grid > .dc-taxonomy-card--stagger-column {
    transform: translateY(var(--dc-taxonomies-stagger-offset));
}

.dc-taxonomies__carousel {
    position: relative;
    margin-inline: calc(var(--dc-taxonomies-card-gap) / -2);
}

/* DC split-Z navigation for the Slick-powered Taxonomies carousel.
 * Slick owns movement; DC owns only the arrow presentation. */
.dc-taxonomies__carousel > .dc-taxonomies__arrow {
    position: absolute !important;
    z-index: 20;
    display: grid !important;
    place-items: center;
    width: var(--dc-taxonomies-arrow-size) !important;
    height: auto !important;
    aspect-ratio: 320.3 / 293.2;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    cursor: pointer;
    font-size: 0;
    line-height: 1;
    transform: translateY(-50%) !important;
}

.dc-taxonomies__carousel > .dc-taxonomies__arrow--previous {
    top: calc(50% + var(--dc-taxonomies-previous-arrow-vertical-offset)) !important;
    right: auto !important;
    left: var(--dc-taxonomies-previous-arrow-offset) !important;
    color: var(--dc-taxonomies-previous-arrow-color);
}

.dc-taxonomies__carousel > .dc-taxonomies__arrow--next {
    top: calc(50% + var(--dc-taxonomies-next-arrow-vertical-offset)) !important;
    right: var(--dc-taxonomies-next-arrow-offset) !important;
    left: auto !important;
    color: var(--dc-taxonomies-next-arrow-color);
}

.dc-taxonomies__carousel > .dc-taxonomies__arrow::before,
.dc-taxonomies__carousel > .dc-taxonomies__arrow::after {
    content: none !important;
    display: none !important;
}

.dc-taxonomies__carousel > .dc-taxonomies__arrow .dc-taxonomies__arrow-icon {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: inherit;
    filter: drop-shadow(0 3px 4px rgba(18, 38, 58, 0.16));
    transform: rotate(var(--dc-taxonomies-arrow-rotation, 0deg));
    transform-origin: center;
    transition: color 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.dc-taxonomies__carousel:has(> .dc-taxonomies__arrow:hover) > .dc-taxonomies__arrow--previous,
.dc-taxonomies__carousel:has(> .dc-taxonomies__arrow:focus-visible) > .dc-taxonomies__arrow--previous {
    color: var(--dc-taxonomies-next-arrow-color);
}

.dc-taxonomies__carousel:has(> .dc-taxonomies__arrow:hover) > .dc-taxonomies__arrow--next,
.dc-taxonomies__carousel:has(> .dc-taxonomies__arrow:focus-visible) > .dc-taxonomies__arrow--next {
    color: var(--dc-taxonomies-previous-arrow-color);
}

.dc-taxonomies__carousel > .dc-taxonomies__arrow--previous:hover .dc-taxonomies__arrow-icon,
.dc-taxonomies__carousel > .dc-taxonomies__arrow--previous:focus-visible .dc-taxonomies__arrow-icon {
    transform: translate(-2px, 2px) rotate(var(--dc-taxonomies-arrow-rotation, 0deg)) scale(1.06);
    filter: drop-shadow(0 5px 6px rgba(18, 38, 58, 0.2));
}

.dc-taxonomies__carousel > .dc-taxonomies__arrow--next:hover .dc-taxonomies__arrow-icon,
.dc-taxonomies__carousel > .dc-taxonomies__arrow--next:focus-visible .dc-taxonomies__arrow-icon {
    transform: translate(2px, -2px) rotate(var(--dc-taxonomies-arrow-rotation, 0deg)) scale(1.06);
    filter: drop-shadow(0 5px 6px rgba(18, 38, 58, 0.2));
}

.dc-taxonomies__carousel > .dc-taxonomies__arrow:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 4px;
}

.dc-taxonomies__carousel > .dc-taxonomies__arrow.slick-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.dc-taxonomies__carousel.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.dc-taxonomies__carousel .slick-slide {
    padding-inline: calc(var(--dc-taxonomies-card-gap) / 2);
}

.dc-taxonomies__carousel .slick-list {
    padding-block: 6px;
}

.dc-taxonomies--staggered .dc-taxonomies__carousel .slick-list {
    margin-block: calc(var(--dc-taxonomies-stagger-offset) * -1);
    padding-block: var(--dc-taxonomies-stagger-offset) !important;
}

.dc-taxonomies--staggered .dc-taxonomies__carousel .slick-slide:nth-child(even) .dc-taxonomy-card {
    transform: translateY(calc(var(--dc-taxonomies-stagger-offset) / 2));
}

/* Showcase: the selected taxonomy uses the same photo-first language at scale. */
.dc-taxonomy-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.dc-taxonomy-showcase__featured {
    position: relative;
    margin: 0 0 14px;
    overflow: hidden;
    background: #12263a;
    box-shadow: 0 16px 34px -20px rgba(18, 38, 58, 0.45);
}

.dc-taxonomy-showcase__image {
    position: absolute !important;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    object-fit: cover;
    transition: opacity 0.28s ease;
}

.dc-taxonomy-showcase__overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(18px, 3vw, 32px);
    color: #fff;
    background: linear-gradient(
        to top,
        rgba(18, 38, 58, 0.74) 0%,
        rgba(18, 38, 58, 0.28) 58%,
        rgba(18, 38, 58, 0) 100%
    );
}

.dc-taxonomy-showcase__title {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 8px;
    padding: 4px 9px 6px;
    border-radius: 7px;
    background: rgba(18, 38, 58, 0.55);
    font-family: "Cairo", sans-serif;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.15;
}

.dc-taxonomy-showcase__title a,
.dc-taxonomy-showcase__title a:hover {
    color: #fff;
}

.dc-taxonomy-showcase__description {
    width: fit-content;
    max-width: min(620px, 100%);
    margin: 0 0 12px;
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(18, 38, 58, 0.48);
    font-size: 15px;
    line-height: 1.55;
}

.dc-taxonomy-showcase__cta {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 6px;
    background: rgba(244, 121, 33, 0.92);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.dc-taxonomy-showcase__cta:hover,
.dc-taxonomy-showcase__cta:focus-visible {
    color: #fff;
    transform: translateY(-1px);
}

.dc-taxonomy-showcase__selectors .slick-center .dc-taxonomy-card {
    box-shadow: 0 0 0 2px #f47921, 0 7px 18px rgba(18, 38, 58, 0.2);
}

.dc-taxonomy-showcase__selectors {
    width: 100%;
    margin-top: 6px;
}

.dc-taxonomy-showcase__description[hidden],
.dc-taxonomy-showcase__cta[hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
 * DC Search Tabs
 * BABE owns native search state and interaction; DC owns the skin.
 * -------------------------------------------------------------------------- */

.dc-search-tabs {
    --dc-search-tabs-tab-height: 58px;
    --dc-search-tabs-tab-gap: 4px;
    --dc-search-tabs-tab-radius: 12px;
    --dc-search-tabs-tab-border-width: 1px;
    --dc-search-tabs-tab-icon-size: 16px;
    --dc-search-tabs-tab-icon-gap: 8px;
    --dc-search-tabs-tab-text: #12263a;
    --dc-search-tabs-tab-background: #ffffff;
    --dc-search-tabs-tab-border: #d8e0e8;
    --dc-search-tabs-tab-hover-text: #12263a;
    --dc-search-tabs-tab-hover-background: #f6f8fa;
    --dc-search-tabs-tab-hover-border: #f47921;
    --dc-search-tabs-tab-active-text: #ffffff;
    --dc-search-tabs-tab-active-background: #f47921;
    --dc-search-tabs-tab-active-border: #f47921;
    --dc-search-tabs-box-background: #ffffff;
    --dc-search-tabs-box-border: #e3e8ee;
    --dc-search-tabs-box-border-width: 1px;
    --dc-search-tabs-box-radius: 14px;
    --dc-search-tabs-field-gap: 8px;
    --dc-search-tabs-field-text: #4d5b68;
    --dc-search-tabs-field-background: #ffffff;
    --dc-search-tabs-field-border: #e3e8ee;
    --dc-search-tabs-field-border-width: 1px;
    --dc-search-tabs-field-radius: 9px;
    --dc-search-tabs-field-icon: #6e7c89;
    --dc-search-tabs-field-icon-size: 17px;
    --dc-search-tabs-dropdown-background: #ffffff;
    --dc-search-tabs-dropdown-text: #4d5b68;
    --dc-search-tabs-dropdown-active: #f47921;
    --dc-search-tabs-dropdown-radius: 10px;
    --dc-search-tabs-date-picker-background: #ffffff;
    --dc-search-tabs-date-picker-text: #12263a;
    --dc-search-tabs-date-picker-selected: #f47921;
    --dc-search-tabs-date-picker-radius: 12px;
    --dc-search-tabs-guest-background: #ffffff;
    --dc-search-tabs-guest-text: #12263a;
    --dc-search-tabs-guest-button: #1176bc;
    --dc-search-tabs-guest-radius: 10px;
    --dc-search-tabs-button-text: #ffffff;
    --dc-search-tabs-button-background: #f47921;
    --dc-search-tabs-button-border: #f47921;
    --dc-search-tabs-button-hover-text: #ffffff;
    --dc-search-tabs-button-hover-background: #d96512;
    --dc-search-tabs-button-hover-border: #d96512;
    --dc-search-tabs-button-border-width: 1px;
    --dc-search-tabs-button-radius: 9px;
    --dc-search-tabs-button-icon-size: 16px;
    --dc-search-tabs-button-icon-gap: 8px;
    width: 100%;
}

.dc-search-tabs #search-box {
    width: 100%;
    margin: 0;
}

/* Tabs */
.dc-search-tabs #search-box > #search_form_tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--dc-search-tabs-tab-gap);
    width: 100%;
    margin: 0 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.dc-search-tabs #search-box > #search_form_tabs::-webkit-scrollbar {
    display: none;
}

.dc-search-tabs #search-box > #search_form_tabs .search_form_tab {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: var(--dc-search-tabs-tab-height);
    margin: 0;
    border: var(--dc-search-tabs-tab-border-width) solid var(--dc-search-tabs-tab-border);
    border-radius: var(--dc-search-tabs-tab-radius);
    background: var(--dc-search-tabs-tab-background);
    color: var(--dc-search-tabs-tab-text);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dc-search-tabs #search-box > #search_form_tabs .search_form_tab:hover,
.dc-search-tabs #search-box > #search_form_tabs .search_form_tab:focus-visible {
    border-color: var(--dc-search-tabs-tab-hover-border);
    background: var(--dc-search-tabs-tab-hover-background);
    color: var(--dc-search-tabs-tab-hover-text);
}

.dc-search-tabs #search-box > #search_form_tabs .search_form_tab.is-active {
    border-color: var(--dc-search-tabs-tab-active-border);
    background: var(--dc-search-tabs-tab-active-background);
    color: var(--dc-search-tabs-tab-active-text);
}

.dc-search-tabs #search-box > #search_form_tabs .search_form_tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.dc-search-tabs__tab-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--dc-search-tabs-tab-icon-size);
    height: var(--dc-search-tabs-tab-icon-size);
    margin-inline-end: var(--dc-search-tabs-tab-icon-gap);
    color: currentColor;
    line-height: 1;
}

.dc-search-tabs__tab-icon i,
.dc-search-tabs__tab-icon svg {
    width: 1em;
    height: 1em;
    color: currentColor;
    fill: currentColor;
    font-size: var(--dc-search-tabs-tab-icon-size);
}

/* Search shell: DC renders BABE's native form, so the form itself is the shell. */
.dc-search-tabs #search_form {
    position: relative;
    width: 100%;
    border: var(--dc-search-tabs-box-border-width) solid var(--dc-search-tabs-box-border);
    border-radius: var(--dc-search-tabs-box-radius);
    background: var(--dc-search-tabs-box-background);
    box-sizing: border-box;
    overflow: visible;
}

.dc-search-tabs #search_form .input-group {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: stretch;
    gap: var(--dc-search-tabs-field-gap);
    min-width: 0;
}

.dc-search-tabs #search_form .dc-search-tabs__field {
    position: relative;
    flex: 1 1 0 !important;
    align-items: center;
    min-width: 0;
    min-height: 58px;
    max-width: none !important;
    margin: 0 !important;
    border: var(--dc-search-tabs-field-border-width) solid var(--dc-search-tabs-field-border) !important;
    border-radius: var(--dc-search-tabs-field-radius);
    background: var(--dc-search-tabs-field-background);
    color: var(--dc-search-tabs-field-text);
    box-sizing: border-box;
}

.dc-search-tabs #search_form .dc-search-tabs__field.is-active {
    display: flex !important;
}

/* Per-tab presentation visibility. BABE still owns whether Date / Guests
 * exist for a tab; DC only hides fields disabled for the currently active tab. */
.dc-search-tabs #search_form .dc-search-tabs__field.dc-search-tabs__field--hidden {
    display: none !important;
}

.dc-search-tabs #search_form .dc-search-tabs__field > * {
    min-width: 0;
}

.dc-search-tabs #search_form .dc-search-tabs__field .add_input_field,
.dc-search-tabs #search_form .dc-search-tabs__field .search_date_wrapper,
.dc-search-tabs #search_form .dc-search-tabs__field .search-date,
.dc-search-tabs #search_form .dc-search-tabs__field .input_select_field,
.dc-search-tabs #search_form .dc-search-tabs__field .field-group-inner,
.dc-search-tabs #search_form .dc-search-tabs__field .field-search {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.dc-search-tabs #search_form .dc-search-tabs__field .field-group-inner {
    min-height: 0;
    padding: 0;
}

.dc-search-tabs #search_form .dc-search-tabs__field input,
.dc-search-tabs #search_form .dc-search-tabs__field select,
.dc-search-tabs #search_form .dc-search-tabs__field .add_ids_title,
.dc-search-tabs #search_form .dc-search-tabs__field .input_select_title,
.dc-search-tabs #search_form .dc-search-tabs__field .search_guests_title {
    color: inherit;
}

.dc-search-tabs #search_form .dc-search-tabs__field input,
.dc-search-tabs #search_form .dc-search-tabs__field select {
    width: 100%;
    min-height: 0;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Native BABE per-field icons. Icon classes remain configured in BABE;
 * DC only supplies shared size/color styling. Exclude nested dropdown arrows. */
.dc-search-tabs #search_form .dc-search-tabs__field > i:not(.js-zourney-icon),
.dc-search-tabs #search_form .dc-search-tabs__field > .field-group-inner > i:not(.js-zourney-icon),
.dc-search-tabs #search_form .dc-search-tabs__field > .field-group-inner > .icon-search i {
    flex: 0 0 auto;
    margin-inline-end: 9px;
    color: var(--dc-search-tabs-field-icon);
    font-size: var(--dc-search-tabs-field-icon-size);
    line-height: 1;
}

/* Search button */
.dc-search-tabs #search_form .submit {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
}

.dc-search-tabs #search_form .btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dc-search-tabs-button-icon-gap);
    min-width: 132px;
    min-height: 58px;
    height: 100%;
    border-style: solid !important;
    border-width: var(--dc-search-tabs-button-border-width) !important;
    border-color: var(--dc-search-tabs-button-border) !important;
    border-radius: var(--dc-search-tabs-button-radius);
    background: var(--dc-search-tabs-button-background);
    color: var(--dc-search-tabs-button-text);
    box-shadow: none;
    line-height: 1.2;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dc-search-tabs #search_form .btn-search::before {
    display: none !important;
}

.dc-search-tabs #search_form .btn-search:hover,
.dc-search-tabs #search_form .btn-search:focus-visible {
    border-color: var(--dc-search-tabs-button-hover-border) !important;
    background: var(--dc-search-tabs-button-hover-background);
    color: var(--dc-search-tabs-button-hover-text);
}

.dc-search-tabs #search_form .btn-search:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.dc-search-tabs__button-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--dc-search-tabs-button-icon-size);
    height: var(--dc-search-tabs-button-icon-size);
    color: currentColor;
    line-height: 1;
}

.dc-search-tabs__button-icon i,
.dc-search-tabs__button-icon svg {
    width: 1em;
    height: 1em;
    color: currentColor;
    fill: currentColor;
    font-size: var(--dc-search-tabs-button-icon-size);
}

/* Native taxonomy / plain dropdowns */
.dc-search-tabs .add_input_field .add_ids_list,
.dc-search-tabs .input_select_field .input_select_list {
    z-index: 1200;
    border: 1px solid var(--dc-search-tabs-field-border);
    border-radius: var(--dc-search-tabs-dropdown-radius);
    background: var(--dc-search-tabs-dropdown-background);
    color: var(--dc-search-tabs-dropdown-text);
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
}

.dc-search-tabs .add_input_field .add_ids_list.active {
    display: block !important;
}

.dc-search-tabs .add_input_field .add_ids_list .term_item,
.dc-search-tabs .input_select_field .input_select_list .term_item {
    border: 0;
    background: transparent;
    color: var(--dc-search-tabs-dropdown-text);
}

.dc-search-tabs .add_input_field .add_ids_list .term_item:hover,
.dc-search-tabs .add_input_field .add_ids_list .term_item.term_item_selected,
.dc-search-tabs .input_select_field .input_select_list .term_item:hover,
.dc-search-tabs .input_select_field .input_select_list .term_item.term_item_selected {
    background: var(--dc-search-tabs-dropdown-active);
    color: #ffffff;
}

/* Guest counter popup stays native; only the visual skin changes. */
.dc-search-tabs .search_guests_select_wrapper {
    border: 1px solid var(--dc-search-tabs-field-border);
    border-radius: var(--dc-search-tabs-guest-radius);
    background: var(--dc-search-tabs-guest-background);
    color: var(--dc-search-tabs-guest-text);
    box-shadow: 0 14px 32px rgba(18, 38, 58, 0.14);
}

.dc-search-tabs .search_guests_select_wrapper .btn-search-guests-change {
    border-color: var(--dc-search-tabs-guest-button);
    background: transparent;
    color: var(--dc-search-tabs-guest-button);
}

.dc-search-tabs .search_guests_select_wrapper .btn-search-guests-change:hover,
.dc-search-tabs .search_guests_select_wrapper .btn-search-guests-change:focus-visible {
    border-color: var(--dc-search-tabs-guest-button);
    background: var(--dc-search-tabs-guest-button);
    color: #ffffff;
}

/* BABE's daterangepicker may be mounted outside the widget. JS adds this class
 * and copies the widget's four date-picker variables onto that popup. */
.dc-search-tabs__date-picker.daterangepicker.show-calendar {
    border: 1px solid #e3e8ee;
    border-radius: var(--dc-search-tabs-date-picker-radius);
    background: var(--dc-search-tabs-date-picker-background);
    color: var(--dc-search-tabs-date-picker-text);
    box-shadow: 0 16px 38px rgba(18, 38, 58, 0.16);
}

.dc-search-tabs__date-picker.daterangepicker.show-calendar .calendar-table,
.dc-search-tabs__date-picker.daterangepicker.show-calendar .calendar-table th,
.dc-search-tabs__date-picker.daterangepicker.show-calendar .calendar-table td {
    background: var(--dc-search-tabs-date-picker-background);
    color: var(--dc-search-tabs-date-picker-text);
}

.dc-search-tabs__date-picker.daterangepicker.show-calendar td.active,
.dc-search-tabs__date-picker.daterangepicker.show-calendar td.active:hover,
.dc-search-tabs__date-picker.daterangepicker.show-calendar td.in-range.end-date,
.dc-search-tabs__date-picker.daterangepicker.show-calendar td.start-date {
    background: var(--dc-search-tabs-date-picker-selected) !important;
    color: #ffffff !important;
}

/* Explicit vertical layout. */
.dc-search-tabs--vertical #search_form .search-form-inner,
.dc-search-tabs--vertical #search_form .input-group {
    flex-direction: column;
}

.dc-search-tabs--vertical #search_form .submit,
.dc-search-tabs--vertical #search_form .btn-search {
    width: 100%;
}

/* Mobile follows the compact search-card idea: two fields per row where space
 * allows, then the CTA spans the full width. */
@media (max-width: 767px) {
    .dc-search-tabs #search_form .input-group {
        flex-wrap: wrap;
    }

    .dc-search-tabs #search_form .dc-search-tabs__field {
        flex: 1 1 calc(50% - var(--dc-search-tabs-field-gap)) !important;
    }

    .dc-search-tabs #search_form .submit,
    .dc-search-tabs #search_form .btn-search {
        width: 100%;
    }
}

@media (max-width: 479px) {
    .dc-search-tabs #search_form .dc-search-tabs__field {
        flex-basis: 100% !important;
    }
}

/* --------------------------------------------------------------------------
 * Reduced motion
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .dc-card-showcase__viewport .swiper-slide .babe_all_items_item_inner,
    .dc-taxonomy-card__image,
    .dc-taxonomy-showcase__image {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
 * DC Card Showcase
 * Swiper owns carousel/effect geometry; DC owns card presentation and controls.
 * -------------------------------------------------------------------------- */

.dc-card-showcase {
    --dc-card-showcase-card-width: 32%;
    --dc-card-showcase-card-gap: 10px;
    --dc-card-showcase-side-scale: 0.92;
    --dc-card-showcase-side-tilt: 14deg;
    --dc-card-showcase-side-offset: 0%;
    --dc-card-showcase-depth: 120;
    --dc-card-showcase-near-side-opacity: 0.82;
    --dc-card-showcase-outer-card-opacity: 0.5;
    --dc-card-showcase-outer-card-scale: 0.82;
    --dc-card-showcase-card-tilt-step: 15deg;
    --dc-card-showcase-spread: 50%;
    --dc-card-showcase-depth-step: 60;
    --dc-card-showcase-visible-cards: 5;
    --dc-card-showcase-navigation-enabled: yes;
    --dc-card-showcase-deck-enabled: no;
    --dc-card-showcase-perspective: 1400px;
    --dc-card-showcase-arrow-size: 34px;
    --dc-card-showcase-previous-arrow-offset: -16px;
    --dc-card-showcase-next-arrow-offset: -16px;
    --dc-card-showcase-previous-arrow-vertical-offset: 4%;
    --dc-card-showcase-next-arrow-vertical-offset: -4%;
    --dc-card-showcase-arrow-rotation: 0deg;
    --dc-card-showcase-previous-arrow-color: #1176bc;
    --dc-card-showcase-next-arrow-color: #f47921;
    --dc-card-showcase-reflection-gap: 4px;
    --dc-card-showcase-reflection-strength: 32%;
    --dc-card-showcase-reflection-length: 135px;
    --dc-card-showcase-contact-shadow-strength: 55%;
    --dc-card-showcase-reflection-shadow-space: 16px;
    --dc-card-showcase-reflection-bottom-space: 0px;
    --dc-card-showcase-contact-shadow: 0 0 0 0 rgb(0 0 0 / 0%);
    --dc-card-showcase-card-border-radius: 22px;
    --dc-card-showcase-card-stock-color: #eee7da;
    --dc-card-showcase-deck-right-thickness: 7px;
    --dc-card-showcase-deck-bottom-thickness: 3px;
    --dc-card-showcase-deck-shadow-strength: 30%;
    --dc-card-showcase-visible-card-right-edge: 2px;
    --dc-card-showcase-visible-card-bottom-edge: 1px;
    --dc-card-showcase-visible-card-shadow-strength: 45%;
    --dc-card-showcase-deck-bottom-space: 0px;
    position: relative;
    width: 100%;
    overflow: visible;
}

.dc-card-showcase__viewport {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0;
    overflow: hidden;
    padding-top: 36px;
    padding-bottom: max(
        var(--dc-card-showcase-reflection-bottom-space),
        var(--dc-card-showcase-deck-bottom-space)
    ) !important;
    perspective: var(--dc-card-showcase-perspective);
}

.dc-card-showcase__viewport > .swiper-wrapper,
.dc-card-showcase__viewport > .swiper-wrapper > .swiper-slide {
    transform-style: preserve-3d;
}

/* BABE's all-items wrapper is reused as Swiper's track. Neutralize Zourney's
 * booking-grid wrapping/margins without changing BABE's query or card markup. */
.dc-card-showcase__viewport > .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    width: 100%;
    height: auto !important;
    margin: 0 !important;
}

.dc-card-showcase__viewport > .swiper-wrapper > .swiper-slide {
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
    max-width: none !important;
}

.dc-card-showcase__viewport .swiper-slide {
    position: relative;
    flex-shrink: 0;
    width: var(--dc-card-showcase-card-width);
    height: auto !important;
    padding-inline: 0;
    box-sizing: border-box;
    transform-style: preserve-3d;
}

.dc-card-showcase__viewport .babe_shortcode_block_inner {
    margin-left: 0;
    margin-right: 0;
}

.dc-card-showcase__viewport .babe_all_items_item_inner {
    width: 100%;
    overflow: hidden;
    transition: opacity .35s ease, filter .35s ease, transform .4s ease, box-shadow .35s ease;
}

/* Reflection uses an ordinary cloned booking card inside each Swiper slide.
 * The mirror is flipped only in 2D, while the parent slide continues to own all
 * native Swiper 3D movement. This avoids the severe mobile/browser rendering
 * penalty observed with -webkit-box-reflect on 3D-transformed slides. */
.dc-card-showcase--reflection {
    --dc-card-showcase-reflection-bottom-space: calc(var(--dc-card-showcase-reflection-length) + var(--dc-card-showcase-reflection-gap) + var(--dc-card-showcase-reflection-shadow-space));
    --dc-card-showcase-contact-shadow: 0 18px 28px -16px rgb(0 0 0 / var(--dc-card-showcase-contact-shadow-strength));
}

/* Reflection markup can stay dormant in the DOM when a responsive breakpoint
 * disables the feature; display:none keeps the mirror out of rendering work. */
.dc-card-showcase__reflection-window {
    display: none;
}

.dc-card-showcase--reflection .dc-card-showcase__viewport .swiper-slide {
    overflow: visible !important;
}

.dc-card-showcase--reflection .dc-card-showcase__reflection-window {
    display: block;
    position: absolute;
    top: calc(100% + var(--dc-card-showcase-reflection-gap));
    left: 0;
    width: 100%;
    height: var(--dc-card-showcase-reflection-length);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgb(0 0 0 / var(--dc-card-showcase-reflection-strength)) 0%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgb(0 0 0 / var(--dc-card-showcase-reflection-strength)) 0%,
        transparent 100%
    );
}

.dc-card-showcase--reflection .dc-card-showcase__reflection-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: none !important;
    transform: scaleY(-1) !important;
    transform-origin: center;
    transition: none !important;
    pointer-events: none !important;
}

.dc-card-showcase--reflection .dc-card-showcase__reflection-card,
.dc-card-showcase--reflection .dc-card-showcase__reflection-card * {
    animation: none !important;
    pointer-events: none !important;
    transition: none !important;
}

.dc-card-showcase--reflection .dc-card-showcase__viewport .babe_all_items_item_inner:not(.dc-card-showcase__reflection-card) {
    box-shadow: var(--dc-card-showcase-contact-shadow);
}

/* Coverflow cards use CSS only for visual emphasis/opacity. Swiper owns their
 * position, rotation, scale and depth through its native Coverflow Effect. */
.dc-card-showcase--coverflow .swiper-slide .babe_all_items_item_inner {
    opacity: var(--dc-card-showcase-outer-card-opacity);
    filter: brightness(0.76) saturate(0.82);
    transform: scale(1);
}

.dc-card-showcase--coverflow .swiper-slide-prev .babe_all_items_item_inner,
.dc-card-showcase--coverflow .swiper-slide-next .babe_all_items_item_inner {
    opacity: var(--dc-card-showcase-near-side-opacity);
    filter: brightness(0.9) saturate(0.94);
}

.dc-card-showcase--coverflow .swiper-slide-active .babe_all_items_item_inner {
    opacity: 1;
    filter: none;
    box-shadow: 0 20px 38px -14px rgba(18, 38, 58, 0.42), var(--dc-card-showcase-contact-shadow);
}

/* Creative Effect clamps deeper loop slides onto the last meaningful rear
 * transform. JS marks those redundant slides so Chromium does not paint them. */
.dc-card-showcase--card-spread .swiper-slide.dc-card-showcase__slide--paint-hidden {
    visibility: hidden !important;
}

/* Card Spread hands scale, tilt, spread, depth and opacity progression to
 * Swiper Creative Effect. The outgoing previous card remains fully opaque. */
.dc-card-showcase--card-spread .swiper-slide .babe_all_items_item_inner,
.dc-card-showcase--card-spread .swiper-slide-prev .babe_all_items_item_inner,
.dc-card-showcase--card-spread .swiper-slide-next .babe_all_items_item_inner,
.dc-card-showcase--card-spread .swiper-slide-active .babe_all_items_item_inner {
    opacity: 1;
    filter: none;
    transform-origin: center;
}

.dc-card-showcase--card-spread:not(.dc-card-showcase--deck-of-cards) .swiper-slide-active .babe_all_items_item_inner {
    box-shadow: 0 24px 44px -16px rgba(18, 38, 58, 0.45), var(--dc-card-showcase-contact-shadow);
}

.dc-card-showcase--card-spread:not(.dc-card-showcase--deck-of-cards) .swiper-slide:not(.swiper-slide-active) .babe_all_items_item_inner {
    box-shadow: 0 14px 30px -18px rgba(18, 38, 58, 0.5), var(--dc-card-showcase-contact-shadow);
}

/* Creative Effect moves Card Spread slides behind the wrapper plane in 3D.
 * The visible slides must receive link clicks rather than the wrapper itself. */
.dc-card-showcase--card-spread .dc-card-showcase__viewport > .swiper-wrapper {
    pointer-events: none;
}

.dc-card-showcase--card-spread .dc-card-showcase__viewport > .swiper-wrapper > .swiper-slide {
    pointer-events: auto;
}

/* Card Spread keeps the wider clipping allowance proven during Deck testing.
 * It lets the fully opaque outgoing card remain visible a little longer. */
.dc-card-showcase--card-spread .dc-card-showcase__viewport {
    overflow: visible !important;
    clip-path: inset(-40px -50px -120px -45px);
}

/* --------------------------------------------------------------------------
 * Deck of Cards — optional Card Spread mode
 * --------------------------------------------------------------------------
 * One stationary backing element represents the physical pile. Its solid
 * box-shadow layers are rebuilt only when geometry/stock settings change. */
.dc-card-showcase__physical-deck {
    display: none;
}

.dc-card-showcase--deck-of-cards .dc-card-showcase__physical-deck {
    display: block;
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    pointer-events: none;
}

.dc-card-showcase--deck-of-cards .dc-card-showcase__viewport > .swiper-wrapper {
    position: relative;
    z-index: 2;
}

.dc-card-showcase--deck-of-cards .swiper-slide {
    position: relative;
    overflow: visible !important;
}

/* Deck mode replaces Card Spread's normal card shadows with its lightweight
 * progress-role shadow. Reflection contact shadow remains independent. */
.dc-card-showcase--deck-of-cards .swiper-slide .babe_all_items_item_inner:not(.dc-card-showcase__reflection-card) {
    box-shadow: var(--dc-card-showcase-contact-shadow) !important;
}

/* Real-device testing showed that creating this pseudo-element on every looped
 * 3D slide is noticeably heavier on Android. JS therefore adds the role only
 * to progress +1 through -steps. */
.dc-card-showcase--deck-of-cards .swiper-slide::after {
    content: none !important;
}

.dc-card-showcase--deck-of-cards .swiper-slide.dc-card-showcase__slide--edge::after {
    content: "" !important;
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--dc-card-showcase-card-border-radius);
    background: var(--dc-card-showcase-card-stock-color);
    transform: translate(
        var(--dc-card-showcase-visible-card-right-edge),
        var(--dc-card-showcase-visible-card-bottom-edge)
    );
    pointer-events: none;
}

/* Shadow role: +1 through just above -steps. The card resting exactly at
 * -steps naturally has no individual shadow; the stationary deck owns the
 * physical pile shadow. */
.dc-card-showcase--deck-of-cards .swiper-slide.dc-card-showcase__slide--shadow .babe_all_items_item_inner:not(.dc-card-showcase__reflection-card) {
    box-shadow:
        0 20px 38px -15px rgb(18 38 58 / var(--dc-card-showcase-visible-card-shadow-strength)),
        var(--dc-card-showcase-contact-shadow)
        !important;
}

/* Chrome can hit-test card contents ahead of a same-plane stretched link on
 * rear 3D slides. Moving only the overlay 1px forward makes its hit plane
 * unambiguous without changing the visible card geometry. */
.dc-card-showcase--deck-of-cards .dc-booking-card__stretched-link {
    transform: translateZ(1px);
}

/* Swiper's previous/outgoing card must stay above the pile during handoff. */
.dc-card-showcase--deck-of-cards .swiper-slide-prev {
    z-index: 30 !important;
}

/* Exact Design Cich split-Z arrow geometry. Elementor controls color,
 * position, size, per-arrow offsets and shared rotation. */
.dc-card-showcase > .dc-card-showcase__arrow {
    position: absolute;
    z-index: 20;
    display: grid;
    place-items: center;
    width: var(--dc-card-showcase-arrow-size);
    height: auto;
    aspect-ratio: 320.3 / 293.2;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    transform: translateY(-50%);
}

.dc-card-showcase > .dc-card-showcase__arrow--previous {
    top: calc(50% + var(--dc-card-showcase-previous-arrow-vertical-offset));
    left: var(--dc-card-showcase-previous-arrow-offset);
    color: var(--dc-card-showcase-previous-arrow-color);
}

.dc-card-showcase > .dc-card-showcase__arrow--next {
    top: calc(50% + var(--dc-card-showcase-next-arrow-vertical-offset));
    right: var(--dc-card-showcase-next-arrow-offset);
    color: var(--dc-card-showcase-next-arrow-color);
}

.dc-card-showcase > .dc-card-showcase__arrow .dc-card-showcase__arrow-icon {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: inherit;
    filter: drop-shadow(0 3px 4px rgba(18, 38, 58, 0.16));
    transform: rotate(var(--dc-card-showcase-arrow-rotation));
    transform-origin: center;
    transition: color 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

/* Hovering or keyboard-focusing either arrow swaps both configured colors. */
.dc-card-showcase:has(> .dc-card-showcase__arrow:hover) > .dc-card-showcase__arrow--previous,
.dc-card-showcase:has(> .dc-card-showcase__arrow:focus-visible) > .dc-card-showcase__arrow--previous {
    color: var(--dc-card-showcase-next-arrow-color);
}

.dc-card-showcase:has(> .dc-card-showcase__arrow:hover) > .dc-card-showcase__arrow--next,
.dc-card-showcase:has(> .dc-card-showcase__arrow:focus-visible) > .dc-card-showcase__arrow--next {
    color: var(--dc-card-showcase-previous-arrow-color);
}

.dc-card-showcase > .dc-card-showcase__arrow--previous:hover .dc-card-showcase__arrow-icon,
.dc-card-showcase > .dc-card-showcase__arrow--previous:focus-visible .dc-card-showcase__arrow-icon {
    transform: translate(-2px, 2px) rotate(var(--dc-card-showcase-arrow-rotation)) scale(1.06);
    filter: drop-shadow(0 5px 6px rgba(18, 38, 58, 0.2));
}

.dc-card-showcase > .dc-card-showcase__arrow--next:hover .dc-card-showcase__arrow-icon,
.dc-card-showcase > .dc-card-showcase__arrow--next:focus-visible .dc-card-showcase__arrow-icon {
    transform: translate(2px, -2px) rotate(var(--dc-card-showcase-arrow-rotation)) scale(1.06);
    filter: drop-shadow(0 5px 6px rgba(18, 38, 58, 0.2));
}

.dc-card-showcase > .dc-card-showcase__arrow:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 6px;
}

.dc-card-showcase__pagination {
    position: absolute;
    right: 0;
    bottom: 12px;
    left: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.dc-card-showcase__pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    border-radius: 50%;
    background: #12263a;
    opacity: .24;
}

.dc-card-showcase__pagination .swiper-pagination-bullet-active {
    background: #1176bc;
    opacity: 1;
}

.dc-card-showcase:not(.dc-card-showcase--show-arrows) > .dc-card-showcase__arrow,
.dc-card-showcase:not(.dc-card-showcase--show-dots) .dc-card-showcase__pagination {
    display: none;
}

@media (max-width: 1024px) {
    .dc-card-showcase__viewport {
        padding-top: 30px;
        padding-bottom: max(
            var(--dc-card-showcase-reflection-bottom-space),
            var(--dc-card-showcase-deck-bottom-space)
        ) !important;
    }

}

@media (max-width: 767px) {
    .dc-card-showcase__viewport {
        padding-top: 24px;
        padding-bottom: max(
            var(--dc-card-showcase-reflection-bottom-space),
            var(--dc-card-showcase-deck-bottom-space)
        ) !important;
    }

}