/* Scoped to the widget. No global theme, button or image rules. */
#ckdwg-widget,
#ckdwg-widget *,
#ckdwg-dialog,
#ckdwg-dialog * { box-sizing: border-box; }

#ckdwg-widget {
    position: fixed;
    bottom: calc(var(--ckdwg-y, 24px) + env(safe-area-inset-bottom, 0px));
    z-index: var(--ckdwg-z, 1000);
    margin: 0;
    padding: 0;
    border: 0;
    font: 14px/1.4 Arial, Helvetica, sans-serif;
    isolation: isolate;
}
#ckdwg-widget.ckdwg-widget--left { left: calc(var(--ckdwg-x, 24px) + env(safe-area-inset-left, 0px)); right: auto; }
#ckdwg-widget.ckdwg-widget--right { right: calc(var(--ckdwg-x, 24px) + env(safe-area-inset-right, 0px)); left: auto; }
#ckdwg-widget .ckdwg-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--ckdwg-size, 56px);
    height: var(--ckdwg-size, 56px);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgb(0 0 0 / 25%);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    transition: width .25s ease, height .25s ease, box-shadow .25s ease;
}
#ckdwg-widget .ckdwg-trigger::before,
#ckdwg-widget .ckdwg-trigger::after,
#ckdwg-dialog .ckdwg-label-link::before,
#ckdwg-dialog .ckdwg-label-link::after,
#ckdwg-dialog .ckdwg-close::before,
#ckdwg-dialog .ckdwg-close::after { display: none; }
#ckdwg-widget .ckdwg-trigger img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    object-fit: cover;
}
#ckdwg-widget .ckdwg-tooltip {
    position: absolute;
    top: 50%;
    width: max-content;
    max-width: min(320px, calc(100vw - var(--ckdwg-hover-size, 76px) - var(--ckdwg-x, 24px) - 34px));
    padding: 8px 14px;
    border-radius: 6px;
    background: #034da2;
    color: #fff;
    font: 14px/1.4 Arial, Helvetica, sans-serif;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
#ckdwg-widget.ckdwg-widget--left .ckdwg-tooltip { left: calc(100% + 14px); transform: translate(-10px, -50%); }
#ckdwg-widget.ckdwg-widget--right .ckdwg-tooltip { right: calc(100% + 14px); transform: translate(10px, -50%); }
#ckdwg-widget .ckdwg-tooltip::before { content: ""; position: absolute; top: 0; bottom: 0; width: 14px; }
#ckdwg-widget.ckdwg-widget--left .ckdwg-tooltip::before { right: 100%; }
#ckdwg-widget.ckdwg-widget--right .ckdwg-tooltip::before { left: 100%; }
#ckdwg-widget .ckdwg-tooltip::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); border: 6px solid transparent; }
#ckdwg-widget.ckdwg-widget--left .ckdwg-tooltip::after { right: 100%; border-right-color: #034da2; }
#ckdwg-widget.ckdwg-widget--right .ckdwg-tooltip::after { left: 100%; border-left-color: #034da2; }

@media (hover: hover) and (pointer: fine) {
    #ckdwg-widget:hover .ckdwg-trigger { width: var(--ckdwg-hover-size, 76px); height: var(--ckdwg-hover-size, 76px); box-shadow: 0 6px 20px rgb(0 0 0 / 35%); }
    #ckdwg-widget:hover .ckdwg-tooltip { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); }
}
#ckdwg-widget .ckdwg-trigger:focus-visible { width: var(--ckdwg-hover-size, 76px); height: var(--ckdwg-hover-size, 76px); }
#ckdwg-widget .ckdwg-trigger:focus-visible + .ckdwg-tooltip { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); }
#ckdwg-widget.ckdwg-tooltip-dismissed .ckdwg-tooltip { opacity: 0; visibility: hidden; pointer-events: none; }
#ckdwg-widget .ckdwg-trigger:focus-visible,
#ckdwg-dialog .ckdwg-close:focus-visible,
#ckdwg-dialog .ckdwg-label-link:focus-visible { outline: 3px solid #ffcd00; outline-offset: 3px; }

#ckdwg-dialog:not([open]) { display: none !important; }
#ckdwg-dialog {
    position: fixed;
    inset: 0;
    width: min(901px, calc(100vw - 24px));
    max-width: none;
    height: auto;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #111;
    box-shadow: 0 16px 64px rgb(0 0 0 / 30%);
    overflow: auto;
    overscroll-behavior: contain;
    font: 16px/1.5 Arial, Helvetica, sans-serif;
}
#ckdwg-dialog::backdrop { background: rgb(30 30 30 / 87%); }
#ckdwg-dialog .ckdwg-card { position: relative; margin: 0; padding: 44px; }
#ckdwg-dialog .ckdwg-label-link { display: block; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; text-decoration: none; }
#ckdwg-dialog .ckdwg-label-image { display: block; width: 100%; max-width: 813px; height: auto; margin: 0 auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
#ckdwg-dialog .ckdwg-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #555;
    font: 30px/1 Arial, Helvetica, sans-serif;
    box-shadow: none;
    text-transform: none;
    cursor: pointer;
    touch-action: manipulation;
}
#ckdwg-dialog .ckdwg-close:hover { background: #f0f0f0; color: #111; }
#ckdwg-dialog .ckdwg-close:focus-visible { outline-offset: -4px; }
#ckdwg-dialog .ckdwg-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 600px) {
    #ckdwg-widget { --ckdwg-x: var(--ckdwg-mobile-x, 24px) !important; --ckdwg-y: var(--ckdwg-mobile-y, 24px) !important; }
    #ckdwg-dialog .ckdwg-card { padding: 44px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    #ckdwg-widget .ckdwg-trigger, #ckdwg-widget .ckdwg-tooltip { transition: none; }
}
@media print {
    #ckdwg-widget, #ckdwg-dialog { display: none !important; }
}
