/* ---------------------------------------------------
   Elegant dark modal skin + smooth entrance animation
   Works without changing any HTML or JS (targets ids)
   --------------------------------------------------- */

    /* backdrop + center wrapper (existing classes remain) */
    #holdModal {
        /* keep existing layout but make transitions smooth */
        will-change: opacity, visibility;
        transition: opacity 320ms ease, visibility 320ms ease;
    }

    /* dark frosted backdrop (preserve original bg but make nicer) */


    /* inner panel styling */
    #holdModal>div {
        /* this targets the inner wrapper <div class="bg-white rounded-lg p-6 max-w-md w-full"> */
        background: linear-gradient(180deg, rgba(20, 20, 23, 0.96), rgba(10, 10, 12, 0.96));
        color: #e6eef8;
        border-radius: 14px;
        padding: 22px;
        box-shadow:
            0 10px 30px rgba(2, 6, 23, 0.65),
            inset 0 1px 0 rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(8px) saturate(120%);
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        transform-origin: center;
        opacity: 0;
        transform: translateY(14px) scale(0.985);
        transition: transform 360ms cubic-bezier(.2, .9, .25, 1), opacity 360ms ease, box-shadow 360ms ease;
    }

    /* modal visible state (when JS removes 'hidden' class) */
    /* we can't change JS, so rely on element not having .hidden when shown.
   Add an explicit rule to animate when not hidden */
    #holdModal:not(.hidden)>div {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow:
            0 20px 50px rgba(2, 6, 23, 0.75),
            inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    /* backdrop overlay (the element with bg-black/40) */
    #holdModal {
        background: rgba(3, 6, 10, 0.6);
        /* stronger dim */
    }

    /* inner textual elements */
    #holdModal h3 {
        font-size: 1.05rem;
        margin: 0 0 6px 0;
        color: #fff;
        letter-spacing: -0.2px;
        font-weight: 700;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    }

    #holdModal p {
        color: rgba(230, 238, 248, 0.9);
        margin: 0 0 12px 0;
        line-height: 1.45;
        font-size: 0.94rem;
    }

    /* subtle accent for "15 minutes" if present inside text (won't change HTML) */
    #holdModal h3 span {
        color: #ffd68a;
        background: rgba(255, 214, 138, 0.06);
        padding: 2px 8px;
        border-radius: 999px;
        font-weight: 700;
        margin-left: 6px;
        font-size: 0.95em;
    }

    /* buttons container keep spacing but align with new theme */
    #holdModal .flex.justify-end.gap-3 {
        margin-top: 8px;
    }

    /* button base */
    #holdModal button {
        font-weight: 600;
        font-size: 0.95rem;
        padding: 10px 14px;
        border-radius: 10px;
        border-width: 1px;
        border-style: solid;
        cursor: pointer;
        transition: transform 180ms cubic-bezier(.2, .9, .25, 1), box-shadow 180ms ease, opacity 180ms ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    /* Cancel button - ghost, light border */
    #holdModal #holdCancel {
        color: rgba(230, 238, 248, 0.92);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
        border-color: rgba(255, 255, 255, 0.06);
        box-shadow: 0 4px 14px rgba(2, 6, 23, 0.45);
    }

    #holdModal #holdCancel:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
        background: rgba(255, 255, 255, 0.03);
    }

    /* Accept button - premium gradient */
    #holdModal #holdAccept {
        color: #0b1220;
        background: linear-gradient(90deg, #ffd68a 0%, #ff9a47 45%, #ff7b2a 100%);
        border-color: rgba(255, 168, 60, 0.12);
        box-shadow: 0 8px 30px rgba(255, 122, 30, 0.12), 0 2px 6px rgba(0, 0, 0, 0.4);
    }

    #holdModal #holdAccept:hover {
        transform: translateY(-3px) scale(1.01);
        box-shadow: 0 18px 50px rgba(255, 122, 30, 0.15), 0 4px 10px rgba(0, 0, 0, 0.45);
    }

    /* focus styles for accessibility (visible ring) */
    #holdModal button:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(255, 150, 40, 0.12), 0 10px 30px rgba(2, 6, 23, 0.6);
    }

    /* small icon augmentation: if punctuation or icon inserted, keep spacing */
    /* don't require modifying HTML; keeps layout tidy on small screens */
    @media (max-width: 560px) {
        #holdModal>div {
            padding: 16px;
            border-radius: 12px;
        }

        #holdModal h3 {
            font-size: 1rem;
        }

        #holdModal p {
            font-size: 0.9rem;
        }

        #holdModal button {
            padding: 9px 12px;
            font-size: 0.92rem;
            border-radius: 9px;
        }
    }

    /* tiny entrance keyframe for extra smoothness (used by JS-free browsers) */
    @keyframes modalPop {
        from {
            opacity: 0;
            transform: translateY(12px) scale(.985);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    #holdModal:not(.hidden)>div {
        animation: modalPop 360ms cubic-bezier(.2, .9, .25, 1);
    }

    /* optional: pulse dot in header if you later add an inline span dot */
    #holdModal .pulse-dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: linear-gradient(180deg, #ffd68a, #ff9a47);
        box-shadow: 0 6px 20px rgba(255, 154, 30, 0.16);
        display: inline-block;
        vertical-align: middle;
        animation: pulse 2000ms infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(.9);
            opacity: .9;
        }

        50% {
            transform: scale(1.15);
            opacity: 1;
        }

        100% {
            transform: scale(.9);
            opacity: .9;
        }
    }