/* Bitcoin halving countdown (CMWORD-11). Hand-written like the other calculator styles;
   enqueued only on pages that use [coinmama_halving_countdown]. Dark card, four flip-style
   tiles, an epoch progress rail, a CTA and a footnote. Ported from Robi's design snapshot. */

.cm-halving {
    --cm-h-bg-1: #131a3a;
    --cm-h-bg-2: #070912;
    --cm-h-accent: #f5b32a;
    --cm-h-accent-rgb: 245, 179, 42;
    --cm-h-accent-soft: #ffd76a;
    --cm-h-accent-soft-rgb: 255, 215, 106;
    --cm-h-cool: #6f8fe8;
    --cm-h-cool-rgb: 111, 143, 232;
    --cm-h-text: #ffffff;
    --cm-h-muted: #8e97b8;
    --cm-h-border: rgba(255, 255, 255, 0.1);
    --cm-h-progress: 0%;
    position: relative;
    overflow: hidden;
    margin: 0 0 2.5rem;
    padding: 30px 32px 26px;
    border: 1px solid var(--cm-h-border);
    border-radius: 22px;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(var(--cm-h-cool-rgb), 0.22) 0%, rgba(var(--cm-h-cool-rgb), 0) 58%),
        radial-gradient(70% 90% at 0% 100%, rgba(var(--cm-h-accent-rgb), 0.16) 0%, rgba(var(--cm-h-accent-rgb), 0) 60%),
        linear-gradient(158deg, var(--cm-h-bg-1) 0%, var(--cm-h-bg-2) 100%);
    color: var(--cm-h-text);
    font-family: inherit;
    line-height: 1.5;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

/* Faint grid that fades out towards the bottom. */
.cm-halving::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.027) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.027) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(#000 0%, transparent 78%);
    mask-image: linear-gradient(#000 0%, transparent 78%);
    pointer-events: none;
}

.cm-halving > * {
    position: relative;
    z-index: 1;
}

.cm-halving .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}

.cm-halving__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.cm-halving__kicker {
    display: block;
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cm-h-cool);
}

.cm-halving__title {
    margin: 0;
    font-size: clamp(1.15rem, 2.6vw, 1.75rem);
    font-weight: 400;
    line-height: 1.3;
    color: #d8ddf0;
}

.cm-halving__reward {
    font-weight: 800;
    color: var(--cm-h-text);
    font-variant-numeric: tabular-nums;
}

.cm-halving__reward--next {
    color: var(--cm-h-accent-soft);
}

.cm-halving__arrow {
    margin: 0 0.15em;
    color: var(--cm-h-muted);
}

.cm-halving__live {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border: 1px solid var(--cm-h-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c3cbe4;
}

.cm-halving__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #21d07a;
    box-shadow: 0 0 0 0 rgba(33, 208, 122, 0.75);
    animation: cm-halving-pulse 2s ease infinite;
}

.cm-halving.is-past .cm-halving__dot {
    background: var(--cm-h-accent-soft);
    animation: none;
}

@keyframes cm-halving-pulse {
    70% { box-shadow: 0 0 0 9px rgba(33, 208, 122, 0); }
    100% { box-shadow: 0 0 0 0 rgba(33, 208, 122, 0); }
}

.cm-halving__clock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(8px, 1.4vw, 16px);
}

.cm-halving__unit {
    min-width: 0;
    text-align: center;
}

.cm-halving__flap {
    position: relative;
    display: block;
    padding: clamp(14px, 2.4vw, 26px) 4px;
    border: 1px solid var(--cm-h-border);
    border-radius: 12px;
    background: linear-gradient(#232c52 0%, #151a33 49.6%, #10142a 50.4%, #0a0d1c 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 24px rgba(0, 0, 0, 0.36);
}

/* The horizontal split line of a flip clock. */
.cm-halving__flap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: linear-gradient(rgba(0, 0, 0, 0.55) 0%, rgba(255, 255, 255, 0.06) 100%);
    transform: translateY(-1px);
    pointer-events: none;
}

