/* Django adaptation of gatinapp-web AppHeader/AppFooter. Scoped deliberately:
   page content and the independent CMS shell retain their existing styles. */
#website-header-fallback:not([hidden]), #website-footer-fallback:not([hidden]) { display: contents; }
.website-shell {
    --ws-card: #fff;
    --ws-fg: #111827;
    --ws-muted: #6b7280;
    --ws-placeholder: #5b6474;
    --ws-hover: #eef0f2;
    --ws-border: #e5e7eb;
    --ws-primary: #c91068;
    --ws-on-primary: #fff;
    --ws-brand: #1b2e5c;
    --ws-shadow: 0 8px 20px rgb(17 24 39 / 12%);
    color: var(--ws-fg);
    background: var(--ws-card);
    font: 400 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: start;
    caret-color: var(--ws-primary);
    scrollbar-color: var(--ws-muted) var(--ws-card);
}
[data-theme="dark"] .website-shell, [data-theme="party"] .website-shell {
    --ws-card: #1f2937;
    --ws-fg: #f9fafb;
    --ws-muted: #a4adbc;
    --ws-placeholder: #a4adbc;
    --ws-hover: #2f3a4a;
    --ws-border: #374151;
    --ws-primary: #e879ac;
    --ws-on-primary: #111827;
    --ws-brand: #7fa8d4;
}
.website-shell *, .website-shell *::before, .website-shell *::after { box-sizing: border-box; }
.website-shell [hidden] { display: none !important; }
.website-shell a { color: inherit; text-decoration: none; text-underline-offset: .2em; }
.website-shell a:hover { text-decoration: none; }
.website-shell :is(button, input) { font: inherit; letter-spacing: normal; }
.website-shell button { cursor: pointer; }
.website-shell :is(form, p, ul, h2) { margin: 0; }
.website-shell ul { padding: 0; list-style: none; }
.website-shell summary { cursor: pointer; list-style: none; }
.website-shell summary::-webkit-details-marker { display: none; }
.website-shell :is(a, button, summary, input):focus-visible { outline: 2px solid var(--ws-primary); outline-offset: 3px; }
.website-shell ::selection { color: var(--ws-on-primary); background: var(--ws-primary); }
.website-shell .ws-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ws-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 64px; padding: 12px 20px 15px; }
/* impeccable-disable-next-line side-tab: exact bottom brand stripe from the user-pinned gatinapp-web AppHeader, not a card accent */
.ws-header::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(to right, #e01374, #f5471b, #ffbc00); }
.ws-brand { display: inline-flex; flex: none; align-items: center; gap: 8px; color: var(--ws-brand) !important; font-size: 20px; font-weight: 600; white-space: nowrap; }
.ws-brand img { width: 28px; height: 28px; object-fit: contain; }
.ws-primary { display: flex; flex: 1; min-width: 0; align-items: center; gap: 24px; }
.ws-desktop-nav { display: flex; align-items: center; white-space: nowrap; }
.ws-control { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 32px; min-height: 32px; padding: 4px; border: 0; border-radius: 6px; color: var(--ws-muted) !important; background: transparent; line-height: 1; }
.ws-control .bi { font-size: 18px; }
.ws-control:hover, .ws-control.is-active { background: var(--ws-hover); color: var(--ws-fg) !important; }
.ws-control.is-active { box-shadow: inset 0 -2px var(--ws-primary); }
.ws-utilities { display: flex; flex: none; align-items: center; justify-content: flex-end; min-width: 0; }
.ws-theme, .ws-languages, .ws-auth-links { display: flex; align-items: center; gap: 2px; }
.ws-language { font-size: 12px; font-weight: 600; }
.ws-auth-links { gap: 4px; }
.ws-signin, .ws-signup { padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ws-signin:hover { background: var(--ws-hover); }
.website-shell .ws-signup { background: var(--ws-primary); color: var(--ws-on-primary); }
.ws-signup:hover { filter: brightness(.94); }
.ws-dropdown { position: relative; }
.ws-dropdown > summary { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-radius: 4px; font-weight: 600; color: var(--ws-muted); }
.ws-dropdown > summary:hover, .ws-dropdown[open] > summary { color: var(--ws-fg); }
.ws-dropdown > summary > .bi-chevron-down { font-size: 12px; }
.ws-dropdown[open] > summary > .bi-chevron-down { transform: rotate(180deg); }
.ws-dropdown-panel { background: var(--ws-card); border: 1px solid var(--ws-border); border-radius: 8px; box-shadow: var(--ws-shadow); }
.ws-dropdown-panel { position: absolute; z-index: 2; inset-inline-start: 0; top: 100%; margin-top: 4px; width: 256px; max-height: calc(100dvh - 160px); overflow-y: auto; padding: 4px 0; }
.ws-dropdown-panel :is(a, button) { display: block; width: 100%; padding: 8px 12px; color: var(--ws-fg); text-align: start; border: 0; background: transparent; }
.ws-dropdown-panel :is(a, button):hover { background: var(--ws-hover); }
.ws-dropdown-panel hr { border: 0; border-top: 1px solid var(--ws-border); margin: 6px 12px; }
.ws-nav-link { color: var(--ws-muted) !important; font-weight: 600; }
.ws-nav-link.is-active { color: var(--ws-primary) !important; }
.ws-account > summary { padding: 2px; gap: 6px; min-height: 32px; }
.ws-account > summary > .bi-person-circle { font-size: 21px; }
.ws-account-name { display: none; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.ws-avatar { border-radius: 50%; object-fit: cover; }
.ws-account .ws-dropdown-panel { inset-inline-start: auto; inset-inline-end: 0; width: 216px; }
.ws-notifications { position: relative; }
.ws-notification-dot { position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--ws-primary); }
.ws-store-badges { display: flex; flex: none; align-items: center; gap: 12px; }
.ws-store-badges a { display: inline-flex; align-items: center; min-height: 44px; border-radius: 6px; }
.ws-store-badges img { display: block; width: auto; height: 44px; }
.ws-view-tools:empty { display: none; }
.ws-view-tools { display: flex; justify-content: flex-end; padding: 8px 20px 0; }
.ws-footer { border-top: 1px solid var(--ws-border); margin-top: auto; }
.ws-footer-inner { max-width: 1024px; margin: 0 auto; }
.ws-footer-columns { display: grid; gap: 28px; padding: 32px 20px; }
.ws-footer-columns h2 { margin-bottom: 12px; font-size: 12px; line-height: 1.5; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ws-footer-columns ul { display: flex; flex-direction: column; gap: 8px; }
.ws-footer-columns a, .ws-footer-bottom { color: var(--ws-muted); }
.ws-footer a:hover { color: var(--ws-fg); text-decoration: underline; }
.ws-footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ws-border); padding: 16px 20px; font-size: 12px; }
.ws-footer-utilities { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 16px; }
@media (min-width: 640px) {
    .ws-header { padding-block: 8px 3px; }
    .ws-utilities { width: auto; flex-wrap: nowrap; gap: 12px; }
    .ws-account-name { display: block; }
    .ws-footer-bottom { flex-direction: row; }
}
@media (min-width: 768px) {
    .ws-footer-columns { grid-template-columns: repeat(3, 1fr); }
}
/* Equal side space keeps the badges centered, including the separate
   36px preferences toggle and its 16px gap on the right. */
@media (min-width: 960px) {
    .ws-primary { margin-inline-end: 52px; }
    .ws-utilities { flex: 1; }
}
@media (max-width: 959px) {
    .ws-header > .ws-store-badges { order: 1; flex-basis: 100%; justify-content: center; }
    .ws-preferences-band { order: 2; }
}
@media (prefers-reduced-motion: no-preference) {
    .website-shell :is(a, button, summary) { transition: color 120ms ease-out, background-color 120ms ease-out; }
}

/* The preferences disclosure is part of the header's flow, so it expands the
   bar and moves page content instead of opening another floating menu. */
.ws-preferences, .ws-preferences::details-content { display: contents; }
.ws-preferences:not([open]) > .ws-preferences-band { display: none; }
.ws-preferences-toggle { min-width: 36px; min-height: 36px; }
.ws-preferences[open] > .ws-preferences-toggle { background: var(--ws-hover); color: var(--ws-fg) !important; }
.ws-preferences-band {
    display: grid; grid-template-rows: 1fr; flex: 0 0 calc(100% + 40px);
    margin-inline: -20px; margin-block-start: 0; opacity: 1;
    transition: grid-template-rows 180ms cubic-bezier(.4, 0, .2, 1), margin-block-start 180ms cubic-bezier(.4, 0, .2, 1), opacity 140ms ease-out;
}
.ws-preferences[data-preferences-expanded="false"] > .ws-preferences-band {
    grid-template-rows: 0fr; margin-block-start: -8px; opacity: 0;
}
.ws-preferences[data-preferences-expanded="true"] > .ws-preferences-band {
    transition-duration: 280ms, 280ms, 160ms;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}
.ws-preferences-clip { min-height: 0; overflow: hidden; }
.ws-preferences-panel {
    display: flex; align-items: center; justify-content: flex-end; gap: 16px;
    padding: 12px 20px; border-top: 1px solid var(--ws-border);
}
@media (prefers-reduced-motion: reduce) {
    .ws-preferences[data-preferences-expanded] > .ws-preferences-band { transition: opacity 80ms linear; }
}
.ws-view-preference, .ws-preferences-panel .ws-theme, .ws-preferences-panel .ws-languages {
    display: flex; flex: none; align-items: center; gap: 0; padding: 2px;
    border: 1px solid var(--ws-border); border-radius: 8px;
    background: color-mix(in srgb, var(--ws-hover) 35%, transparent);
}
.ws-view-preference .ws-control.is-active, .ws-preferences-panel .ws-control.is-active { box-shadow: none; }
.ws-account-icon { display: inline-flex; position: relative; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; }
.ws-account-icon > .bi { font-size: 24px; }
.ws-unread-count {
    position: absolute; inset-block-start: -5px; inset-inline-end: -7px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding-inline: 3px; border-radius: 8px;
    background: var(--ws-primary); color: var(--ws-on-primary); font-size: 10px; font-weight: 700; line-height: 1;
}
.ws-account > .ws-dropdown-panel { width: 248px; max-width: calc(100vw - 32px); }
.ws-account-auth { display: block; }
.ws-account-auth :is(.ws-signin, .ws-signup) { background: transparent; color: var(--ws-fg); border-radius: 0; font-size: inherit; font-weight: inherit; white-space: normal; }
.ws-account-auth :is(.ws-signin, .ws-signup):hover { background: var(--ws-hover); filter: none; }
.ws-dropdown-panel .ws-inbox-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ws-inbox-link > span:first-child { display: flex; align-items: center; gap: 8px; }
.ws-menu-count { font-size: 12px; font-weight: 600; color: var(--ws-primary); }
.ws-account-app > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; color: var(--ws-fg); }
.ws-account-app > summary:hover { background: var(--ws-hover); }
.ws-account-app[open] > summary svg, .ws-account-app[open] > summary .bi { transform: rotate(180deg); }
.ws-account-app > div { padding-inline-start: 12px; padding-bottom: 4px; }
@media (max-width: 639px) {
    .ws-header { gap: 8px; padding-inline: 12px; }
    .ws-brand > span { display: none; }
    .ws-primary { gap: 16px; }
    .ws-preferences-band { flex-basis: calc(100% + 24px); margin-inline: -12px; }
    .ws-preferences-panel { padding-inline: 12px; justify-content: center; gap: 8px; }
    .ws-account > summary { gap: 0; }
    .ws-account > summary > svg, .ws-account > summary > .bi-chevron-down { display: none; }
}

@media (max-width: 359px) {
    .ws-header { padding-inline: 8px; }
    .ws-preferences-band { flex-basis: calc(100% + 16px); margin-inline: -8px; }
}