/**
 * /inloggen/ (LoginPageService, templates/login-template.php): inside the
 * theme's header and footer, in the shop's own colours.
 */
.drk-login { --clay: var(--drk-primary, #B9784C); --clay-dark: var(--drk-primary-hover, #95602F); --clay-tint: #EFDCC8; --clay-soft: #F8EDE2; --line: #E4D9C8; --line-strong: #CBBC9F; --ink: #2C2520; --ink-soft: #6B6154; --ink-faint: #8C8674; --sage-d: #56604A; --sage-t: #E4E7DD;
    background: var(--drk-menu, #F7F1E7); padding: 56px 16px 80px; color: var(--ink); font-size: 15px; line-height: 1.5; }
.drk-login *, .drk-login *::before, .drk-login *::after { box-sizing: border-box; }
.drk-login [hidden] { display: none !important; }
.drk-login-card { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 22px 50px -24px rgba(44, 37, 32, .35); overflow: hidden; }

.drk-login-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #F3EBDF; padding: 6px; gap: 6px; }
a.drk-login-tab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; color: var(--ink-soft); text-decoration: none; border: 1.5px solid transparent; transition: background .15s, border-color .15s, color .15s; }
a.drk-login-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .55); }
a.drk-login-tab.is-active { background: #fff; color: var(--ink); border-color: var(--clay); box-shadow: 0 6px 16px -10px rgba(44, 37, 32, .4); }
.drk-login-tab-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--clay-tint); color: var(--clay-dark); }
a.drk-login-tab[data-drk-audience="uitvaartverzorger"] .drk-login-tab-ico { background: var(--sage-t); color: var(--sage-d); }
.drk-login-tab b { display: block; font-size: 14px; line-height: 1.25; }
.drk-login-tab small { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

.drk-login-body { padding: 30px 34px 32px; }
.drk-login-head h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 30px; line-height: 1.15; margin: 0 0 8px; color: var(--ink); }
.drk-login-head p { margin: 0 0 22px; color: var(--ink-soft); }
.drk-login-error { background: #F9E4DF; color: #8A2F1F; border-radius: 12px; padding: 11px 14px; font-size: 14px; font-weight: 600; margin-bottom: 18px; }

.drk-login-form { margin: 0; }
.drk-login-field { display: block; margin: 0 0 16px; font-weight: 400; }
.drk-login-field > span { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.drk-login-field-row { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; }
.drk-login-field-row a { font-weight: 600; font-size: 12.5px; color: var(--clay-dark); text-decoration: none; }
.drk-login-field-row a:hover { text-decoration: underline; }
.drk-login-hint { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 400; color: var(--ink-soft); }
.drk-login .drk-login-field input { width: 100%; height: 48px; margin: 0; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; box-shadow: none; font-size: 15px; color: var(--ink); }
.drk-login .drk-login-field input:focus { border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-soft); outline: 0; }
.drk-login-remember { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 400; color: var(--ink-soft); margin: 0 0 20px; cursor: pointer; }
.drk-login-remember input { margin: 0; width: 17px; height: 17px; accent-color: var(--clay); }
.drk-login button.drk-login-submit { display: block; width: 100%; height: 52px; margin: 0; border: 0; border-radius: 999px; background: var(--clay); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1; cursor: pointer; transition: background .15s; }
.drk-login button.drk-login-submit:hover { background: var(--clay-dark); }
/* Uitloggen: the same button, as a link (it is a plain address with a nonce). */
.drk-login a.drk-login-submit { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 180px; height: 52px; padding: 0 28px; border-radius: 999px; background: var(--clay); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .15s; }
.drk-login a.drk-login-submit:hover { background: var(--clay-dark); color: #fff; }
.drk-login-actions { margin-top: 24px; gap: 20px; }
/* Just logged out, and anything else worth one calm line. */
.drk-login-note { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--clay-soft); color: var(--ink); font-size: 14px; }
.drk-login[data-audience="uitvaartverzorger"] button.drk-login-submit { background: var(--sage-d); }
.drk-login[data-audience="uitvaartverzorger"] button.drk-login-submit:hover { background: #454D3B; }
.drk-login :focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.drk-login-alt { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.drk-login-alt b { font-size: 15px; }
.drk-login-alt p { margin: 4px 0 14px; color: var(--ink-soft); font-size: 14px; }
.drk-login-alt-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
a.drk-login-link-btn { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--clay); color: var(--clay-dark); font-weight: 700; font-size: 14px; text-decoration: none; background: #fff; }
a.drk-login-link-btn:hover { background: var(--clay-soft); }
a.drk-login-link { color: var(--clay-dark); font-weight: 700; font-size: 14px; text-decoration: none; }
a.drk-login-link:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .drk-login { padding: 24px 12px 56px; }
    .drk-login-tabs { grid-template-columns: 1fr; }
    .drk-login-body { padding: 24px 20px 26px; }
    .drk-login-head h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .drk-login * { transition: none !important; } }

/* The invitation page (funeral-director-invite-template.php) shares this card. */
.drk-login-note { margin: 0 0 18px; color: var(--ink-soft); font-size: 14.5px; }
.drk-login-note b { color: var(--ink); }
.drk-login-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drk-login .drk-login-field input:disabled { background: #F3EBDF; color: var(--ink-soft); }
@media (max-width: 560px) { .drk-login-two { grid-template-columns: 1fr; } }