.dd-h5p-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}
.dd-h5p-item {
    pointer-events: auto;
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid #e4ddcf;
    color: white;
    font:
        600 1rem Arial,
        sans-serif;
    min-width: 0;
}
button.dd-h5p-item {
    cursor: pointer;
}
.dd-h5p-inline {
    overflow: hidden;
}
.dd-h5p-inline > .dd-h5p-frame {
    min-height: 0;
}
.dd-h5p-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 80px;
    border: 0;
    background: #fffdf8;
}
.dd-h5p-expandable[popover] { display: block; position: static; inset: auto; margin: 0; padding: 0; }
.dd-h5p-expandable[popover]:popover-open {
    position: fixed; inset: 0; margin: auto; width: calc(100vw - 24px); height: calc(100dvh - 24px);
    max-width: none; max-height: none; border: 1px solid #ded6c7; border-radius: 12px; background: #fffdf8;
}
.dd-h5p-expandable::backdrop { background: #20352bcc; }
.dd-h5p-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    box-sizing: border-box;
    width: min(90vw, 800px);
    height: min(90dvh, 800px);
    max-height: 90dvh;
    border: 1px solid #ded6c7;
    border-radius: 22px;
    background: #fffdf8;
    color: #243d32;
    padding: 20px;
    overflow: hidden;
}
.dd-h5p-dialog[open] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
}
.dd-h5p-dialog.without-title[open] {
    grid-template-rows: auto minmax(0, 1fr);
}
.dd-h5p-dialog::backdrop {
    background: #20352b99;
}
.dd-h5p-dialog h2 {
    margin: 0 0 12px;
    font-size: 1.3rem;
    text-align: start;
    unicode-bidi: isolate;
}
.dd-h5p-dialog > h2:dir(rtl) {
    text-align: right;
}
.dd-h5p-dialog > button {
    justify-self: end;
    cursor: pointer;
    float: inline-end;
    background: #a8543a;
    color: white;
    border: 0;
    padding: 10px 18px;
    border-radius: 12px;
}
.dd-h5p-dialog-content {
    clear: both;
    min-height: 0;
    overflow: hidden;
    padding-top: 16px;
}
.dd-h5p-dialog.size-small {
    width: min(90vw, 480px);
}
.dd-h5p-dialog.size-large {
    width: min(94vw, 1100px);
}
.dd-h5p-panel {
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    border-radius: 20px 0 0 20px;
    width: min(95vw, 520px);
}
[dir="rtl"] .dd-h5p-panel {
    margin: 0 auto 0 0;
    border-radius: 0 20px 20px 0;
}

.dd-h5p-screen { box-sizing: border-box; position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(12px, 3vw, 32px); background: var(--surface, #fffdf8); color: var(--text, #243d32); pointer-events: auto; overflow: hidden; }
.dd-h5p-screen h2 { margin: 0; font-size: clamp(18px, 2.5vw, 26px); flex: 0 0 auto; }
.dd-h5p-screen-content { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.dd-h5p-screen-content .dd-h5p-frame { width: 100%; height: 100%; min-height: 0; border: 0; display: block; }