.analytics-consent {
    position: relative;
    z-index: 10000;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Aqui vivia un boton fijo en la esquina que se quedaba para siempre despues
   de responder. Reabrir el panel es cosa del enlace del pie. */

.analytics-consent__dialog {
    box-sizing: border-box;
    position: fixed;
    /* Base propia, en px. Este aviso tambien cae dentro de las invitaciones, y
       liebe arrastra el `html{font-size:10px}` de Bootstrap 3: con
       `rem` el panel salia a 300px en vez de 480px y con la mitad de aire. Lo
       de dentro va en `em` y cuelga de aqui. */
    font-size: 16px;
    right: 1em;
    bottom: 1em;
    z-index: 10002;
    width: min(24em, calc(100vw - 2em));
    padding: 1em;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 1em;
    background: #34242d;
    color: #fff;
    box-shadow: 0 1em 3em rgba(34, 20, 28, .24);
}

/* El color se declara en cada texto, no se hereda del panel.
   Heredar solo funciona cuando nada mas apunta al elemento, y las plantillas
   traen sus propias reglas sobre `p`: una regla que aplica gana siempre a la
   herencia, por floja que sea su especificidad. Asi que el aviso salia con el
   gris del diseno anfitrion sobre su propio fondo oscuro. En liebe quedaba a
   1.18:1, practicamente invisible; en weddingo a 2.54:1.

   Va con !important porque liebe declara `.template-liebe p` tambien con
   !important, y ahi no hay especificidad que valga. Este panel pone su propio
   fondo oscuro y es el mismo en las doce invitaciones: el color de su
   texto no es una decision de la plantilla anfitriona. */
.analytics-consent__dialog.analytics-consent__dialog p,
.analytics-consent__dialog.analytics-consent__dialog a,
.analytics-consent__dialog.analytics-consent__dialog strong,
.analytics-consent__dialog.analytics-consent__dialog small {
    color: #fff !important;
}

.analytics-consent__dialog p {
    margin: 0 0 .85em;
    line-height: 1.55;
}

.analytics-consent__state {
    margin: -.35em 0 .85em;
    font-size: .85em;
    opacity: .78;
}

.analytics-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
}

.analytics-consent__actions button {
    min-height: 2.75em;
    padding: .6em .9em;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: .7em;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.analytics-consent__actions .analytics-consent__primary {
    border-color: transparent;
    background: #f0b7c5;
    color: #2d2027;
    font-weight: 700;
}

.analytics-consent [hidden] {
    display: none !important;
}

html[data-analytics-consent-state="granted"] .analytics-consent[data-analytics-consent-mode="pending"] .analytics-consent__dialog,
html[data-analytics-consent-state="denied"] .analytics-consent[data-analytics-consent-mode="pending"] .analytics-consent__dialog {
    display: none;
}

html[data-analytics-consent-state="unset"] .analytics-consent--mobile-flow[data-analytics-consent-mode="pending"] {
    box-sizing: border-box;
    width: 100%;
    padding: var(--public-nav-clearance, 1rem) 1rem 0;
    pointer-events: none;
}

.analytics-consent--mobile-flow[data-analytics-consent-mode="pending"] .analytics-consent__dialog {
    position: static;
    width: min(42rem, 100%);
    margin: 0 auto;
    padding: .85em;
    box-shadow: 0 .5em 1.5em rgba(34, 20, 28, .16);
    pointer-events: auto;
}

html[data-analytics-consent-state="unset"] .analytics-consent--mobile-flow[data-analytics-consent-mode="pending"] + main > :first-child:not(.hero) {
    padding-top: var(--public-section-pt, 1.25rem);
}

@media (max-width: 900px) {
    html[data-analytics-consent-state="unset"] body.auth-page:has(> .analytics-consent--mobile-flow[data-analytics-consent-mode="pending"]) {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .analytics-consent__dialog {
        right: .75em;
        bottom: .75em;
        width: min(21em, calc(100vw - 1.5em));
        padding: .85em;
    }

    .analytics-consent__actions button {
        flex: 1 1 9em;
    }
}