/* ==========================================================
   Opinión 51 — engagement, cookie banner and homepage extras
   Loaded after built/screen.css. Replaces CSS that lived in
   Code Injection and source styles that never reached the build.
   ========================================================== */

/* CTA button. The tip jar (.o51-tip-btn) is owned by another team member and intentionally not styled here. */
.o51-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 2.2rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    background: var(--ghost-accent-color, #111);
    color: #fff !important;
    transition: opacity .15s ease, transform .15s ease;
}
.o51-cta-btn:hover { opacity: .88; transform: translateY(-1px); }

/* End-of-column box (sign up / upgrade / gift) */
.o51-end-cta {
    grid-column: main-start / main-end;
    justify-self: center;
    box-sizing: border-box;
    width: min(100%, 680px);
    margin: 0 auto 4.5rem;
    padding: 3.4rem 3rem;
    text-align: center;
    border-radius: 24px;
    background: #111;
    color: #fff;
}
.o51-end-cta h3 { margin: 0 auto .9rem; font-size: 2.6rem; line-height: 1.15; color: #fff; }
.o51-end-cta p { max-width: 520px; margin: .5rem auto 2rem; line-height: 1.5; color: rgba(255,255,255,.85); }
.o51-end-cta .o51-cta-btn { background: #fff; color: #111 !important; }
.o51-end-cta--gift { padding: 2rem 2.4rem; background: #f4f2f0; color: #111; }
.o51-end-cta--gift p { margin: 0 auto; color: #111; }
.o51-end-cta--gift a { color: #111; font-weight: 700; text-decoration: underline; }

/* Ghost members signup form inside the end box */
.o51-signup-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 520px;
    margin: 0 auto;
}
.o51-signup-form input[type="email"] {
    flex: 1 1 240px;
    box-sizing: border-box;
    height: 48px;
    padding: 0 1.6rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    color: #111;
    background: #fff;
}
.o51-signup-form .o51-form-message { display: none; flex-basis: 100%; margin: .8rem 0 0; font-size: 1.5rem; }
.o51-signup-form.success input,
.o51-signup-form.success button { display: none; }
.o51-signup-form.success .o51-form-success,
.o51-signup-form.error .o51-form-error { display: block; }
.o51-signup-form.loading button { opacity: .6; pointer-events: none; }

.o51-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* "Es gratis" popup (styles existed in the source CSS but were never built) */
.o51-popup[hidden] { display: none; }
.o51-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0,0,0,.52);
}
.o51-popup-card {
    position: relative;
    width: min(520px, 100%);
    box-sizing: border-box;
    padding: 3.2rem;
    border-radius: 18px;
    background: #fff;
    text-align: center;
    box-shadow: 0 20px 70px rgba(0,0,0,.25);
}
.o51-popup-card h2 { margin: 0 0 1rem; font-size: 3rem; }
.o51-popup-card p { margin: 0 0 2rem; font-size: 1.8rem; }
.o51-popup-close {
    position: absolute;
    right: 12px;
    top: 10px;
    border: 0;
    background: transparent;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
}

/* Cookie banner (moved from Code Injection) */
#o51-cookie-banner {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    max-width: 760px;
    margin: 0 auto;
    background: #111;
    color: #fff;
    padding: 20px;
    border-radius: 12px;
    z-index: 999999;
    box-shadow: 0 5px 25px rgba(0,0,0,.28);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    display: none;
    box-sizing: border-box;
}
#o51-cookie-banner p { margin: 0 0 15px; padding: 0; }
#o51-cookie-banner a { color: #fff; text-decoration: underline; }
#o51-cookie-banner a:hover { opacity: .8; }
.o51-cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.o51-cookie-buttons button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 7px;
    cursor: pointer;
}
#o51-cookie-accept { background: #fff; color: #111; border: 1px solid #fff; }
#o51-cookie-reject { background: transparent; color: #fff; border: 1px solid #999; }
#o51-cookie-accept:hover,
#o51-cookie-reject:hover { opacity: .85; }

/* Homepage campaign banner (moved from Code Injection) */
.custom-banner { display: flex; justify-content: center; padding: 15px 0; }
.custom-banner img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }

/* Homepage slider on phones (2.1.5): no empty space above the photo.
   On phones each slide stacks photo-over-text with flex-direction: column-reverse, and opinion51.js stretches every
   slide to the tallest one, so the leftover height used to collect above the photo. Now the photo stays at the top,
   the text area takes the leftover height (text stays centred in it), and the near-full-screen minimum is dropped
   on phones. Desktop is unchanged. */
@media (max-width: 768px) {
    .gh-slider,
    .gh-slide .gh-slide-link { min-height: 0; }
    .gh-slide .gh-slide-link { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
    .gh-slide .gh-slide-link .gh-slide-image { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; min-height: 0; }
    .gh-slide .gh-slide-link .gh-slide-wrapper { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; }
}

/* Comment counts on cards stay hidden (moved from Code Injection) */
.gh-card-comments,
.gh-slide-comments { display: none !important; }

@media (max-width: 600px) {
    .o51-end-cta { width: calc(100% - 2rem); padding: 2.6rem 1.6rem; }
    .o51-end-cta h3 { font-size: 2.2rem; }
    .o51-popup-card { padding: 2.8rem 2rem; }
    .o51-popup-card h2 { font-size: 2.5rem; }
    #o51-cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 17px; font-size: 13px; }
    .o51-cookie-buttons { flex-direction: column; }
    .o51-cookie-buttons button { width: 100%; }
}