/* Site toast — white "island" pill with the brand red, top center, for /Common/js/kc-toast.js */

/* ---------- per type colors (icon + ring) ---------- */
.kc-island,
.kc-island[data-type="success"] { --kc-accent: #33A853; --kc-glow: rgba(51, 168, 83, .45); }
.kc-island[data-type="error"]   { --kc-accent: #C91D13; --kc-glow: rgba(201, 29, 19, .45); }
.kc-island[data-type="warning"] { --kc-accent: #E8A317; --kc-glow: rgba(232, 163, 23, .45); }
.kc-island[data-type="info"]    { --kc-accent: #2E6BE6; --kc-glow: rgba(46, 107, 230, .45); }

/* ---------- the island ---------- */
.kc-island {
    --kc-brand: #C91D13;
    --kc-ease-spring: cubic-bezier(.2, 1.3, .35, 1);
    --kc-drag: 0px;
    position: fixed;
    z-index: 10000;
    top: 16px;
    left: 50%;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    overflow: hidden;
    box-sizing: content-box;
    color: #1D2939;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    touch-action: none;
    /* white fill + red gradient border */
    border: 1.5px solid transparent;
    background:
        radial-gradient(120% 180% at 0% 50%, rgba(201, 29, 19, .07) 0%, rgba(201, 29, 19, 0) 55%) padding-box,
        linear-gradient(#FFFFFF, #FFFFFF) padding-box,
        linear-gradient(120deg, #E5352B 0%, #C91D13 35%, rgba(201, 29, 19, .25) 70%, #F27A72 100%) border-box;
    box-shadow:
        0 20px 46px -16px rgba(201, 29, 19, .45),
        0 10px 26px -14px rgba(16, 24, 40, .22);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -150%) scale(.5);
    transition:
        width .6s var(--kc-ease-spring),
        height .6s var(--kc-ease-spring),
        border-radius .6s var(--kc-ease-spring),
        transform .5s cubic-bezier(.2, 1.15, .4, 1),
        opacity .3s ease,
        box-shadow .4s ease !important;
}

.kc-island[dir="rtl"] {
    background:
        radial-gradient(120% 180% at 100% 50%, rgba(201, 29, 19, .07) 0%, rgba(201, 29, 19, 0) 55%) padding-box,
        linear-gradient(#FFFFFF, #FFFFFF) padding-box,
        linear-gradient(240deg, #E5352B 0%, #C91D13 35%, rgba(201, 29, 19, .25) 70%, #F27A72 100%) border-box;
}

.kc-island:hover {
    box-shadow:
        0 24px 52px -16px rgba(201, 29, 19, .55),
        0 12px 28px -14px rgba(16, 24, 40, .26);
}

.kc-island[data-state="open"] {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, var(--kc-drag)) scale(1);
}

.kc-island[data-dragging="true"] {
    transition: width .6s var(--kc-ease-spring), height .6s var(--kc-ease-spring) !important;
}

.kc-island[data-bump="true"] {
    animation: kc-island-bump .45s var(--kc-ease-spring);
}

/* style.css puts a 0.3s transition on everything — the island sets its own */
.kc-island *,
.kc-island-measure * {
    transition: none !important;
}

.kc-island__stage {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ---------- content ---------- */
.kc-island__content {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    max-width: min(500px, calc(100vw - 24px));
    min-height: 60px;
    padding-block: 8px;
    padding-inline: 8px 26px;
    opacity: 0;
    filter: blur(8px);
    transform: scale(.9);
    transform-origin: center;
}

.kc-island .kc-island__content {
    transition: opacity .35s ease .18s, filter .35s ease .18s, transform .5s var(--kc-ease-spring) .18s !important;
}

.kc-island .kc-island__content[data-in="true"] {
    opacity: 1;
    filter: none;
    transform: none;
}

.kc-island .kc-island__content[data-out="true"] {
    opacity: 0;
    filter: blur(8px);
    transform: scale(.92);
    transition-delay: 0s !important;
    transition-duration: .15s !important;
}

/* hidden copy used to measure the open size */
.kc-island-measure {
    position: fixed;
    top: -9999px;
    left: 0;
    visibility: hidden;
    pointer-events: none;
    font-family: inherit;
}

.kc-island-measure .kc-island__content {
    position: static;
    width: max-content;
}

/* ---------- icon: badge + countdown ring ---------- */
.kc-island__icon {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
}

.kc-island__badge {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--kc-accent);
    box-shadow: 0 6px 16px -4px var(--kc-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.kc-island__content[data-in="true"] .kc-island__badge {
    animation: kc-island-pop .55s var(--kc-ease-spring) .12s both;
}

.kc-island__badge svg {
    width: 18px;
    height: 18px;
    stroke: #FFFFFF;
}

.kc-island__badge path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.kc-island__content[data-in="true"] .kc-island__badge path {
    animation: kc-island-draw .45s ease .35s forwards;
}

.kc-island__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.kc-island__ring circle {
    fill: none;
    stroke: var(--kc-accent);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    opacity: .45;
    animation: kc-island-ring var(--kc-duration, 4000ms) linear forwards;
}

.kc-island[data-paused="true"] .kc-island__ring circle {
    animation-play-state: paused;
}

/* ---------- text ---------- */
.kc-island__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kc-island__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    color: #1D2939;
}

.kc-island__message {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    color: #5B6474;
    overflow-wrap: anywhere;
}

/* message alone reads as the headline */
.kc-island__message:only-child {
    color: #1D2939;
    font-size: 16px;
    font-weight: 600;
}

/* ---------- keyframes ---------- */
@keyframes kc-island-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

@keyframes kc-island-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes kc-island-ring {
    to { stroke-dashoffset: 100; }
}

@keyframes kc-island-bump {
    40% { transform: translate(-50%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .kc-island {
        transition: opacity .2s ease !important;
    }

    .kc-island .kc-island__content {
        filter: none;
        transform: none;
        transition: opacity .2s ease !important;
    }
}

@media (max-width: 576px) {
    .kc-island {
        top: 12px;
    }
}