/*
 * KYC native homepage sliders v4.
 * Final link styling, arrow placement and production polish for active PHP sliders #29 and #30.
 */

/* Production homepage must not show comparison or debug labels. */
.kyc-slider-compare__label,
.kyc-native-debug-label,
[data-kyc-native-debug-label] {
    display: none !important;
}

/* The invisible normalization jump after a cloned slide must never animate. */
.kyc-native-slider.is-resetting .kyc-native-slider__track {
    transition: none !important;
}

/* Slider #29 uses separate image, badge and title links. */
.kyc-native-card {
    cursor: default;
}

.kyc-native-card__image-link {
    width: 100%;
    display: block;
    color: inherit;
    text-decoration: none !important;
}

.kyc-native-card__image-link:hover,
.kyc-native-card__image-link:focus-visible {
    color: inherit;
    text-decoration: none !important;
    outline: none;
}

.kyc-native-card__badge {
    color: #fff !important;
    text-decoration: none !important;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.kyc-native-card__badge:hover,
.kyc-native-card__badge:focus-visible {
    color: #fff !important;
    text-decoration: none !important;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 54, 107, .12);
    outline: none;
}

.kyc-native-card__title-link {
    display: block;
    color: #181818 !important;
    text-decoration: none !important;
    transition: color .18s ease, text-shadow .18s ease;
}

.kyc-native-card__title-link:hover,
.kyc-native-card__title-link:focus-visible {
    text-decoration: none !important;
    outline: none;
}

.kyc-native-card--blue .kyc-native-card__title-link:hover,
.kyc-native-card--blue .kyc-native-card__title-link:focus-visible {
    color: #0066a0 !important;
    text-shadow: 0 0 16px rgba(0, 102, 160, .14);
}

.kyc-native-card--purple .kyc-native-card__title-link:hover,
.kyc-native-card--purple .kyc-native-card__title-link:focus-visible {
    color: #6c159c !important;
    text-shadow: 0 0 16px rgba(108, 21, 156, .14);
}

.kyc-native-card--green .kyc-native-card__title-link:hover,
.kyc-native-card--green .kyc-native-card__title-link:focus-visible {
    color: #197c31 !important;
    text-shadow: 0 0 16px rgba(25, 124, 49, .14);
}

.kyc-native-card--red .kyc-native-card__title-link:hover,
.kyc-native-card--red .kyc-native-card__title-link:focus-visible {
    color: #aa2318 !important;
    text-shadow: 0 0 16px rgba(170, 35, 24, .14);
}

/* Pull useful materials closer to the colored rule and remove the large empty gap. */
.kyc-slider-compare--native .kyc-native-slider--cards .kyc-native-card__rule {
    margin-top: 10px;
    margin-bottom: 9px;
}

.kyc-slider-compare--native .kyc-native-slider--cards .kyc-native-card__meta {
    min-height: 62px;
    margin-top: 0;
    align-items: center;
}

.kyc-slider-compare--native .kyc-native-slider--cards .kyc-native-card__body {
    padding-bottom: 14px;
}

/* Raise the dot controls slightly so the composition is tighter. */
.kyc-slider-compare--native .kyc-native-slider--cards .kyc-native-slider__dots {
    bottom: 24px;
}

.kyc-slider-compare--native .kyc-native-slider--library .kyc-native-slider__dots {
    bottom: 13px;
}

/*
 * Desktop arrows are centered in the free blue side gutters.
 * This prevents the right arrow from colliding with the fixed lawyer tab.
 */
@media (min-width: 901px) {
    .kyc-slider-compare--native .kyc-native-slider--cards .kyc-native-slider__arrow--prev,
    .kyc-native-slider--library .kyc-native-slider__arrow--prev {
        left: clamp(34px, calc((100vw - 1120px) / 4), 360px) !important;
    }

    .kyc-slider-compare--native .kyc-native-slider--cards .kyc-native-slider__arrow--next,
    .kyc-native-slider--library .kyc-native-slider__arrow--next {
        right: clamp(34px, calc((100vw - 1120px) / 4), 360px) !important;
    }
}

/* Tablet controls stay inside the blue area. */
@media (max-width: 900px) {
    .kyc-slider-compare--native .kyc-native-slider--cards .kyc-native-slider__arrow--prev,
    .kyc-native-slider--library .kyc-native-slider__arrow--prev {
        left: 12px !important;
    }

    .kyc-slider-compare--native .kyc-native-slider--cards .kyc-native-slider__arrow--next,
    .kyc-native-slider--library .kyc-native-slider__arrow--next {
        right: 12px !important;
    }
}

/* Mobile keeps compact controls and safe side spacing. */
@media (max-width: 700px) {
    .kyc-slider-compare--native .kyc-native-slider--cards .kyc-native-slider__arrow,
    .kyc-native-slider--library .kyc-native-slider__arrow {
        width: 40px;
        height: 44px;
    }

    .kyc-slider-compare--native .kyc-native-slider--cards .kyc-native-slider__arrow--prev,
    .kyc-native-slider--library .kyc-native-slider__arrow--prev {
        left: 7px !important;
    }

    .kyc-slider-compare--native .kyc-native-slider--cards .kyc-native-slider__arrow--next,
    .kyc-native-slider--library .kyc-native-slider__arrow--next {
        right: 7px !important;
    }

    .kyc-slider-compare--native .kyc-native-slider--cards .kyc-native-card__rule {
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .kyc-slider-compare--native .kyc-native-slider--cards .kyc-native-card__meta {
        min-height: 58px;
    }
}
