/* More empty space above the page box */
#privacy-content {
    margin-top: 6rem;
}

/* VOIMA logo above the page box, same look as on the front page.
   Centered here, because this box isn't laid out like the front page box. */
#privacy-box #main-logo {
    left: 50%;
    transform: translateX(-50%);
}

/* Big, eye-catching orange card: title, "send an email to refund@voima.gg" and notes */
#privacy-box .refund-email-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.25rem;
    margin: 0 0 1.5rem 0;
    padding: 1.5rem;
    border: 0.2rem solid var(--light);
    border-radius: var(--border-radius);
    background: radial-gradient(circle, #ff9a1a, #e05d00);
    box-shadow: var(--box-shadow);
    text-align: center;
}

#privacy-box .refund-email-card p {
    margin: 0;
}

/* The two email lines sit close together */
.refund-card-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* All card text: white-to-gray shaded text with a black outline.
   The outline uses drop-shadow, because text-shadow would cover the shading. */
.refund-shaded {
    font-size: 1.4rem;
    line-height: 1.3;
    background-image: linear-gradient(to bottom, #ffffff 30%, #a9a9a9 100%);
    background-size: 100% 1lh;
    background-repeat: repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Thick black outline, then a soft drop shadow below it */
    filter:
        drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000)
        drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000)
        drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.6));
}

/* The @ uses the same font as the currency signs on the pre-order page */
.refund-at {
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.refund-card-title.refund-shaded {
    font-size: 2rem;
    line-height: 1.2;
}

/* "Please wait patiently..." line: bigger than the title */
.refund-big-line.refund-shaded {
    font-size: 2.3rem;
    line-height: 1.2;
}

/* The address line: same look as the text around it, bigger */
.refund-email-big.refund-shaded {
    font-size: 2.2rem;
}

#privacy-box a.refund-email-address {
    text-decoration: none;
    overflow-wrap: anywhere;
    -webkit-text-fill-color: transparent;
}

/* Extra space under the title */
#privacy-box .refund-card-title {
    margin-bottom: 0.5rem;
}

/* Extra space above "no reason needed, 100% money back." */
#privacy-box .refund-email-card p.refund-no-reason {
    margin-top: 1.5rem;
}

/* Text under the card: bigger, with a full empty line between paragraphs */
#privacy-box > p {
    margin: 1.5em 0;
    font-size: 1.4rem;
}

/* Underline in the card text (white, so it shows on the shaded text) */
.refund-underline {
    text-decoration: underline;
    text-decoration-color: #fff;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.15em;
}

/* Openable sections ("why i use ai" etc.): round buttons as wide as the page box,
   with the arrow before the text. Clicking opens the text under the button. */
.refund-sections {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1.5rem 0;
}

.refund-sections .update-header {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    padding: 0.6rem 1.8rem;
    border: 0.2rem solid var(--light);
    border-radius: 999px;
    /* Same blue as the AI disclaimer label on the front page */
    background: radial-gradient(circle, #2c6fa3, #04182b);
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: transform 0.2s ease, filter 0.2s ease;
    text-shadow: none;
}

.refund-sections .update-header:hover {
    opacity: 1;
    transform: scale(1.05);
    filter: brightness(1.15);
}

/* An open section's button turns orange, like the box at the top */
.refund-sections .update-header[aria-expanded="true"] {
    background: radial-gradient(circle, #ff9a1a, #e05d00);
}

.refund-sections .update-header h3 {
    justify-content: center;
    gap: 0.6rem;
    /* Same text look as the orange card: white-to-gray shading, thick black outline */
    background-image: linear-gradient(to bottom, #ffffff 30%, #a9a9a9 100%);
    background-size: 100% 1lh;
    background-repeat: repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Slightly thinner outline than the orange card */
    filter:
        drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000)
        drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000)
        drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.6));
}

.refund-sections .toggle-icon {
    margin-left: 0;
}

.refund-sections .update-content {
    align-self: stretch;
    margin: 0 0 0.5rem 0;
}

.refund-sections .update-content p {
    margin: 0.75rem 0;
}

/* "Back to Home" under the text, on the left */
.refund-home-row {
    display: flex;
    justify-content: flex-start;
}

#privacy-box .refund-home-row a.home-btn {
    text-decoration: none;
}

/* (i) tooltip: shows on hover, or on tap/focus on phones.
   It appears full-width above its paragraph, so it never goes off-screen. */
#privacy-box p {
    position: relative;
}

.info-tip {
    display: inline-block;
    vertical-align: middle;
    outline: none;
}

.info-tip-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--light);
    color: var(--purple);
    font-family: Georgia, serif;
    font-weight: bold;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1;
}

.info-tip:focus-visible .info-tip-icon {
    outline: 2px solid #ffc525;
    outline-offset: 2px;
}

.info-tip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    padding: 0.75rem 1rem;
    border: 0.15rem solid var(--light);
    border-radius: 0.75rem;
    background: var(--dark);
    box-shadow: var(--box-shadow);
    font-size: 0.95rem;
    line-height: 1.4;
    z-index: 10;
    transition: opacity 0.2s ease;
}

.info-tip:hover .info-tip-text,
.info-tip:focus .info-tip-text {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 800px) {
    #privacy-content {
        margin-top: 3rem;
    }

    #privacy-box .refund-email-card {
        gap: 1.5rem;
    }

    .refund-shaded {
        font-size: 1.15rem;
    }

    .refund-card-title.refund-shaded {
        font-size: 1.5rem;
    }

    .refund-big-line.refund-shaded {
        font-size: 1.7rem;
    }

    .refund-email-big.refund-shaded {
        font-size: 1.6rem;
    }

    #privacy-box > p {
        font-size: 1.15rem;
    }

}