[x-cloak] { display: none !important; }

    .ccm-body-lock {
        overflow-y: hidden;
    }

    .kid-card {
        padding-bottom: 40px;
        max-height: 640px;
    }

    @media (min-width: 1024px) {
        .kid-card {
            max-height: 560px;
        }
    }

    .kid-card--closeable {
        padding-bottom: 112px;
        max-height: 720px;
    }

    @media (min-width: 1024px) {
        .kid-card--closeable {
            max-height: 640px;
        }
    }

    .kid-card__link {
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .kid-card__media,
    .kid-card__body {
        position: relative;
        z-index: 0;
        pointer-events: none;
    }

    .kid-card__actions {
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 8px;
        pointer-events: none;
    }

    .kid-card__donate {
        pointer-events: auto;
        display: block;
        text-decoration: none;
        width: 100%;
        padding: 12px;
        text-align: center;
        color: #fff;
        font-weight: 700;
        border: 2px solid #fff;
        border-radius: 12px;
        background: #FF5A00;
        transition: all 0.15s ease-in-out;
        box-sizing: border-box;
    }

    .kid-card.group:hover .kid-card__donate,
    .group:hover .kid-card__donate {
        background: #fff;
        border-color: #FF5A00;
        color: #FF5A00;
    }

    .kid-card__close-btn {
        pointer-events: auto;
        width: 100%;
        padding: 12px;
        text-align: center;
        font-weight: 700;
        border: 2px solid #FF5A00;
        color: #FF5A00;
        background: #fff;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }

    .kid-card__close-btn:hover {
        background: #FF5A00;
        color: #fff;
    }

    .ccm {
        position: fixed;
        inset: 0;
        z-index: 100;
        overflow-y: auto;
        padding: 24px 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ccm__backdrop {
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, 0.5);
    }

    .ccm__dialog {
        position: relative;
        z-index: 10;
        width: 100%;
        max-width: 28rem;
        margin: 0 auto;
        background: #fff;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        box-sizing: border-box;
    }

    .ccm__title {
        margin-bottom: 8px;
        font-size: 22px;
        font-weight: 700;
    }

    .ccm__text {
        margin-bottom: 20px;
        color: #4b5563;
        line-height: 1.45;
    }

    .ccm__sum {
        font-weight: 700;
        color: #FF5A00;
    }

    .ccm__email-wrap {
        margin-bottom: 16px;
    }

    .ccm__email {
        width: 100%;
        border: 2px solid #0071E3;
        background: #f3f4f6;
        color: #6b7280;
        border-radius: 8px;
        padding: 10px 12px;
        box-sizing: border-box;
        outline: none;
    }

    .ccm__actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    @media (min-width: 640px) {
        .ccm__actions {
            flex-direction: row;
        }
    }

    .ccm__btn {
        width: 100%;
        padding: 12px 20px;
        font-weight: 700;
        border-radius: 8px;
        border: 2px solid transparent;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
        box-sizing: border-box;
    }

    .ccm__btn--primary {
        background: #FF5A00;
        border-color: #FF5A00;
        color: #fff;
    }

    .ccm__btn--primary:hover {
        background: #fff;
        color: #FF5A00;
    }

    .ccm__btn--secondary {
        background: #fff;
        border-color: #e5e7eb;
        color: #4b5563;
    }

    .ccm__btn--secondary:hover {
        border-color: #9ca3af;
    }