/* Background artwork for the public site, chosen under Settings > Public site. Each pattern is solid
   SVG shapes used as a CSS mask, so it is painted in the theme's own colours (light and dark, and
   whatever brand colour an admin picks) - never a gradient. Loaded on every page so the settings tab
   can preview the choices. A pattern element has two layers: .pattern-a in the brand colour and
   .pattern-b in the accent. */

.pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.pattern > span {
    position: absolute;
    inset: 0;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
}

.pattern-a { background-color: var(--admin-brand); }
.pattern-b { background-color: var(--admin-accent); }

/* Kente weave: interlocking bars, a nod to Ghanaian cloth. */
.public-bg-kente .pattern-a {
    opacity: .05;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='0' y='4' width='28' height='8'/%3E%3Crect x='36' y='4' width='28' height='8'/%3E%3Crect x='4' y='36' width='8' height='24'/%3E%3Crect x='20' y='36' width='8' height='24'/%3E%3Crect x='36' y='20' width='28' height='8'/%3E%3Crect x='36' y='52' width='28' height='8'/%3E%3Crect x='0' y='20' width='28' height='8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='0' y='4' width='28' height='8'/%3E%3Crect x='36' y='4' width='28' height='8'/%3E%3Crect x='4' y='36' width='8' height='24'/%3E%3Crect x='20' y='36' width='8' height='24'/%3E%3Crect x='36' y='20' width='28' height='8'/%3E%3Crect x='36' y='52' width='28' height='8'/%3E%3Crect x='0' y='20' width='28' height='8'/%3E%3C/svg%3E");
    -webkit-mask-size: 64px 64px;
    mask-size: 64px 64px;
}

.public-bg-kente .pattern-b {
    opacity: .09;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='29' y='5' width='6' height='6'/%3E%3Crect x='44' y='38' width='12' height='4'/%3E%3Crect x='13' y='44' width='6' height='6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='29' y='5' width='6' height='6'/%3E%3Crect x='44' y='38' width='12' height='4'/%3E%3Crect x='13' y='44' width='6' height='6'/%3E%3C/svg%3E");
    -webkit-mask-size: 64px 64px;
    mask-size: 64px 64px;
}

/* Confetti: scattered ticket stubs, dots and triangles. */
.public-bg-confetti .pattern-a {
    opacity: .12;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Crect x='14' y='18' width='22' height='12' rx='3' transform='rotate(-18 25 24)'/%3E%3Ccircle cx='96' cy='30' r='5'/%3E%3Cpath d='M128 92l12 20h-24z'/%3E%3Crect x='60' y='112' width='22' height='12' rx='3' transform='rotate(24 71 118)'/%3E%3Ccircle cx='22' cy='122' r='3'/%3E%3Crect x='112' y='136' width='14' height='6' rx='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Crect x='14' y='18' width='22' height='12' rx='3' transform='rotate(-18 25 24)'/%3E%3Ccircle cx='96' cy='30' r='5'/%3E%3Cpath d='M128 92l12 20h-24z'/%3E%3Crect x='60' y='112' width='22' height='12' rx='3' transform='rotate(24 71 118)'/%3E%3Ccircle cx='22' cy='122' r='3'/%3E%3Crect x='112' y='136' width='14' height='6' rx='3'/%3E%3C/svg%3E");
    -webkit-mask-size: 160px 160px;
    mask-size: 160px 160px;
}

.public-bg-confetti .pattern-b {
    opacity: .2;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Ccircle cx='64' cy='64' r='4'/%3E%3Cpath d='M30 76l10 16h-20z'/%3E%3Crect x='132' y='48' width='14' height='6' rx='3' transform='rotate(40 139 51)'/%3E%3Ccircle cx='146' cy='118' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Ccircle cx='64' cy='64' r='4'/%3E%3Cpath d='M30 76l10 16h-20z'/%3E%3Crect x='132' y='48' width='14' height='6' rx='3' transform='rotate(40 139 51)'/%3E%3Ccircle cx='146' cy='118' r='3'/%3E%3C/svg%3E");
    -webkit-mask-size: 160px 160px;
    mask-size: 160px 160px;
}

/* Dot grid. */
.public-bg-dots .pattern-a {
    opacity: .16;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='3' cy='3' r='1.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='3' cy='3' r='1.6'/%3E%3C/svg%3E");
    -webkit-mask-size: 22px 22px;
    mask-size: 22px 22px;
}

.public-bg-dots .pattern-b,
.public-bg-plain .pattern-a,
.public-bg-plain .pattern-b { display: none; }

/* Settings > Public site: the background picker. */
.public-style-choice {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .5rem;
    border: 2px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    background: var(--admin-sidebar-bg);
    color: inherit;
    font-size: .85rem;
    font-weight: 600;
    transition: border-color .15s ease, transform .15s ease;
}

.public-style-choice:hover { transform: translateY(-1px); }
.public-style-choice.selected { border-color: var(--admin-brand); }

.public-style-swatch {
    position: relative;
    display: block;
    height: 64px;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-content-bg);
    overflow: hidden;
}