/*!
 * Wicoda Consent - styling for Wicoda.Themes.* DNN skins
 * -----------------------------------------------------------------------------
 * Copyright (c) 2026 Marcel van 't Hof. MIT.
 *
 * SHARED FILE - keep this skin-agnostic.
 * Every colour, radius, font and shadow below is a CSS custom property with a
 * neutral default. A skin restyles the whole thing by redefining those properties
 * in its own stylesheet; it should never need to edit or override selectors here.
 *
 * The LadiesOnly skin does that in skin.css - see the "consent" section there for
 * a worked example.
 *
 * Contrast note: --wc-accent sits behind white button text, so give it a value of
 * at least 4.5:1 against white. The brand pink #f25faf is 2.99:1 and is NOT
 * suitable; LadiesOnly passes #b64080 (5.21:1 on white).
 */

.wc-root {
    /* surface */
    --wc-bg: #ffffff;
    --wc-fg: #1c1c1e;
    --wc-muted: #5c5c66;
    --wc-line: #e2e2e8;
    --wc-radius: 4px;
    --wc-shadow: 0 -4px 24px rgba(0, 0, 0, .18);

    /* accent: must reach 4.5:1 against white */
    --wc-accent: #1f5f9e;
    --wc-accent-hover: #17497a;
    --wc-accent-fg: #ffffff;

    /* typography - inherit from the skin by default */
    --wc-font: inherit;
    --wc-font-heading: inherit;
    --wc-title-size: 1.15rem;
    --wc-body-size: .95rem;

    /* layout */
    --wc-max-width: 64rem;
    --wc-gap: 1.25rem;
    --wc-pad: 1.35rem;
    --wc-z: 2147483000;

    position: fixed;
    z-index: var(--wc-z);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 0;
    font-family: var(--wc-font);
    font-size: var(--wc-body-size);
    line-height: 1.5;
    color: var(--wc-fg);
}

.wc-panel {
    width: 100%;
    max-width: var(--wc-max-width);
    margin: 0 auto;
    background: var(--wc-bg);
    border-top: 1px solid var(--wc-line);
    box-shadow: var(--wc-shadow);
    padding: var(--wc-pad);
    display: flex;
    flex-wrap: wrap;
    gap: var(--wc-gap);
    align-items: flex-start;
}

/* The preferences view is a centred card rather than a bottom bar. */
.wc-root[data-view="prefs"] {
    top: 0;
    align-items: center;
    background: rgba(0, 0, 0, .5);
    padding: 1rem;
    overflow-y: auto;
}

.wc-root[data-view="prefs"] .wc-panel {
    max-width: 34rem;
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius);
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.wc-text { flex: 1 1 22rem; min-width: 0; }

.wc-title {
    margin: 0 0 .35rem;
    font-family: var(--wc-font-heading);
    font-size: var(--wc-title-size);
    line-height: 1.2;
    color: var(--wc-fg);
}

.wc-body { margin: 0; color: var(--wc-muted); }

.wc-links { margin: .5rem 0 0; }
.wc-links a { color: var(--wc-accent); text-underline-offset: .15em; }

/* ------------------------------------------------------------------ actions */

.wc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    flex: 0 0 auto;
}

.wc-root[data-view="prefs"] .wc-actions { width: 100%; }

.wc-btn {
    font: inherit;
    font-family: var(--wc-font);
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--wc-radius);
    padding: .6rem 1.1rem;
    line-height: 1.2;
    background: none;
    color: var(--wc-fg);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .wc-btn { transition: none; }
}

.wc-btn-primary {
    background: var(--wc-accent);
    border-color: var(--wc-accent);
    color: var(--wc-accent-fg);
}

.wc-btn-primary:hover {
    background: var(--wc-accent-hover);
    border-color: var(--wc-accent-hover);
}

.wc-btn-secondary {
    border-color: var(--wc-line);
    color: var(--wc-fg);
}

.wc-btn-secondary:hover { border-color: var(--wc-accent); color: var(--wc-accent); }

.wc-btn-link {
    padding-left: .35rem;
    padding-right: .35rem;
    color: var(--wc-accent);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.wc-btn:focus-visible,
.wc-switch input:focus-visible + .wc-track,
.wc-links a:focus-visible {
    outline: 3px solid var(--wc-accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- preferences */

.wc-rows { display: flex; flex-direction: column; gap: .1rem; width: 100%; }

.wc-row { padding: .85rem 0; border-top: 1px solid var(--wc-line); }
.wc-row:first-child { border-top: 0; }

.wc-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.wc-row-name { font-family: var(--wc-font-heading); cursor: pointer; }

.wc-row-desc { margin: .3rem 0 0; color: var(--wc-muted); font-size: .88rem; max-width: 46ch; }

/* The locked row keeps a real (disabled) switch beside its "always on" label. */
.wc-locked-group {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    flex: none;
}

.wc-locked { color: var(--wc-muted); font-size: .8rem; white-space: nowrap; }

.wc-switch input:disabled { cursor: not-allowed; }

/* switch */
.wc-switch { position: relative; flex: none; display: inline-flex; }

.wc-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.wc-track {
    width: 2.85rem;
    height: 1.55rem;
    border-radius: 1rem;
    background: #b9b9c2;
    border: 1px solid transparent;
    position: relative;
    transition: background-color .15s ease;
    pointer-events: none;
}

.wc-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.55rem - 6px);
    height: calc(1.55rem - 6px);
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}

.wc-switch input:checked + .wc-track { background: var(--wc-accent); }
.wc-switch input:checked + .wc-track::after { transform: translateX(1.3rem); }

.wc-switch input:disabled + .wc-track { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
    .wc-track, .wc-track::after { transition: none; }
}

/* ------------------------------------------------------------------- mobile */

@media (max-width: 40rem) {
    .wc-panel { flex-direction: column; }
    .wc-actions { width: 100%; }
    .wc-btn { flex: 1 1 auto; text-align: center; }
    .wc-btn-link { flex-basis: 100%; }
}

/* Editors need to reach the page behind the banner while working in DNN. */
body.dnnEditState .wc-root { display: none; }