/*
Theme Name: Findit Portaal
Description: Thema voor het licentieportaal van Findit, in de huisstijl van findit.nl. Geen paginabouwer, geen externe verzoeken.
Version: 2.0.0
Author: Findit
Requires PHP: 8.1
Text Domain: findit-portaal
*/

/*
 * Lettertypen van findit.nl, hier meegeleverd in plaats van opgehaald bij
 * Google. Dat scheelt een verzoek naar buiten op een pagina waar klanten hun
 * adres en btw-nummer invullen, en het is meteen sneller.
 */
@font-face {
    font-family: 'Chivo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/chivo-700.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans Findit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/noto-sans-400.woff') format('woff');
}

:root {
    --fp-donker: #101828;
    --fp-groen: #20d187;
    --fp-groen-diep: #18b073;
    --fp-teal: #006D77;
    --fp-tekst: #667085;
    --fp-zacht: #98a2b3;
    --fp-rand: #e7ebf0;
    --fp-rand-sterk: #d7dee7;
    --fp-vlak: #f6f8fa;
    --fp-wit: #fff;
    --fp-rood: #b42318;
    --fp-oranje: #b54708;
    --fp-radius: 14px;
    --fp-radius-klein: 10px;
    --fp-schaduw: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12);
    --fp-kop: 'Chivo', 'Noto Sans Findit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --fp-body: 'Noto Sans Findit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fp-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--fp-tekst);
    background: var(--fp-vlak);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--fp-kop);
    color: var(--fp-donker);
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 .5em;
    letter-spacing: -.01em;
}
h1 { font-size: 34px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p { margin: 0 0 1em; }
a { color: var(--fp-teal); text-decoration: none; }
a:hover { color: var(--fp-groen-diep); text-decoration: underline; }

/* ---------------------------------------------------------------- kop en voet */

.fp-kop {
    background: var(--fp-wit);
    border-bottom: 1px solid var(--fp-rand);
    position: sticky;
    top: 0;
    z-index: 20;
}
.fp-kop-binnen {
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.fp-logo img { display: block; height: 32px; width: auto; }
.fp-kop nav { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.fp-kop nav a {
    color: var(--fp-donker);
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
}
.fp-kop nav a:hover { background: var(--fp-vlak); color: var(--fp-teal); text-decoration: none; }
.fp-kop nav a.fp-nav-uit { color: var(--fp-zacht); }

.fp-inhoud { max-width: 1080px; margin: 0 auto; padding: 44px 24px 72px; }
.fp-smal { max-width: 680px; }

.fp-voet {
    border-top: 1px solid var(--fp-rand);
    background: var(--fp-wit);
    color: var(--fp-zacht);
    font-size: 14px;
}
.fp-voet-binnen {
    max-width: 1080px;
    margin: 0 auto;
    padding: 26px 24px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.fp-voet nav { display: flex; gap: 20px; flex-wrap: wrap; }
.fp-voet a { color: var(--fp-tekst); }

/* --------------------------------------------------------------------- kop van de pagina */

.fp-paginakop { margin: 0 0 28px; }
.fp-paginakop p { color: var(--fp-tekst); margin: 0; font-size: 18px; }

/* ------------------------------------------------------------------------- kaarten */

.fp-kaart {
    background: var(--fp-wit);
    border: 1px solid var(--fp-rand);
    border-radius: var(--fp-radius);
    padding: 26px 28px;
    margin: 0 0 22px;
    box-shadow: var(--fp-schaduw);
}
.fp-kaart-kop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--fp-rand);
}
.fp-kaart-kop h2, .fp-kaart-kop h3 { margin: 0; }
.fp-kaart-prijs { font-size: 15px; color: var(--fp-tekst); margin: 6px 0 0; }
.fp-kaart-prijs strong { color: var(--fp-donker); font-size: 19px; font-family: var(--fp-kop); }

/* Een streep in de kleur van de status, links op de kaart. */
.fp-kaart-actief { border-left: 4px solid var(--fp-groen); }
.fp-kaart-wacht  { border-left: 4px solid #f79009; }
.fp-kaart-stop   { border-left: 4px solid var(--fp-rood); }

/* ------------------------------------------------------------------------- formulier */

.fp-veld { margin: 0 0 20px; }
.fp-veld label {
    display: block;
    font-family: var(--fp-kop);
    font-weight: 700;
    color: var(--fp-donker);
    font-size: 14px;
    margin: 0 0 7px;
}
.fp-veld input[type="text"],
.fp-veld input[type="email"],
.fp-veld input[type="password"],
.fp-veld select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--fp-rand-sterk);
    border-radius: var(--fp-radius-klein);
    font: inherit;
    font-size: 16px;
    color: var(--fp-donker);
    background: var(--fp-wit);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fp-veld input:focus, .fp-veld select:focus {
    outline: none;
    border-color: var(--fp-groen);
    box-shadow: 0 0 0 4px rgba(32, 209, 135, .16);
}
.fp-veld input[readonly] { background: var(--fp-vlak); color: var(--fp-tekst); }
.fp-veld .fp-hulp { font-size: 14px; color: var(--fp-zacht); margin: 7px 0 0; line-height: 1.5; }
.fp-rij { display: flex; gap: 18px; flex-wrap: wrap; }
.fp-rij > .fp-veld { flex: 1 1 220px; }

/* ------------------------------------------------------------------------- knoppen */

.fp-knop {
    display: inline-block;
    padding: 13px 26px;
    background: var(--fp-donker);
    color: var(--fp-wit);
    border: 1px solid var(--fp-donker);
    border-radius: 999px;
    font-family: var(--fp-kop);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    line-height: 1.4;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fp-knop:hover { background: var(--fp-groen); border-color: var(--fp-groen); color: var(--fp-donker); text-decoration: none; }
.fp-knop[disabled] { opacity: .5; cursor: not-allowed; }
.fp-knop-breed { width: 100%; }

.fp-knop-groen { background: var(--fp-groen); border-color: var(--fp-groen); color: var(--fp-donker); }
.fp-knop-groen:hover { background: var(--fp-groen-diep); border-color: var(--fp-groen-diep); color: var(--fp-wit); }

.fp-knop-rustig { background: transparent; color: var(--fp-donker); border-color: var(--fp-rand-sterk); }
.fp-knop-rustig:hover { background: var(--fp-vlak); border-color: var(--fp-donker); color: var(--fp-donker); }

.fp-knop-klein { padding: 8px 18px; font-size: 14px; }

/* ------------------------------------------------------------------------- meldingen */

.fp-melding {
    padding: 15px 18px;
    border-radius: var(--fp-radius-klein);
    margin: 0 0 22px;
    border: 1px solid;
    border-left-width: 4px;
    font-size: 16px;
}
.fp-melding p:last-child { margin-bottom: 0; }
.fp-melding-fout { background: #fffbfa; border-color: #fda29b; color: var(--fp-rood); }
.fp-melding-goed { background: #f2fdf8; border-color: var(--fp-groen); color: #05603a; }
.fp-melding-info { background: #f5fbfc; border-color: var(--fp-teal); color: #0b4f56; }

/* ------------------------------------------------------------------------- labels */

.fp-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    font-family: var(--fp-kop);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.fp-label::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.fp-label-actief { background: #e9fbf3; color: #05603a; }
.fp-label-wacht  { background: #fff8ed; color: var(--fp-oranje); }
.fp-label-stop   { background: #fffbfa; color: var(--fp-rood); }
.fp-label-uit    { background: var(--fp-vlak); color: var(--fp-zacht); }

/* ------------------------------------------------------------------------- licentiecode */

.fp-code-blok { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.fp-code {
    flex: 1 1 280px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .08em;
    background: var(--fp-donker);
    color: #eaf7f1;
    border-radius: var(--fp-radius-klein);
    padding: 15px 18px;
    margin: 0;
    word-break: break-all;
}
.fp-kopieer { flex: 0 0 auto; }

/* ------------------------------------------------------------------------- tabellen */

.fp-tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.fp-tabel th, .fp-tabel td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--fp-rand); }
.fp-tabel th {
    font-family: var(--fp-kop);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fp-zacht);
    font-weight: 700;
    background: var(--fp-vlak);
}
.fp-tabel th:first-child { border-top-left-radius: var(--fp-radius-klein); }
.fp-tabel th:last-child { border-top-right-radius: var(--fp-radius-klein); }
.fp-tabel tr:last-child td { border-bottom: 0; }
.fp-tabel tbody tr:hover { background: #fbfcfd; }
.fp-tabel-omhulsel { overflow-x: auto; border: 1px solid var(--fp-rand); border-radius: var(--fp-radius-klein); }
.fp-tabel-getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------------- bedragen */

.fp-bedragen { border-top: 1px solid var(--fp-rand); margin-top: 20px; padding-top: 18px; }
.fp-bedragen div { display: flex; justify-content: space-between; padding: 5px 0; gap: 16px; }
.fp-bedragen .fp-totaal {
    font-family: var(--fp-kop);
    font-size: 21px;
    font-weight: 700;
    color: var(--fp-donker);
    border-top: 1px solid var(--fp-rand);
    margin-top: 10px;
    padding-top: 14px;
}

/* ------------------------------------------------------------------------- plannen */

.fp-plannen { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 26px; }
.fp-plan {
    flex: 1 1 220px;
    border: 2px solid var(--fp-rand);
    border-radius: var(--fp-radius);
    padding: 20px 22px;
    background: var(--fp-wit);
    position: relative;
    display: block;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.fp-plan:hover { border-color: var(--fp-groen); text-decoration: none; transform: translateY(-2px); box-shadow: var(--fp-schaduw); }
.fp-plan.fp-gekozen { border-color: var(--fp-groen); background: #f7fefb; }
.fp-plan.fp-gekozen::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--fp-groen);
    box-shadow: inset 0 0 0 3px var(--fp-wit), inset 0 0 0 4px var(--fp-groen);
}
.fp-plan-naam { display: block; font-family: var(--fp-kop); font-weight: 700; color: var(--fp-donker); font-size: 15px; }
.fp-plan-prijs { display: block; font-family: var(--fp-kop); font-size: 30px; font-weight: 700; color: var(--fp-donker); margin: 8px 0 0; letter-spacing: -.02em; }
.fp-plan-prijs span { font-family: var(--fp-body); font-size: 14px; font-weight: 400; color: var(--fp-zacht); letter-spacing: 0; }
.fp-plan-voordeel {
    display: inline-block;
    margin-top: 10px;
    background: var(--fp-groen);
    color: var(--fp-donker);
    font-family: var(--fp-kop);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}

/* ------------------------------------------------------------------------- inloggen */

/*
 * wp_login_form() levert een vaste opmaak met p.login-username, p.login-password
 * en input#wp-submit. Die kunnen we niet aanpassen, dus wordt hij hier
 * opgemaakt. De labels staan van zichzelf naast het veld; display:block zet ze
 * erboven, zoals in de rest van het portaal.
 */
.fp-inlog { max-width: 440px; margin: 0 auto; }
.fp-inlog .fp-kaart { padding: 30px 32px; }
.fp-inlog .fp-paginakop { margin-bottom: 22px; }

#loginform p { margin: 0 0 18px; }

#loginform label {
    display: block;
    font-family: var(--fp-kop);
    font-weight: 700;
    color: var(--fp-donker);
    font-size: 14px;
    margin: 0 0 7px;
}

#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"] {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--fp-rand-sterk);
    border-radius: var(--fp-radius-klein);
    font: inherit;
    font-size: 16px;
    color: var(--fp-donker);
    background: var(--fp-wit);
    transition: border-color .15s ease, box-shadow .15s ease;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#loginform input[type="email"]:focus {
    outline: none;
    border-color: var(--fp-groen);
    box-shadow: 0 0 0 4px rgba(32, 209, 135, .16);
}

/* Het vinkje hoort naast zijn tekst te staan, niet erboven. */
#loginform .login-remember { margin-bottom: 22px; }
#loginform .login-remember label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--fp-body);
    font-weight: 400;
    font-size: 15px;
    color: var(--fp-tekst);
    margin: 0;
    cursor: pointer;
}
#loginform .login-remember input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--fp-groen);
    cursor: pointer;
}

#loginform .login-submit { margin: 0; }

#loginform #wp-submit {
    display: block;
    width: 100%;
    padding: 13px 26px;
    background: var(--fp-donker);
    color: var(--fp-wit);
    border: 1px solid var(--fp-donker);
    border-radius: 999px;
    font-family: var(--fp-kop);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#loginform #wp-submit:hover { background: var(--fp-groen); border-color: var(--fp-groen); color: var(--fp-donker); }

.fp-inlog-vergeten { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--fp-rand); text-align: center; font-size: 15px; }

/* De melding die WordPress zelf toont na een mislukte inlogpoging. */
.fp-inlog #login_error,
.fp-inlog .login .message {
    background: #fffbfa;
    border: 1px solid #fda29b;
    border-left-width: 4px;
    border-radius: var(--fp-radius-klein);
    color: var(--fp-rood);
    padding: 13px 16px;
    margin: 0 0 20px;
    font-size: 15px;
}

/* ------------------------------------------------------------------------- lege staat */

.fp-leeg { text-align: center; padding: 20px 10px; }
.fp-leeg h2 { margin-bottom: 10px; }
.fp-leeg p { color: var(--fp-tekst); max-width: 460px; margin: 0 auto 22px; }

/* ------------------------------------------------------------------------- klein scherm */

@media (max-width: 700px) {
    body { font-size: 16px; }
    h1 { font-size: 27px; }
    .fp-inhoud { padding: 28px 18px 56px; }
    .fp-kaart { padding: 20px; }
    .fp-kaart-kop { flex-direction: column; align-items: flex-start; gap: 10px; }
    .fp-code { font-size: 16px; letter-spacing: .05em; }
    .fp-kop-binnen { padding: 14px 18px; }
    .fp-kop nav { width: 100%; justify-content: flex-start; gap: 4px; }
    .fp-kop nav a { padding: 8px 12px; font-size: 14px; }
}