/* =========================
   Base container + default (desktop)
   ========================= */

/* Overlay container */
.diaper-modal{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 99999;          /* above headers/columns */
}

/* Shown state */
.diaper-modal[aria-hidden="false"]{
    display: block;
}

/* Backdrop (desktop default) */
/*.diaper-modal-backdrop{*/
/*    position: fixed;*/
/*    inset: 0;*/
/*    background: rgba(0,0,0,.5);*/
/*    z-index: 0;*/
/*}*/


.diaper-modal-backdrop{
    display:none !important;
}

/* Dialog – default desktop/large layout (≥ 846px) */
.diaper-modal-dialog{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 92vw);
    max-height: min(88vh, 720px);
    overflow: auto;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    padding: 1rem 1rem 1.25rem;
    z-index: 1;              /* above backdrop */
}

/* =========================
   Narrow desktop / tablet (481–845px)
   ========================= */

@media (min-width: 481px) and (max-width: 845px) {

    /* No dark overlay on these widths */
    .diaper-modal-backdrop{
        display: none !important;
    }

    .diaper-modal{
        background: transparent !important;
        z-index: 2147483647;  /* ensure above sticky bars/columns */
    }

    /* Smaller card, pinned a bit under the header */
    .diaper-modal-dialog{
        top: 96px;                        /* adjust if your header is taller/shorter */
        bottom: 4vh;
        left: 50%;
        transform: translateX(-50%);      /* no vertical translate */
        width: min(480px, 90vw);
        max-height: 400px;  /* viewport minus header + margin */
        box-shadow: 0 6px 16px rgba(0,0,0,.22);
        border-radius: 10px;
        z-index: 2147483647;
    }

    .diaper-modal-close{
        z-index: 2147483647;
    }
}

/* =========================
   Phones / small devices (≤ 480px)
   ========================= */

@media (max-width:480px){

    /* Still no backdrop on phones */
    .diaper-modal-backdrop{
        display: none !important;
    }

    .diaper-modal{
        background: transparent !important;
        z-index: 2147483647;
    }

    .diaper-modal-dialog{
        top: 64px;                         /* under mobile header */
        left: 50%;
        transform: translateX(-50%);       /* no vertical translate */
        width: 92vw;
        max-height: 70vh;                  /* shorter than tablet/desktop */
        border-radius: 10px;
        padding: .875rem .875rem 1rem;
        box-shadow: 0 6px 16px rgba(0,0,0,.22);
    }

    .diaper-modal-title{
        font-size: 1.2rem;
    }

    .diaper-modal-image{
        max-height: calc(70vh - 80px);     /* room for title + padding + X */
        object-fit: contain;
    }

    :root{ --diaper-close-size: 24px; }    /* smaller close button on phones */

    .diaper-modal-close{
        top: max(6px, env(safe-area-inset-top));
        right: max(6px, env(safe-area-inset-right));
    }
}

/* =========================
   Shared typography / image
   ========================= */

.diaper-modal-title{
    margin: 0 2rem .75rem 0;
    font-size: 2rem;
    line-height: 1.3;
}

.diaper-modal-image{
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    margin-top: .5rem;
}

/* Variant image switching */
.diaper-modal-image { display: none; }
.diaper-modal-image.is-active { display: block; }

/* Prevent background scroll while open */
body.diaper-modal-open{
    overflow: hidden;
    touch-action: none;
}

/* =========================
   Close button styles
   ========================= */

:root{
    --diaper-close-size: 30px; /* default desktop/tablet, overridden on phones */
}

.diaper-modal-close{
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    width: var(--diaper-close-size);
    height: var(--diaper-close-size);

    border: none !important;
    padding: 0 !important;
    line-height: normal !important;

    border-radius: 999px;
    background: #000 !important;
    color: #fff !important;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 6px 16px rgba(0,0,0,.28);
    transition:
            transform .12s ease,
            box-shadow .12s ease,
            background-color .12s ease;
    font-size: 1rem;
}

/* Hover/active */
.diaper-modal-close:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,.32);
}
.diaper-modal-close:active{
    transform: translateY(0);
    box-shadow: 0 5px 14px rgba(0,0,0,.25);
}

/* Focus-visible ring */
.diaper-modal-close:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow:
            0 0 0 4px rgba(0,0,0,.6),
            0 6px 16px rgba(0,0,0,.28);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    .diaper-modal-close{
        transition: none;
    }
}
/* Phones + skinny desktop/tablet: override centering */
@media screen and (max-width: 845px) {
    .diaper-modal-dialog{
        top: 96px !important;                 /* under header */
        bottom: 4vh;
        left: 50%;
        transform: translateX(-50%) !important;  /* remove vertical centering */
        max-height: 400px !important;
    }
}