/**
 * PCBuildMate Guides - Black Friday-check blocks inside guide content
 *
 * Used by the Black Friday guide (check box under the intro, annotated screenshot, tip box). Plain HTML in the
 * post content with these classes; no inline styles. Colours come from theme-vars.css tokens only.
 */

/* Check box: the "veld" with Mate, a GET form to /black-friday/ and a link to the deals. */
.guide-content .pkg-bf-check {
    margin: clamp(1.5rem, 2.5vw, 2.25rem) 0;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    align-items: start;
    background: var(--veld);
    color: var(--veld-tekst);
    border-radius: var(--radius-lg);
}

.guide-content .pkg-bf-check h2 {
    margin: 0;
    font-size: clamp(1.15rem, 1.4vw + 0.6rem, 1.4rem);
    line-height: 1.3;
    color: var(--veld-tekst);
}

.guide-content .pkg-bf-check p {
    margin: 0.4rem 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--veld-zwak);
}

.pkg-bf-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.3rem;
    background: var(--oppervlak);
    border-radius: var(--radius-lg);
}

.pkg-bf-form input {
    flex: 1;
    min-width: 0;
    padding: 0 0.75rem;
    border: 0;
    outline: 0;
    font: inherit;
    color: var(--text-primary);
    background: transparent;
}

.pkg-bf-form button {
    min-height: 3rem;
    padding: 0 1.25rem;
    border: 0;
    border-radius: var(--radius-md);
    font: inherit;
    font-weight: 700;
    color: var(--on-brand);
    background: var(--brand);
    cursor: pointer;
}

.pkg-bf-form input:focus-visible,
.pkg-bf-form button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.pkg-bf-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.guide-content .pkg-bf-mee {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-weight: 700;
    color: var(--veld-tekst);
}

.guide-content .pkg-bf-mee:hover {
    color: var(--veld-tekst);
    border-bottom-color: var(--veld-tekst);
}

/* Mate, drawn with CSS classes so the colours stay tokens. */
.pkg-mate {
    flex: none;
}

.pkg-mate__lijf {
    fill: var(--veld-kaart);
    stroke: var(--veld-tekst);
    stroke-width: 2.6;
}

.pkg-mate__lijf--donker {
    fill: var(--veld);
}

.pkg-mate__streep,
.pkg-mate__mond {
    fill: none;
    stroke: var(--accent);
    stroke-linecap: round;
}

.pkg-mate__streep {
    stroke-width: 2.6;
}

.pkg-mate__mond {
    stroke-width: 3;
}

.pkg-mate__oog {
    fill: var(--veld-tekst);
}

.pkg-mate__pupil {
    fill: var(--veld);
}

/* "Nieuw" label in the table of contents. */
.guide-content .pkg-bf-nieuw {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    vertical-align: 0.1em;
    color: var(--signal-go);
    background: var(--bg-secondary);
    border-radius: 4px;
}

/* Screenshot in a browser frame with numbered markers. */
.guide-content .pkg-bf-figuur {
    margin: 1.5rem 0 0;
}

.pkg-bf-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--plaat-lijn);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.pkg-bf-frame__balk {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.1rem;
    padding: 0 0.75rem;
    background: var(--grond);
    border-bottom: 1px solid var(--plaat-lijn);
}

.pkg-bf-frame__balk i {
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--plaat-lijn);
}

.pkg-bf-frame__balk span {
    margin-left: 0.75rem;
    padding: 0.05rem 0.65rem;
    font-size: 0.75rem;
    color: var(--plaat-inkt);
    background: var(--oppervlak);
    border: 1px solid var(--plaat-lijn);
    border-radius: 6px;
}

.pkg-bf-frame__beeld {
    position: relative;
}

.guide-content .pkg-bf-frame__beeld img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.pkg-bf-mark {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    font-weight: 800;
    color: var(--on-brand);
    background: var(--warning);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--oppervlak), 0 6px 14px rgba(var(--shadow-rgb), 0.25);
    transform: translate(-50%, -50%);
}

.pkg-bf-mark--1 { left: 6.5%; top: 35%; }
.pkg-bf-mark--2 { left: 56.5%; top: 51%; }
.pkg-bf-mark--3 { left: 95.5%; top: 57.7%; }

.guide-content .pkg-bf-stappen {
    display: grid;
    gap: 0.9rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.guide-content .pkg-bf-stappen li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.9rem;
    margin: 0;
}

.pkg-bf-stappen b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    color: var(--on-brand);
    background: var(--warning);
    border-radius: 50%;
}

/* Tip box with a link to the check. */
.guide-content .pkg-bf-tip {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 1.75rem 0;
    padding: 0.9rem 1.1rem;
    background: var(--grond);
    border: 1px solid var(--plaat-lijn);
    border-radius: var(--radius-lg);
}

.guide-content .pkg-bf-tip p {
    flex: 1;
    margin: 0;
    font-size: 1rem;
}

.guide-content .pkg-bf-tip a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .guide-content .pkg-bf-check {
        grid-template-columns: minmax(0, 1fr);
    }

    .pkg-bf-check .pkg-mate {
        width: 3.25rem;
        height: 3.25rem;
    }

    .pkg-bf-form {
        flex-direction: column;
        padding: 0;
        background: transparent;
    }

    .pkg-bf-form input {
        min-height: 3rem;
        background: var(--oppervlak);
        border-radius: var(--radius-md);
    }

    .pkg-bf-form button {
        width: 100%;
    }

    .pkg-bf-mark {
        width: 1.6rem;
        height: 1.6rem;
        font-size: 0.8rem;
    }

    .guide-content .pkg-bf-tip {
        flex-direction: column;
        align-items: flex-start;
    }
}