/*
 * SomDeBar public desktop baseline
 * Keeps public pages on the same desktop scale without changing mobile flow.
 */
:root {
    --sdb-public-content-max: 1400px;
    --sdb-public-wide-max: 1680px;
    --sdb-public-form-max: 860px;
    --sdb-public-readable-max: 1120px;
    --sdb-public-gutter: clamp(16px, 2.4vw, 36px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body[data-sdb-public] {
    width: 100%;
    min-width: 320px;
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    body[data-sdb-public] {
        overflow-x: hidden;
    }
}

body[data-sdb-public] img,
body[data-sdb-public] video,
body[data-sdb-public] canvas,
body[data-sdb-public] svg,
body[data-sdb-public] iframe {
    max-width: 100%;
}

.sdb-public-frame,
.sdb-public-wide,
.sdb-public-form,
.sdb-public-readable {
    width: min(100%, var(--sdb-public-content-max));
    margin-inline: auto;
}

.sdb-public-wide {
    width: min(100%, var(--sdb-public-wide-max));
}

.sdb-public-form {
    width: min(100%, var(--sdb-public-form-max));
}

.sdb-public-readable {
    width: min(100%, var(--sdb-public-readable-max));
}

@media (min-width: 1024px) {
    html {
        font-size: 16px !important;
    }

    body[data-sdb-public] {
        --sdb-public-gutter: clamp(24px, 2vw, 40px);
    }

    body[data-sdb-public] .max-w-7xl,
    body[data-sdb-public] .max-w-\[1200px\],
    body[data-sdb-public] .max-w-\[1400px\] {
        max-width: var(--sdb-public-content-max) !important;
    }

    body[data-sdb-public] .max-w-\[1680px\] {
        max-width: var(--sdb-public-wide-max) !important;
    }

    body[data-sdb-public^="somticket_public"] .max-w-2xl,
    body[data-sdb-public^="somticket_public"] .max-w-3xl,
    body[data-sdb-public="somticket_checkout"] .max-w-2xl,
    body[data-sdb-public="somticket_checkout"] .max-w-3xl {
        max-width: var(--sdb-public-form-max) !important;
    }

    body[data-sdb-public^="somticket_public"] .max-w-xl,
    body[data-sdb-public^="somticket_public"] .max-w-md,
    body[data-sdb-public="somticket_checkout"] .max-w-md {
        max-width: min(100%, 520px) !important;
    }

    body[data-sdb-public] .sdb-public-px {
        padding-inline: var(--sdb-public-gutter) !important;
    }
}

@media (min-width: 1800px) {
    :root {
        --sdb-public-content-max: 1480px;
        --sdb-public-wide-max: 1720px;
    }
}