.cm-halving__value {
    display: block;
    font-size: clamp(1.8rem, 6.4vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--cm-h-text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.cm-halving__label {
    display: block;
    margin-top: 9px;
    font-size: clamp(0.56rem, 1.4vw, 0.7rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cm-h-muted);
}

.cm-halving__rail-wrap {
    position: relative;
    margin: 26px 0 12px;
}

/* Segmented bar: filled up to --cm-h-progress, dim afterwards. */
.cm-halving__rail {
    height: 26px;
    background: linear-gradient(90deg,
        var(--cm-h-accent) 0%,
        var(--cm-h-accent-soft) var(--cm-h-progress),
        rgba(255, 255, 255, 0.085) var(--cm-h-progress),
        rgba(255, 255, 255, 0.085) 100%);
    -webkit-mask-image: repeating-linear-gradient(90deg, #000 0, #000 calc(2.08333% - 4px), transparent calc(2.08333% - 4px), transparent 2.08333%);
    mask-image: repeating-linear-gradient(90deg, #000 0, #000 calc(2.08333% - 4px), transparent calc(2.08333% - 4px), transparent 2.08333%);
    transition: background 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.cm-halving__rail-edge {
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: var(--cm-h-progress);
    width: 3px;
    background: var(--cm-h-accent-soft);
    box-shadow: 0 0 16px 4px rgba(var(--cm-h-accent-soft-rgb), 0.65);
    transform: translateX(-2px);
    transition: left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.cm-halving__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 18px;
    margin: 0 0 24px;
    font-size: 0.82rem;
    color: var(--cm-h-muted);
}

.cm-halving__meta strong {
    font-weight: 700;
    color: var(--cm-h-accent-soft);
}

.cm-halving__meta-item--eta strong {
    color: #d8ddf0;
}

.cm-halving__foot {
    display: flex;
    align-items: center;
    gap: 26px;
}

.cm-halving__cta {
    flex: 0 0 auto;
    margin: 0;
}

.cm-halving__button,
.cm-halving__button:link,
.cm-halving__button:visited {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cm-h-accent-soft) 0%, var(--cm-h-accent) 100%);
    color: #2a1c00;
    font-size: 0.98rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(var(--cm-h-accent-rgb), 0.28);
    transition: transform 0.2s, box-shadow 0.2s;
}

.cm-halving__button:hover,
.cm-halving__button:focus {
    color: #2a1c00;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(var(--cm-h-accent-rgb), 0.42);
}

.cm-halving__button:focus-visible {
    outline: 3px solid var(--cm-h-accent-soft);
    outline-offset: 3px;
}

.cm-halving__note {
    flex: 1 1 0;
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.6;
    color: #8e97b8;
}

@media screen and (max-width: 767px) {
    .cm-halving {
        padding: 22px 16px 20px;
        border-radius: 18px;
    }

    .cm-halving__head {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 20px;
    }

    .cm-halving__clock {
        gap: 7px;
    }

    .cm-halving__flap {
        border-radius: 10px;
    }

    .cm-halving__rail-wrap {
        margin: 20px 0 10px;
    }

    .cm-halving__rail {
        height: 20px;
        -webkit-mask-image: repeating-linear-gradient(90deg, #000 0, #000 calc(4.16667% - 3px), transparent calc(4.16667% - 3px), transparent 4.16667%);
        mask-image: repeating-linear-gradient(90deg, #000 0, #000 calc(4.16667% - 3px), transparent calc(4.16667% - 3px), transparent 4.16667%);
    }

    .cm-halving__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .cm-halving__button,
    .cm-halving__button:link,
    .cm-halving__button:visited {
        display: block;
        padding: 14px 20px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cm-halving__dot {
        animation: none;
    }

    .cm-halving__rail,
    .cm-halving__rail-edge,
    .cm-halving__button {
        transition: none;
    }
}